/* ---------- tipografías propias del modo interactivo ----------
   Antes cada dispositivo usaba la suya (Segoe UI, Consolas y Segoe Print en
   Windows; Roboto, DejaVu y una cursiva cualquiera en el móvil) y el modo
   interactivo —que se graba y se publica— no se veía igual en los dos. Estas
   tres son libres (SIL OFL, ver assets/fonts/LICENCIAS-fuentes.txt) y de forma
   parecida a las de Windows: Selawik ≈ Segoe UI, Inconsolata ≈ Consolas,
   Patrick Hand ≈ Segoe Print. Se descargan solo al abrir el modo interactivo. */
@font-face{font-family:'Selawik'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/Selawik-400.woff2') format('woff2')}
@font-face{font-family:'Selawik'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/Selawik-600.woff2') format('woff2')}
@font-face{font-family:'Selawik'; font-style:normal; font-weight:700 900; font-display:swap; src:url('../assets/fonts/Selawik-700.woff2') format('woff2')}
@font-face{font-family:'Inconsolata'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/Inconsolata-400.woff2') format('woff2')}
@font-face{font-family:'Inconsolata'; font-style:normal; font-weight:500 900; font-display:swap; src:url('../assets/fonts/Inconsolata-700.woff2') format('woff2')}
@font-face{font-family:'Patrick Hand'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/PatrickHand-400.woff2') format('woff2')}
.inter{--ui:'Selawik','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'Inconsolata','Consolas','Cascadia Code',ui-monospace,'DejaVu Sans Mono',monospace}

/* EMI · interactivo.css — MODO INTERACTIVO (#interBack, js/interactivo.js)

   Dos maquetas con el MISMO marcado:
     · ESCRITORIO (≥900 px): el escenario es una columna con las proporciones de
       un teléfono (9:16), con el marco grueso y redondeado de la lámina — es lo
       que se graba y se publica — y los ajustes van en un panel a su lado.
     · TELÉFONO: la ventana ocupa la pantalla entera. Primero los ajustes
       (data-paso="cfg") y, al pulsar «Ver en vivo», el escenario
       (data-paso="vivo"). En los ajustes el escenario sigue MAQUETADO debajo
       (visibility, no display): interactivo.js mide ahí cuántos diagramas caben.
   Los colores salen todos de las variables del tema, así que claro y oscuro se
   resuelven solos. */

/* ---------- tarjeta y botón al final de la pestaña Resultados ---------- */
.intercard .interbtn{width:100%; justify-content:center; gap:8px; margin-top:12px; padding:10px 14px;
  font-size:14px; font-weight:700}
.intercard .interbtn svg{width:15px; height:15px; flex-shrink:0}
.intercard .interbtn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- la ventana ---------- */
/* Fondo oscuro SÓLIDO, sin backdrop-filter: el desenfoque se recalculaba en
   cada fotograma de la animación (sin GPU bajaba a 12 fps una estructura de
   cuatro nudos que se dibuja en 2,5 ms). */
.inter{position:fixed; inset:0; z-index:150; display:none; font-family:var(--ui); color:var(--ink);
  background:rgba(10,13,20,.78)}
.inter.open{display:flex; align-items:center; justify-content:center; gap:18px; padding:16px}

.inter-stage{position:relative; display:flex; flex-direction:column; overflow:hidden; flex-shrink:0;
  background:var(--panel); border:3px solid var(--ink); border-radius:30px;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  height:calc(100vh - 32px); height:calc(100dvh - 32px);
  width:min(600px, calc((100vh - 32px)*0.5625), calc(100vw - 430px));
  width:min(600px, calc((100dvh - 32px)*0.5625), calc(100vw - 430px));
  min-width:340px}

/* barra superior: la MARCA (logo, EMI y emiestruc.com) arriba —en la vista
   limpia y en el vídeo se queda sola, centrada— y los botones: grabar,
   velocidad, vista limpia, ajustes (teléfono) y cerrar */
.inter-top{flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:12px 12px 4px 18px}
.inter-brand{display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap}
.inter-face{width:22px; height:auto; color:var(--ink); flex-shrink:0}
.inter-brand .logo{font-family:var(--pixel); font-weight:700; font-size:16px; letter-spacing:.5px; color:var(--ink)}
.inter-brand .logo em{font-style:italic; color:var(--accent)}
.inter-url{font:600 12px var(--ui); color:var(--ink-soft)}
.inter-sp{flex:1}
.ib-rec.grabando{border-color:#e0312b; background:#e0312b; color:#fff}
.ib{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  padding:0; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  cursor:pointer; font:600 20px/1 var(--ui)}
.ib svg{width:18px; height:18px}
.ib-txt{width:auto; min-width:42px; padding:0 8px; font:800 12.5px var(--mono)}
.ib:hover{border-color:var(--accent); color:var(--accent)}
.ib:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ib-cfg{display:none}                               /* solo en el teléfono */

/* paneles apilados: estructura + diagramas, todos del mismo alto */
.inter-panels{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 14px;
  touch-action:none; -webkit-user-select:none; user-select:none}
.ip{flex:1 1 0; min-height:0; display:flex; flex-direction:column}
.ip-h{display:flex; align-items:center; gap:8px; margin:7px 0 0; white-space:nowrap; overflow:hidden;
  font:800 12.5px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase; color:var(--ink)}
.ip-bar{width:5px; height:17px; border-radius:3px; background:var(--c); flex-shrink:0}
.ip-t{overflow:hidden; text-overflow:ellipsis}
.ip-t b{color:var(--c); font-weight:900}
.ip-u{font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--ink-soft)}
.ip-lienzo{position:relative; flex:1 1 auto; min-height:0; width:100%}
.ip-cv{position:absolute; inset:0; width:100%; height:100%; display:block}
.ip[data-k="E"] .ip-cv{cursor:default}
.ip-cv.arrastrando{cursor:grabbing}
.ip-f{flex:0 0 auto; min-height:17px; margin:0 0 3px; text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font:500 11.5px/1.4 var(--mono); color:var(--ink-soft)}
.ip-f b{color:var(--c); font-weight:800}
.ip[data-k="E"] .ip-f b{color:var(--ink)}
.ip-s{opacity:.8}

/* indicador de grabación (no sale en el vídeo: data-norec) */
.inter-recpill{position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); white-space:nowrap; z-index:5; display:flex; align-items:center; gap:8px;
  padding:5px 6px 5px 11px; border-radius:999px; background:rgba(20,24,34,.88); color:#fff; font:700 12.5px var(--mono)}
.inter-recpill .rp-dot{width:9px; height:9px; border-radius:50%; background:#e0312b; animation:interRec 1s steps(2) infinite}
.inter-recpill button{font:700 12px var(--ui); color:#fff; background:#e0312b; border:none; border-radius:999px; padding:6px 11px; cursor:pointer}
@keyframes interRec{50%{opacity:.25}}

/* mandos: una fila por variable (reproducir, nombre, valor, deslizador) */
.inter-ctl{flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding:8px 16px 12px;
  border-top:1px solid var(--line); background:var(--panel-2)}
.inter-ctl:empty{display:none}
.ic-row{display:flex; align-items:center; gap:12px}
.ic-play{width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:none; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer;
  box-shadow:0 2px 10px rgba(61,74,160,.35)}
.ic-play:hover{background:var(--accent-2)}
.ic-play:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.ic-play svg{width:20px; height:20px; fill:currentColor}
.ic-play .i-pause{display:none}
.ic-play.playing .i-play{display:none}
.ic-play.playing .i-pause{display:inline}
.ic-rowmain{flex:1; min-width:0}
.ic-rowtop{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.ic-lbl{font:800 11px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ic-lbl small{font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:none}
.ic-val{font:700 13px var(--mono); color:var(--ink); white-space:nowrap}
.ic-vacio{margin:6px 0; font-size:12.5px; color:var(--ink-soft); text-align:center}

/* deslizador: el tramo coloreado va de --a a --b (desde el cero en el de
   magnitud, que tiene el cero en el centro; desde el arranque en el de posición) */
.ic-range{-webkit-appearance:none; appearance:none; display:block; width:100%; height:26px; margin:1px 0 0;
  background:transparent; cursor:pointer; touch-action:none}
.ic-range::-webkit-slider-runnable-track{height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--line) 0 var(--a,0%), var(--accent) var(--a,0%) var(--b,0%), var(--line) var(--b,0%) 100%)}
.ic-range::-moz-range-track{height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--line) 0 var(--a,0%), var(--accent) var(--a,0%) var(--b,0%), var(--line) var(--b,0%) 100%)}
.ic-range[data-v="mag"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg, transparent calc(50% - 1px), var(--ink-soft) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
             linear-gradient(90deg, var(--line) 0 var(--a,0%), var(--accent) var(--a,0%) var(--b,0%), var(--line) var(--b,0%) 100%)}
.ic-range[data-v="mag"]::-moz-range-track{
  background:linear-gradient(90deg, transparent calc(50% - 1px), var(--ink-soft) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
             linear-gradient(90deg, var(--line) 0 var(--a,0%), var(--accent) var(--a,0%) var(--b,0%), var(--line) var(--b,0%) 100%)}
.ic-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px;
  border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.28)}
.ic-range::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--accent);
  box-shadow:0 1px 5px rgba(0,0,0,.28)}
.ic-range:focus{outline:none}
.ic-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-soft)}
.ic-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--accent-soft)}

