/* ============================================================
   ChipsLearning — Design System (dark premium, WCAG AA/AAA)
   Tokens según research/08-datos-pedagogia.md
   ============================================================ */
:root{
  --bg:#07090F; --bg2:#0B0E17; --surface:#10141F; --surface2:#151B29;
  --border:rgba(148,163,184,.14); --border2:rgba(148,163,184,.24);
  --text:#E8ECF4; --text2:#AAB4C8; --text3:#7C879E;
  --cyan:#22D3EE; --cyan2:#67E8F9; --cyan-ink:#67E8F9; /* ink = versión legible del acento para TEXTO pequeño (AA en ambos temas) */
  --violet:#8B5CF6; --violet2:#A78BFA; --violet-ink:#C4B5FD;
  --amber:#F59E0B; --amber-ink:#F59E0B; --orange:#FB923C; --orange-ink:#FDBA74; --green:#34D399; --green-ink:#6EE7B7; --red:#F87171; --red-ink:#FCA5A5; --pink:#F472B6;
  --lv0:#F59E0B; --lv1:#FB923C; --lv2:#22D3EE; --lv3:#8B5CF6; --lv4:#34D399;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --sp:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px;
  --tr:.22s cubic-bezier(.4,0,.2,1);
  --shadow:0 8px 32px rgba(2,4,10,.55), 0 2px 8px rgba(2,4,10,.4);
  --glow-cyan:0 0 0 1px rgba(34,211,238,.28), 0 8px 40px rgba(34,211,238,.14);
  --sidebar-w:296px; --topbar-h:64px;
}
[data-theme="light"]{
  --bg:#F5F7FB; --bg2:#EDF0F7; --surface:#FFFFFF; --surface2:#F2F5FA;
  --border:rgba(15,23,42,.10); --border2:rgba(15,23,42,.18);
  --text:#0F172A; --text2:#3D4A63; --text3:#5D6B82; /* ≥4.9:1 sobre --bg (antes #64748B ≈ 4.4:1, bajo AA) */
  --cyan-ink:#0E7490; /* teal oscuro 5,0:1 sobre #F5F7FB (5,36:1 sobre blanco) — texto cian pequeño en claro */
  --amber-ink:#B45309; /* ámbar oscuro 4,68:1 sobre #F5F7FB */
  /* ------------------------------------------------------------
     Sistema "ink" (V-3 · F0-WU11): tokens de acento legibles para TEXTO.
     Regla: cualquier TEXTO pequeño (<18,66px bold / <24px) pintado con un
     acento usa su variante -ink (≥4,5:1 sobre #F5F7FB, verificado WCAG 2.x).
     El acento puro (--cyan, --violet, --amber, --green, --orange, --red,
     --pink) queda reservado para fondos, bordes, trazos SVG decorativos y
     grandes titulares con decoración (p. ej. .hero h1 .grad).
     Para acentos DINÁMICOS inyectados por JS (--c del dashboard, --lv por
     nivel) el texto usa color-mix 50 % acento + 50 % texto (ver reglas V-3).
     ------------------------------------------------------------ */
  --violet-ink:#6D28D9;  /* violeta 6,62:1 sobre #F5F7FB */
  --green-ink:#047857;   /* verde 5,11:1 */
  --orange-ink:#C2410C;  /* naranja 4,83:1 */
  --red-ink:#B91C1C;     /* rojo 6,03:1 */
  --shadow:0 8px 28px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
  --glow-cyan:0 0 0 1px rgba(8,145,178,.30), 0 8px 32px rgba(8,145,178,.12);
}
/* --------------------------------------------------------------
   V-3 (F0-WU11): en claro, el TEXTO pequeño con acento puro pasa a -ink.
   Fondos, bordes, trazos SVG y titulares decorativos conservan el puro.
   Ratios ≥4,5:1 verificados con la fórmula WCAG 2.x (docs/megaplan-v9.md §F0-WU11).
   -------------------------------------------------------------- */
[data-theme="light"] :is(.hero-badge,.brand-name em,.quiz-result .big){color:var(--cyan-ink)}
[data-theme="light"] .callout.deep .co-label{color:var(--violet-ink)}
[data-theme="light"] :is(.badge-done,.sb-ch.done .n,.sb-ch .st.ok,.quiz-head .score b,.q-opt.correct .k,.ch-foot .btn.done-btn,.toast.ok::before,.callout.feynman .co-label,.term-extra .tx.apply b){color:var(--green-ink)}
[data-theme="light"] :is(.callout.analogy .co-label,.term-extra .tx.misread b,.diff-pill.d2){color:var(--amber-ink)}
[data-theme="light"] .diff-pill.d3{color:var(--red-ink)}
/* Valores con acento DINÁMICO inyectado por JS: --c (dashboard, app.js:102-106)
   y --lv = var(--lv0..4) (niveles/sims). color-mix 50 % acento + 50 % texto
   garantiza ≥4,85:1 para los 7 acentos sobre blanco/#F5F7FB conservando el tono. */
