@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;background:#111715;color:#eeeae0;--accent:#d8e9a8;--muted:#8a948b;--border:#303a33}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 55% 43%,#26322955,transparent 65%)}button,input{font:inherit}button{cursor:pointer;color:inherit;background:none;border:1px solid var(--border);border-radius:6px;transition:background .15s}button:hover{background:#ffffff09}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}[hidden]{display:none!important}main{max-width:1250px;padding:0 44px;margin:auto}.grain{position:fixed;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none;z-index:5}header{display:flex;justify-content:space-between;align-items:center;height:86px;border-bottom:1px solid var(--border)}.brand{display:flex;gap:13px;align-items:center;font:700 17px 'Space Grotesk',sans-serif;letter-spacing:2px}.brand-mark{display:block;color:var(--accent);font:bold italic 33px Georgia;letter-spacing:-6px;padding-right:7px}.brand-mark span{position:relative;top:4px}.brand-note{color:#717e72;font-size:8px;letter-spacing:1.6px;padding-left:9px}.header-right{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:1.5px;color:#909b8e}.header-right button{margin-left:15px;width:34px;height:34px;font-size:14px}.live-dot,.stage-top i{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #d8e9a844}.intro{display:flex;justify-content:space-between;align-items:center;padding:32px 0 29px}.eyebrow{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:2.3px}h1{font:500 45px/1.1 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:10px 0}em{color:var(--accent);font-family:Georgia,serif;font-weight:400}h1 em{letter-spacing:-1.8px}.intro p{font-size:12px;color:#90988e;margin:0}.intro-note{font:500 11px/1.9 'Space Grotesk',sans-serif;letter-spacing:2px;text-align:right;color:#d4d6c8}.intro-note span{color:#6c796d}.club{display:grid;grid-template-columns:240px minmax(280px,400px) 240px;gap:34px;justify-content:center}.section-label{font-size:8px;letter-spacing:1.7px;color:#8a978a;margin-bottom:16px}.selector,.dashboard{padding-top:6px}.album{aspect-ratio:1;border-radius:7px;position:relative;background:var(--accent);overflow:hidden;color:#263222;padding:18px;box-shadow:0 15px 30px #0002}.album:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#30412508 3px 4px);pointer-events:none}.album-top{font-size:7px;line-height:1.5;letter-spacing:1.4px;position:relative;z-index:2}.vinyl{width:205px;height:205px;border-radius:50%;position:absolute;top:5px;right:-35px;background:repeating-radial-gradient(circle,#202c25 0 1px,#354537 2px 3px,#26362b 4px 5px);box-shadow:inset 0 0 0 12px #27352b,inset 0 0 0 13px #52624788;display:grid;place-items:center;transform:rotate(-25deg)}.vinyl:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#b8cda62b,transparent 23%,transparent 50%,#c2d8ae33,transparent 74%)}.vinyl-center{width:65px;height:65px;border-radius:50%;background:var(--accent);border:8px solid #c4d2ab;display:grid;place-items:center;font:italic 28px Georgia}.album-bottom{position:absolute;bottom:17px;left:18px;right:17px;display:flex;justify-content:space-between;align-items:end;z-index:1}.album-bottom>span{font:700 25px/.95 'Space Grotesk',sans-serif;letter-spacing:-1.3px}.album-bottom small{font-size:8px;letter-spacing:1.5px}.tracks{margin-top:15px;display:flex;flex-direction:column;gap:7px}.track{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 10px;border-color:transparent}.track.selected{background:#d8e9a80b;border-color:#626f4a}.track-num{font:11px 'Space Grotesk',sans-serif;color:#687866}.track-info{flex:1}.track strong{display:block;font-size:10px;letter-spacing:.6px;font-weight:600}.track small{display:block;font-size:8px;color:#7a8779;margin-top:5px;letter-spacing:1px}.track .play-mark{color:var(--accent);font-size:13px}.difficulty-label{margin:22px 0 10px}.difficulty{display:flex;gap:6px}.difficulty button{flex:1;font-size:10px;padding:10px 3px}.difficulty .selected{color:#202b20;background:var(--accent);border-color:var(--accent);font-weight:700}.difficulty-help{font-size:9px;color:#738171;line-height:1.7;margin:10px 0 18px}.local-best{border-top:1px solid var(--border);padding-top:16px;display:flex;justify-content:space-between;gap:10px;align-items:center}.local-best>span{font-size:8px;color:#9da594;letter-spacing:1px}.local-best small{display:block;font-size:7px;margin-top:6px;color:#667663;letter-spacing:.5px}.local-best strong{font:18px 'Space Grotesk',sans-serif;color:var(--accent)}.stage-top{display:flex;justify-content:space-between;height:29px;align-items:start;color:#a8b59f;font-size:8px;letter-spacing:1px}.stage-top i{margin-right:7px}.stage-top>span:last-child{color:#7d8c76}.stage{position:relative;aspect-ratio:640/900;border:1px solid #43503f;border-radius:10px;overflow:hidden;background:#0d1310;box-shadow:0 0 0 5px #dae8a903,0 25px 50px #0003}canvas{width:100%;height:100%;display:block}.stage-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(#111c16d9,#111c16f7);padding:32px;backdrop-filter:blur(3px);z-index:2}.orbit-icon{font-size:56px;font-weight:400;color:var(--accent);margin-bottom:25px}.stage-overlay .eyebrow{font-size:8px;letter-spacing:2px}.stage-overlay h2{font:500 43px/1.12 'Space Grotesk',sans-serif;letter-spacing:-1.5px;margin:15px 0}.stage-overlay p{font-size:12px;color:#9ba78e;line-height:1.9;margin:0}.key-preview{display:flex;gap:8px;margin:25px 0}kbd{font:19px 'DM Sans',sans-serif;width:36px;height:36px;display:grid;place-items:center;border:1px solid #60724c;border-bottom:3px solid #60724c;border-radius:5px;color:#c2d49b;background:#e4eec508}.start-button{width:100%;padding:16px;font-size:10px;letter-spacing:1.5px;font-weight:bold;background:var(--accent);color:#1b281a;border-color:var(--accent)}.start-button:hover{background:#e5f4c1}.start-button span{margin-left:35px;font-size:18px}.stage-overlay>small{font-size:7px;letter-spacing:1px;color:#708161;margin-top:16px}.back-button{border:0;color:#a8b88e;font-size:10px;padding:13px}.touch-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;touch-action:none;user-select:none}.touch-pads button{height:47px;font-size:23px;border-color:#394733;background:#182218;border-bottom-width:3px}.touch-pads small{font-size:8px;color:#7b8b70;margin-left:8px}.touch-pads button.pressed{background:var(--accent);color:#1d2919;border-color:var(--accent)}.song-progress{height:2px;background:#303d2c;margin-top:16px}.song-progress>div{width:0;height:100%;background:var(--accent)}.stage-bottom{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.6px;color:#6f8065;margin-top:10px}.score-card{padding:23px 20px 18px;border:1px solid var(--border);border-radius:9px;background:#1a231c88}.score-card>span{font-size:9px;color:#9ca68f;letter-spacing:1.7px}.score-card>strong{display:block;font:500 39px 'Space Grotesk',sans-serif;margin:8px 0 25px;letter-spacing:-1px}.score-split{display:flex;justify-content:space-between}.score-split>div>span{font-size:8px;letter-spacing:1px;color:#7b8b70}.score-split b{display:block;font:500 27px 'Space Grotesk',sans-serif;margin-top:5px;color:var(--accent)}.score-split b span{font-size:13px;color:#80956d;margin-left:3px}.accuracy-bar{height:3px;background:#39452f;margin-top:22px}.accuracy-bar>div{width:100%;height:100%;background:var(--accent);transition:width .2s}.accuracy-caption{display:flex;justify-content:space-between;font-size:8px;margin-top:9px;color:#78896b}.accuracy-caption>span:last-child{font-size:7px}.judgements{padding:13px 4px 20px;border-bottom:1px solid var(--border)}.judgements>div{display:flex;align-items:center;gap:9px;margin:13px 0;font-size:11px;color:#9aa68d}.judgements strong{margin-left:auto;font:12px 'Space Grotesk',sans-serif}.judgements i{width:5px;height:5px;border-radius:50%}.perfect{background:#d8e9a8}.great{background:#86cbb8}.good{background:#ffb17d}.miss{background:#cc7987}.howto{padding-top:20px}.howto p{font-size:10px;line-height:1.8;color:#74846b;margin:12px 0}.howto b{font-weight:500;color:#a9b49c}.controls-row{font-size:11px;letter-spacing:3px;color:#b0bd9f;margin-top:18px}.controls-row span{font-size:8px;letter-spacing:0;color:#5b7051;margin:0 8px}.settings{margin-top:24px;border-top:1px solid var(--border);padding-top:15px}.settings summary{list-style:none;font-size:10px;color:#9ca98e;cursor:pointer;display:flex;justify-content:space-between}.settings label{display:block;font-size:10px;color:#849578;margin-top:15px}.settings input{display:block;width:100%;accent-color:var(--accent);margin:10px 0}.settings output{float:right}.settings p{font-size:9px;line-height:1.7;color:#75846b}footer{border-top:1px solid var(--border);padding:22px 0;display:flex;justify-content:space-between;font-size:9px;color:#66775d;margin-top:30px}footer>span:last-child{font-size:7px;letter-spacing:1.2px}footer i{color:var(--accent);font-size:12px;margin:0 12px}#feedback{position:absolute;left:0;right:0;top:49%;pointer-events:none;text-align:center;opacity:0;transition:opacity .1s;z-index:1}#feedback.show{opacity:1}#feedback strong{display:block;color:var(--accent);font:700 28px 'Space Grotesk',sans-serif;letter-spacing:3px;text-shadow:0 0 25px #badd7e66}#feedback small{display:block;font-size:10px;color:#a9bc91;margin-top:6px;letter-spacing:2px}#countdown{position:absolute;inset:34% 0 auto;text-align:center;font:700 80px 'Space Grotesk',sans-serif;color:var(--accent);pointer-events:none;text-shadow:0 0 40px #badd7e55}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:801px) and (max-height:850px){header{height:60px}.intro{padding:21px 0}h1{font-size:36px}.club{grid-template-columns:210px minmax(260px,calc((100svh - 310px)*.711)) 210px;gap:25px}.album{max-height:175px;aspect-ratio:auto}.vinyl{width:165px;height:165px;top:-12px;right:-12px}.album-top{font-size:6px}.album-bottom>span{font-size:21px}.album{height:175px}.tracks{margin-top:10px;gap:3px}.track{padding:8px}.difficulty-label{margin-top:14px}.local-best{padding-top:10px}.difficulty-help{margin-bottom:10px}.stage-overlay{padding:20px}.orbit-icon{font-size:34px;margin-bottom:13px}.stage-overlay h2{font-size:34px;margin:12px 0}.stage-overlay p{font-size:11px}.key-preview{margin:17px 0}kbd{width:30px;height:30px}.start-button{padding:12px}.score-card{padding:17px}.score-card>strong{font-size:32px;margin-bottom:18px}.judgements>div{margin:10px 0}.judgements{padding-bottom:10px}.howto{padding-top:15px}.howto p{font-size:9px;margin:9px 0}.settings{margin-top:16px}.score-split b{font-size:24px}.accuracy-bar{margin-top:16px}footer{margin-top:20px;padding:16px 0}.touch-pads button{height:39px}.song-progress{margin-top:10px}}
@media(max-width:1000px){main{padding:0 24px}.club{gap:20px;grid-template-columns:190px minmax(260px,360px) 190px}.brand-note{display:none}.header-right{font-size:7px}.album-bottom>span{font-size:22px}.score-card>strong{font-size:32px}}
@media(max-width:800px){main{padding:0 16px}header{height:65px}.brand{font-size:14px}.header-right{font-size:0;gap:0}.header-right button{font-size:15px}.header-right .live-dot{display:none}.intro{padding:22px 0}.intro h1{font-size:32px}.intro p{font-size:10px}.intro-note{display:none}.club{grid-template-columns:minmax(0,1fr) 160px;gap:18px;max-width:600px;margin:auto}.selector{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:10px 15px}.selector>.section-label,.album,.difficulty-label,.difficulty-help,.local-best{display:none}.tracks{grid-column:1/3;flex-direction:row;margin:0;gap:5px}.track{padding:10px 7px;border-color:var(--border)}.track-num{display:none}.track strong{font-size:8px}.track small{font-size:7px}.track .play-mark{display:none}.difficulty{grid-column:1/3;margin-bottom:6px}.difficulty button{padding:8px}.stage-column{grid-column:1}.dashboard{grid-column:2}.dashboard>.section-label{font-size:7px;letter-spacing:1px;height:23px;margin-bottom:0}.score-card{padding:13px 10px}.score-card>strong{font-size:26px;margin-bottom:18px}.score-split b{font-size:20px}.score-split>div>span{font-size:6px}.accuracy-caption{font-size:7px}.accuracy-caption>span:last-child{display:none}.howto p{font-size:9px}.controls-row{letter-spacing:1px;font-size:9px}.controls-row span{margin:0 3px}.stage-overlay{padding:18px}.stage-overlay h2{font-size:34px}.orbit-icon{font-size:36px;margin-bottom:16px}.stage-overlay p{font-size:11px}.stage-overlay .eyebrow{font-size:7px}.key-preview{margin:18px 0}kbd{width:28px;height:28px;font-size:16px}.stage-overlay>small{font-size:6px}.start-button{font-size:9px;padding:12px}.start-button span{margin-left:15px}.stage-bottom>span:last-child{display:none}footer>span:last-child{display:none}}
@media(max-width:480px){.club{grid-template-columns:minmax(0,1fr);gap:12px;max-width:360px}.selector{grid-column:1;grid-template-columns:1fr}.stage-column{grid-row:3;grid-column:1}.dashboard{grid-row:2;grid-column:1;padding:0}.dashboard>.section-label,.judgements,.howto,.settings{display:none}.score-card{padding:10px 14px;display:flex;align-items:center;gap:12px}.score-card>span{display:none}.score-card>strong{font-size:25px;margin:0;flex:1}.score-split{gap:20px}.score-split b{font-size:19px;margin-top:3px}.accuracy-bar,.accuracy-caption{display:none}.intro{padding:18px 0}.intro h1{font-size:30px}.intro .eyebrow{font-size:7px}.stage{max-height:470px;aspect-ratio:640/900}.touch-pads button{height:48px}.stage-top{height:23px}.tracks,.difficulty{grid-column:1}.track strong{font-size:7px}.track small{font-size:6px}.stage-overlay h2{font-size:37px}.key-preview{margin:20px 0}.stage-overlay>small{font-size:7px}.intro p{font-size:9px}.song-progress{margin-top:10px}footer{margin-top:20px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.result-grade{font-size:100px;line-height:1}.stage-overlay:has(.result-grade) h2{margin:8px 0 20px}
@media(max-width:480px){.settings{display:block;margin-top:10px;padding-top:10px}.settings[open]{padding-bottom:10px}.settings label{display:inline-block;width:46%;vertical-align:top;margin:12px 2% 0}.settings p{margin:5px 0 0}.settings summary{font-size:9px}}

/* Daylight edition: warm paper, peach accents, and high-contrast colored notes. */
:root{color-scheme:light;background:#fff8ef;color:#44342e;--accent:#c75542;--muted:#8b7569;--border:#e9d7c7}body{background:radial-gradient(ellipse at 10% 8%,#ffe5cd88,transparent 40%),radial-gradient(ellipse at 90% 40%,#ffe0db77,transparent 45%),#fff8ef}.grain{opacity:.014}.brand-note,.header-right{color:#8b7569}.live-dot,.stage-top i{box-shadow:0 0 10px #c7554222}.intro p,.intro-note span{color:#91796c}.intro-note{color:#725447}.section-label{color:#967567}.album{height:156px;aspect-ratio:auto;color:#693d32;background:linear-gradient(125deg,#ffedb3,#ffcfbb);box-shadow:0 12px 24px #b8703a0c}.album-top{color:#8c5f47;font-weight:600}.album-bottom>span{font-size:23px;letter-spacing:-1px}.album-bottom small{color:#9e6652}.vinyl{width:165px;height:165px;top:-10px;right:-15px;background:repeating-radial-gradient(circle,#d9927b 0 1px,#efb19a 2px 3px,#e6a58f 4px 5px);box-shadow:inset 0 0 0 10px #dc9c83,inset 0 0 0 11px #b26e5555}.vinyl-center{background:#fff3d2;border-color:#f7d9b6;color:#a66350}.album-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 12px}.album-actions>span{font-size:9px;line-height:1.6;color:#906a58}.album-actions button{white-space:nowrap;font-size:10px;border-color:#e3bba8;color:#ac513c;background:#fff1df;padding:7px 9px}.library-tools{display:flex;gap:6px}.library-tools input,.library-tools select{border:1px solid #e5cfbd;background:#fffdf8;border-radius:5px;min-width:0;padding:8px;color:#705546;font-size:10px}.library-tools input{width:55%}.library-tools select{width:45%}.library-tools input::placeholder{color:#aa8f7d}#library-count{font-size:8px;color:#a28776;letter-spacing:1px;margin-top:9px}.tracks{max-height:214px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ddb6a1 #fff2e6;margin-top:6px;padding-right:4px;gap:3px}.track{flex-shrink:0;padding:9px 8px;background:#fffaf4}.track:hover{background:#fff0e1}.track.selected{background:#ffead8;border-color:#dfae94;box-shadow:inset 3px 0 #cd7458}.track-num{color:#b58d76}.track strong{color:#644936}.track small{color:#a17761}.track .play-mark{color:#bc7655}.difficulty-label{margin:16px 0 9px}.difficulty button{background:#fffdf9;color:#8c6856;border-color:#e5cebd}.difficulty .selected{background:var(--accent);color:#fffaf5;border-color:var(--accent)}.difficulty-help{color:#a48370}.local-best>span{color:#876754}.local-best small{color:#ac8d79}.local-best strong{color:var(--accent)}.stage-top{color:#865b47}.stage-top>span:last-child{color:#a37c64}.stage{background:linear-gradient(#fffdf9,#fff0e5);border:1px solid #e1b99e;box-shadow:0 0 0 5px #ffe8d766,0 20px 45px #b9784012}.stage-overlay{background:linear-gradient(#fffaf1ed,#fff2e6f7)}.stage-overlay p{color:#9a755f}.stage-overlay>small{color:#b0927c}.start-button{background:var(--accent);border-color:var(--accent);color:#fffaf3;box-shadow:0 7px 18px #b4653822}.start-button:hover{background:#b8503d}.back-button{color:#a87154}.back-button:hover{background:#ffe3cf}kbd{border-color:#ddb59a;color:#b16c4b;background:#fff4e2}.touch-pads button{background:#fff2e5;border-color:#dfbda4;color:#b66c4e}.touch-pads small{color:#ab8169}.touch-pads button.pressed{background:var(--accent);border-color:var(--accent);color:#fff}.touch-pads button.pressed small{color:#fff}.song-progress{background:#edd6c3}.stage-bottom{color:#ad856b}.score-card{background:#fffcf7;border-color:#ead2bd;box-shadow:0 8px 20px #b67c3c06}.score-card>span{color:#a88167}.score-card>strong{color:#684636}.score-split>div>span{color:#af8c73}.score-split b span{color:#b38c6f}.accuracy-bar{background:#f0dfce}.accuracy-caption{color:#ac8568}.judgements>div{color:#9a755d}.perfect{background:#bc6748}.great{background:#25847f}.good{background:#c7742d}.miss{background:#b74759}.howto p{color:#a0816b}.howto b{color:#7a533f}.controls-row{color:#a56d4d}.controls-row span{color:#ba9b83}.settings summary{color:#9b7155}.settings label{color:#946d55}.settings p{color:#af8e77}.settings input{accent-color:var(--accent)}footer{color:#b2957c}#feedback strong{color:var(--accent);text-shadow:0 2px 10px #fff8ef,0 0 20px #fff8ef}#feedback small{color:#9b6b54;background:#fff9efd9;display:inline-block;padding:5px 9px;border-radius:12px}#countdown{color:var(--accent);text-shadow:0 2px 25px #fff1d4}.orbit-icon{color:#d5805d}
@media(min-width:801px) and (max-height:850px){.album{height:120px}.album-bottom>span{font-size:19px}.vinyl{width:135px;height:135px}.album-top{font-size:6px}.tracks{max-height:168px}.track{padding:8px}.album-actions{margin:7px 0 9px}.album-actions>span{font-size:8px}.album-actions button{font-size:9px;padding:6px}.library-tools input,.library-tools select{padding:6px;font-size:9px}.difficulty-label{margin-top:12px}.difficulty-help{margin:7px 0 10px}.local-best{padding-top:10px}}
@media(max-width:800px){.album-actions{grid-column:1/3;margin:0}.library-tools{grid-column:1/3}.library-tools input{width:65%}.library-tools select{width:35%}#library-count{grid-column:1/3;margin:0}.tracks{max-height:76px;overflow-x:auto;overflow-y:hidden;padding:0 0 5px;gap:6px;scroll-snap-type:x proximity}.track{width:155px;min-width:155px;scroll-snap-align:start}.track strong{font-size:10px}.track small{font-size:8px}.difficulty{margin:0}.selector{gap:8px}.album-actions>span{font-size:11px}.album-actions button{font-size:11px}}@media(max-width:480px){.album-actions,.library-tools,#library-count{grid-column:1}.track{width:145px;min-width:145px}.track strong{font-size:9px}.tracks{max-height:72px}.intro h1{font-size:29px}.stage{max-height:430px}.settings summary{color:#9b7155}}

/* Soft light edition: an off-white room with slow, blurred color fields tuned to each genre. */
@property --c1{syntax:'<color>';inherits:true;initial-value:#ffb199}@property --c2{syntax:'<color>';inherits:true;initial-value:#ff9fb2}@property --c3{syntax:'<color>';inherits:true;initial-value:#ffd98e}@property --c4{syntax:'<color>';inherits:true;initial-value:#d9c2ff}
:root{--beat:0;--c1:#ffb199;--c2:#ff9fb2;--c3:#ffd98e;--c4:#d9c2ff;transition:--c1 1.6s,--c2 1.6s,--c3 1.6s,--c4 1.6s;background:#fbf8f5}
:root[data-genre="Acoustic"]{--c1:#9fe3cb;--c2:#a9d6ff;--c3:#d6ecaa;--c4:#ffe1b5}
:root[data-genre="Disco"]{--c1:#ff97da;--c2:#b9a2ff;--c3:#84e1ff;--c4:#ffb994}
:root[data-genre="Chill"]{--c1:#aab6ff;--c2:#d7c5ff;--c3:#a2e2df;--c4:#ffc9de}
body{background:transparent}
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#fbf8f5}
.scene i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.62;will-change:transform;animation:float 34s ease-in-out infinite alternate}
.scene i:nth-child(1){width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:var(--c1)}
.scene i:nth-child(2){width:52vmax;height:52vmax;right:-16vmax;top:-8vmax;background:var(--c2);animation-duration:41s;animation-delay:-12s}
.scene i:nth-child(3){width:48vmax;height:48vmax;left:18vmax;bottom:-26vmax;background:var(--c3);animation-duration:38s;animation-delay:-20s}
.scene i:nth-child(4){width:40vmax;height:40vmax;right:4vmax;bottom:-18vmax;background:var(--c4);animation-duration:46s;animation-delay:-6s}
.scene:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#fffdfb 0%,#fffdfb99 35%,transparent 70%);opacity:calc(.9 - var(--beat)*.18)}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.08)}100%{transform:translate(-4vmax,7vmax) scale(.96)}}
.grain{opacity:.025}
.selector,.dashboard{background:#ffffffa6;-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid #ffffffd0;border-radius:16px;padding:16px;box-shadow:0 18px 50px #6b4a5a12;align-self:start}
.score-card{background:#ffffffc4}
/* Ink stage */
.stage{background:#17151f;border:1px solid #ffffff;box-shadow:0 0 0 6px #ffffff80,0 0 calc(40px + var(--beat)*36px) color-mix(in oklab,var(--accent) 40%,transparent),0 30px 60px #3b2a4a26}
.stage-overlay{background:radial-gradient(ellipse at 50% 0%,color-mix(in oklab,var(--accent) 30%,transparent),transparent 62%),linear-gradient(#17151fd9,#1d1a27f2);color:#f7f3f8}
.stage-overlay h2{color:#fbf8fc}.stage-overlay h2 em,.stage-overlay .eyebrow{color:color-mix(in oklab,var(--accent) 50%,#fff)}
.stage-overlay p{color:#cfc6d6}.stage-overlay>small{color:#9d93a8}.orbit-icon{color:color-mix(in oklab,var(--accent) 45%,#fff)}
.stage-overlay kbd{background:#ffffff12;border-color:#ffffff30;color:#eee7f2}
.back-button{color:#d8cde0}.back-button:hover{background:#ffffff14}
#feedback strong{text-shadow:0 0 18px currentColor,0 2px 0 #0004}
#feedback small{color:#f1ebf5;background:#ffffff18;backdrop-filter:blur(4px)}
#countdown{color:#fff;text-shadow:0 0 30px var(--accent)}
.result-grade{color:color-mix(in oklab,var(--accent) 45%,#fff)!important}
@media(prefers-reduced-motion:reduce){.scene i{animation:none}}
.album{background:linear-gradient(125deg,color-mix(in oklab,var(--c3) 75%,#fff),color-mix(in oklab,var(--c1) 80%,#fff));color:color-mix(in oklab,var(--accent) 70%,#2a2030)}
.album-top,.album-bottom small{color:color-mix(in oklab,var(--accent) 60%,#3a2f3a)}
.vinyl{background:repeating-radial-gradient(circle,color-mix(in oklab,var(--accent) 55%,#fff) 0 1px,color-mix(in oklab,var(--accent) 30%,#fff) 2px 3px,color-mix(in oklab,var(--accent) 40%,#fff) 4px 5px);box-shadow:inset 0 0 0 10px color-mix(in oklab,var(--accent) 38%,#fff),inset 0 0 0 11px color-mix(in oklab,var(--accent) 50%,transparent)}
.vinyl-center{background:#fffdfb;border-color:color-mix(in oklab,var(--accent) 18%,#fff);color:var(--accent)}
.album-actions button{background:#ffffffb0;border-color:color-mix(in oklab,var(--accent) 30%,#fff);color:var(--accent)}
.track{background:#ffffff8c}.track:hover{background:#ffffffd0}
.track.selected{background:color-mix(in oklab,var(--accent) 10%,#fff);border-color:color-mix(in oklab,var(--accent) 35%,#fff);box-shadow:inset 3px 0 var(--accent)}
.track .play-mark{color:var(--accent)}
.touch-pads button{background:#ffffffb8;border-color:#ffffffe8;color:var(--accent);box-shadow:0 6px 16px #3b2a4a10}
.touch-pads small{color:color-mix(in oklab,var(--accent) 55%,#999)}
.song-progress{background:#ffffffb0}
.rank-button{margin-left:15px;height:34px;padding:0 12px;font-size:10px;letter-spacing:1px;background:#ffffffa6;border-color:#ffffffe0;color:var(--accent)}
#score-status{font-size:11px;line-height:1.6;color:#e8dff0;margin-top:12px;max-width:280px}
#retry-score{margin-top:6px}
#ranking-dialog{width:min(440px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:1px solid #ffffff;border-radius:18px;padding:26px;background:#fffdfbf2;color:#3d2f38;box-shadow:0 30px 80px #3b2a4a33}
#ranking-dialog::backdrop{background:#2a203033;backdrop-filter:blur(6px)}
#ranking-dialog h2{font:600 30px 'Space Grotesk',sans-serif;margin:10px 0 6px}
#ranking-dialog p,#ranking-status{font-size:12px;line-height:1.7;color:#8a7680;margin:6px 0}
#ranking-mine{color:var(--accent)!important;font-weight:600}
#ranking-list{list-style:none;padding:0;margin:12px 0}
#ranking-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #00000010;font-size:13px}
#ranking-list li span{overflow-wrap:anywhere}#ranking-list strong{color:var(--accent)}
#online-board{display:block;font-size:12px;color:var(--accent);margin:12px 0}
#ranking-dialog .start-button{width:100%;margin-top:10px}
@media(max-width:480px){.rank-button{margin-left:8px;padding:0 8px}}
.header-right .rank-button{width:auto}