@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap";:root{color:#1e2621;font-synthesis:none;--ink:#1e2621;--muted:#7d827d;--paper:#f5f1eb;--line:#d9d4cb;--coral:#ee684f;--coral-dark:#d8553d;--mint:#cadfd0;--green:#2f7555;background:#f5f1eb;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:var(--paper);min-width:320px;margin:0}button{font:inherit}.app-shell{background:radial-gradient(circle at 87% 12%, #ee684f14, transparent 24rem), var(--paper);flex-direction:column;min-height:100vh;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);align-items:center;gap:28px;min-height:78px;padding:0 5.5vw;display:flex}.brand-mark{letter-spacing:.13em;color:var(--ink);font-size:19px;font-weight:700}.brand-mark span{color:var(--coral)}.mode-label,.question-count,.rail-label,.eyebrow,.answer-heading,.bottom-bar,.stage-caption,.completion-kicker,.rail-copy{text-transform:uppercase;letter-spacing:.11em;font-family:DM Mono,monospace;font-size:10px}.mode-label{color:var(--muted);margin-right:auto}.live-dot{background:var(--coral);vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:9px;display:inline-block}.slash{color:#c4bfb6;margin:0 8px}.question-count{color:var(--muted)}.question-count span{color:var(--ink);font-weight:500}.game-layout{flex:1;grid-template-columns:minmax(180px,24%) 1fr;width:100%;max-width:1280px;margin:0 auto;display:grid}.side-rail{border-right:1px solid var(--line);padding:11.5vh 0 0 5.5vw}.rail-label,.eyebrow,.completion-kicker{color:var(--coral-dark);font-weight:500}.rail-rule{border-top:1px solid var(--coral);width:37px;margin:24px 0 31px}.rail-stat{flex-direction:column;gap:8px;margin-bottom:29px;display:flex}.rail-stat span{color:var(--muted);font-size:11px}.rail-stat strong{font-family:Playfair Display,serif;font-size:37px;font-weight:500;line-height:1}.streak-value{color:var(--coral-dark)}.streak-value small{font-family:DM Sans,sans-serif;font-size:14px}.rail-copy{color:var(--muted);text-transform:none;letter-spacing:.02em;margin-top:19vh;font-size:11px;line-height:1.8}.practice-area{width:100%;max-width:820px;padding:11.5vh 8.5vw 8vh}.practice-controls{flex-wrap:wrap;gap:24px;margin-bottom:7vh;display:flex}.setting-group{align-items:center;gap:10px;display:flex}.setting-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-family:DM Mono,monospace;font-size:9px}.segmented-control{border:1px solid var(--line);background:#ffffff47;padding:3px;display:flex}.segmented-control button{color:var(--muted);cursor:pointer;letter-spacing:.03em;text-transform:uppercase;background:0 0;border:0;padding:6px 10px;font-family:DM Mono,monospace;font-size:9px;transition:background .2s,color .2s}.segmented-control button:hover{color:var(--coral-dark)}.segmented-control button.is-selected{color:var(--ink);background:#fffaf5;box-shadow:0 1px 4px #1e262114}.practice-heading h1{letter-spacing:-.035em;margin:17px 0 0;font-family:Playfair Display,serif;font-size:clamp(48px,6vw,76px);font-weight:500;line-height:.96}h1 em{color:var(--coral-dark);font-weight:500}.sound-stage{border:1px solid var(--line);text-align:center;background:#fff3;margin:10vh 0 8vh;padding:29px 32px 26px;position:relative}.waveform{opacity:.35;justify-content:center;align-items:center;gap:5px;height:68px;transition:opacity .3s;display:flex}.waveform.is-active{opacity:1}.waveform i{height:var(--bar-height);background:var(--coral);border-radius:4px;width:3px;display:block;transform:scaleY(.65)}.waveform.is-active i{animation:1.1s ease-in-out infinite alternate pulse;animation-delay:calc(var(--bar-height) * 2ms)}@keyframes pulse{to{opacity:.58;transform:scaleY(1.18)}}.play-button,.primary-button{background:var(--coral);color:#fff;cursor:pointer;border:0;transition:background .2s,transform .2s,box-shadow .2s}.play-button{border-radius:2px;justify-content:center;align-items:center;gap:13px;min-width:177px;height:53px;margin:23px auto 18px;font-size:13px;font-weight:600;display:inline-flex;box-shadow:0 7px 19px #d8553d29}.play-button:hover,.primary-button:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 10px 22px #d8553d33}.play-icon{width:21px;font-size:14px}.stage-caption{color:var(--muted);text-transform:none;letter-spacing:.02em;font-size:11px}.stage-caption span{color:var(--coral);margin:0 6px}.answer-heading{color:var(--ink);justify-content:space-between;margin-bottom:14px;display:flex}.answer-hint{color:var(--muted)}.answer-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.answer-button{border:1px solid var(--line);min-height:66px;color:var(--ink);cursor:pointer;background:0 0;border-radius:2px;flex-direction:column;justify-content:center;gap:5px;padding:10px 7px;transition:background .2s,border .2s,transform .2s;display:flex}.answer-button strong{font-family:Playfair Display,serif;font-size:20px;font-weight:500}.answer-button span{color:var(--muted);font-size:9px}.answer-button:not(:disabled):hover{border-color:var(--coral);background:#fff9f4;transform:translateY(-2px)}.answer-button:disabled{cursor:default;opacity:.45}.answer-button.is-correct{color:var(--green);border-color:var(--green);background:var(--mint);opacity:1}.answer-button.is-chosen{color:var(--coral-dark);border-color:var(--coral);opacity:1;background:#fbe4dc}.feedback{border-left:3px solid;justify-content:space-between;align-items:center;min-height:65px;margin-top:22px;padding:13px 17px;animation:.3s ease-out reveal;display:flex}.feedback.correct{border-color:var(--green);background:var(--mint)}.feedback.incorrect{border-color:var(--coral);background:#fbe4dc}.feedback strong,.feedback span{display:block}.feedback strong{font-family:Playfair Display,serif;font-size:18px;font-weight:500}.feedback span{color:var(--muted);margin-top:4px;font-size:11px}.feedback-actions{align-items:center;gap:8px;display:flex}.feedback button{color:var(--coral-dark);cursor:pointer;background:0 0;border:0;padding:9px 0 9px 16px;font-size:12px;font-weight:600}.feedback button span{color:inherit;margin:0 0 0 5px;font-size:16px;display:inline}@keyframes reveal{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.bottom-bar{border-top:1px solid var(--line);min-height:47px;color:var(--muted);justify-content:space-between;align-items:center;padding:0 5.5vw;font-size:9px;display:flex}.completion-shell{justify-content:space-between;padding:40px 5.5vw 31px}.completion-card{text-align:center;width:100%;max-width:620px;margin:auto}.completion-card h1{letter-spacing:-.04em;margin:20px 0 25px;font-family:Playfair Display,serif;font-size:clamp(50px,7vw,83px);font-weight:500;line-height:.95}.final-score{color:var(--coral-dark);font-family:DM Mono,monospace;font-size:54px}.final-score span{color:var(--muted);font-size:16px}.final-stats{justify-content:center;gap:70px;margin:24px 0 39px;display:flex}.final-stats div{flex-direction:column;gap:6px;display:flex}.final-stats strong{font-family:Playfair Display,serif;font-size:25px;font-weight:500}.final-stats span{text-transform:uppercase;color:var(--muted);letter-spacing:.08em;font-family:DM Mono,monospace;font-size:9px}.primary-button{padding:16px 24px;font-weight:600}.play-again span{margin-left:20px;font-size:17px}.footer-note{color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.09em;font-family:DM Mono,monospace;font-size:9px}@media (width<=720px){.topbar{gap:15px;min-height:68px;padding:0 22px}.mode-label{display:none}.question-count{margin-left:auto}.game-layout{display:block}.side-rail{border-right:0;border-bottom:1px solid var(--line);align-items:center;gap:15px;padding:18px 22px;display:flex}.rail-label,.rail-rule,.rail-copy{display:none}.rail-stat{flex-direction:row;align-items:baseline;gap:8px;margin:0}.rail-stat span{font-size:10px}.rail-stat strong{font-size:25px}.rail-stat+.rail-stat{margin-left:auto}.practice-area{padding:38px 22px 45px}.practice-controls{gap:13px;margin-bottom:52px}.setting-group{display:block}.setting-label{margin:0 0 6px 2px;display:block}.segmented-control button{padding:7px 8px}.practice-heading h1{font-size:clamp(52px,15vw,70px)}.sound-stage{margin:58px 0 49px;padding:25px 15px 22px}.answer-grid{grid-template-columns:repeat(3,1fr)}.answer-button{min-height:70px}.bottom-bar{padding:0 22px}.bottom-bar span:last-child{display:none}.completion-shell{padding:31px 22px 25px}.completion-card h1{font-size:55px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}