[data-theme="light"] .stat .v{color:color-mix(in srgb,var(--c,var(--cyan)) 50%,var(--text))}
[data-theme="light"] :is(.statstrip .cv,.sb-level-title,.level-badge,.chcard .num,.ring,.ch-crumb,.sec-num,.interactive .in-badge){color:color-mix(in srgb,var(--lv,var(--cyan)) 50%,var(--text))}
*{margin:0;padding:0;box-sizing:border-box}
/* NOTA: sin scroll-behavior:smooth — con smooth, el scrollIntoView programático/automatizado nunca se estabiliza */
/* topbar fijo: deja hueco al hacer scroll-into-view de cualquier elemento interactivo */
button, input, select, a, [tabindex], .section { scroll-margin-top: 84px; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
#bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(245,158,11,.05), transparent 60%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:auto,auto,auto,56px 56px,56px 56px;
  opacity:.5; mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--cyan);color:#04222B;font-weight:700;padding:10px 18px;border-radius:var(--r-sm);transition:top var(--tr)}
.skip-link:focus{top:12px}
::selection{background:rgba(34,211,238,.32)}
a{color:var(--cyan-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
button{font-family:inherit;cursor:pointer;color:inherit}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:100;
  display:flex;align-items:center;gap:var(--sp4);padding:0 var(--sp5);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none!important}
.brand-logo{width:30px;height:30px}
.brand-logo .chip-body{fill:var(--surface2);stroke:var(--cyan);stroke-width:6}
.brand-logo .chip-pin{fill:var(--cyan)}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.2px}
.brand-name em{font-style:normal;color:var(--cyan)}
.topbar-center{flex:1;min-width:0;display:flex;justify-content:center}
.topbar-actions{display:flex;align-items:center;gap:var(--sp3)}
.lang-switch{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px}
.lang-btn{border:none;background:transparent;color:var(--text3);font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:999px;transition:all var(--tr);letter-spacing:.4px}
.lang-btn.active{background:var(--cyan);color:#04222B}
.lang-btn:not(.active):hover{color:var(--text)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text2);transition:all var(--tr)}
.icon-btn:hover{color:var(--text);border-color:var(--border2);transform:translateY(-1px)}
[data-theme="dark"] .ico-sun,[data-theme="dark"] .ico-sun-rays{display:none}
[data-theme="light"] .ico-moon{display:none}
.only-mobile{display:none}

/* ---------- Layout ---------- */
.layout{display:flex;padding-top:var(--topbar-h)}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:var(--sp5) var(--sp4) var(--sp8);
  border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.main{flex:1;min-width:0;padding:var(--sp7) var(--sp8) var(--sp8);max-width:1180px;margin:0 auto}
.footer{border-top:1px solid var(--border);padding:var(--sp5);text-align:center;color:var(--text3);font-size:13px}

/* ---------- Sidebar ---------- */
.sb-progress{margin:0 var(--sp2) var(--sp5)}
.sb-progress-bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--border)}
.sb-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .6s cubic-bezier(.4,0,.2,1)}
.sb-progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);margin-top:6px;font-weight:600}
.sb-level{margin-bottom:var(--sp5)}
.sb-level-title{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--lv,var(--text3));display:flex;align-items:center;gap:8px;margin:0 var(--sp2) var(--sp2)}
.sb-level-title .dot{width:8px;height:8px;border-radius:50%;background:var(--lv);box-shadow:0 0 10px var(--lv)}
.sb-ch{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);padding:8px 10px;color:var(--text2);font-size:13.5px;line-height:1.35;transition:all var(--tr);font-weight:500;
}
.sb-ch:hover{background:var(--surface);color:var(--text)}
.sb-ch.active{background:var(--surface);border-color:var(--border2);color:var(--text)}
.sb-ch .n{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11.5px;font-weight:600;background:var(--surface2);border:1px solid var(--border);color:var(--text3)}
.sb-ch.done .n{background:color-mix(in srgb,var(--green) 18%,transparent);border-color:rgba(52,211,153,.4);color:var(--green)}
.sb-ch.done{color:var(--text2)}
.sb-ch .t{flex:1;min-width:0}
.sb-ch .st{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;color:var(--text3)}
.sb-ch .st.ok{color:var(--green)}

