/* =========================================================
   Modern Writing Lab: Key Terms page
   Builds on the tokens and shared pieces in site.css
   (top bar, buttons, sheets, token chips, toast).
   ========================================================= */

/* ---------- hero ---------- */
.kt-hero { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; }
.kt-title { margin: 0; font-size: clamp(44px, 11.5vw, 104px); font-weight: 800; letter-spacing: -.04em; line-height: .95; max-width: 12ch; }
.kt-title em { display: block; color: var(--blue); }
.kt-lede { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-2); max-width: 46ch; margin: 20px 0 0; }

.kt-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.finder {
  position: relative; flex: 1 1 320px; max-width: 560px; display: flex; align-items: center;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
  box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .2s;
}
.finder:focus-within { box-shadow: 4px 4px 0 var(--blue); }
.finder-ic { width: 20px; height: 20px; margin-left: 16px; flex: none; }
.finder input { flex: 1; min-width: 0; min-height: 52px; padding: 0 12px; border: 0; background: transparent; font-size: 18px; outline: none; }
.finder input::-webkit-search-cancel-button { cursor: pointer; }
.finder-count { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); padding-right: 18px; white-space: nowrap; }
.quizlet { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* the route line: 8 stations */
.line { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.station {
  position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  min-height: 64px; padding: 10px 12px; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: 14px; background: var(--card);
  transition: transform .25s var(--ease-spring), box-shadow .2s, background .2s;
}
.station:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.st-n { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 14px; }
.st-name { font-weight: 700; font-size: 15px; line-height: 1.15; }
.st-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.st-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); }
.st-dots i.on { background: var(--blue); border-color: var(--blue); }
.station.done { background: var(--lime); }
.station.done .st-n { background: var(--blue); }
@media (min-width: 1000px) {
  .line { grid-template-columns: repeat(8, 1fr); gap: 0; margin-top: 46px; }
  .line li { position: relative; }
  /* the track that joins the stations */
  .line li::before { content: ""; position: absolute; top: 25px; left: 0; right: 0; height: 4px; background: var(--ink); z-index: 0; }
  .line li:first-child::before { left: 50%; } .line li:last-child::before { right: 50%; }
  .station { grid-template-columns: 1fr; justify-items: center; text-align: center; border: 0; background: transparent; padding: 6px 6px 10px; gap: 8px; z-index: 1; }
  .station:hover { box-shadow: none; transform: translateY(-3px); }
  .st-n { grid-row: auto; width: 42px; height: 42px; font-size: 16px; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); background: var(--card); color: var(--ink); transition: background .2s, transform .3s var(--ease-spring); }
  .station:hover .st-n { background: var(--lime); transform: scale(1.12); }
  .station.done { background: transparent; }
  .station.done .st-n { background: var(--blue); color: #fff; }
  .st-name { font-size: 15px; }
  .st-dots { justify-content: center; max-width: 90px; }
}

/* ---------- phone: sticky stop bar ---------- */
.stopbar {
  position: sticky; top: 64px; z-index: 30;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 8px var(--gutter);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s, transform .3s var(--ease-out), visibility .25s;
  margin-bottom: -57px; /* takes no room until it shows */
}
.stopbar::-webkit-scrollbar { display: none; }
.stopbar.show { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
.stopbar a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.stopbar a.on { background: var(--ink); color: var(--paper); }
@media (min-width: 1000px) { .stopbar { display: none; } }

/* ---------- the route: rail + stops ---------- */
.route { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 40px; }
.rail { display: none; }
@media (min-width: 1000px) {
  .route { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
  .rail { display: block; position: sticky; top: 84px; max-height: calc(100svh - 100px); overflow-y: auto; padding: 4px 4px 20px 0; scrollbar-width: thin; }
}
.rail-h { margin: 0 0 10px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.rail-list, .rail-terms { list-style: none; margin: 0; padding: 0; }
.rail-stop { position: relative; padding-left: 16px; border-left: 3px solid var(--hair); padding-bottom: 6px; }
.rail-stop.on { border-left-color: var(--blue); }
.rail-stop.done { border-left-color: var(--ink); }
.rail-name { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 800; font-size: 16px; text-decoration: none; letter-spacing: -.01em; }
.rail-n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.rail-stop.on .rail-n { background: var(--blue); color: #fff; border-color: var(--blue); }
.rail-stop.done .rail-n { background: var(--lime); }
.rail-terms { display: none; padding: 0 0 6px 32px; }
.rail-stop.on .rail-terms, .filtering .rail-terms { display: block; }
.rail-terms a { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.rail-terms a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.rail-terms a:hover { color: var(--ink); }
.rail-terms a.got { color: var(--ink); }
.rail-terms a.got::before { background: var(--blue); border-color: var(--blue); }

.stop { padding: 56px 0 10px; scroll-margin-top: 70px; }
@media (min-width: 1000px) { .stop { padding-top: 70px; } .stop:first-of-type { padding-top: 10px; } }
.stop-head { margin-bottom: 26px; }
.stop-title { margin: 0; font-size: clamp(38px, 7.5vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.stop-title em { color: var(--blue); }
.stop-why { margin: 14px 0 0; max-width: 54ch; font-size: 18px; color: var(--ink-2); }
.no-match { margin: 30px 0; font-size: 18px; }
.linkish { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

.race { display: inline-flex; flex-wrap: wrap; align-items: stretch; margin-top: 18px; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); }
.race-l { display: flex; align-items: center; padding: 8px 12px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 13px; }
.race-k { display: flex; align-items: center; padding: 8px 12px; font-size: 15px; text-decoration: none; border-left: 1.5px solid var(--hair); }
.race-k b { font-size: 18px; color: var(--blue); }
a.race-k { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
a.race-k:hover { background: var(--lime); }

/* ---------- term cards ---------- */
.cards-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .cards-grid { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .kt-wide { grid-column: 1 / -1; } }
@media (min-width: 1000px) and (max-width: 1099px) { .cards-grid { grid-template-columns: 1fr; } }

.kt {
  position: relative; min-width: 0;
  padding: 20px 18px 18px; border: 2px solid var(--ink); border-radius: var(--r-l);
  background: var(--card); scroll-margin-top: 130px;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (min-width: 900px) { .kt { padding: 24px 24px 22px; } }
@media (min-width: 1000px) { .kt { scroll-margin-top: 90px; } }
.kt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-right: 70px; }
.kt-n { font-family: var(--f-mono); font-size: 14px; color: var(--ink-2); }
.kt-name { margin: 0; font-size: clamp(26px, 5.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.kt-name small { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.kt-tag { font-family: var(--f-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--sky); border: 1.5px solid var(--ink); align-self: center; }
.kt-def { margin: 10px 0 0; font-size: clamp(18px, 2vw, 20px); line-height: 1.4; font-weight: 500; max-width: 52ch; }
.kt-note { margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.kt-note-l { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 5px; border: 1.5px solid var(--ink-2); font-family: var(--f-mono); font-size: 12px; vertical-align: 1px; color: var(--ink); }
.kt-note .arrow-link { color: var(--ink); white-space: nowrap; }
.kt-needs { margin: 12px 0 0; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.kt-needs a { color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kt[hidden], .stop[hidden] { display: none; }

/* stamp: you played with this one */
.kt::after {
  content: "got it ✓"; position: absolute; top: 18px; right: 16px;
  font-family: var(--f-mono); font-size: 12px; padding: 4px 8px; border-radius: 8px;
  border: 2px solid var(--blue); color: var(--blue); background: var(--card);
  transform: rotate(-7deg) scale(.6); opacity: 0; transition: opacity .2s, transform .4s var(--ease-spring);
}
.kt.got::after { opacity: 1; transform: rotate(-7deg); }
.kt.just-got::after { animation: stamp .5s var(--ease-spring); }
.kt.got { border-color: var(--ink); box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 2px var(--ink); }
.kt.flash { animation: flash 1.2s var(--ease-out); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 6px var(--lime); } }

/* ---------- toy shell ---------- */
.toy { margin-top: 16px; container-type: inline-size; }
.toy:empty { display: none; }
.toy-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.toy-badge { font-family: var(--f-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--lime); border: 1.5px solid var(--ink); }
.toy-hint { font-size: 15px; font-weight: 600; }
.toy-body { padding: 14px; border-radius: var(--r-m); background: var(--paper-2); }
@media (min-width: 900px) { .toy-body { padding: 18px; } }
.toy .toy-body > * + * { margin-top: 12px; }
.toy-body .fine { font-size: 12px; margin-top: 10px; }
.toy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.toy-score { margin: 0; font-size: 15.5px; line-height: 1.45; min-height: 1.4em; }
.swap { animation: swap .4s var(--ease-out); }
.blank { display: inline-block; width: 2.4em; height: .9em; border-bottom: .12em solid var(--blue); vertical-align: baseline; animation: blink 1.1s steps(1) infinite; }
.w-new { display: inline-block; background: var(--lime); border-radius: 6px; padding: 0 .15em; animation: popin .4s var(--ease-spring); }

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  min-height: 44px; padding: 8px 14px; text-align: left; line-height: 1.25;
  border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card);
  font-size: 15px; font-weight: 600;
}
.pick:hover { background: #fff; }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pick:disabled { opacity: .45; cursor: not-allowed; }
.pick.right { background: var(--lime); }
.pick.wrong { background: color-mix(in srgb, var(--tang) 30%, var(--card)); }
.pick small { font-weight: 400; opacity: .75; }

.mini-prompt { margin: 0; font-size: 18px; line-height: 1.35; }
.mini-prompt > span:first-child { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 5px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 12px; vertical-align: 2px; }
.mini-out { padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.mini-out-l { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--lime); }
.mini-out-b { font-size: 17px; line-height: 1.5; min-height: 1.5em; }
.mini-out-b p { margin: 0; }
.mini-out-b p + p { margin-top: 8px; }
.mini-out .out-empty, .mini-meta { font-family: var(--f-mono); font-size: 13px; color: #B9B6AE; line-height: 1.4; }
.mini-input {
  width: 100%; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; background: transparent;
  font-size: clamp(22px, 4vw, 30px); font-weight: 700; letter-spacing: -.02em; padding: 4px 0 8px; outline: none;
}
.mini-input:focus { border-bottom-color: var(--blue); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); }
.seg-b { min-height: 44px; padding: 0 14px; border: 0; background: transparent; font-weight: 700; font-size: 15px; }
.seg-b + .seg-b { border-left: 1.5px solid var(--ink); }
.seg-b[aria-pressed="true"] { background: var(--blue); color: #fff; }
.switch-lite { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); }
.switch-lite button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; }
.switch-lite button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.temp { display: grid; gap: 4px; }
.temp-l b { color: var(--ink); font-family: var(--f-display); font-size: 15px; }

/* sorter */
.so-card { display: grid; gap: 8px; justify-items: start; min-height: 128px; align-content: center; padding: 18px; border: 2px solid var(--ink); border-radius: var(--r-m); background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.so-item { font-size: clamp(22px, 3.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.so-verdict { font-family: var(--f-mono); font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--lime); border: 1.5px solid var(--ink); }
.so-verdict.no { background: var(--tang); }
.so-why { font-size: 16px; line-height: 1.4; }
.so-next { min-height: 44px; }
.sorter > * + * { margin-top: 12px; }
.so-bins { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 8px; }
.so-bin { min-height: 50px; padding: 6px 8px; line-height: 1.2; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); font-weight: 700; font-size: 15px; box-shadow: 3px 3px 0 var(--ink); }
.so-bin:hover:not(:disabled) { background: var(--lime); }
.so-bin:disabled { cursor: default; opacity: .55; }
.so-bin.right { background: var(--lime); opacity: 1; }
.so-bin.wrong { background: color-mix(in srgb, var(--tang) 35%, var(--card)); opacity: 1; }
.so-count { display: block; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }

/* 01 AI: tap all */
.tapall { display: grid; gap: 6px; }
@container (min-width: 600px) { .tapall { grid-template-columns: 1fr 1fr; } }
.ta { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 2px 10px; min-height: 48px; padding: 8px 12px; text-align: left; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 15px; font-weight: 600; line-height: 1.25; }
.ta > span { font-size: 20px; }
.ta[aria-pressed="true"] { background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--ink); }
.checked .ta.right { background: var(--lime); }
.checked .ta.wrong { background: color-mix(in srgb, var(--tang) 30%, var(--card)); }
.ta-why { grid-column: 2; font-size: 13px; font-weight: 400; }

/* 02 ML */
.ml { display: grid; gap: 12px; }
.ml-seen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; align-items: center; }
.ml-empty { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.ml-ex { font-size: 30px; line-height: 1; padding: 6px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--ink); animation: popin .4s var(--ease-spring); }
.ml-test { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--card); border: 2px dashed var(--ink); }
.ml-photo { font-size: 50px; text-align: center; }
.ml-guess { display: grid; gap: 6px; font-size: 15px; }
.ml-bar { height: 14px; border-radius: 7px; border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden; }
.ml-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .6s var(--ease-out); }
.ml-say { font-family: var(--f-mono); font-size: 13px; }

/* 03 neural network */
.nn { display: grid; gap: 10px; align-items: center; }
.nn-ins { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-in { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); font-family: var(--f-mono); font-size: 15px; }
.nw-in[aria-pressed="true"] { background: var(--lime); }
.nn-svg { width: 100%; height: auto; max-height: 240px; display: block; }
.nn-svg line { stroke: var(--blue); stroke-opacity: calc(.12 + var(--a, 0) * .88); stroke-linecap: round; transition: stroke-opacity .4s; }
.nn-svg circle { fill: color-mix(in srgb, var(--lime) calc(var(--a, 0) * 100%), var(--card)); stroke: var(--ink); stroke-width: 2; transition: fill .4s; }
.nn-svg .nn-o { stroke-width: 3; }
.nn-out { display: flex; align-items: baseline; gap: 10px; }
.nn-pct { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--blue); }
.nn-say { font-weight: 700; font-size: 18px; }
@container (min-width: 520px) {
  .nn { grid-template-columns: 130px 1fr 150px; }
  .nn-ins { flex-direction: column; }
  .nn-out { flex-direction: column; gap: 2px; }
}

/* 04 params */
.big-n { font-size: clamp(32px, 6vw, 44px) !important; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
.scale { height: 10px; border-radius: 5px; background: var(--night-2); overflow: hidden; }
.scale i { display: block; height: 100%; background: var(--lime); border-radius: 5px; animation: grow .7s var(--ease-out); }
@keyframes grow { from { width: 0 !important; } }

/* 06 LLM */
.llm-s { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.llm-o { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.llm-b { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 17px; font-weight: 700; text-align: left; }
.llm-b::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sky); transition: width .6s var(--ease-out); }
.llm-b > * { position: relative; }
.llm-b b { font-family: var(--f-mono); font-size: 14px; font-weight: 500; visibility: hidden; }
.revealed .llm-b::before { width: var(--p); }
.revealed .llm-b b { visibility: visible; }
.llm-b.mine { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 08 tokens */
.tok-row { display: flex; flex-wrap: wrap; gap: 5px; min-height: 40px; }
.tok-row .tk { animation: popin .35s var(--ease-spring) backwards; }
.tok-meta { margin: 0; font-family: var(--f-mono); font-size: 14px; }
.tok-meta .ids { color: var(--ink-2); }
.tries { align-items: center; }
.tries-l { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }

/* 09 n-grams */
.ng-s { margin: 0; font-size: clamp(22px, 3.6vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.ng-s span { padding: 0 .1em; border-radius: 6px; transition: background .25s; }
.ng-s span.in { background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.ng-all { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ng-l { flex-basis: 100%; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.ng-g { font-family: var(--f-mono); font-size: 14px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--ink); background: var(--card); }
.ng-g.on { background: var(--ink); color: var(--paper); }

/* 10 embedding */
.emb {
  position: relative; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden;
  background-color: var(--card);
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 10% 10%;
}
@container (min-width: 480px) { .emb { aspect-ratio: 4 / 3; } }
.emb-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.emb-lines line { stroke: var(--blue); stroke-width: .8; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; stroke-width: 2.5; }
.emb-w { position: absolute; translate: -50% -50%; min-height: 32px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-family: var(--f-mono); font-size: 13px; white-space: nowrap; }
.emb-w.on { background: var(--blue); color: #fff; z-index: 2; }
.emb-w.near { background: var(--lime); z-index: 1; }
.emb-read { margin: 0; font-size: 15px; }
.emb-read code { font-family: var(--f-mono); font-size: 13px; background: var(--card); padding: 2px 6px; border-radius: 5px; margin-right: 6px; }

/* 11 context window */
.cw-chat { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.cw-m { margin: 0; max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 15px; line-height: 1.35; animation: popin .35s var(--ease-spring) backwards; }
.cw-m.you { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.cw-m.ai { align-self: flex-start; background: var(--card); border: 1.5px solid var(--ink); border-bottom-left-radius: 4px; }
.cw-m.gone { opacity: .4; text-decoration: line-through; }
.cw-m small { display: block; font-family: var(--f-mono); font-size: 11px; text-decoration: none; }
.cw-m.final { border-width: 2px; font-weight: 700; }
.cw-edge { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--blue); }
.cw-edge::before, .cw-edge::after { content: ""; flex: 1; border-top: 2px dashed var(--blue); }
.cw-note { margin: 4px 0 0; font-size: 15px; font-weight: 600; }

/* 12 inference */
.inf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inf .meter-n { font-size: clamp(30px, 5vw, 44px); }
.meter-zero { border-style: dashed; background: transparent; }
.enter-key { min-width: 120px; }

/* 13 temperature */
.tw-bars { display: grid; gap: 4px; }
.tw-b { display: grid; grid-template-columns: 112px 1fr 40px; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 13px; }
.tw-b i { display: block; height: 12px; border-radius: 6px; background: var(--blue); min-width: 2px; transition: width .3s var(--ease-out); }
.tw-b:first-child i { background: var(--lime); border: 1.5px solid var(--ink); }
.tw-b b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.tw-pick { color: var(--blue); }

/* 14 pre-training */
.pt { display: grid; gap: 4px; }
.pt-l { color: var(--ink); }
.pt-shelf { display: flex; gap: 3px; align-items: flex-end; height: 44px; }
.pt-shelf i { flex: 1; border-radius: 2px 2px 0 0; border: 1.5px solid var(--ink); height: calc(60% + (var(--i) * 7 % 40) * 1%); background: var(--sky); opacity: clamp(.12, calc(var(--fill, 0) - var(--i)), 1); transition: opacity .3s; }
.pt-shelf i:nth-child(3n) { background: var(--peach); } .pt-shelf i:nth-child(4n) { background: var(--lime); } .pt-shelf i:nth-child(5n) { background: var(--pink); }

/* 16 overfitting */
.of { display: grid; gap: 10px; }
.of-svg { width: 100%; height: auto; display: block; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; }
.of-fit { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.of-fit.draw { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawline 1s var(--ease-out) forwards; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.of-p { fill: var(--ink); }
.of-t { fill: var(--card); stroke: var(--tang); stroke-width: 3; }
.of-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-mono); font-size: 13px; }
.of-key span { display: inline-flex; align-items: center; gap: 6px; }
.of-key i { width: 12px; height: 12px; border-radius: 50%; }
.k-p { background: var(--ink); } .k-t { border: 3px solid var(--tang); }
.of-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.of-scores .meter-n { font-size: clamp(28px, 5vw, 40px); }
@container (min-width: 640px) { .of { grid-template-columns: 1.6fr 1fr; align-items: center; } .of-key { grid-column: 1; } .of-scores { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; } }

/* 18 few-shot learning */
.fs { display: grid; gap: 6px; }
.fs-ex { margin: 0; display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; font-size: 20px; font-weight: 700; padding: 6px 12px; border-radius: 10px; background: var(--card); }
.fs-ex i { font-style: normal; color: var(--blue); text-align: center; }
.fs-q { border: 2px dashed var(--ink); }
.fs .chips-row { margin-top: 6px; }
.fs .pick { font-size: 18px; min-width: 64px; text-align: center; }

/* 19 multimodal */
.mm { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.mm-col { display: grid; gap: 6px; }
.mm-h { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.mm-b { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); font-weight: 700; font-size: 15px; }
.mm-b b { width: 22px; text-align: center; font-family: var(--f-mono); font-weight: 500; }
.mm-b[aria-pressed="true"] { background: var(--blue); color: #fff; }
.mm-model { writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 6px; border-radius: 10px; background: var(--ink); color: var(--lime); font-family: var(--f-mono); font-size: 12px; }

/* 20 prompting */
.pp { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.5; }
.pp span { padding: .05em .1em; border-radius: 6px; transition: background .25s, box-shadow .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.show-instr .pp-instr { background: var(--sky); box-shadow: 0 0 0 1.5px var(--ink); }
.show-frame .pp-frame { background: var(--peach); box-shadow: 0 0 0 1.5px var(--ink); }
.show-cons .pp-cons { background: var(--pink); box-shadow: 0 0 0 1.5px var(--ink); }
.pp-b-instr[aria-pressed="true"] { background: var(--sky); color: var(--ink); }
.pp-b-frame[aria-pressed="true"] { background: var(--peach); color: var(--ink); }
.pp-b-cons[aria-pressed="true"] { background: var(--pink); color: var(--ink); }
.pp-b[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* 22 few-shot prompt */
.fsp > * + * { margin-top: 12px; }
.fsp-prompt { padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); }
.fsp-prompt .mini-out-l { color: var(--ink-2); }
.fsp-ex { display: grid; gap: 6px; }
.fsp-e { margin: 0; display: grid; gap: 2px 10px; font-size: 14px; line-height: 1.35; animation: popin .35s var(--ease-spring); }
.fsp-e span { font-style: italic; }
@container (min-width: 420px) { .fsp-e { grid-template-columns: 110px 1fr; } }
.fsp-ask { margin: 8px 0 0; font-size: 16px; }

/* 23 instructional */
.in-wrap { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 14px; align-items: center; }
.in-svg { width: 100%; height: auto; display: block; }
.in-svg .ring { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.in-svg .bull { fill: var(--tang); }
.in-svg .dart { fill: var(--blue); stroke: var(--card); stroke-width: 2; transition: transform .6s var(--ease-spring); }
.in-cons { display: grid; gap: 6px; }
.in-p { font-weight: 700; }
@container (max-width: 360px) { .in-wrap { grid-template-columns: 1fr; } .in-svg { max-width: 200px; margin: 0 auto; } }

/* 25 contextual */
.cx-bubbles { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-q { padding: 6px 12px; border-radius: 16px 16px 16px 4px; background: var(--card); border: 1.5px dashed var(--ink); font-size: 14px; font-weight: 600; transition: transform .35s var(--ease-spring), opacity .3s; }
.cx-q.popped { transform: scale(.6); opacity: .25; text-decoration: line-through; }

/* 26 chain */
.ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-step { position: relative; padding-left: 18px; border-left: 3px solid var(--blue); }
.ch-p { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.ch-p span { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 5px; background: var(--blue); color: #fff; font-family: var(--f-mono); font-size: 12px; font-weight: 400; }
.ch-out { display: flex; flex-wrap: wrap; gap: 5px; }
.ch-out p { margin: 0; font-size: 17px; font-weight: 600; font-style: italic; }
.ch-chip { font-size: 13px; padding: 4px 8px; border-radius: 8px; background: var(--card); border: 1.5px solid var(--ink); }
.ch-chip.keep { background: var(--lime); }

/* 27 system prompt */
.sy > * + * { margin-top: 12px; }
.sy-curtain { padding: 10px 12px; border: 2px dashed var(--ink-2); border-radius: 12px; transition: background .25s, border-color .25s; }
.sy-curtain[data-on="true"] { border-style: solid; border-color: var(--ink); background: var(--card); }
.sy-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 700; font-size: 14px; }
.sy-dot { width: 30px; height: 18px; border-radius: 9px; background: var(--paper-2); border: 1.5px solid var(--ink); position: relative; }
.sy-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--ease-spring); }
.sy-switch[aria-pressed="true"] .sy-dot { background: var(--lime); }
.sy-switch[aria-pressed="true"] .sy-dot::after { transform: translateX(12px); }
.sy-text { margin: 8px 0 0; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); transition: filter .3s, opacity .3s; }
.sy-curtain[data-on="false"] .sy-text { filter: blur(3px); opacity: .5; }

/* 28 hallucination */
.hl { display: grid; gap: 8px; }
.hl-s { display: grid; gap: 6px; padding: 12px 14px; text-align: left; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 16px; font-weight: 600; line-height: 1.35; }
.hl-c { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 400; color: var(--ink-2); }
.hl-c i { height: 6px; border-radius: 3px; background: var(--blue); }
.hl-s.caught { background: color-mix(in srgb, var(--tang) 22%, var(--card)); }
.hl-s.caught > span:first-child { text-decoration: line-through; text-decoration-color: var(--tang); text-decoration-thickness: 2px; }
.hl-s.ok { background: color-mix(in srgb, var(--mint) 60%, var(--card)); }
.hl-s:disabled { cursor: default; }

/* 29 bias */
.bs-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; font-size: clamp(22px, 4.5vw, 32px); text-align: center; }
.bs-row span { animation: popin .3s var(--ease-spring) backwards; }
.bs-l { font-weight: 700; }

/* 31 agent */
.ag { display: grid; gap: 10px; }
@container (min-width: 560px) { .ag { grid-template-columns: 1fr 1fr; } }
.ag-col .mini-out-l { color: var(--ink-2); }
.ag-out { margin: 0; min-height: 150px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); font-size: 15px; line-height: 1.4; }
.ag-out p { margin: 0 0 6px; }
.ag-out .mini-meta { color: var(--ink-2); }
.ag-agent .ag-out { background: var(--ink); color: var(--paper); }
.ag-steps { list-style: none; display: grid; gap: 5px; align-content: start; }
.ag-steps li { display: flex; gap: 8px; }
.ag-steps li:not(.mini-meta):not(.out-empty)::before { content: "→"; color: var(--lime); }
.ag-steps .out-empty { color: #B9B6AE; }
.ag-steps .mini-meta { color: var(--lime); }

/* 32 digital worker */
.dw-badge { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); max-width: 360px; }
.dw-ava { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--peach); border: 1.5px solid var(--ink); font-size: 18px; }
.dw-badge b { display: block; font-size: 16px; }
.dw-badge small { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.dw-day { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dw-day:empty { display: none; }
.dw-day li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 15px; }
.dw-day li span { font-family: var(--f-mono); font-size: 13px; color: var(--blue); padding-top: 1px; }

/* 33 vibe coding */
.vb { display: grid; gap: 10px; }
@container (min-width: 480px) { .vb { grid-template-columns: 1.2fr 1fr; } }
.vb-code { margin: 0; min-height: 120px; padding: 12px; border-radius: 12px; background: var(--ink); color: var(--lime); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.vb-code code::after { content: "▍"; animation: blink 1s steps(1) infinite; }
.vb-app { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 120px; padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); text-align: center; }
.vb-res { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

/* 34 alignment */
.hed { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }

/* 35 AGI */
.agi { display: grid; gap: 8px; }
.agi-r { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 600; }
.agi-r i { height: 14px; border-radius: 7px; border: 1.5px solid var(--ink); background: var(--card); overflow: hidden; }
.agi-r b { display: block; height: 100%; background: var(--blue); transition: width .7s var(--ease-out); }
.agi.dream .agi-r b { background: repeating-linear-gradient(-45deg, var(--blue) 0 6px, var(--sky) 6px 12px); }

/* ---------- end of the line ---------- */
.eol { padding: 80px 0 40px; border-top: 2px solid var(--ink); margin-top: 60px; }
.eol-score { margin: 0 0 10px; font-family: var(--f-mono); font-size: 14px; color: var(--blue); min-height: 1.2em; }
.eol-title { margin: 0; font-size: clamp(40px, 8vw, 80px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.eol-title em { color: var(--blue); }
.eol-rooms { margin-top: 28px; display: grid; gap: 12px; }
.eol-rooms .room { grid-column: auto; grid-row: auto; }
@media (min-width: 700px) { .eol-rooms { grid-template-columns: 1fr 1fr; } }
.foot-slim { padding-top: 10px; }
.foot-slim .foot-row { margin-top: 20px; }

/* got-it pill in the top bar */
.got-btn .notes-dot { background: var(--blue); }

/* ---------- route sheet ---------- */
.route-list { display: grid; gap: 14px; margin-bottom: 20px; }
.rl-h { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; }
.rl-h span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.rl-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-terms a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1.5px dashed var(--ink); border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.rl-terms a.got { border-style: solid; background: var(--lime); }
.rl-terms a.got::after { content: " ✓"; margin-left: 4px; color: var(--blue); }
.sheet .sheet-in { max-height: 88svh; overflow-y: auto; }
.map-col a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .blank, .vb-code code::after { animation: none !important; }
  .of-fit.draw { stroke-dasharray: none; animation: none; }
}