/* aviso al entrar en la vista limpia: se desvanece solo */
.inter-hint{position:absolute; left:50%; bottom:18px; z-index:3; transform:translate(-50%,8px);
  padding:7px 14px; border-radius:999px; background:rgba(20,24,34,.84); color:#fff;
  font:600 12.5px var(--ui); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s}
.inter-hint.show{opacity:1; transform:translate(-50%,0)}

/* vista limpia: solo los paneles y la marca (en el escritorio los mandos están
   en el panel de al lado, fuera de lo que se graba, y siguen a mano) */
.inter.limpio .inter-top .ib,.inter.limpio .inter-stage .inter-ctl{display:none}
.inter.limpio .inter-top{justify-content:center; padding:14px 12px 4px}
.inter.limpio .inter-sp{display:none}
.inter.limpio .inter-face{width:26px}
.inter.limpio .inter-brand .logo{font-size:19px}
.inter.limpio .inter-url{font-size:13.5px}

/* ---------- blanco y negro (solo el escenario) ----------
   Las variables del tema se redefinen dentro del escenario; los colores fijos
   de los diagramas (COL de analysis.js) y los rellenos translúcidos los pasa a
   negro y a trama interMonocromo(), que reescribe los ATRIBUTOS del SVG: así
   también salen en blanco y negro en el vídeo, que se compone desde ellos. */