/* ---------- Hero / Dashboard ---------- */
.hero{position:relative;border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp8);overflow:hidden;background:
  radial-gradient(600px 300px at 85% 0%, rgba(139,92,246,.16), transparent 60%),
  radial-gradient(500px 260px at 5% 100%, rgba(34,211,238,.12), transparent 60%), var(--surface);}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);padding:6px 14px;border-radius:999px;margin-bottom:var(--sp4)}
.hero h1{font-family:var(--font-display);font-size:clamp(30px,4.4vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.5px;max-width:820px}
.hero h1 .grad{background:linear-gradient(92deg,var(--cyan) 0%,var(--violet2) 60%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:var(--sp4);max-width:680px;color:var(--text2);font-size:17px}
.hero-cta{display:flex;gap:var(--sp3);margin-top:var(--sp6);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;border-radius:14px;padding:13px 26px;border:1px solid transparent;transition:all var(--tr);text-decoration:none!important}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#0891B2);color:#03222B;box-shadow:var(--glow-cyan)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(34,211,238,.5),0 14px 44px rgba(34,211,238,.25)}
.btn-ghost{background:var(--surface);border-color:var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-ink);transform:translateY(-2px)}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp6);container-type:inline-size}
.hero-copy{min-width:0;position:relative;z-index:1}
.hero-art{display:none;align-items:center;justify-content:center;min-width:0}
.hero-chip{position:static;max-width:100%;height:auto;opacity:.9;pointer-events:none}
@media(min-width:1500px){.hero{grid-template-columns:minmax(0,1.6fr) minmax(220px,.7fr)}.hero-art{display:flex}.hero h1{font-size:clamp(30px,3.2vw,48px)}}

.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp4);margin-top:var(--sp7)}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp5);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--c,var(--cyan)),transparent)}
.stat .v{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--c,var(--cyan));font-variant-numeric:tabular-nums}
.stat .l{font-size:12.5px;color:var(--text3);font-weight:600;margin-top:2px}

