:root{--bg: #0a0e1a;--bg-panel: #131a2e;--bg-panel-2: #1c2742;--accent: #4fd1ff;--accent-2: #ffcc4f;--danger: #ff5a6e;--ok: #5affa0;--text: #e6ecff;--text-dim: #8a97bd;--border: #2a3656;font-family:Segoe UI,Hiragino Kaku Gothic ProN,Meiryo,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(circle at 50% -10%,#1a2440 0%,var(--bg) 60%);color:var(--text)}#root{display:flex;justify-content:center;align-items:flex-start;padding:24px 16px}.app{width:100%;max-width:860px}.screen-anim{position:relative;animation:screenIn .32s cubic-bezier(.2,.7,.2,1) both}@keyframes screenIn{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}.screen-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;overflow:hidden;border-radius:16px}.screen-flash:before{content:"";position:absolute;left:-10%;right:-10%;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--accent),#eaf6ff,var(--accent),transparent);box-shadow:0 0 22px 4px #4fd1ffb3;animation:scanSweep .5s ease-out both}.screen-flash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(79,209,255,.12),transparent 32%);animation:flashFade .5s ease-out both}@keyframes scanSweep{0%{top:-2%;opacity:0}15%{opacity:1}to{top:102%;opacity:0}}@keyframes flashFade{0%{opacity:0}20%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.screen-anim{animation:none}.screen-flash{display:none}}h1,h2,h3{margin:0 0 .5em}.screen{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 20px 60px #00000073}.title-hero{text-align:center;padding:18px 0 10px}.title-hero h1{font-size:34px;letter-spacing:.04em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.title-hero p{color:var(--text-dim);margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:var(--bg-panel-2);color:var(--text);padding:12px 18px;border-radius:10px;font-size:15px;cursor:pointer;transition:transform .08s ease,border-color .15s ease,background .15s}.btn:hover{border-color:var(--accent);transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(180deg,#2a73ff,#1d5ad6);border-color:#3f82ff;font-weight:600}.btn-accent{background:linear-gradient(180deg,#2aa0c8,#1d7fa6);border-color:var(--accent)}.btn-ghost{background:transparent}.btn-glow{box-shadow:0 0 0 1px #4fd1ff4d,0 0 22px #2a73ff73;animation:btnpulse 2.2s ease-in-out infinite}@keyframes btnpulse{50%{box-shadow:0 0 0 1px #4fd1ff99,0 0 34px #2a73ffb3}}.btn-row{display:flex;flex-wrap:wrap;gap:12px}.stack{display:flex;flex-direction:column;gap:12px}.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.pill{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:14px}.pill b{color:var(--accent-2)}.dim{color:var(--text-dim)}.title-stage{position:relative;width:100%;height:min(78vh,620px);min-height:520px;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px #00000080,0 0 0 1px #4fd1ff14 inset}.title-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.title-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px 26px;background:radial-gradient(ellipse at center,#0a0e1a8c,#0a0e1a26 45%,#0a0e1a00 75%);pointer-events:none}.title-overlay .pill,.title-overlay .btn{pointer-events:auto}.title-hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.title-hud .pill{background:#131a2eb3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.title-center{text-align:center}.title-logo{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center;line-height:1.05}.title-logo-main,.title-logo-sub{font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:.04em;background:linear-gradient(180deg,#eaf6ff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 28px rgba(79,209,255,.35)}.title-logo-sub{background:linear-gradient(180deg,#fff0c8,var(--accent-2));-webkit-background-clip:text;background-clip:text}.title-logo-x{font-size:clamp(22px,4vw,36px);font-weight:800;color:var(--text-dim);text-shadow:0 0 16px rgba(79,209,255,.5)}.title-tagline{margin:12px 0 0;color:var(--text);opacity:.85;font-size:clamp(12px,2.4vw,15px);letter-spacing:.02em}.title-hint{margin:8px 0 0;color:var(--accent);font-size:clamp(11px,2vw,13px);letter-spacing:.04em;animation:hintpulse 2s ease-in-out infinite}@keyframes hintpulse{50%{opacity:.5}}.title-logo.title-logo-small .title-logo-main,.title-logo.title-logo-small .title-logo-sub{font-size:clamp(20px,4vw,32px)}.title-logo.title-logo-small .title-logo-x{font-size:clamp(16px,3vw,24px)}.title-menu{display:flex;flex-direction:column;gap:10px;max-width:460px;width:100%;margin:0 auto}.btn-start{font-size:clamp(18px,3.4vw,24px);font-weight:800;letter-spacing:.18em;padding:16px 18px}.btn-back{align-self:center;font-size:13px;padding:8px 14px}.menu-stage{position:relative;width:100%;min-height:min(80vh,640px);border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px #0000008c,0 0 0 1px #4fd1ff14 inset;display:flex;align-items:center;justify-content:center;padding:30px 22px;background:radial-gradient(120% 80% at 12% -5%,rgba(42,115,255,.22),transparent 50%),radial-gradient(120% 80% at 105% 105%,rgba(255,204,79,.13),transparent 48%),linear-gradient(180deg,#0c1226,#070a14)}.menu-stage:before{content:"";position:absolute;top:-10%;right:-10%;bottom:-10%;left:-10%;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 85% 22%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 55% 12%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 10% 68%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 92% 78%,rgba(255,255,255,.5),transparent);background-size:340px 340px;background-repeat:repeat;animation:menustars 70s linear infinite;opacity:.7}@keyframes menustars{to{transform:translateY(340px)}}.menu-stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(transparent 60%,#4fd1ff0a),repeating-linear-gradient(90deg,rgba(79,209,255,.05) 0 1px,transparent 1px 64px),radial-gradient(120% 120% at 50% 45%,transparent 58%,rgba(0,0,0,.5))}.menu-inner{position:relative;z-index:1;width:100%;max-width:480px;display:flex;flex-direction:column;gap:14px}.menu-header{text-align:center}.menu-header .title-logo{justify-content:center}.menu-subtitle{margin-top:6px;font-size:12px;letter-spacing:.3em;color:var(--accent);opacity:.8}.menu-accent-line{height:2px;width:130px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:lineglow 2.6s ease-in-out infinite}@keyframes lineglow{50%{width:210px;opacity:.65}}.menu-status{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.menu-stat{display:flex;flex-direction:column;align-items:center;min-width:96px;padding:7px 14px;border:1px solid var(--border);border-radius:10px;background:#131a2e8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.menu-stat span{font-size:10px;letter-spacing:.14em;color:var(--text-dim)}.menu-stat b{margin-top:2px;font-size:15px;color:var(--accent-2)}.menu-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}.menu-item{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px 13px 18px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(90deg,#1c2742d9,#131a2e99);color:var(--text);cursor:pointer;text-align:left;overflow:hidden;transition:transform .12s ease,border-color .15s,box-shadow .15s,background .15s}.menu-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.55;transition:opacity .15s,box-shadow .15s}.menu-item:hover{transform:translate(4px);border-color:var(--accent);box-shadow:0 0 22px #4fd1ff40}.menu-item:hover:before{opacity:1;box-shadow:0 0 12px var(--accent)}.menu-item-primary{background:linear-gradient(90deg,#2a73ff66,#1d5ad62e);border-color:#3f82ff;box-shadow:0 0 0 1px #4fd1ff38,0 0 22px #2a73ff59}.menu-item-primary:before{opacity:1;box-shadow:0 0 12px var(--accent)}.mi-icon{font-size:22px;width:30px;text-align:center;flex-shrink:0}.mi-body{flex:1;display:flex;flex-direction:column}.mi-title{font-weight:700;font-size:15px;letter-spacing:.02em}.mi-sub{font-size:12px;color:var(--text-dim)}.mi-arrow{color:var(--accent);opacity:.45;transition:transform .12s ease,opacity .12s}.menu-item:hover .mi-arrow{transform:translate(4px);opacity:1}.title-menu .btn{background:#131a2ed1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.title-menu .btn-primary{background:linear-gradient(180deg,#2a73ff,#1d5ad6)}.title-menu .btn-accent{background:linear-gradient(180deg,#2aa0c8,#1d7fa6)}.basics-screen{position:relative}.basics-steps{margin-bottom:12px}.instructor{display:block;flex-shrink:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}.instructor-lg{width:150px;height:158px;animation:instrBob 3.4s ease-in-out infinite}.instructor-sm{width:58px;height:61px}@keyframes instrBob{50%{transform:translateY(-6px)}}.iv-visor{animation:visorPulse 2.4s ease-in-out infinite}@keyframes visorPulse{50%{opacity:.72}}.iv-antenna{animation:antPulse 1.5s ease-in-out infinite}@keyframes antPulse{50%{opacity:.3}}.basics-speech{display:flex;align-items:center;gap:12px;margin-bottom:14px}.speech-bubble{position:relative;flex:1;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.6;color:var(--text)}.speech-bubble:before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-right-color:var(--bg-panel-2)}.basics-intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:#080b14e6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;cursor:pointer}.dialogue{width:100%;max-width:520px;position:relative;background:linear-gradient(180deg,#1c2742f5,#131a2ef0);border:1px solid var(--accent);border-radius:14px;padding:16px 18px 12px;box-shadow:0 0 28px #4fd1ff38}.dlg-name{position:absolute;top:-12px;left:16px;background:var(--accent);color:#06121a;font-weight:800;font-size:13px;padding:3px 13px;border-radius:999px}.dlg-text{font-size:16px;line-height:1.75;min-height:3.5em;margin-top:6px}.dlg-caret{color:var(--accent);animation:blink 1s steps(2,start) infinite}.dlg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.basics-target{display:flex;align-items:center;justify-content:center;gap:24px;padding:10px 0 6px}.basics-target.miss{animation:shake .18s}.bt-next{display:flex;align-items:baseline;gap:10px}.bt-char{font-size:56px;font-weight:800;font-family:Consolas,Courier New,monospace;line-height:1;text-shadow:0 0 22px currentColor}.bt-finger{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text)}.finger-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 10px currentColor}.basics-strip{text-align:center;font-family:Consolas,Courier New,monospace;font-size:20px;letter-spacing:.18em;margin:6px 0 16px;min-height:28px;word-break:break-all}.basics-strip .done{color:var(--ok)}.basics-strip .cur{color:var(--bg);background:var(--accent);border-radius:4px;padding:1px 3px}.basics-strip .todo{color:var(--text-dim)}.basics-strip .word-chunk{display:inline-block;white-space:nowrap}.basics-strip .strip-arrow{margin:0 9px;color:var(--text-dim);font-weight:700}.basics-strip .strip-arrow.done{color:var(--ok)}.basics-strip .strip-arrow.cur{color:var(--bg);background:var(--accent);border-radius:4px;padding:0 4px}.kb{display:flex;flex-direction:column;gap:7px;align-items:center}.kb-row{display:flex;gap:7px}.kb-r1{padding-left:22px}.kb-r2{padding-left:34px}.kb-r3{padding-left:50px}.kb-space-row{margin-top:1px}.key{width:clamp(34px,6.4vw,46px);height:clamp(34px,6.4vw,46px);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,2.4vw,15px);font-weight:600;border:1px solid var(--border);background:var(--bg-panel-2);position:relative;transition:transform .08s,box-shadow .1s,background .1s}.key.home{border-color:#3a4666;background:#16203a}.key.bump:after{content:"";position:absolute;bottom:6px;width:12px;height:2px;border-radius:2px;background:currentColor;opacity:.7}.key.target{transform:translateY(-3px);font-weight:800}.kb-space{width:clamp(180px,40vw,280px)}.basics-foot{margin-top:16px;text-align:center}.basics-progress{height:6px;background:var(--bg-panel-2);border-radius:999px;overflow:hidden;margin:0 auto 6px;max-width:360px}.basics-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .1s}.basics-result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#0a0e1ae0;border-radius:16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.basics-judge{display:flex;align-items:center;justify-content:center;gap:18px}.rank-badge{font-size:60px;font-weight:900;line-height:1;letter-spacing:.02em;text-shadow:0 0 24px currentColor;animation:rankPop .4s cubic-bezier(.2,1.4,.4,1) both}@keyframes rankPop{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.typing-stage{text-align:center;padding:28px 12px}.word-display{font-size:40px;font-weight:700;letter-spacing:.02em}.word-meaning{font-size:26px;font-weight:700;color:var(--accent-2)}.word-reading{margin-top:14px;font-size:28px;letter-spacing:.08em;font-family:Consolas,Courier New,monospace}.word-reading .done{color:var(--ok)}.word-reading .cursor{color:var(--bg);background:var(--accent);border-radius:3px;animation:blink 1s steps(2,start) infinite}.word-reading .todo{color:var(--text-dim)}@keyframes blink{50%{opacity:.35}}.typing-stage.miss{animation:shake .2s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.combo{font-size:22px;font-weight:700;color:var(--accent-2);min-height:28px}.combo.big{font-size:30px;text-shadow:0 0 18px rgba(255,204,79,.6)}.timer-bar{height:8px;background:var(--bg-panel-2);border-radius:999px;overflow:hidden;margin:8px 0 20px}.timer-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.card{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:12px;padding:16px}.card h3{font-size:16px}.card .desc{color:var(--text-dim);font-size:13px;min-height:34px}.card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.lvl{font-variant-numeric:tabular-nums}.bar{height:6px;background:#0c1326;border-radius:999px;overflow:hidden;margin:8px 0}.bar>span{display:block;height:100%;background:var(--accent)}.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tab{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer}.tab.active{color:var(--text);border-color:var(--accent);background:var(--bg-panel-2)}.section-title{margin:18px 0 8px;color:var(--accent);font-size:14px;text-transform:uppercase;letter-spacing:.08em}.note{background:#4fd1ff14;border:1px dashed var(--accent);border-radius:10px;padding:12px 14px;color:var(--text-dim);font-size:14px}.result-big{font-size:44px;font-weight:800;color:var(--accent-2);text-align:center}.stat-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}