@keyframes barPulse{0%{transform:scaleY(var(--bar-from,.5))}to{transform:scaleY(var(--bar-to,.25))}}.tool-page .page{padding-block:clamp(2rem,1.55rem + 2vw,3.5rem) clamp(4rem,3.7rem + 1.35vw,5rem)}.tool-page .page-head{max-width:54rem;margin-bottom:var(--space-4xl)}.tool-page .kicker{letter-spacing:var(--tracking-caps-sm);text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-sm);font-size:var(--text-2xs);font-weight:var(--weight-semibold)}.tool-page h1{font-family:var(--font-serif);letter-spacing:var(--tracking-display);color:var(--fg-strong);margin:0 0 var(--space-md);font-size:clamp(1.85rem,5vw,3rem);font-weight:var(--weight-bold);line-height:var(--leading-tight)}.tool-page .lede{color:var(--fg-muted);max-width:44rem;font-size:var(--text-md);line-height:var(--leading-body);margin:0}.tool-page .trainer-layout{margin-bottom:var(--space-4xl)}.tool-page .ear-rating-top{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.tool-page .ear-rating-tier{text-transform:uppercase;letter-spacing:var(--tracking-caps-sm);color:var(--accent-hover);background:color-mix(in oklch, var(--accent) 12%, transparent);border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;white-space:nowrap;padding:var(--space-2xs) var(--space-sm);font-size:var(--text-3xs);font-weight:var(--weight-bold);text-align:center;min-width:5rem}.tool-page .ear-rating-label{font-family:var(--font-serif);color:var(--fg-strong);letter-spacing:var(--tracking-tight);margin-top:var(--space-xs);font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:var(--leading-snug)}.tool-page .ear-rating-sub{color:var(--fg-muted);margin-top:var(--space-2xs);font-size:var(--text-2xs);line-height:var(--leading-normal)}.tool-page .ear-rating-bar{gap:var(--space-2xs);padding-top:var(--space-md);grid-template-columns:repeat(5,1fr);margin-top:auto;display:grid}.tool-page .ear-rating-bar i{background:var(--border);border-radius:var(--radius-2xs);height:4px;transition:background var(--dur-base);display:block}.tool-page .ear-rating-bar i.on{background:var(--accent)}.tool-page .ear-init .ear-rating-bar i{transition:none!important}.tool-page .mode-select h2{font-family:var(--font-serif);letter-spacing:var(--tracking-heading);margin:0 0 var(--space-xl);font-size:var(--text-2xl);font-weight:var(--weight-bold)}.tool-page .mode-grid{gap:var(--space-md);margin-bottom:var(--space-2xl);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));display:grid}.tool-page .mode-card{text-align:start;background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-lg);cursor:pointer;gap:var(--space-2xs);padding:var(--space-xl);transition:border-color var(--dur-fast), transform var(--dur-fast);flex-direction:column;display:flex}.tool-page .mode-card:hover{border-color:var(--accent);transform:translateY(var(--lift-sm))}.tool-page .mode-num{font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:var(--tracking-caps);font-size:var(--text-2xs);font-weight:var(--weight-bold)}.tool-page .mode-title{font-family:var(--font-serif);color:var(--fg-strong);font-size:var(--text-lg);font-weight:var(--weight-bold)}.tool-page .mode-desc{color:var(--fg-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.tool-page .mode-range{text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--accent);margin-top:var(--space-3xs);font-size:var(--text-2xs);font-weight:var(--weight-semibold)}.tool-page .session-stats{color:var(--fg-muted);align-items:center;gap:var(--space-md) var(--space-xl);font-size:var(--text-sm);font-weight:var(--weight-semibold);flex-wrap:wrap;display:flex}.tool-page #stat-rating{color:var(--accent)}.tool-page #stat-best{color:var(--fg-subtle);font-size:var(--text-sm);font-weight:var(--weight-medium)}.tool-page .stat-btn{border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--fg);cursor:pointer;min-height:44px;padding:var(--space-2xs) var(--space-md);font-size:var(--text-xs);font-weight:var(--weight-semibold);transition:all var(--dur-fast)}.tool-page .stat-btn:hover{border-color:var(--accent);color:var(--accent)}.tool-page .stat-btn-quiet{color:var(--fg-subtle)}.tool-page .stat-btn[hidden]{display:none}.tool-page .band-heatmap{background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-lg);margin-top:var(--space-xl);padding:var(--space-lg) var(--space-xl)}.tool-page .band-heatmap[hidden]{display:none}.tool-page .bh-title{color:var(--fg-strong);margin:0 0 var(--space-2xs);font-size:var(--text-base);font-weight:var(--weight-bold)}.tool-page .bh-sub{color:var(--fg-muted);margin:0 0 var(--space-md);font-size:var(--text-2xs);line-height:var(--leading-normal)}.tool-page .bh-grid{gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr));margin:0;padding:0;list-style:none;display:grid}.tool-page .bh-band{background:var(--bg-subtle);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);gap:var(--space-2xs);padding:var(--space-sm) var(--space-md);grid-template-rows:auto auto auto;display:grid}.tool-page .bh-band-label{color:var(--fg-strong);font-size:var(--text-2xs);font-weight:var(--weight-bold);line-height:var(--leading-snug)}.tool-page .bh-band-range{color:var(--fg-subtle);font-variant-numeric:tabular-nums;font-size:var(--text-3xs)}.tool-page .bh-band-bar{border-radius:var(--radius-pill);background:var(--bg);border:var(--border-w) solid var(--border);height:8px;margin-top:var(--space-3xs);position:relative;overflow:hidden}.tool-page .bh-band-bar:after{content:"";width:var(--acc,0%);transition:width .22s var(--ease-standard,ease);background:linear-gradient(90deg,oklch(62% .18 25),oklch(74% .15 75) 50%,oklch(62% .16 145));position:absolute;inset:0}.tool-page .bh-band.bh-empty .bh-band-bar:after{background:var(--border)}.tool-page .bh-band-count{color:var(--fg-muted);font-variant-numeric:tabular-nums;margin-top:var(--space-3xs);font-size:var(--text-3xs)}.tool-page .round-wrap{max-width:640px}.tool-page .round-header{border-bottom:var(--border-w) solid var(--border);align-items:center;gap:var(--space-md) var(--space-md);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);flex-wrap:wrap;display:flex}.tool-page .back-btn{color:var(--fg-muted);background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-pill);cursor:pointer;align-items:center;gap:var(--space-xs);min-height:44px;padding:var(--space-xs) var(--space-md);font-size:var(--text-2xs);font-weight:var(--weight-semibold);transition:all var(--dur-fast);display:inline-flex}.tool-page .back-btn:hover{color:var(--accent);border-color:var(--accent)}.tool-page .mode-label{text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-muted);min-width:6rem;font-size:var(--text-xs);font-weight:var(--weight-bold);flex:1}.tool-page .round-stats{gap:var(--space-sm);flex-wrap:wrap;display:flex}.tool-page .round-stat{background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);min-width:4rem;padding:var(--space-2xs) var(--space-sm);flex-direction:column;display:inline-flex}.tool-page .round-stat-label{text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--fg-subtle);font-size:var(--text-3xs);font-weight:var(--weight-bold)}.tool-page .round-stat strong{font-family:var(--font-serif);color:var(--fg-strong);font-variant-numeric:tabular-nums;margin-top:var(--space-3xs);font-size:var(--text-md);line-height:var(--leading-tight)}.tool-page .round-stat.hot strong{color:var(--accent);align-items:center;gap:.25em;display:inline-flex}.tool-page .round-stat.hot strong:before{content:"🔥";font-size:.85em;line-height:1}.tool-page .round-progress{background:var(--bg-subtle);border-radius:var(--radius-pill);height:4px;margin-bottom:var(--space-xl);overflow:hidden}.tool-page .round-progress-fill{width:0%;height:100%;transition:width .28s var(--ease-standard,ease);background:linear-gradient(90deg,oklch(62% .18 25),oklch(74% .15 75),oklch(65% .16 145))}.tool-page .tone-display{background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-xl);align-items:center;gap:var(--space-lg);margin-bottom:var(--space-2xl);padding:var(--space-3xl);flex-direction:column;display:flex}.tool-page .tone-vis{justify-content:center;align-items:center;width:100%;height:60px;display:flex}.tool-page .waveform{align-items:center;gap:var(--space-2xs);height:50px;display:flex}.tool-page .play-tone-btn{background:var(--accent);min-height:52px;color:var(--accent-fg);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:var(--space-sm);padding:0 var(--space-2xl);font-size:var(--text-md);font-weight:var(--weight-bold);transition:background var(--dur-fast);border:none;display:inline-flex}.tool-page .play-tone-btn:hover{background:var(--accent-hover)}.tool-page .play-tone-btn.secondary{background:var(--bg-subtle);color:var(--fg);border:var(--border-w) solid var(--border)}.tool-page .play-tone-btn.secondary:hover{background:var(--bg-elevated)}.tool-page .question-text{color:var(--fg-strong);margin:0 0 var(--space-lg);font-size:var(--text-md);font-weight:var(--weight-semibold)}.tool-page .options-grid{counter-reset:opt;gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.tool-page .opt-btn{text-align:start;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-elevated);min-height:62px;color:var(--fg-strong);cursor:pointer;counter-increment:opt;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg) var(--space-md) var(--space-md);font-size:var(--text-md);font-weight:var(--weight-semibold);transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);display:flex;position:relative}.tool-page .opt-btn:before{content:counter(opt);background:var(--bg-subtle);width:30px;height:30px;color:var(--fg-muted);border:var(--border-w) solid var(--border);font-variant-numeric:tabular-nums;font-size:var(--text-2xs);font-weight:var(--weight-bold);transition:all var(--dur-fast);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.tool-page .opt-btn:hover:not(:disabled){border-color:var(--accent);background:color-mix(in oklch, var(--accent) 5%, var(--bg-elevated));box-shadow:0 4px 14px color-mix(in oklch, var(--accent) 12%, transparent);transform:translateY(var(--lift-xs))}.tool-page .opt-btn:hover:not(:disabled):before{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.tool-page .opt-btn:focus-visible{outline:var(--focus-ring-soft);outline-offset:var(--focus-ring-offset)}.tool-page .opt-btn:disabled{cursor:default;opacity:.9}.tool-page .opt-btn-stack{padding-top:var(--space-md);padding-bottom:var(--space-md)}.tool-page .opt-btn-stack .opt-name{letter-spacing:var(--tracking-snug);font-size:var(--text-md);font-weight:var(--weight-bold);line-height:var(--leading-snug);display:block}.tool-page .opt-btn-stack .opt-sub{color:var(--fg-muted);font-variant-numeric:tabular-nums;margin-top:var(--space-3xs);font-size:var(--text-2xs);font-weight:var(--weight-medium);display:block}.tool-page .opt-btn-stack:hover:not(:disabled) .opt-sub{color:inherit;opacity:.85}.tool-page .opt-btn.correct{color:oklch(32% .13 145);background:oklch(65% .16 145/.14);border-color:oklch(55% .15 145)}.tool-page .opt-btn.correct:before{color:#fff;background:oklch(55% .15 145);border-color:oklch(55% .15 145)}.tool-page .opt-btn.wrong{color:oklch(34% .16 25);background:oklch(60% .18 25/.14);border-color:oklch(55% .18 25)}.tool-page .opt-btn.wrong:before{color:#fff;background:oklch(55% .18 25);border-color:oklch(55% .18 25)}.tool-page [data-theme=dark] .opt-btn.correct{color:oklch(88% .15 145)}.tool-page [data-theme=dark] .opt-btn.wrong{color:oklch(86% .15 25)}@media (prefers-color-scheme:dark){.tool-page :root:not([data-theme=light]) .opt-btn.correct{color:oklch(88% .15 145)}.tool-page :root:not([data-theme=light]) .opt-btn.wrong{color:oklch(86% .15 25)}}.tool-page .feedback-area{margin-top:var(--space-xl)}.tool-page .feedback-inner{border-radius:var(--radius-md);margin-bottom:var(--space-md);padding:var(--space-lg);font-size:var(--text-base);font-weight:var(--weight-semibold)}.tool-page .feedback-inner.correct{color:#166534;border:var(--border-w) solid #22c55e;background:oklch(72.2746% .192007 149.579/.15)}.tool-page .feedback-inner.wrong{color:#7f1d1d;border:var(--border-w) solid #ef4444;background:oklch(63.6834% .207849 25.3313/.15)}.tool-page .next-btn{background:var(--accent);min-height:48px;color:var(--accent-fg);border-radius:var(--radius-md);cursor:pointer;padding:var(--space-md) var(--space-2xl);font-size:var(--text-base);font-weight:var(--weight-bold);border:none}.tool-page .next-btn:hover{background:var(--accent-hover)}.tool-page .keyboard-hint{color:var(--fg-muted);background:var(--bg-subtle);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);text-align:center;margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);font-size:var(--text-2xs)}.tool-page .keyboard-hint kbd{background:var(--bg-elevated);border:var(--border-w) solid var(--border);border-radius:var(--radius-xs);color:var(--fg-strong);margin:0 var(--space-3xs);padding:.05rem var(--space-xs);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:var(--leading-none);border-bottom-width:2px;display:inline-block}.tool-page .explainer{border-top:var(--border-w) solid var(--border);padding-top:var(--space-4xl)}.tool-page .explainer h2{font-family:var(--font-serif);font-size:var(--font-size-h2-md);letter-spacing:var(--tracking-heading);margin:0 0 var(--space-2xl);font-weight:var(--weight-bold)}.tool-page .explainer h3{font-family:var(--font-serif);color:var(--fg-strong);margin:0 0 var(--space-md);font-size:var(--text-lg);font-weight:var(--weight-bold)}.tool-page .explainer p{color:var(--fg-muted);margin:0 0 var(--space-md);font-size:var(--text-base);line-height:var(--leading-prose)}.tool-page .explainer-grid{gap:var(--space-3xl);grid-template-columns:1fr;display:grid}@media (width>=768px){.tool-page .explainer-grid{grid-template-columns:1fr 1fr}}