:root{color:#171a1b;font-synthesis:none;text-rendering:optimizelegibility;--paper:#f7f1e4;--ink:#171a1b;--coral:#ff5148;--coral-dark:#db352f;--blue:#145ed9;--yellow:#ffc928;--line:#1d262a;--muted:#6f706b;background:#f7f1e4;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans HK,PingFang HK,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}html,body,#root{background-color:#f7f1e4}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.app-shell{background-color:var(--paper);background-image:radial-gradient(circle at 20% 18%,#4532140e 0 1px,#0000 1.3px),radial-gradient(circle at 79% 68%,#4532140a 0 1px,#0000 1.2px);background-size:27px 29px,31px 33px;grid-template-rows:auto 1fr auto;min-height:100vh;display:grid;position:relative;overflow:hidden}.app-shell:before,.app-shell:after{content:"";z-index:0;background-color:var(--yellow);pointer-events:none;border-radius:50%;width:130px;height:130px;position:absolute;bottom:-48px}.app-shell:before{background-image:repeating-linear-gradient(132deg,#0000 0 9px,#171a1ba6 9px 11px,#0000 11px 17px);left:-52px}.app-shell:after{background-image:radial-gradient(circle, var(--ink) 0 1.3px, transparent 1.6px);background-size:10px 10px;right:-42px}.app-shell>*{z-index:1;position:relative}.site-header{border-bottom:1px dashed #171a1b2e;justify-content:space-between;align-items:center;min-height:92px;padding:18px clamp(24px,4vw,64px);display:flex}.brand{align-items:center;gap:13px;display:flex}.brand-mark{color:#fff;background:var(--coral);border-radius:50%;place-items:center;width:55px;height:55px;display:grid;transform:rotate(-2deg)}.brand-mark svg{fill:none;stroke:currentColor;stroke-width:2.3px;stroke-linecap:round;stroke-linejoin:round;width:37px}.brand-copy{line-height:1;display:grid}.brand-copy strong{letter-spacing:.08em;font-size:24px;font-weight:900}.brand-copy small{letter-spacing:.32em;margin-top:8px;font-size:11px;font-weight:700}.header-actions{gap:16px;display:flex}.icon-button,.settings-button{border:1.5px solid var(--line);cursor:pointer;background:#ffffff2e;border-radius:8px;min-height:48px;transition:transform .16s,box-shadow .16s,background .16s}.icon-button:hover,.settings-button:hover{box-shadow:3px 3px 0 var(--yellow);background:#fffaf0;transform:translate(-2px,-2px)}.icon-button{place-items:center;width:62px;display:grid}.settings-button{align-items:center;gap:9px;padding:0 20px;font-size:15px;font-weight:750;display:flex}.icon-button svg,.settings-button svg,.dialog-close svg,.replay-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}main{flex-direction:column;align-items:center;width:min(1120px,100% - 40px);margin:0 auto;padding:35px 0 15px;display:flex}.sound-stage{text-align:center;width:100%}.sound-stage h1,.results h1{letter-spacing:.04em;margin:0;font-size:clamp(45px,5.2vw,70px);font-weight:950;line-height:.98}.intro{letter-spacing:.14em;margin:14px 0 16px;font-family:Georgia,Noto Serif HK,serif;font-size:18px}.sound-visual{grid-template-columns:1fr 225px 1fr;align-items:center;min-height:300px;display:grid;position:relative}.play-button{z-index:2;border:3px solid var(--line);background:var(--coral);color:#fff;width:205px;height:205px;box-shadow:7px 7px 0 var(--coral-dark), 9px 9px 0 var(--line);cursor:pointer;border-radius:50%;flex-direction:column;grid-column:2;justify-content:center;justify-self:center;align-items:center;gap:4px;transition:transform .12s,box-shadow .12s;display:flex}.play-button:hover{box-shadow:9px 9px 0 var(--coral-dark), 11px 11px 0 var(--line);transform:translate(-2px,-2px)}.play-button:active{box-shadow:2px 2px 0 var(--coral-dark), 3px 3px 0 var(--line);transform:translate(5px,5px)}.play-button svg{fill:#fff;stroke:none;width:56px;height:56px}.play-button span{letter-spacing:.09em;font-size:19px;font-weight:850}.sound-rings{pointer-events:none;width:275px;height:275px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sound-rings i{border:1.5px dashed #ff514894;border-radius:50%;position:absolute;inset:0}.sound-rings i:nth-child(2){inset:13px;transform:rotate(12deg)}.sound-rings i:nth-child(3){inset:27px;transform:rotate(-8deg)}.is-playing .sound-rings i{animation:1s ease-out infinite ring-pulse}.is-playing .sound-rings i:nth-child(2){animation-delay:.12s}.is-playing .sound-rings i:nth-child(3){animation-delay:.24s}.waveform{height:90px;color:var(--coral);align-items:center;gap:clamp(3px,.38vw,6px);display:flex;overflow:hidden}.waveform--left{justify-content:flex-start;transform:scaleX(-1)}.waveform--right{justify-content:flex-start}.waveform i{width:2px;height:var(--bar-height);transform-origin:50%;background:currentColor;border-radius:2px;min-height:4px;display:block}.is-playing .waveform i{animation:.56s ease-in-out infinite alternate bar-dance;animation-delay:calc(var(--bar-height) * -9ms)}.question-status{letter-spacing:.1em;margin:2px 0 0;font-weight:750}.question-status span{color:var(--coral);margin:0 .35em}.feedback-slot{color:#0000;min-height:30px;margin:8px auto 2px;font-weight:800;transition:color .2s}.feedback-slot.has-feedback{color:var(--ink)}.answer-frame{border:2px solid var(--line);width:100%;box-shadow:7px 7px 0 var(--blue);background:#ffffff1f;border-radius:8px;padding:14px}.answer-grid{grid-template-columns:repeat(6,1fr);gap:11px;display:grid}.note-key{border:1.7px solid var(--line);cursor:pointer;background:#ffffff4d;border-radius:7px;min-height:84px;font-size:34px;font-weight:900;line-height:1;transition:transform .12s,background .12s,box-shadow .12s,color .12s}.note-key:hover:not(:disabled),.note-key.is-selected{color:var(--blue);box-shadow:4px 4px 0 var(--blue);background:#eef4ff;transform:translate(-2px,-2px)}.note-key:disabled{cursor:default;opacity:.5}.note-key.is-correct{opacity:1;color:#155f2e;background:#d8f6cb;border-color:#155f2e;transform:translate(-2px,-2px);box-shadow:4px 4px #155f2e}.note-key.is-wrong{opacity:1;color:#a9201e;background:#ffe0dc;border-color:#a9201e;text-decoration:line-through}.secondary-actions{place-items:center;min-height:72px;display:grid}.replay-button,.next-button,.dialog-done,.results button{border:1.7px solid var(--blue);min-width:210px;height:51px;color:var(--blue);letter-spacing:.08em;cursor:pointer;background:0 0;border-radius:7px;font-size:17px;font-weight:850;transition:transform .12s,box-shadow .12s,background .12s}.replay-button{justify-content:center;align-items:center;gap:11px;display:flex}.replay-button:hover:not(:disabled){box-shadow:4px 4px 0 var(--blue);background:#eef4ff;transform:translate(-2px,-2px)}.replay-button:disabled{opacity:.35;cursor:not-allowed}.next-button,.dialog-done,.results button{color:#fff;background:var(--blue)}.next-button:hover,.dialog-done:hover,.results button:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.progress-footer{border-top:1px dashed #171a1b2e;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;min-height:78px;padding:16px clamp(24px,6vw,100px);display:grid}.progress-footer>strong{letter-spacing:.12em;font-size:25px}.progress-track{background:#171a1b14;border:1px solid #171a1b38;border-radius:20px;height:14px;overflow:hidden}.progress-track i{border-radius:inherit;background:var(--coral);height:100%;transition:width .35s;display:block}.footer-meta{justify-items:end;gap:2px;display:grid}.footer-streak{letter-spacing:.06em;font-size:17px;font-weight:800}.studio-credit{color:var(--muted);letter-spacing:.045em;white-space:nowrap;font-size:10px;font-weight:700}.studio-credit a{color:inherit;text-underline-offset:2px;text-decoration:underline;text-decoration-thickness:1px}.studio-credit a:hover{color:var(--blue)}.progress-footer b{color:var(--coral);margin-left:8px;font-size:27px}.dialog-backdrop{z-index:20;background:#171a1b7a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.settings-dialog{border:2px solid var(--ink);background:var(--paper);width:min(430px,100%);box-shadow:8px 8px 0 var(--blue);border-radius:10px;padding:28px}.dialog-heading{justify-content:space-between;align-items:center;display:flex}.dialog-heading h2{margin:0;font-size:28px}.dialog-close{cursor:pointer;background:0 0;border:0;width:40px;height:40px}.settings-dialog label{justify-content:space-between;margin:30px 0 12px;font-weight:800;display:flex}.settings-dialog input{width:100%;accent-color:var(--coral)}.settings-dialog p{color:var(--muted);font-size:14px;line-height:1.7}.dialog-done{width:100%;margin-top:12px}.results{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:540px;display:flex;position:relative}.results p{max-width:500px;font-size:19px;line-height:1.7}.results>strong{color:var(--coral);margin:12px 0 30px;font-size:96px;line-height:1}.results>strong small{color:var(--ink);font-size:25px}.result-orbit{pointer-events:none;width:440px;height:440px;position:absolute}.result-orbit i{border:1.5px dashed #ff514859;border-radius:50%;position:absolute;inset:0;transform:rotate(-8deg)}.result-orbit i:last-child{border-color:#145ed94d;inset:34px;transform:rotate(13deg)}.results>:not(.result-orbit){z-index:1;position:relative}@keyframes ring-pulse{0%{opacity:.9;transform:scale(.82)}to{opacity:0;transform:scale(1.16)}}@keyframes bar-dance{0%{transform:scaleY(.45)}to{transform:scaleY(1.2)}}@media (width<=760px){.app-shell:before,.app-shell:after{display:none}.site-header{min-height:76px;padding:12px 16px}.brand-mark{width:46px;height:46px}.brand-mark svg{width:31px}.brand-copy strong{font-size:19px}.brand-copy small{margin-top:6px;font-size:8px}.settings-button{justify-content:center;width:48px;padding:0}.settings-button span{display:none}.header-actions{gap:8px}.icon-button{width:48px}main{width:min(100% - 28px,560px);padding:25px 0 16px}.sound-stage h1{font-size:clamp(40px,13vw,57px)}.intro{margin:11px 0 8px;font-size:15px}.sound-visual{grid-template-columns:1fr 165px 1fr;min-height:190px}.play-button{width:150px;height:150px;box-shadow:5px 5px 0 var(--coral-dark), 7px 7px 0 var(--line)}.play-button svg{width:45px;height:45px}.play-button span{font-size:16px}.sound-rings{width:195px;height:195px}.waveform{gap:3px}.waveform i:nth-child(2n){display:none}.feedback-slot{margin-top:6px}.answer-frame{box-shadow:5px 5px 0 var(--blue);padding:9px}.answer-grid{grid-template-columns:repeat(4,1fr);gap:8px}.note-key{min-height:57px;font-size:27px}.progress-footer{grid-template-columns:auto 1fr;gap:12px 18px;min-height:70px;padding:13px 18px}.progress-track{height:11px}.progress-footer>strong{font-size:20px}.footer-meta{grid-column:1/-1;margin-top:-4px}.footer-streak{font-size:14px}.studio-credit{font-size:9px}.progress-footer b{font-size:20px}.results{min-height:480px}.results h1{font-size:45px}.results>strong{font-size:76px}}@media (height<=850px) and (width>=761px){.site-header{min-height:76px;padding-top:10px;padding-bottom:10px}.brand-mark{width:48px;height:48px}main{padding:12px 0 8px}.sound-stage h1{font-size:49px}.intro{margin:10px 0 7px}.sound-visual{min-height:166px}.play-button{width:156px;height:156px}.sound-rings{width:205px;height:205px}.note-key{min-height:58px}.feedback-slot{margin-top:3px}.secondary-actions{min-height:54px}.replay-button,.next-button{height:46px}.progress-footer{min-height:60px;padding-top:10px;padding-bottom:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.access-shell{background-color:var(--paper);background-image:radial-gradient(circle at 20% 18%,#4532140e 0 1px,#0000 1.3px),radial-gradient(circle at 79% 68%,#4532140a 0 1px,#0000 1.2px);background-size:27px 29px,31px 33px;min-height:100vh;padding:22px clamp(20px,4vw,64px);overflow:hidden}.access-brand{align-items:center;gap:13px;display:flex}.access-main{place-items:center;min-height:calc(100vh - 100px);padding:40px 0 80px;display:grid;position:relative}.access-panel{z-index:1;border:2px solid var(--ink);background:var(--paper);width:min(460px,100%);box-shadow:8px 8px 0 var(--blue);border-radius:10px;padding:40px;position:relative}.access-panel h1{letter-spacing:.04em;margin:0;font-size:clamp(38px,5vw,54px);font-weight:950;line-height:1}.access-panel>p{color:var(--muted);margin:16px 0 26px;line-height:1.7}.access-panel form{gap:11px;display:grid}.access-panel label{letter-spacing:.08em;font-size:14px;font-weight:850}.access-panel input{border:1.7px solid var(--line);letter-spacing:.12em;background:#fffaf0;border-radius:7px;width:100%;height:54px;padding:0 16px;font-size:22px}.access-panel form button{border:1.7px solid var(--line);color:#fff;background:var(--coral);height:54px;box-shadow:4px 4px 0 var(--coral-dark);letter-spacing:.08em;cursor:pointer;border-radius:7px;margin-top:5px;font-weight:900}.access-panel form button:hover{box-shadow:6px 6px 0 var(--coral-dark);transform:translate(-2px,-2px)}.access-panel>small{color:var(--muted);text-align:center;margin-top:22px;display:block}.access-error{color:#a9201e;margin:0;font-size:14px;font-weight:800}.access-rings{pointer-events:none;width:650px;height:650px;position:absolute}.access-rings i{border:1.5px dashed #ff51484d;border-radius:50%;position:absolute;inset:0}.access-rings i:nth-child(2){border-color:#145ed945;inset:55px;transform:rotate(8deg)}.access-rings i:nth-child(3){inset:110px;transform:rotate(-11deg)}@media (width<=560px){.access-shell{padding:16px}.access-main{min-height:calc(100vh - 78px);padding:25px 0 50px}.access-panel{box-shadow:6px 6px 0 var(--blue);padding:30px 24px}.access-panel h1{font-size:40px}.access-rings{width:470px;height:470px}}