:root{color:#eee9dc;background:#151715;font-family:Inter,ui-sans-serif,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;--ink: #151715;--paper: #eee9dc;--acid: #d8ff3e;--orange: #ff6b3d;--line: #393c37}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--ink)}button,a{font:inherit}button{color:inherit}main{width:min(1460px,100%);margin:0 auto;overflow:hidden}.topbar{height:74px;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.topbar p{color:#868b82;font:700 11px/1 monospace;letter-spacing:.18em}.brand{color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px}.brand-mark{width:34px;height:34px;color:var(--ink);background:var(--acid);display:grid;place-items:center;font-size:20px;transform:rotate(-3deg)}.hero{min-height:360px;padding:58px clamp(20px,5vw,78px) 48px;display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:end;border-bottom:1px solid var(--line);position:relative}.hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #2d302c;border-radius:50%;right:19%;top:8%;pointer-events:none}.eyebrow{margin:0 0 20px;color:var(--acid);font:700 11px/1 monospace;letter-spacing:.17em}h1{margin:0;max-width:850px;font-size:clamp(48px,7.2vw,104px);line-height:.9;letter-spacing:-.07em}h1 em{color:transparent;-webkit-text-stroke:1.3px #777b73;font-style:normal}.intro{color:#a7aba2;font-size:14px;line-height:1.8;max-width:470px;margin:28px 0 0}.score-card{position:relative;z-index:1;border-top:5px solid var(--acid);background:#20231f;padding:24px 26px;transform:rotate(1.5deg)}.score-label{color:#979c92;font-size:12px}.score-card strong{display:block;font:700 72px/.95 ui-monospace,monospace;letter-spacing:-.08em;margin:12px 0}.score-card small{font-size:22px;color:var(--acid)}.score-track{height:5px;background:#383c36;overflow:hidden}.score-track i{display:block;width:var(--score);height:100%;background:var(--acid);transition:width .4s ease}.score-card p{color:#7f847b;font-size:11px;margin:12px 0 0}.workspace{display:grid;grid-template-columns:minmax(300px,35%) 1fr}.settings{padding:42px clamp(20px,3.5vw,54px) 50px;border-right:1px solid var(--line);background:#191b18}.setting-head{display:flex;gap:17px;align-items:start;margin-bottom:22px}.setting-head>span{font:700 11px/1 monospace;color:var(--acid);border:1px solid #4d5248;padding:7px}.setting-head h2{margin:0 0 5px;font-size:17px}.setting-head p{margin:0;color:#747970;font-size:11px}.interval-head{margin-top:42px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-switch button{min-height:92px;border:1px solid #41453f;background:transparent;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;font-size:12px;transition:.18s}.mode-switch button span{font:700 17px monospace;letter-spacing:.12em}.mode-switch button:hover{border-color:#8c9187}.mode-switch button.active{background:var(--acid);color:var(--ink);border-color:var(--acid);font-weight:800}.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.range-grid button{min-height:62px;background:transparent;border:1px solid #363a35;color:#6e736b;cursor:pointer;display:flex;flex-direction:column;justify-content:center;transition:.16s}.range-grid button:hover{border-color:#7c8177;color:var(--paper)}.range-grid button b{font:700 14px monospace}.range-grid button span{font-size:9px;margin-top:5px;white-space:nowrap}.range-grid button.selected{background:#2a2d28;border-color:#696e64;color:var(--paper)}.range-grid button.selected b{color:var(--acid)}.trainer-panel{padding:42px clamp(20px,4.5vw,70px) 52px;min-width:0}.question-line{display:flex;justify-content:space-between;color:#7e8379;font:700 10px/1 monospace;letter-spacing:.12em;margin-bottom:18px}.question-line i{color:var(--orange);font-style:normal}.sound-stage{height:240px;border:1px solid #3b3f39;position:relative;display:grid;place-items:center;background:repeating-linear-gradient(0deg,transparent,transparent 39px,#20231f 40px);overflow:hidden}.sound-stage:before,.sound-stage:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#20231f}.sound-stage:before{left:33.3%}.sound-stage:after{right:33.3%}.wave{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.2vw,16px);opacity:.35}.wave i{width:3px;max-height:88px;background:#5e645a;transition:height .15s,background .15s,transform .15s}.sound-stage.playing .wave i{background:var(--acid);animation:pulse .38s ease-in-out infinite alternate}.sound-stage.playing .wave i:nth-child(3n){animation-delay:.12s}.sound-stage.playing .wave i:nth-child(2n){animation-delay:.23s}@keyframes pulse{to{transform:scaleY(.35);opacity:.35}}.listen{position:relative;z-index:2;border:0;width:156px;height:54px;cursor:pointer;color:var(--ink);background:var(--paper);font-weight:850;font-size:13px;box-shadow:8px 8px 0 var(--orange);transition:transform .15s,box-shadow .15s}.listen span{margin-right:10px}.listen:hover:not(:disabled){transform:translate(3px,3px);box-shadow:5px 5px 0 var(--orange)}.listen:disabled{cursor:wait}.sound-stage>p{position:absolute;bottom:18px;color:#73786f;font-size:10px}.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px}.answers button{min-height:58px;border:1px solid #383c36;background:#1a1c19;cursor:pointer;text-align:left;padding:10px 12px;color:#a4a99f;font-size:10px;transition:.16s}.answers button span{display:block;color:var(--paper);font:800 14px monospace;margin-bottom:5px}.answers button:hover:not(:disabled){background:#292c27;border-color:var(--acid)}.answers button:disabled{cursor:not-allowed;opacity:.33}.answers button.picked{border-color:var(--orange);opacity:1}.answers button.correct{background:var(--acid);border-color:var(--acid);color:#333;opacity:1}.answers button.correct span{color:var(--ink)}.status{margin-top:18px;min-height:68px;border:1px dashed #363a35;display:flex;align-items:center;padding:18px;color:#767b72;font-size:11px}.status.result{border-style:solid;justify-content:space-between;gap:18px}.status.result.good{border-color:#768d28;background:#202519}.status.result.bad{border-color:#7d412e;background:#251d19}.status strong{color:var(--paper);font-size:14px}.status p{margin:5px 0 0}.result-actions{display:flex;gap:8px;flex-shrink:0}.result-actions button{border:1px solid #555a51;background:transparent;padding:10px 13px;cursor:pointer;font-size:11px}.result-actions .next{border-color:var(--acid);color:var(--ink);background:var(--acid);font-weight:800}footer{min-height:70px;border-top:1px solid var(--line);padding:0 clamp(20px,4vw,64px);display:flex;justify-content:space-between;align-items:center;color:#60655c;font:700 9px/1 monospace;letter-spacing:.11em}@media(max-width:820px){.hero{grid-template-columns:1fr;gap:35px}.score-card{width:min(100%,340px)}.workspace{grid-template-columns:1fr}.settings{border-right:0;border-bottom:1px solid var(--line)}}@media(max-width:540px){.topbar{height:62px}.topbar p{display:none}.hero{min-height:auto;padding-top:44px}h1{font-size:52px}.settings,.trainer-panel{padding-left:16px;padding-right:16px}.range-grid{grid-template-columns:repeat(4,1fr)}.range-grid button span{font-size:8px;overflow:hidden;max-width:100%}.sound-stage{height:205px}.answers{grid-template-columns:repeat(3,1fr)}.status.result{align-items:stretch;flex-direction:column}.result-actions{width:100%}.result-actions button{flex:1}footer{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}