/* ---------- Levels & chapter cards ---------- */
.level-section{margin-top:var(--sp8)}
.level-head{display:flex;align-items:center;gap:var(--sp4);margin-bottom:var(--sp4)}
.level-badge{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;padding:7px 16px;border-radius:999px;border:1px solid;color:var(--lv);background:color-mix(in srgb,var(--lv) 12%,transparent)}
.level-head h2{font-family:var(--font-display);font-size:clamp(20px,2.6vw,28px);letter-spacing:-.3px}
.level-head .sub{color:var(--text3);font-size:13.5px;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp4)}
.chcard{
  position:relative;display:flex;flex-direction:column;gap:var(--sp3);text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp5);
  color:var(--text);transition:all var(--tr);overflow:hidden;min-height:190px;
}
.chcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--lv) 55%,var(--border));box-shadow:0 14px 44px rgba(2,4,10,.5)}
.chcard::after{content:"";position:absolute;inset:0;background:radial-gradient(340px 140px at 100% 0%,color-mix(in srgb,var(--lv) 14%,transparent),transparent 70%);opacity:0;transition:opacity var(--tr);pointer-events:none}
.chcard:hover::after{opacity:1}
.chcard .top{display:flex;align-items:flex-start;gap:var(--sp3)}
.chcard .num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--lv);border:1px solid color-mix(in srgb,var(--lv) 45%,transparent);background:color-mix(in srgb,var(--lv) 10%,transparent);border-radius:9px;padding:4px 9px}
.chcard h3{font-family:var(--font-display);font-size:17.5px;line-height:1.3;font-weight:600;flex:1}
.chcard p{color:var(--text2);font-size:13.5px;line-height:1.55;flex:1}
.chcard .meta{display:flex;align-items:center;gap:var(--sp3);font-size:12px;color:var(--text3);font-weight:600}
.chcard .meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text3)}
.ring{--p:0;width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--lv);font-variant-numeric:tabular-nums}
.ring svg{position:absolute;inset:0;width:34px;height:34px;transform:rotate(-90deg)}
.ring .bg{stroke:var(--surface2);fill:none;stroke-width:3.4}
.ring .fg{stroke:var(--lv);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:calc(88.4px);stroke-dashoffset:calc(88.4px*(1 - var(--p)));transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.badge-done{position:absolute;top:14px;right:14px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:.6px;display:flex;align-items:center;gap:5px}

/* ---------- Chapter page ---------- */
.ch-hero{margin-bottom:var(--sp7)}
.ch-crumb{font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--lv,var(--cyan));display:flex;align-items:center;gap:8px}
.ch-crumb .dot{width:7px;height:7px;border-radius:50%;background:var(--lv,var(--cyan));box-shadow:0 0 10px var(--lv,var(--cyan))}
.ch-hero h1{font-family:var(--font-display);font-size:clamp(26px,3.6vw,42px);line-height:1.15;letter-spacing:-.4px;margin-top:var(--sp3);max-width:900px}
.ch-hero .tagline{color:var(--text2);font-size:17px;margin-top:var(--sp3);max-width:760px}
.ch-meta{display:flex;gap:var(--sp4);flex-wrap:wrap;margin-top:var(--sp4);color:var(--text3);font-size:13px;font-weight:600}
.section{margin:var(--sp7) 0;scroll-margin-top:calc(var(--topbar-h) + 16px)}
.sec-head{display:flex;align-items:center;gap:var(--sp4);margin-bottom:var(--sp4)}
.sec-num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--lv,var(--cyan));background:color-mix(in srgb,var(--lv,var(--cyan)) 12%,transparent);border:1px solid color-mix(in srgb,var(--lv,var(--cyan)) 35%,transparent);padding:5px 12px;border-radius:9px}
.sec-head h2{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);letter-spacing:-.3px;line-height:1.25}
.sec-lead{font-size:16.5px;color:var(--text2);font-weight:500;border-left:3px solid var(--lv,var(--cyan));padding-left:var(--sp4);margin-bottom:var(--sp5);max-width:860px}
.prose p{margin-bottom:var(--sp4);max-width:840px;color:var(--text);font-size:16px}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--text);font-weight:700}
.prose i,.prose em{color:var(--cyan-ink)}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--surface2);border:1px solid var(--border);padding:1.5px 7px;border-radius:7px;color:var(--cyan-ink)}
.prose code{overflow-wrap:anywhere;word-break:break-word;box-decoration-break:clone}
.term>summary>*{min-width:0;overflow-wrap:anywhere}
.prose .formula{font-family:var(--font-mono);display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp4) var(--sp5);margin:var(--sp4) 0;color:var(--cyan-ink);font-size:14.5px;overflow-x:auto;text-align:center}
.callout{border-radius:var(--r-md);padding:var(--sp5);margin:var(--sp5) 0;border:1px solid;position:relative}
.callout .co-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:var(--sp3)}
.callout.analogy{background:color-mix(in srgb,var(--amber) 7%,var(--surface));border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.callout.analogy .co-label{color:var(--amber)}
.callout.deep{background:color-mix(in srgb,var(--violet) 8%,var(--surface));border-color:color-mix(in srgb,var(--violet) 35%,transparent)}
.callout.deep .co-label{color:var(--violet2)}
.callout.feynman{background:color-mix(in srgb,var(--green) 7%,var(--surface));border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.callout.feynman .co-label{color:var(--green)}
.callout.feynman .reveal{margin-top:var(--sp3)}
/* reveal genérico (repaso de flashcards, apply {q,a}) — mismo lenguaje que Feynman */
details.reveal summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--cyan-ink)}
details.reveal summary:hover{color:var(--cyan-ink);text-decoration:underline}
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp3);margin:var(--sp5) 0}
.term{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:0;overflow:hidden;transition:border-color var(--tr),box-shadow var(--tr)}
.term:hover,.term[open]{border-color:color-mix(in srgb,var(--cyan) 40%,var(--border))}
.term[open]{box-shadow:var(--glow-cyan)}
.term>summary{list-style:none;cursor:pointer;padding:var(--sp4);display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start}
.term>summary::-webkit-details-marker{display:none}
.term .term-emoji{font-size:20px;line-height:1.2;grid-row:1 / span 2}
.term .t{font-weight:700;font-size:14px;color:var(--cyan-ink)}
.term .d{font-size:13px;color:var(--text2);line-height:1.55}
.term .term-hint{grid-column:2;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)}
.term-extra{padding:0 var(--sp4) var(--sp4);display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--border)}
.term-extra .tx{font-size:12.5px;color:var(--text2);line-height:1.55;margin-top:10px}
.term-extra .tx b{display:block;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:3px}
.term-extra .tx.misread b{color:var(--amber)}
.term-extra .tx.apply b{color:var(--green)}
/* v3: cifras con unidad destacadas (dual coding) + fuente del término */
.num{font-family:var(--font-mono);font-weight:600;color:var(--cyan-ink)}
.term-src{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:4px}
.fc-missing{font-size:12.5px;color:var(--amber-ink);font-style:italic}
.apply-check{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
.apply-in{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);padding:6px 10px;font-size:13px;min-width:120px;font-family:var(--font-mono)}
.apply-in:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.flash-srs{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.flashcard .fc-face{position:absolute;top:16px;right:20px;font-family:var(--font-mono);font-size:11px;color:var(--cyan-ink)}
.chip-inspector{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp3)}
.chip-inspector button{font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text2)}
.chip-inspector button.active{border-color:var(--cyan);color:var(--cyan-ink);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.part-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp3)}
.part-list button{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text2)}
.part-list button:hover,.part-list button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan-ink)}
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp3);margin:var(--sp6) 0}
.statstrip .cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp4)}
.statstrip .cv{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--lv,var(--cyan));font-variant-numeric:tabular-nums}
.statstrip .cv small{font-size:12px;color:var(--text3);font-weight:600}
.statstrip .cl{font-size:11.5px;color:var(--text3);font-weight:600;margin-top:3px}
.statstrip .cs{font-size:10px;color:var(--text3);margin-top:6px;opacity:.8}
.chapter-evidence{border:1px solid var(--border2);border-radius:var(--r-md);padding:var(--sp4) var(--sp5);margin:var(--sp5) 0;background:var(--surface)}
.chapter-evidence>summary{cursor:pointer;font-weight:600;color:var(--text2);font-size:14px}
.chapter-evidence>summary span{font:12px var(--font-mono);margin-left:8px;color:var(--cyan-ink)}
.chapter-evidence .statstrip{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.statstrip .cell-prose{grid-column:1/-1;display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);gap:8px 24px;align-items:start}
.cell-prose .cv{grid-row:span 3}.statstrip .cl,.statstrip .stat-unit{font-size:14px;color:var(--text2);line-height:1.65;font-weight:400;overflow-wrap:anywhere}
.statstrip .cs{font-size:12px;line-height:1.6;opacity:1;overflow-wrap:anywhere}
.lesson-map{border:1px solid var(--border2);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp5);margin:var(--sp5) 0 var(--sp6)}
.lesson-map-head{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:var(--sp4)}
.lesson-map-head strong{font:600 19px var(--font-display)}.lesson-map-head>span{color:var(--text2);font-size:13px}
.lesson-map-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:8px;margin-bottom:16px}
.lesson-map-links button{display:flex;gap:12px;align-items:center;text-align:left;font:500 13px/1.5 var(--font-body);color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;min-height:48px;cursor:pointer}
.lesson-map-links button:hover{border-color:var(--cyan-ink);color:var(--text)}
.lesson-map-links button>span{font:12px var(--font-mono);color:var(--cyan-ink)}.lesson-map-links small{margin-left:auto;font-size:10px;color:var(--cyan-ink);white-space:nowrap}
.lesson-lab-link{font:600 13px var(--font-body);color:var(--cyan-ink);background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:12px 16px;min-height:44px;margin:0 0 24px;cursor:pointer}
.ic-slots{scroll-margin-top:calc(var(--topbar-h) + 20px)}
.lab-pending{min-height:400px;display:grid;place-items:center;border:1px solid var(--border2);border-radius:var(--r-lg);background:var(--surface);margin:24px 0;text-align:center;padding:24px;color:var(--text2)}
.lab-pending span{font:600 13px var(--font-mono);color:var(--cyan-ink)}.lab-pending p{margin:14px 0}
.expert-disclosure>summary{cursor:pointer;display:list-item;margin:0;font-size:12px}
.expert-disclosure[open]>summary{margin-bottom:16px}.expert-body{font-size:15px;line-height:1.8;color:var(--text2);max-width:78ch}
.lesson-map button:focus-visible,.lesson-lab-link:focus-visible,.chapter-evidence>summary:focus-visible,.expert-disclosure>summary:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:4px}
@media(max-width:560px){.statstrip .cell-prose{display:block}.cell-prose .cv{margin-bottom:12px}.lesson-map{padding:16px}.chapter-evidence{padding:16px}.lesson-map-links small{display:none}}

