:root{--ink:#0d0d0d;--orange:#ff8c1a;--amber:#ffc400;--moss:#1f2b1a;--fog:#e9e2cf}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#26351f,var(--ink) 70%);color:var(--fog);font-family:'IBM Plex Mono',monospace;min-height:100vh}
.hazard{text-align:center;padding:18px 10px 10px;background:repeating-linear-gradient(-45deg,#111 0 18px,#1a1a1a 18px 36px);border-bottom:6px solid;border-image:repeating-linear-gradient(-45deg,var(--amber) 0 14px,#000 14px 28px) 6}
h1{font-family:'Anton',sans-serif;font-size:clamp(34px,8vw,84px);margin:0;letter-spacing:2px;color:var(--amber);text-shadow:4px 4px 0 #000,0 0 30px rgba(255,140,26,.5)}
.sub{margin:4px 0 0;font-weight:300;opacity:.8}
main{max-width:1100px;margin:0 auto;padding:14px}
#stage-wrap{position:relative;height:58vh;min-height:320px;border-radius:14px;overflow:hidden;box-shadow:0 0 40px rgba(255,196,0,.15);border:2px solid #333}
canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#unleash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:'Anton';font-size:clamp(28px,6vw,56px);color:var(--amber);background:rgba(0,0,0,.55);cursor:pointer;animation:pulse 1.4s infinite}
#unleash small{font-family:'IBM Plex Mono';font-size:13px;color:var(--fog)}
@keyframes pulse{50%{color:var(--orange)}}
#ticker{position:absolute;top:10px;left:10px;right:10px;font-size:12px;background:rgba(0,0,0,.5);padding:6px 10px;border-left:4px solid var(--amber);pointer-events:none;transition:opacity .5s}
#controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:720px){#controls{grid-template-columns:1fr}}
.card{background:rgba(20,26,16,.85);border-radius:14px;padding:16px;border:1px solid #333;border-top:6px solid;border-image:repeating-linear-gradient(-45deg,var(--amber) 0 10px,#000 10px 20px) 6;box-shadow:0 0 18px rgba(255,196,0,.08);animation:rise .6s both}
.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.2s}.card:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
h2{font-family:'Anton';font-weight:400;letter-spacing:1px;color:var(--orange);margin:0 0 10px;font-size:24px}
label{display:block;font-size:13px;margin:10px 0}
label span{float:right;color:var(--amber);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;height:8px;background:linear-gradient(90deg,var(--moss),var(--orange));border-radius:8px;margin-top:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:26px;background:var(--amber);clip-path:polygon(50% 100%,0 0,100% 0);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:26px;background:var(--amber);border:none;border-radius:0 0 50% 50%}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pill{background:#000;color:var(--amber);border:2px solid var(--amber);border-radius:999px;padding:8px 14px;font-family:inherit;font-weight:600;cursor:pointer;font-size:13px}
.pill:hover,.pill.active{background:var(--amber);color:#000}
.pill .x{margin-left:6px;opacity:.6}
.row{display:flex;gap:8px}
.row input{flex:1;background:#000;border:1px solid #444;color:var(--fog);padding:8px;border-radius:8px;font-family:inherit}
.buzz-row{display:flex;gap:18px;align-items:center}
.col{display:flex;flex-direction:column;gap:10px}
#hold{width:120px;height:120px;border-radius:50%;border:6px solid #000;background:radial-gradient(circle at 35% 30%,var(--amber),var(--orange) 60%,#a34a00);font-family:'Anton';font-size:20px;line-height:1;color:#000;cursor:pointer;box-shadow:0 0 0 4px var(--amber),0 8px 0 #000;user-select:none;-webkit-user-select:none;touch-action:none}
#hold.on{transform:translateY(4px);box-shadow:0 0 0 4px var(--amber),0 4px 0 #000,0 0 40px var(--orange)}
.toggle{display:flex;gap:8px;align-items:center;margin:0}
#rec-status{font-size:12px;color:var(--amber)}
.meter{height:22px;background:#000;border-radius:11px;overflow:hidden;border:2px solid #333}
#meter-fill{height:100%;width:5%;background:linear-gradient(90deg,#6c3,var(--amber),var(--orange),#e01);transition:width .2s}
#threat-label{font-family:'Anton';font-size:28px;margin-top:10px;color:var(--amber)}
footer{text-align:center;padding:24px 10px;font-size:12px;opacity:.75}
footer a{color:var(--amber)}