:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;background:#0c1720;color:#f3f7fa;--muted:#a9b8c3;--line:#30424f;--mint:#57dfb0}
*{box-sizing:border-box}
body{margin:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
main{max-width:32rem;margin:auto;padding:12px 18px 18px}
header,.panel-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:1.2rem;margin:0;font-weight:650}h2{font-size:1.1rem;margin:0}
button,input,summary{font:inherit}button{border:1px solid var(--line);background:#1a2a36;color:#f3f7fa;border-radius:10px;min-height:48px;padding:10px 16px;font-weight:650;cursor:pointer;touch-action:manipulation}
button:hover{border-color:#8295a3}button:active{background:#2b4150}button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--mint);border-color:var(--mint);color:#09261c}
button.danger{background:#4d2530;color:#ffd9dd}
button.compact{font-size:.9rem;padding:8px 14px}
:focus-visible{outline:3px solid #ffc76a;outline-offset:3px}
p{line-height:1.45}.status{font-size:.875rem;color:var(--muted);margin:6px 0 12px;min-height:20px}
.status.ready{color:var(--mint)}
aside,.notice{font-size:.875rem;line-height:1.4;padding:10px 12px;background:#1f3240;border-radius:8px;margin-bottom:12px}.notice{color:#ffdc9c}
.track{margin:12px 0}.track h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track p{font-size:.875rem;color:var(--muted);margin:4px 0}
.wave-surface{background:#132530;border:1px solid var(--line);border-radius:10px;overflow:hidden}
canvas{display:block;width:100%;height:100px;touch-action:none;cursor:crosshair}
.times{display:flex;justify-content:space-between;gap:8px;font-size:.875rem;color:var(--muted);margin:9px 0 12px;font-variant-numeric:tabular-nums}
#cue-time{color:#ffc76a}.play{width:100%;font-size:1.25rem;min-height:56px}
.state{text-align:center;font-size:.875rem;margin:5px 0 12px;color:var(--muted);min-height:20px}
.speed-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
#speed-value{font-size:1.7rem;font-weight:700;min-width:5rem;text-align:center;font-variant-numeric:tabular-nums}
input[type=range]{display:block;width:100%;accent-color:var(--mint);min-height:44px;margin:2px 0 0}
.range-labels{display:flex;justify-content:space-between;font-size:.875rem;color:var(--muted)}
.step-buttons,.cue-buttons{display:flex;gap:10px;margin-top:10px}.step-buttons button,.cue-buttons button{flex:1}
.step-buttons button{font-size:1.6rem;line-height:1.1}.step-buttons span{font-size:1rem}
.cue-buttons{margin-top:16px}.cue-buttons button{font-size:.95rem}
.repeat{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.toggle{display:flex;gap:10px;align-items:center;justify-content:space-between;position:relative;min-height:48px;cursor:pointer}
.toggle input{position:absolute;right:0;width:52px;height:40px;opacity:0}
.switch{width:52px;height:30px;border-radius:20px;background:#3e5361;padding:4px;flex-shrink:0;pointer-events:none}
.switch::after{content:"";display:block;width:22px;height:22px;background:#d3dee5;border-radius:50%}
.toggle input:checked+.switch{background:var(--mint)}.toggle input:checked+.switch::after{transform:translateX(22px);background:#0c3124}
.toggle input:focus-visible+.switch{outline:3px solid #ffc76a;outline-offset:3px}
.gap{border:0;padding:0;margin:7px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.gap legend{float:left;padding:0;font-size:.875rem;color:var(--muted);line-height:48px}
.gap>div{display:flex;gap:6px}.gap label{position:relative;cursor:pointer}
.gap input{position:absolute;width:100%;height:100%;margin:0;opacity:0}
.gap span{display:block;padding:12px;min-width:52px;min-height:48px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:.9rem}
.gap input:checked+span{border-color:var(--mint);color:var(--mint);background:#132f29}
.gap input:focus-visible+span{outline:3px solid #ffc76a}
dialog{color:#f3f7fa;background:#0f1e28;border:1px solid var(--line);border-radius:16px;width:calc(100% - 24px);max-width:32rem;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:18px;overscroll-behavior:contain}
dialog::backdrop{background:#000b}.panel-header{margin-bottom:18px}#add-song{width:100%}
#songs{list-style:none;padding:0;margin:10px 0 20px}#songs li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:7px 0}
#songs .song{flex:1;min-width:0;text-align:left;background:transparent;border:0;font-weight:500}
.song strong{display:block;overflow-wrap:anywhere}.song span{display:block;font-size:.875rem;color:var(--muted);margin-top:4px}
.delete{font-size:.875rem;padding:10px;min-width:60px}li.selected{background:#172e32;border-radius:8px}
.preferences{border-top:1px solid var(--line);padding-top:12px}.preferences>button{width:100%;margin:6px 0}
.small{font-size:.875rem;color:var(--muted);margin:6px 0 12px;overflow-wrap:anywhere}
summary{min-height:48px;padding:12px 0;cursor:pointer;font-size:.9rem}
[hidden]{display:none!important}
@media(max-height:740px){main{padding-top:8px}canvas{height:76px}.track{margin:8px 0}.cue-buttons{margin-top:10px}.repeat{margin-top:10px}.state{margin-bottom:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}