/* ---------- Interactive container ---------- */
.interactive{
  background:linear-gradient(180deg,color-mix(in srgb,var(--lv,var(--cyan)) 5%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--lv,var(--cyan)) 30%,var(--border));border-radius:var(--r-lg);
  padding:var(--sp5);margin:var(--sp6) 0;position:relative;
}
.interactive .in-head{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp4);flex-wrap:wrap}
.interactive .in-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--lv,var(--cyan));border:1px solid color-mix(in srgb,var(--lv,var(--cyan)) 40%,transparent);padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--lv,var(--cyan)) 10%,transparent)}
.interactive .in-title{font-family:var(--font-display);font-size:16px;font-weight:600}
.interactive .in-help{font-size:12.5px;color:var(--text3);margin-left:auto}
.viewport{position:relative;border-radius:var(--r-md);overflow:hidden;background:radial-gradient(600px 320px at 50% 0%,rgba(34,211,238,.07),transparent),#05070D;border:1px solid var(--border)}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0 4px;font-size:12px;color:var(--text3)}
.legend .li{display:inline-flex;align-items:center;gap:7px}
.legend .sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex-shrink:0}
.viewport canvas{display:block;width:100%;touch-action:none}
.viewport canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.vp-3d{height:440px;cursor:grab}
.vp-3d:active{cursor:grabbing}
.vp-2d{height:var(--vp-h, 380px)}
.ctl-row{display:flex;gap:var(--sp4);flex-wrap:wrap;align-items:center;margin-top:var(--sp4)}
.ctl{display:flex;flex-direction:column;gap:6px;min-width:170px;flex:1;max-width:280px}
.ctl label{font-size:12px;font-weight:700;color:var(--text2);display:flex;justify-content:space-between}
.ctl label .val{font-family:var(--font-mono);color:var(--cyan-ink)}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);outline-offset:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--cyan);border:3px solid #04222B;box-shadow:0 0 0 3px rgba(34,211,238,.25);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cyan);border:3px solid #04222B;cursor:grab}
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:none;background:transparent;color:var(--text3);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:9px;transition:all var(--tr)}
.seg button.active{background:var(--cyan);color:#04222B}
.seg button:not(.active):hover{color:var(--text)}
.play-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);font-weight:700;font-size:13px;padding:8px 16px;border-radius:11px;transition:all var(--tr)}
.play-btn:hover{color:var(--cyan-ink);border-color:var(--cyan)}
.info-panel{margin-top:var(--sp4);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp4);min-height:64px}
.info-panel .ip-title{font-weight:700;font-size:14px;color:var(--cyan-ink)}
.info-panel .ip-body{font-size:13px;color:var(--text2);margin-top:4px;line-height:1.55}
.readout{display:flex;gap:var(--sp4);flex-wrap:wrap;margin-top:var(--sp4)}
.readout .ro{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 14px;font-size:12.5px;color:var(--text2)}
.readout .ro b{font-family:var(--font-mono);color:var(--cyan-ink);font-size:14px}

