:root{--bg:#07111f;--panel:#0d1b2b;--line:#203247;--text:#f5f7fa;--muted:#8fa2b6;--cyan:#29d3c2;--blue:#5297ff;--red:#ff6978;--gold:#ffc857;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% -10%,#12385a55,transparent 34%),var(--bg);color:var(--text)}button,input,select{font:inherit}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1120px)/2));border-bottom:1px solid #ffffff12}.brand,.icon-button{border:0;background:none;color:var(--text);cursor:pointer}.brand{display:flex;align-items:center;gap:11px;font-weight:650;font-size:17px}.brand b{color:var(--cyan)}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--cyan);border-radius:50%;color:var(--cyan);font-size:11px;letter-spacing:.05em}.icon-button{font-size:24px;color:var(--muted)}main{width:min(1120px,calc(100% - 32px));margin:auto}.screen{display:none;padding:56px 0 80px}.screen.active{display:block}.hero{max-width:790px}.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--cyan);font-weight:750;text-transform:uppercase}h1{font-size:clamp(42px,7vw,80px);line-height:.98;letter-spacing:-.055em;margin:18px 0 26px}h1 em{font-family:Georgia,serif;font-weight:400;color:#9fb3c8}h2{font-size:clamp(34px,5vw,58px);letter-spacing:-.04em;margin:10px 0 36px}.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:650px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}.mode-card{position:relative;min-height:245px;padding:26px;text-align:left;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#11243a,#0a1726);color:var(--text);cursor:pointer;transition:.2s}.mode-card:hover,.mode-card:focus-visible{border-color:var(--cyan);transform:translateY(-3px)}.mode-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#17304a;color:var(--cyan);font-size:19px;margin-bottom:25px}.visual .mode-icon{border-radius:14px;color:var(--blue);font-weight:800}.mode-code{position:absolute;right:24px;top:25px;font:700 12px ui-monospace;color:var(--muted)}.mode-card strong,.mode-card small{display:block}.mode-card strong{font-size:25px}.mode-card small{color:var(--muted);margin-top:7px}.arrow{position:absolute;right:25px;bottom:25px;font-size:23px;color:var(--cyan)}.home-summary{margin-top:28px;color:var(--muted)}.back{background:none;border:0;color:var(--muted);padding:0;cursor:pointer}.setup-grid{display:grid;gap:28px}fieldset{border:0;padding:0;margin:0}legend{font-size:13px;color:var(--muted);margin-bottom:12px}.choice-grid{display:grid;gap:10px}.levels{grid-template-columns:repeat(3,1fr)}.counts{grid-template-columns:repeat(7,1fr)}.categories{grid-template-columns:repeat(5,1fr)}.choice-grid input{position:absolute;opacity:0}.choice-grid label span{display:flex;height:100%;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:13px;background:var(--panel);cursor:pointer}.choice-grid input:checked+span{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}.choice-grid b{color:var(--cyan);font:700 12px ui-monospace;margin-bottom:22px}.choice-grid small{color:var(--muted);margin-top:7px;line-height:1.35}.counts label span,.categories label span{align-items:center;padding:16px 8px}.audio-controls{display:flex;align-items:center;gap:28px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:13px}.audio-controls label{display:flex;align-items:center;gap:10px;color:var(--muted)}select,input[type=range]{accent-color:var(--cyan)}select{background:#081422;border:1px solid var(--line);padding:9px;border-radius:8px}.switch span{width:42px;height:23px;border-radius:20px;background:#304054;position:relative}.switch span:after{content:"";position:absolute;width:17px;height:17px;top:3px;left:3px;border-radius:50%;background:white;transition:.2s}.switch input{display:none}.switch input:checked+span{background:var(--cyan)}.switch input:checked+span:after{left:22px}.primary,.secondary,.danger{border:0;border-radius:10px;padding:15px 22px;font-weight:700;cursor:pointer}.primary{background:var(--cyan);color:#031512}.secondary{background:#18293b;color:var(--text)}.danger{background:var(--red);color:#170308}.start{margin-top:30px;min-width:230px;display:flex;justify-content:space-between}.training{min-height:calc(100vh - 72px);padding-top:24px}.session-head{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.quit{background:none;border:0;color:var(--muted);cursor:pointer}.progress,.timer{height:3px;background:#15263a;margin-top:12px}.progress i,.timer i{display:block;height:100%;width:0;background:var(--cyan);transition:width .25s}.timer{margin-top:3px}.timer i{background:var(--gold)}.exercise-stage{min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.expression{font:600 clamp(54px,10vw,110px) ui-monospace;letter-spacing:-.07em}.audio-prompt button{width:92px;height:92px;border-radius:50%;border:1px solid var(--cyan);background:#123044;color:var(--cyan);font-size:30px;display:block;margin:0 auto 18px;cursor:pointer}.audio-prompt strong,.audio-prompt small{display:block}.audio-prompt small{color:var(--muted);margin-top:8px}.answer-zone{max-width:530px;margin:auto}.answer-zone>label{display:block;text-align:center;color:var(--muted);font-size:13px;margin-bottom:8px}.answer-row{display:flex;gap:9px}.answer-row input{min-width:0;flex:1;background:#0b1827;border:1px solid var(--line);border-radius:11px;padding:15px;color:var(--text);text-align:center;font-size:27px;outline:none}.answer-row input:focus{border-color:var(--cyan)}.validate{border:0;border-radius:11px;background:var(--cyan);color:#041512;padding:0 24px;font-weight:750}.numpad{display:grid;grid-template-columns:repeat(3,1fr) 56px;grid-template-areas:"d1 d2 d3 bksp" "d4 d5 d6 ." "d7 d8 d9 ." "sign zero dot .";gap:7px;max-width:530px;margin:12px auto}.numpad button{padding:12px;border:1px solid var(--line);border-radius:8px;background:#0d1c2d;color:var(--text);cursor:pointer}.numpad .enter{background:#173d3a;color:var(--cyan)}.numpad button[data-key="1"]{grid-area:d1}.numpad button[data-key="2"]{grid-area:d2}.numpad button[data-key="3"]{grid-area:d3}.numpad button[data-key="4"]{grid-area:d4}.numpad button[data-key="5"]{grid-area:d5}.numpad button[data-key="6"]{grid-area:d6}.numpad button[data-key="7"]{grid-area:d7}.numpad button[data-key="8"]{grid-area:d8}.numpad button[data-key="9"]{grid-area:d9}.numpad button[data-key="±"]{grid-area:sign}.numpad button[data-key="0"]{grid-area:zero}.numpad button[data-key="."]{grid-area:dot}.numpad button[data-key="⌫"]{grid-area:bksp}.feedback{max-width:700px;margin:20px auto;padding:18px;border-left:3px solid var(--cyan);background:var(--panel);line-height:1.55}.feedback.bad{border-color:var(--red)}.feedback h3{margin:0 0 7px}.feedback button{margin-top:12px}.results{text-align:center}.score-ring{width:170px;height:170px;border-radius:50%;display:grid;place-content:center;margin:20px auto 35px;background:conic-gradient(var(--cyan) var(--score),#1b2b3c 0);position:relative}.score-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg)}.score-ring>*{position:relative}.score-ring strong{font-size:38px}.score-ring span{font-size:10px;color:var(--muted)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.metric strong,.metric span{display:block}.metric strong{font-size:25px}.metric span{font-size:11px;color:var(--muted);margin-top:5px}.corrections{text-align:left;margin-top:35px}.correction{padding:18px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:20px}.correction code{font-size:18px}.correction p{margin:0;color:var(--muted)}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:30px}.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.category-row{display:grid;grid-template-columns:150px 1fr 55px;gap:12px;align-items:center;margin:12px 0}.category-row i{height:6px;background:var(--cyan);display:block;border-radius:5px}.category-row small{color:var(--muted);font-size:11px}.history{margin-top:35px}.history-row{display:grid;grid-template-columns:1fr repeat(4,90px);padding:13px 0;border-top:1px solid var(--line);color:var(--muted)}dialog{border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);padding:25px;max-width:420px}dialog::backdrop{background:#000b}dialog div{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:720px){.screen{padding-top:34px}.mode-grid,.levels{grid-template-columns:1fr}.counts{grid-template-columns:repeat(4,1fr)}.categories{grid-template-columns:repeat(3,1fr)}.audio-controls{align-items:stretch;flex-direction:column}.metric-grid,.stats-cards{grid-template-columns:1fr 1fr}.exercise-stage{min-height:235px}.correction{grid-template-columns:1fr}.history-row{grid-template-columns:1fr repeat(3,58px)}.history-row span:nth-child(5){display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Cockpit visual system */
:root{--bg:#050b12;--panel:#0a141f;--panel-2:#0d1926;--line:#1c3042;--text:#f3f8fa;--muted:#8193a2;--cyan:#42e8d0;--blue:#6ba7ff;--glow:0 0 40px #42e8d012;--radius:22px}
html{background:var(--bg)}body{background:radial-gradient(ellipse 70% 55% at 80% 5%,#12314a66 0,transparent 68%),radial-gradient(ellipse 50% 40% at 5% 75%,#0b3b3b40 0,transparent 70%),var(--bg);position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(#7da0b50b 1px,transparent 1px),linear-gradient(90deg,#7da0b50b 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 48%,#42e8d008 49%,transparent 50%)}
.topbar{height:84px;border-bottom:1px solid #b4d6e10e;background:#050b12b8;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{letter-spacing:-.02em}.brand-mark{width:40px;height:40px;border-color:#42e8d077;background:#42e8d00c;box-shadow:inset 0 0 16px #42e8d013}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;font-size:20px;transition:.2s}.icon-button:hover{color:var(--cyan);border-color:#42e8d077;background:#42e8d00b}
.header-actions{display:flex;align-items:center;gap:10px}.language-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:22px;background:#07111a}.language-switch button{border:0;background:transparent;color:var(--muted);border-radius:17px;padding:7px 10px;font:700 10px ui-monospace;cursor:pointer}.language-switch button.active{background:var(--cyan);color:#061411}.switch i{font-style:normal}
.hero-meta i{font-style:normal}
main{position:relative}.screen{padding-top:72px}.hero{max-width:900px;position:relative}.hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #42e8d01f;border-radius:50%;right:-210px;top:0;box-shadow:0 0 0 42px #42e8d008,0 0 0 86px #42e8d006;pointer-events:none}.hero:before{content:"+";position:absolute;right:-104px;top:103px;color:#42e8d088;font:20px ui-monospace}.hero-kicker{display:flex;align-items:center;gap:11px}.hero-kicker .eyebrow{margin:0}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px #42e8d015,0 0 14px var(--cyan)}.coordinates{font:10px ui-monospace;color:#4e6475;letter-spacing:.14em;margin-left:8px;padding-left:18px;border-left:1px solid var(--line)}h1{font-size:clamp(46px,7.6vw,92px);line-height:.96;max-width:980px;margin-top:25px;text-wrap:balance}h1 em{color:#9cafba;font-style:italic;text-shadow:0 0 45px #b8dae51a}.lede{font-size:19px;max-width:610px}.hero-meta{display:flex;gap:32px;margin-top:31px;color:#738797;font-size:12px;text-transform:uppercase;letter-spacing:.07em}.hero-meta span{display:flex;align-items:center;gap:8px}.hero-meta b{color:var(--cyan);font:700 12px ui-monospace}
.mode-grid{margin-top:64px;gap:16px}.mode-card{overflow:hidden;min-height:290px;padding:31px;border-color:#9bc3d61c;background:linear-gradient(145deg,#102131dd,#09131ddd);box-shadow:0 20px 70px #0004;isolation:isolate}.mode-card:before{content:"";position:absolute;inset:auto -80px -100px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#42e8d014,transparent 65%);z-index:-1}.mode-card:after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--cyan);transition:height .3s}.mode-card:hover:after,.mode-card:focus-visible:after{height:100%}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-5px);border-color:#42e8d05c;box-shadow:0 25px 80px #0006,var(--glow)}.mode-card.visual:hover{border-color:#6ba7ff66}.mode-icon{width:82px;height:82px;margin-bottom:34px;border:1px solid #42e8d02b;background:#42e8d00a;box-shadow:inset 0 0 28px #42e8d00b}.visual .mode-icon{border-color:#6ba7ff2c;background:#6ba7ff0a}.audio-wave{font-style:normal;letter-spacing:-5px;transform:translateX(-3px)}.mode-code{font-size:10px;letter-spacing:.14em}.mode-card strong{font-size:29px;letter-spacing:-.025em}.mode-card small{font-size:14px}.arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #42e8d030;border-radius:50%;bottom:28px;transition:.2s}.mode-card:hover .arrow{background:var(--cyan);color:#06110f;transform:translateX(3px)}.home-summary{display:inline-flex;padding:10px 15px;border-radius:30px;border:1px solid var(--line);background:#07111b;color:#708494;font:11px ui-monospace;text-transform:uppercase;letter-spacing:.05em}
.back{padding:9px 13px;border:1px solid transparent;border-radius:20px}.back:hover{border-color:var(--line);color:var(--text)}.setup-grid{gap:34px;max-width:1040px}.setup-grid fieldset{padding:22px;border:1px solid #9bc3d617;border-radius:18px;background:#08131dda;box-shadow:0 18px 50px #0002}.setup-grid legend{padding:0 10px;color:#b3c2cc;text-transform:uppercase;letter-spacing:.12em;font:700 10px ui-monospace}.choice-grid label span{border-color:#8fb2c51b;background:#0b1824;transition:.2s}.choice-grid label:hover span{border-color:#5f7e92}.choice-grid input:checked+span{border-color:#42e8d08a;background:linear-gradient(145deg,#102a30,#0b1b25);box-shadow:inset 0 0 0 1px #42e8d025,0 10px 35px #0003}.choice-grid input:focus-visible+span{outline:2px solid white;outline-offset:2px}.choice-grid b{margin-bottom:28px;font-size:10px}.counts label span,.categories label span{border-radius:10px;font:700 14px ui-monospace}.audio-controls{background:transparent;border:0;padding:0;justify-content:space-between}.primary{background:linear-gradient(135deg,#51f0d8,#2cc8b8);box-shadow:0 9px 30px #42e8d01c;transition:.2s}.primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px #42e8d030}.start{padding:18px 22px;border-radius:13px}
.training{padding-top:25px}.training:before{content:"KRN / ACTIVE SESSION";display:block;text-align:center;color:#364d5e;font:9px ui-monospace;letter-spacing:.22em;margin-bottom:18px}.session-head{padding:0 4px;font:10px ui-monospace;letter-spacing:.12em;text-transform:uppercase}.progress{height:2px}.timer{height:2px}.exercise-stage{min-height:340px;margin:18px 0 20px;border:1px solid #86a9bd17;border-radius:26px;background:radial-gradient(circle at center,#102536 0,#08121c 68%);box-shadow:inset 0 0 80px #0005,0 24px 70px #0003;position:relative;overflow:hidden}.exercise-stage:before,.exercise-stage:after{content:"";position:absolute;width:18px;height:18px;border-color:#42e8d03f}.exercise-stage:before{left:18px;top:18px;border-left:1px solid;border-top:1px solid}.exercise-stage:after{right:18px;bottom:18px;border-right:1px solid;border-bottom:1px solid}.exercise-stage .eyebrow{position:absolute;top:20px}.expression{text-shadow:0 0 55px #c7f9f41b;font-weight:500}.audio-prompt button{width:108px;height:108px;background:radial-gradient(circle,#123c42,#0c222d);border-color:#42e8d070;box-shadow:0 0 0 12px #42e8d006,0 0 45px #42e8d016}.answer-zone>label{text-transform:uppercase;letter-spacing:.14em;font:9px ui-monospace}.answer-row input{height:64px;background:#07111a;border-color:#46617470;border-radius:13px;font:500 30px ui-monospace;box-shadow:inset 0 5px 18px #0004}.answer-row input:focus{box-shadow:0 0 0 3px #42e8d012,inset 0 5px 18px #0004}.validate{min-width:120px}.numpad{gap:8px}.numpad button{border-color:#7893a51d;background:#0a1621;padding:14px;font:600 15px ui-monospace;transition:.12s}.numpad button:hover{background:#122333;border-color:#6f8ea1}.numpad button:active{transform:scale(.97)}.feedback{border:1px solid #42e8d02c;border-left:3px solid var(--cyan);border-radius:12px;background:#0a1b22}
.results .eyebrow{margin-top:10px}.score-ring{width:190px;height:190px;box-shadow:0 0 55px #42e8d018}.score-ring:before{background:var(--bg);inset:8px}.metric{background:linear-gradient(145deg,#0d1a27,#08121c);border-color:#94b8cb17;border-radius:16px;padding:24px}.metric strong{font:650 27px ui-monospace}.metric span{text-transform:uppercase;letter-spacing:.1em}.corrections{padding:25px;border:1px solid var(--line);border-radius:18px;background:#08121b}.category-row i{box-shadow:0 0 15px #42e8d040}
@media(max-width:900px){.hero:after,.hero:before{display:none}.hero-meta{flex-wrap:wrap}.mode-card{min-height:270px}.counts{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.topbar{height:68px}.screen{padding-top:38px}h1{font-size:clamp(43px,13vw,65px)}.hero-meta{display:grid;gap:10px}.mode-grid{margin-top:42px}.mode-card{min-height:230px}.mode-icon{width:66px;height:66px;margin-bottom:24px}.setup-grid fieldset{padding:16px}.exercise-stage{min-height:270px;border-radius:18px;margin-top:14px}.expression{font-size:clamp(44px,13vw,70px)}.answer-row{display:grid;grid-template-columns:1fr}.validate{height:52px}.metric-grid,.stats-cards{gap:7px}.metric{padding:17px 10px}.metric strong{font-size:21px}.hero-kicker .coordinates{display:none}}