/* ──────────────────────────────────────────────────────────────────
 * The public landing page (templates/landing.html). Colours, type and
 * spacing tokens come from static/public/tokens.css.
 *
 * Two surfaces. The field (ultramarine) is where the face lives: the
 * hero and the closing. The paper is where the work is shown. Butter is
 * the light of the eyes; on paper it only appears as the highlighter
 * that marks what you are tracing, as if the face were looking at it.
 * ────────────────────────────────────────────────────────────────── */
:root {
  --K: 5.5;        /* hero face scale; 1 = the 76px launcher */
  --KC: 6;         /* closing face scale */
}
@media (max-width: 1099px) { :root { --K: 4.5; --KC: 5; } }
@media (max-width: 720px)  { :root { --K: 3.2; --KC: 3.4; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--hl); color: var(--ink); }
body .face {
  --face-eye: var(--eye);
  --face-glow: var(--glow);
  --face-hand: var(--eye);
}
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; }
code, pre { font-family: var(--mono); font-variant-ligatures: none; }
:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; }
.on-field :focus-visible { outline-color: var(--on-field); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font: 600 16px/1 var(--sans); letter-spacing: -0.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: inherit;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.on-field .btn-primary { background: var(--on-field); color: var(--field); }
.on-field .btn-primary:hover { background: #fff; }
.on-field .btn-quiet { color: var(--on-field); border-color: var(--on-field-hair); }
.on-field .btn-quiet:hover { border-color: var(--on-field); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
.btn-line { color: var(--ink); border-color: var(--hair); }
.btn-line:hover { border-color: var(--ink); }
.btn-erase { color: var(--erase); border-color: rgba(196, 40, 47, 0.45); }
.btn-erase:hover { background: var(--erase); border-color: var(--erase); color: #fff; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-erase[disabled]:hover { background: transparent; color: var(--erase); }

/* ── Field (hero + closing) ──────────────────────────────────── */
.on-field { background: var(--field); color: var(--on-field); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--edge);
  position: relative; z-index: 5;
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 650 22px/1 var(--display); letter-spacing: -0.035em; text-decoration: none; }
/* The mark beside the wordmark in the header: static/brand/mark-on-field.svg. */
.wordmark-mark { display: block; flex: none; }
.nav ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav a { font: 500 15px/1 var(--sans); text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { min-height: 38px; padding: 0 16px; font-size: 15px; }
/* The language switcher (static/public/language.css), as bright as the
   links beside it. Its menu drops over the hero, so while it is open the
   nav rises above the flying face (z-index 40). */
.nav .lang-toggle { color: var(--on-field); }
.nav:has(.lang[open]) { z-index: 50; }

/* The hero is the field, with the plate rising out of it: the top of the
   plate sits on the blue and the rest runs on into the paper below, so the
   first screen holds the face, the pitch and the working demo at once. */
.hero {
  --cut: clamp(260px, 30vw, 460px);   /* how much of the plate hangs below the field */
  background: linear-gradient(to bottom, var(--field) calc(100% - var(--cut)), var(--paper) 0);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: 32px;
  padding: clamp(16px, 4vh, 48px) var(--edge) clamp(36px, 6vh, 64px);
}
/* The face is not in these boxes; it lives in one fixed element that flies
   between slots. A slot only says where its centre should be, and its
   height sets the scale (40px of slot per launcher-sized face). */
.slot { width: 100%; height: calc(40px * var(--K)); }
.hero h1, .closing h2 {
  font-weight: 300; font-size: clamp(42px, 5.2vw, 76px); line-height: 0.96;
  letter-spacing: -0.03em; max-width: 15ch;
}
.deck { margin-top: 20px; max-width: 48ch; color: var(--on-field-2); font-size: 18px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-plate { padding-bottom: clamp(56px, 8vh, 88px); }
.plate-hint { margin-top: 16px; font-size: 15px; color: var(--ink-3); }

/* Closing: the face comes home to the middle of the field. */
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px var(--gutter); }
.stage-inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ── The creature: one face, flown by scroll ─────────────────── */
.creature {
  --s: 1; --disc: 0;
  position: fixed; left: 0; top: 0; z-index: 40;
  width: calc(76px * var(--K)); height: calc(76px * var(--K));
  transform-origin: 50% 50%; pointer-events: none; visibility: hidden;
}
.creature.is-placed { visibility: visible; }
/* The creature is two boxes. The outer one only flies: stage.js writes its
   inline transform every scroll frame, and nothing else may touch its
   transform channels (an individual scale or translate on it would compose
   around its untransformed centre, near the top left of the window, and
   shove the whole launcher toward the corner). The inner .creature-body
   carries the sphere, the face and all the body motion, around its own
   base. It sits inside the flight's scale, so its jumps are divided by --s
   to come out in screen pixels. */
.creature-body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 92%;
}
/* Docked, it is the launcher, with the launcher's body motion: puff on
   hover, squash on press, sway while thinking, nod when drowsy, yawn on
   waking, and the dock bounce when a reply is waiting. */
.creature.is-docked .creature-body {
  transition: scale 460ms cubic-bezier(0.34, 1.7, 0.5, 1),
              rotate 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.creature.is-docked:has(.pet:hover) .creature-body { scale: 1.08; }
.creature.is-docked:has(.pet:active) .creature-body { scale: 1.02 0.9; transition-duration: 110ms; }
.creature.is-docked:has(.face[data-ag-face="thinking"]) .creature-body { animation: creature-sway 2.6s ease-in-out infinite; }
.creature.is-docked:has(.face[data-ag-face="drowsy"]) .creature-body { rotate: -4deg; }
.creature.is-docked:has(.face[data-ag-face="dozing"]) .creature-body { rotate: -9deg; }
.creature.is-docked:has(.face.ag-launcher-waking) .creature-body { animation: creature-yawn 760ms cubic-bezier(0.34, 1.4, 0.5, 1); }
.creature.is-docked:has(.face[data-ag-face="excited"]) .creature-body {
  animation: creature-bounce 1.15s cubic-bezier(0.3, 0, 0.3, 1) 3,
             creature-bounce-idle 11s cubic-bezier(0.3, 0, 0.3, 1) 3.45s infinite;
}
/* The body jumps, so the eyes' own hop would double up. */
.creature.is-docked .face[data-ag-face="excited"] .face-eyes { animation: none; }
@keyframes creature-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes creature-yawn {
  0% { scale: 1 1; } 28% { scale: 1.1 0.86; } 56% { scale: 0.94 1.12; } 78% { scale: 1.03 0.97; } 100% { scale: 1 1; }
}
@keyframes creature-bounce {
  0%   { translate: 0 0;                           scale: 1 1; }
  12%  { translate: 0 0;                           scale: 1.1 0.88; }
  40%  { translate: 0 calc(-30px / var(--s));     scale: 0.94 1.08; }
  52%  { translate: 0 calc(-32px / var(--s));     scale: 1 1; }
  74%  { translate: 0 0;                           scale: 1.14 0.84; }
  84%  { translate: 0 calc(-5px / var(--s));      scale: 0.98 1.03; }
  100% { translate: 0 0;                           scale: 1 1; }
}
@keyframes creature-bounce-idle {
  0%          { translate: 0 0;                       scale: 1 1; }
  1.25%       { translate: 0 0;                       scale: 1.1 0.88; }
  4.2%        { translate: 0 calc(-30px / var(--s)); scale: 0.94 1.08; }
  5.4%        { translate: 0 calc(-32px / var(--s)); scale: 1 1; }
  7.7%        { translate: 0 0;                       scale: 1.14 0.84; }
  8.8%        { translate: 0 calc(-5px / var(--s));  scale: 0.98 1.03; }
  10.5%, 100% { translate: 0 0;                       scale: 1 1; }
}

/* The real panel opens over the corner, so the face steps aside. Seated
   in the plate's widget, the face there takes over (no fade: same pixels). */
.creature { transition: opacity 180ms ease; }
.creature.is-hidden { opacity: 0; }
.creature.is-seated { opacity: 0; transition: none; }
.creature.is-hidden .pet, .creature.is-seated .pet { pointer-events: none; }
.creature-body::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* The same lit sphere as the widget's launcher, fading in as it docks. */
  background: radial-gradient(circle at 34% 26%, #5560EA 0%, var(--field) 42%, #121A99 100%);
  opacity: var(--disc);
  box-shadow: 0 calc(10px * var(--K)) calc(28px * var(--K)) rgba(15, 20, 64, calc(0.3 * var(--disc) * var(--disc) * var(--disc)));
}
.creature .face { --k: var(--K); position: absolute; inset: 0; }
.creature .face-eyes { transition: transform 110ms cubic-bezier(0.2, 0.8, 0.2, 1), rotate 320ms var(--spring), opacity 160ms ease; }
.pet {
  position: absolute; left: 50%; top: 50%;
  width: calc(44px * var(--K)); height: calc(32px * var(--K)); translate: -50% -50%;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  border-radius: calc(16px * var(--K)); pointer-events: auto; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.creature.is-flying .pet { pointer-events: none; }
.creature.is-docked .pet { width: 100%; height: 100%; border-radius: 50%; cursor: pointer; }
.creature.is-news .pet { cursor: pointer; }
.pet:focus-visible { outline: calc(2px / var(--s)) solid var(--field); outline-offset: calc(4px / var(--s)); }
.creature:not(.is-docked) .pet:focus-visible { outline-color: var(--on-field); }
.close-mark {
  position: absolute; left: 50%; top: 50%;
  width: calc(22px * var(--K)); height: calc(22px * var(--K));
  translate: -50% -50%; opacity: 0; scale: 0.6;
  transition: opacity 160ms ease, scale 220ms var(--spring); pointer-events: none;
}
.close-mark::before, .close-mark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: calc(2.4px * var(--K)); margin-top: calc(-1.2px * var(--K));
  background: var(--on-field); border-radius: calc(2px * var(--K)); rotate: 45deg;
}
.close-mark::after { rotate: -45deg; }
/* On the open field there is no button edge to wave from, so the hand
   comes up beside the left eye. Docked, it is back on the rim. */
.creature:not(.is-docked) .face-hand {
  width: calc(15px * var(--K)); height: calc(15px * var(--K));
  top: calc(15px * var(--K)); right: auto; left: calc(7px * var(--K));
  transform: scaleX(-1);
}
.creature.is-open .face-eyes, .creature.is-open .face-hand { opacity: 0; }
.creature.is-open .close-mark { opacity: 1; scale: 1; }

/* ── Corner widget panel ─────────────────────────────────────── */
.panel {
  position: fixed; z-index: 45;
  right: var(--dock-m, 28px); bottom: calc(var(--dock-m, 28px) + var(--dock-s, 72px) + 14px);
  width: min(368px, calc(100vw - 2 * var(--dock-m, 28px)));
  height: min(540px, calc(100svh - var(--dock-s, 72px) - 2 * var(--dock-m, 28px) - 40px));
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(15, 20, 64, 0.35);
  transform-origin: calc(100% - 36px) 100%;
  transition: opacity 180ms ease, scale 260ms var(--spring, ease), visibility 0s linear 0s;
}
.panel[hidden] { display: flex; visibility: hidden; opacity: 0; scale: 0.92; pointer-events: none;
  transition: opacity 140ms ease, scale 200ms ease, visibility 0s linear 200ms; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--field); color: var(--on-field); }
.mini { --k: 0.3684; width: 28px; height: 28px; flex: none; padding: 0; border: 0; background: transparent; color: inherit; }
.mini.ag-face-actionable { cursor: pointer; }
.panel-title { font: 600 15px/1.2 var(--sans); }
.panel-sub { font: 400 13px/1.2 var(--sans); color: var(--on-field-2); }
.panel-close { margin-left: auto; width: 36px; height: 36px; border: 0; background: transparent; color: var(--on-field); font: 400 24px/1 var(--sans); cursor: pointer; }
.panel-close:hover { background: rgba(243, 244, 255, 0.12); }
.panel-close:focus-visible { outline-color: var(--on-field); outline-offset: -2px; }
.thread { flex: 1; overflow-y: auto; padding: 20px 18px 8px; display: flex; flex-direction: column; gap: 14px; }
.msg { font-size: 15.5px; line-height: 1.5; max-width: 92%; }
.msg-me { align-self: flex-end; background: rgba(30, 43, 214, 0.08); padding: 9px 12px; }
.msg-it { align-self: flex-start; }
.msg-thinking { color: var(--ink-3); font-size: 14px; }
.prompts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.prompt { font: 500 14.5px/1.3 var(--sans); color: var(--field); background: transparent; border: 1px solid rgba(30, 43, 214, 0.35); padding: 9px 12px; cursor: pointer; text-align: left; }
.prompt:hover { border-color: var(--field); background: rgba(30, 43, 214, 0.05); }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hair); background: var(--sheet); }
.composer input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 0; background: #fff; color: var(--ink); font: 400 15px/1 var(--sans); }
.composer input:focus { outline: 2px solid var(--field); outline-offset: -1px; border-color: transparent; }
.composer button { height: 42px; padding: 0 16px; border: 0; background: var(--field); color: var(--on-field); font: 600 14.5px/1 var(--sans); cursor: pointer; }

/* ── Paper sections ──────────────────────────────────────────── */
.wrap { padding: 0 var(--edge); }
.handoff { padding: clamp(96px, 16vh, 168px) 0 clamp(56px, 8vh, 88px); }
.handoff-line { font: 300 clamp(36px, 5vw, 68px)/1 var(--display); letter-spacing: -0.03em; max-width: 15ch; }
.handoff-sub { margin-top: 20px; color: var(--ink-2); max-width: 44ch; }

.section { padding: clamp(72px, 11vh, 120px) 0; border-top: 1px solid var(--hair); }
.section h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 450; max-width: 18ch; }
.section h3 { font: 450 26px/1.15 var(--display); letter-spacing: -0.025em; }
.lede { margin-top: 20px; max-width: 60ch; color: var(--ink-2); }
.lede + .lede { margin-top: 14px; }
h3 + .lede { margin-top: 14px; }
.lede code, .noted code, .idx code { font-size: 0.86em; color: var(--ink); background: rgba(30, 43, 214, 0.07); padding: 1px 5px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.two > * { min-width: 0; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.sheet-panel { background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius); }

/* ── The plate: the file, wired to what it makes ─────────────── */

.plate {
  --code-fs: clamp(11.5px, 0.86vw, 13px);
  position: relative; margin: 0;
  display: grid; grid-template-columns: minmax(0, 47fr) 60px minmax(0, 53fr);
  border: 1px solid var(--hair); background: var(--sheet);
  box-shadow: 0 40px 70px -48px rgba(8, 12, 60, 0.55);
}
/* Registration ticks: the drawing's frame. */
.plate::before, .plate::after, .plate-ticks::before, .plate-ticks::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--ink); border-style: solid; pointer-events: none; z-index: 3;
}
.plate::before { top: -7px; left: -7px; border-width: 1px 0 0 1px; border-color: var(--on-field); }
.plate::after { top: -7px; right: -7px; border-width: 1px 1px 0 0; border-color: var(--on-field); }
.plate-ticks::before { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.plate-ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.plate-label {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); height: 36px; align-items: center;
}
.plate-label > * { padding: 0 16px; display: flex; gap: 12px; align-items: center; white-space: nowrap; overflow: hidden; }
.plate-label code { color: var(--ink); font-size: 12.5px; font-weight: 500; }
.plate-label > :last-child { grid-column: 3; border-left: 1px solid var(--hair); height: 100%; }

.src { grid-column: 1; padding: 16px 0 20px; overflow-x: auto; font: 400 var(--code-fs)/1.5 var(--mono); font-variant-ligatures: none; color: var(--ink); }
.ln { display: grid; grid-template-columns: 15px 3ch minmax(0, 1fr); column-gap: 1.3ch; padding: 0 14px 0 12px; align-items: center; min-height: 1.5em; }
.ln > .no { text-align: right; color: var(--ink-3); user-select: none; font-size: 0.92em; }
.ln > .lc { white-space: pre; }
.ln[data-w] { cursor: default; transition: background-color .15s; }
.ln.is-lit { background: rgba(30, 43, 214, 0.06); }
.t-kw, .t-fn { font-weight: 600; }
.t-dec, .t-ag { color: var(--field); font-weight: 500; }
.t-str { color: var(--str); }
.t-doc { color: var(--str); }
.t-const { color: var(--field); font-weight: 600; }
.t-p { color: var(--ink-3); }

/* The highlighter: butter, the light of the eyes. */
mark.hl, .mk, .rt {
  color: inherit; background-color: transparent;
  background-image: linear-gradient(100deg, rgba(255, 224, 138, 0.85), var(--hl) 8%, var(--hl) 92%, rgba(255, 224, 138, 0.8));
  background-repeat: no-repeat; background-size: 0% 84%; background-position: 0 75%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .34s var(--ease);
  padding: 0 0.12em; margin: 0 -0.12em;
}
mark.hl.is-lit, .is-lit > .mk, .is-lit .rt { background-size: 100% 84%; }

/* Reference letters: square, like the reference chips. */
.tag {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border: 1px solid rgba(15, 20, 64, 0.3); background: var(--sheet); color: var(--ink-3);
  font: 600 9px/1 var(--sans); font-style: normal;
  transition: background-color .2s, color .2s, border-color .2s; user-select: none;
}
.tag.is-rest { border-color: var(--field); color: var(--field); }
.tag.is-on { background: var(--field); border-color: var(--field); color: #fff; }

/* Live controls inside the code. */
.seg { display: inline-flex; border: 1px solid rgba(15, 20, 64, 0.25); vertical-align: middle; font-size: 0.94em; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 1px 9px; color: var(--ink-2); transition: background-color .15s, color .15s; }
.seg label + label span { border-left: 1px solid rgba(15, 20, 64, 0.25); }
.seg input:checked + span { background: var(--field); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--field); outline-offset: 2px; }
.seg label:hover input:not(:checked) + span { background: rgba(30, 43, 214, 0.07); color: var(--ink); }
.mem-switch { font: inherit; color: var(--field); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; border-bottom: 1.5px dotted var(--field); }
.mem-switch[aria-checked="false"] { color: var(--ink-3); border-bottom-color: var(--ink-3); }
#voice-str { border-bottom: 1.5px dotted var(--str); }
.lens .no::after { content: "\21B3"; color: var(--ink-3); }

.gut { grid-column: 2; }
.app-stage { grid-column: 3; position: relative; background: #E2E5F3; border-left: 1px solid var(--hair); min-height: 100%; }

/* Ledgerline: a host app in greys, so the assistant is the only colour. */
.app { position: absolute; inset: 18px; background: #FBFBFE; border: 1px solid #D3D7E8; overflow: hidden; color: #5B6080; font-size: 12.5px; }
.app-top { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid #E3E6F1; }
.app-logo { width: 16px; height: 16px; background: #A0A5BD; }
.app-brand { font-weight: 650; color: #44496A; font-size: 13px; }
.app-search { margin-left: 18px; width: 170px; height: 26px; border: 1px solid #DCDFEC; display: flex; align-items: center; padding: 0 9px; color: #9CA1B8; }
.app-side { position: absolute; left: 0; top: 42px; bottom: 0; width: 42px; border-right: 1px solid #E3E6F1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 16px; }
.app-side i { width: 16px; height: 16px; background: #DCDFEC; }
.app-side i.on { background: #8E93AE; }
.app-main { margin-left: 42px; padding: 18px; }
.app-main h3 { margin: 0; font: 650 18px/1.2 var(--sans); color: #33385A; letter-spacing: -0.015em; }
.app-main .sub { margin: 2px 0 14px; color: #8E93AE; font-size: 12px; }
.ds { width: 620px; border-collapse: collapse; }
.ds th { text-align: left; font-weight: 550; color: #8E93AE; font-size: 11.5px; padding: 0 0 7px; border-bottom: 1px solid #E3E6F1; }
.ds td { padding: 8px 0; border-bottom: 1px solid #ECEEF6; white-space: nowrap; }
.ds td:first-child { color: #3D4264; font-weight: 550; width: 132px; }
.ds tr.is-lit td:first-child .mk { background-size: 100% 84%; }
.bar { display: inline-block; height: 6px; background: #B4B9CF; margin-right: 7px; vertical-align: middle; }
.ds .num { width: 110px; }
.app-chart { margin-top: 22px; width: 250px; }
.app-chart p { margin: 0 0 6px; font-size: 11.5px; color: #8E93AE; }

/* The assistant inside Ledgerline: the same widget as the corner panel. */
.w {
  position: absolute; z-index: 2; top: 14px; right: 14px; bottom: 14px; width: min(372px, 58%);
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink);
  box-shadow: 0 26px 50px -28px rgba(15, 20, 64, 0.55);
  font-size: 13.5px; line-height: 1.5;
}
.w.is-private { outline: 1.5px dashed var(--ink-3); outline-offset: -1px; }
.w-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; background: var(--field); color: var(--on-field); }
.w.is-private .w-head { background: var(--ink); }
.w-face { --k: 0.42; --disc: #3340E6; width: 32px; height: 32px; flex: none; }
/* Empty until the hero face flies in and sits down (stage.js). */
.w-face.is-vacant { visibility: hidden; }
.w-title { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.w-title b { font-weight: 600; font-size: 14px; position: relative; align-self: flex-start; }
.w-title small { color: var(--on-field-2); font-size: 12px; }
.w-title .mk { color: var(--on-field); }
.w-title .is-lit > .mk, .w-title.is-lit .mk { color: var(--ink); }
.ib { width: 32px; height: 32px; border: 0; background: none; color: var(--on-field); cursor: pointer; display: grid; place-items: center; position: relative; transition: background-color .15s; }
.ib:hover { background: rgba(243, 244, 255, 0.14); }
.ib svg { width: 17px; height: 17px; }
.ib[aria-pressed="true"] { background: rgba(243, 244, 255, 0.2); }
.ib.is-lit, .ib.is-lit[aria-pressed="true"] { background: var(--hl); color: var(--ink); }
.ib:focus-visible { outline-color: var(--on-field); outline-offset: -2px; }
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.w-body { flex: 1; min-height: 0; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.w-greet { color: var(--ink); position: relative; align-self: flex-start; }
.w-prompts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.w-chip { position: relative; display: inline-block; padding: 5px 10px; border: 1px solid rgba(30, 43, 214, 0.35); font-size: 12.5px; color: var(--field); font-weight: 500; transition: background-color .2s, border-color .2s; }
.w-chip.is-lit { background: var(--hl); border-color: #D9B652; color: var(--ink); }
.w-me { align-self: flex-end; max-width: 86%; background: rgba(30, 43, 214, 0.08); padding: 7px 11px; }
.w-tool { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); padding: 4px 10px 4px 8px; font-size: 12px; color: var(--ink-3); background: var(--sheet); transition: background-color .2s, border-color .2s; }
.w-tool code { color: var(--ink); font-weight: 500; font-size: 12px; }
.w-tool svg { width: 14px; height: 14px; color: var(--field); }
.w-tool .spin { display: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(15, 20, 64, 0.2); border-top-color: var(--field); animation: spin .8s linear infinite; }
.w-tool.is-running .spin { display: inline-block; }
.w-tool.is-running .ok { display: none; }
.w-tool.is-lit { background: var(--hl); border-color: #D9B652; }
@keyframes spin { to { rotate: 360deg; } }
.w-reply { position: relative; min-height: 1.5em; }
.w-reply.is-streaming::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 2px; background: var(--field); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.w-ref {
  position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; margin: 0 1px;
  border: 1px solid rgba(30, 43, 214, 0.32); background: transparent; font-weight: 500; font-size: 12.5px;
  text-decoration: none; color: var(--field); line-height: 1.6; vertical-align: 0;
  transition: background-color .2s, border-color .2s;
}
.w-ref::before { content: ""; width: 5px; height: 5px; background: var(--field); flex: none; }
.w-ref:hover { border-color: var(--field); }
.w-ref.is-lit { background: var(--hl); border-color: #D9B652; color: var(--ink); }
.w-mem { position: relative; display: flex; gap: 7px; align-items: flex-start; padding-top: 8px; border-top: 1px dashed var(--hair); font-size: 12px; color: var(--ink-3); align-self: stretch; }
.w-mem svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.w-mem[hidden] { display: none; }
.w-private { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 20px 28px; color: var(--ink-3); }
.w-private svg { width: 34px; height: 34px; color: var(--ink); margin-bottom: 6px; }
.w-private b { color: var(--ink); font-weight: 600; }
.w-private p { max-width: 30ch; }
.w-private[hidden], .w-body[hidden] { display: none; }
.w-composer { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--hair); background: var(--sheet); color: var(--ink-3); align-items: center; }
.w-composer span.field { flex: 1; height: 32px; border: 1px solid var(--hair); background: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; }
.w-composer span.send { height: 32px; padding: 0 12px; background: var(--field); color: var(--on-field); display: flex; align-items: center; font-weight: 600; font-size: 12.5px; }

/* Letters on the parts: only for the stacked layout, where wires can't go. */
.ptag { position: absolute; left: -8px; top: -8px; z-index: 2; pointer-events: none; }
@media (min-width: 900px) { .ptag { display: none; } }
.ib .ptag { left: -6px; top: -6px; }
.w-title b .ptag { left: auto; right: -19px; top: -6px; }
.w-reply > .ptag { left: -24px; top: 1px; }
.w-mem > .ptag { left: -24px; top: 7px; }
.w-greet > .ptag { left: -24px; top: 2px; }

/* Wires */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
.wg { opacity: 0; transition: opacity .25s ease; }
.wg.rest, .wg.on { opacity: 1; }
.wg.rest.dim { opacity: 0.14; }
.wg .wire { fill: none; stroke: var(--field); stroke-width: 1.35; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .75s cubic-bezier(.35, .1, .15, 1), stroke-width .2s; }
.wg.rest .wire, .wg.on .wire { stroke-dashoffset: 0; }
.wg.on .wire { stroke-width: 2; }
.wg .lead { fill: none; stroke: var(--field); stroke-width: 1.3; stroke-dasharray: 0.5 3.5; stroke-linecap: round; }
.wg .dot { fill: var(--field); }
.wg .end { fill: var(--sheet); stroke: var(--field); stroke-width: 1.5; }

.trace {
  position: absolute; z-index: 6; left: 0; top: 0; width: 268px; pointer-events: none;
  background: var(--sheet); border: 1px solid var(--field); padding: 10px 12px 11px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink);
  box-shadow: 4px 4px 0 rgba(30, 43, 214, 0.14);
  opacity: 0; transition: opacity .18s ease;
}
.trace.is-shown { opacity: 1; }
.trace-k { display: flex; gap: 7px; align-items: center; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; }
.trace-k code { color: var(--field); font-size: 12px; }

/* The six states: one strip of blue frames. */
.sheet { margin-top: clamp(40px, 6vh, 64px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 2px; }
.frame-cell { margin: 0; }
.frame { position: relative; aspect-ratio: 4 / 5; background: var(--field); display: grid; place-items: center; overflow: hidden; }
.frame .face { --k: 1.7; width: calc(76px * var(--k)); height: calc(76px * var(--k)); }
.frame-cell figcaption { padding: 14px 14px 0 2px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.frame-cell figcaption b { display: block; font: 600 15px/1.3 var(--sans); color: var(--ink); margin-bottom: 3px; }
@media (max-width: 900px) {
  .sheet {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter); padding-bottom: 8px; scrollbar-width: thin;
  }
  .frame-cell { scroll-snap-align: start; }
}
@media (max-width: 520px) { .sheet { grid-auto-columns: 62%; } .frame .face { --k: 1.5; } }

/* ── It reads the room: one chapter, two movements ──────────── *
 * 01, what it's doing: the widget's own states, one strip of blue frames.
 * 02, how it feels: a stage, a map of moods and a filmstrip. Each opens on
 * a hairline with its number, a short title and its lede alongside. */
.room-part { margin-top: clamp(56px, 8vh, 88px); }
.part-h { padding-top: 20px; border-top: 1px solid var(--hair); }
.part-h .lede { margin-top: 0; }
.part-h .lede + .lede { margin-top: 14px; }
.part-n { display: block; margin-bottom: 10px; font: 500 13px/1 var(--mono); color: var(--field); letter-spacing: 0.02em; }
.room-part .sheet, .room-part .feel { margin-top: clamp(28px, 4vh, 40px); }
@media (max-width: 900px) { .part-h { gap: 14px; } }

/* The face's rig, dressed for the field: an ultramarine marble with
 * butter eyes, the same body as .face-disc. */
.feels {
  --rig-body: var(--field);
  --rig-hi: color-mix(in srgb, var(--field) 62%, #fff);
  --rig-lo: color-mix(in srgb, var(--field) 72%, #000);
  --rig-rim: rgba(255, 255, 255, 0.2);
  --rig-eye: var(--eye);
  --rig-glow: #FFD66B;
  --rig-blush: #FF8FB0;
  --rig-floor: rgba(6, 9, 52, 0.62);
  --rig-drop: #E4ECFF;
  --rig-star: #FFF3C4;
}

.feel {
  position: relative; margin: clamp(40px, 6vh, 64px) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px);
  background: var(--field); color: var(--on-field);
  box-shadow: 0 40px 70px -48px rgba(8, 12, 60, 0.55);
}
/* Registration ticks, as on the plate. */
.feel::before, .feel::after, .feel-ticks::before, .feel-ticks::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--ink); pointer-events: none;
}
.feel-ticks { position: absolute; inset: 0; pointer-events: none; }
.feel::before { top: -7px; left: -7px; border-width: 1px 0 0 1px; }
.feel::after { top: -7px; right: -7px; border-width: 1px 1px 0 0; }
.feel-ticks::before { bottom: -7px; left: -7px; border-width: 0 0 1px 1px; }
.feel-ticks::after { bottom: -7px; right: -7px; border-width: 0 1px 1px 0; }

.feel-stage {
  position: relative; min-height: clamp(440px, 54vh, 520px); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; padding: 22px 28px 28px;
  background:
    radial-gradient(46% 52% at 50% 44%, rgba(255, 224, 138, 0.10), transparent 70%),
    radial-gradient(90% 80% at 50% 40%, color-mix(in srgb, var(--field) 90%, #fff), var(--field) 55%, var(--field-deep) 100%);
}
.feel-top { display: flex; justify-content: space-between; align-items: center; font: 400 13px/1 var(--mono); color: var(--on-field-2); }
.feel-pause {
  font: 500 13px/1 var(--mono); color: var(--on-field-2); background: none; cursor: pointer;
  border: 1px solid var(--on-field-hair); padding: 8px 12px; transition: color 160ms ease, border-color 160ms ease;
}
.feel-pause:hover { color: var(--on-field); border-color: var(--on-field); }
.feel-face { display: grid; place-items: center; padding: 4px 0 36px; }

.feel-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; }
.feel-family { display: block; font: 500 13px/1 var(--mono); color: var(--on-field-2); margin-bottom: 12px; }
.feel-name h3 { font: 300 clamp(40px, 4.6vw, 68px)/0.95 var(--display); letter-spacing: -0.035em; }
.feel-name.is-swapping > * { animation: feel-in 560ms var(--ease) both; }
.feel-name.is-swapping h3 { animation-delay: 40ms; }
@keyframes feel-in { from { opacity: 0; translate: 0 12px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

.feel-say { width: min(340px, 48%); flex-shrink: 0; }
.feel-who { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--on-field-2); margin-bottom: 10px; }
.feel-dots { display: inline-flex; gap: 3px; opacity: 0; transition: opacity 200ms ease; }
.feel-dots i { width: 4px; height: 4px; background: currentColor; animation: feel-dot 1s ease-in-out infinite; }
.feel-dots i:nth-child(2) { animation-delay: 0.15s; }
.feel-dots i:nth-child(3) { animation-delay: 0.3s; }
.feel-say.is-typing .feel-dots { opacity: 1; }
@keyframes feel-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.feel-bubble {
  min-height: 52px; padding: 14px 16px; background: var(--sheet); color: var(--ink);
  font: 400 16.5px/1.4 var(--sans); box-shadow: 0 18px 40px -22px rgba(6, 9, 52, 0.7);
  transition: opacity 260ms ease, translate 260ms var(--ease);
}
.feel-say.is-clear .feel-bubble { opacity: 0; translate: 0 6px; }
.feel-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--field); opacity: 0; }
.feel-say.is-typing .feel-caret { opacity: 1; animation: feel-caret 0.9s steps(1) infinite; }
@keyframes feel-caret { 50% { opacity: 0; } }
.feel-reads { margin-top: 10px; font: 400 13px/1.3 var(--mono); color: var(--on-field-2); opacity: 0; transition: opacity 300ms ease; }
.feel-reads b { font-weight: 500; color: var(--eye); }
.feel-say.is-read .feel-reads { opacity: 1; }
.feel-say.is-steering .feel-who, .feel-say.is-steering .feel-bubble, .feel-say.is-steering .feel-reads { opacity: 0.3; }

/* The map: every expression placed by how pleasant and how energetic it is.
 * The butter dot is where the face is right now; the trail is how it got there. */
.feel-map { border-left: 1px solid var(--on-field-hair); padding: 22px 26px 26px; display: flex; flex-direction: column; background: color-mix(in srgb, var(--field-deep) 35%, var(--field)); }
.feel-map-h { font: 500 13px/1 var(--mono); color: var(--on-field); }
.feel-pad { display: block; width: 100%; max-width: 360px; align-self: center; aspect-ratio: 1; margin: 8px 0 4px; touch-action: none; cursor: crosshair; overflow: visible; }
.feel-pad .fp-ring { fill: none; stroke: var(--on-field-hair); }
.feel-pad .fp-axis { stroke: var(--on-field-hair); stroke-dasharray: 2 4; }
.feel-pad .fp-q { fill: var(--on-field-2); font: 400 9px/1 var(--mono); letter-spacing: 0.06em; opacity: 0.7; }
.feel-pad .fp-node circle { fill: var(--on-field-2); transition: fill 240ms ease; }
.feel-pad .fp-node text { fill: var(--on-field-2); font: 400 11px/1 var(--sans); transition: fill 240ms ease; }
.feel-pad .fp-node.is-hot circle { fill: var(--eye); }
.feel-pad .fp-node.is-hot text { fill: var(--on-field); }
.feel-pad .fp-trail { fill: none; stroke: var(--eye); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.feel-pad .fp-halo { fill: none; stroke: var(--eye); opacity: 0.35; }
.feel-pad .fp-dot { fill: var(--eye); filter: drop-shadow(0 0 7px var(--glow)); }
.feel-mix { min-height: 1.3em; font: 400 13px/1.3 var(--mono); color: var(--eye); }
.feel-hint { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--on-field-2); }

@media (max-width: 1000px) {
  .feel { grid-template-columns: 1fr; }
  .feel-map { border-left: 0; border-top: 1px solid var(--on-field-hair); }
  .feel-pad { max-width: 380px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  .feel-stage { padding: 18px 18px 22px; min-height: 0; }
  .feel-face { padding: 8px 0 32px; }
  .feel-foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .feel-say { width: 100%; }
  .feel-map { padding: 18px 18px 22px; }
  .feel-hint { margin-top: 0; padding-top: 6px; }
}

/* ── It remembers ────────────────────────────────────────────── */
.transcript { padding: 26px 26px 6px; }
.day { font: 600 13px/1 var(--sans); color: var(--ink-3); margin: 0 0 14px; }
.day:not(:first-child) { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--hair); }
.line { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; font-size: 16px; line-height: 1.45; }
.who { width: 26px; height: 26px; display: grid; place-items: center; font: 600 12px/1 var(--sans); }
.who-me { background: rgba(15, 20, 64, 0.08); color: var(--ink); }
.who-it { background: var(--field); }
.who-it .face { --k: 0.342; width: 26px; height: 26px; }
.ref { display: inline-flex; align-items: center; gap: 6px; vertical-align: 1px; font: 500 14px/1 var(--sans); color: var(--field); text-decoration: none; border: 1px solid rgba(30, 43, 214, 0.32); padding: 5px 8px; margin: 0 2px; }
.ref:hover { border-color: var(--field); }
.ref::before { content: ""; width: 6px; height: 6px; background: var(--field); }
.noted { font-size: 14px; color: var(--ink-3); margin: -4px 0 14px 38px; }
.facts { margin-top: 20px; padding: 22px 26px 12px; }
.facts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.facts-head h3 { font: 600 15px/1.3 var(--sans); }
.facts-head span { font-size: 13px; color: var(--ink-3); }
.facts ul { list-style: none; margin: 12px 0 0; padding: 0; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15.5px; }
.fact-text small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.fact input { width: 100%; font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--field); border-radius: 0; background: #fff; }
.fact-actions { display: flex; gap: 2px; }
.link-btn { background: none; border: 0; padding: 6px 8px; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--field); }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.facts-empty { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 15px; }

/* ── Code blocks and the terminal ────────────────────────────── */
.block { margin: 0; overflow: hidden; font: 400 13.5px/1.65 var(--mono); }
.block-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--hair); font: 400 13px/1.3 var(--sans); color: var(--ink-3); }
.block-h code { color: var(--ink); font-size: 12.5px; }
.block pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; white-space: pre; }
.block + .block { margin-top: 18px; }
.term { min-height: 330px; }
.term .p { color: var(--ink-3); user-select: none; }
.term .ok { color: var(--str); font-weight: 600; }
.term .h { font-weight: 600; }
.term .add { color: var(--str); }
.term .del { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(15, 20, 64, 0.35); }
.term .cur { display: inline-block; width: 0.6em; height: 1.1em; background: var(--field); vertical-align: -0.18em; animation: blink 1s steps(2) infinite; }
.term-note { margin-top: 12px; font-size: 15px; color: var(--ink-3); min-height: 1.4em; opacity: 0; transition: opacity .4s; }
.term-note.is-shown { opacity: 1; }
.channels { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--ink-3); padding: 0; list-style: none; }

/* ── Data flow ───────────────────────────────────────────────── */
.flow {
  position: relative; margin: 56px 0 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 1.05fr) minmax(0, 1fr) minmax(130px, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}
.node { border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 20px 20px; background: var(--sheet); position: relative; z-index: 1; }
.node h4 { margin: 0 0 10px; font: 600 17px/1.25 var(--sans); display: flex; align-items: center; gap: 10px; }
.node ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.node li { padding: 6px 0; border-top: 1px solid var(--hair); }
.node li b { color: var(--ink); font-weight: 600; }
/* AgentGraft is the one blue box, because it is the one with a face. */
.node-ag { background: var(--field); color: var(--on-field); border-color: var(--field); }
.node-ag ul { color: var(--on-field-2); }
.node-ag li { border-top-color: var(--on-field-hair); }
.node-ag li b { color: var(--on-field); }
.node-ag .face { --k: 0.32; width: 24px; height: 24px; }
.flink { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; }
.flink-line { position: relative; height: 1px; background: var(--ink); margin: 10px 0; }
.flink-line::before, .flink-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--ink); }
.flink-line::before { left: -4px; } .flink-line::after { right: -4px; }
.flink p { font-size: 13px; color: var(--ink-3); line-height: 1.4; text-align: center; transition: color .2s; }
.flink p code { font-size: 12px; color: var(--ink); }
.flink.is-live p, .flink.is-live p code { color: var(--field); }
.flink.is-live .flink-line { background: var(--field); }
.packet { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; }
.packet i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--field); box-shadow: 0 0 0 4px rgba(30, 43, 214, 0.18); }

/* ── Erasure ─────────────────────────────────────────────────── */
.erase-split { margin-top: clamp(72px, 10vh, 104px); }
.vault { overflow: hidden; }
.vault-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.vault-head p { font-weight: 600; }
.vault-head code { font-weight: 400; font-size: 13px; color: var(--ink-3); margin-left: 8px; }
.vault-actions { display: flex; gap: 8px; }
.keyrow { display: grid; grid-template-columns: 22px auto 1fr; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hair); font-size: 15px; }
.keyrow svg { width: 20px; height: 20px; color: var(--field); transition: color .25s; }
.keyrow .hex { font: 400 13px/1.3 var(--mono); color: var(--ink-3); text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vault.is-erased .keyrow svg, .vault.is-erased .keyrow .hex { color: var(--erase); }
.vfacts { list-style: none; margin: 0; padding: 4px 0; }
.vfacts li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 15.5px; min-height: 48px; align-items: center; }
.vfacts li:last-child { border-bottom: 0; }
.vfacts .fi { color: var(--ink-3); font: 400 12px/1 var(--mono); }
.vfacts .ft { overflow-wrap: anywhere; }
.vfacts .ft.is-cipher { font: 400 13px/1.4 var(--mono); color: var(--ink-3); }
.vfacts .edge { font: 400 0.84em/1 var(--mono); color: var(--field); padding: 0 2px; }
.vault-foot { padding: 12px 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-3); }
.vault.is-erased .vault-foot { color: var(--erase); }

/* ── Index ───────────────────────────────────────────────────── */
.idx { margin: 40px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.idx > div { display: grid; grid-template-columns: minmax(170px, 15rem) minmax(220px, 24rem) minmax(0, 1fr); gap: 28px; padding: 16px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.idx dt { font-weight: 600; font-size: 17px; }
.idx dd { margin: 0; }
.idx dd.c { font: 400 13.5px/1.4 var(--mono); color: var(--field); }
.idx dd.c.plain { font: 500 15px/1.4 var(--sans); color: var(--ink-3); }
.idx dd:last-child { color: var(--ink-2); font-size: 16px; max-width: 60ch; }

/* ── Closing ─────────────────────────────────────────────────── */
.closing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.closing .stage { padding-top: clamp(40px, 8vh, 96px); }
.closing .slot { height: calc(40px * var(--KC)); }
.closing-foot { padding: 0 var(--edge) clamp(40px, 6vh, 64px); }
.closing h2 { max-width: 14ch; }
.install { display: inline-block; margin-top: 22px; font: 400 15px/1 var(--mono); color: var(--on-field-2); border: 1px solid var(--on-field-hair); padding: 10px 14px; user-select: all; }
.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 20px var(--edge) 24px; border-top: 1px solid var(--on-field-hair);
  font-size: 14px; color: var(--on-field-2);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--on-field); text-decoration: underline; text-underline-offset: 3px; }
.footer .wordmark { font-size: 17px; color: var(--on-field); }
.footer .llms { margin-left: auto; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 900px) {
  .plate { grid-template-columns: minmax(0, 50fr) 40px minmax(0, 50fr); }
  .w { width: min(360px, 74%); }
}
@media (max-width: 899px) {
  /* Face first, then the words, then the plate. */
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-grid .slot { order: -1; }
  .hero { --cut: 55%; }
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate-label { display: none; }
  .src { grid-column: 1; border-bottom: 1px solid var(--hair); }
  .ln > .tg, .ln > .no { position: sticky; left: 0; background: var(--sheet); z-index: 1; }
  .ln > .no { left: 15px; }
  .ln { padding-left: 0; column-gap: 1ch; }
  .ln > .tg { padding-left: 10px; box-sizing: content-box; left: 0; }
  .gut, .wires { display: none; }
  .app-stage { grid-column: 1; border-left: 0; padding: 18px 14px 14px; }
  .app { display: none; }
  .w { position: relative; inset: auto; width: 100%; min-height: 0; }
  .w-body { overflow: visible; padding-left: 30px; }
  /* The trace note under the plate already says how to use it. */
  .plate-hint { display: none; }
  .trace { position: sticky; bottom: 10px; left: auto; top: auto; width: auto; margin: 0 10px 10px; opacity: 1; grid-column: 1; }
  .trace:not(.is-shown) { position: relative; bottom: auto; border-color: var(--hair); box-shadow: none; color: var(--ink-3); }
  .flow { grid-template-columns: 1fr; }
  .flink { padding: 6px 0 6px 28px; min-height: 96px; align-items: flex-start; }
  .flink-line { position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; height: auto; margin: 0; }
  .flink-line::before { top: -4px; left: -3px; } .flink-line::after { top: auto; bottom: -4px; left: -3px; right: auto; }
  .flink p { text-align: left; }
  .idx > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav ul { gap: 18px; }
  .nav .hide-sm { display: none; }
  .stage { padding-top: 0; padding-bottom: 0; }
  .deck { font-size: 17px; margin-top: 14px; }
  .ctas { margin-top: 20px; }
  .ctas .btn { flex: 1 1 auto; }
  .footer .llms { margin-left: 0; }
  .vault-actions { width: 100%; }
  .vault-actions .btn { flex: 1; }
}
/* Narrow phones: the switcher keeps its globe and drops the language code,
   so the wordmark, Docs, the switcher and Get started fit on one line. */
@media (max-width: 420px) {
  .nav { gap: 12px; }
  .nav ul { gap: 14px; }
  .nav .btn { padding: 0 12px; }
  .nav .lang-toggle span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}