:root {
  color-scheme: dark;
  --bg: #1e2326;
  --elevated: #272e33;
  --raised: #2e383c;
  --surface-soft: rgba(30, 35, 38, 0.86);
  --accent: #a7c080;
  --strong: #dbbc7f;
  --text: #d3c6aa;
  --muted: #859289;
  --faint: #5c6a72;
  --line: rgba(167, 192, 128, 0.18);
  --inset: #1b2023;
  --vis-bg: #22292d;
  --chip: #374145;
  --chip-2: #2b3337;
  --bar-bg: rgba(30, 35, 38, 0.92);
  --float-bg: rgba(30, 35, 38, .75);
  --hair: rgba(211, 198, 170, .08);
  --hair-strong: rgba(211, 198, 170, .2);
  --scrim: rgba(14, 17, 19, .72);
  --accent-line: rgba(167, 192, 128, .45);
  --strong-line: rgba(219, 188, 127, .35);
  --glow: rgba(167, 192, 128, 0.07);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Everforest hues, one per area family */
  --green: #a7c080;
  --aqua: #83c092;
  --blue: #7fbbb3;
  --yellow: #dbbc7f;
  --orange: #e69875;
  --red: #e67e80;
  --purple: #d699b6;
}
/* Everforest light: used when picked, or when the device is light and nothing was picked */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --elevated: #f4f0d9;
  --raised: #efebd4;
  --surface-soft: rgba(244, 240, 217, 0.9);
  --accent: #7f9400;
  --strong: #b07d00;
  --text: #4d5b62;
  --muted: #6f7d6e;
  --faint: #939f91;
  --line: rgba(92, 106, 114, 0.18);
  --inset: #efebd4;
  --vis-bg: #f4f0d9;
  --chip: #e6e2cc;
  --chip-2: #e9e5cf;
  --bar-bg: rgba(253, 246, 227, 0.92);
  --float-bg: rgba(253, 246, 227, .85);
  --hair: rgba(92, 106, 114, .1);
  --hair-strong: rgba(92, 106, 114, .25);
  --scrim: rgba(92, 106, 114, .35);
  --accent-line: rgba(127, 148, 0, .45);
  --strong-line: rgba(176, 125, 0, .35);
  --glow: rgba(141, 161, 1, 0.08);
  --green: #8da101;
  --aqua: #35a77c;
  --blue: #3a94c5;
  --yellow: #c99400;
  --orange: #f57d26;
  --red: #f85552;
  --purple: #df69ba;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #fdf6e3;
  --elevated: #f4f0d9;
  --raised: #efebd4;
  --surface-soft: rgba(244, 240, 217, 0.9);
  --accent: #7f9400;
  --strong: #b07d00;
  --text: #4d5b62;
  --muted: #6f7d6e;
  --faint: #939f91;
  --line: rgba(92, 106, 114, 0.18);
  --inset: #efebd4;
  --vis-bg: #f4f0d9;
  --chip: #e6e2cc;
  --chip-2: #e9e5cf;
  --bar-bg: rgba(253, 246, 227, 0.92);
  --float-bg: rgba(253, 246, 227, .85);
  --hair: rgba(92, 106, 114, .1);
  --hair-strong: rgba(92, 106, 114, .25);
  --scrim: rgba(92, 106, 114, .35);
  --accent-line: rgba(127, 148, 0, .45);
  --strong-line: rgba(176, 125, 0, .35);
  --glow: rgba(141, 161, 1, 0.08);
  --green: #8da101;
  --aqua: #35a77c;
  --blue: #3a94c5;
  --yellow: #c99400;
  --orange: #f57d26;
  --red: #f85552;
  --purple: #df69ba;
  }
}


* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--glow), transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--strong); outline-offset: 2px; }

/* ---------- header ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) clamp(16px, 4vw, 40px) 12px;
  background: var(--bar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 720; letter-spacing: -0.3px; }
.brand img {
  width: 36px; height: 28px; object-fit: contain;
  filter: hue-rotate(72deg) saturate(0.78) brightness(0.96) drop-shadow(0 0 7px rgba(167, 192, 128, 0.28));
}
.brand b { color: var(--accent); font-weight: 720; }
.prefs { display: flex; gap: 6px; margin-left: auto; }
.pref {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}
.pref:hover { color: var(--text); border-color: var(--accent-line); }
.pref svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- page ---------- */
.page { padding: 34px clamp(18px, 5vw, 56px) calc(env(safe-area-inset-bottom, 0px) + 64px); max-width: 1000px; margin: 0 auto; }

/* ---------- home ---------- */
.home h1 { font-size: clamp(26px, 4vw, 42px); font-weight: 760; letter-spacing: -1.2px; line-height: 1.1; text-wrap: balance; max-width: 20ch; }
.home .lead { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 60ch; }
.tiles { list-style: none; margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--elevated);
  color: var(--text); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.tile .num { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.tile-title { font-size: 19px; font-weight: 760; letter-spacing: -.4px; }
.tile-short { color: var(--muted); font-size: 12.5px; line-height: 1.45; flex: 1; }
.tile-go { margin-top: 8px; color: var(--faint); font-size: 11px; font-weight: 700; }
.tiles li:first-child .tile-go { color: var(--accent); }

/* ---------- chapter ---------- */
.chapter { display: flex; flex-direction: column; gap: 16px; }
.cover { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-height: min(56vh, 460px); padding: 20px 0; }
.cover .ch-title { font-size: clamp(44px, 9vw, 96px); letter-spacing: -3px; line-height: .95; }
.cover-line { max-width: 26ch; color: var(--muted); font-size: clamp(18px, 2.6vw, 26px); line-height: 1.35; text-wrap: balance; }
.cover .mascot.big, .mascot.big { width: 84px; height: 84px; border-color: var(--cat); }
@media (prefers-reduced-motion: no-preference) { .cover:not([hidden]) > * { animation: fadeUp .45s ease both; } .cover .ch-title { animation-delay: .05s; } .cover-line { animation-delay: .12s; } }
.body { display: flex; flex-direction: column; gap: 18px; }
.react {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 3px solid var(--cat);
  color: var(--muted);
  font-size: .78em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 64ch;
}
@media (prefers-reduced-motion: no-preference) {
  .react.fresh { animation: fadeUp .3s ease; }
}
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } }
.ch-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.back-link { color: var(--muted); text-decoration: none; font-weight: 650; }
.back-link:hover { color: var(--accent); }
.ch-count { color: var(--faint); font-weight: 700; letter-spacing: 1px; }
.ch-title { font-size: clamp(30px, 5vw, 52px); font-weight: 780; letter-spacing: -1.6px; line-height: 1; }
.panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--glow), transparent 70%),
    var(--vis-bg);
  overflow: hidden;
}
.stage {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 32px);
}
.stage > * { width: 100%; }
.narration { min-height: calc(1.45em * 2); font-size: clamp(18px, 2.4vw, 24px); }
.narration p#beat-text { font-size: 1em; transition: opacity .2s ease; line-height: 1.45; font-weight: 650; letter-spacing: -.3px; color: var(--text); max-width: 62ch; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { .narration p#beat-text { animation: fadeUp .45s ease; } }
@keyframes fadeUp { from { transform: translateY(6px); } }
.beat-label { display: block; margin-bottom: 6px; color: var(--strong); font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }

/* ---------- shared scene pieces ---------- */
.mascot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--inset); border: 2px solid var(--accent-line);
  color: var(--accent); font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  box-shadow: 0 0 22px var(--glow);
}
.mascot img, .mascot img.x {
  width: 86%;
  height: auto;
  filter: hue-rotate(72deg) saturate(0.78) brightness(0.96) drop-shadow(0 0 6px rgba(167, 192, 128, 0.3));
}
:root[data-theme="light"] .mascot img { filter: hue-rotate(72deg) saturate(1.8) brightness(.62) contrast(1.2); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mascot img { filter: hue-rotate(72deg) saturate(1.8) brightness(.62) contrast(1.2); } }
.mascot.thinking { animation: think 1.2s ease-in-out infinite; }
@keyframes think { 50% { box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); } }
.msg { position: relative; max-width: 88%; padding: 8px 12px 9px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: var(--chip); }
.msg i { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.msg.ai, .msg.ia { background: color-mix(in srgb, var(--accent) 20%, var(--chip-2)); align-self: flex-end; }
.msg.ai:has(.mascot) { display: flex; gap: 10px; align-items: center; }
.msg .mascot { width: 36px; height: 36px; font-size: 9px; border-width: 1.5px; }
.note { color: var(--muted); font-size: 12.5px; text-align: center; }
.solid { min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--accent); color: var(--bg); font-size: 12.5px; font-weight: 750; cursor: pointer; }
.solid:disabled { opacity: .4; cursor: default; }
.ghost { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.ghost:hover { color: var(--text); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; text-align: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--inset); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--inset); }
.seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--bg); }
.seg button:disabled { cursor: default; }
.seg.big button { min-height: 36px; padding: 0 18px; font-size: 13px; }

