:root{color-scheme:dark;font:16px/1.45 system-ui,sans-serif;color:#e7e4da;background:#070b16}*{box-sizing:border-box}body{margin:0}main{max-width:1500px;margin:auto;padding:22px 28px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}h1{font:500 clamp(22px,3vw,34px)/1.2 Georgia,serif;margin:0}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b0b7c8;margin:0 0 6px}a{color:#d6c8a6;font-size:14px;white-space:nowrap}#viewport{height:min(64vh,650px);position:relative;border:1px solid #333748;border-radius:10px;overflow:hidden;background:#030511}canvas{display:block;width:100%;height:100%;touch-action:none}#status{position:absolute;inset:0;display:grid;place-content:center;padding:20px;pointer-events:none}#status:empty{display:none}.controls{padding:16px 0 8px}#clip-picker,.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toolbar{margin-top:12px}button{font:inherit;font-size:14px;padding:10px 16px;border-radius:6px;border:1px solid #52535b;background:#1b2232;color:#e7e4da;cursor:pointer;min-height:42px}button[aria-pressed=true]{background:#e0d2b3;color:#151a28;border-color:#e0d2b3}button:focus-visible,a:focus-visible{outline:2px solid #e0d2b3;outline-offset:3px}button:disabled{opacity:.45}output{margin-left:auto;font-size:13px;color:#b0b7c8;font-variant-numeric:tabular-nums}.hint,footer{font-size:13px;color:#aeb2bd}.hint{margin:10px 0}footer{border-top:1px solid #303443;padding-top:8px}footer p{margin:8px 0}@media(max-width:600px){main{padding:14px}header{align-items:flex-start;gap:10px;margin-bottom:12px}header a{font-size:12px}h1{max-width:240px}#viewport{height:48vh;min-height:280px}button{padding:8px 11px;font-size:13px;min-height:42px}output{flex-basis:100%;margin-left:0}.controls{padding-top:12px}footer{font-size:12px}}:root .timeline{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px}.timeline input{flex:1;min-width:0;min-height:42px;accent-color:#e0d2b3;cursor:pointer}.timeline output{flex:0 0 auto;white-space:nowrap;margin:0}.timeline label{color:#e0d2b3}.timeline input:focus-visible{outline:2px solid #e0d2b3;outline-offset:3px}.timing{color:#d6c8a6}#status button{pointer-events:auto}