:root { --ink:#171827; --muted:#666a7d; --purple:#8651f4; --blue:#5578f6; --coral:#ff6f7e; --line:rgba(45,39,84,.12); --shadow:0 30px 80px rgba(55,40,115,.13); }
*{box-sizing:border-box}html{min-width:320px}body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);background:#fbfaff;font-family:Inter,ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button,fieldset{border:0}svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(5px);pointer-events:none}.ambient-one{width:520px;height:520px;top:-240px;left:-180px;background:radial-gradient(circle,rgba(145,105,255,.17),transparent 68%)}.ambient-two{width:600px;height:600px;right:-270px;bottom:-300px;background:radial-gradient(circle,rgba(84,129,255,.15),transparent 67%)}
.topbar{display:flex;align-items:center;justify-content:space-between;width:min(1180px,calc(100% - 48px));height:90px;margin:auto}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:22px;font-weight:900;letter-spacing:-.05em}.brand-button{padding:0;background:transparent}.brand-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--blue),var(--purple));box-shadow:0 8px 20px rgba(101,82,230,.25);transform:rotate(-6deg)}.brand-icon i{font-size:18px;font-style:normal;transform:rotate(6deg)}.topbar-actions{display:flex;align-items:center;gap:13px}.best-score{display:flex;align-items:center;gap:10px;padding:0 15px;height:43px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.75)}.best-score span{color:var(--muted);font-size:12px;font-weight:700}.best-score strong{font-size:18px}.icon-button{display:grid;place-items:center;width:43px;height:43px;padding:10px;border:1px solid var(--line);border-radius:13px;color:#5b5f72;background:#fff;transition:.2s}.icon-button:hover,.icon-button[aria-pressed="false"]{color:#6d50dc;background:#f0edff}.icon-button svg{width:21px}
.app-shell{width:min(1180px,calc(100% - 48px));min-height:calc(100vh - 180px);margin:0 auto}.welcome-panel{position:relative;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px;min-height:690px;padding:70px 78px;overflow:hidden;border:1px solid rgba(104,83,210,.1);border-radius:38px;background:radial-gradient(circle at 13% 10%,rgba(213,203,255,.75),transparent 31%),radial-gradient(circle at 91% 85%,rgba(212,224,255,.78),transparent 33%),linear-gradient(135deg,#f5f2ff,#fff 54%,#f1f4ff);box-shadow:var(--shadow)}.welcome-panel::before{content:"";position:absolute;width:430px;height:430px;right:-120px;top:-170px;border:1px solid rgba(118,83,230,.1);border-radius:50%;box-shadow:0 0 0 50px rgba(120,90,230,.025),0 0 0 100px rgba(120,90,230,.02)}.welcome-copy,.setup-card{position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(101,78,211,.2);border-radius:99px;color:#6653d7;background:rgba(255,255,255,.7);font-size:12px;font-weight:850}.eyebrow span,.status-dot,.arena-label span{width:7px;height:7px;border-radius:50%;background:linear-gradient(var(--blue),var(--purple));box-shadow:0 0 0 4px rgba(111,82,224,.1)}h1{margin:30px 0 23px;font-size:clamp(48px,6vw,76px);line-height:1.06;letter-spacing:-.065em}h1 strong{color:transparent;background:linear-gradient(100deg,#5174ee,#9a48ee);background-clip:text;-webkit-background-clip:text}.welcome-copy>p{max-width:570px;margin:0;color:var(--muted);font-size:17px;line-height:1.8}.how-to{display:flex;align-items:center;gap:13px;margin-top:42px;color:#56596b;font-size:12px;font-weight:750}.how-to span{display:grid;gap:5px}.how-to b{color:#735ee3;font-size:11px}.how-to i{width:30px;height:1px;background:rgba(69,60,111,.18)}
.setup-card{padding:32px;border:1px solid rgba(68,57,126,.12);border-radius:26px;background:rgba(255,255,255,.84);box-shadow:0 20px 55px rgba(58,44,114,.12);backdrop-filter:blur(15px)}.setup-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.setup-heading span{font-size:18px;font-weight:850}.setup-heading small{color:#85889a}.difficulty-options{display:grid;gap:10px;padding:0;margin:0}.difficulty-options label{display:block}.difficulty-options input{position:absolute;opacity:0;pointer-events:none}.difficulty-options label>span{display:grid;grid-template-columns:1fr auto;align-items:center;padding:15px 17px;border:1px solid var(--line);border-radius:15px;background:#fff;transition:border-color .2s,box-shadow .2s,background .2s;cursor:pointer}.difficulty-options label>span b{font-size:15px}.difficulty-options label>span small{color:#6f7283;font-weight:800}.difficulty-options label>span i{grid-column:1/-1;margin-top:5px;color:#9698a7;font-size:11px;font-style:normal}.difficulty-options input:checked+span{border-color:#8062ea;background:#f6f3ff;box-shadow:0 0 0 3px rgba(118,91,225,.11)}.difficulty-options input:focus-visible+span{outline:3px solid rgba(85,120,246,.35);outline-offset:2px}.primary-button,.secondary-button,.light-button{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 21px;border-radius:14px;font-weight:850;transition:transform .2s,box-shadow .2s}.primary-button{width:100%;margin-top:22px;color:#fff;background:linear-gradient(110deg,var(--blue),var(--purple));box-shadow:0 12px 25px rgba(103,76,221,.24)}.primary-button span{margin-left:auto;padding:5px 8px;border-radius:7px;color:#e6e1ff;background:rgba(255,255,255,.15);font-size:10px}.primary-button:hover,.secondary-button:hover,.light-button:hover{transform:translateY(-2px)}.desktop-hint{margin:13px 0 0;color:#9294a3;text-align:center;font-size:10px}
.game-layout{padding-bottom:25px}.game-card{overflow:hidden;border:1px solid rgba(42,36,76,.13);border-radius:28px;background:#fff;box-shadow:var(--shadow)}.hud{display:grid;grid-template-columns:115px 115px 1fr 120px auto;align-items:center;min-height:84px;padding:0 24px;border-bottom:1px solid var(--line)}.hud-item{display:grid;gap:3px;padding-left:20px;border-left:1px solid var(--line)}.hud-item:first-child{padding-left:0;border-left:0}.hud-item span{color:#898c9d;font-size:10px;font-weight:800;letter-spacing:.08em}.hud-item strong{font-size:25px}.hud-item strong i{font-style:normal}.hud-item.combo strong{color:#7458de}.hud-item.phase strong{font-size:16px;color:#6750cf}.lives>div{display:flex;gap:7px;margin-top:4px}.lives i{width:18px;height:16px;background:var(--coral);clip-path:path("M9 16C7 13 0 9 0 4.8 0 .8 5-.7 9 3.2 13-.7 18 .8 18 4.8 18 9 11 13 9 16Z");transition:.25s}.lives i.lost{background:#dedee7;transform:scale(.8)}.hud-actions{display:flex;gap:9px}.ghost-button{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:11px;color:#616476;background:#fff;font-size:12px;font-weight:750}.ghost-button:hover{color:#6d51db;background:#f7f5ff}.ghost-button svg{width:16px}.skip-button{color:#7358dc;background:#f5f2ff}.arena{position:relative;height:470px;overflow:hidden;color:#fff;background:radial-gradient(circle at 50% 50%,#282642 0,#171828 48%,#10111c 100%)}.arena::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(128,96,255,.12),transparent 22%)}.arena-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle,#000,transparent 76%)}.arena-label{position:absolute;top:22px;left:50%;display:flex;align-items:center;gap:9px;transform:translateX(-50%);color:#9ea1b8;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.arena-label span{background:#8e72ff;box-shadow:0 0 12px #8e72ff}.onboarding-step{position:absolute;z-index:5;top:54px;left:22px;padding:7px 11px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:#d8d1ff;background:rgba(91,71,178,.35);font-size:10px;font-weight:850}.onboarding-message{position:absolute;z-index:5;top:90px;left:50%;width:max-content;max-width:calc(100% - 40px);margin:0;padding:9px 14px;border-radius:12px;transform:translateX(-50%);color:#fff;background:rgba(91,71,178,.72);font-size:11px;font-weight:800}.letter-wrap{position:absolute;z-index:2;left:var(--x);top:var(--y);display:grid;place-items:center;width:122px;height:122px;transform:translate(-50%,-50%);transition:left .16s ease,top .16s ease}.timer-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 12px rgba(130,100,255,.35))}.timer-track,.timer-progress{fill:none;stroke-width:4}.timer-track{stroke:rgba(255,255,255,.1)}.timer-progress{stroke:#9b7aff;stroke-dasharray:333;stroke-dashoffset:0;transition:stroke .2s}.target-letter{display:grid;place-items:center;width:88px;height:88px;border:1px solid rgba(255,255,255,.2);border-radius:25px;background:linear-gradient(145deg,rgba(133,96,246,.95),rgba(80,104,238,.93));box-shadow:0 17px 45px rgba(68,48,183,.5),inset 0 1px rgba(255,255,255,.26);font-size:54px;font-weight:900;text-shadow:0 4px 15px rgba(0,0,0,.2)}.letter-wrap.pop{animation:letter-pop .22s ease}.feedback{position:absolute;z-index:4;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.7);font-size:50px;font-weight:950;pointer-events:none}.feedback.show{animation:feedback .45s ease}.feedback.good{color:#7ce0bd}.feedback.bad{color:#ff8490}.pause-overlay,.remedial-overlay{position:absolute;z-index:6;inset:0;display:grid;place-content:center;gap:20px;text-align:center;background:rgba(12,13,24,.76);backdrop-filter:blur(8px)}.pause-overlay[hidden],.remedial-overlay[hidden]{display:none}.pause-overlay>span{font-size:34px;font-weight:900}.remedial-overlay{z-index:1;pointer-events:none;background:linear-gradient(rgba(46,36,96,.58),rgba(12,13,24,.22));backdrop-filter:none}.remedial-overlay p{margin:0;color:#ddd6ff;font-weight:800}.remedial-overlay strong{font-size:34px;color:#fff}.event-banner{position:absolute;z-index:5;top:54px;left:50%;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;transform:translateX(-50%);color:#f5df91;background:rgba(104,72,202,.6);font-size:11px;font-weight:850}.finger-tip{position:absolute;z-index:4;bottom:18px;left:50%;margin:0;transform:translateX(-50%);color:#a9abc0;font-size:11px;white-space:nowrap}.light-button{min-width:160px;color:#5639c6;background:#fff}.arena.is-hit{animation:arena-good .25s}.arena.is-miss{animation:arena-bad .28s}
.keyboard-panel{margin-top:18px;padding:24px 30px 28px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(51,41,101,.08);backdrop-filter:blur(12px)}.keyboard-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.keyboard-heading>div{display:flex;align-items:center;gap:9px}.keyboard-heading h2{margin:0;font-size:14px}.keyboard-heading p{margin:0;color:#888b9c;font-size:10px}.keyboard-heading kbd{padding:4px 7px;border:1px solid var(--line);border-radius:6px;background:#f7f6fb;font-family:inherit}.keyboard{display:grid;gap:7px;max-width:880px;margin:auto}.key-row{display:flex;justify-content:center;gap:7px}.key{display:grid;place-items:center;width:58px;height:46px;border:1px solid rgba(45,40,77,.14);border-bottom-width:3px;border-radius:9px;color:#5f6274;background:linear-gradient(#fff,#f5f4f9);font-size:13px;font-weight:800;transition:.12s}.key.target{border-color:#8060ea;color:#6949db;background:#eee9ff;box-shadow:0 0 0 3px rgba(127,95,233,.1)}.key.pressed{border-bottom-width:1px;transform:translateY(2px);color:#fff;background:linear-gradient(145deg,var(--blue),var(--purple));box-shadow:0 5px 13px rgba(105,79,216,.22)}.key.wrong{color:#fff;background:var(--coral);border-color:#ec5f70}footer{display:flex;justify-content:space-between;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:30px 0 40px;color:#9698a7;font-size:11px}footer span{color:#676a7b;font-weight:800}footer p{margin:0}
.result-dialog{width:min(520px,calc(100% - 32px));padding:45px;border:0;border-radius:30px;color:var(--ink);text-align:center;background:linear-gradient(145deg,#fff,#f4f1ff);box-shadow:0 35px 100px rgba(20,15,56,.32)}.result-dialog::backdrop{background:rgba(18,17,32,.63);backdrop-filter:blur(7px)}.result-kicker{margin:0 0 10px;color:#7157da;font-size:11px;font-weight:900;letter-spacing:.14em}.result-dialog h2{margin:0;font-size:28px;letter-spacing:-.04em}.result-orbit{position:relative;width:65px;height:65px;margin:0 auto 20px}.result-orbit span{position:absolute;display:grid;place-items:center;width:33px;height:33px;border-radius:10px;color:#fff;background:linear-gradient(145deg,var(--blue),var(--purple));font-size:13px;font-weight:900;box-shadow:0 7px 15px rgba(82,66,192,.24)}.result-orbit span:nth-child(1){left:16px}.result-orbit span:nth-child(2){left:0;bottom:0;transform:rotate(-10deg)}.result-orbit span:nth-child(3){right:0;bottom:0;transform:rotate(10deg)}.final-score{display:grid;justify-items:center;margin:27px 0}.final-score>span{color:#8b8e9f;font-size:11px}.final-score strong{font-size:65px;line-height:1.1;letter-spacing:-.06em}.final-score small{padding:5px 9px;border-radius:99px;color:#5b42cb;background:#eae5ff;font-weight:800}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 0;border-block:1px solid var(--line)}.result-stats div{display:grid;gap:5px}.result-stats div+div{border-left:1px solid var(--line)}.result-stats span{color:#9193a2;font-size:10px}.result-stats strong{font-size:20px}.result-actions{display:flex;gap:10px;margin-top:25px}.result-actions .primary-button{margin:0}.secondary-button{width:100%;color:#5f6274;background:#ecebf3}
.training-home{display:grid;gap:26px;padding-bottom:30px}.training-home>div{display:grid;gap:26px}.home-heading{display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;padding:58px 68px;border:1px solid rgba(104,83,210,.1);border-radius:34px;background:radial-gradient(circle at 12% 10%,rgba(213,203,255,.78),transparent 32%),radial-gradient(circle at 92% 80%,rgba(212,224,255,.8),transparent 34%),linear-gradient(135deg,#f5f2ff,#fff 55%,#f1f4ff);box-shadow:var(--shadow)}.home-heading h1{margin:24px 0 16px;font-size:clamp(42px,5.2vw,68px)}.home-heading p{max-width:610px;margin:0;color:var(--muted);line-height:1.7}.week-goal{display:grid;gap:8px;min-width:190px;padding:25px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.76);box-shadow:0 16px 35px rgba(55,40,115,.09)}.week-goal span,.section-heading span,.endless-card span{color:#735ee3;font-size:11px;font-weight:900;letter-spacing:.08em}.week-goal strong{font-size:27px}.week-goal small{color:#8b8e9f}.daily-section,.curriculum{padding:30px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.84);box-shadow:0 18px 50px rgba(51,41,101,.08)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section-heading h2{margin:5px 0 0;font-size:25px}.section-heading small{color:#8b8e9f}.daily-training{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.daily-training article{display:grid;gap:7px;padding:18px;border:1px solid var(--line);border-radius:17px;background:#faf9ff}.daily-training article>span{color:#7d65dc;font-size:10px;font-weight:900}.daily-training article strong{font-size:17px}.daily-training article small{color:#9193a2}.daily-training article.done{border-color:#a6dfcb;background:#f2fcf8}.daily-training article.done>span::after{content:" · 已完成";color:#2f9f78}.home-primary{max-width:360px;margin:20px auto 0}.chapter-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.chapter-card{padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#fff,#f7f6ff)}.chapter-heading{display:flex;justify-content:space-between;gap:10px}.chapter-heading p{margin:0;color:#7963d9;font-size:10px;font-weight:900}.chapter-heading h3{margin:5px 0;font-size:20px}.chapter-heading span{color:#8b8e9f;font-size:12px}.chapter-heading>strong{color:#8b72e7;font-size:12px}.level-path{position:relative;display:flex;justify-content:space-between;gap:7px;margin-top:22px}.level-path::before{content:"";position:absolute;left:20px;right:20px;top:18px;height:2px;background:#e1deee}.level-node{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;min-width:0;padding:0;color:#514c66;background:transparent}.level-node b{display:grid;place-items:center;width:38px;height:38px;border:2px solid #d5d1e7;border-radius:50%;background:#fff}.level-node small{max-width:68px;overflow:hidden;color:#858199;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.level-node.completed b{border-color:#7660d8;color:#fff;background:#7660d8}.level-node.completed small{color:#d09921}.level-node:disabled{opacity:.45}.endless-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 34px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(120deg,#f3f0ff,#edf3ff)}.endless-card h2{margin:5px 0}.endless-card p{margin:0;color:#7d8092}.endless-card .secondary-button{width:auto;min-width:190px}.setup-dialog{width:min(470px,calc(100% - 32px));padding:34px;border:0;border-radius:28px;background:linear-gradient(145deg,#fff,#f4f1ff);box-shadow:0 35px 100px rgba(20,15,56,.32)}.setup-dialog::backdrop{background:rgba(18,17,32,.63);backdrop-filter:blur(7px)}.setup-dialog h2{margin:0 0 22px;text-align:center}.setup-dialog .dialog-close{margin-top:10px}.result-stars{min-height:38px;margin-top:16px;color:#efb73c;font-size:31px;letter-spacing:6px}.result-insight{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:14px;text-align:left;background:#fff}.result-insight:empty{display:none}.result-insight>span{font-size:24px;color:#6e58d6}.result-insight div{display:grid;gap:3px}.result-insight small{color:#8b8e9f}.unlock-hint{padding:10px;border:1px dashed #bbb3df;border-radius:12px;color:#625a7a;font-size:11px}.storage-warning{color:#b24350;font-size:11px}.result-actions{flex-wrap:wrap}.result-actions>*{flex:1 1 120px}
@keyframes letter-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes feedback{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}@keyframes arena-good{50%{box-shadow:inset 0 0 65px rgba(62,225,167,.2)}}@keyframes arena-bad{50%{box-shadow:inset 0 0 70px rgba(255,81,102,.2)}}
[hidden]{display:none!important}:focus-visible{outline:3px solid rgba(82,110,241,.42);outline-offset:3px}
@media(max-width:900px){.welcome-panel{grid-template-columns:1fr;gap:45px;padding:55px;min-height:auto}.welcome-copy{text-align:center}.welcome-copy>p{margin-inline:auto}.how-to{justify-content:center}.setup-card{width:min(520px,100%);margin:auto}.home-heading{padding:45px}.chapter-list{grid-template-columns:1fr}.hud{grid-template-columns:90px 90px 1fr 100px}.hud-actions{grid-column:1/-1;justify-content:center;padding:12px 0}.arena{height:420px}.key{width:7.6vw;max-width:58px;min-width:32px}.keyboard-panel{padding-inline:16px}}
@media(max-width:650px){.topbar,.app-shell,footer{width:calc(100% - 28px)}.topbar{height:76px}.brand{font-size:18px}.best-score span{display:none}.welcome-panel{padding:40px 20px;border-radius:27px}.welcome-copy>p{font-size:15px}.how-to{display:none}h1{font-size:46px}.setup-card{padding:22px}.home-heading{grid-template-columns:1fr;padding:30px 22px}.home-heading h1{font-size:43px}.week-goal{min-width:0}.daily-section,.curriculum{padding:20px 14px}.daily-training{grid-template-columns:1fr}.endless-card{align-items:stretch;flex-direction:column;padding:24px}.endless-card .secondary-button{width:100%}.hud{grid-template-columns:repeat(4,1fr);padding:12px}.hud-item{padding-left:8px}.hud-item strong{font-size:18px}.hud-item.phase strong{font-size:13px}.hud-actions{grid-column:1/-1;justify-content:center;margin-top:5px;flex-wrap:wrap}.arena{height:390px}.letter-wrap{width:108px;height:108px}.target-letter{width:78px;height:78px;font-size:46px}.keyboard-heading{justify-content:center}.keyboard-heading p{display:none}.keyboard{width:100%;min-width:0;gap:5px}.key-row{width:100%;min-width:0;gap:3px}.key{flex:1 1 0;min-width:0;max-width:34px;width:0;height:39px;font-size:11px}.keyboard-panel{padding:20px 7px}.result-dialog{padding:35px 22px}.result-actions{flex-direction:column}.result-stats strong{font-size:17px}footer{display:grid;gap:8px;text-align:center}.desktop-hint{color:#7863d9}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}