:root{--bg:#1a1a1a;--panel:#2c2c2c;--acc:#ff3d00;--amber:#ffb74d;--txt:#e8e8e8}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--txt);font-family:'Bricolage Grotesque',sans-serif;
background:radial-gradient(circle at 20% 10%,#2a1208 0,transparent 40%),radial-gradient(circle at 80% 90%,#1f0c05 0,transparent 45%),var(--bg)}
main{max-width:760px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
h1{font-size:clamp(48px,11vw,96px);font-weight:800;margin:0;letter-spacing:-2px;line-height:1}
h1 span{display:inline-block;animation:wob 1.6s ease-in-out infinite;color:var(--acc)}
h1 span:nth-child(even){color:#fff;animation-direction:reverse}
@keyframes wob{0%,100%{transform:rotate(-6deg) translateY(0);filter:hue-rotate(0)}50%{transform:rotate(7deg) translateY(-6px);filter:hue-rotate(40deg)}}
.sub{font-weight:200;font-size:18px;margin:14px 0 2px}
.tag{font-family:'JetBrains Mono',monospace;font-size:12px;font-style:italic;color:#888;margin:0 0 22px}
.drop{width:100%;max-width:620px;display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--panel);
border:2px dashed var(--acc);border-radius:10px;cursor:pointer;transition:.2s}
.drop.over{box-shadow:0 0 28px var(--acc);border-color:#ff8a50;transform:scale(1.02)}
.drop input{display:none}
.btnfake{background:#eee;color:#111;padding:6px 14px;border-radius:4px;font-weight:800}
#fname{font-family:'JetBrains Mono',monospace;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.stage{margin:26px 0;max-width:100%}
canvas{max-width:100%;height:auto;display:block;background:#000;border:3px solid #444;box-shadow:0 0 26px rgba(255,61,0,.45)}
.controls{width:100%;background:var(--panel);border-radius:12px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
button{font-family:inherit;font-weight:800;font-size:18px;padding:12px 26px;border:0;border-radius:8px;background:var(--acc);color:#fff;cursor:pointer;transition:.15s}
button:hover:not(:disabled){transform:translateY(-2px) rotate(-1deg);box-shadow:0 6px 16px rgba(255,61,0,.5)}
button:disabled{background:#555;color:#888;cursor:not-allowed}
button.rec::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;margin-right:8px;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.slider{display:flex;align-items:center;gap:10px;font-size:16px}
.slider b{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--amber);min-width:38px}
input[type=range]{accent-color:var(--acc);width:130px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chip{font-family:'JetBrains Mono',monospace;font-size:13px;padding:7px 12px;border-radius:20px;border:1px solid #555;background:#222;color:#999;cursor:pointer;user-select:none;transition:.15s}
.chip.on{border-color:var(--acc);color:#fff;background:rgba(255,61,0,.18)}
.status{color:var(--amber);font-style:italic;font-size:20px;margin-top:28px;min-height:28px}
.status.err{color:#ff6b6b}
footer a{color:#777;font-size:13px;font-family:'JetBrains Mono',monospace}
@media(max-width:600px){.row{flex-direction:column;align-items:stretch}.slider{justify-content:space-between}button{width:100%}}