/* 1. LLM */
.llm { display: flex; flex-direction: column; gap: 22px; max-width: 620px; margin: 0 auto; }
.llm-line { display: flex; align-items: center; gap: 16px; }
.sentence { font-size: clamp(17px, 2.6vw, 24px); font-weight: 700; line-height: 1.35; letter-spacing: -.3px; }
.sentence b { color: var(--accent); }
.caret { display: inline-block; width: 10px; height: 1.1em; margin-left: 4px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--inset); color: var(--text); font-size: 14px; font-weight: 700; overflow: hidden; cursor: pointer; text-align: left; }
.bar:disabled { cursor: default; }
.bar:not(:disabled):hover { border-color: var(--accent-line); }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .5s ease; }
.bar-word, .bar-p { position: relative; }
.bar-p { color: var(--muted); font-variant-numeric: tabular-nums; }
.llm-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }

/* 2. Context */
.ctx { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto; }
.ctx-out { display: flex; flex-direction: column; gap: 6px; }
.ctx-window { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 2px solid var(--accent); border-radius: 14px; }
.ctx-label { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.ctx-label span { color: var(--muted); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.meter { height: 5px; border-radius: 3px; background: var(--chip); overflow: hidden; margin-bottom: 4px; }
.meter span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.ctx .msg { max-width: 92%; }
.ctx .msg.you, .ctx .msg.tú { align-self: flex-start; }
.msg.gone { opacity: .3; font-size: 11.5px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.msg.gone i { display: none; }
.msg.oops { outline: 2px solid var(--red); }
.ctx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.warn { color: var(--red); font-size: 12.5px; font-weight: 700; }

/* 3. Agent */
.agent-plain { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin: 0 auto; }
.agent { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 620px; margin: 0 auto; }
.task { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 750; }
.task span { color: var(--strong); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.loop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phase { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 750; transition: all .25s ease; }
.phase.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.loop-arrow { color: var(--faint); }
.agent-core { display: flex; align-items: center; gap: 16px; }
.tools { display: flex; flex-wrap: wrap; gap: 7px; }
.tool { padding: 6px 11px; border-radius: 8px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; font-weight: 700; transition: all .25s ease; }
.tool.on { border-style: solid; border-color: var(--strong); color: var(--strong); box-shadow: 0 0 16px color-mix(in srgb, var(--strong) 35%, transparent); }
.log { list-style: none; display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; padding: 10px; border-radius: 10px; background: var(--inset); font-size: 12.5px; min-height: 44px; }
.log li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; animation: fadeUp .3s ease; }
.log b { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.log li.act b { color: var(--strong); } .log li.see b { color: var(--blue); } .log li.done { color: var(--accent); font-weight: 750; } .log li.done b { color: var(--accent); }
.agent .solid { justify-self: start; }

/* 4. Harness */
.harness { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rig { position: relative; width: min(100%, 560px); aspect-ratio: 16 / 10; }
.core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 50%; transition: box-shadow .3s ease; }
.core small { color: var(--muted); font-size: 11px; }
.core.wired .mascot { border-color: var(--accent); }
.part { position: absolute; display: flex; flex-direction: column; gap: 1px; min-width: 128px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--inset); color: var(--faint); text-align: left; cursor: pointer; transition: all .25s ease; }
.part b { font-size: 12.5px; } .part small { font-size: 10.5px; }
.part:disabled { cursor: default; }
.part.on { border-style: solid; border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--inset)); }
.part.on small { color: var(--muted); }
.p0 { left: 0; top: 18%; } .p1 { right: 0; top: 18%; } .p2 { left: 0; bottom: 6%; } .p3 { right: 0; bottom: 6%; } .p4 { left: 50%; top: 0; transform: translateX(-50%); }
.presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }

/* 5. Memory */
.memory { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.session { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); }
.session-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); }
.session .msg.you, .session .msg.tú { align-self: flex-start; }
.msg.bad { outline: 2px solid var(--red); } .msg.good { outline: 2px solid var(--accent); }
.between { display: grid; place-items: center; width: 150px; }
.gap { color: var(--faint); font-size: 11.5px; text-align: center; line-height: 1.4; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 10px 0; }
.notes { width: 100%; padding: 10px 12px; border-radius: 10px; background: #efe7d2; color: #3a3a33; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transform: rotate(-2deg); }
.notes-title { font-size: 10.5px; font-weight: 800; margin-bottom: 5px; }
.note-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.note-line.empty { color: #8a8a80; }
.x { border: 0; background: none; color: #b34; cursor: pointer; font-size: 12px; }
.x:disabled { opacity: .3; cursor: default; }
.switch { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 42px; height: 24px; border-radius: 12px; background: var(--chip); position: relative; transition: background .2s ease; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .2s ease; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--bg); }
.switch input:focus-visible + span { outline: 2px solid var(--strong); outline-offset: 2px; }

/* 6. Markdown */
.md { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pane-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); }
#md-src { width: 100%; min-height: 220px; resize: vertical; padding: 12px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--inset); color: var(--text); font: 13px/1.6 var(--mono); }
.md-out { min-height: 220px; padding: 14px 16px; border-radius: 10px; background: #efe7d2; color: #3a3a33; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.5; overflow: auto; }
.md-out h2 { font-size: 22px; margin: 0 0 8px; } .md-out h3 { font-size: 17px; margin: 8px 0 6px; } .md-out h4 { font-size: 15px; margin: 6px 0 4px; }
.md-out ul { padding-left: 20px; margin: 4px 0 8px; } .md-out p { margin: 6px 0; }
.md-out code { font-family: var(--mono); font-size: .85em; background: rgba(0, 0, 0, .08); padding: 1px 5px; border-radius: 4px; }
.md-files { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.tree { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--inset); color: var(--faint); }
.file b { font-size: 13px; } .file small { font-size: 11px; }
.file.md b { color: var(--text); }
.file.loads { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--inset)); }
.file.loads b { color: var(--accent); }
.into { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* 7. SOUL.md */
.soul { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.soul-controls { display: flex; flex-direction: column; gap: 12px; }
.ctrl { display: flex; flex-direction: column; gap: 6px; }
.ctrl > span { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.soul-file { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--inset); border: 1px solid var(--accent-line); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; color: var(--text); }
.soul-test { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.soul-test .msg.you, .soul-test .msg.tú { align-self: flex-start; }

/* 8. Open weights */
.weights { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: min(100%, 360px); margin: 0 auto; }
.weights i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), var(--chip)); }
.weights i.neg { background: color-mix(in srgb, var(--purple) calc(var(--v) * 100%), var(--chip)); }
@media (prefers-reduced-motion: no-preference) { .weights i { animation: shimmer 2.4s ease-in-out infinite; animation-delay: var(--d); } }
@keyframes shimmer { 50% { opacity: .55; } }
.w-intro { display: flex; flex-direction: column; gap: 14px; }
.w-compare { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.w-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; width: 100%; }
.vault { position: relative; padding: 14px; border-radius: 14px; border: 2px solid var(--line); }
.is-closed .vault { border-color: var(--red); }
.is-closed .vault .weights { filter: blur(3px); opacity: .6; }
.is-open .vault { border-color: var(--accent); }
.lock { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 12px; background: var(--elevated); border: 1px solid var(--line); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.api .pipe { display: block; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--red); color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; }
.hosts { display: flex; flex-wrap: wrap; gap: 7px; }
.hosts span { padding: 6px 11px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, var(--inset)); border: 1px solid var(--accent-line); font-size: 12px; font-weight: 700; animation: fadeUp .35s ease; }

