:root{--bg:#0d0d10;--card:#17171c;--line:#2a2a33;--berry:#ff3b5c;--muted:#8a8a99}
html,body{background:var(--bg);color:#eee;font-family:'Bricolage Grotesque',sans-serif;margin:0}
body{background-image:radial-gradient(circle at 15% -10%,rgba(255,59,92,.18),transparent 45%),radial-gradient(circle at 100% 110%,rgba(0,200,180,.08),transparent 40%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace}
.tile{animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.tile .bar{opacity:0;transition:opacity .2s}
.tile:hover .bar,.tile:focus-within .bar{opacity:1}
@media (hover:none){.tile .bar{opacity:1}}
.ratio{position:relative;aspect-ratio:16/9;background:#000}
.ratio iframe,.ratio>div>div,.ratio>div{position:absolute;inset:0;width:100%;height:100%}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pill:focus-within{box-shadow:0 0 0 2px var(--berry),0 0 30px rgba(255,59,92,.35)}
.btn{background:#1f1f26;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;font-size:.85rem;white-space:nowrap;transition:all .15s}
.btn:hover{border-color:var(--berry);box-shadow:0 0 14px rgba(255,59,92,.3)}
.btn.on{background:var(--berry);border-color:var(--berry);color:#fff}
.tv{display:inline-block;animation:dance 1.2s ease-in-out infinite}
@keyframes dance{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
.toast{animation:pop .3s}
input[type=range]{accent-color:var(--berry)}
.theater header{display:none}
.drawer{transition:transform .3s}