/* Interfaz retro B (12/10/2026). Se carga después de styles.css y brand.css y los reviste:
   colores en variables, modo claro y oscuro, tipografía arcade para titulares y lectura legible.
   El documental conserva su identidad propia (carbón de película y dorado). */
@font-face{font-family:BigShoulders;src:url('assets/fonts/BigShouldersDisplay-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:BigShoulders;src:url('assets/fonts/BigShouldersDisplay-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Atkinson;src:url('assets/fonts/AtkinsonHyperlegible-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url('assets/fonts/AtkinsonHyperlegible-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Atkinson;src:url('assets/fonts/AtkinsonHyperlegible-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Silkscreen;src:url('assets/fonts/Silkscreen-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --screen:#F1F3FB;--panel:#FFFFFF;--panel-2:#E7EAF7;--ink:#141B47;--muted:#4A5384;--line:#CDD2EA;
  --red:#D3123C;--red-ink:#FFFFFF;--cyan:#0A6E74;--coin:#C98A00;--glow:transparent;--crt:#0F1748;
  --band:#141B47;--band-ink:#EEF0FF;--band-muted:#B7BEE6;
  --film:#111719;--cream:#F8F5EC;--gold:#D6A64A;--gold-ink:#8A6414;
  --paper:var(--screen);--accent:var(--red);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --screen:#0F1748;--panel:#17215C;--panel-2:#1D2968;--ink:#EEF0FF;--muted:#B7BEE6;--line:#2C3A86;
  --red:#FF4766;--red-ink:#0F1748;--cyan:#3EE6E0;--coin:#FFD23F;--glow:rgba(62,230,224,.35);--crt:#070C2B;
  --band:#0A1036;--gold-ink:#E9BE63;color-scheme:dark}}
:root[data-theme="dark"]{
  --screen:#0F1748;--panel:#17215C;--panel-2:#1D2968;--ink:#EEF0FF;--muted:#B7BEE6;--line:#2C3A86;
  --red:#FF4766;--red-ink:#0F1748;--cyan:#3EE6E0;--coin:#FFD23F;--glow:rgba(62,230,224,.35);--crt:#070C2B;
  --band:#0A1036;--gold-ink:#E9BE63;color-scheme:dark}

/* ---------- Base ---------- */
body{background:var(--screen);color:var(--ink);font-family:Atkinson,system-ui,sans-serif}
::selection{background:var(--coin);color:#141B47}
:focus-visible{outline:3px solid var(--coin);outline-offset:3px}
h1,h2{font-family:BigShoulders,Impact,sans-serif;font-weight:900;letter-spacing:.005em;line-height:.95}
h3{font-family:BigShoulders,Impact,sans-serif;font-weight:800;letter-spacing:.01em}
h1 em,h2 em{font-style:normal;color:var(--red);text-shadow:0 0 18px var(--glow)}
.lead,.muted,.section-note,.section-heading p,.results-meta,.count-label,.timeline-aside p,.timeline-event p,.timeline-legend,
.directory-card p,.directory-card .works-preview,.stat span,.catalogue-credit,.catalogue-item p,.game-tile p,.game-tile .game-summary,
.dialog-sub,.dialog-fields dt,.dialog-note,.community-story p,.community-next p,.channel small,.chapter p,.reading .source-meta,.rights,
.doc-copy p,.discovery-card p,.profile-projects-note,.person-role,.jugador1-byline,.jugador1-item p,.jugador1-date{color:var(--muted)}
a.text-link,.text-link{border-bottom-color:var(--red)}
.eyebrow:before{background:var(--red);box-shadow:0 0 10px var(--glow)}
.skip{background:var(--coin);color:#141B47}
.pixel{font-family:Silkscreen,monospace;letter-spacing:.04em}

/* ---------- Top bar, header and theme switch ---------- */
.edition{background:var(--band);color:var(--band-muted)}
.header{background:color-mix(in srgb,var(--screen) 90%,transparent);border-color:var(--line);backdrop-filter:blur(8px)}
.header nav a{color:var(--ink)}
.header nav a:hover,.header nav a[aria-current]{color:var(--red)}
.header nav a[aria-current]:after{background:var(--red)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img.mark{width:34px;height:34px;filter:drop-shadow(0 0 8px var(--glow))}
.brand .wordmark{font:900 26px/.85 BigShoulders,Impact,sans-serif}
.theme-switch{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin-left:18px}
.theme-switch button{border:0;background:none;color:var(--muted);font:700 13px Atkinson,sans-serif;padding:5px 10px;border-radius:999px;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:var(--ink);color:var(--screen)}
.menu-button{border-color:var(--line);color:var(--ink)}
.header nav{background:var(--screen);border-color:var(--line)}

/* ---------- Buttons, tabs, form controls ---------- */
.button{background:var(--red);border-color:var(--red);color:var(--red-ink);border-radius:12px;box-shadow:0 5px 0 color-mix(in srgb,var(--red) 55%,#000)}
.button:hover{background:color-mix(in srgb,var(--red) 85%,#fff);border-color:var(--red)}
.button:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--red) 55%,#000)}
.button.outline{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.button.light{background:var(--coin);border-color:var(--coin);color:#141B47;box-shadow:0 5px 0 color-mix(in srgb,var(--coin) 55%,#000)}
.search,.toolbar select,.toolbar input{background:var(--panel);border-color:var(--line);color:var(--ink);border-radius:10px}
.search input{color:var(--ink)}
.tabs button,.era-tabs button{border-color:var(--line);color:var(--ink);border-radius:999px}
.tabs button.active,.era-tabs button.active,.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--screen)}

/* ---------- Cards ---------- */
.directory-card,.catalogue-card,.community-story,.game-postcard,.profile-cover,.jugador1-item{background:var(--panel);border-color:var(--line);color:var(--ink)}
.directory-card{border-width:2px;border-radius:12px}
.directory-card:hover,.directory-card:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px var(--glow)}
.directory-card h3{font-size:26px}
.logo,.studio-mini img{background:#fff;border-color:var(--line)}
.initials,.catalogue-placeholder{background:var(--panel-2);color:var(--muted)}
.card-arrow{color:var(--muted)}
/* Games as cartridges */
.catalogue-card{border-width:2px;border-radius:10px 10px 4px 4px;clip-path:polygon(0 0,100% 0,100% 100%,62% 100%,58% calc(100% - 8px),42% calc(100% - 8px),38% 100%,0 100%);padding-bottom:14px}
.catalogue-card:hover,.catalogue-card:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px var(--glow)}
.catalogue-card h3{font-size:24px}
.catalogue-item{border-color:var(--line)}
.catalogue-item:hover{background:var(--panel-2)}
.catalogue-item .status{color:var(--red)}
/* Labels */
.studio-level,.studio-pioneer{color:var(--muted);border-color:var(--line)}
.studio-level-consolidado{color:var(--red);border-color:var(--red)}
.game-featured{display:inline-block;margin:4px 0}

/* ---------- Timeline ---------- */
.timeline-date{color:var(--red);font-family:BigShoulders,sans-serif;font-weight:900;font-size:1.15em}
.timeline-event:before{border-color:var(--screen)}
.timeline-progress{background:var(--panel-2)}
.note-box{background:var(--panel-2);border-color:var(--red)}

/* ---------- Bands, home blocks, footer ---------- */
.dark-band,footer{background:var(--band);color:var(--band-ink)}
.dark-band .lead,.mini-time p,.footer-top p,.footer-bottom,.footer-progress,.footer-contact span,.community-archive p{color:var(--band-muted)}
.dark-band .eyebrow,.dark-band h2 em,.mini-time small,.footer-brand em,.community-archive .eyebrow,.community-archive em{color:#3EE6E0;text-shadow:none}
.mini-time:before{background:#3EE6E0}
.community-archive{background:var(--band);color:var(--band-ink)}
.doc-banner{background:var(--panel);border:2px solid var(--line);border-radius:18px}
.studio-mini img{border-radius:8px}

/* ---------- Dialog (game sheet) ---------- */
dialog{background:var(--screen);color:var(--ink);border:2px solid var(--line);border-radius:16px}
dialog::backdrop{background:rgba(7,12,43,.78)}
.dialog-close{background:var(--panel);border-color:var(--line);color:var(--ink)}

/* ---------- Jugador 1 and reading ---------- */
.reading a,.document-link:hover,.chapter .number,.community-intro .mono{color:var(--red)}
.jugador1-item{border:2px solid var(--line);border-radius:12px}
.jugador1-item:hover{border-color:var(--cyan)}
.jugador1-after{background:var(--panel-2);border-left:4px solid var(--cyan)}
.article-body p,.article-body li{font-family:Atkinson,sans-serif}

/* ---------- Home (B) ---------- */
.b-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:56px}
.b-hero h1{font-size:clamp(64px,7.4vw,112px);text-transform:uppercase}
.b-hero .lead{font-size:19px;margin:22px 0 30px;max-width:44ch}
.b-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.cabinet{margin:0;background:linear-gradient(180deg,#1d2a7a,#0c1240);border-radius:22px 22px 14px 14px;padding:14px 14px 20px;box-shadow:0 30px 60px -20px rgba(15,23,72,.55)}
.marquee{background:linear-gradient(90deg,#d3123c,#ff4766 50%,#d3123c);border-radius:10px 10px 4px 4px;padding:10px 16px;color:#fff;font:900 24px/1 BigShoulders,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-align:center;box-shadow:0 0 24px rgba(255,71,102,.45)}
.crt{position:relative;display:block;margin-top:12px;aspect-ratio:460/215;border-radius:16px/22px;overflow:hidden;background:var(--crt);box-shadow:inset 0 0 0 6px #060a24}
.crt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s,transform .5s}
.crt img.on{opacity:1;transform:none}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45));pointer-events:none}
.attract{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;color:#e9ecff}
.attract strong{display:block;font:800 28px/1 BigShoulders,sans-serif}
.attract small{display:block;color:#b7bee6;font-size:15px;margin-top:4px}
.attract-controls{display:flex;gap:8px}
.attract-controls button{width:38px;height:38px;border-radius:50%;border:0;background:#2a3790;color:#fff;cursor:pointer;font:700 16px Atkinson,sans-serif}
.attract-controls button[aria-current="true"]{background:#ff4766;color:#0F1748}
.press-start{display:block;width:max-content;margin:14px auto 0;padding:6px 14px;border:2px solid #FFD23F;border-radius:8px;color:#FFD23F;font:14px Silkscreen,monospace;letter-spacing:.04em;text-decoration:none;animation:b-blink 1.1s steps(1) infinite}
.press-start:hover,.press-start:focus-visible{animation:none;background:#FFD23F;color:#0F1748}
@keyframes b-blink{50%{opacity:0}}
.b-rule{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0;font-weight:700;font-size:14px;color:var(--muted)}
.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.score{padding:26px 22px 26px 0}
.score+.score{border-left:1px solid var(--line);padding-left:22px}
.score strong{display:block;font:900 clamp(56px,6vw,84px)/.9 BigShoulders,sans-serif;color:var(--ink)}
.score:first-child strong{color:var(--red);text-shadow:0 0 16px var(--glow)}
.score span{display:block;margin-top:8px;font-size:16px;color:var(--muted)}
.carts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cart{text-align:left;background:var(--panel);border:2px solid var(--line);border-radius:10px 10px 4px 4px;padding:12px 12px 26px;cursor:pointer;color:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,62% 100%,58% calc(100% - 9px),42% calc(100% - 9px),38% 100%,0 100%)}
.cart img{width:100%;aspect-ratio:460/215;object-fit:cover;border-radius:4px;background:var(--crt)}
.cart .genre{display:inline-block;margin:14px 0 6px;padding:2px 10px;border-radius:999px;background:var(--cyan);color:var(--screen);font-weight:700;font-size:13px}
.cart .prompt{display:block;color:var(--red);font-weight:700}
.cart h3{font-size:32px;margin:4px 0 2px}
.cart .studio{color:var(--muted);font-size:15px}
.cart p{color:var(--muted);font-size:15px;line-height:1.5;margin:10px 0 0}
.cart:hover,.cart:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px var(--glow)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
.level{border:2px solid #2C3A86;border-radius:14px;padding:20px;background:rgba(23,33,92,.6)}
.level .tagline{color:#3EE6E0;font-weight:700;font-size:14px}
.level strong{display:block;font:900 52px/1 BigShoulders,sans-serif;margin:6px 0 10px;color:#EEF0FF}
.level p{margin:0;font-size:16px;color:#EEF0FF}
.dark-band{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
.select-studio{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.slot{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;display:grid;gap:10px;justify-items:center;position:relative;color:var(--ink)}
.slot img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:6px}
.slot strong{font:800 20px/1.05 BigShoulders,sans-serif;text-align:center}
.slot[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red),0 0 24px var(--glow)}
.slot[aria-pressed="true"]::before{content:"P1";position:absolute;top:-12px;left:-6px;background:var(--red);color:var(--red-ink);font:11px Silkscreen,monospace;padding:2px 5px;border-radius:3px}
.player-card{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:90px}
.player-card h3{font-size:44px;font-weight:900;margin:0}
.player-card .tag{display:inline-block;margin:10px 0 4px;padding:3px 10px;border:1.5px solid var(--red);color:var(--red);border-radius:999px;font-weight:700;font-size:13px}
.player-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.player-stats div{border-top:2px solid var(--line);padding-top:8px}
.player-stats dt{font-size:14px;color:var(--muted)}
.player-stats dd{margin:0;font:900 40px/1 BigShoulders,sans-serif}
.player-card p{color:var(--muted);font-size:15px;margin:0 0 16px}

/* ---------- Jugando limpio: its own identity ---------- */
.new-film-art{border-radius:12px}
.doc-banner .doc-copy h3{font-family:BigShoulders,sans-serif;font-weight:900}
.documentary-page .eyebrow:before,.doc-banner .eyebrow:before{background:var(--gold);box-shadow:none}
.documentary-page h2 em,.doc-credits h2 span{color:var(--gold-ink);text-shadow:none}
.documentary-page .text-link,.doc-banner .text-link{border-bottom-color:var(--gold)}
.doc-premise-copy p,.doc-story-list p,.doc-archive p{color:var(--muted)}
.doc-premise-copy p strong{color:var(--ink)}
.doc-story-number{color:var(--gold-ink);font-family:Silkscreen,monospace}
.doc-story-list h3{font-family:BigShoulders,sans-serif}
.documentary-page .button{background:var(--red)}
.doc-credits .credit-label{color:var(--muted)}
.doc-credits-intro img{background:var(--cream);border-radius:10px;padding:6px}
.couch-signature{background:var(--film);border-radius:10px;padding:12px}
.cinema-hero,.doc-wide-image{background:var(--film);color:var(--cream)}

/* ---------- Responsive and motion ---------- */
@media (max-width:980px){
  .b-hero,.select-studio{grid-template-columns:1fr}.carts{grid-template-columns:1fr 1fr}.levels{grid-template-columns:1fr 1fr}
  .scoreboard{grid-template-columns:1fr 1fr}.score:nth-child(3){border-left:0;padding-left:0}.player-card{position:static}
  .theme-switch{margin-left:auto;margin-right:10px}}
@media (max-width:560px){
  .carts,.levels{grid-template-columns:1fr}.roster{grid-template-columns:1fr 1fr}
  .b-hero{gap:32px;padding-top:28px}.b-hero h1{font-size:64px}.b-hero .lead{font-size:17px}.marquee{font-size:19px}
  .score{padding:18px 12px 18px 0}.score+.score{padding-left:12px}.score:nth-child(3){padding-left:0}
  .theme-switch button{padding:5px 7px;font-size:12px}.brand .wordmark{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Footer links and small labels keep their contrast in both themes. */
footer a,footer .footer-progress a,footer .footer-bottom a,footer .footer-top a{color:var(--band-ink)}
.progress-label{color:var(--ink)}
.button.outline{color:var(--ink)}
/* Mobile header: logo on one block, compact theme switch and menu. */
.brand{flex:none}
@media (max-width:560px){
  .header{gap:8px}
  .brand .wordmark{font-size:20px;white-space:nowrap}
  .brand img.mark{width:28px;height:28px}
  .theme-switch{margin:0 6px 0 auto;padding:2px}
  .theme-switch button{padding:4px 6px;font-size:11px}
  .menu-button{padding:8px 10px}
}

/* ---------- Cronología en vivo (arcade B; la pantalla es siempre oscura) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.live-launch{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.live-launch span{color:var(--muted);font-size:15px}
@media (max-width:760px){.live-launch{display:none}}
body.live-open{overflow:hidden}
.live{position:fixed;inset:0;z-index:50;background:#070C2B;display:grid;grid-template-rows:1fr auto auto;gap:10px;padding:16px;color:#EEF0FF}
.live-frame{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center}
.live-stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform-origin:50% 50%;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#1d2a7a 0,#0F1748 55%,#0a1036 100%);border-radius:28px;box-shadow:inset 0 0 0 10px #060a24,0 0 80px rgba(62,230,224,.12);font-family:Atkinson,sans-serif}
.live-scan{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.4))}
.lv-mask{overflow:hidden}.lv-mask>*{display:block}
.lv-top{position:absolute;left:160px;right:160px;top:64px;display:flex;align-items:center;gap:16px;font-weight:700;font-size:20px;color:#B7BEE6}
.lv-top img{width:34px;height:34px}
.lv-top b{margin-left:auto;font:400 20px Silkscreen,monospace;color:#3EE6E0;letter-spacing:.04em}
.lv-rule-top{position:absolute;left:160px;right:160px;top:124px;height:2px;background:#2C3A86;transform-origin:0 50%}
.lv-intro{position:absolute;left:160px;top:300px;width:1500px}
.lv-intro h2{font:900 150px/1 BigShoulders,sans-serif;text-transform:uppercase;color:#EEF0FF;margin:0}
.lv-intro p{font-size:38px;color:#B7BEE6;margin:16px 0 0}
.lv-start{margin-top:48px;display:inline-block;padding:10px 22px;border:3px solid #FFD23F;border-radius:10px;color:#FFD23F;font:28px Silkscreen,monospace}
.lv-card{position:absolute;left:160px;top:190px;width:1250px}
.lv-card.with-img{width:1000px}
.lv-date{font-weight:700;font-size:24px;letter-spacing:.04em;color:#3EE6E0}
.lv-year{font:900 230px/.9 BigShoulders,sans-serif;color:#FF4766;text-shadow:0 0 36px rgba(255,71,102,.45);margin-top:6px}
.lv-title{font:800 78px/1.02 BigShoulders,sans-serif;color:#EEF0FF;margin-top:14px;padding-bottom:6px}
.lv-sum{font-size:32px;line-height:1.45;color:#B7BEE6;margin-top:16px;max-width:980px;padding-bottom:6px}
.lv-imgs{position:absolute;left:1220px;top:230px;width:540px}
.lv-imgs.two{width:400px;left:1360px}
.lv-img{margin-bottom:20px;padding:10px;background:#060a24;border:3px solid #2C3A86;border-radius:14px}
.lv-img img{display:block;width:100%;height:auto;border-radius:6px}
.lv-counter{position:absolute;right:160px;top:660px;width:360px;text-align:right}
.lv-counter strong{display:block;font:900 110px/1 BigShoulders,sans-serif;color:#FFD23F;text-shadow:0 0 24px rgba(255,210,63,.35)}
.lv-counter span{font-size:21px;color:#B7BEE6}
.lv-ruler{position:absolute;inset:0}
.lv-line{position:absolute;left:0;top:900px;width:1920px;height:3px;background:#2C3A86}
.lv-mark{position:absolute;top:900px;width:2px;background:#2C3A86}
.lv-label{position:absolute;top:932px;width:120px;margin-left:-60px;text-align:center;font:800 24px BigShoulders,sans-serif;color:#B7BEE6}
.lv-dot{position:absolute;left:0;top:0;border:2px solid #2C3A86;background:transparent}
.lv-dot.on{background:#B7BEE6;border-color:#B7BEE6}
.lv-dot.live.on{background:#FFD23F;border-color:#FFD23F}
.lv-dot.focus{box-shadow:0 0 0 6px rgba(255,71,102,.35);background:#FF4766;border-color:#FF4766}
.lv-focus{position:absolute;top:912px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:13px solid #FF4766}
.lv-close{position:absolute;left:160px;top:240px;width:1600px;visibility:hidden}
.lv-close strong{font:900 320px/.9 BigShoulders,sans-serif;color:#FF4766;text-shadow:0 0 40px rgba(255,71,102,.45)}
.lv-close p{font:800 64px/1.1 BigShoulders,sans-serif;margin:10px 0 0;max-width:1300px;color:#EEF0FF}
.live-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.live-controls input[type=range]{flex:1;min-width:160px;accent-color:#FF4766}
.live-controls span{font:15px Silkscreen,monospace;color:#B7BEE6;min-width:110px}
.live .button.outline{color:#EEF0FF;border-color:#EEF0FF}
.live .button{color:#0F1748}
.live-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.live-chips button{flex:none;border:1.5px solid #2C3A86;background:#0F1748;color:#B7BEE6;border-radius:999px;padding:6px 12px;font:700 13px Atkinson,sans-serif;cursor:pointer}
.live-chips button[aria-current="true"]{background:#FFD23F;border-color:#FFD23F;color:#0F1748}