/* ---------- paths on the home ---------- */
.path { margin-top: 44px; }
.path-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.path-num { grid-column: 1 / -1; color: var(--cat); font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.path-head h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 760; letter-spacing: -.6px; }
.path-head p { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.path-progress { grid-column: 2; grid-row: 2 / 4; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 11px; font-weight: 700; white-space: nowrap; }
.path-progress .meter { width: 70px; margin: 0; }
.path-progress .meter span { background: var(--cat); }
.path .tiles { margin-top: 16px; }
.path .tile .num { color: var(--cat); }
.path .tile:hover { border-color: color-mix(in srgb, var(--cat) 55%, transparent); }
.tile.done { background: color-mix(in srgb, var(--cat) 8%, var(--elevated)); }
.tile.done .tile-go { color: var(--faint); }
.path .tiles li .tile-go { color: var(--faint); }
.path .tiles li .tile:not(.done) .tile-go:first-letter { color: inherit; }
.cat-name { color: var(--cat); }

/* ---------- token ---------- */
.tokens { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
#tok-src { width: 100%; padding: 12px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--inset); color: var(--text); font: 15px/1.5 var(--mono); resize: vertical; }
.tok-plain { font-size: 17px; font-weight: 700; }
.tok-line { display: flex; flex-wrap: wrap; gap: 3px; }
.tok-line.big .tok { font-size: 16px; padding: 5px 7px; }
.tok { padding: 3px 5px; border-radius: 5px; font-size: 13px; font-weight: 650; white-space: pre; }
.tok.t0 { background: color-mix(in srgb, var(--green) 30%, transparent); }
.tok.t1 { background: color-mix(in srgb, var(--blue) 30%, transparent); }
.tok.t2 { background: color-mix(in srgb, var(--yellow) 32%, transparent); }
.tok.t3 { background: color-mix(in srgb, var(--purple) 30%, transparent); }
.tok.t4 { background: color-mix(in srgb, var(--orange) 30%, transparent); }
.tok-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 13px; }
.tok-stats b { color: var(--text); font-size: 18px; }
.tok-row, .pi-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.tok-row b, .pi-row b { font-size: 16px; white-space: nowrap; }
.tok-lang { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------- prompt ---------- */
.prompt, .halluc, .reason { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin: 0 auto; }
.prompt .msg.you, .halluc .msg.you { align-self: flex-start; }
.sys { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--accent-line); }
.sys .presets { justify-content: flex-start; }
.sys-text { color: var(--muted); font-size: 12.5px; }
.prompt-build { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; max-width: 620px; margin: 0 auto; }
.pb-parts { display: flex; flex-direction: column; gap: 10px; }
.pb-meter { display: flex; flex-direction: column; gap: 8px; }
.pb-meter > span { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.pb-meter .note { text-align: left; }
.meter.wide { height: 9px; border-radius: 5px; margin: 0; }
.pb-meter .meter span { background: var(--orange); }

/* ---------- hallucination ---------- */
.doc-card { padding: 12px 14px; border-radius: 10px; background: #efe7d2; color: #3a3a33; font-size: 13px; transform: rotate(-.8deg); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.doc-card .pane-label { color: #7a7a70; }
.halluc mark { background: color-mix(in srgb, var(--red) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.halluc cite { color: var(--accent); font-style: normal; font-weight: 700; }
.halluc .presets { justify-content: flex-start; gap: 18px; }

/* ---------- reasoning ---------- */
.reason .q { font-size: 16px; font-weight: 700; line-height: 1.45; }
.reason .seg { align-self: flex-start; }
.thinking { padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--line); background: var(--inset); }
#steps { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
#steps li { animation: fadeUp .3s ease; }
.compare { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 6px 14px 6px 0; text-align: left; }
.compare th { color: var(--faint); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.compare .no { color: var(--red); font-weight: 800; } .compare .yes { color: var(--accent); font-weight: 800; }

/* ---------- multimodal & flows ---------- */
.multi { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.flow-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.multi .flow-row { flex-wrap: nowrap; }
.io { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); text-align: center; }
.io small { color: var(--muted); font-size: 12px; }
.io-icon { font-size: 28px; line-height: 1; color: var(--accent); }
.io.out { width: 170px; justify-content: center; min-height: 84px; border-color: var(--accent-line); }
.io.out small { color: var(--text); }
.arrow-r { color: var(--faint); font-size: 12px; font-weight: 700; white-space: nowrap; }
.outs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.outs .pane-label { width: 100%; text-align: center; }
.presets { justify-content: center; }

/* ---------- tools ---------- */
.tools-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; max-width: 640px; margin: 0 auto; }
.tool-card { padding: 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--inset); display: flex; flex-direction: column; gap: 7px; }
.tool-head { display: flex; flex-direction: column; margin-bottom: 4px; }
.tool-head b { font-size: 15px; color: var(--accent); }
.field { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 7px; background: var(--chip); font-size: 12.5px; }
.field span { color: var(--faint); }
.field.filled { background: color-mix(in srgb, var(--accent) 20%, var(--chip)); }
.field.filled code { color: var(--text); font-weight: 700; }
.tool-side { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.call { padding: 10px 12px; border-radius: 10px; background: var(--inset); border: 1px dashed var(--line); font-size: 12px; font-family: var(--mono); color: var(--muted); word-break: break-word; }
.call.on { border-style: solid; border-color: var(--strong); color: var(--text); }
.result { color: var(--accent); font-weight: 800; font-size: 14px; animation: fadeUp .3s ease; }

/* ---------- MCP ---------- */
.mcp, .mcp-plug { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mcp-map { position: relative; width: min(100%, 560px); height: 250px; }
.mcp-svg { position: absolute; inset: 10px 80px; width: calc(100% - 160px); height: 230px; }
.mcp-svg line { stroke: var(--red); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.is-mcp .mcp-svg line { stroke: var(--accent); stroke-opacity: .8; stroke-width: 1.5; }
.hub { fill: var(--accent); }
.hub-t { fill: var(--bg); font: 800 12px var(--mono); }
.mcp-col { position: absolute; top: 0; height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0; }
.mcp-col.left { left: 0; } .mcp-col.right { right: 0; align-items: flex-end; }
.mcp-col span { padding: 4px 10px; border-radius: 7px; background: var(--inset); border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.mcp .note b { color: var(--text); font-size: 18px; }
.tool-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 380px; }
.tool-list .pane-label { width: 100%; }
.tool-list code { padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 18%, var(--inset)); font-size: 12px; animation: fadeUp .3s ease; }

/* ---------- skills ---------- */
.skills { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; }
.shelf { display: flex; flex-direction: column; gap: 6px; }
.skills-side { display: flex; flex-direction: column; gap: 14px; }
.skills-side .presets { justify-content: flex-start; }
.ctx-mini { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.skills-side .note { text-align: left; }

/* ---------- subagents ---------- */
.subs { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin: 0 auto; }
.sub-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.sub-main { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sub-main small { color: var(--muted); font-size: 11px; }
.sub-list { display: flex; flex-direction: column; gap: 8px; }
.sub { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.sub .mascot { width: 34px; height: 34px; }
.sub b { font-size: 12.5px; }
.sub .meter { margin: 4px 0 0; }
.solo { display: flex; align-items: center; gap: 16px; }
.solo > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.solo small { color: var(--muted); font-size: 12px; }
.race-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; color: var(--muted); }
.race-stats b { color: var(--text); }

/* ---------- embeddings ---------- */
.emb { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.emb-map { width: min(100%, 620px); height: auto; aspect-ratio: 100 / 60; overflow: visible; }
.pt circle { fill: var(--muted); }
.pt text { fill: var(--muted); font: 700 3px var(--mono); }
.pt { cursor: pointer; }
.pt.pets circle { fill: var(--purple); } .pt.food circle { fill: var(--orange); } .pt.money circle { fill: var(--blue); }
.pt.near text, .pt.sel text { fill: var(--text); }
.pt.near circle, .pt.sel circle { r: 2.2; }
.pt.query circle { fill: var(--accent); stroke: var(--bg); stroke-width: .6; }
.emb-line { stroke: var(--accent); stroke-width: .35; stroke-dasharray: 1 .8; }
.emb-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.emb-intro code { padding: 10px 14px; border-radius: 10px; background: var(--inset); font-size: 14px; }

/* ---------- RAG ---------- */
.rag { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.too-big { display: flex; align-items: center; justify-content: center; gap: 24px; }
.doc-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; height: 170px; border-radius: 8px; background: #efe7d2; color: #3a3a33; font-size: 12px; }
.doc-stack { box-shadow: 6px 6px 0 #d8cfb6, 12px 12px 0 #c6bda4; }
.doc-stack b { font-size: 20px; }
.ctx-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 60px; border: 2px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 12px; font-weight: 800; }
.ctx-box small { color: var(--muted); font-weight: 600; font-size: 10.5px; }
.chunks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; width: 100%; }
.chunk { padding: 7px 9px; border-radius: 7px; background: var(--inset); border: 1px solid var(--line); color: var(--faint); font-size: 11.5px; transition: all .3s ease; }
.chunk.hit { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--inset)); }
.rag .msg { align-self: stretch; max-width: none; }

/* ---------- fine-tuning ---------- */
.tune { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.tune-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
.examples { display: flex; flex-direction: column; gap: 5px; }
.examples code { padding: 5px 9px; border-radius: 7px; background: var(--inset); font-size: 11.5px; }
.weights.small { width: 190px; grid-template-columns: repeat(10, 1fr); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.way { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); transition: all .25s ease; }
.way b { font-size: 16px; } .way small { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.way span { color: var(--faint); font-size: 11.5px; }
.way.best { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--inset)); box-shadow: 0 0 22px var(--glow); }

/* ---------- inference ---------- */
.inf-intro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gpu { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px; border-radius: 14px; border: 1px dashed var(--accent-line); }
.gpu small { color: var(--muted); font-size: 12px; }
.inf { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; }
.inf .note { grid-column: 1 / -1; }
.inf-router { display: flex; flex-direction: column; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--accent); color: var(--bg); }
.inf-router small { font-size: 11px; opacity: .8; }
.inf-providers { display: flex; flex-direction: column; gap: 8px; }
.prov { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--inset); color: var(--muted); cursor: pointer; text-align: left; }
.prov b { font-size: 13px; } .prov small { font-size: 11px; }
.prov.on { border-color: var(--accent); color: var(--text); box-shadow: 0 0 18px var(--glow); }
.prov.down { border-color: var(--red); color: var(--red); opacity: .7; text-decoration: line-through; }

/* ---------- price ---------- */
.price-intro, .price { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.sliders { display: flex; flex-direction: column; gap: 12px; }
.sliders label:not(.switch) { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.sliders b { color: var(--text); font-variant-numeric: tabular-nums; }
.sliders input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.sliders .switch { justify-self: start; }
.costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cost { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); }
.cost span { color: var(--muted); font-size: 12px; }
.cost b { font-size: clamp(20px, 3vw, 28px); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cost small { color: var(--faint); font-size: 11px; }
.cost:first-child b { color: var(--accent); } .cost:last-child b { color: var(--orange); }

/* ---------- evals & speed ---------- */
.evals, .speed { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.board { display: flex; flex-direction: column; gap: 7px; }
.row { display: grid; grid-template-columns: 22px 88px 1fr 34px 60px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 9px; font-size: 13px; transition: background .25s ease; }
.speed .row { grid-template-columns: 90px 1fr 80px; }
.rank { color: var(--faint); font-weight: 800; }
.score { font-weight: 800; font-variant-numeric: tabular-nums; }
.row small { color: var(--faint); font-size: 11px; }
.row.pick { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 1px solid var(--accent); }
.pass-line { color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 4px 10px; }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.terms div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); }
.terms b { font-size: 17px; color: var(--accent); } .terms small { color: var(--muted); font-size: 12.5px; }
.lane { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); margin-bottom: 8px; }
.lane-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lane-head b { font-size: 13px; } .lane-head small { color: var(--faint); font-size: 11px; }
.stream { min-height: 64px; font-size: 13px; line-height: 1.55; }
.wait { color: var(--faint); }
.speed .solid { align-self: flex-start; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .page { padding-top: 22px; }
  .brand .word { display: inline; }
  .panel { border-radius: 16px; }
  .stage { min-height: 280px; padding: 16px 14px; }
  .memory { grid-template-columns: 1fr; }
  .between { width: 100%; }
  .md, .md-files, .soul, .w-stage { grid-template-columns: 1fr; }
  .rig { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rig .part { position: static; transform: none; min-width: 0; }
  .rig .core { position: static; transform: none; grid-column: 1 / -1; order: -1; justify-self: center; }
  .log li { grid-template-columns: 70px 1fr; }
  .tools-scene, .skills, .prompt-build, .sub-grid, .inf, .terms, .ways, .costs { grid-template-columns: 1fr; }
  .mcp-svg { inset: 10px 70px; width: calc(100% - 140px); }
  .mcp-col span { font-size: 10.5px; padding: 3px 6px; }
  .row { grid-template-columns: 18px 72px 1fr 30px; } .row small { display: none; }
  .inf-router { justify-self: start; }
  .ch-top { align-items: flex-start; gap: 12px; }
  .back-link { white-space: nowrap; }
  .ch-count { text-align: right; }
  .path-head { grid-template-columns: 1fr; }
  .path-progress { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .narration { min-height: calc(1.45em * 3); }
  .cover { min-height: 52vh; }
  .multi .flow-row { flex-direction: column; gap: 8px; }
  .multi .arrow-r { font-size: 0; } .multi .arrow-r::after { content: "↓"; font-size: 14px; }
  .multi .io, .multi .io.out { width: 100%; max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- action-driven steps ---------- */
.cover {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cover .ch-title, .cover .cover-line { display: block; }
.tap-hint { color: var(--cat); font-size: 12.5px; font-weight: 750; letter-spacing: .3px; }
.cover .tap-hint { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { .tap-hint { animation: breathe 2.4s ease-in-out infinite; } }
@keyframes breathe { 50% { opacity: .45; } }
.panel { position: relative; }
.panel.tappable { cursor: pointer; }
.panel.tappable:hover { border-color: color-mix(in srgb, var(--cat) 45%, transparent); }
.tap-hint.in-panel { position: absolute; right: 16px; bottom: 12px; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--vis-bg); cursor: pointer; }
.next-link { display: inline-block; margin-top: 12px; color: var(--cat); font-size: .85em; font-weight: 750; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--cat) 40%, transparent); }
.next-link:hover { border-bottom-color: var(--cat); }
.dots { display: flex; justify-content: center; gap: 4px; padding: 4px 0 8px; }
.dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: transform .2s ease, background .2s ease; }
.dots button.seen::before { background: color-mix(in srgb, var(--cat) 45%, transparent); }
.dots button.on::before { background: var(--cat); transform: scale(1.4); }
.dots button.def::before { border-radius: 2px; }

/* ---------- chapter formats ---------- */
.page-mode #page { display: flex; flex-direction: column; gap: 22px; }
.pg-head { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.pg-title { font-size: clamp(40px, 7vw, 72px); font-weight: 780; letter-spacing: -2.4px; line-height: .95; }
.pg-lead { color: var(--text); font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }
.pg-lead b, .scrolly-step b { color: var(--cat); }
.pg-note { color: var(--muted); font-size: 13.5px; line-height: 1.55; padding-left: 12px; border-left: 3px solid var(--cat); animation: fadeUp .3s ease; }
.pg-note.center { align-self: center; border: 0; padding: 0; text-align: center; }
.pg-try { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pg-try > span { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; margin-right: 4px; }
.outro { display: flex; flex-direction: column; gap: 8px; max-width: 62ch; padding-top: 18px; border-top: 1px solid var(--line); animation: fadeUp .4s ease; }
.outro p { font-size: clamp(16px, 2vw, 19px); font-weight: 650; line-height: 1.5; }
.outro .next-link { align-self: flex-start; }

/* playground */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.pg-main { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--vis-bg); }
.tk-in { width: 100%; padding: 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--inset); color: var(--text); font: 17px/1.5 var(--mono); resize: vertical; }
.tk-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13px; }
.tk-stats b { color: var(--text); font-size: 20px; }
.pg-notes { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

/* chat story */
.chat-stage { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.chat { display: flex; flex-direction: column; gap: 7px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; }
.chat .msg.you, .chat .msg.tú { align-self: flex-start; }
.chat .ctx-window { display: flex; flex-direction: column; gap: 7px; }
.narrator { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--cat) 10%, var(--elevated)); }
.narrator .mascot { width: 40px; height: 40px; }
.narrator p { font-size: 15px; font-weight: 650; line-height: 1.5; animation: fadeUp .3s ease; }
.replies { display: flex; justify-content: flex-end; }
.reply { max-width: 90%; padding: 11px 14px; border: 1px solid var(--accent-line); border-radius: 14px 14px 4px 14px; background: var(--inset); color: var(--text); font: 600 13.5px/1.4 var(--mono); text-align: left; cursor: pointer; }
.reply span { margin-left: 8px; color: var(--accent); }
.reply:hover { border-color: var(--accent); }

/* quiz */
.quiz { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.quiz-q { font-size: clamp(18px, 2.4vw, 23px); font-weight: 650; line-height: 1.45; }
.quiz-q b { color: var(--cat); }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { min-width: 104px; min-height: 52px; padding: 0 18px; border: 2px solid var(--line); border-radius: 12px; background: var(--elevated); color: var(--text); font: 800 19px var(--mono); cursor: pointer; transition: all .2s ease; }
.opt:hover:not(:disabled) { border-color: var(--cat); }
.opt:disabled { cursor: default; opacity: .5; }
.opt.picked { opacity: 1; border-color: var(--red); }
.opt.right { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--elevated)); }
.quiz-reveal { display: flex; flex-direction: column; gap: 12px; }
.quiz-reveal > div { display: flex; flex-direction: column; gap: 12px; }
.quiz-say { font-size: 15.5px; line-height: 1.55; animation: fadeUp .3s ease; }
.quiz .msg { align-self: flex-start; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; }
.quiz .msg .tag { grid-column: 2; color: var(--faint); font-size: 11px; }
.quiz .solid { align-self: flex-start; }

/* builder */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; }
.build-area { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--vis-bg); }
.core-big { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.core-big .mascot { width: 84px; height: 84px; border-color: var(--cat); }
.core-big small { color: var(--muted); font-size: 12px; }
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.part-chip { min-height: 40px; padding: 0 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--inset); color: var(--muted); font: 700 13px var(--mono); cursor: pointer; transition: all .2s ease; }
.part-chip.on { border-style: solid; border-color: var(--cat); color: var(--text); background: color-mix(in srgb, var(--cat) 16%, var(--inset)); }
.can-do { padding: 18px; border-radius: 16px; background: var(--elevated); border: 1px solid var(--line); }
.can-do ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.can-do li { display: flex; gap: 9px; color: var(--faint); font-size: 13px; line-height: 1.4; transition: color .2s ease; }
.can-do li::before { content: "—"; flex: none; }
.can-do li.yes { color: var(--text); }
.can-do li.yes::before { content: "✓"; color: var(--cat); font-weight: 800; }

/* scroll story */
.scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.scrolly-step { min-height: 62vh; display: flex; align-items: center; }
.scrolly-step:first-child { min-height: 40vh; align-items: flex-start; }
.scrolly-step p { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: var(--faint); transition: color .3s ease; max-width: 34ch; }
.scrolly-step.active p { color: var(--text); }
.scrolly-fig { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 90px); }
.fig { min-height: 340px; display: flex; align-items: center; justify-content: center; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--vis-bg); }
.fig .inf { grid-template-columns: auto auto 1fr; }
.prov.dim { opacity: .35; }
.scrolly-text #outro { padding-bottom: 30vh; }

