:root,:root[data-theme=dark]{--bg: #0b1120;--surface: #0f172a;--surface-raised: #1c2942;--surface-sunken: #080d18;--line: #24334d;--line-strong: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--text-on-accent: #ffffff;--accent: #1c64f2;--accent-hover: #3b7bf5;--accent-quiet: #17233d;--accent-text: #93b4fb;--good: #0e9f6e;--warn: #f59e0b;--warn-bg: #3a2a08;--bad: #f05252;--bad-bg: #3a1414;color-scheme:dark}:root[data-theme=light]{--bg: #f8fafc;--surface: #ffffff;--surface-raised: #ffffff;--surface-sunken: #e2e8f0;--line: #e2e8f0;--line-strong: #cbd5e1;--text: #1e293b;--text-muted: #64748b;--text-on-accent: #ffffff;--accent: #1c64f2;--accent-hover: #1e429f;--accent-quiet: #e1effe;--accent-text: #1e429f;--good: #057a55;--warn: #b45309;--warn-bg: #fdf6b2;--bad: #c81e1e;--bad-bg: #fde8e8;color-scheme:light}:root{--tap: 88px;--radius: 8px;--radius-sm: 6px;--radius-panel: 14px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body,#root{height:100%;margin:0;overscroll-behavior:none;overflow:hidden}body{background:var(--bg);color:var(--text);font:16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}input{-webkit-user-select:text;user-select:text;font:inherit}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}.app{display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app__body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:16px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:16px;flex:none}.panel--flex{flex:1;min-height:0;display:flex;flex-direction:column}.panel--plain{background:none;border:none;padding:0}.panel__title{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.nowbar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}.nowbar__song{flex:1;min-width:0}.nowbar .transport{gap:10px}.nowbar .transport__btn{min-height:64px;min-width:64px;padding:0 18px}.nowbar .transport__btn span{font-size:14px}@media (max-width: 560px){.nowbar .transport__btn span{display:none}.nowbar .transport__btn{min-width:64px;padding:0}}.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:68px;border-radius:var(--radius);color:var(--text-muted);font-size:15px;font-weight:600}.tab svg{width:24px;height:24px;fill:currentColor}.tab[aria-selected=true]{background:var(--accent-quiet);color:var(--accent-text)}.tab:active{background:var(--surface-raised)}.tab__count{font-variant-numeric:tabular-nums}.header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}.header__mark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;font-size:20px}.header__mark svg{width:28px;height:28px}.header__wordmark{height:64px;width:auto;display:block}.header__spacer{flex:1}.header__help{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--text-muted);font-size:15px}.header__help:active{background:var(--surface-raised)}.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:600;background:var(--surface-raised);border-bottom:1px solid var(--line)}.banner--warn{background:var(--warn-bg);color:var(--warn)}.banner--bad{background:var(--bad-bg);color:var(--bad)}.banner__dot{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.25}}.banner__action{margin-left:auto;min-height:48px;padding:0 16px;border-radius:12px;border:1px solid currentColor;font-weight:700}.now{display:flex;flex-direction:column;gap:6px}.now__title{margin:0;font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.1;overflow-wrap:anywhere}.now__artist{margin:0;font-size:clamp(17px,2.2vw,22px);color:var(--text-muted)}.now__singer{margin:8px 0 0;font-size:18px;color:var(--accent);font-weight:700}.now__idle{color:var(--text-muted);font-size:22px;padding:12px 0}.progress{margin-top:14px;height:10px;border-radius:999px;background:var(--surface-raised);overflow:hidden}.progress__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .4s linear}.progress__times{display:flex;justify-content:space-between;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:14px}.transport{display:flex;gap:16px;align-items:stretch}.transport__btn{flex:1;min-height:var(--tap);min-width:var(--tap);border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:16px;font-weight:700}.transport__btn svg{width:40px;height:40px;fill:currentColor}.transport__btn--primary{flex:1.6;background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.transport__btn:not(:disabled):active{transform:scale(.97)}.stepper{display:flex;align-items:center;gap:12px;margin-bottom:12px}.stepper:last-child{margin-bottom:0}.stepper__label{width:78px;flex:none;font-weight:700;font-size:17px}.stepper__btn{width:var(--tap);height:var(--tap);flex:none;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);font-size:34px;font-weight:700;line-height:1}.stepper__btn:not(:disabled):active{background:var(--accent);color:var(--text-on-accent)}.stepper__value{flex:1;text-align:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}.stepper__reset{min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line);color:var(--text-muted);font-weight:700}.slider{margin-bottom:18px}.slider:last-child{margin-bottom:0}.slider__head{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px;font-size:17px}.slider__value{color:var(--text-muted);font-variant-numeric:tabular-nums}.slider input[type=range]{width:100%;height:44px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.slider input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line)}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;margin-top:-16px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.slider input[type=range]::-moz-range-track{height:14px;border-radius:999px;background:var(--surface-raised)}.slider input[type=range]::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}.list__empty{color:var(--text-muted);padding:24px 4px;font-size:17px}.row{display:flex;align-items:center;gap:12px;padding:12px;min-height:76px;border-radius:14px;background:var(--surface-raised);border:1px solid var(--line);margin-bottom:10px;position:relative;touch-action:pan-y}.row--dragging{border-color:var(--accent);opacity:.85;z-index:2}.row--pending{opacity:.5}.row__grip{width:44px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:22px;cursor:grab;touch-action:none}.row__text{flex:1;min-width:0}.row__title{font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__meta{color:var(--text-muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__singer{color:var(--accent)}.row__actions{display:flex;gap:8px;flex:none}.row__btn{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:20px;font-weight:700}.row__btn--danger:active{background:var(--bad);color:var(--text-on-accent)}.row__pending{color:var(--warn);font-size:14px;font-weight:700}.search__input{width:100%;min-height:64px;padding:0 18px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line);color:var(--text);font-size:20px;margin-bottom:12px}.search__input::placeholder{color:var(--text-muted)}.search__status{color:var(--text-muted);padding:12px 4px;font-size:16px}.row--tappable:active{border-color:var(--accent)}.toasts{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:40;pointer-events:none}.toast{padding:14px 22px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);font-weight:700;font-size:17px;box-shadow:0 10px 30px #00000073}.toast--error{border-color:var(--bad);color:var(--bad)}.topbar .header__wordmark{height:44px}.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}.topbar__song{flex:1;min-width:0;padding-left:6px}.topbar__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:700}.topbar__line{display:flex;align-items:baseline;gap:10px;min-width:0}.topbar__title{font-size:20px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar__artist{font-size:16px;color:var(--text-muted);white-space:nowrap}.topbar__singer{font-size:15px;font-weight:700;color:var(--accent-text);white-space:nowrap}.topbar__idle{font-size:17px;color:var(--text-muted)}.topbar__help{flex:none;min-height:56px;padding:0 16px;border-radius:999px;border:1px solid var(--line);color:var(--text-muted);font-size:15px}.topbar__help:active{background:var(--surface-raised)}.iconbtn{flex:none;width:64px;height:64px;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);color:var(--text);display:flex;align-items:center;justify-content:center}.iconbtn svg{width:28px;height:28px;fill:currentColor}.iconbtn--primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}.iconbtn:active:not(:disabled){background:var(--line-strong)}.iconbtn--primary:active:not(:disabled){background:var(--accent-hover)}.transport{display:flex;align-items:center;gap:10px;flex:none}.locked--quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.finder{display:flex;flex-direction:column;min-height:0;flex:1;gap:10px}.finder__field{display:flex;align-items:center;gap:14px;min-height:76px;padding:0 20px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line-strong);flex:none}.finder__icon{width:28px;height:28px;fill:var(--text-muted);flex:none}.finder__field .search__input{flex:1;min-width:0;background:none;border:none;padding:0;font-size:22px;color:var(--text);min-height:76px}.finder__field .search__input:focus{outline:none}.finder__field .search__input::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:none}.finder__clear{flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text-muted);font-size:18px}.finder__count{margin:0;padding:0 2px;font-size:14px;color:var(--text-muted);flex:none}.hit{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 12px 12px 18px;min-height:88px;border-radius:14px;background:var(--surface-raised);border:1px solid var(--line);color:var(--text)}.hit:active:not(:disabled){background:var(--line-strong)}.hit__text{flex:1;min-width:0}.hit__title{display:block;font-size:20px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hit__artist{display:block;font-size:16px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hit__add{flex:none;width:72px;height:72px;border-radius:14px;background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;line-height:1}.hit--queued{background:var(--accent-quiet);border-color:var(--accent)}.hit__queued{flex:none;display:flex;align-items:center;padding:0 18px;height:72px;border-radius:14px;background:var(--surface);border:1px solid var(--accent);color:var(--accent-text);font-size:17px;font-weight:700;white-space:nowrap}.peek{flex:none;display:flex;align-items:center;gap:16px;width:100%;text-align:left;margin:0 16px;width:calc(100% - 32px);padding:14px 18px;border-radius:18px 18px 0 0;background:var(--accent-quiet);border:1px solid var(--accent);border-bottom:none;color:var(--text);box-shadow:0 -14px 34px #00000073}.peek__grip{flex:none;width:44px;height:5px;border-radius:999px;background:var(--accent-text);opacity:.5}.peek__text{flex:1;min-width:0}.peek__label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);font-weight:700}.peek__title{display:block;font-size:19px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peek__artist{font-weight:400;color:var(--text-muted)}.peek__action{flex:none;min-height:64px;display:flex;align-items:center;padding:0 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:17px;font-weight:700}.sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:var(--bg);display:flex;flex-direction:column}.sheet__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}.sheet__heading{flex:1;margin:0;text-align:center;font-size:20px;font-weight:800}.sheet__spacer{flex:none;width:96px}.sheet__body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:16px}.sheet__foot{margin:0;color:var(--text-muted);font-size:15px}.soundgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:16px;flex:none}.soundgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.soundgroup__title{margin:0;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.soundgroup__ask{margin:0;font-size:15px;color:var(--text-muted);text-align:right}.soundgroup__fine{display:flex;flex-direction:column;gap:4px}.keyrow{display:flex;align-items:center;gap:12px}.keyrow__value{flex:1;display:flex;flex-direction:column;align-items:center}.keyrow__unit{font-size:14px;color:var(--text-muted)}.bigbtn{flex:none;min-width:112px;min-height:88px;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bigbtn:active:not(:disabled){background:var(--line-strong)}.bigbtn__glyph{font-size:30px;font-weight:700;line-height:1}.bigbtn__caption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.presets{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}.preset{min-height:88px;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px}.preset[aria-pressed=true]{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent-text)}.preset__title{font-size:18px;font-weight:700}.preset__detail{font-size:13px;color:var(--text-muted)}.preset[aria-pressed=true] .preset__detail{color:var(--accent-text)}.app--notice{align-items:center;justify-content:center;padding:24px}.notice{max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:32px}.notice__title{margin:0 0 12px;font-size:28px;font-weight:800;line-height:1.25}.notice__body{margin:0 0 16px;color:var(--text-muted);font-size:17px;line-height:1.5}.notice__unit{margin:16px 0 0;font-size:16px;color:var(--text)}.notice__units{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px}.notice__units li{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.notice__link{display:block;min-height:32px;color:var(--accent-text);font-size:18px;font-weight:700;word-break:break-all}.notice__meta{display:block;margin-top:4px;color:var(--text-muted);font-size:15px}.notice code{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:2px 6px;font-size:15px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:color-mix(in srgb,var(--surface-sunken) 92%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px}.overlay__card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;max-width:520px;width:100%;text-align:center}.overlay__card--sheet{text-align:left;max-width:560px}.overlay__card--sheet .overlay__actions{margin-top:20px}.sheet__row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.sheet__text{flex:1;min-width:0}.sheet__label{font-size:18px;font-weight:700}.sheet__hint{margin:4px 0 0;color:var(--text-muted);font-size:15px;line-height:1.45}.segmented{display:flex;gap:4px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius)}.segmented__btn{min-height:52px;padding:0 18px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;color:var(--text)}.segmented__btn[aria-pressed=true]{background:var(--accent);color:var(--text-on-accent)}.overlay__title{margin:0 0 10px;font-size:28px;font-weight:800}.overlay__text{margin:0 0 22px;color:var(--text-muted);font-size:18px;line-height:1.5}.overlay__count{font-size:52px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:18px}.overlay__actions{display:flex;flex-direction:column;gap:12px}.btn{min-height:64px;padding:0 22px;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface-raised);font-size:18px;font-weight:700}.btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.field{width:100%;min-height:64px;padding:0 18px;border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--line-strong);color:var(--text);font-size:20px;margin-bottom:16px}.hint{color:var(--text-muted);font-size:14px;margin-top:10px}.locked{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:15px;padding:10px 0}.overlay__error{margin:-6px 0 16px;color:var(--bad);font-weight:700;font-size:16px}