:root{--bg:#0b0b12;--mag:#ff2e88;--cyan:#00e5ff;--lime:#b6ff3b;--panel:#12121c;--line:#24243a}
html,body{background:var(--bg);color:#e8e8f0;font-family:'JetBrains Mono',monospace;margin:0}
body{background-image:radial-gradient(circle at 15% 0%,rgba(255,46,136,.12),transparent 40%),radial-gradient(circle at 90% 100%,rgba(0,229,255,.1),transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px);min-height:100vh}
.disp{font-family:'Unbounded',sans-serif}
.panel{background:var(--panel);border:1px solid var(--line)}
.btn{border:1px solid var(--line);background:#181826;padding:.35rem .6rem;border-radius:6px;font-size:.75rem;transition:.15s;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.25)}
.btn.on{background:var(--cyan);color:#000;border-color:var(--cyan)}
.btn.mag.on{background:var(--mag);border-color:var(--mag);color:#fff}
.rec{background:#2a0b16;border:1px solid var(--mag);color:var(--mag)}
.rec.live{background:var(--mag);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,46,136,.0),0 0 24px var(--mag)}}
input[type=range]{accent-color:var(--lime);width:100%}
.tile{position:relative;overflow:hidden;background:#000;border:2px solid var(--line);transition:border-color .2s,box-shadow .2s}
.tile:hover{border-color:var(--mag);box-shadow:0 0 20px rgba(255,46,136,.35)}
.tile .inner{position:absolute;inset:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tile .inner iframe,.tile .inner>div{width:100%;height:100%}
.tile .hov{opacity:0;transition:.2s}
.tile:hover .hov{opacity:1}
.lbl{background:rgba(0,0,0,.7);color:var(--lime);font-size:10px;padding:2px 6px;border-radius:4px}
.fade{animation:fin .5s both}
@keyframes fin{from{opacity:0;transform:translateY(8px)}}
.tv{animation:wob 2s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-4deg) translateY(-4px)}}