@media (max-width: 760px) {
  .pg-grid, .builder { grid-template-columns: 1fr; }
  .pg-notes { padding-top: 0; }
  .scrolly { grid-template-columns: 1fr; gap: 0; }
  .scrolly-fig { order: -1; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 2; background: var(--bg); padding-bottom: 10px; }
  .fig { min-height: 0; padding: 16px; }
  .scrolly-step { min-height: 55vh; }
  .scrolly-step:first-child { min-height: 30vh; }
  .fig .inf { grid-template-columns: 1fr; }
}

/* lesson: moments next to a lab that stays in view */
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lab { order: 2; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); }
.lab-inner { display: flex; flex-direction: column; gap: 7px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--vis-bg); scroll-behavior: smooth; }
.lab .msg.you, .lab .msg.tú { align-self: flex-start; }
.lab .msg i { text-transform: none; letter-spacing: .3px; }
.lab .ctx-window { display: flex; flex-direction: column; gap: 7px; }
.lab-out { display: flex; flex-direction: column; gap: 5px; }
.lab .msg.fine { outline: 2px solid var(--accent); }
.pin { padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--strong) 20%, var(--inset)); font-size: 12.5px; font-weight: 700; }
.moments { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40vh; }
.moment { display: flex; flex-direction: column; gap: 12px; animation: fadeUp .35s ease; }
.moment > p { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; }
.moment b { color: var(--cat); }
.moment .ask { font-weight: 750; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--elevated); color: var(--text); font: 700 13px var(--mono); cursor: pointer; transition: all .15s ease; }
.choice:hover:not(:disabled) { border-color: var(--cat); }
.choice.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 16%, var(--elevated)); }
.choice:disabled:not(.on) { opacity: .4; cursor: default; }
.moment .solid { align-self: flex-start; }
.explain { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--cat) 9%, var(--elevated)); font-size: 15px; line-height: 1.6; animation: fadeUp .3s ease; }
.live { color: var(--muted); font-size: 13.5px; min-height: 1.4em; }
.moments .outro { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .lesson { grid-template-columns: 1fr; gap: 16px; }
  .lab { order: 0; top: calc(env(safe-area-inset-top, 0px) + 54px); z-index: 2; background: var(--bg); padding-bottom: 8px; }
  .lab-inner { max-height: 38vh; padding: 12px; }
  .lab .msg { font-size: 12px; padding: 6px 10px; }
}

