:root{--screen:#f8f9fb;--surface:#fff;--ink:#1a1e28;--muted:#5b6273;--line:#dfe3ea;--accent:#2f4bd8;--accent-soft:#e3e8ff;--loop:#c98a00;--loop-soft:#fff1cc;--ok:#1f8a5b;--wave:#b9c1d3;--danger:#c0392b;--danger-soft:#fde8e6;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--screen:#161922;--surface:#1e222d;--ink:#e8ebf2;--muted:#9aa1b3;--line:#2c313d;--accent:#8296ff;--accent-soft:#252c4f;--loop:#f0c04a;--loop-soft:#3a3016;--ok:#52c38e;--wave:#3c4356;--danger:#ff8a7a;--danger-soft:#3d1f1c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--screen);color:var(--ink);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;margin:0;font-size:16px;line-height:1.45}button,input{font:inherit;color:inherit}button,input,label,a{touch-action:manipulation}button{cursor:pointer}h1,h2,h3,p{margin:0}.screen{max-width:560px;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 18px);flex-direction:column;gap:14px;margin:0 auto;display:flex}.i{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.ok{color:var(--ok)}.btn{background:var(--accent);color:var(--surface);text-align:center;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:700}.btn:disabled{opacity:.6;cursor:default}.btn.ghost{color:var(--accent);border:1.5px solid var(--line);background:0 0}.btn.small{border-radius:10px;padding:8px 12px;font-size:14px}.iconbtn{background:var(--surface);border:1px solid var(--line);width:42px;height:42px;color:var(--ink);border-radius:12px;place-items:center;display:grid}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.auth{gap:20px}.brand{flex-direction:column;gap:6px;padding-top:32px;display:flex}.mark{background:var(--accent);width:56px;height:56px;color:var(--surface);border-radius:16px;place-items:center;display:grid}.mark .i{width:30px;height:30px}.brand h1{letter-spacing:-.01em;margin-top:8px;font-size:30px;font-weight:800}.brand p{color:var(--muted)}.form{flex-direction:column;gap:14px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field>span{font-size:14px;font-weight:700}.field small{color:var(--muted);font-size:13px}.input{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;width:100%;padding:12px 14px;font-size:16px}.input:focus{border-color:var(--accent);outline:none}.check{align-items:center;gap:10px;font-size:15px;display:flex}.check input{width:20px;height:20px;accent-color:var(--accent);margin:0}.error{color:var(--danger);font-size:14px}.note{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:12px;align-items:flex-start;gap:10px;margin-top:auto;padding:12px;font-size:14px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.topbar h1{letter-spacing:-.01em;font-size:28px;font-weight:800}.sync{color:var(--ok);align-items:center;gap:6px;font-size:13px;display:flex}.sync.busy{color:var(--accent)}.sync .i{width:18px;height:18px}.notice{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:12px;grid-template-columns:auto 1fr;align-items:start;gap:8px 10px;padding:12px;font-size:14px;display:grid}.notice .btn{grid-column:2;justify-self:start}.notice.error{background:var(--danger-soft);color:var(--danger);border-color:#0000}.search{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:12px;align-items:center;gap:8px;padding:0 12px;display:flex}.search input{min-width:0;color:var(--ink);background:0 0;border:0;outline:none;flex:1;padding:11px 0;font-size:16px}.list{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:0;padding:0;list-style:none;overflow:hidden}.row{border:0;border-top:1px solid var(--line);text-align:left;background:0 0;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;width:100%;padding:11px 14px;display:grid}.list li:first-child .row{border-top:0}.row.playing{background:var(--accent-soft)}.row.playing .t{color:var(--accent)}.row .t{overflow-wrap:anywhere;min-width:0;font-weight:700}.row .m{color:var(--muted);grid-column:1;gap:8px;font-size:13px;display:flex}.row .speed{grid-area:1/2/span 2}.speed{font-family:var(--font-mono);background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:3px 8px;font-size:12px}.speed.normal{color:var(--muted);border:1px solid var(--line);background:0 0}.empty{color:var(--muted);text-align:center;padding:24px 0}.backdrop{z-index:10;background:#0a0c1473;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--screen);width:100%;max-width:560px;padding:20px 18px calc(env(safe-area-inset-bottom) + 18px);border-radius:20px 20px 0 0;flex-direction:column;gap:14px;display:flex}.who{font-weight:700}.menu{background:var(--surface);border:1px solid var(--line);border-radius:14px;flex-direction:column;display:flex;overflow:hidden}.menu-item{border:0;border-top:1px solid var(--line);text-align:left;background:0 0;align-items:center;gap:12px;padding:14px;font-size:16px;display:flex}.menu-item:first-child{border-top:0}.version{color:var(--muted);background:0 0;border:0;align-self:center;padding:4px;font-size:13px}.update{z-index:5;padding:calc(env(safe-area-inset-top) + 8px) 18px 8px;background:var(--accent-soft);color:var(--accent);justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:700;display:flex;position:sticky;top:0}.debug-link{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:4px 12px;font-size:13px;position:fixed}.debug{z-index:20;background:var(--screen);padding:calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 24px);flex-direction:column;gap:12px;display:flex;position:fixed;inset:0;overflow-y:auto}.debug h2{font-size:24px;font-weight:800}.h4{font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500}.debug-status{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0;padding:4px 12px;font-size:14px}.debug-status div{border-top:1px solid var(--line);justify-content:space-between;gap:12px;padding:6px 0;display:flex}.debug-status div:first-child{border-top:0}.debug-status dt{color:var(--muted)}.debug-status dd{text-align:right;overflow-wrap:anywhere;margin:0}.debug-actions{gap:8px;display:flex}.debug-log{overflow-wrap:anywhere;flex-direction:column;gap:4px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.debug-log .mono{color:var(--muted)}.debug-log .error{color:var(--danger)}.mini{bottom:calc(env(safe-area-inset-bottom) + 12px);background:var(--ink);color:var(--screen);border-radius:14px;align-items:center;gap:6px;margin-top:auto;padding:6px 10px 6px 4px;display:flex;position:sticky;box-shadow:0 8px 24px #0a0c1440}.mini-open{min-width:0;color:inherit;text-align:left;background:0 0;border:0;flex-direction:column;flex:1;padding:6px 8px;font-size:13px;display:flex}.mini-open b{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.mini-play{background:var(--screen);width:40px;height:40px;color:var(--ink);border:0;border-radius:50%;flex:none;place-items:center;display:grid}.mini-play:disabled{opacity:.5}.back{color:var(--accent);background:0 0;border:0;align-items:center;gap:2px;margin-left:-4px;padding:8px 8px 8px 0;font-weight:700;display:flex}.songhead{flex-direction:column;gap:2px;display:flex}.songhead h1{letter-spacing:-.01em;overflow-wrap:anywhere;font-size:26px;font-weight:800;line-height:1.15}.songhead span{color:var(--muted);font-size:14px}.now{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.now b{overflow-wrap:anywhere;font-size:20px}.now span{color:var(--muted);flex:none;font-size:13px}.wavebox{flex-direction:column;gap:6px;display:flex}.wave-area{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:6px;flex-direction:column;gap:6px;display:flex}.wave{height:64px;position:relative}.bars{width:100%;height:calc(100% - 6px);fill:var(--wave);position:absolute;inset:3px 0}.bars.past{fill:var(--accent);clip-path:inset(0 100% 0 0)}.loopzone{background:var(--loop-soft);border-left:2px solid var(--loop);border-right:2px solid var(--loop);border-radius:4px;position:absolute;top:0;bottom:0}.playhead{background:var(--ink);border-radius:2px;width:2px;margin-left:-1px;position:absolute;top:-3px;bottom:-3px;left:0}.bands{height:22px;position:relative}.band{padding:0 1px;position:absolute;top:0;bottom:0}.band span{background:var(--line);height:100%;color:var(--muted);white-space:nowrap;border-radius:4px;place-items:center;font-size:10px;display:grid;overflow:hidden}.band.cur span{background:var(--accent-soft);color:var(--accent);font-weight:700}.band.looped span{background:var(--loop);color:var(--surface);font-weight:700}.times{color:var(--muted);justify-content:space-between;font-size:13px;display:flex}.transport{justify-content:space-between;align-items:center;padding-inline:4px;display:flex}.tbtn{width:52px;height:52px;color:var(--ink);background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.tbtn:disabled{opacity:.35;cursor:default}.tbtn .i{width:24px;height:24px}.tbtn .skip{flex-direction:column;align-items:center;display:flex}.tbtn small{font-family:var(--font-mono);margin-top:-2px;font-size:10px}.tbtn.big{background:var(--accent);width:72px;height:72px;color:var(--surface)}.tbtn.big .i{width:30px;height:30px}.loopon{background:var(--loop-soft);color:var(--loop);border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px;font-size:14px;font-weight:700;display:flex}.toggle{background:var(--surface);border:1px solid var(--line);cursor:pointer;border-radius:14px;align-items:center;gap:10px;padding:10px 14px;font-size:15px;display:flex}.toggle>span{flex:1}.toggle .i{color:var(--muted)}.toggle input{appearance:none;background:var(--line);cursor:pointer;border-radius:13px;flex:none;width:44px;height:26px;margin:0;transition:background .15s;position:relative}.toggle input:after{content:"";background:var(--surface);border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0a0c144d}.toggle input:checked{background:var(--accent)}.toggle input:checked:after{transform:translate(18px)}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:14px;padding:14px;display:flex}.speedrow{justify-content:space-between;align-items:center;gap:10px;display:flex}.speedrow .lbl{font-size:15px;font-weight:700}.speedrow .lbl small{color:var(--muted);font-size:13px;font-weight:400;display:block}.stepper{align-items:center;gap:8px;display:flex}.step{border:1.5px solid var(--line);background:0 0;border-radius:10px;place-items:center;width:42px;height:42px;font-size:22px;font-weight:700;line-height:1;display:grid}.step:disabled{opacity:.35;cursor:default}.stepper .v{text-align:center;font-variant-numeric:tabular-nums;min-width:76px;font-size:26px;font-weight:800}.slider{--fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0}.slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));border-radius:3px;height:6px}.slider::-moz-range-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));border-radius:3px;height:6px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface);border:3px solid var(--accent);border-radius:50%;width:24px;height:24px;margin-top:-9px}.slider::-moz-range-thumb{background:var(--surface);border:3px solid var(--accent);border-radius:50%;width:18px;height:18px}.presets{gap:6px;display:flex}.preset{border:1px solid var(--line);min-width:0;color:var(--muted);font-family:var(--font-mono);background:0 0;border-radius:8px;flex:1;padding:8px 0;font-size:13px}.preset.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}.player button:disabled{cursor:default}.sections{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sec{border-top:1px solid var(--line);border-radius:10px;align-items:center;display:flex}.sec:first-child,.sec.cur,.sec.cur+.sec,.sec.looped,.sec.looped+.sec{border-top-color:#0000}.sec-jump{text-align:left;background:0 0;border:0;flex:1;grid-template-columns:48px 1fr;align-items:center;gap:8px;min-width:0;padding:12px 4px 12px 8px;font-size:15px;display:grid}.sec .ts{color:var(--muted);font-size:13px}.sec .name{overflow-wrap:anywhere}.sec-loop{width:46px;height:46px;color:var(--muted);background:0 0;border:0;border-radius:10px;flex:none;place-items:center;display:grid}.sec.cur{background:var(--accent-soft)}.sec.cur .name{font-weight:700}.sec.looped{background:var(--loop-soft)}.sec.looped .name{font-weight:700}.sec.looped .ts,.sec.looped .sec-loop{color:var(--loop)}.pagetitle{letter-spacing:-.01em;font-size:28px;font-weight:800}.add-user{gap:10px}.add-user small{color:var(--muted);font-size:13px}.users{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.user{gap:6px}.user.inactive .user-head b{color:var(--muted)}.user-head{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.user-head b{overflow-wrap:anywhere;margin-right:2px;font-size:17px}.badge{background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:2px 8px;font-size:12px;font-weight:700}.badge.off{background:var(--danger-soft);color:var(--danger)}.user-meta{color:var(--muted);font-size:14px}.warn{color:var(--loop)}.devices{border-top:1px solid var(--line);margin:4px 0 0;padding:0;list-style:none}.devices li{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;font-size:14px;display:grid}.device-name{font-weight:700}.device-songs{font-family:var(--font-mono);color:var(--ok);font-size:13px}.device-songs.warn{color:var(--loop)}.devices small{color:var(--muted);grid-column:1/-1;font-size:13px}.user-actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.btn.ghost.danger{color:var(--danger)}.sheet-title{font-size:20px;font-weight:800}.credentials{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0;padding:4px 14px}.credentials div{border-top:1px solid var(--line);padding:10px 0}.credentials div:first-child{border-top:0}.credentials dt{color:var(--muted);font-size:13px}.credentials dd{overflow-wrap:anywhere;margin:2px 0 0;font-size:17px}.secret{-webkit-user-select:all;user-select:all}.notice-actions{flex-wrap:wrap;grid-column:2;gap:8px;display:flex}.notice.ok-notice{color:var(--ok)}.link{color:var(--accent);background:0 0;border:0;align-self:center;align-items:center;gap:8px;padding:10px;font-weight:700;display:flex}.lead{color:var(--muted)}.tabs{gap:6px;display:flex}.tab{border:1px solid var(--line);min-width:0;color:var(--muted);background:0 0;border-radius:10px;flex:1;padding:10px 0;font-weight:700}.tab.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}.steps{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.card.guide-step{flex-direction:row;align-items:flex-start;gap:12px}.guide-step-n{background:var(--accent-soft);width:28px;height:28px;color:var(--accent);border-radius:50%;flex:none;place-items:center;font-weight:800;display:grid}.guide-step-body{flex-direction:column;gap:4px;min-width:0;padding-top:2px;display:flex}.guide-step-body small{color:var(--muted);font-size:14px}.guide-step-icon{vertical-align:middle;border:1px solid var(--line);width:28px;height:28px;color:var(--accent);border-radius:8px;place-items:center;margin-left:8px;display:inline-grid}.guide-step-icon .i{width:18px;height:18px}.address{overflow-wrap:anywhere;font-size:15px;font-weight:700}.tips ul{color:var(--muted);flex-direction:column;gap:8px;margin:0;padding-left:18px;font-size:14px;display:flex}