@layer components{.ob-stage{-webkit-user-select:none;user-select:none;background:#050405;padding:0}.ob-head{position:absolute;top:18px;left:22px;right:22px}.ob-kicker{letter-spacing:.08em;color:var(--on-dark-faint);font-size:12px;font-weight:600}.ob-track{letter-spacing:-.05em;margin-top:4px;font-size:clamp(44px,13cqw,68px);font-weight:600;line-height:1}.ob-cue{min-height:1.4em;color:var(--on-dark-dim);animation:ob-in .3s var(--ease-out) both;margin-top:10px;font-size:15px;line-height:1.35}.ob-cue.is-count{color:#ff93c6;font-size:28px;font-weight:600}@keyframes ob-in{0%{opacity:0;transform:translateY(5px)}}.ob-grid{--p:0;gap:6px;display:grid;position:absolute;top:max(150px,24cqh);left:16px;right:16px}.ob-lane{grid-template-columns:40px 1fr;align-items:center;gap:8px;display:grid}.ob-name{letter-spacing:.04em;color:var(--on-dark-faint);font-size:11px;font-weight:600}.ob-lane.is-now .ob-name{color:#ff93c6}.ob-steps{background:linear-gradient(90deg,#0000 calc(50% - 1px),#ffffff2e calc(50% - 1px) 50%,#0000 50%),repeating-linear-gradient(90deg,#ffffff14 0 1px,#0000 1px 12.5%),#ffffff09;border-radius:4px;height:26px;position:relative}.ob-lane.is-now .ob-steps{background-color:#ff5ba617;height:40px;box-shadow:inset 0 0 0 1px #ff5ba666}.ob-hit{background:#ffffff4d;border-radius:2px;margin-left:1px;position:absolute;top:5px;bottom:5px}.ob-lane.is-later .ob-hit{background:#ffffff2e}.ob-lane.is-now .ob-hit{background:#ff5ba6}.ob-take{background:#fff;border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:4px;bottom:4px}.ob-tap{width:3px;animation:pop .22s var(--ease-pop) both;background:#fff;border-radius:2px;margin-left:-1.5px;position:absolute;top:3px;bottom:3px}.ob-ear{letter-spacing:.06em;color:#ff93c6b3;place-items:center;font-size:12px;font-style:normal;font-weight:600;display:grid;position:absolute;inset:0}.ob-head-line{top:-6px;bottom:-6px;left:calc(48px + (100% - 48px) * var(--p));opacity:0;background:#fff;width:2px;margin-left:-1px;transition:opacity .15s;position:absolute}.ob-grid.is-running .ob-head-line{opacity:1}.ob-pad{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom));touch-action:none;height:min(30cqh,220px);transition:transform 90ms var(--ease-out), background .2s ease;background:#141214;border-radius:22px;position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.ob-pad.is-live{background:#1d1219;box-shadow:inset 0 0 0 1.5px #ff5ba68c}.ob-pad:active{transform:scale(.985)}.ob-pad{place-content:center;justify-items:center;gap:4px;display:grid}.ob-pad b{letter-spacing:-.04em;color:#ffffff38;font-size:34px;font-weight:600;position:relative}.ob-pad.is-live b{color:#ff93c6cc}.ob-pad span{color:var(--on-dark-faint);font-size:13px;font-weight:600;position:relative}.ob-clicks{grid-template-columns:repeat(10,1fr);gap:6px;display:grid;position:absolute;top:max(160px,26cqh);left:22px;right:22px}.ob-clicks i{background:#ffffff0f;border-radius:4px;height:26px;transition:background .12s}.ob-clicks i.is-on{background:#ff5ba6}.ob-flash{animation:ob-flash .26s var(--ease-out) forwards;pointer-events:none;background:#ff5ba6;position:absolute;inset:0}@keyframes ob-flash{0%{opacity:.85}to{opacity:0}}.ob-tile{background:#0b080a;place-items:center;display:grid;position:absolute;inset:0}.ob-tile div{background:#ffffff0d;width:84%;height:30%;position:relative}.ob-tile i{background:#ff5ba6b3;width:2px;position:absolute;top:0;bottom:0}.ob-tile b{background:#fff;width:2px;position:absolute;top:25%;bottom:25%}.ob-tile span{text-align:center;color:#ffffffb3;font-size:10px;font-weight:600;position:absolute;bottom:6%;left:0;right:0}@media (prefers-reduced-motion:reduce){.ob-cue,.ob-tap,.ob-flash{animation:none}}}