.send-row, .choices.sends { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.moment .reply { max-width: 100%; }
.moment .reply:disabled { cursor: default; }
.moment .reply:disabled:not(.on) { opacity: .4; }
.moment .reply.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 16%, var(--inset)); }

/* lesson labs */
.bar.idle { cursor: default; }
.chatlab { display: flex; flex-direction: column; gap: 8px; }
.chatlab .msg.you, .chatlab .msg.tú { align-self: flex-start; }
.msg.sysmsg { align-self: stretch; max-width: none; background: color-mix(in srgb, var(--strong) 18%, var(--inset)); font-size: 12.5px; }
.prompt-lab { display: flex; flex-direction: column; gap: 8px; }
.prompt-text { padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--accent-line); background: var(--inset); font-size: 13px; line-height: 1.5; }
.prompt-text .add { color: var(--cat); margin-top: 4px; animation: fadeUp .3s ease; }
.prompt-lab .msg { max-width: none; }
.choices.col { flex-direction: column; align-items: flex-start; gap: 10px; }
.lanes2 { display: flex; flex-direction: column; gap: 10px; }
.lanes2 .lane { margin: 0; }
.lanes2 .msg { align-self: flex-start; }
.think-steps { margin: 4px 0 6px 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.think-steps li { animation: fadeUp .3s ease; }
.lab .v-image { height: 150px; }

.builder-lab { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.builder-lab .can-do { align-self: stretch; }
.lab .tray .part-chip { cursor: default; }
.mem-lab { display: flex; flex-direction: column; gap: 10px; }
.mem-lab .between { width: auto; }
.mem-lab .session .msg.you, .mem-lab .session .msg.tú { align-self: flex-start; }
.soul-lab { display: flex; flex-direction: column; gap: 12px; }
.skills-lab { display: flex; flex-direction: column; gap: 14px; }
.mcp-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; }
.mcp-col.static { position: static; height: auto; gap: 8px; }
.mcp-intro .arrow-r { font-size: 28px; }
.sub-block { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); }
.sub-block > b { font-size: 12px; color: var(--muted); }
.meter.ctxm span { background: var(--orange); }
.bill-head { display: block; font-size: 13.5px; line-height: 1.5; }
.bill-head small { display: block; margin-top: 2px; }
.bill-head b { color: var(--cat); }
.bill-head small { color: var(--faint); font-size: 11.5px; }
.lab .costs { grid-template-columns: repeat(3, 1fr); }
.lab .cost b { font-size: 22px; }
.file.sel { outline: 2px solid var(--cat); }
.chatlab .tool-card { align-self: stretch; }
.lab .inf { grid-template-columns: auto auto 1fr; }
.lab .agent { max-width: none; }
.lab .log { max-height: 240px; }
.moment code { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--inset); }
.moment .ghost.next-job { margin-left: 6px; }
@media (max-width: 760px) { .lab .inf { grid-template-columns: 1fr; } .lab .costs { grid-template-columns: 1fr 1fr 1fr; } .lab .cost { padding: 10px; } .lab .cost b { font-size: 16px; } }

/* ================= layouts ================= */

/* stage: one big scene, one teaching card at a time */
.layout-stage .stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stage-count { display: flex; gap: 6px; padding-bottom: 8px; }
.stage-count i { width: 26px; height: 5px; border-radius: 3px; background: var(--line); }
.stage-count i.done { background: color-mix(in srgb, var(--cat) 50%, transparent); }
.stage-count i.now { background: var(--cat); }
.stage-scene { display: flex; align-items: center; justify-content: center; min-height: 44vh; padding: clamp(18px, 4vw, 40px); border-radius: 26px; background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--cat) 14%, transparent), transparent 70%), var(--vis-bg); border: 1px solid color-mix(in srgb, var(--cat) 30%, var(--line)); }
.stage-scene > .lab-inner { width: 100%; max-width: 760px; border: 0; background: none; max-height: none; padding: 0; }
.stage-card { position: relative; align-self: center; width: min(720px, 100%); margin-top: -34px; padding: 22px 26px 24px; border-radius: 18px; background: var(--elevated); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.stage-card .moment { gap: 12px; }
.stage-card .moment > p { font-size: clamp(15px, 1.9vw, 18px); }
.round { color: var(--cat); font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.stage-card .explain { background: none; padding: 0 0 0 14px; border-left: 3px solid var(--cat); border-radius: 0; }
.stage-card .cont-row { display: flex; justify-content: flex-end; }
.stage-card .outro { border: 0; padding: 0; }

/* chat: the lesson is a conversation */
.layout-chat .thread { display: flex; flex-direction: column; gap: 12px; width: min(680px, 100%); align-self: center; padding-bottom: 12px; }
.tbubble { display: flex; align-items: flex-start; gap: 10px; max-width: 92%; animation: fadeUp .3s ease; }
.tbubble .mascot { width: 36px; height: 36px; border-width: 1.5px; margin-top: 2px; }
.tbubble > div { padding: 12px 15px; border-radius: 4px 16px 16px 16px; background: var(--elevated); border: 1px solid var(--line); }
.tbubble p { font-size: 15px; line-height: 1.55; }
.tbubble p + p { margin-top: 8px; }
.tbubble b { color: var(--cat); }
.msg.you.mine { align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: 16px 4px 16px 16px; background: color-mix(in srgb, var(--cat) 22%, var(--chip-2)); font-size: 14px; animation: fadeUp .25s ease; }
.lab-card { align-self: stretch; margin: 2px 0 4px 46px; }
.lab-card > .lab-inner { padding: 14px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--cat) 40%, var(--line)); background: var(--vis-bg); max-height: none; }
.composer { position: sticky; bottom: 0; z-index: 3; width: min(680px, 100%); align-self: center; padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 14px); background: linear-gradient(transparent, var(--bg) 22%); }
.composer .act, .composer .cont-row { display: flex; justify-content: flex-end; }
.composer .choices { justify-content: flex-end; }
.composer .choices.col { align-items: flex-end; }
.composer .choice:not(.reply) { border-radius: 16px 4px 16px 16px; }
.layout-chat .outro { margin-left: 46px; }

/* bench: a canvas to build on, with a task dock */
.bench { display: flex; flex-direction: column; gap: 12px; }
.bench-canvas { min-height: 46vh; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 36px); border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(circle, color-mix(in srgb, var(--cat) 22%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--vis-bg); }
.bench-canvas > .lab-inner { width: 100%; max-width: 820px; border: 0; background: none; padding: 0; max-height: none; }
.bench-done { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bench-done li { display: flex; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; animation: fadeUp .3s ease; }
.bench-done li::before { content: "✓"; flex: none; color: var(--cat); font-weight: 800; }
.bench-done li b { color: var(--text); }
.dock { padding: 16px 18px; border-radius: 16px; background: var(--elevated); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .1); }
.dock .moment { gap: 10px; }
.dock .moment > p { font-size: 15px; }
.dock .explain { background: color-mix(in srgb, var(--cat) 10%, var(--bg)); }
.dock .cont-row { display: flex; justify-content: flex-end; }
.dock .outro { border: 0; padding: 0; }