.inter.mono .inter-stage{--paper:#fff; --panel:#fff; --panel-2:#fff; --ink:#000; --ink-soft:#000; --line:#000; --line-soft:#000;
  --accent:#000; --accent-2:#000; --accent-soft:#fff; --pload:#000; --load:#000; --dload:#000; --beam:#000; --truss:#000;
  --support:#000; --dim:#000; --settle:#000; --ok:#000; --danger:#000; background:#fff; color:#000; border-color:#000}
.inter.mono .inter-stage .ip{--c:#000 !important}
.inter.mono .inter-stage .ic-play{box-shadow:none}
.inter.mono .inter-stage .ic-range::-webkit-slider-thumb{border-color:#000}
/* escritorio: los mandos encabezan el panel de ajustes */
.inter-side .inter-ctl{flex:0 0 auto; padding:14px 16px 12px; border-top:none; border-bottom:1px solid var(--line-soft);
  background:var(--panel-2)}

/* ---------- ajustes ---------- */
.inter-side{display:flex; flex-direction:column; width:360px; flex-shrink:0; overflow:hidden;
  height:calc(100vh - 32px); height:calc(100dvh - 32px);
  background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.3)}
.inter-side-head{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:14px 16px 10px;
  border-bottom:1px solid var(--line-soft)}
.inter-side-t{flex:1; font-weight:800; font-size:15px}
#interClose2{display:none}                          /* en el escritorio ya está el del escenario */
.inter-cfg{flex:1 1 auto; overflow:auto; padding:12px 16px 18px}
.inter-side-foot{flex:0 0 auto; display:none; padding:12px 16px 12px; border-top:1px solid var(--line-soft)}

.ic-intro{margin:0 0 14px; font-size:13px; line-height:1.45; color:var(--ink-soft)}
.ic-sec{margin:0 0 18px}
.ic-sec h5{margin:0 0 8px; font:800 11.5px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.ic-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ic-chip{position:relative; display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 10px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--panel-2); cursor:pointer;
  font-size:12.5px; line-height:1.25; -webkit-user-select:none; user-select:none}
.ic-chip input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ic-chip .ic-sw{width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--c); border-radius:6px}
.ic-chip.on{border-color:var(--c); background:var(--panel-2)}
@supports (background:color-mix(in srgb, red 10%, white)){
  .ic-chip.on{background:color-mix(in srgb, var(--c) 10%, var(--panel))}
}
.ic-chip.on .ic-sw{background:var(--c)}
.ic-chip.on .ic-sw::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg)}
.ic-chip b{color:var(--c); font-weight:900; letter-spacing:.02em}
.ic-chip em{display:block; font-style:normal; font-size:10.5px; color:var(--ink-soft)}
.ic-chip.off{opacity:.42; cursor:not-allowed}
.ic-chip:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.ic-note{margin:8px 0 0; font-size:11.5px; line-height:1.45; color:var(--ink-soft)}
.ic-loads{display:flex; flex-direction:column; gap:6px; max-height:min(38vh,300px); overflow:auto; padding:2px}
.ic-load{position:relative; display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 11px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--panel-2); cursor:pointer; font-size:13px; line-height:1.3}
.ic-load input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ic-load.on{border-color:var(--accent); background:var(--accent-soft)}
.ic-load:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.ic-ico{width:22px; height:22px; flex-shrink:0}
.ic-field{display:flex; flex-direction:column; gap:6px; margin-top:12px; font-size:12px; color:var(--ink-soft)}
.ic-field select{font:inherit; font-size:13px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:9px 10px}
.ic-chk{display:flex; align-items:center; gap:10px; min-height:40px; font-size:13px; cursor:pointer}
.ic-chk input{width:18px; height:18px; accent-color:var(--accent)}

