:root{--cream:#efe9fb;--paper:#fcfaff;--plum:#2a1f45;--ink:#1b1a1f;--pink:#ff4f8b;--lemon:#ffd84d;--mint:#3fe0b5;--peri:#7b8cff;--orange:#ff8a3d;--lilac:#c77dff;--display:"Rubik", system-ui, sans-serif;--mono:"Rubik", system-ui, sans-serif;--arcade:"Bungee", "Rubik", sans-serif;--pop:cubic-bezier(.2, 1.5, .4, 1);--fg:#f3eeff;--fg-2:#c9bfe9;--fg-3:#9a8fc0;--glass:#ffffff14;--glass-hover:#ffffff24;--glass-line:#ffffff29;--stage:#221a42}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--fg);font-family:var(--display);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;background:radial-gradient(1100px 700px at 70% -10%,#4a3a7a,#0000 60%),linear-gradient(#2a2050,#17112e) fixed;overflow-x:hidden}body:after{content:"";pointer-events:none;z-index:1000;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}button{font:inherit;color:inherit}[hidden],.hidden{display:none!important}::selection{background:var(--lemon)}kbd{font-family:var(--mono);opacity:.7;border:1px solid;border-radius:6px;margin-left:.3em;padding:.1em .45em;font-size:.7em;font-weight:700}.btn{font-family:var(--mono);border:1px solid var(--glass-line);background:var(--glass);color:var(--fg);cursor:pointer;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:.4em;padding:.75em 1.25em;font-size:15px;font-weight:700;transition:transform .1s,background .15s;display:inline-flex}.btn:hover{background:var(--glass-hover)}.btn:active{transform:scale(.97)}.btn-pink{background:var(--pink);color:var(--plum);border-color:#0000}.btn-pink:hover{background:#ff6f9f}.btn-ghost{background:0 0}.btn-small{padding:.55em .95em;font-size:12px}.card{border-radius:20px;padding:26px;position:relative}.card-label{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;font-weight:700;display:flex}.card-label:before{content:"";background:var(--pink);border-radius:50%;width:8px;height:8px}.home{--card:var(--glass);--line:var(--glass-line);--soft:#ffffff1a;--text:var(--fg);--text-2:var(--fg-2);--text-3:var(--fg-3);--on-stage:var(--fg);--on-stage-2:var(--fg-2);--accent:#c7b2ff;color:var(--on-stage);background:#221a42;position:fixed;inset:0;overflow:hidden}.attract{width:100%;height:100%;display:block;position:absolute;inset:0}.panel{z-index:1;flex-direction:column;gap:20px;width:500px;height:100%;padding:36px 36px 24px;display:flex;position:relative}.lanes{gap:6px;display:flex}.lanes i{background:var(--pink);border-radius:5px;flex:1;height:10px}.lanes i:nth-child(2){background:var(--lemon)}.lanes i:nth-child(3){background:var(--mint)}.lanes i:nth-child(4){background:var(--peri)}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tagline{color:var(--on-stage);margin:-4px 0 4px;font-size:17px;line-height:1.45}.drop{cursor:pointer;transition:transform .15s var(--pop), box-shadow .15s var(--pop), background .15s;border-radius:20px;align-items:center;gap:16px;padding:18px 20px;display:flex}.drop:hover{background:var(--glass-hover)}.drop:active{transform:scale(.99)}body.dragging .drop{background:#ff4f8b2e;transform:rotate(-1.5deg)scale(1.02)}.drop:focus-within{outline:3px solid var(--lemon);outline-offset:4px}.drop-icon{border:1px solid var(--line);background:var(--pink);width:52px;height:52px;color:var(--plum);transition:transform .2s var(--pop);border-radius:14px;flex-shrink:0;place-items:center;display:grid}.drop:hover .drop-icon{transform:rotate(-8deg)scale(1.06)}.drop-text{flex-direction:column;gap:4px;min-width:0;display:flex}.drop-text b{font-size:18px;font-weight:700}.drop-text small{color:var(--text-2);font-size:14px}.chip{color:var(--on-stage-2);cursor:pointer;text-underline-offset:4px;background:0 0;border:0;align-self:flex-start;margin-top:-4px;padding:4px 0;font-size:14px;font-weight:500;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .12s,text-decoration-color .12s}.chip:hover{color:var(--lemon);text-decoration-color:currentColor}.list{border-radius:20px;flex-direction:column;flex:0 auto;min-height:0;display:flex;overflow:hidden}.list-head{border-bottom:1px solid var(--soft);justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 12px 20px;display:flex}.list-title{margin:0;font-size:16px;font-weight:700}.list-title .count{background:var(--soft);min-width:24px;height:22px;color:var(--text-2);vertical-align:2px;border-radius:999px;place-items:center;margin-left:6px;padding:0 6px;font-size:12px;font-weight:700;display:inline-grid}.filter{border:1px solid var(--line);width:150px;font-family:var(--display);color:var(--text);background:#ffffff0f;border-radius:10px;outline:none;padding:8px 12px;font-size:14px;transition:border-color .12s}.filter::placeholder{color:var(--text-3)}.filter:focus{border-color:var(--accent)}.list-body{scrollbar-width:thin;scrollbar-color:var(--soft) transparent;flex:1;padding:8px;overflow-y:auto}.row{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;grid-template-columns:48px minmax(0,1fr) auto 34px;align-items:center;gap:14px;padding:8px 10px 8px 8px;transition:background .12s,box-shadow .12s;display:grid;box-shadow:inset 4px 0 #0000}.row:hover{background:color-mix(in srgb, var(--c) 18%, transparent);box-shadow:inset 4px 0 0 var(--c)}.row:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.row-cover{border:1px solid var(--line);background:var(--soft);border-radius:10px;width:48px;height:48px;overflow:hidden}.row-cover img{object-fit:cover;width:100%;height:100%;display:block}.row-text{flex-direction:column;gap:2px;min-width:0;display:flex}.row-text b,.row-text small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row-text b{font-size:16px;font-weight:700}.row-text small{color:var(--text-2);font-size:14px}.row-meta{color:var(--text-3);flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;font-weight:500;display:flex}.row-grade{border:1px solid var(--line);width:34px;height:28px;font-family:var(--arcade);color:var(--plum);border-radius:8px;place-items:center;font-size:13px;display:grid}.empty{color:var(--text-2);padding:32px 20px}.empty-title{color:var(--text);font-size:18px;font-weight:700}.empty p{max-width:34ch;margin:8px 0 0;font-size:15px;line-height:1.55}.inline-link{font:inherit;color:var(--accent);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:700;text-decoration:underline}.inline-link.danger{color:#ff7a9c}.panel-foot{color:var(--on-stage-2);justify-content:space-between;align-items:center;gap:16px;margin-top:auto;font-size:13px;display:flex}.foot-keys{gap:6px;display:flex}.ring{border:1px solid var(--line);background:var(--c);min-width:30px;height:30px;color:var(--plum);border-radius:8px;place-items:center;font-size:13px;font-weight:800;display:grid}.icon-btn{z-index:2;cursor:pointer;width:48px;height:48px;transition:transform .15s var(--pop), box-shadow .15s var(--pop);border-radius:14px;place-items:center;display:grid;position:absolute;top:28px;right:28px}.demo-tag{z-index:1;color:var(--on-stage-2);pointer-events:none;align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex;position:absolute;bottom:24px;right:28px}.demo-tag:before{content:"";background:var(--mint);border-radius:50%;width:8px;height:8px}@media (width<=720px){.panel{background:linear-gradient(#221a428c,#221a42d9);width:100%;padding:24px 16px 16px}.demo-tag,.panel-foot>span:last-child{display:none}.icon-btn{top:16px;right:16px}}.keycap{width:40px;height:40px;font-family:var(--mono);background:var(--glass);border:1px solid var(--glass-line);color:var(--fg);border-top-width:6px;border-radius:10px;place-items:center;font-size:16px;font-weight:700;display:inline-grid}.lane-0{border-top-color:var(--pink)!important}.lane-1{border-top-color:var(--lemon)!important}.lane-2{border-top-color:var(--mint)!important}.lane-3{border-top-color:var(--peri)!important}.grade-SS{background:conic-gradient(var(--pink), var(--lemon), var(--mint), var(--peri), var(--pink))}.grade-S{background:var(--lemon)}.grade-A{background:var(--mint)}.grade-B{background:var(--peri)}.grade-C{background:var(--orange)}.grade-D{background:#c9c1b3}@keyframes spin{to{transform:rotate(360deg)}}@keyframes card-in{0%{opacity:0;transform:translateY(24px)}}.modal-veil{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;background:#3c286e59;place-items:center;padding:24px;transition:opacity .18s;display:grid;position:fixed;inset:0}.modal-veil.open{opacity:1}.modal{transition:transform .3s var(--pop);border-radius:24px;max-height:calc(100vh - 48px);padding:28px;position:relative;overflow-y:auto}.modal-veil.open .modal{transform:none}.close{cursor:pointer;z-index:2;border-radius:50%;width:38px;height:38px;font-size:22px;line-height:1;position:absolute;top:14px;right:14px}.close:hover{background:var(--pink);color:var(--paper)}.song-modal{border-radius:24px;grid-template-columns:280px 1fr;gap:32px;width:min(840px,100%);padding:32px;transition:transform .2s ease-out;display:grid;overflow:hidden;transform:translateY(8px)}.sm-bg{filter:blur(60px)saturate(1.3);opacity:.3;pointer-events:none;background-position:50%;background-size:cover;position:absolute;inset:0}.song-modal>:not(.sm-bg){position:relative}.song-modal .close{width:32px;height:32px;box-shadow:none;color:var(--fg-2);background:0 0;border:0;border-radius:8px;font-size:22px;position:absolute;top:16px;right:16px}.song-modal .close:hover{background:var(--glass-hover);color:var(--fg)}.sm-cover{aspect-ratio:1;border:1px solid var(--glass-line);background:var(--glass-hover);border-radius:18px;align-self:start;overflow:hidden}.sm-cover img{object-fit:cover;width:100%;height:100%;display:block}.sm-meta{color:var(--fg-2);font-size:13px}.sm-title{letter-spacing:-.03em;margin:8px 0 0;padding-right:40px;font-size:32px;font-weight:700;line-height:1.1}.sm-artist{color:var(--fg-2);margin-top:4px;font-size:16px}.diff-grid{grid-template-columns:1fr 1fr;gap:8px;margin:24px 0;display:grid}.diff-btn{--c:var(--mint);text-align:left;border:1px solid var(--glass-line);background:var(--glass);color:var(--fg);cursor:pointer;transition:border-color .12s, background .12s, transform .15s var(--pop), box-shadow .15s var(--pop);border-radius:14px;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.diff-btn:hover{background:var(--glass-hover)}.diff-normal{--c:var(--lemon)}.diff-hard{--c:var(--orange)}.diff-expert{--c:var(--pink)}.diff-btn.selected{border-color:var(--c);background:color-mix(in srgb, var(--c) 22%, transparent)}.diff-top,.diff-foot{justify-content:space-between;align-items:center;display:flex}.diff-name{text-transform:capitalize;font-size:15px;font-weight:700}.diff-name:before{content:"";vertical-align:1px;background:var(--c);border-radius:2px;width:8px;height:8px;margin-right:8px;display:inline-block}.diff-top kbd{color:var(--fg-3);opacity:1;border-width:1px}.diff-stars{color:#0000;font-size:0}.diff-stars i{font-family:var(--mono);color:var(--fg-2);font-size:12px;font-style:normal}.diff-stars i:before{content:"★ ";color:var(--c)}.diff-foot{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-3);font-size:11px}.diff-chip{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--plum);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700}.diff-chip.diff-easy{background:var(--mint)}.diff-chip.diff-normal{background:var(--lemon)}.diff-chip.diff-hard{background:var(--orange)}.diff-chip.diff-expert{background:var(--pink)}.btn-play{background:var(--lemon);width:100%;height:58px;color:var(--plum);cursor:pointer;border:0;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-size:20px;transition:transform .1s,background .15s;display:flex}.btn-play:hover{background:#ffe27a}.btn-play:active{transform:scale(.98)}.btn-play kbd{border-width:1px}.sm-foot{justify-content:flex-end;gap:16px;margin-top:16px;font-size:13px;display:flex}.sm-foot .inline-link{color:var(--fg-2);font-weight:500}.sm-foot .inline-link.danger:hover{color:#ff5a6a}.confirm-modal{text-align:center;width:min(420px,100%)}.confirm-modal p{letter-spacing:-.02em;margin:6px 0 22px;font-size:22px;font-weight:700}.btn-row{justify-content:center;gap:12px;display:flex}.progress-veil{z-index:60}.progress-card{border-radius:24px;width:min(460px,100%);padding:30px}.eq{align-items:flex-end;gap:6px;height:56px;margin-bottom:18px;display:flex}.eq span{border:1px solid var(--glass-line);border-radius:6px;flex:1;height:30%;animation:.9s ease-in-out infinite eq}.eq span:nth-child(4n+1){background:var(--pink)}.eq span:nth-child(4n+2){background:var(--lemon);animation-delay:-.3s}.eq span:nth-child(4n+3){background:var(--mint);animation-delay:-.6s}.eq span:nth-child(4n){background:var(--peri);animation-delay:-.15s}.eq span:nth-child(5){animation-delay:-.45s}.eq span:nth-child(6){animation-delay:-.75s}@keyframes eq{0%,to{height:25%}50%{height:100%}}.progress-title{letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap;font-size:28px;font-weight:800;line-height:1;overflow:hidden}.progress-stage{font-family:var(--mono);margin:12px 0 10px;font-size:13px}.progress-track{background:#ffffff1a;border:0;border-radius:999px;height:22px;overflow:hidden}.progress-fill{transform-origin:0;background:repeating-linear-gradient(-45deg, var(--pink) 0 12px, #ff7aa8 12px 24px);background-size:34px 34px;height:100%;transition:transform .25s ease-out;animation:.6s linear infinite stripes;transform:scaleX(0)}@keyframes stripes{to{background-position:34px 0}}.progress-tip{font-family:var(--mono);opacity:.6;margin-top:16px;font-size:11px}.toasts{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{font-family:var(--mono);animation:toast-in .3s var(--pop);border-radius:12px;max-width:min(560px,90vw);padding:10px 18px;font-size:13px;font-weight:700;transition:opacity .3s,transform .3s}.toast.out{opacity:0;transform:translateY(10px)}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)rotate(-3deg)}}.settings-modal{width:min(520px,100%)}.settings-modal h2{letter-spacing:-.04em;margin:0 0 18px;font-size:34px}.setting{border-top:2px dashed #1b1a1f33;padding:16px 0}.setting-head{justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:17px;font-weight:700;display:flex}.setting-head b,.setting-head small{font-family:var(--mono);font-size:13px}.setting-head small{opacity:.55;font-weight:400}.setting-hint{font-family:var(--mono);opacity:.6;margin:10px 0;font-size:11px}input[type=range]{appearance:none;border:1px solid var(--glass-line);background:#ffffff1a;border-radius:999px;outline:none;width:100%;height:12px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pink);border:1px solid var(--glass-line);cursor:grab;border-radius:50%;width:24px;height:24px}input[type=range]::-moz-range-thumb{background:var(--pink);border:1px solid var(--glass-line);cursor:grab;border-radius:50%;width:20px;height:20px}.keys{gap:12px;display:flex}.keys .keycap{cursor:pointer;width:58px;height:58px;font-size:20px}.keys .keycap.listening{background:var(--lemon);animation:.3s ease-in-out infinite wiggle}@keyframes wiggle{50%{transform:rotate(-6deg)}}.toggles{flex-direction:column;gap:12px;display:flex}.toggle{font-family:var(--mono);cursor:pointer;align-items:center;gap:12px;font-size:13px;display:flex}.toggle input{display:none}.toggle span{border:1px solid var(--glass-line);background:#ffffff1a;border-radius:999px;flex-shrink:0;width:46px;height:26px;transition:background .15s;position:relative}.toggle span:after{content:"";background:var(--fg);width:17px;height:17px;transition:transform .2s var(--pop);border-radius:50%;position:absolute;top:2px;left:2px}.toggle input:checked+span{background:var(--mint)}.toggle input:checked+span:after{transform:translate(20px)}.calib{align-items:center;gap:16px;margin-top:14px;display:flex}.calib-dots{gap:8px;display:flex}.calib-dots span{border:1px solid var(--glass-line);background:#ffffff1a;border-radius:50%;width:20px;height:20px;transition:transform 50ms}.calib-dots span.on{background:var(--pink);transform:scale(1.3)}.calib-text{font-family:var(--mono);font-size:13px;font-weight:700}.game{z-index:10;-webkit-user-select:none;user-select:none;touch-action:none;background:#221a42;position:fixed;inset:0}.game-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hud{pointer-events:none;color:var(--paper);position:absolute;inset:0}.hud-progress{background:#ffffff14;height:6px;position:absolute;top:0;left:0;right:0}.hud-bar{background:linear-gradient(90deg, var(--mint), var(--lemon), var(--pink));transform-origin:0;height:100%;transform:scaleX(0)}.hud-left{max-width:34vw;position:absolute;top:24px;left:26px}.hud-title{letter-spacing:-.03em;white-space:nowrap;text-overflow:ellipsis;font-size:24px;font-weight:800;line-height:1;overflow:hidden}.hud-sub{font-family:var(--mono);opacity:.85;align-items:center;gap:10px;margin-top:8px;font-size:12px;display:flex}.hud-right{text-align:right;position:absolute;top:20px;right:26px}.hud-score{font-family:var(--mono);letter-spacing:.02em;font-size:34px;font-weight:700}.hud-acc{font-family:var(--mono);color:var(--lemon);font-size:15px;font-weight:700}.hud-hint{font-family:var(--mono);opacity:.4;font-size:11px;position:absolute;bottom:14px;left:20px}.game-count{letter-spacing:-.04em;color:var(--paper);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;pointer-events:none;font-size:clamp(60px,11vw,140px);font-weight:800;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.game-count.count-ready,.game-count.count-num,.game-count.count-go{animation:count-pop .4s var(--pop)}.game-count.count-go{color:var(--lemon)}@keyframes count-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.6)rotate(-8deg)}}.pause-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#221a42b3;place-items:center;display:grid;position:absolute;inset:0}.pause-card{min-width:280px;animation:count-pop-card .3s var(--pop);border-radius:24px;flex-direction:column;gap:14px;padding:30px;display:flex}@keyframes count-pop-card{0%{transform:scale(.85)rotate(-6deg)}}.pause-title{letter-spacing:-.05em;text-align:center;margin-bottom:6px;font-size:48px;font-weight:800}.pause-card .btn{font-size:17px}.results{z-index:10;background:linear-gradient(#2a2050,#17112e);grid-template-columns:minmax(280px,1fr) minmax(0,1.3fr);align-items:center;gap:40px;padding:40px max(28px,6vw);display:grid;position:fixed;inset:0;overflow-y:auto}.res-grade-col{flex-direction:column;align-items:center;gap:18px;display:flex}.grade-burst{aspect-ratio:1;width:min(380px,80vw);animation:grade-in .7s var(--pop) .2s backwards;place-items:center;display:grid;position:relative;background:0 0!important}@keyframes grade-in{0%{transform:scale(0)rotate(-40deg)}}.burst{width:100%;height:100%;animation:24s linear infinite spin;position:absolute;inset:0}.burst path{stroke:var(--ink);stroke-width:4px;stroke-linejoin:round}.grade-SS .burst path{fill:var(--pink)}.grade-S .burst path{fill:var(--lemon)}.grade-A .burst path{fill:var(--mint)}.grade-B .burst path{fill:var(--peri)}.grade-C .burst path{fill:var(--orange)}.grade-D .burst path{fill:#c9c1b3}.grade-letter{letter-spacing:-.08em;color:var(--paper);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;font-size:min(170px,36vw);font-weight:800;line-height:1;position:relative}.grade-SS .grade-letter{color:var(--lemon)}.grade-line{letter-spacing:-.03em;text-align:center;font-size:26px;font-weight:800}.badges{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.badge{font-family:var(--mono);text-transform:uppercase;border:1px solid var(--glass-line);animation:toast-in .4s var(--pop) .8s backwards;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}.badge-fc{background:var(--mint)}.badge-ap{background:conic-gradient(var(--pink), var(--lemon), var(--mint), var(--peri), var(--pink))}.badge-new{background:var(--pink);color:var(--paper)}.res-card{max-width:640px;animation:card-in-right .5s var(--pop) backwards}@keyframes card-in-right{0%{opacity:0;transform:translate(60px)rotate(3deg)}}.res-title{letter-spacing:-.04em;margin:0;font-size:34px;line-height:1}.res-artist{font-family:var(--mono);opacity:.6;margin-top:6px;font-size:13px}.res-score{font-family:var(--mono);letter-spacing:-.02em;margin:14px 0 6px;font-size:clamp(40px,5vw,60px);font-weight:700}.res-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;display:grid}.res-stats div{border:1px solid var(--glass-line);background:#ffffff1a;border-radius:12px;padding:10px 12px}.res-stats small{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.6;font-size:10px;display:block}.res-stats b{letter-spacing:-.02em;font-size:24px}.res-stats em{opacity:.5;margin-left:2px;font-size:13px;font-style:normal}.counts{flex-direction:column;gap:7px;display:flex}.count-row{font-family:var(--mono);grid-template-columns:80px 1fr 50px;align-items:center;gap:12px;font-size:13px;font-weight:700;display:grid}.count-row b{text-align:right}.count-bar{background:#ffffff1a;border:0;border-radius:999px;height:12px;overflow:hidden}.count-bar i{height:100%;width:calc(var(--w) * 100%);transform-origin:0;animation:grow .8s var(--pop) .3s backwards;display:block}@keyframes grow{0%{transform:scaleX(0)}}.count-perfect i{background:var(--lemon)}.count-great i{background:var(--mint)}.count-okay i{background:var(--peri)}.count-miss i{background:#ff5a6a}.res-hist{width:100%;height:90px;margin-top:18px}.res-hist-legend{font-family:var(--mono);opacity:.55;text-transform:uppercase;justify-content:space-between;font-size:10px;display:flex}.offset-tip{font-family:var(--mono);background:#ffd84d1f;border:1px solid #ffd84d59;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;font-size:12px;display:flex}.res-actions{flex-wrap:wrap;gap:14px;margin-top:22px;display:flex}.confetti{pointer-events:none;z-index:20;position:fixed;inset:0;overflow:hidden}.confetti i{border:2px solid var(--ink);border-radius:2px;width:10px;height:16px;animation:linear forwards fall;position:absolute;top:-20px}@keyframes fall{to{transform:translate(var(--drift), 110vh) rotate(var(--spin))}}.wipe{z-index:500;pointer-events:none;position:fixed;inset:0}.wipe i{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);width:100%;height:25.5%;animation:1s cubic-bezier(.7,0,.3,1) forwards wipe;position:absolute;left:0;transform:translate(-101%)}.wipe i:first-child{background:var(--pink);top:0}.wipe i:nth-child(2){background:var(--lemon);animation-delay:40ms;top:25%}.wipe i:nth-child(3){background:var(--mint);animation-delay:80ms;top:50%}.wipe i:nth-child(4){background:var(--peri);animation-delay:.12s;top:75%}@keyframes wipe{0%{transform:translate(-101%)}38%,58%{transform:translate(0)}to{transform:translate(101%)}}.drop-veil{z-index:300;opacity:0;pointer-events:none;background:#beaaf0e6;place-items:center;transition:opacity .15s;display:grid;position:fixed;inset:0}body.dragging .drop-veil{opacity:1}.drop-veil-text{letter-spacing:-.05em;color:var(--paper);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;font-size:clamp(40px,8vw,100px);font-weight:800;animation:.5s ease-in-out infinite wiggle}@media (width<=880px){.song-modal{grid-template-columns:1fr}.sm-cover{width:180px}.results{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:1ms!important;animation-iteration-count:1!important}}.grade-letter,.game-count,.pause-title,.drop-veil-text,.settings-modal h2,.diff-name,.btn-play,.hud-score,.res-score{font-family:var(--arcade);letter-spacing:.01em;font-weight:400}.card,.modal,.progress-card,.pause-card,.toast,.drop,.list,.icon-btn,.close{background:var(--glass);border:1px solid var(--glass-line);color:var(--fg);-webkit-backdrop-filter:blur(22px)saturate(1.4);backdrop-filter:blur(22px)saturate(1.4);box-shadow:inset 0 1px #ffffff24,0 24px 60px #08041459}.modal,.progress-card,.pause-card{background:#281e4e9e}.toast{background:#281e4ecc}.toast-error{background:var(--pink);color:var(--plum)}.close:hover,.icon-btn:hover{background:var(--glass-hover)}