:root{--bg: #111418;--panel: #171b21;--panel-2: #1d2229;--raise: #232933;--line: #262c35;--line-2: #323a45;--text: #dfe4ea;--muted: #8d96a1;--dim: #5d6672;--teal: #3fbf9f;--teal-hi: #56d6b5;--teal-ink: #0c1512;--blue: #8fb3d9;--amber: #c9a35b;--gray: #6b7280;--radius: 12px;--shadow: 0 18px 50px rgba(0, 0, 0, .45);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.35 -apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}#app{height:100%;overflow:hidden}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}.icon{width:20px;height:20px;flex:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .08s;user-select:none}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn-sm{height:34px;padding:0 12px;font-size:14px}.btn-md{height:40px;padding:0 16px}.btn-lg{height:52px;padding:0 24px;font-size:17px;font-weight:600;border-radius:12px}.btn-lg .icon{width:22px;height:22px}.btn-primary{background:var(--teal);color:var(--teal-ink);font-weight:650;box-shadow:0 6px 22px #3fbf9f40}.btn-primary:hover:not(:disabled){background:var(--teal-hi)}.btn-secondary{background:var(--panel-2);border-color:var(--line-2)}.btn-secondary:hover:not(:disabled){background:var(--raise)}.btn-ghost{background:transparent;color:var(--muted)}.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--panel-2)}.btn-icon{width:40px;height:40px;padding:0;background:transparent;color:var(--muted);border-radius:10px}.btn-icon:hover:not(:disabled){color:var(--text);background:var(--panel-2)}.btn-icon.on{color:var(--teal)}.btn-icon.confirm{width:auto;padding:0 10px;color:var(--amber);border-color:#c9a35b80}.spinner{display:inline-flex;color:var(--muted)}.spinner .icon{width:26px;height:26px;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:10px;background:#c9a35b1a;border:1px solid rgba(201,163,91,.35);color:var(--amber);font-weight:550;white-space:nowrap}.error-chip .icon{width:18px;height:18px}.error-chip .btn{color:var(--text)}.error-chip:not(:has(.btn)){padding-right:12px}.meter{position:relative;display:inline-block;width:120px;height:8px;border-radius:4px;background:var(--raise);overflow:hidden}.meter-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#2f8f78 0%,var(--teal) 70%,#c9d36b 92%,var(--amber) 100%);background-size:120px 100%}.meter-lg{width:100%;height:12px;border-radius:6px}.meter-lg .meter-fill{background-size:100% 100%}.select,.text-input{height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);min-width:0}.text-input{height:52px;font-size:17px;width:100%}.text-input:focus,.select:focus{outline:2px solid rgba(63,191,159,.6);outline-offset:1px}.segmented{display:inline-flex;padding:3px;gap:3px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2)}.segmented button{min-width:46px;height:32px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.segmented button.on{background:var(--raise);color:var(--text);box-shadow:inset 0 0 0 1px var(--teal)}.switch{position:relative;display:inline-flex}.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-track{width:44px;height:26px;border-radius:13px;background:var(--raise);border:1px solid var(--line-2);position:relative;transition:background .15s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}.switch input:checked+.switch-track{background:#3fbf9f4d;border-color:var(--teal)}.switch input:checked+.switch-track:after{transform:translate(18px);background:var(--teal)}.switch input:focus-visible+.switch-track{outline:2px solid rgba(63,191,159,.6)}input[type=range]{accent-color:var(--teal);width:100%;min-width:0}.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.01em}.logo-mark{width:28px;height:28px}.center-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}#app>.spinner{height:100%;width:100%;justify-content:center;align-items:center}.signin{width:min(380px,100%);margin:0 auto}.signin>.btn,.signin-email,.signin-email .btn,.email-form{width:100%}.signin-logo{margin-bottom:28px}.signin-logo .logo{font-size:30px;gap:14px}.signin-logo .logo-mark{width:46px;height:46px}.email-form{display:flex;flex-direction:column;gap:10px}.sent,.private-label{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;font-size:18px;font-weight:600}.sent{color:var(--teal)}.private-label .icon{color:var(--muted)}.signin-status{min-height:44px;display:flex;justify-content:center}.center-screen.anchored{justify-content:flex-start;padding-top:max(24px,22vh)}.code-input{text-align:center;letter-spacing:.3em;font-variant-numeric:tabular-nums}.spacer{flex:1}.level{display:inline-flex;align-items:center;gap:4px}.level-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--muted)}.level-dot.on{background:var(--text);border-color:var(--text)}.level-label{margin-left:6px;font-size:13px;color:var(--muted)}.strip{display:flex;align-items:center;gap:16px;min-height:76px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}.lane{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.upcoming{flex:1;display:flex;gap:8px;overflow:hidden;min-width:0;align-items:center}.strip.counting .chip.now{display:none}.chip{display:flex;align-items:center;gap:8px;flex:none;height:52px;padding:0 14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);transition:opacity .2s}.chip-notes{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}.chip.now{border-color:var(--teal);background:#3fbf9f14;height:56px}.chip.now .chip-notes{font-size:22px}.chip.later{background:transparent;border-style:dashed;border-color:var(--line-2)}.chip.later .chip-notes{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px 0 4px;border-radius:8px;background:#8fb3d91a;border:1px solid rgba(143,179,217,.28);color:#c7d8ea;font-size:14px;font-weight:550;white-space:nowrap}.sym{display:block;overflow:visible}.badge-sym{width:40px;height:24px}.badge.early{background:transparent;border:1px dashed rgba(143,179,217,.45);color:var(--muted)}.heard{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;width:128px;height:56px;padding:0 10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2);transition:border-color .12s,background .12s}.heard-icon{width:22px;height:22px;color:var(--muted)}.heard-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.heard.match{border-color:var(--teal);background:#3fbf9f1a}.heard.match .heard-icon{color:var(--teal)}.heard-note{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.heard-note.long{max-width:84px;overflow:hidden;font-size:17px;white-space:nowrap;text-overflow:ellipsis}.heard.silent .heard-note{color:var(--muted)}.tuner{position:relative;width:72px;height:6px;border-radius:3px;background:var(--raise)}.tuner-center{position:absolute;left:50%;top:-3px;width:2px;height:12px;margin-left:-1px;background:var(--dim)}.tuner-needle{position:absolute;top:-3px;width:4px;height:12px;margin-left:-2px;border-radius:2px;background:var(--blue);transition:left .08s linear}.tuner.in-tune .tuner-needle{background:var(--teal)}.tab-area{position:relative;min-height:0}.score{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}.card{background:var(--panel);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);position:relative}.results-score{font-size:64px;font-weight:750;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stats{display:flex;gap:20px}.stat{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center}.stat .icon{width:20px;height:20px}.stat-n{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{grid-column:1 / -1;color:var(--muted);font-size:13px}.stat.hit .icon,.stat.hit .stat-n{color:var(--teal)}.stat.off .icon,.stat.off .stat-n{color:var(--blue)}.stat.wrong .icon,.stat.wrong .stat-n{color:var(--amber)}.stat.missed .icon,.stat.missed .stat-n{color:var(--gray)}.stat.missed .stat-n{color:#9aa1ab}.tech-row{display:flex;flex-wrap:wrap;gap:8px;min-height:0;overflow-y:auto}.tech-frac{margin-left:6px;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}.tech-count.all{border-color:#3fbf9f80;background:#3fbf9f1a}.approx{color:var(--muted);margin-right:2px}.results-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:4px}.results-actions .btn-primary{min-width:150px}.key-hint{min-width:0;margin-left:4px;padding:2px 6px;border-radius:5px;border:1px solid rgba(12,21,18,.35);border-bottom-width:2px;background:#0c15121f;color:var(--teal-ink);font-size:12px;font-weight:650}.flash-up{animation:flash-up 1.2s ease-out}.flash-down{animation:flash-down 1.2s ease-out}@keyframes flash-up{0%{color:var(--teal-ink);background:var(--teal)}to{color:inherit;background:transparent}}@keyframes flash-down{0%{background:var(--raise)}to{background:transparent}}.input-on{display:inline-flex;align-items:center;gap:10px;color:var(--teal)}.save-box{display:flex;align-items:center}.count-badge{position:absolute;top:1px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--teal);color:var(--teal-ink);font-size:12px;font-weight:750;line-height:19px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}.count-badge.bump{animation:bump .6s ease-out}@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.55);box-shadow:0 0 0 6px #3fbf9f40}to{transform:scale(1)}}.drawer{position:absolute;top:56px;right:0;bottom:0;width:min(440px,100%);background:var(--panel);border-left:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;flex-direction:column;z-index:1300;animation:slide-in .16s ease-out}@keyframes slide-in{0%{transform:translate(24px);opacity:0}}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 20px}.drawer-head h2{margin:0;font-size:18px;font-weight:650}.drawer-body{flex:1;overflow-y:auto;padding:4px 20px 24px;display:flex;flex-direction:column;gap:4px}.drawer-body hr{width:100%;border:0;border-top:1px solid var(--line);margin:8px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px}.row-label{flex:none;color:var(--text);font-weight:500}.row-stack{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;flex:1}.row-stack .select{max-width:230px;width:100%}.slider-row input[type=range]{flex:1}.latency-row{flex-wrap:wrap;row-gap:4px;padding-bottom:6px}.latency-row input[type=range]{min-width:140px}.latency-row>.btn{margin-left:auto}.row-value{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.toggle-row{cursor:pointer}.sub-rows{padding-left:16px;border-left:2px solid var(--line)}.backdrop{position:absolute;inset:0;background:#080a0ca8;display:grid;place-items:center;z-index:1400;animation:fade-in .15s ease-out}@keyframes fade-in{0%{opacity:0}}.modal{width:min(760px,calc(100% - 32px));max-height:calc(100% - 64px);display:flex;flex-direction:column;overflow:hidden}.modal .drawer-head{padding:14px 14px 6px 24px}.keys{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:8px 24px 26px;align-items:center}.keys dt,.keys dd{margin:0}.keys dt{text-align:right}kbd{display:inline-block;min-width:34px;padding:5px 10px;border-radius:7px;background:var(--raise);border:1px solid var(--line-2);border-bottom-width:3px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;text-align:center}.symbols-body{overflow-y:auto;padding:0 24px 24px}.symbols-body h3{margin:14px 0 10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.sym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.sym-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);font-size:14px;text-align:center}.sym-lg{width:72px;height:42px;color:var(--text)}.hw-sym{width:120px;height:76px}.sym-pair{display:inline-flex;align-items:center;gap:4px}.sym-pair .sym-motion{color:var(--blue);border-left:1px solid var(--line-2);padding-left:4px}.popover{position:absolute;transform:translate(-50%,calc(-100% - 12px));display:flex;gap:8px;padding:10px;border-radius:12px;background:var(--raise);border:1px solid var(--line-2);box-shadow:var(--shadow);z-index:1250}.popover:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;background:var(--raise);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:rotate(45deg)}.pop-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px;font-weight:600;font-size:14px}.takes{display:flex;flex-direction:column}.takes>.spinner,.takes>.error-chip{align-self:center;margin-top:24px}.empty{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);margin-top:32px}.takes-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.takes-table th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 4px}.takes-table td{padding:4px;border-top:1px solid var(--line);height:48px}.take-score{font-weight:700;font-size:17px}.take-date,.take-bars{color:var(--muted);font-size:13px;white-space:nowrap}.take-bars{white-space:normal}.takes-table tr.playing td{background:#3fbf9f14}.takes-table tr.playing .btn-icon{color:var(--teal)}.heard-check{color:var(--teal);display:inline-flex}.heard-check .icon{width:26px;height:26px}.cal-dots{display:flex;gap:12px}.cal-dot{width:26px;height:26px;border-radius:50%;border:3px solid var(--line-2);transition:background .1s,border-color .1s}.cal-dot.played{border-color:var(--muted)}.cal-dot.now{border-color:var(--text);animation:dot-now .45s ease-out}@keyframes dot-now{0%{box-shadow:0 0 #dfe4ea99;transform:scale(1.25)}to{box-shadow:0 0 0 10px #dfe4ea00;transform:scale(1)}}.cal-dot.heard{background:var(--teal);border-color:var(--teal)}.cal-dot.missed{border-style:dashed;border-color:var(--gray)}.strum-box{flex:none;display:grid;place-items:center;width:120px;height:90px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text)}.strum-glyph{width:96px;height:72px}.strum-box.pulse{animation:strum-pulse .42s ease-out}@keyframes strum-pulse{0%{color:var(--teal-ink);background:var(--teal);border-color:var(--teal);transform:scale(1.06)}to{transform:scale(1)}}.allow-mic{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 10px;border-radius:10px;background:#c9a35b1a;border:1px solid rgba(201,163,91,.35);color:var(--amber);font-weight:600;white-space:nowrap}.allow-mic:not(:has(.btn)){padding-right:12px}.allow-mic .btn{color:var(--text)}.allow-mic-glyph{display:inline-flex;align-items:center;gap:2px}.allow-mic .icon{width:18px;height:18px}.allow-arrow{animation:point 1.4s ease-in-out infinite}@keyframes point{0%,to{transform:translate(0)}50%{transform:translate(-3px,-3px)}}.allow-mic{cursor:default;user-select:none}.allow-mic.big{align-self:flex-start;gap:10px;padding:8px 16px 8px 12px;font-size:17px}.allow-mic.big .icon{width:24px;height:24px}.modal[data-testid=keys]{width:min(440px,calc(100% - 32px))}.strip{user-select:none;-webkit-user-select:none}.btn-xl{height:64px;padding:0 34px;font-size:20px;font-weight:700;border-radius:16px}.btn-xl .icon{width:26px;height:26px}.btn-primary.btn-xl{box-shadow:0 10px 34px #3fbf9f52}.back-btn{position:relative;z-index:1500;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px 0 10px;border-radius:12px;border:1px solid var(--line-2);background:#171b21d1;color:var(--text);font-size:15px;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s}.back-btn .icon{width:22px;height:22px}.back-btn:hover{background:var(--raise);border-color:#46505d}.songs{--glow: #3fbf9f;height:100%;display:grid;grid-template-rows:64px minmax(0,1fr);background:radial-gradient(ellipse 70% 60% at 18% 30%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 70%),var(--bg);transition:background .4s}.songs-top{display:flex;align-items:center;gap:10px;padding:0 28px}.songs-status{display:flex;align-items:center}.songs-body{display:grid;grid-template-columns:minmax(340px,36%) minmax(0,1fr);gap:36px;padding:8px 28px 0 36px;min-height:0}.feature{display:flex;flex-direction:column;gap:22px;padding:12px 0 28px;min-height:0}.feature-cover{width:min(100%,36vh,320px);aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px #0000008c;filter:brightness(.68) saturate(.8);flex:none}.cover{display:block;width:100%;height:100%}.feature-info{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}.feature-title{margin:0;font-size:34px;line-height:1.1;font-weight:780;letter-spacing:-.015em}.feature-artist{color:var(--muted);font-size:18px}.feature-info .btn-xl{margin-top:12px;min-width:220px}.song-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}.song-best,.song-date{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}.song-best{color:var(--text);font-weight:700}.song-progress{display:inline-flex;align-items:center;gap:6px}.progress-meter{position:relative;width:46px;height:6px;border-radius:3px;background:#ffffff1f;overflow:hidden}.progress-meter-fill{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--teal)}.song-meta .tag{font-size:12px;font-weight:500;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}.grid-scroll{overflow-y:auto;min-height:0;padding:12px 8px 40px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 20px}.song-grid>.spinner,.song-grid>.error-chip{grid-column:1 / -1;justify-self:center;margin-top:60px}.song-tile{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;outline:none;min-width:0;border-radius:16px;padding:6px;transition:transform .16s ease-out,background .16s}.tile-cover{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;margin-bottom:6px;box-shadow:0 10px 26px #00000059;transition:box-shadow .16s}.tile-play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--teal-ink);opacity:0;transform:scale(.8);transition:opacity .16s,transform .16s}.tile-play .icon{width:22px;height:22px;margin-left:2px}.tile-title{font-weight:680;font-size:15px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tile-artist{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-tile .song-meta{font-size:13px;gap:10px;margin-top:2px}.song-tile .level-label{margin-left:4px;font-size:12px}.song-tile.selected{transform:translateY(-4px);background:#ffffff0a}.song-tile.selected .tile-cover{box-shadow:0 0 0 3px var(--teal),0 18px 40px #00000080}.song-tile.selected .tile-play{opacity:1;transform:none}.song-tile.fresh .tile-title:after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--teal);vertical-align:middle}.game{position:relative;height:100%;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 80% 70% at 50% 62%,#161b21,var(--bg) 72%);user-select:none}.highway-host{position:absolute;inset:0;z-index:0}.view-tab .highway-host{display:none}.tab-host{position:absolute;inset:97px 0 92px;display:flex;flex-direction:column;z-index:0;background:var(--bg)}.view-highway .tab-host{visibility:hidden;pointer-events:none;z-index:-1}.tab-host .strip{border-top:1px solid var(--line)}.tab-area{position:relative;flex:1;min-height:0}.stage-status{position:absolute;inset:0;display:grid;place-items:center;z-index:6;background:var(--bg)}.stage-problem{display:flex;flex-direction:column;align-items:center;gap:20px}.game-overlays{position:absolute;inset:0;z-index:8;pointer-events:none}.game-overlays>*{pointer-events:auto}.game .drawer{top:0}.hud{position:absolute;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;pointer-events:none}.hud button,.hud .progress,.hud .hud-input-slot,.hud .heard,.hud .save-box{pointer-events:auto}.hud-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;padding:16px 24px 30px;background:linear-gradient(to bottom,#111418f2,#111418bf 62%,#11141800)}.view-tab .hud-top{background:var(--panel);padding-bottom:16px;border-bottom:1px solid var(--line)}.hud-left{display:flex;align-items:center;gap:10px}.game.overlay-setup .pause-btn,.game.overlay-results .pause-btn,.game.has-problem .pause-btn{visibility:hidden}.pause-btn{position:relative;z-index:9;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line-2);background:#171b21d1;color:var(--text);cursor:pointer;transition:background .15s}.pause-btn .icon{width:22px;height:22px}.pause-btn:hover{background:var(--raise)}.hud-mid{display:flex;flex-direction:column;gap:8px;min-width:0}.hud-title{display:flex;justify-content:center;gap:10px;min-height:18px;line-height:18px;text-align:center;font-size:14px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-title-text{overflow:hidden;text-overflow:ellipsis}.hud-section{color:var(--text)}.hud-section:empty{display:none}.hud-right{display:flex;align-items:flex-start;justify-content:flex-end;gap:16px;width:316px}.hud-stat{display:flex;flex-direction:column;align-items:flex-end;width:94px;flex:none}.hud-stat .stat-n{font-size:30px;font-weight:780;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.hud-stat.is-empty .stat-n{color:var(--dim)}.stat-cap{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.hud-stat[data-testid=hud-accuracy] .stat-n{color:var(--teal)}.hud-stat[data-testid=hud-accuracy].is-empty .stat-n{color:var(--dim)}.hud-stat.hot .stat-n{color:#fff;text-shadow:0 0 18px rgba(63,191,159,.7)}.hud-stat.bump .stat-n{animation:streak-bump .5s ease-out}@keyframes streak-bump{30%{transform:scale(1.35)}}.hud.not-ready .hud-right,.hud.not-ready .progress{opacity:.4}.progress{position:relative;height:38px;cursor:pointer;touch-action:none}.progress.disabled{cursor:default}.progress-track{position:absolute;inset:0}.progress-section{position:absolute;top:0;bottom:0;overflow:hidden}.progress-section:before,.progress-fill{content:"";position:absolute;inset:0 1px;border-radius:7px}.progress-section:before{background:#ffffff12;transition:background .15s}.progress:not(.disabled) .progress-section:hover:before{background:#ffffff21}.progress-fill{background:#3fbf9f42;transform-origin:left center;transform:scaleX(0)}.progress-name{position:relative;display:block;padding:0 10px;line-height:38px;font-size:13px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden;text-shadow:0 1px 3px rgba(17,20,24,.9)}.progress-name.no-fit{visibility:hidden}.progress-section.current .progress-name{color:var(--text)}.progress-head{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;border-radius:2px;background:linear-gradient(to bottom,#fff 0 11px,#ffffff59 11px calc(100% - 11px),#fff calc(100% - 11px));box-shadow:0 0 10px #ffffff73;pointer-events:none}.progress-loop,.progress-drag{position:absolute;top:-4px;bottom:-4px;border-radius:9px;pointer-events:none}.progress-loop{border:2px solid var(--teal);background:#3fbf9f24}.progress-loop-x{position:absolute;top:calc(100% + 3px);right:-12px;width:24px;height:24px;border-radius:50%;border:2px solid var(--teal);background:#12302b;color:var(--text);display:grid;place-items:center;padding:0;cursor:pointer;pointer-events:auto}.progress-loop-x .icon{width:14px;height:14px}.progress-loop-x:hover{background:var(--teal);color:var(--teal-ink)}.progress-drag{border:2px dashed var(--teal-hi);background:#3fbf9f1a}.hud-notices{display:flex;justify-content:flex-end;gap:12px;min-height:0;padding:0 24px;margin-top:-14px}.replay-badge,.pass-banner{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 16px;border-radius:14px;background:#171b21e6;border:1px solid var(--line-2);font-weight:650;pointer-events:auto}.replay-badge .icon{color:var(--blue)}.pass-banner{padding:0 18px;border-color:#3fbf9f99}.pass-banner .icon{color:var(--teal)}.pass-score{font-size:24px;font-weight:780;font-variant-numeric:tabular-nums}.pass-banner.show{animation:drop-in .3s ease-out}@keyframes drop-in{0%{transform:translateY(-10px);opacity:0}}.hud-stage{position:relative;min-height:0}.hud-center{display:grid;place-items:center;justify-self:center}.hud-center>*{grid-area:1 / 1}.play-disc{pointer-events:auto;height:78px;min-width:228px;padding:0 34px 0 26px;border-radius:39px;border:none;display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--teal);color:var(--teal-ink);cursor:pointer;box-shadow:0 0 0 8px #3fbf9f24,0 16px 50px #3fbf9f66;transition:transform .12s,background .15s}.play-disc:hover:not(:disabled){background:var(--teal-hi);transform:scale(1.04)}.play-disc:disabled{opacity:.35;cursor:default}.play-disc .icon{width:44px;height:44px}.play-disc .key-hint{margin:0}.count-big{display:flex;gap:22px;padding:18px 28px;border-radius:22px;background:#111418b8}.count-dot{width:38px;height:38px;border-radius:50%;border:4px solid rgba(255,255,255,.22);transition:background .08s,border-color .08s}.count-dot.on{background:var(--teal);border-color:var(--teal)}.count-dot.now{animation:count-now .4s ease-out}@keyframes count-now{0%{transform:scale(1.35);box-shadow:0 0 #3fbf9f99}to{box-shadow:0 0 0 14px #3fbf9f00}}.hud-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:24px;padding:28px 24px 18px;background:linear-gradient(to top,#111418e6,#11141800)}.hud-bottom>.hud-level-wrap{justify-self:end}.view-tab .hud-bottom{background:var(--panel);border-top:1px solid var(--line);padding-top:18px;height:92px;align-items:center}.hud-input{display:flex;align-items:center;gap:14px}.hud-input-slot{display:flex;align-items:center}.hud-input .input-on .meter{width:110px}.hud .heard{background:#1d2229e0}.hud-level-wrap{position:relative;display:flex;flex-direction:column;align-items:flex-end}.hud-level{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.hud-dots{display:flex;gap:7px}.hud-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.28)}.hud-dot.on{background:var(--teal);border-color:var(--teal)}.level-pop{position:relative;z-index:7;pointer-events:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 4px;color:var(--text);font-size:18px;font-weight:700;white-space:nowrap;text-shadow:0 1px 10px rgba(17,20,24,.95),0 0 3px rgba(17,20,24,.95);filter:drop-shadow(0 2px 10px rgba(17,20,24,.9))}.level-pop .icon{color:var(--teal)}.level-pop.down .icon{color:var(--blue)}.level-pop .hud-dots{gap:8px}.level-pop .hud-dot{width:16px;height:16px}.hud-dot.new{animation:dot-fill .6s ease-out .15s both}@keyframes dot-fill{0%{background:transparent;transform:scale(1.6);box-shadow:0 0 #3fbf9fcc}to{box-shadow:0 0 0 10px #3fbf9f00}}.level-pop.show{animation:pop-up .35s ease-out}@keyframes pop-up{0%{transform:translateY(-10px) scale(.9);opacity:0}}.hud-level.landed .hud-dots{animation:landed .5s ease-out}@keyframes landed{30%{transform:scale(1.25)}}.highway-host{transition:filter .35s ease-out}.game.finished .highway-host{filter:brightness(.45) saturate(.7)}.game.finished .hud-center{visibility:hidden}.gem-popover{position:fixed;z-index:9;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#090b0ebd;backdrop-filter:blur(6px);animation:fade-in .15s ease-out;overflow-y:auto}.menu{width:min(440px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px;padding:24px 0}.menu-mark{align-self:center;color:var(--muted);margin-bottom:6px}.menu-mark .icon{width:34px;height:34px}.menu-btn{display:flex;align-items:center;gap:14px;height:62px;padding:0 22px;border-radius:16px;border:2px solid transparent;background:#ffffff0e;color:var(--text);font-size:19px;font-weight:650;cursor:pointer;transition:background .12s,border-color .12s,transform .12s;text-align:left}.menu-btn .icon{width:24px;height:24px;color:var(--muted)}.menu-btn:hover,.menu-btn.selected{background:#ffffff1a}.menu-btn.selected{border-color:#ffffff8c}.menu-btn.primary{height:76px;font-size:24px;font-weight:750;background:var(--teal);color:var(--teal-ink);box-shadow:0 12px 36px #3fbf9f4d}.menu-btn.primary .icon{color:var(--teal-ink);width:28px;height:28px}.menu-btn.primary:hover,.menu-btn.primary.selected{background:var(--teal-hi)}.menu-btn.primary.selected{border-color:#fff}.menu-btn.on .icon{color:var(--teal)}.menu-label{flex:1}.menu-speed{cursor:default}.menu-speed .menu-label{flex:1}.menu-step{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);display:grid;place-items:center;cursor:pointer}.menu-step:hover{background:var(--raise)}.menu-step .icon{color:var(--text)}.menu-speed-value{min-width:72px;text-align:center;font-size:22px;font-weight:780;font-variant-numeric:tabular-nums}.menu-row{display:flex;justify-content:center;gap:8px;margin-top:8px}.menu-small{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:12px;border:2px solid transparent;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}.menu-small:hover,.menu-small.selected{color:var(--text);background:#ffffff12}.menu-small.selected{border-color:#ffffff73}.menu-small .count-badge{position:static;margin-left:2px}.results-screen{width:min(780px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px 0}.results-head{display:flex;flex-direction:column;align-items:center}.results-screen .results-score{position:relative;font-size:128px;font-weight:800;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#e8edf2}.results-screen .results-score.counting{color:transparent;text-shadow:none}.results-screen .results-score.counting:after{content:attr(data-count);position:absolute;inset:0;text-align:center;color:#e8edf2}.best-chip{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:34px;padding:0 14px 0 10px;border-radius:17px;background:var(--teal);color:var(--teal-ink);font-weight:750;font-size:15px;opacity:0;transform:scale(.8);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}.best-chip.show{opacity:1;transform:none}.best-chip .icon{width:18px;height:18px}.gains{display:flex;gap:12px;align-items:center;height:38px}.gain-dots{display:flex;gap:5px}.results-cap{margin-top:6px}.results-cap,.fact-cap{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.results-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 40px}.fact{display:flex;flex-direction:column;align-items:center;gap:2px}.fact-n{font-size:32px;font-weight:760;font-variant-numeric:tabular-nums}.results-screen .stats{gap:28px;padding:14px 24px;border-radius:16px;background:#ffffff0a}.results-screen .tech-row{justify-content:center;max-height:120px}.results-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}.results-screen .results-actions .menu-btn{justify-content:center}.results-screen .menu-btn.primary{min-width:230px}.results-screen .menu-btn.primary .key-hint{font-size:13px}.menu-btn.secondary .menu-label{flex:none}.setup-screen{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(ellipse 60% 55% at 50% 48%,#172029,var(--bg) 75%);animation:fade-in .15s ease-out}.setup-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 24px}.setup-skip{justify-self:end}.step-chips{display:flex;align-items:center;gap:10px}.step-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 8px;border-radius:19px;border:1px solid var(--line-2);color:var(--muted);font-weight:650}.step-chip .chip-n,.step-chip .icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px}.step-chip .chip-n{border:2px solid var(--line-2)}.step-chip.on{color:var(--text);border-color:var(--text)}.step-chip.done .icon{background:var(--teal);color:var(--teal-ink);padding:4px}.step-line{width:40px;height:2px;background:var(--line-2)}.setup-body{display:grid;place-items:center;overflow-y:auto;padding-bottom:40px}.setup-step{display:flex;flex-direction:column;align-items:center;gap:26px}.setup-glyph .icon{width:84px;height:84px;color:var(--muted);stroke-width:1.4}.tuner-panel{position:relative;display:flex;flex-direction:column;align-items:center}.tuner-gauge{width:340px;height:190px;overflow:visible}.tuner-gauge .arc{fill:none;stroke:#ffffff1f;stroke-width:3}.tuner-gauge .tick{stroke:#ffffff4d;stroke-width:2;stroke-linecap:round}.tuner-gauge .tick-center{stroke:var(--teal);stroke-width:3.5;stroke-linecap:round}.tuner-gauge .needle{stroke:var(--blue);fill:var(--blue);stroke-width:3.5;stroke-linecap:round;transition:transform .09s linear}.tuner-gauge.in-tune .needle{stroke:var(--teal);fill:var(--teal)}.tuner-gauge.idle .needle{stroke:var(--dim);fill:var(--dim)}.tuner-read{position:relative;display:flex;align-items:center;margin-top:6px}.tuner-note{font-size:96px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.tuner-note.is-empty{color:var(--dim)}.tuner-read .heard-check{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:14px}.tuner-read .heard-check .icon{width:40px;height:40px}.tuner-cents{margin-top:6px;min-height:22px;color:var(--muted);font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}.tuner-meter{display:flex;align-items:center;gap:12px;color:var(--teal)}.tuner-meter .meter-lg{width:260px}.setup-input{display:flex;align-items:center;gap:18px}.setup-input .select{max-width:320px}.setup-input .row{gap:10px}.setup-screen .allow-mic.big{align-self:center}.setup-title{font-size:30px;font-weight:760}.setup-screen .strum-box{width:180px;height:136px;border-radius:20px}.setup-screen .strum-glyph{width:110px;height:84px}.setup-screen .cal-dots{gap:18px}.setup-screen .cal-dot{width:64px;height:64px;border-width:4px;display:grid;place-items:center;color:var(--teal-ink)}.setup-screen .cal-dot .icon{width:30px;height:30px;stroke-width:3}.setup-screen .offset{font-size:32px;font-weight:760;font-variant-numeric:tabular-nums}.setup-actions{display:flex;align-items:center;gap:14px}@media (max-width: 1180px){.hud-right{gap:12px;width:270px}.hud-stat{width:82px}.hud-stat .stat-n{font-size:26px}.songs-body{grid-template-columns:minmax(300px,34%) minmax(0,1fr);gap:24px}.feature-title{font-size:28px}}
