:root{--bg:#1a1a1a;--card:#2a2a2a;--acc:#ff3d00;--amber:#ffb347;--txt:#e8e4df;--mute:#777}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#3a1608 0%,transparent 55%),repeating-linear-gradient(0deg,#1a1a1a 0 3px,#1c1b1b 3px 4px);background-color:var(--bg);color:var(--txt);font-family:'JetBrains Mono',monospace;min-height:100vh}
.wrap{max-width:900px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:22px}
header{text-align:center}
.title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(3rem,11vw,6.5rem);margin:0;line-height:.9;letter-spacing:-.04em;animation:hue 6s linear infinite}
.title span{display:inline-block;animation:wob 2.4s ease-in-out infinite;color:var(--acc)}
.title span:nth-child(2){animation-delay:.3s;font-weight:200;color:var(--txt)}
.title .num{animation-delay:.6s}
@keyframes wob{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.sub{font-size:1rem;margin:14px 0 4px}
.tag{color:var(--mute);font-size:.8rem;margin:0}
.drop{width:100%;max-width:690px;background:var(--card);border:3px dashed var(--acc);border-radius:10px;padding:22px 30px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s}
.drop input{display:none}
.drop.over{animation:pulse .6s ease-in-out infinite alternate;background:#3a2018}
@keyframes pulse{to{border-color:var(--amber);transform:scale(1.02)}}
.btnlike{background:#eee;color:#111;padding:6px 14px;border-radius:3px;border:1px solid #999;white-space:nowrap}
#fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{position:relative;width:100%;max-width:650px;aspect-ratio:16/9;background:#000;border:4px solid #4a4a4a;box-shadow:0 0 24px rgba(255,61,0,.45)}
canvas{width:100%;height:100%;display:block;object-fit:contain}
.viewtoggle{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:var(--amber);border:1px solid var(--amber);font:inherit;font-size:.7rem;padding:4px 8px;border-radius:4px;cursor:pointer}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#444;font-size:.8rem;pointer-events:none}
.bar{width:100%;max-width:936px;background:var(--card);border-radius:12px;padding:20px 40px;display:flex;align-items:center;gap:40px;box-shadow:0 6px 18px rgba(0,0,0,.4);flex-wrap:wrap}
.bar button,.presets button{background:var(--acc);color:#fff;border:0;font:700 1.1rem 'Bricolage Grotesque',sans-serif;padding:14px 40px;border-radius:6px;cursor:pointer;transition:.15s}
.bar button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 14px rgba(255,61,0,.5)}
.bar button:disabled{background:#555;color:#888;cursor:not-allowed}
.vol{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap}
.vol small{flex-basis:100%;font-size:.65rem;color:var(--mute)}
.vol small.hot{color:var(--acc)}
input[type=range]{-webkit-appearance:none;appearance:none;height:14px;border-radius:7px;background:#eee;flex:1;min-width:120px;accent-color:var(--acc)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--acc);cursor:pointer}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--acc);border:0}
.progress{width:100%;max-width:936px;height:6px;background:#333;border-radius:3px;overflow:hidden;display:none}
.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--amber))}
.status{color:var(--amber);font-style:italic;font-size:1.1rem;text-align:center;margin:6px 0}
.chaos{width:100%;max-width:936px;background:var(--card);border-radius:12px;padding:16px 24px}
.chaos summary{cursor:pointer;font:800 1.2rem 'Bricolage Grotesque',sans-serif;color:var(--acc)}
.presets{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.presets button{font-size:.85rem;padding:8px 14px;background:transparent;border:1px solid var(--acc);color:var(--acc)}
.presets button:hover{background:var(--acc);color:#fff}
.grid{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px;font-size:.85rem}
.row label{min-width:150px;display:flex;align-items:center;gap:6px}
.row output{min-width:48px;text-align:right;color:var(--amber)}
input[type=checkbox]{accent-color:var(--acc);width:16px;height:16px}
footer{text-align:center;font-size:.75rem;color:var(--mute);margin-top:10px}
footer a{color:var(--acc)}
@media(max-width:640px){.bar{flex-direction:column;align-items:stretch;gap:14px;padding:18px}.bar button{width:100%}.row{flex-wrap:wrap}.row label{min-width:100%}.drop{padding:16px}}