/* ---------- Quiz ---------- */
.quiz-wrap{margin:var(--sp7) 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp6)}
.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;margin-bottom:var(--sp5)}
.quiz-head h2{font-family:var(--font-display);font-size:22px}
.quiz-head .score{font-family:var(--font-mono);font-size:13px;color:var(--text3)}
.quiz-head .score b{color:var(--green)}
.qq{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp5);margin-bottom:var(--sp4);background:var(--surface2)}
.qq .q-text{font-weight:600;font-size:15.5px;line-height:1.5}
.qq .q-meta{display:flex;gap:var(--sp3);align-items:center;margin-bottom:var(--sp3)}
.diff-pill{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.diff-pill.d1{color:var(--green);background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35)}
.diff-pill.d2{color:var(--amber);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35)}
.diff-pill.d3{color:var(--red);background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35)}
.q-opts{display:grid;gap:var(--sp2);margin-top:var(--sp3)}
.q-opt{display:flex;gap:var(--sp3);align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.5;color:var(--text2);transition:all var(--tr)}
.q-opt:hover:not(:disabled){border-color:var(--cyan);color:var(--text);transform:translateX(3px)}
.q-opt:disabled{cursor:default;opacity:.85}
.q-opt .k{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text3);border:1px solid var(--border);border-radius:7px;padding:2px 8px;flex-shrink:0;margin-top:1px}
.q-opt.correct{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.10);color:var(--text)}
.q-opt.correct .k{color:var(--green);border-color:rgba(52,211,153,.4)}
.q-opt.wrong{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08)}
.q-why{margin-top:var(--sp3);font-size:13.5px;color:var(--text2);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:10px;padding:12px 16px;line-height:1.6}
.quiz-actions{display:flex;gap:var(--sp3);flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:var(--sp5)}
.quiz-result{text-align:center;padding:var(--sp6);border-radius:var(--r-md);background:var(--surface2);border:1px solid var(--border)}
.quiz-result .big{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--cyan)}
.flash-wrap{margin:var(--sp6) 0}
.flashcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp7);text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:var(--sp4);cursor:pointer;transition:all var(--tr);position:relative}
.flashcard:hover{border-color:var(--border2)}
.flashcard .fc-side{position:absolute;top:16px;left:20px;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--text3);text-transform:uppercase}
.flashcard .fc-t{font-family:var(--font-display);font-size:22px;font-weight:600}
.flashcard .fc-d{color:var(--text2);font-size:15.5px}

/* ---------- Chapter footer nav ---------- */
.ch-foot{display:flex;justify-content:space-between;gap:var(--sp4);margin-top:var(--sp8);flex-wrap:wrap}
.ch-foot .btn.done-btn{border-color:rgba(52,211,153,.4);color:var(--green)}
.sources-box{margin-top:var(--sp6);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp5)}
.sources-box h3{font-family:var(--font-display);font-size:15px;margin-bottom:var(--sp3)}
.sources-box ol{padding-left:20px;color:var(--text2);font-size:13px;line-height:1.8}
.sources-box li{margin-bottom:4px;word-break:break-word}

