:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#100c23;color:#e4f5ff}*{box-sizing:border-box}body{margin:0}main{max-width:1600px;margin:auto;padding:14px 18px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}header strong{font-size:24px;letter-spacing:3px}header strong span{font-weight:400;color:#9a84b7}small{display:block;font-size:12px;letter-spacing:2px;color:#a7b3cc;margin-top:3px}a{color:#76e9f8;font-size:14px}.deck{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;background:#19142e;border:1px solid #43355a;border-radius:8px}.deck label{font-size:14px;display:flex;align-items:center;gap:6px}button,.file{font:600 14px system-ui;color:#effcff;background:#302348;border:1px solid #75618f;border-radius:5px;min-height:40px;padding:8px 15px;cursor:pointer}button:hover,.file:hover{background:#48355f}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #70efff;outline-offset:3px}.file{position:relative;background:#185466;overflow:hidden}.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.file:focus-within{outline:3px solid #70efff}.volume input{width:85px;accent-color:#77e3ef}input[type=checkbox]{accent-color:#68eafa;width:18px;height:18px}.track{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#adb4cf;padding:8px 2px;min-height:35px}#track{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#audio-status{flex-shrink:0;color:#8ee9f5}#stage{position:relative;background:#130e26;border:1px solid #4e376e;border-radius:6px;overflow:hidden;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}#overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(90deg,#090e21d9,#140d28ba,#090e2166);padding:15px}#overlay[hidden]{display:none}.eyebrow{font-size:13px;letter-spacing:3px;color:#80e7ff}h1{font-size:clamp(24px,3vw,43px);margin:10px 0}#overlay p{line-height:1.6}#start{background:#51d9ec;color:#091122;border:none;font-size:18px;padding:13px 32px}.hint{font-size:13px;color:#c0bdd2}footer{display:flex;justify-content:space-between;gap:12px;padding:12px 0;font-size:13px;color:#aba6c2}#message{color:#a2edf5}.touch{display:none;position:absolute;inset:auto 18px 12px;justify-content:space-between;align-items:end;pointer-events:none}.touch button{pointer-events:auto;touch-action:none;user-select:none;background:#191a36bb;border:1px solid #79d3e9aa;width:48px;height:44px;padding:0}.pad{text-align:center}.pad>div{display:flex;gap:3px;margin-top:3px}.touch .fire{width:68px;height:68px;border-radius:50%;color:#ffd8fa;border-color:#fb80dc}#stage:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}#stage:fullscreen canvas{object-fit:contain}@media(pointer:coarse){.touch{display:flex}}@media(max-width:700px){main{padding:7px}header strong{font-size:17px;letter-spacing:1px}header small{font-size:10px;letter-spacing:1px}header a{font-size:12px}.deck{gap:6px;padding:7px}button,.file{padding:7px 10px;min-height:38px}.track{font-size:12px;flex-wrap:wrap}.volume{display:none}footer{display:block}footer span{display:block;margin-bottom:4px}.hint{font-size:11px}#overlay p{margin:6px 0}#start{font-size:15px;padding:8px 20px}.eyebrow{font-size:10px}h1{font-size:22px}.touch{inset:auto 8px 7px}.touch button{width:37px;height:33px}.touch .fire{width:52px;height:52px}}