/* ---------- teléfono: la pantalla entera ---------- */
@media (max-width:899px){
  .inter.open{padding:0; gap:0; background:var(--panel)}
  .inter-stage{width:100%; height:100%; min-width:0; border:none; border-radius:0; box-shadow:none}
  .inter-top{padding-top:calc(8px + env(safe-area-inset-top)); padding-left:14px}
  .inter-ctl{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .inter.limpio .inter-top{padding-top:calc(12px + env(safe-area-inset-top))}
  .inter.limpio .inter-panels{padding-bottom:env(safe-area-inset-bottom)}
  .ib-cfg{display:inline-flex}
  .inter-side{position:absolute; inset:0; z-index:4; width:auto; height:auto; border:none; border-radius:0; box-shadow:none}
  .inter-side-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .inter-side-foot{display:block; padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .inter-side-foot .btn{width:100%; justify-content:center; padding:13px; font-size:15px; font-weight:800}
  #interClose2{display:inline-flex}
  .inter[data-paso="vivo"] .inter-side{display:none}
  .inter[data-paso="cfg"] .inter-stage{visibility:hidden}
}
/* en un teléfono estrecho los cuatro botones no dejan sitio al título: queda la marca */
/* en un teléfono estrecho los botones no dejan sitio a la dirección: queda el
   logo; en la vista limpia (lo que se graba) vuelve a salir */
@media (max-width:430px){ .inter:not(.limpio) .inter-url{display:none} }
/* con el dedo: blancos de toque de 44 px y letra de 16 px en los selectores
   (Safari amplía la página al enfocar uno más pequeño) */
@media (pointer:coarse){
  .ib{width:40px; height:40px}
  .ic-play{width:46px; height:46px}
  .ic-range{height:36px}
  .ic-range::-webkit-slider-thumb{width:26px; height:26px; margin-top:-10px}
  .ic-range::-moz-range-thumb{width:21px; height:21px}
  .ic-field select{font-size:16px}
}
@media (prefers-reduced-motion: reduce){ .inter-hint{transition:none} }

/* ---------- selector de estilo (ajustes) ---------- */
.ic-estilos{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ic-est{position:relative; display:flex; align-items:center; gap:9px; min-height:52px; padding:7px 9px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--panel-2); cursor:pointer}
.ic-est input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.ic-est.on{border-color:var(--accent); background:var(--accent-soft)}
.ic-est:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.est-sw{width:34px; height:34px; border-radius:9px; flex-shrink:0; border:1px solid rgba(0,0,0,.18)}
.est-normal{background:linear-gradient(135deg,#c0392b 0 33%,#7d3cc0 33% 66%,#2f57c9 66%)}
.est-mono{background:repeating-linear-gradient(45deg,#000 0 1.5px,#fff 1.5px 5px)}
.est-lapiz{background:repeating-linear-gradient(40deg,#e67e22 0 1.3px,#fbf6e8 1.3px 4.5px)}
.est-acuarela{background:radial-gradient(circle at 30% 35%,#f6c177,transparent 60%),radial-gradient(circle at 72% 70%,#9fb8ee,transparent 62%),radial-gradient(circle at 70% 25%,#e99ab5,transparent 55%),#fdf9f0}
.est-blade{border-color:#24505e;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 1px,transparent 1px 3px),
    linear-gradient(118deg,transparent 0 38%,#ff4fa3 38% 45%,transparent 45%),
    radial-gradient(circle at 22% 18%,#37d6ff,transparent 58%),
    linear-gradient(0deg,#ff8a2a,#0b1115 85%)}
.ic-est:last-child:nth-child(odd){grid-column:1 / -1}
.est-t{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.est-t b{font-size:13px}
.est-t em{font-style:normal; font-size:11px; color:var(--ink-soft)}

/* ---------- mano alzada y acuarela: papel claro SIEMPRE (también con el tema
   oscuro) y las variables que usa el escenario redefinidas ---------- */
.inter.lapiz .inter-stage,.inter.acuarela .inter-stage{
  --panel-2:#f6efdb; --ink:#33323a; --ink-soft:#5f5b69; --line:#d8ccb0; --line-soft:#e6dcc4;
  --accent:#3d4aa0; --accent-2:#5866c9; --accent-soft:#e6e8f6; --pload:#1565c0; --load:#c0392b; --dload:#7d3cc0;
  --support:#33323a; --beam:#4a4a55; --dim:#7a7567; border-color:#33323a}
.inter.lapiz .inter-stage{--paper:#fbf6e8; --panel:#fbf6e8; background:#fbf6e8;
  --ui:'Patrick Hand','Segoe Print','Bradley Hand',cursive; --mono:'Patrick Hand','Segoe Print','Bradley Hand',cursive}
.inter.acuarela .inter-stage{--paper:#fdf9f0; --panel:#fdf9f0; background:#fdf9f0}
.inter.lapiz .ip-h{letter-spacing:.03em}
.inter.lapiz .inter-stage .ip-f{font-size:12.5px}
.inter.lapiz .inter-brand .logo,.inter.acuarela .inter-brand .logo{color:var(--ink)}

/* ---------- Blade Runner 2049: neón ámbar y cian sobre bruma oscura ----------
   Siempre oscuro (también con el tema claro). Las letras son Inconsolata en
   todo el escenario (rótulos de visor); los efectos —bruma, rejilla, neón, rayas
   de proyección, líneas de barrido y fallos de señal— los pinta
   interactivo-lienzo.js, así que pantalla y vídeo son lo mismo. */
.inter.blade .inter-stage{
  --paper:#070b0f; --panel:#070b0f; --panel-2:#0c141a; --ink:#d6f1f5; --ink-soft:#7fa8b3; --line:#1d3a45; --line-soft:#132731;
  --accent:#ff9a2e; --accent-2:#ffb457; --accent-soft:#2b1c0a; --pload:#ffa63d; --load:#ff7a2e; --dload:#ff9a2e;
  --beam:#bfe6ee; --truss:#bfe6ee; --support:#6fe3ff; --dim:#5f8e99; --settle:#ff4fa3; --ok:#3ff2c4; --danger:#ff3d6e;
  --ui:'Inconsolata','Consolas','Cascadia Code',ui-monospace,'DejaVu Sans Mono',monospace;
  --mono:'Inconsolata','Consolas','Cascadia Code',ui-monospace,'DejaVu Sans Mono',monospace;
  background:#070b0f; color:var(--ink); border-color:#24505e;
  box-shadow:0 0 0 1px #0a1a20, 0 0 42px rgba(55,214,255,.20), 0 24px 70px rgba(0,0,0,.55)}
.inter.blade .inter-stage .ip[data-k="E"]{--c:#d6f1f5 !important}
.inter.blade .inter-stage .ip[data-k="N"]{--c:#37d6ff !important}
.inter.blade .inter-stage .ip[data-k="V"]{--c:#ff4fa3 !important}
.inter.blade .inter-stage .ip[data-k="M"]{--c:#b07cff !important}
.inter.blade .inter-stage .ip[data-k="D"]{--c:#3ff2c4 !important}
.inter.blade .ip-h{font-weight:700; font-size:13px; letter-spacing:.14em}
.inter.blade .inter-stage .ip-f{font-size:13px}
.inter.blade .inter-brand .logo{color:var(--ink)}
.inter.blade .inter-stage .ic-play{color:#1a0f02; box-shadow:0 0 16px rgba(255,154,46,.55)}
.inter.blade .inter-stage .ic-range::-webkit-slider-thumb{background:#0b1115; border-color:var(--accent); box-shadow:0 0 9px rgba(255,154,46,.7)}
.inter.blade .inter-stage .ic-range::-moz-range-thumb{background:#0b1115; border-color:var(--accent); box-shadow:0 0 9px rgba(255,154,46,.7)}



/* Grabando: el escenario real se oculta (sigue maquetado: la grabación lo mide) y
   encima se ve el lienzo que se está grabando, con el indicador de grabación. */
.inter-previo{position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block; pointer-events:none}
.inter.grabando .inter-stage > :not(.inter-previo):not(.inter-recpill){visibility:hidden}