:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#141720;color:#efebe1;font-synthesis:none;color-scheme:dark;--muted:#8d909f;--lavender:#c2b3f5;--cream:#efebe1;--line:#ffffff12}*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100vh;background:radial-gradient(ellipse at 48% 0%,#30283f66,transparent 52%),#141720}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--lavender);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.site-header{max-width:1280px;margin:auto;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:2px;font-weight:700}.brand b{font-weight:400;color:#858898}.brand-icon{width:29px;height:31px;display:flex;gap:3px;position:relative}.brand-icon i{display:block;width:8px;height:29px;background:#e6dfd0;border-radius:1px}.brand-icon:before,.brand-icon:after{content:'';position:absolute;top:0;width:6px;height:18px;background:var(--lavender);border:1px solid #141720}.brand-icon:before{left:6px}.brand-icon:after{left:17px}.header-caption{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:1.7px;color:#878392}.icon-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff1f;border-radius:5px;background:#ffffff04;color:#e5dfd1;font-size:21px}.icon-button:hover{background:#ffffff10}.icon-button:disabled{opacity:.25}.icon-button[aria-pressed=true]{opacity:.45}main{max-width:1200px;margin:auto;padding:30px 32px 0}.page-topline{display:flex;justify-content:space-between;align-items:center;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:1.4px;color:#b6aec7;margin-bottom:29px}.page-topline i{display:inline-block;width:5px;height:5px;background:var(--lavender);margin:0 8px 1px 0;box-shadow:0 0 12px #c2b3f533}.page-topline>span:last-child{font-size:8px;color:#666775}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(300px,400px) minmax(170px,.8fr);gap:48px;align-items:start}.library{padding-top:14px}.eyebrow{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:1.2px;color:#a5a0b1}.library>.eyebrow{color:#b4a5ca}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:58px;line-height:1.06;letter-spacing:-1.8px;margin:24px 0 20px}h1 em{color:var(--lavender);font-weight:400}.intro{font-size:11px;color:#9895a4;line-height:1.9;margin:0 0 39px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-heading h2,.section-heading>span{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:1.2px;color:#b3acbf;font-weight:500;margin:0}.section-heading>span{font-size:7px;color:#676774}.songs{display:grid;gap:10px}.song-card{position:relative;width:100%;display:flex;align-items:center;gap:12px;min-height:82px;border:1px solid #ffffff0c;border-radius:6px;padding:13px 12px;text-align:left;background:#1c1e29;color:#e4dfd5;transition:background .15s,border-color .15s}.song-card:hover{background:#232431}.song-card[aria-pressed=true]{border-color:#a897d477;background:linear-gradient(120deg,#39314777,#22222e)}.song-number{font-family:Georgia,serif;font-style:italic;font-size:25px;color:#6e6b7a;min-width:24px}.song-card[aria-pressed=true] .song-number{color:var(--lavender)}.song-info{flex:1;min-width:0}.song-info strong{font-size:11px;display:block;font-weight:600}.song-info small{display:block;font-size:8px;margin-top:6px;color:#777783;letter-spacing:.5px}.song-card .bars{display:flex;gap:2px;align-items:center;height:22px;min-width:18px}.bars i{display:block;width:3px;background:#80768e;height:10px}.bars i:nth-child(2){height:19px}.bars i:nth-child(3){height:14px}.song-card[aria-pressed=true] .bars i{background:var(--lavender)}.song-complete{font-size:9px;color:#b5c9a9;margin-left:2px}.library-footnote{font-size:8px;color:#676574;margin-top:19px;display:flex;align-items:center;gap:8px}.library-footnote span{font-size:15px;color:#b0a2c4}.mode-switch{height:47px;display:flex;border:1px solid #ffffff10;border-radius:6px;background:#1b1d27;padding:4px;margin-bottom:15px}.mode-switch button{border:0;background:transparent;color:#777483;border-radius:3px;flex:1;text-align:center;font-size:8px;font-weight:700;letter-spacing:1px}.mode-switch button span{display:block;font-size:7px;font-weight:400;letter-spacing:0;margin-top:3px}.mode-switch button[aria-pressed=true]{background:#36303f;color:#e6dcf8;box-shadow:0 1px 3px #0003}.instrument{border:1px solid #ffffff23;border-radius:9px;overflow:hidden;background:#23232d;box-shadow:0 22px 65px #05091055,0 0 45px #b5a0e209}.scorebar{height:69px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#1d202b}.scorebar>div>span,.combo-stat>span{font-size:7px;letter-spacing:1.4px;color:#96909f}.scorebar strong{display:block;margin-top:5px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:23px;letter-spacing:1px;font-weight:500}.combo-stat strong{font-size:19px;text-align:center}.combo-stat strong>span{font-size:11px;color:#a799c2;margin-left:2px}.score-actions{display:flex;align-items:center;gap:10px}.score-actions #lives{color:#c2b3f5;font-size:11px;letter-spacing:2px}.score-actions .icon-button{width:28px;height:28px;font-size:16px}.playfield{height:470px;position:relative;overflow:hidden;background:#e8e4da;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}.board-label{position:absolute;top:15px;left:16px;right:16px;display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:7px;letter-spacing:1px;color:#5d5963;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:linear-gradient(#e9e4dad9,#e9e4dae8 44%,#e9e4daaa);padding:22px;color:#282833;z-index:3}.welcome{text-align:center;width:100%;max-width:280px}.welcome-note{font-family:Georgia,serif;font-size:49px;line-height:1;color:#89809b;margin-bottom:18px}.welcome>.eyebrow{color:#84768f;font-size:7px}.welcome h2{font-family:Georgia,serif;font-weight:400;font-size:36px;letter-spacing:-1px;line-height:1.1;margin:16px 0}.welcome h2 em{color:#6b5981;font-weight:400}.welcome p{font-size:10px;line-height:1.9;color:#7e7480;margin:16px 0 23px}.welcome .button{min-width:185px}.welcome .subtle{margin:15px 0 0;font-size:8px;color:#8f8494}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:42px;padding:0 22px;border:0;border-radius:4px;background:#393142;color:#f2e9f6;font-size:10px;font-weight:700;letter-spacing:.8px;box-shadow:0 3px 0 #211c2b;transition:transform .15s,background .15s}.button:hover{background:#52415f;transform:translateY(-1px)}.button.secondary{background:#dfd8e2;color:#62536c;box-shadow:none;border:1px solid #bfb2ca}.dialog{width:100%;max-width:285px;text-align:center}.dialog .eyebrow{color:#81708d;font-size:7px}.dialog h2{font-family:Georgia,serif;font-weight:400;font-size:32px;letter-spacing:-.8px;line-height:1.15;margin:14px 0}.dialog p{font-size:10px;line-height:1.8;color:#7e7483}.dialog .button{width:100%;margin-top:13px}.dialog .secondary{margin-top:9px;min-height:36px;font-size:8px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #77708029;padding:13px 0;margin:17px 0 6px;gap:8px}.result-stats span{display:block;font-size:6px;letter-spacing:1px;color:#8b7f93}.result-stats strong{font-family:ui-monospace,monospace;font-weight:500;font-size:19px;display:block;margin-top:7px;color:#494054}.result-score{font-size:35px;font-family:ui-monospace,monospace;letter-spacing:1px;margin:15px 0 5px;color:#554163}.rating{font-size:23px;color:#a88bba;letter-spacing:5px}.best-note{font-size:8px;color:#83718b;margin-top:8px}.dialog .help-copy{text-align:left;font-size:10px;line-height:1.9}.help-copy b{color:#5e4b6b}.piano{display:grid;grid-template-columns:repeat(4,1fr);height:61px;background:#c5c0b6;gap:1px}.piano button{border:0;border-bottom:5px solid #c4bfb5;border-radius:0 0 3px 3px;background:linear-gradient(#f0ece2,#e6e1d6);color:#706975;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .06s}.piano button b{font-family:ui-monospace,monospace;font-size:14px;font-weight:400}.piano button span{font-family:ui-monospace,monospace;font-size:6px;letter-spacing:1px;color:#aca4ad}.piano button:active,.piano button.down{background:#c8b7e4;border-bottom-color:#9582b1;color:#493359}.progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#302d3915;z-index:2}.progress i{display:block;width:0;height:100%;background:#9a7fbc;transition:width .15s}.below-board{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:6px;letter-spacing:.7px;color:#7e768c;margin-top:13px}.guide{padding-top:16px}.personal-best{padding:0 0 26px;border-bottom:1px solid var(--line)}.personal-best strong{display:block;font-family:ui-monospace,monospace;font-size:31px;font-weight:400;letter-spacing:1.6px;color:#d4c2ee;margin:15px 0 9px}.personal-best>span:last-child{display:block;font-family:ui-monospace,monospace;font-size:6px;color:#777080;letter-spacing:.9px}.how-to{margin-top:31px}.how-to .eyebrow{font-size:7px;color:#81798e;letter-spacing:.7px}.how-to h2{font-family:Georgia,serif;font-size:25px;font-weight:400;line-height:1.3;letter-spacing:-.4px;margin:16px 0 25px}.how-to ol{padding:0;margin:0;list-style:none;display:grid;gap:22px}.how-to li{display:flex;gap:14px;align-items:flex-start}.how-to li>span{font-family:ui-monospace,monospace;font-size:8px;color:#9b88ac;line-height:1.8}.how-to p{margin:0;font-size:10px;line-height:1.8;color:#a49bab}.keyboard-guide{display:flex;gap:6px;margin-top:27px}kbd{font-family:ui-monospace,monospace;display:grid;place-items:center;min-width:29px;height:30px;border:1px solid #7b6c8d55;border-bottom-width:3px;border-radius:4px;background:#29243166;color:#b4a5c5;font-size:10px}.keyboard-caption{font-size:6px!important;letter-spacing:.65px;margin-top:12px!important;color:#6f667c!important}.tip{display:flex;gap:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.tip>span{font-size:17px;color:#b6a2cc}.tip p{font-size:9px;line-height:1.8;margin:0;color:#8b8198}.text-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;color:#a799bb;padding:18px 0;font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.9px}.text-button span{font-size:15px}footer{max-width:1136px;border-top:1px solid var(--line);margin:40px auto 0;padding:23px 0 28px;display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:7px;letter-spacing:1.2px;color:#6e657e}footer b{color:#a590bc;font-size:14px;font-weight:400;margin-left:10px}.mobile-track{display:none}#countdown{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;background:#e8e3db40}#countdown strong{font-family:Georgia,serif;font-size:88px;font-weight:400;color:#5e4d70;text-shadow:0 2px 20px #eae5dd}#countdown>span{font-family:ui-monospace,monospace;font-size:8px;letter-spacing:2px;color:#85738d}#feedback{position:absolute;top:64%;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:3px;pointer-events:none;opacity:0;color:#6e5287;background:#ede5f7da;font-size:10px;letter-spacing:2px;font-weight:800;z-index:2;white-space:nowrap}#feedback.show{opacity:1}.feedback-error{color:#a6616e!important;background:#f8e4e4e6!important}.playing .board-label{opacity:.65}.playing .overlay{backdrop-filter:blur(3px)}.locked .song-card,.locked .mode-switch button,.locked #track-select{opacity:.45;pointer-events:none}.active-song-tag{color:#c5b5db!important}
@media(min-height:900px) and (min-width:1001px){.playfield{height:510px}.workspace{gap:53px}.library{padding-top:30px}.guide{padding-top:30px}h1{font-size:62px}.intro{margin-bottom:47px}.how-to{margin-top:39px}}
@media(max-width:1100px){.workspace{gap:28px;grid-template-columns:minmax(185px,1fr) minmax(300px,380px) minmax(155px,.8fr)}h1{font-size:51px}.song-card{padding-inline:10px;gap:8px}.song-number{font-size:22px}.song-info strong{font-size:10px}.song-info small{font-size:7px}.how-to h2{font-size:22px}.how-to p{font-size:9px}.personal-best strong{font-size:28px}footer{margin-inline:32px}}
@media(max-width:860px){.workspace{grid-template-columns:minmax(185px,1fr) minmax(300px,400px);max-width:730px;gap:35px;margin:auto}.guide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:10px}.personal-best{border-bottom:0;padding:0;min-width:160px}.personal-best strong{font-size:26px;margin:10px 0}.how-to{display:none}.tip{margin:0;border:0;padding:0;max-width:225px}.text-button{max-width:110px}.site-header{padding-inline:32px;height:76px}.page-topline{font-size:8px}.header-caption{font-size:7px}.playfield{height:480px}main{padding-top:24px}.intro{font-size:10px}footer{margin-top:30px;font-size:6px}}
@media(max-width:580px){.site-header{height:65px;padding:0 20px}.brand{font-size:8px;letter-spacing:1.7px;gap:10px}.brand-icon{transform:scale(.85);transform-origin:left center;width:25px}.header-caption{display:none}.icon-button{width:31px;height:31px}main{padding:20px 17px 0}.page-topline{margin-bottom:19px;font-size:8px;letter-spacing:1.3px}.page-topline>span:last-child{font-size:6px;letter-spacing:.6px}.workspace{display:flex;flex-direction:column;gap:28px;max-width:400px}.game-column{width:100%;order:0}.library{order:2;width:100%;padding-top:0}.library>.eyebrow,.library>h1,.library>.intro{display:none}.guide{order:1;width:100%;display:flex;gap:20px;flex-wrap:wrap;padding-top:0}.personal-best{min-width:130px;flex:1}.personal-best .eyebrow{font-size:7px;letter-spacing:.8px}.personal-best strong{font-size:24px}.personal-best>span:last-child{font-size:6px}.tip{display:none}.guide .text-button{max-width:105px;font-size:7px}.mode-switch{height:43px;margin-bottom:12px}.mobile-track{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px;font-family:ui-monospace,monospace;color:#9c91ac;font-size:7px;letter-spacing:1px}.mobile-track select{border:0;background:transparent;color:#d6c5e8;font-size:10px;max-width:190px;padding:2px 5px}.mobile-track select option{background:#22212b}.scorebar{height:61px;padding-inline:15px}.scorebar strong{font-size:22px}.scorebar>div>span{font-size:6px}.score-actions #lives{font-size:10px;letter-spacing:1.4px}.score-actions{gap:8px}.combo-stat strong{font-size:18px}.playfield{height:clamp(300px,49dvh,445px)}.piano{height:57px}.below-board{font-size:6px;letter-spacing:.4px}.board-label{font-size:6px;left:13px;right:13px;top:13px}.welcome-note{font-size:42px;margin-bottom:14px}.welcome h2{font-size:34px;margin:14px 0}.welcome p{font-size:10px;margin:14px 0 21px}.welcome .subtle{font-size:7px;margin-top:13px}.button{min-height:42px}.songs{grid-template-columns:1fr;gap:8px}.song-card{min-height:69px;padding:12px 15px;gap:16px}.song-number{font-size:24px}.song-info strong{font-size:11px}.song-info small{font-size:8px}.section-heading{margin-bottom:14px}.library-footnote{font-size:8px;margin-top:15px}footer{font-size:6px;letter-spacing:.7px;margin:28px 20px 0;padding:20px 0 24px;gap:20px}footer b{font-size:12px;margin-left:5px}.dialog{max-width:260px}.dialog h2{font-size:29px;margin:10px 0}.dialog p{font-size:9px}.result-score{font-size:30px;margin-top:12px}.result-stats{padding:10px 0;margin-top:13px}.result-stats strong{font-size:17px}.dialog .button{margin-top:11px;min-height:38px}.dialog .secondary{margin-top:8px;min-height:32px}.rating{font-size:18px}.overlay{padding:18px}.help-copy{font-size:9px!important}.board-label{z-index:1}#feedback{font-size:8px}#countdown strong{font-size:72px}}
@media(max-width:350px){main{padding-inline:12px}.page-topline>span:last-child{font-size:5px;letter-spacing:.2px}.scorebar{padding-inline:12px}.scorebar strong{font-size:20px}.score-actions{gap:5px}.score-actions #lives{font-size:9px}.score-actions .icon-button{width:25px;height:26px}.welcome h2{font-size:31px}.welcome p{font-size:9px}.playfield{height:clamp(300px,48dvh,420px)}.dialog h2{font-size:27px}.personal-best strong{font-size:22px}}
@media(max-height:500px) and (orientation:landscape){.site-header,.page-topline,.library,.guide,footer,.below-board,.mobile-track{display:none}main{padding:8px;max-width:620px}.workspace{display:block;max-width:360px}.mode-switch{height:35px;margin-bottom:8px}.mode-switch button span{display:none}.scorebar{height:45px}.scorebar strong{font-size:18px}.scorebar>div>span{font-size:6px}.playfield{height:calc(100dvh - 151px);min-height:200px}.piano{height:43px}.welcome-note{display:none}.welcome h2{font-size:28px;margin:8px 0}.welcome p{font-size:8px;margin:10px 0}.welcome .subtle{margin-top:9px}.button{min-height:34px;font-size:9px}.dialog h2{font-size:23px;margin:8px 0}.dialog p{font-size:8px;margin:7px 0}.dialog .button{min-height:29px;margin-top:8px;font-size:8px}.result-score{font-size:23px;margin:6px 0}.result-stats{padding:7px 0;margin:8px 0 0}.result-stats strong{font-size:14px;margin-top:4px}.rating{font-size:15px}.best-note{font-size:6px;margin-top:5px}.dialog .eyebrow{font-size:6px}.overlay{padding:10px}.board-label{top:8px;font-size:6px}.help-copy{font-size:8px!important;line-height:1.6!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}