:root{color-scheme:dark;font:16px system-ui,sans-serif;color:#e4f6fa;background:#07131d;--mint:#7df2f4;--line:#294653;--muted:#acc8d1}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 78% 0,#16374a,transparent 54%)}
main{max-width:1230px;margin:auto;padding:clamp(18px,4vw,54px)}
header{margin-bottom:30px}
header p,.help,#status{color:var(--muted)}
h1{font-size:clamp(2.2rem,5vw,4.6rem);letter-spacing:-.064em;margin:.15em 0}
h2{margin:0;font-size:1rem}
.eyebrow{color:var(--mint);font-size:.68rem;font-weight:700;letter-spacing:.17em}
.layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:18px}
.menu,.review{background:#0c1d28;border:1px solid var(--line);border-radius:18px;padding:18px}
.items{display:grid;gap:6px;margin:10px 0 20px}
button,a{font:inherit;color:inherit}
button{border:1px solid var(--line);border-radius:9px;background:#132837;cursor:pointer;padding:9px 12px;min-height:42px}
button:hover{background:#204254}
button[aria-pressed=true]{border-color:#58d4df;color:var(--mint);background:#193745}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.items button{display:flex;align-items:center;gap:10px;text-align:left}
.items img{width:21px;height:21px;filter:invert(.92) sepia(.24) saturate(1.6) hue-rotate(134deg)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.top a{font-size:.84rem;color:var(--mint)}
.top h2{font-size:clamp(1.25rem,3vw,2rem);letter-spacing:-.04em}
.top .eyebrow{margin:0 0 4px}
#stage{position:relative;overflow:hidden;min-height:260px;height:min(55vh,490px);border:1px solid var(--line);border-radius:13px;background:#081923 url('../fondos/campo-nocturno.svg') center/cover}
#poster,#webgl{position:absolute;width:100%;height:100%;inset:0}
#poster{object-fit:contain;padding:24px}
#webgl canvas{display:block;width:100%;height:100%;touch-action:none}
[hidden]{display:none!important}
.controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.help,#status{font-size:.83rem}
#status{min-height:1.3em}
@media(max-width:780px){.layout{grid-template-columns:1fr}.items{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}#stage{height:42vh}}