:root{--bg:#0a0a0a;--red:#c1121f;--bone:#f1ece4;--gray:#1c1c1c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--bone);font-family:'Space Mono',monospace;
background-image:radial-gradient(circle at 20% 0%,#2a0508 0,transparent 45%),radial-gradient(circle at 90% 100%,#1a0004 0,transparent 40%);min-height:100vh}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:60;opacity:.07;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
.goth{font-family:'UnifrakturCook',cursive}
.pirata{font-family:'Pirata One',cursive}
.logo{text-shadow:0 0 12px var(--red),0 0 30px #c1121f88;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{text-shadow:0 0 4px var(--red),0 0 60px #c1121fcc}}
.card{transition:transform .15s}
.card:hover{animation:glitch .3s steps(2) 1}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px) skewX(-2deg)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,0) skewX(1deg)}100%{transform:translate(0)}}
.tape{background:var(--red);color:#000;transform:rotate(-3deg);font-weight:700}
.chip{border:1px solid #444;padding:2px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s}
.chip.on{background:var(--red);border-color:var(--red);color:#000}
.chip:hover{border-color:var(--red)}
.inp{background:#111;border:1px solid #333;color:var(--bone);padding:8px 10px;outline:none}
.inp:focus{border-color:var(--red)}
.btn{border:1px solid var(--red);padding:6px 12px;text-transform:uppercase;font-size:11px;letter-spacing:.1em;transition:all .15s}
.btn:hover{background:var(--red);color:#000}
.fade-in{animation:fin .4s ease both}
@keyframes fin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.drawer{animation:slide .25s ease both}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.spark{position:fixed;pointer-events:none;z-index:70;color:var(--red);font-size:10px;animation:sp .7s ease-out forwards}
@keyframes sp{to{opacity:0;transform:translateY(14px) scale(.3)}}
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:var(--red)}::-webkit-scrollbar-track{background:#111}
input[type=range]{accent-color:var(--red)}
.tl-dot:hover{transform:scale(1.6)}