:root{color:#f8fbff;font-synthesis:none;text-rendering:optimizelegibility;background:#0c0e13;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:auto}button{font:inherit}.shell{background:radial-gradient(circle at 18% 20%,#36cfc92e,#0000 28%),radial-gradient(circle at 78% 24%,#ff6b8a2b,#0000 26%),linear-gradient(135deg,#101219 0%,#17131b 48%,#0c1416 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.game{grid-template-columns:minmax(0,1fr) 280px;gap:18px;width:min(1120px,100%);height:min(760px,100vh - 48px);display:grid}.shell.vertical-flow{min-height:max(100vh,1160px)}.game.vertical-flow{height:1100px}.stage,.hud{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0c0e13c2;border:1px solid #ffffff1f;box-shadow:0 24px 80px #0000006b}.stage{grid-template-rows:auto minmax(0,1fr) 8px;min-height:0;display:grid;position:relative;overflow:hidden}.stage>:not(.audio-visualizer){z-index:1;position:relative}.audio-visualizer{z-index:0;pointer-events:none;opacity:calc(.42 + var(--viz-level,0) * .58);background:radial-gradient(circle at calc(18% + var(--viz-treble,0) * 18%) calc(28% + var(--viz-bass,0) * 14%), rgba(54, 207, 201, calc(.14 + var(--viz-mid,0) * .28)), transparent 38%), radial-gradient(circle at calc(82% - var(--viz-mid,0) * 16%) calc(74% - var(--viz-treble,0) * 18%), rgba(255, 107, 138, calc(.12 + var(--viz-treble,0) * .24)), transparent 40%), linear-gradient(135deg, rgba(54, 207, 201, calc(.04 + var(--viz-bass,0) * .16)), transparent 42%, rgba(245, 200, 76, calc(.04 + var(--viz-mid,0) * .15)));transform:scale(calc(1 + var(--viz-level,0) * .065));transition:opacity 90ms linear,transform 90ms linear;position:absolute;inset:0}.audio-visualizer:before{content:"";aspect-ratio:1;border:2px solid rgba(248, 251, 255, calc(.12 + var(--viz-level,0) * .22));width:min(86%,560px);box-shadow:0 0 calc(34px + var(--viz-bass,0) * 110px) rgba(54, 207, 201, calc(.16 + var(--viz-bass,0) * .3)), inset 0 0 calc(26px + var(--viz-mid,0) * 70px) rgba(248, 251, 255, calc(.07 + var(--viz-mid,0) * .14));transform:translate(-50%, -50%) scale(calc(.78 + var(--viz-bass,0) * .42));border-radius:50%;transition:box-shadow 90ms linear,border-color 90ms linear,transform 90ms linear;position:absolute;top:50%;left:50%}.audio-visualizer:after{content:"";background:repeating-linear-gradient(90deg, rgba(248, 251, 255, calc(.028 + var(--viz-treble,0) * .055)) 0 1px, transparent 1px 46px);position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000);mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000)}.audio-visualizer span{left:calc(10% + var(--bar-index) * 11.4%);width:min(6vw,54px);height:calc(22% + var(--bar-energy) * 68%);background:linear-gradient(180deg, rgba(248, 251, 255, calc(.12 + var(--bar-energy) * .22)), rgba(54, 207, 201, calc(.08 + var(--bar-energy) * .18)));filter:blur(.4px);opacity:calc(.32 + var(--bar-energy) * .5);transform:translateY(calc(26% - var(--bar-energy) * 20%));border-radius:8px 8px 0 0;transition:height 90ms linear,opacity 90ms linear,transform 90ms linear;position:absolute;bottom:0}.audio-visualizer span:first-child{--bar-index:0;--bar-energy:var(--viz-bass,0)}.audio-visualizer span:nth-child(2){--bar-index:1;--bar-energy:var(--viz-mid,0)}.audio-visualizer span:nth-child(3){--bar-index:2;--bar-energy:var(--viz-treble,0)}.audio-visualizer span:nth-child(4){--bar-index:3;--bar-energy:var(--viz-level,0)}.audio-visualizer span:nth-child(5){--bar-index:4;--bar-energy:var(--viz-treble,0)}.audio-visualizer span:nth-child(6){--bar-index:5;--bar-energy:var(--viz-mid,0)}.audio-visualizer span:nth-child(7){--bar-index:6;--bar-energy:var(--viz-bass,0)}.audio-visualizer span:nth-child(8){--bar-index:7;--bar-energy:var(--viz-level,0)}.topbar{justify-content:space-between;align-items:center;gap:16px;min-height:68px;padding:14px 18px;display:flex}.eyebrow{color:#36cfc9;text-transform:uppercase;margin:0 0 4px;font-size:.78rem;font-weight:800}h1{overflow-wrap:anywhere;max-width:min(640px,58vw);margin:0;font-size:clamp(1.1rem,3.5vw,2.75rem);line-height:.95}.controls{align-items:center;gap:10px;display:flex}.controls button,.file-button{color:#f8fbff;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:8px;place-items:center;width:44px;height:44px;display:grid}.builtin-picker{color:#f8fbff;background:#ffffff14;border:1px solid #fff3;border-radius:8px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;width:min(260px,30vw);height:44px;padding:0 10px;display:grid}.builtin-picker span{color:#f8fbff99;font-size:.72rem;font-weight:900}.builtin-picker select{color:#f8fbff;min-width:0;font:inherit;cursor:pointer;background:0 0;border:0;font-size:.86rem;font-weight:800}.builtin-picker select:focus-visible{outline-offset:3px;outline:2px solid #36cfc9}.builtin-picker option{color:#101219}.controls button.active{color:#101219;background:#36cfc9;border-color:#36cfc9b8;font-weight:900}.settings-popover{z-index:30;width:min(360px,100% - 44px);position:absolute;top:82px;right:22px}.settings-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#12141cf5;border:1px solid #ffffff29;border-radius:8px;padding:14px;box-shadow:0 26px 70px #0000007a}.settings-header,.setting-row,.setting-slider{justify-content:space-between;align-items:center;gap:14px;display:flex}.settings-header{margin-bottom:12px}.settings-header strong,.setting-row strong,.setting-slider strong{font-size:.95rem}.settings-header button,.flow-toggle{color:#f8fbff;cursor:pointer;background:#ffffff12;border:1px solid #ffffff2e;border-radius:8px;place-items:center;width:36px;height:36px;display:grid}.settings-list{gap:10px;display:grid}.setting-row,.setting-slider{background:#ffffff0b;border:1px solid #ffffff1a;border-radius:8px;min-height:58px;padding:10px 12px}.setting-row span,.setting-slider span{gap:3px;display:grid}.setting-row small,.setting-slider small{color:#f8fbff94;font-size:.75rem;font-weight:800}.setting-row input[type=checkbox]{accent-color:#36cfc9;cursor:pointer;width:22px;height:22px}.setting-slider{flex-direction:column;align-items:stretch}.setting-slider input[type=range]{accent-color:#36cfc9;cursor:pointer;width:100%}.file-button input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.measure-strip{min-height:0;color:inherit;cursor:pointer;--box-size:var(--horizontal-box-size,min(23.4%, 195px));background:0 0;border:0;padding:0 22px 24px;display:block;position:relative;overflow:hidden}.measure-strip.vertical{--box-size:var(--vertical-box-size,120px)}.measure-strip:before{content:"";display:none;position:relative}.combo-overlay{z-index:20;pointer-events:none;color:#f8fbff;text-shadow:0 4px 26px #000000a6;justify-items:center;gap:2px;min-width:132px;animation:.52s cubic-bezier(.18,.9,.2,1) both combo-pop;display:grid;position:absolute;top:12px;left:50%;transform:translate(-50%)}.combo-overlay span{letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:900}.combo-overlay strong{font-size:clamp(2rem,7vw,5.2rem);font-weight:950;line-height:.82}.combo-overlay.perfect{color:#36cfc9}.combo-overlay.good{color:#f5c84c}.combo-overlay.miss{color:#ff6b8a}.measure-box{left:var(--slot-left);top:calc(var(--slot-top,50%) - 12px);width:var(--box-size);aspect-ratio:1;--box-scale:.86;--box-exit-x:0px;--box-exit-y:0px;--box-exit-rotate:0deg;min-width:0;transform:translate(calc(-50% + var(--box-exit-x)), calc(-50% + var(--box-exit-y))) rotate(var(--box-exit-rotate)) scale(var(--box-scale));opacity:.52;background:linear-gradient(#ffffff17,#ffffff06),#ffffff0a;border:1px solid #ffffff24;border-radius:8px;transition:left .52s cubic-bezier(.2,.85,.18,1),top .52s cubic-bezier(.2,.85,.18,1),transform .52s cubic-bezier(.2,.85,.18,1),opacity .26s,border-color .26s,box-shadow .26s;position:absolute;box-shadow:inset 0 0 0 1px #ffffff08}.measure-box.current{--box-scale:1;opacity:1;border-color:#36cfc9db;box-shadow:0 0 0 2px #36cfc929,0 20px 54px #36cfc92e,inset 0 -22px 40px #36cfc921}.measure-box.cleared{background:radial-gradient(circle,#f5c84c4d,#0000 62%),#ffffff09;border-color:#f5c84c9e;animation:.46s both burst}.measure-box.failed{background:linear-gradient(#ff6b8a1f,#ffffff06),#ffffff09;border-color:#ff6b8a7a}.measure-box.exit-up{--box-exit-y:-92px;--box-exit-rotate:-5deg;opacity:0}.measure-box.exit-down{--box-exit-y:92px;--box-exit-rotate:5deg;opacity:0}.measure-strip.vertical .measure-box.exit-up{--box-exit-x:120px;--box-exit-y:0px;--box-exit-rotate:6deg}.measure-strip.vertical .measure-box.exit-down{--box-exit-x:-120px;--box-exit-y:0px;--box-exit-rotate:-6deg}.measure-box.tempo-faster{border-color:#ff4c68f2;animation:.98s ease-in-out infinite tempo-red-glow;box-shadow:0 0 0 2px #ff4c6847,0 0 34px #ff4c68b8,0 0 78px #ff4c6870,inset 0 0 38px #ff4c6833}.measure-box.tempo-slower{border-color:#4c91fff2;animation:.98s ease-in-out infinite tempo-blue-glow;box-shadow:0 0 0 2px #4c91ff47,0 0 34px #4c91ffb8,0 0 78px #4c91ff70,inset 0 0 38px #4c91ff33}.measure-box.ghost{visibility:hidden}.measure-number{color:#f8fbff9e;justify-self:start;margin:12px;font-size:.76rem;font-weight:900;position:absolute;top:0;left:0}.measure-glyph{aspect-ratio:1;width:min(78%,150px);position:absolute;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.beat-guide{fill:none;stroke:#ffffff14;stroke-width:1px}.beat-dot{fill:#ffffff08;stroke:#f8fbff57;stroke-width:2px;vector-effect:non-scaling-stroke}.beat-link{fill:none;stroke:#36cfc9;stroke-width:4.5px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #36cfc9bf);animation:.18s both draw-link}.beat-dot.active{fill:#f8fbff;stroke:#f8fbff;filter:drop-shadow(0 0 5px #f8fbff8c)}.beat-dot.hit{fill:#36cfc9;stroke:#36cfc9;animation:.26s cubic-bezier(.12,.82,.24,1) forwards shatter}.hit-burst{pointer-events:none}.hit-burst.combo-intensity-1{opacity:.3}.hit-burst.combo-intensity-2{opacity:.45}.hit-burst.combo-intensity-3{opacity:.6}.burst-flash{fill:#f8fbff;filter:drop-shadow(0 0 10px #f8fbfff2);transform-box:fill-box;transform-origin:50%;animation:.26s ease-out forwards hit-flash}.combo-intensity-2 .burst-flash{filter:drop-shadow(0 0 15px #f8fbff)}.combo-intensity-3 .burst-flash{filter:drop-shadow(0 0 20px #f8fbff)drop-shadow(0 0 14px #ff6b8a8c)}.burst-ring{fill:none;stroke:#36cfc9;stroke-width:3px;filter:drop-shadow(0 0 8px #36cfc9e6);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50%;animation:.42s cubic-bezier(.12,.82,.24,1) forwards hit-ring}.combo-intensity-2 .burst-ring{stroke-width:3.6px;filter:drop-shadow(0 0 12px #36cfc9f2)}.combo-intensity-3 .burst-ring{stroke-width:4.2px;filter:drop-shadow(0 0 14px #36cfc9)drop-shadow(0 0 10px #f5c84c99)}.burst-spark{stroke:#f5c84c;stroke-linecap:round;stroke-width:3.4px;filter:drop-shadow(0 0 7px #f5c84ce6);vector-effect:non-scaling-stroke;animation:.46s ease-out forwards hit-spark;animation-delay:var(--spark-delay,0s)}.combo-intensity-2 .burst-spark{filter:drop-shadow(0 0 10px #f5c84cf2)}.combo-intensity-3 .burst-spark{filter:drop-shadow(0 0 12px #f5c84c)drop-shadow(0 0 8px #ff6b8aa6)}.good-burst-core{fill:#5ea9ff6b;filter:drop-shadow(0 0 8px #5ea9ffad);transform-box:fill-box;transform-origin:50%;animation:.36s ease-out forwards good-core}.combo-intensity-2 .good-burst-core{fill:#5ea9ff85;filter:drop-shadow(0 0 12px #5ea9ffd1)}.combo-intensity-3 .good-burst-core{fill:#5ea9ff9e;filter:drop-shadow(0 0 16px #5ea9fff2)drop-shadow(0 0 10px #36cfc973)}.good-burst-ring{fill:none;stroke:#5ea9ff;stroke-width:2.8px;filter:drop-shadow(0 0 8px #5ea9ffb8);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50%;animation:.52s ease-out forwards good-ring}.combo-intensity-2 .good-burst-ring{stroke-width:3.2px;filter:drop-shadow(0 0 12px #5ea9ffdb)}.combo-intensity-3 .good-burst-ring{stroke-width:3.7px;filter:drop-shadow(0 0 16px #5ea9fff2)drop-shadow(0 0 9px #36cfc980)}.beat-dot.missed{fill:#ff6b8a1f;stroke:#ff6b8a;filter:drop-shadow(0 0 5px #ff6b8a8c)}.beat-dot.hint{filter:drop-shadow(0 0 4px #f8fbff42)}.hint-ring{fill:none;stroke:#f8fbffc7;stroke-width:2px;opacity:0;filter:drop-shadow(0 0 5px #f8fbff57);transform-box:fill-box;transform-origin:50%;vector-effect:non-scaling-stroke;animation:.68s ease-out infinite hint-ring}.measure-strip.tap .measure-box.current{--box-scale:1.025}.measure-strip:after{content:"";left:var(--target-left,50%);pointer-events:none;background:linear-gradient(#0000,#f8fbffcc,#0000);width:2px;position:absolute;top:10%;bottom:14%;transform:translate(-50%);box-shadow:0 0 16px #f8fbff59}.measure-strip.vertical:after{left:8%;right:8%;top:calc(var(--target-top,50%) - 12px);background:linear-gradient(90deg,#0000,#f8fbffcc,#0000);width:auto;height:2px;bottom:auto;transform:translateY(-50%)}.progress{cursor:pointer;appearance:none;touch-action:none;background:#ffffff14;border:0;width:100%;height:8px;padding:0;display:block;overflow:hidden}.progress:focus-visible{outline-offset:3px;outline:2px solid #36cfc9}.progress span{background:linear-gradient(90deg,#36cfc9,#f5c84c,#ff6b8a);height:100%;display:block}.hud{grid-template-rows:auto auto auto minmax(120px,1fr);gap:18px;padding:20px;display:grid}.status{color:#101219;background:#f8fbff;border-radius:8px;align-items:center;gap:10px;min-height:56px;padding:0 16px;font-weight:900;display:flex}dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;display:grid}dl div{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;justify-content:center;min-height:92px;padding:14px;display:flex}dt{color:#f8fbff9e;text-transform:uppercase;font-size:.75rem}dd{overflow-wrap:anywhere;margin:4px 0 0;font-size:1.45rem;font-weight:900}.error{color:#ffdce4;background:#ff6b8a1a;border:1px solid #ff6b8a4d;border-radius:8px;margin:0;padding:10px 12px;font-size:.85rem}.meter{background:linear-gradient(#ffffff12,#ffffff08);border-radius:8px;align-self:stretch;position:relative;overflow:hidden}.meter span{background:linear-gradient(#ff6b8a,#f5c84c,#36cfc9);min-height:18%;position:absolute;inset:auto 0 0}.result-backdrop{z-index:60;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#05070aad;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.result-dialog{color:#f8fbff;background:radial-gradient(circle at 20% 10%,#36cfc92e,#0000 34%),radial-gradient(circle at 88% 18%,#ff6b8a29,#0000 34%),#12141cf5;border:1px solid #ffffff2e;border-radius:8px;width:min(520px,100%);padding:22px;box-shadow:0 28px 86px #0000008c}.result-dialog h2{overflow-wrap:anywhere;margin:0 0 16px;font-size:clamp(1.4rem,4vw,2.35rem);line-height:1}.result-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.result-stats div{min-height:82px}.result-dialog button{color:#101219;cursor:pointer;background:#36cfc9;border:0;border-radius:8px;width:100%;height:46px;font-weight:950}.result-dialog button:focus-visible{outline-offset:3px;outline:2px solid #f8fbff}@keyframes shatter{0%{opacity:1;r:5.5}55%{opacity:.9;r:8.5}to{opacity:0;r:1}}@keyframes hit-flash{0%{opacity:1;transform:scale(.8)}70%{opacity:.55;transform:scale(var(--flash-scale,2.8))}to{opacity:0;transform:scale(calc(var(--flash-scale,2.8) + .6))}}@keyframes hit-ring{0%{opacity:1;r:5;stroke-width:3.5px;transform:scale(.72)}70%{opacity:.82;r:15;stroke-width:2px;transform:scale(var(--ring-scale,3))}to{opacity:0;r:23;stroke-width:.4px;transform:scale(calc(var(--ring-scale,3) + .35))}}@keyframes hit-spark{0%{opacity:0;stroke-dasharray:0 24;stroke-width:4.4px}18%{opacity:1}to{opacity:0;stroke-dasharray:24 24;stroke-width:.8px}}@keyframes good-core{0%{opacity:.75;transform:scale(.9)}to{opacity:0;transform:scale(var(--good-core-scale,2.1))}}@keyframes good-ring{0%{opacity:.82;r:5.5;stroke-width:2.8px}to{opacity:0;r:var(--good-ring-radius,18);stroke-width:.8px}}@keyframes burst{0%{filter:brightness()}50%{filter:brightness(1.7)}to{filter:brightness()}}@keyframes draw-link{0%{opacity:0;stroke-dasharray:0 120}to{opacity:1;stroke-dasharray:120 120}}@keyframes hint-ring{0%{opacity:0;transform:scale(.82)}18%{opacity:.72}to{opacity:0;transform:scale(1.95)}}@keyframes combo-pop{0%{opacity:0;transform:translate(-50%,8px)scale(.84)}45%{opacity:1;transform:translate(-50%)scale(1.08)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes tempo-red-glow{0%,to{filter:saturate()}50%{filter:saturate(1.45)brightness(1.25)}}@keyframes tempo-blue-glow{0%,to{filter:saturate()}50%{filter:saturate(1.35)brightness(1.22)}}@media (width<=820px){body{overflow:auto}.shell{place-items:stretch stretch;min-height:100svh;padding:12px}.game{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;height:calc(100svh - 24px)}.game.vertical-flow{height:max(1040px,100svh - 24px)}.topbar{min-height:58px;padding:12px}.controls{gap:8px}.builtin-picker{width:min(210px,40vw);padding:0 8px}.builtin-picker span{display:none}.settings-popover{width:min(340px,100% - 24px);top:72px;right:12px}h1{max-width:48vw}.measure-strip{--box-size:var(--horizontal-box-size,min(23.4%, 140px));padding:0 12px 16px}.measure-strip.vertical{--box-size:var(--vertical-box-size,104px)}.combo-overlay{top:8px}.measure-number{margin:8px}.measure-glyph{width:min(80%,140px)}.hud{grid-template-rows:auto auto;grid-template-columns:160px 1fr;padding:12px}.meter,.error{display:none}.status{min-height:100%}dl{grid-template-columns:repeat(3,minmax(0,1fr))}dl div{min-height:70px;padding:10px}dd{font-size:1rem}}@media (width<=560px){h1{max-width:45vw;font-size:1.2rem}.result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hud{grid-template-columns:1fr}dl{grid-template-columns:repeat(2,minmax(0,1fr))}}