/* essay: an article, with the figure pinned at the top */
.essay { display: flex; flex-direction: column; gap: 22px; }
.essay-fig { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 3; padding-bottom: 10px; background: var(--bg); }
.essay-fig > .lab-inner { max-height: 40vh; overflow: auto; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--vis-bg); }
.essay-text { width: min(64ch, 100%); align-self: center; display: flex; flex-direction: column; gap: 28px; padding-bottom: 30vh; }
.essay > .pg-head { width: min(64ch, 100%); align-self: center; }
.essay-text .moment > p { font-size: clamp(16px, 2vw, 19px); line-height: 1.75; }
.essay-text .moment:first-of-type > p:first-child::first-letter { font-size: 2.6em; font-weight: 800; float: left; line-height: .9; margin: 4px 8px 0 0; color: var(--cat); }
.essay-text .explain { background: none; padding: 0; border-radius: 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.75; color: var(--text); }
.essay-text .explain::before { content: "→ "; color: var(--cat); font-weight: 800; }
.essay-text .solid { background: none; color: var(--cat); border: 0; padding: 0; min-height: 0; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.essay-text .choice { border-radius: 20px; }

@media (max-width: 760px) {
  .stage-scene { min-height: 34vh; border-radius: 18px; }
  .stage-card { margin-top: -18px; padding: 16px 16px 18px; }
  .lab-card { margin-left: 0; }
  .layout-chat .outro { margin-left: 0; }
  .tbubble { max-width: 100%; }
  .bench-canvas { min-height: 36vh; }
  .essay-fig > .lab-inner { max-height: 34vh; padding: 12px; }
}

/* ================= one-screen lessons ================= */
/* Sized to the visible height, so nothing needs to scroll; the page isn't locked, so pull-to-refresh still works. */
body.lesson-mode { min-height: 0; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); overflow: visible; display: flex; flex-direction: column; }
body.lesson-mode .bar { flex: none; }
body.lesson-mode .page { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-top: 12px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.lesson-mode .chapter.page-mode { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.lesson-mode .chapter.page-mode .ch-top { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.ch-title-inline { font-size: clamp(20px, 3vw, 30px); font-weight: 780; letter-spacing: -.8px; line-height: 1.1; text-align: center; }
.lesson-mode #page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.lesson-app .pg-head { display: none; }
.zone { overflow-y: auto; scrollbar-width: thin; }
.lesson-app .lab-inner { max-height: none; }
.lesson-app .scene-fit { width: 100%; }

/* notebook */
.lesson-app.layout-notebook .lesson { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.lesson-app.layout-notebook .lab { position: static; height: 100%; }
.lesson-app.layout-notebook .lab-inner { min-height: 100%; }
.lesson-app.layout-notebook .moments { height: 100%; padding-bottom: 12px; padding-right: 4px; }

/* stage */
.lesson-app.layout-stage .stage-scene { flex: 1; min-height: 0; overflow: auto; }
.lesson-app.layout-stage .stage-card { flex: none; margin-top: 0; max-height: 46%; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; align-self: center; }
.lesson-app.layout-stage .stage-card > .zone { min-height: 0; flex: 1; }

/* chat */
.lesson-app.layout-chat .thread { flex: 1; min-height: 0; padding: 4px 4px 8px; }
.lesson-app.layout-chat .composer { position: static; flex: none; padding: 8px 0 0; background: none; border-top: 1px solid var(--line); }

/* bench */
.lesson-app.layout-bench .bench-canvas { flex: 1; min-height: 0; overflow: auto; }
.lesson-app.layout-bench .bench-done { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lesson-app.layout-bench .bench-done:empty { display: none; }
.lesson-app.layout-bench .bench-done span { color: var(--cat); }
.lesson-app.layout-bench .dock { flex: none; max-height: 44%; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.lesson-app.layout-bench .dock > .zone { min-height: 0; flex: 1; }

/* essay */
.lesson-app.layout-essay .essay-fig { position: static; flex: none; max-height: 40%; overflow: auto; padding: 0; }
.lesson-app.layout-essay .essay-fig > .lab-inner { max-height: none; }
.lesson-app.layout-essay .essay-text { flex: 1; min-height: 0; padding-bottom: 12px; gap: 20px; }
.lesson-app.layout-essay .essay-text .moment:first-of-type > p:first-child::first-letter { font-size: 2.2em; }
.lesson-app.layout-essay .essay-pin { flex: none; width: min(64ch, 100%); align-self: center; }
.lesson-app.layout-essay .essay-pin .solid { background: var(--cat); color: var(--bg); border: 0; min-height: 36px; padding: 0 16px; border-radius: 9px; text-decoration: none; font-size: 12.5px; }

/* pinned action bars */
.pinned:empty { display: none; }
.pinned { flex: none; display: flex; flex-direction: column; gap: 8px; }
.pinned .act { display: flex; flex-wrap: wrap; gap: 8px; }
.pinned .choices { flex-wrap: wrap; }
.pinned .cont-row { display: flex; justify-content: flex-end; }
.pinned .act:empty { display: none; }

@media (max-width: 760px) {
  body.lesson-mode .page { padding-top: 8px; }
  .lesson-mode .chapter.page-mode .ch-top { grid-template-columns: auto 1fr; }
  .lesson-mode .chapter.page-mode .ch-count { display: none; }
  .ch-title-inline { text-align: right; font-size: 20px; }
  .lesson-app.layout-notebook .lesson { grid-template-rows: minmax(0, 42%) minmax(0, 1fr); gap: 10px; }
  .lesson-app.layout-notebook .lab { top: auto; padding-bottom: 0; }
  .lesson-app.layout-stage .stage-scene { min-height: 0; padding: 12px; }
  .lesson-app.layout-stage .stage-card { max-height: 52%; padding: 12px 14px; }
  .lesson-app.layout-bench .bench-canvas { min-height: 0; padding: 12px; }
  .lesson-app.layout-bench .dock { max-height: 52%; padding: 12px 14px; }
  .lesson-app.layout-essay .essay-fig { max-height: 38%; }
  .lesson-app .moment > p, .lesson-app .stage-card .moment > p, .lesson-app .dock .moment > p { font-size: 14.5px; }
  .lesson-app .choice, .lesson-app .reply { min-height: 36px; font-size: 12.5px; }
}

/* scenes: center without ever cutting off the top (margin:auto instead of align-items:center) */
.lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { display: flex; align-items: flex-start; justify-content: flex-start; }
.lesson-app.layout-stage .stage-scene > .lab-inner, .lesson-app.layout-bench .bench-canvas > .lab-inner { margin: auto; }
/* give the teaching text enough room */
.lesson-app.layout-stage .stage-card { max-height: 56%; }
.lesson-app.layout-bench .dock { max-height: 56%; }
.lesson-app.layout-essay .essay-fig { max-height: 42%; }
/* harness: lay the model, pieces and abilities out side by side when there's width */
.builder-lab { gap: 12px; }
.builder-lab .core-big .mascot { width: 64px; height: 64px; }
@media (min-width: 761px) {
  .builder-lab { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "core can" "tray can"; align-items: center; column-gap: 28px; }
  .builder-lab .core-big { grid-area: core; }
  .builder-lab .tray { grid-area: tray; max-width: 280px; }
  .builder-lab .can-do { grid-area: can; }
}

/* text first, scene fills what's left (and scales itself to fit) */
.lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { flex: 1 1 0; min-height: 90px; overflow: hidden; }
.lesson-app.layout-stage .stage-card, .lesson-app.layout-bench .dock { flex: 0 0 auto; max-height: 72%; }
.lesson-app.layout-stage .stage-card > .zone, .lesson-app.layout-bench .dock > .zone { flex: 0 1 auto; }
.lesson-app.layout-essay .essay-fig { flex: 0 0 auto; max-height: 42%; overflow: hidden; }
.lesson-app.layout-essay .essay-fig > .lab-inner { overflow: hidden; }
.lesson-app .moment { padding-bottom: 2px; }
@media (max-width: 760px) {
  .lesson-app.layout-stage .stage-card, .lesson-app.layout-bench .dock { max-height: 72%; }
  .lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { padding: 10px; }
}

/* balance: text up to 60%, the scene always keeps at least 38% */
.lesson-app.layout-stage .stage-card, .lesson-app.layout-bench .dock { max-height: 60%; }
.lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { min-height: 38%; }
/* entrance animations inside text zones fade only (a slide makes the zone briefly overflow) */
@keyframes fadeIn { from { opacity: .2; } }
.lesson-app .zone .moment, .lesson-app .zone .explain, .lesson-app .zone .tbubble { animation: fadeIn .3s ease; }

/* compact scenes that were too tall */
.lesson-app .builder-lab { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "core can" "tray can"; align-items: center; gap: 10px 18px; }
.lesson-app .builder-lab .core-big { grid-area: core; }
.lesson-app .builder-lab .tray { grid-area: tray; max-width: 240px; gap: 5px; }
.lesson-app .builder-lab .can-do { grid-area: can; padding: 12px 14px; }
.lesson-app .builder-lab .can-do ul { gap: 5px; margin-top: 6px; }
.lesson-app .builder-lab .can-do li { font-size: 12px; }
.lesson-app .lab .part-chip, .lesson-app .tray .part-chip { min-height: 30px; padding: 0 9px; font-size: 11.5px; }
.lesson-app .skills-lab .shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lesson-app .skills-lab .file { padding: 7px 10px; }
.lesson-app .skills-lab .file small { font-size: 10.5px; }
.lesson-app .md { grid-template-columns: 1fr 1fr; }
.lesson-app #md-src, .lesson-app .md-out { min-height: 150px; }
.lesson-app .multi .flow-row { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
.lesson-app .multi .arrow-r { font-size: 12px; } .lesson-app .multi .arrow-r::after { content: none; }
.lesson-app .multi .io, .lesson-app .multi .io.out { width: auto; flex: 1 1 0; min-width: 0; max-width: 200px; }
.lesson-app .price .note { display: none; }
.lesson-app .price { gap: 10px; }
@media (max-width: 760px) {
  .lesson-app .builder-lab .core-big .mascot { width: 48px; height: 48px; }
  .lesson-app .builder-lab .core-big small { font-size: 10.5px; }
  .lesson-app .builder-lab .tray { max-width: 150px; }
  .lesson-app .bars { gap: 5px; } .lesson-app .bar { min-height: 30px; font-size: 13px; }
  .lesson-app .llm { gap: 12px; } .lesson-app .sentence { font-size: 17px; }
  .lesson-app #md-src, .lesson-app .md-out { min-height: 110px; font-size: 12px; }
  .lesson-app .soul-file { font-size: 11.5px; padding: 10px 12px; }
  .lesson-app .lab .costs { gap: 6px; }
  .lesson-app .sliders { gap: 6px; }
  .lesson-app .multi .mascot { width: 40px; height: 40px; }
  .lesson-app .multi .io { padding: 8px; } .lesson-app .multi .io-icon { font-size: 20px; }
}

/* harness: the pieces on the scene are the controls */
.lesson-app .builder-lab .part-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.lesson-app .builder-lab .part-chip:not(.on):not(:disabled):hover { border-color: var(--cat); color: var(--text); }
.lesson-app .builder-lab .part-chip:disabled { cursor: default; }
.lesson-app .builder-lab .part-chip:disabled:not(.on) { opacity: .5; }

/* phones and short screens: denser text so the lesson fits without scrolling */
@media (max-width: 760px), (max-height: 680px) {
  .lesson-app .moment > p, .lesson-app.layout-stage .stage-card .moment > p, .lesson-app .dock .moment > p { font-size: 14px; line-height: 1.5; }
  .lesson-app .explain { font-size: 14px; line-height: 1.5; padding: 8px 10px; }
  .lesson-app.layout-stage .stage-card .explain { padding: 0 0 0 10px; }
  .lesson-app .moment, .lesson-app .dock .moment, .lesson-app .stage-card .moment { gap: 7px; }
  .lesson-app .round { font-size: 9.5px; }
  .lesson-app.layout-stage .stage-card, .lesson-app .dock { padding: 12px 14px; gap: 8px; }
  .lesson-app .act .choices { gap: 6px; }
  .lesson-app .act button, .lesson-app .cont-row button { min-height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 760px) {
  .lesson-app .builder-lab { gap: 8px 12px; }
  .lesson-app .builder-lab .tray { max-width: 170px; }
  .lesson-app .builder-lab .can-do { padding: 10px 12px; }
  .lesson-app .builder-lab .can-do li { font-size: 11.5px; line-height: 1.3; }
  .lesson-app .lab .part-chip, .lesson-app .tray .part-chip { min-height: 32px; font-size: 11.5px; }
}

.lesson-app .act.busy { pointer-events: none; }
/* the last screen fits exactly, without a few stray pixels of scroll */
.lesson-app .zone > .outro, .lesson-app .zone > :last-child { margin-bottom: 0; }
.lesson-app .zone .outro, .lesson-app .zone .msg, .lesson-app .zone .moment, .lesson-app .zone .explain { animation: fadeIn .3s ease; }
.lesson-app .moment > .stepped-aside { display: none; }
.lesson-app .emb-map { max-height: calc(var(--app-h, 100vh) * .4); }
.lesson-app .tool-list code { animation: fadeIn .3s ease; }
/* fine-tuning: keep the three ways side by side on phones too, so the figure stays readable */
@media (max-width: 760px) {
  .lesson-app .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lesson-app .way { padding: 8px; gap: 2px; }
  .lesson-app .way b { font-size: 13px; }
  .lesson-app .way small { font-size: 10.5px; margin-bottom: 2px; }
  .lesson-app .way span { font-size: 10px; }
  .lesson-app .tune { gap: 8px; }
}
.lesson-app .essay-text .moment > p, .lesson-app .essay-text .explain { font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; }
.lesson-app.layout-bench .bench-canvas { min-height: 32%; }
/* choices sit side by side and wrap, instead of one per row */
.lesson-app .pinned .choices { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.lesson-app .pinned .choices > button { width: auto; flex: 0 1 auto; max-width: 100%; text-align: left; }
@media (max-width: 760px), (max-height: 680px) {
  .lesson-app .pinned .choices > button { min-height: 34px; padding: 6px 10px; line-height: 1.25; font-size: 12.5px; }
}
@media (max-height: 680px) {
  .lesson-app.layout-stage .stage-card, .lesson-app.layout-bench .dock { max-height: 66%; }
  .lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { min-height: 28%; }
}
@media (max-height: 699px) { .lesson-app .essay-fig { max-height: 34%; } }
.lesson-app.layout-essay .essay-text { width: min(74ch, 100%); }
@media (max-width: 760px) {
  .lesson-app .builder-lab { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "core can" "tray tray"; }
  .lesson-app .builder-lab .tray { max-width: none; justify-content: center; }
  .lesson-app .builder-lab .can-do ul { gap: 3px; }
}
.lesson-app .skills-lab .file { gap: 3px; min-height: 0; justify-content: center; }
@media (max-width: 760px) {
  .lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { padding: 10px; }
}

/* compacting */
.cmp { display: flex; flex-direction: column; gap: 8px; width: min(100%, 560px); margin: 0 auto; }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); font-weight: 700; }
.cmp-warn { color: var(--orange); }
.cmp .meter.hot span { background: var(--orange); }
.cmp-list { margin-top: 4px; }
.cmp-list .msg { font-size: 12px; padding: 5px 10px; animation: fadeIn .3s ease; }
.cmp-list .msg small { color: var(--faint); }
.cmp-summary { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cat); background: color-mix(in srgb, var(--cat) 12%, var(--inset)); animation: fadeIn .4s ease; }
.cmp-summary p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
.cmp-summary b { color: var(--cat); }
.cmp-list { height: 210px; overflow: hidden; justify-content: flex-end; -webkit-mask-image: linear-gradient(transparent, #000 36px); mask-image: linear-gradient(transparent, #000 36px); }
.cmp-list.is-compact { justify-content: flex-start; -webkit-mask-image: none; mask-image: none; }
.cmp-list > * { flex: none; }
.cmp-head { padding: 0 2px; }
@media (max-width: 760px) { .cmp-list { height: 180px; } }
.cmp { box-sizing: border-box; padding: 0 6px; } .cmp-head { padding: 0; }
.tool-head small { color: var(--muted); font-size: 12px; }

/* skills: anatomy of one skill file */
.skill-file { width: min(100%, 520px); margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); overflow: hidden; font-size: 12.5px; }
.sf-name { padding: 7px 12px; background: var(--chip); font-weight: 700; color: var(--cat); }
.sf-part { padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; }
.sf-part + .sf-part { border-top: 1px dashed var(--line); }
.sf-desc { background: color-mix(in srgb, var(--cat) 12%, transparent); }
.sf-part p, .sf-part li { line-height: 1.45; }
.sf-part ol { padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.sf-rule { color: var(--muted); }
/* chapter ending: just the way forward */
.lesson-app .outro { align-items: flex-end; }
.lesson-app .outro .next-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--cat, var(--accent)); color: var(--bg); font-size: 13px; font-weight: 750; text-decoration: none; }
.lesson-app .outro p { font-size: 15px; font-weight: 650; align-self: stretch; }
.lesson-app .outro { max-width: none; }
.lesson-app .outro .next-link { align-self: flex-end; }

/* weights: a toy model with six weights */
.toy { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toy-ctx { font-size: 14px; font-weight: 700; }
.toy-t { border-collapse: separate; border-spacing: 6px 4px; font-size: 13px; }
.toy-t th { color: var(--muted); font-weight: 700; text-align: right; padding-right: 4px; }
.toy-t tr:first-child th { text-align: center; color: var(--text); }
.toy-t td { text-align: center; padding: 4px 10px; border-radius: 7px; background: var(--chip); transition: background .4s ease; }
.toy-t td.up { background: color-mix(in srgb, var(--accent) 28%, var(--chip)); }
.toy-t td.down { background: color-mix(in srgb, var(--purple) 24%, var(--chip)); }
.toy-t .toy-p td { background: none; font-weight: 800; color: var(--cat, var(--accent)); font-size: 14px; }

/* price: a price tag and an itemized receipt */
.ptag { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); }
.ptag span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ptag b { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; } .ptag b.out { color: var(--orange); }
.ptag small { color: var(--muted); font-size: 12px; }
.rcpt { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rcpt th { text-align: right; color: var(--faint); font-weight: 700; font-size: 11px; padding: 0 6px 4px; }
.rcpt th:first-child, .rcpt td:first-child { text-align: left; }
.rcpt td { padding: 5px 6px; border-top: 1px solid var(--line); text-align: right; }
.rcpt td small { display: block; color: var(--accent); font-size: 10.5px; }
.rcpt tr.in td:last-child { color: var(--accent); } .rcpt tr.out td:last-child { color: var(--orange); }
.rcpt tr.sum td { border-top: 1px solid var(--muted); color: var(--muted); }
.rcpt tr.sum b { color: var(--text); font-size: 14px; }
.ptag.mini { display: block; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.ptag.mini b { font-size: 13px; }
@media (max-width: 760px), (max-height: 680px) {
  .lesson-app .tbubble { gap: 8px; }
  .lesson-app .tbubble > div { padding: 9px 12px; }
  .lesson-app .tbubble p { font-size: 14px; line-height: 1.5; }
  .lesson-app .tbubble .mascot { width: 30px; height: 30px; }
  .lesson-app .thread { gap: 10px; }
  .lesson-app .lab-card { margin-left: 0; }
}

/* token: building a vocabulary by gluing frequent pairs */
.bpe { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); margin: 0 auto; }
.bpe-words { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bpe-w { display: flex; align-items: center; gap: 2px; }
.bpe-n { color: var(--faint); font-size: 11px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.bpe .tok.fresh { outline: 2px solid var(--cat, var(--accent)); outline-offset: 1px; }
.bpe-vocab { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.bpe-vocab code { padding: 3px 8px; border-radius: 6px; background: var(--chip); font-size: 13px; }
.bpe-vocab code.fresh { background: color-mix(in srgb, var(--cat, var(--accent)) 30%, var(--chip)); color: var(--text); }
.bpe { box-sizing: border-box; padding: 0 6px; }

/* evals: one test case, graded against a checklist */
.ev-case { display: flex; flex-direction: column; gap: 8px; width: min(100%, 560px); margin: 0 auto; box-sizing: border-box; padding: 0 4px; }
.ev-box { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 11px; background: var(--inset); border: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.ev-box.reply { border-color: color-mix(in srgb, var(--cat) 50%, var(--line)); }
.ev-rubric { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ev-rubric li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: baseline; color: var(--muted); }
.ev-rubric li small { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.ev-rubric li.ok { color: var(--text); } .ev-rubric li.ok .mark { color: var(--accent); font-weight: 800; }
.ev-rubric li.no .mark { color: var(--red); font-weight: 800; }
.ev-score { align-self: flex-end; font-weight: 800; font-size: 15px; color: var(--cat); }
.bar.chosen { outline: 2px solid var(--cat, var(--accent)); outline-offset: 1px; }
/* inference on phones: app, arrow (or router) and providers stacked and centered */
@media (max-width: 760px) {
  .lesson-app .inf { justify-items: center; gap: 8px; }
  .lesson-app .inf > .msg.you { justify-self: center; }
  .lesson-app .inf > .arrow-r { transform: rotate(90deg); }
  .lesson-app .inf-router { justify-self: center; }
  .lesson-app .inf-providers { width: 100%; }
}

/* big-scene layouts: the explanation reads as the next step (same style as step text, no box, no side line) */
.lesson-app.layout-stage .stage-card .explain,
.lesson-app.layout-bench .dock .explain { padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.lesson-app.layout-stage .stage-card .explain { font-size: clamp(15px, 1.9vw, 18px); line-height: 1.6; }
.lesson-app.layout-bench .dock .explain { font-size: 15px; line-height: 1.6; }
@media (max-width: 760px), (max-height: 680px) {
  .lesson-app.layout-stage .stage-card .explain, .lesson-app.layout-bench .dock .explain { font-size: 14px; line-height: 1.5; padding: 0; }
}
/* big-scene layouts: every button in the text card sits on the right, like "next" */
.lesson-app.layout-stage .pinned .act,
.lesson-app.layout-bench .pinned .act { justify-content: flex-end; }
.lesson-app.layout-stage .pinned .choices,
.lesson-app.layout-bench .pinned .choices { justify-content: flex-end; width: 100%; }
.ctx-cap { margin: -2px 0 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* scene boxes grow with their content; the whole scene then scales to the screen (no inner clipping) */
.lesson-app .cmp-list.is-compact { height: auto; }
.lesson-app .log { max-height: none; overflow: visible; }
.lesson-app #md-src { field-sizing: content; resize: none; }
/* compacting answers: what survived vs what got lost */
.lesson-app .kept { color: var(--accent); }
.lesson-app .lost { color: var(--red); }

/* MCP: inside one server, and an agent talking to it */
.mcp-server { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: min(100%, 720px); margin: 0 auto; align-items: start; }
.srv-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); }
.srv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.srv-head b { color: var(--cat); font-size: 14px; } .srv-head span { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.srv-tool { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--elevated); transition: border-color .3s ease; }
.srv-tool.on { border-color: var(--cat); }
.srv-tool code { font-size: 13px; font-weight: 700; color: var(--text); }
.srv-tool small { color: var(--muted); font-size: 11.5px; }
.srv-in { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.srv-in span { padding: 1px 7px; border-radius: 6px; background: var(--chip); color: var(--muted); font-size: 11px; }
.srv-talk { display: flex; flex-direction: column; gap: 6px; }
.srv-msg { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 9px; font-size: 12px; line-height: 1.4; animation: fadeIn .3s ease; }
.srv-msg b { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.srv-msg.out { background: var(--chip); margin-right: 18px; }
.srv-msg.in { background: color-mix(in srgb, var(--cat) 16%, var(--inset)); margin-left: 18px; }
@media (max-width: 760px) { .mcp-server { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) {
  .lesson-app .srv-tool small { display: none; }
  .lesson-app .srv-tool { padding: 6px 9px; }
  .lesson-app .srv-msg { padding: 5px 9px; font-size: 11.5px; }
  .lesson-app .srv-talk { gap: 4px; }
}
@media (max-width: 760px) {
  .lesson-app .srv-msg { flex-direction: row; align-items: baseline; gap: 6px; }
  .lesson-app .srv-msg b { display: none; }
  .lesson-app .srv-msg::before { flex: none; font-weight: 800; color: var(--cat); }
  .lesson-app .srv-msg.out::before { content: "→"; }
  .lesson-app .srv-msg.in::before { content: "←"; }
}
.md-raw { margin: 0; white-space: pre-wrap; font: 12.5px/1.6 var(--mono); color: var(--text); padding: 12px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--inset); }

/* scenario buttons live at the bottom of the scene, under what they change */
.lesson-app.layout-stage .stage-scene, .lesson-app.layout-bench .bench-canvas { flex-direction: column; }
.lesson-app .scene-act { flex: none; width: 100%; margin-top: 10px; }
.lesson-app .scene-act:empty, .lesson-app .scene-act .act:empty { display: none; }
.lesson-app .scene-act .act { display: flex; justify-content: center; }
.lesson-app .scene-act .choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lesson-app .scene-act .choices > button { width: auto; flex: 0 1 auto; max-width: 100%; }
@media (max-width: 760px), (max-height: 680px) { .lesson-app .scene-act .choices > button { min-height: 32px; padding: 5px 10px; font-size: 12px; line-height: 1.25; } }
/* .md panes: room so the first letter of a label isn't clipped */
.lesson-app .md { box-sizing: border-box; padding: 0 6px; }
.lesson-app.layout-stage .stage-scene > .lab-inner, .lesson-app.layout-bench .bench-canvas > .lab-inner { flex: none; }
.lesson-app .scene-act .choices.sends { align-items: center; }
.lesson-app .scene-ask { margin-bottom: 8px; text-align: center; font-size: 13px; font-weight: 750; color: var(--text); }
@media (max-width: 760px), (max-height: 680px) { .lesson-app .scene-ask { font-size: 12px; margin-bottom: 6px; } }

/* never clip the scene's own edges: borders and bubbles always show complete (the frame fits the scene instead) */
.lesson-app.layout-stage .stage-scene > .lab-inner,
.lesson-app.layout-bench .bench-canvas > .lab-inner,
.lesson-app .lab-card > .lab-inner { overflow: visible; }
.lesson-app .cmp-list { height: auto; -webkit-mask-image: none; mask-image: none; }
.lesson-app .cmp-more { margin: 0; text-align: center; font-size: 11px; }
/* scrolled areas fade out at the top edge instead of cutting bubbles with a hard line (only while scrolled) */
.lesson-app .zone.scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
/* skills: a context that starts almost full is a problem, so it shows in red */
.lesson-app .ctx-mini.hot .meter span { background: var(--red); }
.lesson-app .ctx-mini.hot .pane-label b { color: var(--red); }

/* skills: one skill file, and an agent using it */
.skill-run { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; width: min(100%, 760px); margin: 0 auto; align-items: start; }
.skill-run .skill-file { width: 100%; }
.sf-desc.hit { background: color-mix(in srgb, var(--cat) 26%, transparent); outline: 2px solid var(--cat); outline-offset: -2px; }
.sf-part ol li.done { color: var(--muted); }
.sf-part ol li.done::marker { content: "✓  "; color: var(--cat); font-weight: 800; }
@media (max-width: 760px) { .skill-run { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) {
  .lesson-app .skill-run .srv-msg { display: block; padding: 4px 9px; }
  .lesson-app .skill-run .srv-msg b { display: inline; margin-right: 6px; }
  .lesson-app .skill-run .srv-msg::before { content: none; }
  .lesson-app .skill-run .srv-talk { gap: 3px; }
}
/* inference: the router carries the Mist logo */
.inf-router { gap: 4px; }
.inf-router .mascot { width: 40px; height: 40px; border-color: var(--bg); background: var(--bg); }