:root{--bg:#111318;--panel:#1b1f27;--text:#f4f5f6;--muted:#9aa2b0;--line:#303642;--purple:#9c7cff;--green:#4dde98;--red:#ff7c84}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% -10%,#27203e 0,transparent 31rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.site-header{max-width:1120px;margin:auto;height:80px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{color:#fff;text-decoration:none;font-weight:750;letter-spacing:-.03em;font-size:1.1rem;display:flex;align-items:center;gap:10px}.brand em{font-style:normal;color:var(--purple)}.brand-mark{display:grid;place-items:center;background:var(--purple);width:30px;height:30px;border-radius:8px;color:#17131f;font-family:Georgia,serif;font-weight:900}nav{display:flex;gap:24px}nav a,.back-link{color:var(--muted);text-decoration:none;font-size:.92rem}nav a:hover,.back-link:hover{color:#fff}.hero{max-width:800px;margin:110px auto 100px;text-align:center;padding:0 24px}.eyebrow,.key-label{font-weight:800;letter-spacing:.13em;color:var(--purple);font-size:.72rem}.hero h1{font-size:clamp(2.8rem,8vw,5.7rem);line-height:.98;letter-spacing:-.065em;margin:18px 0 24px}.hero h1 span{color:var(--purple)}.intro{font-size:1.14rem;color:var(--muted);line-height:1.65;max-width:560px;margin:0 auto 32px}.button{border:0;border-radius:12px;font:inherit;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:22px;padding:15px 20px;cursor:pointer}.button-primary{background:var(--purple);color:#191521;box-shadow:0 10px 28px #8b6cf044}.button-primary:hover{background:#ae94ff;transform:translateY(-1px)}.hint{font-size:.78rem;color:#697180;margin-top:17px}.features{border-top:1px solid var(--line);max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr)}.features article{padding:32px 30px;border-right:1px solid var(--line)}.features article:last-child{border:0}.feature-number{color:var(--purple);font-weight:800;font-size:.8rem}.features h2{font-size:1.1rem;margin:13px 0 7px}.features p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0}.trainer-shell{max-width:700px;margin:48px auto;padding:0 24px}.training-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.score{font-size:.85rem;color:var(--muted)}.score b{color:#fff}.score span{color:#525967;margin:0 6px}.mode-switch{background:#1a1d24;border:1px solid var(--line);border-radius:12px;padding:4px;display:flex;margin:0 auto 22px;max-width:430px}.mode-button{flex:1;border:0;background:transparent;color:var(--muted);padding:10px 8px;border-radius:8px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}.mode-button.active{background:#303642;color:#fff}.question-card{background:linear-gradient(145deg,#202530,#191c23);border:1px solid var(--line);border-radius:22px;padding:52px;box-shadow:0 30px 80px #0004;text-align:center}.key-label{margin:0 0 5px}.key-name{font-size:4.5rem;font-weight:800;letter-spacing:-.08em}.question-divider{height:1px;background:var(--line);margin:36px 0}.prompt{font-size:1.42rem;margin:0 0 25px;color:#e5e7eb}.prompt strong{color:var(--purple);font-size:1.8rem}form{display:grid;gap:12px;max-width:330px;margin:auto}input{background:#12151b;color:#fff;border:1px solid #48505f;border-radius:11px;padding:15px;text-align:center;font:700 1.25rem inherit;outline:0}input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #9c7cff22}input:disabled{opacity:.65}.feedback{min-height:27px;margin:21px 0 4px;font-weight:750}.feedback.is-correct{color:var(--green)}.feedback.is-wrong{color:var(--red)}.next-button{border:0;background:transparent;color:var(--purple);font:700 .95rem inherit;cursor:pointer;padding:8px}.keyboard-tip{text-align:center;color:#747d8d;font-size:.78rem;margin-top:21px}kbd{border:1px solid #4b5362;border-radius:4px;padding:2px 5px;font-family:inherit;font-size:.72rem;color:#b5bdcb}footer{color:#677080;text-align:center;font-size:.75rem;padding:40px 24px 24px}@media(max-width:640px){.site-header{height:68px;padding:0 18px}nav{gap:16px}.hero{margin:75px auto}.features{grid-template-columns:1fr}.features article{border-right:0;border-bottom:1px solid var(--line);padding:26px}.question-card{padding:37px 20px}.trainer-shell{margin:24px auto}.key-name{font-size:4rem}}
@media(max-width:640px){.site-header{height:60px;padding:0 18px}nav{gap:16px}.hero{margin:75px auto}.features{grid-template-columns:1fr}.features article{border-right:0;border-bottom:1px solid var(--line);padding:26px}.trainer-shell{margin:12px auto;padding:0 16px}.training-topline{margin-bottom:14px}.mode-switch{margin-bottom:12px}.question-card{padding:24px 18px}.key-name{font-size:3.15rem}.question-divider{margin:20px 0}.prompt{font-size:1.18rem;margin-bottom:17px}.prompt strong{font-size:1.45rem}input{padding:12px;font-size:1.1rem}.button{padding:12px 16px}.feedback{margin-top:14px}.keyboard-tip{margin-top:14px}footer{padding-top:24px}}
@media(max-width:640px) and (max-height:600px){.site-header{height:52px}.trainer-shell{margin:6px auto}.training-topline{margin-bottom:8px}.mode-switch{margin-bottom:8px}.question-card{padding:15px 16px}.key-name{font-size:2.55rem}.question-divider{margin:12px 0}.prompt{font-size:1.05rem;margin-bottom:12px}.prompt strong{font-size:1.25rem}form{gap:8px}input{padding:10px}.button{padding:10px 14px}.keyboard-tip,footer{display:none}}
@media(max-width:640px){body.keyboard-open .site-header,body.keyboard-open .training-topline,body.keyboard-open .mode-switch,body.keyboard-open .keyboard-tip,body.keyboard-open footer{display:none}body.keyboard-open .trainer-shell{margin:6px auto;padding:0 14px}body.keyboard-open .question-card{padding:14px 16px}body.keyboard-open .key-name{font-size:2.4rem}.keyboard-open .question-divider{margin:10px 0}.keyboard-open .prompt{font-size:1.05rem;margin-bottom:10px}.keyboard-open .prompt strong{font-size:1.25rem}.keyboard-open form{gap:8px}.keyboard-open input{padding:10px}.keyboard-open .button{padding:10px 14px}}
.feedback:not(:empty){display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}.feedback.is-correct::before,.feedback.is-wrong::before{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;color:#fff;font-size:1.35rem;font-weight:900;line-height:1}.feedback.is-correct{color:#2FD9A6}.feedback.is-correct::before{content:"✓";background:#2FD9A6}.feedback.is-wrong{color:#ff8c82}.feedback.is-wrong::before{content:"×";background:#FF6B5E;font-size:1.7rem}
.feedback{margin:0;min-height:0}.feedback:empty{display:none}.feedback.is-correct::before,.feedback.is-wrong::before{content:none}.feedback-icon{width:32px;height:32px;flex:0 0 32px}.feedback span{line-height:1.35}.next-button{display:none}
.brand-mark{background:transparent;padding:0}.brand-mark img{display:block;width:100%;height:100%}.brand em{color:#2FD9A6}
.brand{font-family:Comfortaa,ui-rounded,system-ui,sans-serif;font-weight:700;letter-spacing:-.04em}.brand-wordmark{font-size:1.02rem}.subdomain-title{max-width:1120px;margin:0 auto;padding:18px 24px 0;color:#fff;font-family:Comfortaa,ui-rounded,system-ui,sans-serif;font-size:clamp(1.25rem,3vw,2rem);font-weight:700;letter-spacing:-.05em}.subdomain-title span{color:#2FD9A6}.hero{margin-top:54px}.hero h1,.hero h2{font-size:clamp(2.8rem,8vw,5.7rem);line-height:.98;letter-spacing:-.065em;margin:18px 0 24px}.hero h2 span{color:var(--purple)}@media(max-width:640px){.subdomain-title{padding:12px 18px 0;font-size:1.2rem}.hero{margin-top:34px}.keyboard-open .subdomain-title{display:none}}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.button-secondary{color:#e5e7eb;border:1px solid #48505f;background:#171a21}.button-secondary:hover{border-color:#9c7cff;color:#fff}.theory-page{max-width:820px;margin:54px auto 90px;padding:0 24px;text-align:center}.theory-page h2{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1;letter-spacing:-.06em;margin:18px 0}.theory-page h2 span{color:var(--purple)}.theory-lead{max-width:610px;margin:0 auto 45px;color:var(--muted);font-size:1.08rem;line-height:1.65}.theory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left;margin-bottom:24px}.theory-grid article,.theory-example{background:linear-gradient(145deg,#202530,#191c23);border:1px solid var(--line);border-radius:16px;padding:24px}.theory-grid h3{margin:11px 0 8px;font-size:1.05rem}.theory-grid p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}.theory-example{margin:0 auto 28px;max-width:600px}.theory-example p:last-child{margin:10px 0 0;font-size:1.05rem}.theory-example b{color:#2FD9A6}@media(max-width:640px){.hero-actions{flex-direction:column}.hero-actions .button{width:100%;justify-content:center}.theory-page{margin:34px auto 60px;padding:0 18px;text-align:left}.theory-page h2{font-size:2.45rem}.theory-lead{margin-bottom:28px}.theory-grid{grid-template-columns:1fr}.theory-grid article{padding:20px}.theory-example{text-align:center}}
.hero h2 .hero-prefix{display:block;color:#fff;font-size:.56em;letter-spacing:-.045em;margin-bottom:.13em}
.brand-wordmark{font-size:1.14rem}input{font-size:1.45rem}@media(max-width:640px){input{font-size:1.28rem}}
.brand{gap:7px}.brand-wordmark{font-size:1.24rem}.menu-toggle{display:none;background:transparent;border:0;padding:9px 4px;cursor:pointer}.menu-toggle span{display:block;width:23px;height:2px;margin:5px 0;border-radius:2px;background:#f4f5f6}@media(max-width:640px){.site-header{position:relative}.menu-toggle{display:block}nav{display:none;position:absolute;z-index:10;right:12px;top:54px;width:170px;padding:10px;background:#1b1f27;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 35px #0007;flex-direction:column;gap:0}nav.is-open{display:flex}nav a{padding:11px 12px;border-radius:8px}nav a:hover{background:#292e38}.brand-wordmark{font-size:1.18rem}}
