:root{color:#f7f4e9;background:#07090d;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #f7f4e9;--muted: #8c929c;--panel: #10151c;--panel-strong: #151b24;--line: rgba(247, 244, 233, .13);--yuzu: #f3d43f;--kick: #f3d43f;--snare: #f08068;--hi-hat: #78d7bc;--cymbal: #c6b7ff;--tom: #76a9ff;--hit-line: 19%}*{box-sizing:border-box}html,body{min-width:320px;min-height:100%;margin:0;overflow-x:hidden;background:radial-gradient(circle at 12% -8%,rgba(243,212,63,.12),transparent 31rem),radial-gradient(circle at 90% 110%,rgba(118,169,255,.08),transparent 38rem),#07090d}body,button,input,select{font:inherit}button,select,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px}h1,h2,p,fieldset{margin:0}button:disabled{cursor:wait;opacity:.52}.drummer-app{width:min(1320px,100%);min-height:100svh;margin:0 auto;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.drummer-app.is-playing{height:100svh;overflow:hidden}.game-hud{display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto;min-height:55px;align-items:center;gap:clamp(12px,2.4vw,32px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:10px;font-weight:900;letter-spacing:.09em;text-decoration:none;text-transform:uppercase}.brand-mark{display:grid;width:31px;height:31px;place-items:center;border-radius:8px 12px 9px 13px;color:#15130a;background:var(--yuzu);box-shadow:0 0 24px #f3d43f29;font-weight:950;transform:rotate(-5deg)}.song-lockup{min-width:0}.song-lockup>span,.song-lockup>small,.hud-stats small,.results>span,.setup-heading>span{display:block;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;font-weight:750;letter-spacing:.11em;text-transform:uppercase}.song-lockup>span{color:var(--yuzu)}.song-lockup h1{overflow:hidden;font-size:clamp(18px,2.3vw,27px);line-height:1;letter-spacing:-.045em;text-overflow:ellipsis;white-space:nowrap}.song-lockup>small{margin-top:3px;letter-spacing:.06em;text-transform:none}.hud-stats{display:flex;align-items:center;gap:clamp(13px,2.5vw,30px)}.hud-stats>span{display:grid;gap:2px;text-align:right}.hud-stats strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(13px,1.8vw,18px);font-variant-numeric:tabular-nums}.hud-stats span:nth-child(2) strong{color:var(--yuzu)}.icon-button,.control-button,.secondary-button{min-height:34px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#ffffff09;cursor:pointer;font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.icon-button{min-width:58px}.song-timeline{display:grid;grid-template-columns:36px 1fr 36px;min-height:31px;align-items:center;gap:8px;color:#717883;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;font-variant-numeric:tabular-nums}.song-timeline>span:last-child{text-align:right}.timeline-track{position:relative;height:5px;overflow:hidden;border-radius:99px;background:#222831}.timeline-fill{position:absolute;inset:0 auto 0 0;width:var(--song-progress, 0%);border-radius:inherit;background:var(--yuzu);box-shadow:0 0 12px #f3d43f59}.timeline-sections{position:absolute;z-index:2;inset:0}.timeline-sections i{position:absolute;top:0;bottom:0;width:1px;background:#07090dbf}.active-controls{display:flex;min-height:45px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.active-controls[hidden]{display:none}.active-controls p{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.active-controls p>span:first-child,.active-controls strong{color:var(--ink)}.active-controls i{margin-inline:5px;font-style:normal}.active-controls>div{display:flex;align-items:center;gap:6px}.control-button{min-height:44px;padding:0 11px}.active-loop-control{display:inline-flex;min-height:44px;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:#ffffff09;cursor:pointer;font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.active-loop-control input{width:16px;height:16px;margin:0;accent-color:var(--yuzu)}.control-button.is-accent{border-color:#f3d43f66;color:var(--yuzu)}.stage{position:relative}.highway{position:relative;height:clamp(430px,calc(100svh - 132px),720px);min-height:430px;overflow:hidden;border:1px solid rgba(247,244,233,.16);border-radius:14px;background:linear-gradient(90deg,rgba(243,212,63,.045),transparent 30%),repeating-linear-gradient(115deg,transparent 0 25px,rgba(255,255,255,.012) 26px 27px),linear-gradient(180deg,#131922,#0b0f15);box-shadow:0 28px 80px #0000006b;isolation:isolate}.is-playing .highway{height:max(310px,calc(100svh - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));min-height:0}.lane-stack{position:absolute;z-index:2;inset:23px 0 0;display:grid;grid-template-rows:repeat(5,1fr)}.drum-lane{position:relative;min-width:0;min-height:0;overflow:hidden;border:0;border-top:1px solid rgba(247,244,233,.085);border-radius:0;color:var(--ink);background:transparent;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.drum-lane:last-child{border-bottom:1px solid rgba(247,244,233,.085)}.drum-lane:before{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--lane-color) 18%,transparent),transparent 38%);content:"";opacity:.7;pointer-events:none;transition:opacity .12s ease}.drum-lane.is-band{filter:saturate(.45);opacity:.56}.drum-lane.is-band:before{opacity:.18}.drum-lane.is-dormant{opacity:.3}.drum-lane.is-pressed:before,.drum-lane.is-hit:before,.drum-lane.is-band-pulse:before{opacity:1}.drum-lane.is-pressed .lane-receptor,.drum-lane.is-hit .lane-receptor,.drum-lane.is-band-pulse .lane-receptor{border-color:#fff;filter:brightness(1.4);transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 7px color-mix(in srgb,var(--lane-color) 16%,transparent),0 0 26px color-mix(in srgb,var(--lane-color) 40%,transparent)}.lane-kick{--lane-color: var(--kick)}.lane-snare{--lane-color: var(--snare)}.lane-hi-hat{--lane-color: var(--hi-hat)}.lane-cymbal{--lane-color: var(--cymbal)}.lane-tom{--lane-color: var(--tom)}.lane-label{position:absolute;z-index:5;top:50%;left:9px;display:grid;width:calc(var(--hit-line) - 32px);overflow:hidden;color:color-mix(in srgb,var(--lane-color) 82%,#fff);font-size:clamp(8px,1.15vw,11px);font-weight:900;letter-spacing:.08em;text-align:left;text-overflow:ellipsis;text-transform:uppercase;transform:translateY(-50%);white-space:nowrap}.lane-label small{margin-top:3px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:6px;letter-spacing:.1em}.lane-key{display:inline-grid;width:17px;height:17px;margin-right:7px;place-items:center;border:1px solid color-mix(in srgb,var(--lane-color) 38%,transparent);border-radius:4px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:7px;vertical-align:1px}.lane-track{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(247,244,233,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,233,.035) 1px,transparent 1px);background-position-x:var(--grid-offset, 0),var(--grid-offset, 0);background-size:var(--beat-width, 100px) 100%,var(--subdivision-width, 25px) 100%;pointer-events:none}.lane-receptor{position:absolute;z-index:6;top:50%;left:var(--hit-line);display:block;width:clamp(24px,3vw,36px);height:clamp(24px,3vw,36px);border:2px solid var(--lane-color);color:var(--lane-color);background:#090d12;transform:translate(-50%,-50%);transition:border-color 70ms ease,filter 70ms ease,transform 70ms ease,box-shadow 70ms ease}.lane-kick .lane-receptor{border-radius:50%}.lane-snare .lane-receptor{border-radius:5px}.lane-cymbal .lane-receptor{border-radius:50%;box-shadow:inset 0 0 0 4px #090d12,inset 0 0 0 5px currentColor}.lane-tom .lane-receptor{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}.lane-hi-hat .lane-receptor{border:0;background:transparent}.lane-hi-hat .lane-receptor:before,.lane-hi-hat .lane-receptor:after{position:absolute;top:50%;left:50%;width:112%;height:2px;background:currentColor;content:""}.lane-hi-hat .lane-receptor:before{transform:translate(-50%,-50%) rotate(45deg)}.lane-hi-hat .lane-receptor:after{transform:translate(-50%,-50%) rotate(-45deg)}.strike-line{position:absolute;z-index:4;top:23px;bottom:0;left:var(--hit-line);width:2px;background:linear-gradient(180deg,transparent,var(--yuzu) 8% 92%,transparent);box-shadow:0 0 18px #f3d43f45;pointer-events:none}.strike-line span{position:absolute;top:-19px;left:50%;color:var(--yuzu);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:7px;font-weight:850;letter-spacing:.11em;transform:translate(-50%)}.beat-ruler{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}.beat-marker{position:absolute;top:0;bottom:0;width:1px;border-left:1px solid rgba(247,244,233,.13);color:#717782;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:7px;font-variant-numeric:tabular-nums;will-change:left}.beat-marker.is-bar{border-left-color:#f7f4e94f}.beat-marker span{position:absolute;top:6px;left:5px;white-space:nowrap}.highway-note{position:absolute;z-index:5;top:50%;display:block;width:clamp(18px,2.5vw,30px);height:clamp(18px,2.5vw,30px);color:var(--lane-color);background:var(--lane-color);transform:translate(-50%,-50%);will-change:left,opacity}.highway-note.is-band-note{opacity:.22;filter:saturate(.45);transform:translate(-50%,-50%) scale(.72)}.highway-note.is-hit{opacity:0;transform:translate(-50%,-50%) scale(1.75);transition:opacity .13s ease,transform .13s ease}.highway-note.is-miss{opacity:.14;filter:grayscale(1)}.highway-note.lane-kick{border-radius:50%}.highway-note.lane-snare{border-radius:4px}.highway-note.lane-cymbal{border:3px solid currentColor;border-radius:50%;background:transparent;box-shadow:0 0 16px color-mix(in srgb,var(--lane-color) 22%,transparent)}.highway-note.lane-tom{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}.highway-note.lane-hi-hat{background:transparent}.highway-note.lane-hi-hat:before,.highway-note.lane-hi-hat:after{position:absolute;top:50%;left:50%;width:120%;height:3px;border-radius:3px;background:currentColor;content:""}.highway-note.lane-hi-hat:before{transform:translate(-50%,-50%) rotate(45deg)}.highway-note.lane-hi-hat:after{transform:translate(-50%,-50%) rotate(-45deg)}.feedback{position:absolute;z-index:12;top:3px;left:50%;min-width:210px;max-width:calc(100% - 20px);overflow:hidden;padding:3px 12px;border:1px solid rgba(247,244,233,.1);border-radius:999px;color:#f7f4e9e0;background:#06080bd4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:10px;text-align:center;text-overflow:ellipsis;transform:translate(-50%);white-space:nowrap}.feedback.is-perfect{color:var(--yuzu)}.feedback.is-good{color:var(--hi-hat)}.feedback.is-off{color:var(--snare)}.countdown{position:absolute;z-index:14;inset:0;display:grid;place-items:center;color:var(--ink);font-size:clamp(88px,18vw,205px);font-weight:950;pointer-events:none;text-shadow:0 10px 60px #000}.start-panel{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:clamp(12px,3vw,30px);background:linear-gradient(#07090da3,#07090dd6),radial-gradient(circle at 51% 36%,rgba(243,212,63,.16),transparent 27rem);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.start-panel[hidden],.results[hidden]{display:none}.setup-card{width:min(720px,100%);padding:clamp(18px,4vw,36px);border:1px solid rgba(247,244,233,.16);border-radius:14px;background:linear-gradient(140deg,rgba(255,255,255,.035),transparent 45%),#0c1016f5;box-shadow:0 30px 95px #0009}.setup-heading{text-align:center}.setup-heading>span{color:var(--yuzu)}.setup-heading h2{margin:9px 0 22px;font-size:clamp(32px,5.7vw,62px);line-height:.91;letter-spacing:-.06em;text-transform:uppercase}.part-picker{padding:0;border:0}.part-picker legend,.range-row span{margin-bottom:8px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.part-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.part-chip{position:relative;min-height:48px;border:1px solid color-mix(in srgb,var(--lane-color) 38%,transparent);border-radius:8px;color:color-mix(in srgb,var(--lane-color) 72%,#fff);background:color-mix(in srgb,var(--lane-color) 6%,#11161d);cursor:pointer;font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.part-chip:after{position:absolute;top:6px;right:7px;color:var(--lane-color);content:"BAND";font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:6px;letter-spacing:.08em;opacity:.45}.part-chip.is-selected{border-color:var(--lane-color);color:#0b0d10;background:var(--lane-color);box-shadow:0 0 22px color-mix(in srgb,var(--lane-color) 18%,transparent)}.part-chip.is-selected:after{color:#0b0d10;content:"YOU";opacity:.72}.part-chip:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.38}.part-chip.is-unavailable:after{content:"NO NOTES"}#mix-summary{margin-top:8px;color:#a2a8b0;font-size:10px}.range-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;margin:18px 0}.range-row>label:first-child{display:grid}.range-row select{width:100%;min-height:44px;padding:0 36px 0 12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#151a22;cursor:pointer}.loop-control{display:grid;grid-template-columns:auto 45px;align-items:center;column-gap:10px;cursor:pointer}.loop-control>span{grid-column:1 / -1}.loop-control input{position:absolute;opacity:0;pointer-events:none}.loop-control i{position:relative;display:block;width:45px;height:25px;border:1px solid var(--line);border-radius:99px;background:#232932}.loop-control i:after{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#858c96;content:"";transition:transform .13s ease,background .13s ease}.loop-control input:checked+i{border-color:#f3d43f99;background:#f3d43f29}.loop-control input:checked+i:after{background:var(--yuzu);transform:translate(20px)}.action-button{width:100%;min-height:49px;padding:0 25px;border:0;border-radius:7px;color:#13130d;background:var(--yuzu);box-shadow:0 5px #86760f,0 13px 35px #f3d43f2b;cursor:pointer;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.action-button:active:not(:disabled){box-shadow:0 2px #86760f;transform:translateY(3px)}.setup-card>small{display:block;margin-top:13px;color:#727883;font-size:8px;text-align:center}.game-footer{display:grid;grid-template-columns:1fr auto 1fr;min-height:31px;align-items:center;color:#6d747e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;letter-spacing:.04em;text-transform:uppercase}.game-footer>span:first-child{color:var(--ink)}.settings{position:relative;justify-self:end}.settings summary{cursor:pointer;list-style:none}.settings summary::-webkit-details-marker{display:none}.settings[open]{position:absolute;z-index:40;right:0;bottom:2px;display:grid;width:min(330px,calc(100vw - 24px));gap:10px;padding:15px;border:1px solid var(--line);border-radius:9px;background:#171c24;box-shadow:0 18px 60px #000}.settings button{min-height:34px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:#202630}.settings label{display:flex;justify-content:space-between}.settings input{width:100%;accent-color:var(--yuzu)}.settings p{color:var(--muted);font-size:8px;line-height:1.45;text-transform:none}.results{position:fixed;z-index:100;inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;width:min(760px,calc(100% - 24px));max-height:680px;margin:auto;align-content:center;justify-items:center;overflow-y:auto;padding:clamp(22px,4.5vw,52px);border:1px solid rgba(247,244,233,.17);border-radius:16px;background:radial-gradient(circle at 50% 8%,rgba(243,212,63,.12),transparent 22rem),#0b0f14fa;box-shadow:0 30px 110px #000;text-align:center}.results>span{color:var(--yuzu)}.results h2{margin:9px 0 24px;font-size:clamp(32px,6vw,60px);line-height:.95;letter-spacing:-.055em}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);width:100%;border-block:1px solid var(--line)}.result-grid div{display:grid;gap:4px;padding:17px 7px;border-left:1px solid var(--line)}.result-grid div:first-child{border-left:0}.result-grid strong{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(18px,3.5vw,30px)}.result-grid span{color:var(--muted);font-size:8px;letter-spacing:.08em;text-transform:uppercase}.part-breakdown{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}.part-result{padding:7px 10px;border:1px solid color-mix(in srgb,var(--lane-color) 34%,transparent);border-radius:99px;color:color-mix(in srgb,var(--lane-color) 78%,#fff);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;text-transform:uppercase}.results>p{max-width:590px;margin:20px 0;color:#a4aab2;font-size:12px;line-height:1.55}.results>.part-breakdown-label{margin:16px 0 -8px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.part-breakdown-label[hidden]{display:none}.result-actions{display:grid;grid-template-columns:1fr 1fr;width:min(470px,100%);gap:10px}.result-actions .secondary-button{min-height:49px}@media(max-width:760px){.drummer-app{padding-inline:max(7px,env(safe-area-inset-left))}.game-hud{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;min-height:50px}.brand-name,.song-lockup>small,.hud-stats span:first-child,.midi-button{display:none}.song-lockup h1{font-size:clamp(16px,5vw,22px)}.hud-stats{gap:11px}.active-controls{min-height:52px}.active-controls p{display:none}.active-controls>div{display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.control-button,.active-loop-control{min-width:0;min-height:44px;justify-content:center;padding-inline:3px;font-size:7px}.is-playing .highway{height:max(285px,calc(100svh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.lane-label{left:6px;width:calc(var(--hit-line) - 22px);font-size:7px}.lane-key{display:none}.setup-card{padding:17px 14px}.setup-heading h2{margin-bottom:17px;font-size:clamp(29px,9vw,44px)}.part-chips{grid-template-columns:repeat(3,1fr)}.part-chip{min-height:44px;font-size:9px}.range-row{margin:14px 0}.game-footer{grid-template-columns:1fr auto}.game-footer>span:nth-child(2){display:none}.result-grid{grid-template-columns:1fr 1fr}.result-grid div:nth-child(3){border-left:0}.result-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:440px){:root{--hit-line: 21%}.song-timeline{min-height:27px}.highway{min-height:500px}.part-chips{gap:5px}.range-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}.setup-card>small{max-width:280px;margin-inline:auto}}@media(max-height:590px)and (orientation:landscape){.game-hud{min-height:39px}.song-timeline{min-height:23px}.active-controls{position:static;min-height:48px;border-bottom:1px solid var(--line)}.active-controls p{display:none}.is-playing .highway{height:calc(100svh - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.setup-card{display:grid;grid-template-columns:.75fr 1.25fr;column-gap:24px;padding:13px 18px}.setup-heading{align-self:center;text-align:left}.setup-heading h2{margin-bottom:0;font-size:34px}.part-picker,.range-row,.setup-card>.action-button,.setup-card>small{grid-column:2}.range-row{margin:8px 0}.part-chip,.action-button{min-height:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}