/* ---------- Toast ---------- */
#toast-root{position:fixed;bottom:24px;right:24px;z-index:300;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--surface);border:1px solid var(--border2);color:var(--text);border-radius:14px;padding:13px 20px;font-size:14px;font-weight:600;box-shadow:var(--shadow);animation:toast-in .3s cubic-bezier(.4,0,.2,1);display:flex;gap:10px;align-items:center}
.toast.ok{border-color:rgba(52,211,153,.45)}
.toast.ok::before{content:"✓";color:var(--green);font-weight:800}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .sidebar{position:fixed;left:0;top:var(--topbar-h);z-index:90;transform:translateX(-105%);transition:transform var(--tr);background:var(--bg2);box-shadow:var(--shadow);width:300px}
  .sidebar.open{transform:none}
  .main{padding:var(--sp5) var(--sp4) var(--sp7)}
  .only-mobile{display:inline-flex}
  .hero{padding:var(--sp6) var(--sp5)}
  .topbar{padding:0 var(--sp4)}
  .brand-name{display:none}
}
@media(max-width:560px){
  .vp-3d{height:340px}.vp-2d{height:min(var(--vp-h, 380px), 320px)}
  .quiz-wrap{padding:var(--sp4)}
  .cards{grid-template-columns:1fr}
}
@media print{.topbar,.sidebar,.interactive,#bg-grid{display:none!important}.main{padding:0}}

/* ============================================================
   Motor v4 (sim4) — simuladores theme-aware premium
   Los sims v4 SIGUEN el tema (dark/light): el viewport y todos sus
   elementos usan tokens; nada de cajas oscuras externas en claro.
   ============================================================ */
.viewport.vp4{background:radial-gradient(600px 320px at 50% 0%,color-mix(in srgb,var(--cyan) 6%,transparent),transparent 70%),linear-gradient(180deg,var(--surface2),var(--bg2))}
[data-theme="light"] .viewport.vp4{background:radial-gradient(600px 320px at 50% 0%,color-mix(in srgb,var(--cyan) 5%,transparent),transparent 70%),linear-gradient(180deg,#FFFFFF,var(--bg2))}
.sim4-caption{font-size:12.5px;color:var(--text3);margin-top:var(--sp3);line-height:1.6}
/* sr-only live region para lecturas de sims */
.sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Inspector de piezas (click-to-inspect) */
.sim4-inspect{margin-top:var(--sp4);background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-md);padding:var(--sp4);box-shadow:var(--shadow)}
.sim4-inspect[hidden]{display:none}
.sim4-inspect .si-head{display:flex;align-items:center;gap:10px}
.sim4-inspect .si-dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent)}
.sim4-inspect .si-title{font-family:var(--font-display);font-size:14.5px}
.sim4-inspect .si-sub{font-size:12.5px;color:var(--text3);margin:4px 0 10px 20px}
.sim4-inspect .si-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 18px}
.sim4-inspect .si-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text2);border-bottom:1px dashed var(--border);padding:5px 2px}
.sim4-inspect .si-row b{font-family:var(--font-mono);color:var(--cyan-ink);font-size:12px;text-align:right}
.sim4-inspect .si-src{font-size:11.5px;color:var(--text3);margin-top:10px}
.sim4-inspect .si-close{margin-left:auto;border:none;background:transparent;color:var(--text3);font-size:16px;width:26px;height:26px;border-radius:8px;cursor:pointer}
.sim4-inspect .si-close:hover{color:var(--text);background:var(--surface)}
/* Tour guiado paso a paso */
/* v9 r2 C2 (visual-ch01 P2 · J3-r1#1): con la tarjeta de predicción visible, .tour-pred (ítem flex intermedio)
   aplastaba .tour-txt a ~10-15 caracteres a 1280 px. Fix: la fila permite envolver y .tour-txt conserva
   base ≥45% del ancho — sin predicción el resultado es idéntico al anterior (txt crece hasta nav). */
