/* Build an LLM — Algoverse lecture demo.
   Light, paper-like, indigo. Matches the palette used across the other Algoverse
   tools; the categorical trio (indigo / cyan / rose) was checked for contrast and
   colour-vision separation rather than picked by eye. */

:root {
  --paper:      #ffffff;
  --page:       #f6f7fb;
  --sunk:       #eef0f7;
  --line:       #dfe3ee;
  --line-soft:  #eaedf5;
  --ink:        #1a1d29;
  --ink-2:      #545a6e;
  --ink-3:      #868ca3;

  --indigo:     #4f46e5;
  --indigo-2:   #6366f1;
  --indigo-wash:#eef0ff;
  --cyan:       #0891b2;
  --cyan-wash:  #e5f6fa;
  --rose:       #be185d;
  --rose-wash:  #fdeaf2;

  --good:       #15803d;
  --flag:       #b45309;
  --flag-wash:  #fdf4e6;

  --r:          12px;
  --lift:       0 1px 2px rgba(26,29,41,.05), 0 6px 18px rgba(26,29,41,.06);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 26px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.mark { display: flex; align-items: center; gap: 11px; }
.mark-glyph {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: var(--indigo); color: #fff; font-size: 14px;
}
.mark-text { font-weight: 640; letter-spacing: -.01em; line-height: 1.15; }
.mark-text em { display: block; font-style: normal; font-size: 11.5px; font-weight: 450; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.readout { display: flex; gap: 16px; }
.readout div { text-align: right; }
.readout .k { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.readout .v { font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .readout { display: none; } }
.help-open {
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  color: var(--indigo); background: var(--indigo-wash);
  border: 1px solid #d7d9fb; border-radius: 999px; padding: 5px 14px;
}
.help-open:hover { background: #e4e7ff; }

/* ── stage rail (a stepper, not a jump list) ─────────────────────────── */
.rail {
  position: sticky; top: 57px; z-index: 25;
  display: flex; gap: 0; overflow-x: auto; padding: 0 26px;
  background: rgba(246,247,251,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.rail-step {
  position: relative; flex: 0 0 auto; font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; border: none; color: var(--ink-3);
  padding: 11px 16px 10px; border-bottom: 2px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.rail-step b { font-weight: 550; }
.rail-step .pip {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; background: var(--sunk); color: var(--ink-3);
}
.rail-step:hover { color: var(--ink); }
.rail-step.here { color: var(--indigo); border-bottom-color: var(--indigo); }
.rail-step.here .pip { background: var(--indigo); color: #fff; }
.rail-step.done .pip { background: var(--good); color: #fff; }

/* ── stages ──────────────────────────────────────────────────────────── */
main { max-width: 1180px; margin: 0 auto; padding: 26px 26px 70px; }
.stage {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--lift); padding: 24px 26px; margin-bottom: 22px; scroll-margin-top: 108px;
}
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stage-head h2 {
  margin: 0 0 4px; font-size: 20px; font-weight: 640; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 10px;
}
.stage-head .num {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--indigo-wash); color: var(--indigo);
}
.help-dot {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--ink-3); background: var(--sunk); border: 1px solid var(--line);
}
.help-dot:hover { color: var(--indigo); background: var(--indigo-wash); border-color: #d7d9fb; }
.blurb { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; max-width: 80ch; }
.blurb em { font-style: italic; color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 15px; }
.note { font-size: 13px; color: var(--ink-2); }
.note.good { color: var(--good); }
.note.bad { color: #b91c1c; }
.btn {
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  border-radius: 9px; padding: 8px 16px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); transition: all .13s;
}
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--indigo-2); }
.btn.quiet { color: var(--ink-2); }
.btn.quiet:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.btn:disabled { opacity: .45; cursor: default; }

.field { display: block; margin-bottom: 12px; }
.field > span, .slider-field > span {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 5px;
}
.field input, .field textarea, select {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; resize: vertical;
}
.field input:focus, .field textarea:focus, select:focus { outline: 2px solid var(--indigo); outline-offset: -1px; border-color: var(--indigo); }
.pick { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.pick select { width: auto; padding: 5px 9px; font-size: 12.5px; }

/* ── 1 corpus ────────────────────────────────────────────────────────── */
.corpus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 11px; }
.corpus-card {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 14px; transition: all .13s;
}
.corpus-card:hover { border-color: var(--indigo); box-shadow: var(--lift); }
.corpus-card.on { border-color: var(--indigo); background: var(--indigo-wash); }
.corpus-card .cc-h { display: flex; justify-content: space-between; align-items: center; }
.corpus-card .cc-n { font-weight: 600; font-size: 14px; }
.corpus-card .cc-m { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.corpus-card .cc-p {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--sunk); border-radius: 6px; padding: 7px 8px;
  max-height: 62px; overflow: hidden; white-space: pre-wrap;
}

/* ── 2 pieces: the context tape ──────────────────────────────────────── */
.tape-controls { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 14px; }
@media (max-width: 680px) { .tape-controls { grid-template-columns: 1fr; } }
.slider-field input[type=range] { width: 100%; accent-color: var(--indigo); }
.tape {
  font-family: var(--mono); font-size: 13px; line-height: 2.1; color: var(--ink-3);
  background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; white-space: pre; margin-bottom: 16px;
}
.tape .lit { background: var(--indigo); color: #fff; border-radius: 3px; padding: 2px 0; }
.pairs { display: flex; flex-wrap: wrap; gap: 6px; }
.pair {
  display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; background: var(--paper);
}
.pair .a { color: var(--ink); }
.pair .arrow { color: var(--ink-3); font-size: 10px; }
.pair .b { color: var(--indigo); font-weight: 650; }
.pair .ids { grid-column: 1 / -1; font-size: 9.5px; color: var(--ink-3); text-align: center; }

/* ── 3 build ─────────────────────────────────────────────────────────── */
.known-builds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.known {
  font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 999px;
  padding: 5px 13px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
}
.known:hover { border-color: var(--indigo); color: var(--indigo); }
.known.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.sizes { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.size {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px;
}
.size:hover { border-color: var(--indigo); }
.size.on { border-color: var(--indigo); background: var(--indigo-wash); }
.size b { display: block; font-weight: 600; }
.size span { font-size: 11px; color: var(--ink-3); }

.bench { display: grid; grid-template-columns: 172px minmax(0,1fr) 225px; gap: 15px; align-items: start; }
@media (max-width: 1120px) { .bench { grid-template-columns: 1fr; } }

.tray { background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px; }
.tray.reject { border-color: #e3b7b7; }
.tray-cap, .explainer-cap, .panel-cap, .blockframe-cap, .stackbar-label, .split-cap {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.tray-group { margin-bottom: 12px; }
.tray-group > p { margin: 0 0 5px; font-size: 11px; color: var(--ink-3); }
.tray-tip { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }
.piece {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); border-radius: 8px;
  padding: 6px 10px; margin-bottom: 5px; cursor: grab; transition: all .12s;
}
.piece[data-kind="norm"] { border-left-color: var(--cyan); }
.piece[data-kind="act"]  { border-left-color: var(--rose); }
.piece[data-kind="blk"]  { border-left-color: var(--indigo); border-style: dashed; }
.piece:hover { box-shadow: var(--lift); transform: translateX(2px); }
.piece.lifting { opacity: .4; }
.piece.held { border-color: var(--indigo); background: var(--indigo-wash); box-shadow: 0 0 0 2px #d7d9fb; }

.board { display: flex; flex-direction: column; align-items: stretch; }
.unit {
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 14px; text-align: center;
}
.unit-name { font-weight: 600; font-size: 13.5px; }
.unit-sub { font-size: 11.5px; color: var(--ink-3); }
.unit-opts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.opt {
  font: inherit; font-size: 11.5px; cursor: pointer; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.opt:hover { border-color: var(--indigo); color: var(--indigo); }
.opt.on { background: var(--indigo-wash); border-color: var(--indigo); color: var(--indigo); font-weight: 550; }
.down { height: 16px; position: relative; }
.down::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 2px solid var(--line); transform: translateX(-1px);
}

.stackbar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 9px 13px;
}
.stackbar-items { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.slab {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  background: var(--indigo-wash); border: 1px solid #d7d9fb; border-radius: 7px; padding: 3px 8px;
  animation: rise .16s ease-out;
}
.slab .kill, .slot .kill {
  font: inherit; line-height: 1; padding: 0 1px; cursor: pointer;
  background: none; border: none; color: var(--ink-3);
}
.slab .kill:hover, .slot .kill:hover { color: #b91c1c; }
.slabdrop {
  font: inherit; font-size: 11.5px; color: var(--ink-3); cursor: pointer;
  background: none; border: 1px dashed var(--line); border-radius: 7px; padding: 4px 11px;
}
.slabdrop:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.slabdrop:disabled { opacity: .5; cursor: default; }

.blockframe { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 14px; }
.blockframe-cap { text-align: center; margin-bottom: 12px; }
.half {
  position: relative; border-left: 2px solid var(--indigo);
  border-radius: 9px 0 0 9px; padding: 9px 0 9px 17px; margin-bottom: 9px;
}
.half::after {
  content: "carries the input forward"; position: absolute; left: -5px; top: 50%;
  transform: translate(-100%,-50%) rotate(180deg); writing-mode: vertical-rl;
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.half.severed { border-left: 2px dashed #e0b4b4; }
.half.severed::after { content: "severed"; color: #b91c1c; }
.half .tick { text-align: center; color: var(--line); font-size: 11px; line-height: 1; }
.lane {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 9px 12px; font-weight: 600; font-size: 13.5px;
}
.slot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 9px; padding: 6px 10px; min-height: 34px;
}
.slot.empty { border: 1px dashed var(--line); color: var(--ink-3); font-size: 11.5px; cursor: pointer; }
.slot.empty:hover { border-color: var(--cyan); color: var(--cyan); }
.chiplet {
  border-radius: 7px; padding: 3px 10px; font-size: 12.5px; cursor: grab;
  background: var(--cyan-wash); border: 1px solid var(--cyan); color: #0e7490;
  animation: rise .16s ease-out;
}
.actslot { display: inline-flex; padding: 0; min-height: 0; }
.actslot .chiplet { background: var(--rose-wash); border-color: var(--rose); color: var(--rose); }
.slot.target, .slabdrop.target { outline: 2px dashed var(--indigo); outline-offset: 3px; }
.slot.hover, .slabdrop.hover { background: var(--indigo-wash); outline: 2px solid var(--indigo); }
.tag {
  font: inherit; font-size: 10.5px; cursor: pointer; border-radius: 999px; padding: 2px 9px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-3);
}
.tag.yes { border-color: var(--good); color: var(--good); }
.tag.no { border-color: var(--flag); color: var(--flag); background: var(--flag-wash); }
.seam {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  font: inherit; font-size: 11.5px; color: var(--ink-3); cursor: pointer;
  background: none; border: none; padding: 5px 0;
}
.seam .ring { font-size: 15px; color: var(--indigo); }
.seam.cut .ring { color: var(--ink-3); }
.seam .do { font-size: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.seam:hover .do { border-color: var(--indigo); color: var(--indigo); }

.explainer { background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 11px; padding: 12px 14px; font-size: 12.5px; }
.explainer-name { font-weight: 640; margin: 4px 0 5px; }
.explainer p { margin: 0 0 7px; color: var(--ink-2); }
.explainer .aside { color: var(--ink-3); font-style: italic; }

.flags { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.flag {
  font-size: 12.5px; color: #92400e; background: var(--flag-wash);
  border-left: 3px solid var(--flag); border-radius: 5px; padding: 8px 12px;
}

/* ── 4 inspect ───────────────────────────────────────────────────────── */
.switch { display: inline-flex; gap: 3px; background: var(--sunk); border-radius: 9px; padding: 3px; margin-bottom: 16px; }
.switch-btn {
  font: inherit; font-size: 12.5px; cursor: pointer; border: none; border-radius: 7px;
  padding: 6px 15px; background: none; color: var(--ink-2);
}
.switch-btn.on { background: var(--paper); color: var(--ink); box-shadow: var(--lift); font-weight: 550; }
.view { display: none; }
.view.on { display: block; animation: rise .16s ease-out; }

.split { margin-bottom: 16px; }
.split-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.split-seg { display: grid; place-items: center; font-size: 10.5px; color: #fff; font-weight: 600; }
.split-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 11.5px; color: var(--ink-2); }
.split-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

.trace { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.trace-row { display: grid; grid-template-columns: 1.35fr 1fr 2.1fr auto; gap: 12px; align-items: center;
  padding: 8px 13px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.trace-row:first-child { border-top: none; }
.trace-row.head { background: var(--sunk); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.trace-row.rep { background: var(--indigo-wash); font-size: 11.5px; color: var(--indigo); font-weight: 550; }
.trace-row.flagged { background: var(--flag-wash); }
.trace-row .sh { font-family: var(--mono); font-size: 12px; color: var(--indigo); }
.trace-row .nt { color: var(--ink-2); }
.trace-row .pc { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .trace-row { grid-template-columns: 1fr 1fr; } .trace-row .nt { grid-column: 1 / -1; } }

.codeblock { margin-bottom: 16px; }
.codeblock .cb-t { font-size: 13.5px; font-weight: 620; }
.codeblock .cb-s { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
.codeblock pre {
  margin: 0; padding: 0; overflow-x: auto; border: 1px solid var(--line);
  border-radius: 9px; background: var(--paper);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
}
.codeblock .cl { display: block; padding: 0 13px; white-space: pre; }
.codeblock .cl.diff { background: var(--indigo-wash); box-shadow: inset 3px 0 0 var(--indigo); }
.k1 { color: #7c3aed; } .k2 { color: #0e7490; } .k3 { color: #b45309; } .k4 { color: var(--ink-3); font-style: italic; }

.mathblock { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.mathblock:last-child { border-bottom: none; }
.mathblock .mb-t { font-size: 13.5px; font-weight: 620; }
.mathblock .mb-n { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.katex-display { margin: 7px 0; overflow-x: auto; overflow-y: hidden; }

/* ── 5 learn ─────────────────────────────────────────────────────────── */
.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 11px; }
.knob { background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 11px; }
.knob label { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.knob input[type=number] {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
}
.knob input[type=range] { width: 100%; accent-color: var(--indigo); }
.knob .k-why { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.knob .k-val { font-family: var(--mono); font-size: 12.5px; color: var(--indigo); }

.learn-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 13px; margin-top: 16px; }
@media (max-width: 900px) { .learn-grid { grid-template-columns: 1fr; } }
.panel { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 13px; }
.panel-cap { margin-bottom: 9px; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.cap-sub { font-family: var(--mono); font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
#curve { width: 100%; height: auto; display: block; }
.floating-tip {
  position: absolute; pointer-events: none; z-index: 6;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 5px 9px;
  font-size: 11.5px; font-family: var(--mono);
}
#peek, .written {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  max-height: 250px; overflow: auto;
}
.written {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin-top: 15px; max-height: 360px; color: var(--ink);
}

.runs { margin-top: 16px; }
.runs table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.runs th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 550; padding: 6px 9px; border-bottom: 1px solid var(--line);
}
.runs td { padding: 7px 9px; border-bottom: 1px solid var(--line-soft); }
.runs td.b { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.runs td.n { font-variant-numeric: tabular-nums; }
.runs tr.now td { background: var(--indigo-wash); }
.runs .swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.runs .best { color: var(--good); font-weight: 600; }

/* ── 6 focus ─────────────────────────────────────────────────────────── */
.focus-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 16px; }
.fchar {
  font: inherit; font-family: var(--mono); font-size: 13px; cursor: pointer;
  min-width: 25px; padding: 5px 4px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.fchar:hover { border-color: var(--indigo); }
.fchar { transition: background .15s ease; }
/* the chosen character keeps its own shading and gets a ring instead */
.fchar.on { outline: 2px solid var(--rose); outline-offset: 2px; font-weight: 700; }
/* de-emphasised by the dashed border, not by fading the letter past readability */
.fchar.later { border-style: dashed; background: var(--paper); color: var(--ink-2); }
.focus-lead { margin: 16px 0 8px; font-size: 13.5px; color: var(--ink-2); }
.focus-lead .fq { font-family: var(--mono); color: var(--rose); background: var(--rose-wash); padding: 1px 7px; border-radius: 5px; }
.focus-top { display: flex; flex-direction: column; gap: 7px; max-width: 640px; }
.ft-row { display: grid; grid-template-columns: 104px 1fr 58px; gap: 11px; align-items: center; font-size: 12.5px; }
.ft-ctx { font-family: var(--mono); text-align: right; white-space: pre; }
.ft-ctx b { color: var(--ink); background: var(--indigo-wash); padding: 0 3px; border-radius: 3px; }
.ctx-dim { color: var(--ink-3); }
.ft-row .ftrack { background: var(--sunk); border-radius: 5px; height: 17px; overflow: hidden; }
.ft-row .ffill { display: block; height: 100%; background: var(--indigo); border-radius: 5px; min-width: 2px; }
.ft-row.first .ffill { background: var(--rose); }
.ft-row .fpc { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.focus-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; font-size: 11.5px; color: var(--ink-3); }
.fl-ramp { width: 90px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgb(242,241,253), #4f46e5); }
.fl-later { margin-left: 10px; }
.focus-all { margin-top: 12px; font-size: 12.5px; }
.focus-all summary { cursor: pointer; color: var(--ink-2); }
.focus-all summary:hover { color: var(--indigo); }
.focus-all .fbar { margin-top: 4px; }
.focus-bars { margin-top: 15px; display: flex; flex-direction: column; gap: 4px; }
.fbar { display: grid; grid-template-columns: 34px 1fr 54px; gap: 9px; align-items: center; font-size: 12px; }
.fbar .fc { font-family: var(--mono); text-align: right; color: var(--ink-2); }
.fbar .ftrack { background: var(--sunk); border-radius: 5px; height: 17px; overflow: hidden; }
.fbar .ffill { display: block; height: 100%; background: var(--indigo); border-radius: 5px; min-width: 2px; }
.fbar .fpc { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fbar.top .ffill { background: var(--rose); }
.fbar.top .fc { color: var(--rose); font-weight: 650; }

/* ── help bubbles ────────────────────────────────────────────────────
   Dark on a light page so it reads instantly as "help", small enough to sit
   beside what it describes, and never covering the page with an overlay. */
.gloss-open {
  font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 5px 11px;
}
.gloss-open:hover { color: var(--indigo); border-color: var(--line); }

.bubble {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: min(300px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 11px 14px 12px;
  box-shadow: 0 14px 34px rgba(26,29,41,.30), 0 2px 6px rgba(26,29,41,.18);
  font-size: 13px; line-height: 1.5;
  transition: opacity .16s ease, transform .16s ease;
}
.bubble.wide { width: min(340px, calc(100vw - 24px)); }
.bubble.settling { opacity: 0; transform: translateY(4px); pointer-events: none; }
.bubble[hidden] { display: none; }

.bubble-caret {
  position: absolute; width: 12px; height: 12px; margin-left: -6px;
  background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
.bubble[data-side="below"] .bubble-caret { top: -5px; }
.bubble[data-side="above"] .bubble-caret { bottom: -5px; }
.bubble[data-side="over"] .bubble-caret,
.bubble[data-side="none"] .bubble-caret { display: none; }

.bubble-head { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
.bubble-count { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.bubble-x {
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; margin-right: -3px;
  background: none; border: none; color: rgba(255,255,255,.6);
}
.bubble-x:hover { color: #fff; }
.bubble-title { font-size: 14px; font-weight: 640; margin: 3px 0 4px; letter-spacing: -.005em; }
.bubble-body { color: rgba(255,255,255,.84); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bubble-body p { margin: 0 0 7px; }
.bubble-body p:last-child { margin-bottom: 0; }
.bubble-try {
  margin: 8px 0 2px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px;
  background: rgba(255,255,255,.08); border-left: 3px solid #a5b4fc; color: #fff;
}
.bubble-try b { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; margin-bottom: 1px; }
.bubble-more { margin-top: 8px; font-size: 12.5px; }
.bubble-more summary { cursor: pointer; color: rgba(255,255,255,.7); list-style: none; }
.bubble-more summary::-webkit-details-marker { display: none; }
.bubble-more summary::before { content: "▸ "; }
.bubble-more[open] summary::before { content: "▾ "; }
.bubble-more summary:hover { color: #fff; }
.bubble-more p { margin: 6px 0 0; color: rgba(255,255,255,.78); }
.bubble-terms { margin: 6px 0 0; }
.bubble-terms dt { font-weight: 620; color: #fff; margin-top: 6px; }
.bubble-terms dd { margin: 0; color: rgba(255,255,255,.72); }

.bubble-search {
  width: 100%; font: inherit; font-size: 12.5px; color: #fff; margin: 2px 0 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px; padding: 6px 9px;
}
.bubble-search::placeholder { color: rgba(255,255,255,.5); }
.bubble-search:focus { outline: 2px solid #a5b4fc; outline-offset: 1px; }
.bubble-gloss { margin: 0; }
.bubble-gloss dt { font-weight: 620; color: #fff; margin-top: 8px; font-size: 12.5px; }
.bubble-gloss dt:first-child { margin-top: 0; }
.bubble-gloss dd { margin: 0; color: rgba(255,255,255,.74); font-size: 12.5px; }
.bubble-empty { color: rgba(255,255,255,.6); font-size: 12.5px; }

.bubble-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.bubble-foot:empty { display: none; }
.bubble-nav { display: flex; gap: 6px; margin-left: auto; }
.bubble-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border-radius: 7px; padding: 5px 13px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.26);
}
.bubble-btn:hover:not(:disabled) { border-color: #fff; }
.bubble-btn.go { background: #fff; color: var(--ink); border-color: #fff; }
.bubble-btn.go:hover { background: #eef0ff; }
.bubble-btn:disabled { opacity: .32; cursor: default; }
.bubble-skip {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 0;
  background: none; border: none; color: rgba(255,255,255,.58);
}
.bubble-skip:hover { color: #fff; }
.bubble :focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* what the current tour step is talking about */
.tour-lit {
  outline: 3px solid var(--indigo); outline-offset: 5px; border-radius: 10px;
  animation: litpulse 1.4s ease-out 2;
}
@keyframes litpulse {
  0%   { outline-color: rgba(79,70,229,1); outline-offset: 5px; }
  50%  { outline-color: rgba(79,70,229,.35); outline-offset: 9px; }
  100% { outline-color: rgba(79,70,229,1); outline-offset: 5px; }
}

.foot { color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 6px 0 0; }

@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* a section that could not load, with a way to try again */
.load-fail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 13px; color: #92400e; background: var(--flag-wash);
  border: 1px solid #f1c98a; border-radius: 9px; padding: 9px 12px;
}

/* strings to pick from, cut from the training text */
.suggest { margin: -2px 0 14px; }
.suggest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.suggest-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.suggest-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.suggest-search {
  flex: 1 1 170px; max-width: 260px; margin-left: auto; font: inherit; font-size: 12.5px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.suggest-search:focus { outline: 2px solid var(--indigo); outline-offset: -1px; border-color: var(--indigo); }
.btn.small { font-size: 12px; padding: 5px 12px; }
.sg { margin-bottom: 10px; }
.sg-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.sg-name span { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chipstr {
  font: inherit; font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px;
  white-space: pre; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .12s, background .12s;
}
.chipstr:hover { border-color: var(--indigo); color: var(--indigo); }
.chipstr.on { background: var(--indigo-wash); border-color: var(--indigo); color: var(--indigo); }

/* ── 8 make it better ─────────────────────────────────────────────────── */
.better-list { display: flex; flex-direction: column; gap: 10px; }
.diag {
  background: var(--indigo-wash); border: 1px solid #d7d9fb;
  border-left: 3px solid var(--indigo); border-radius: 10px; padding: 12px 14px;
}
.diag.quiet { background: var(--sunk); border-color: var(--line); border-left-color: var(--ink-3); }
.diag-t { font-weight: 640; font-size: 14px; margin-bottom: 3px; }
.diag p { margin: 0 0 9px; font-size: 13px; color: var(--ink-2); }
.diag .btn { margin-top: 2px; background: var(--paper); }
.tips-cap {
  margin: 22px 0 11px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 11px; }
.tip { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tip-t { font-weight: 620; font-size: 13.5px; margin-bottom: 4px; }
.tip p { margin: 0 0 7px; font-size: 12.5px; color: var(--ink-2); }
.tip p:last-child { margin-bottom: 0; }
.tip-w { color: var(--ink-3); }
.tip-w b { color: var(--ink-2); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }