:root{color-scheme:dark;--bg: #0f1117;--surface: #1a1d27;--border: #2d3348;--text: #e8eaf0;--muted: #9aa3b8;--accent: #6ea8fe;--accent-hover: #8bb9ff}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}a{color:var(--accent)}a:hover{color:var(--accent-hover)}.page{max-width:1100px;margin:0 auto;padding:2rem 1.25rem 3rem}header h1{margin:0 0 .5rem;font-size:1.75rem;font-weight:650}.subtitle{margin:0;color:var(--muted);max-width:70ch}.controls{display:flex;flex-direction:column;gap:1.25rem;margin:1.75rem 0 .75rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.controls-row{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-end}.controls-row--source{padding-bottom:1.25rem;border-bottom:1px solid var(--border)}.controls-row--playback{align-items:flex-start}.controls-row--playback .slider-group{flex:1 1 240px}.control-group{display:flex;flex-direction:column;gap:.4rem;min-width:160px}.control-group label{font-size:.9rem;font-weight:600}.control-group label span{font-weight:500;color:var(--accent);margin-left:.35rem}.url-group{flex:1 1 320px}.control-group--action{align-self:flex-end}.label-spacer{visibility:hidden}.url-row{display:flex;gap:.5rem}input[type=url],input[type=file]{font:inherit}input[type=url]{flex:1;min-width:0;padding:.5rem .65rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}input[type=range]{width:min(280px,100%);accent-color:var(--accent)}button{font:inherit;padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}.hint{margin:0;font-size:.8rem;color:var(--muted);max-width:28ch}.status{min-height:1.25rem;margin:0 0 1rem;font-size:.9rem;color:var(--muted)}.status.error{color:#ff8b8b}.display{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}figure{margin:0;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}figcaption{margin-bottom:.75rem;font-size:.9rem;font-weight:600;color:var(--muted)}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#000;border-radius:6px}.explanation{margin-top:2rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:12px}.explanation h2{margin:0 0 .5rem;font-size:1.1rem}.explanation p{margin:0;color:var(--muted)}.explanation p+p{margin-top:.75rem}