.sim4-tour{scroll-margin-top:84px}
.sim4-tour{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp4);margin-top:var(--sp4);background:linear-gradient(90deg,color-mix(in srgb,var(--cyan) 10%,var(--surface2)),var(--surface2));border:1px solid color-mix(in srgb,var(--cyan) 35%,var(--border));border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow)}
.sim4-tour[hidden]{display:none}
.sim4-tour .tour-txt{flex:1 1 45%;font-size:13px;color:var(--text2);line-height:1.55}
.sim4-tour .tour-nav{display:flex;align-items:center;gap:8px}
.sim4-tour .tour-step{font-family:var(--font-mono);font-size:11.5px;color:var(--text3);min-width:38px;text-align:center}
.sim4-tour .tour-btn{border:1px solid var(--border2);background:var(--surface);color:var(--text2);width:30px;height:30px;border-radius:9px;font-size:14px;cursor:pointer;transition:all var(--tr)}
.sim4-tour .tour-btn:hover:not(:disabled){color:var(--cyan-ink);border-color:var(--cyan);transform:translateY(-1px)}
.sim4-tour .tour-btn:disabled{opacity:.35;cursor:default}
/* Botón de lanzar tour */
.sim4-tourlaunch{border:1px dashed color-mix(in srgb,var(--cyan) 45%,var(--border2));background:transparent;color:var(--cyan-ink);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:10px;cursor:pointer;transition:all var(--tr)}
.sim4-tourlaunch:hover{background:color-mix(in srgb,var(--cyan) 8%,transparent);border-style:solid}
/* tooltip DOM de escenas 3D v4 (sigue al cursor dentro del viewport) */
.sim3d-tip{position:absolute;z-index:5;pointer-events:none;max-width:280px;background:rgba(10,15,26,.96);border:1px solid rgba(34,211,238,.55);border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.5;color:#AAB4C8;box-shadow:0 8px 24px rgba(2,4,10,.5)}
[data-theme="light"] .sim3d-tip{background:rgba(255,255,255,.98);color:#3D4A63;border-color:rgba(8,145,178,.45)}

/* Predicción antes de revelar (retrieval activa, criterio 7 de la rúbrica) */
.sim4-predict{margin-top:var(--sp4);background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 12%,var(--surface2)),var(--surface2));border:1px solid color-mix(in srgb,var(--amber) 45%,var(--border));border-radius:var(--r-md);padding:14px 16px}
.sim4-predict .sp-q{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:10px}
.sim4-predict .sp-opts{display:flex;gap:8px;flex-wrap:wrap}
.sim4-predict .sp-opt{border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-weight:700;font-size:13px;padding:9px 16px;border-radius:10px;cursor:pointer;transition:all var(--tr);min-height:24px}
.sim4-predict .sp-opt:hover:not(:disabled){color:var(--amber-ink);border-color:var(--amber);transform:translateY(-1px)}
.sim4-predict .sp-opt.ok{background:color-mix(in srgb,var(--green) 18%,var(--surface));border-color:var(--green);color:var(--text)}
.sim4-predict .sp-opt.ko{background:color-mix(in srgb,var(--red) 12%,var(--surface));border-color:var(--red)}
.sim4-predict .sp-opt:disabled{cursor:default;opacity:.85}
.sim4-predict .sp-fb{font-size:12.5px;color:var(--text2);margin-top:8px;min-height:16px}
.sim4-predict .sp-reveal{margin-top:8px;font-size:12.5px;color:var(--text2)}
.sim4-predict .sp-reveal summary{cursor:pointer;font-weight:700;color:var(--amber-ink)}
.sim4-predict .sp-reveal .sp-body{padding:8px 0 2px;line-height:1.6}
.sim4-tour .tour-pred{margin-top:8px}
.sim4-tour .tour-pred:empty{display:none}

.statstrip .cv sup.est{font-size:9px;color:var(--amber-ink);margin-left:2px;letter-spacing:.5px}

/* v9.1 F2-WU01 corrector C1 (auditoría a2 #13): legibilidad de la lista de piezas ≥12 px — regla única añadida por C1; el resto de la corrección 12px va inline en js/sim3d-chip.js */
.part-list button{font-size:12px}

/* Chip inspection and appearance, exhaustive review unit 4. */
.chip-explorer .chip-instance[hidden]{display:none}.chip-explorer .chip-part-group{flex-basis:100%;margin:10px 0 2px;font-weight:700;color:var(--text)}.chip-explorer .chip-instance select{max-width:100%;min-width:0}.chip-explorer .chip-explore{gap:10px}.chip-explorer .chip-explore-status{line-height:1.7}

.chip-focus-badge{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);padding:7px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font:600 12px var(--font-display),sans-serif;line-height:1.5;z-index:4;pointer-events:none}.chip-focus-badge[hidden]{display:none}
.chip-explorer .vp4{scroll-margin-top:84px}
.chip-inspection-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0}.chip-inspection-bar[hidden]{display:none}.chip-inspection-bar .chip-instance{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;font-size:13px;color:var(--text2)}.chip-inspection-bar select{min-width:0;max-width:100%;min-height:38px;background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;font:inherit}.chip-inspection-bar :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}