/* ============================================================================
   CALLEOKE — page register · calleoke.css · THE MATERIAL ACT
   Foundation: EPOQ III, linked live (https://epoq3.vercel.app/styles.css) —
   serif reads (Scheherazade 14/24/36), mono is the 7px label register, paper
   and ink carry the record. TYPE LAW (his ruling 2026-07-10): mono = 7px
   --fz-mono-6, ONE size, labels only. --fz-mono-cli unused.
   THE MATERIAL (his ruling 2026-07-10, second): the wireframe register is
   dead — no grey rules, no hairline boxes standing in for components. The
   demos are the PRODUCT and wear the product's own skin: the locked V.3
   liquid-glass rig (calleoke-mockup/assets/styles.css) — five-layer glass,
   confidence-driven ramps, lavender/coral/emerald semantics, two-speed
   motion (crisp 150–350ms states + 2000–2500ms ambient breath). Product
   material lives ONLY on product surfaces (.glass / .stagepad / .inst); the
   page around them stays epoq3. Degradation absolute: no JS and reduced
   motion both rest on the confirmed frame.
   ========================================================================== */

/* ————————————————————————————————————————————————— THE PRODUCT KIT
   The V.3 mockup's material tokens, ported verbatim, --pk/--acc namespaced
   so the epoq3 spine is never touched. Scope of use: product surfaces. */
:root {
  --acc-live:  #A78BFA;   /* lavender — "right now / live" */
  --acc-flag:  #F9A8D4;   /* coral — "decision moment / the coach" */
  --acc-pulse: #86EFAC;   /* emerald — confirm only */
  --acc-live-soft:  rgba(167, 139, 250, 0.22);
  --acc-live-glow:  rgba(167, 139, 250, 0.45);
  --acc-flag-soft:  rgba(249, 168, 212, 0.18);
  --acc-pulse-soft: rgba(134, 239, 172, 0.28);
  --pk-95: rgba(255, 255, 255, 0.96);
  --pk-85: rgba(255, 255, 255, 0.86);
  --pk-65: rgba(255, 255, 255, 0.65);
  --pk-45: rgba(255, 255, 255, 0.45);
  --pk-25: rgba(255, 255, 255, 0.25);
  --pk-15: rgba(255, 255, 255, 0.15);
  --pk-08: rgba(255, 255, 255, 0.08);
  --gl-blur: 18px;
  --gl-sat: 1.6;
  --gl-tint: rgba(28, 28, 36, 0.18);
  --gl-rim: rgba(255, 255, 255, 0.16);
  --gl-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 8px 18px -8px rgba(0, 0, 0, 0.35);
  --r-panel: 22px;
  --r-row: 14px;
  --r-pill: 999px;
  --t-fast: 150ms;
  --t-norm: 200ms;
  --t-slow: 350ms;
  --t-breath: 2500ms;
  --t-pulse: 2000ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* —— ground —— */
body.ck { padding-bottom: 0; }
.ck-frame { width: min(100%, var(--content)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* —— masthead — the call chrome (one of the few hairlines that stays) —— */
.ck-mast {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: var(--hairline) solid var(--ink-12);
}
.ck-mast-in {
  display: flex; align-items: baseline; gap: var(--s-3);
  min-height: var(--s-5); padding-top: var(--s-2); padding-bottom: var(--s-2);
  flex-wrap: wrap;
}
.ck-brand { font-family: var(--font-serif); font-size: var(--fz-page-title); line-height: var(--lh-page-title); letter-spacing: var(--track-page-title); color: var(--ink); text-decoration: none; }
.ck-brand-tag { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); }
.ck-nav { display: flex; gap: var(--s-3); margin-left: auto; align-items: baseline; flex-wrap: wrap; }
.ck-nav a { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: var(--hairline) solid transparent; transition: border-color .15s ease, color .15s ease; }
.ck-nav a:hover { border-bottom-color: var(--ink); }
.ck-nav a.on { border-bottom-color: var(--ink); }
.ck-session { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--ink); }
.ck-session .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--acc-live); box-shadow: 0 0 0 0 var(--acc-live-glow); animation: pk-pulse var(--t-pulse) ease-in-out infinite; }
@keyframes pk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--acc-live-glow); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) { .ck-session .dot { animation: none; } }

/* —— reveal — the one page-level motion verb —— */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-in-out, transform .5s ease-in-out; }
.js .rv.is-in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .15s; } .rv[data-d="2"] { transition-delay: .3s; }
.rv[data-d="3"] { transition-delay: .45s; } .rv[data-d="4"] { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ————————————————————————————————————————————————— THE GLASS
   The five-layer panel, ported: low tint + painted room-light + blur/sat +
   screen-blended specular + masked dual-tone rim + layered shadow. */
.glass {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(255, 248, 235, 0.20) 0%,
      rgba(255, 248, 235, 0.09) 30%,
      transparent 60%,
      rgba(18, 22, 36, 0.18) 100%),
    var(--gl-tint);
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  border: 1px solid var(--gl-rim);
  border-radius: var(--r-panel);
  box-shadow: var(--gl-shadow);
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--t-slow) var(--ease);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 18%,
    transparent 38%, transparent 62%,
    rgba(255,255,255,0.02) 82%, rgba(255,255,255,0.12) 100%);
  pointer-events: none; mix-blend-mode: screen; opacity: 0.9; z-index: 0;
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 70%, rgba(0,0,0,0.18) 100%) border-box;
  -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 0;
}
.glass > * { position: relative; z-index: 1; }
.glass--active { animation: pk-breath var(--t-breath) ease-in-out infinite; }
@keyframes pk-breath {
  0%, 100% { box-shadow: var(--gl-shadow), 0 0 0 1px rgba(249,168,212,0.09), 0 0 26px -6px rgba(249,168,212,0.14); }
  50% { box-shadow: var(--gl-shadow), 0 0 0 1px rgba(249,168,212,0.16), 0 0 36px -2px rgba(249,168,212,0.24); }
}

/* the dark stage every product demo stands on */
.stagepad {
  position: relative; background: #0a0a10;  /* the product's own room (V.3 token) */
  border-radius: var(--r-panel);
  overflow: hidden;
  padding: var(--s-4);
}
.stagepad > .backdrop {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.05) brightness(0.55);
  transform: scale(1.12);
}
.stagepad::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}
.stagepad > *:not(.backdrop) { position: relative; z-index: 1; }

/* the confidence channel — 2px pill track, coral gradient fill, soft glow */
.conf { display: flex; align-items: center; gap: var(--s-1); }
.conf .track { flex: 1; height: 2px; background: var(--pk-08); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.conf .fill { position: absolute; inset: 0; width: calc(var(--conf, 0) * 100%); background: linear-gradient(90deg, rgba(249,168,212,0.5) 0%, var(--acc-flag) 100%); box-shadow: 0 0 8px var(--acc-flag-soft); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease); }
.conf .val { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); }
.conf-read { opacity: calc(0.55 + 0.45 * var(--conf, 1)); }

/* streaming — ASR arrives in word bursts; the caret is the live edge */
.streaming::after { content: ""; display: inline-block; width: 4px; height: 1em; background: var(--acc-flag); border-radius: 2px; vertical-align: text-bottom; margin-left: 3px; animation: cursor-blink 0.9s steps(2, start) infinite; }
.asr-fix { animation: pk-asr 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; border-radius: 4px; }
@keyframes pk-asr { 0% { background: rgba(249, 168, 212, 0.34); } 100% { background: transparent; } }

/* ————————————————————————————————————————————————— THE LINE GRAMMAR
   Four states on the confidence ramp — the ball, the correction, candidates. */
.kl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; padding: 2px 0; --lc: 0.62; }
.kl-row .kl {
  position: relative; display: block;
  font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1);
  color: rgba(255, 255, 255, calc(0.45 + 0.30 * var(--lc)));
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
  border-radius: var(--r-row);
  transition: background var(--t-norm) var(--ease), color var(--t-norm) var(--ease), padding var(--t-slow) var(--ease);
}
.kl-row .kl::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: calc(1px + 2px * var(--lc)); border-radius: var(--r-pill);
  background: rgba(249, 168, 212, calc(0.10 + 0.50 * var(--lc)));
  box-shadow: 0 0 calc(2px + 12px * var(--lc)) rgba(249, 168, 212, calc(0.10 + 0.30 * var(--lc)));
  transition: width var(--t-slow) var(--ease), background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.kl-row .bb { display: none; }  /* the ball is the rail now */
.kl-row .hf { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); min-width: calc(2 * var(--s-4)); text-align: right; transition: color var(--t-norm) var(--ease); }
.kl-row.active { --lc: 0.9; }
.kl-row.active .kl { background: linear-gradient(90deg, var(--acc-flag-soft) 0%, transparent 60%); color: var(--pk-95); }
.kl-row.active .kl::before { background: var(--acc-flag); box-shadow: 0 0 14px var(--acc-flag-soft); width: 3px; }
.kl-row.active .hf { color: var(--acc-flag); }
.kl-row.done .kl { color: var(--pk-45); text-decoration: line-through; text-decoration-color: var(--pk-15); text-decoration-thickness: 1px; }
.kl-row.done .kl::before { opacity: 0; }
.kl-row.done .hf { color: var(--acc-pulse); }
.kl-row.ghost .kl { color: var(--pk-25); text-decoration: line-through; text-decoration-color: var(--pk-15); }
.kl-row.ghost .kl::before { opacity: 0; }
.kl-row.draft .kl { color: var(--pk-45); font-style: italic; animation: pk-draft 2.4s ease-in-out infinite; }
.kl-row.draft .kl::before { opacity: 0; }
@keyframes pk-draft { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
.js .kl-row.riff { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.kl-row.riff.in { opacity: 1; }
.crys .kl { animation: pk-crys 700ms var(--ease) both; }
@keyframes pk-crys { 0% { opacity: 0.4; } 100% { opacity: 1; } }
.bloom .kl { animation: pk-bloom 600ms ease-out; }
@keyframes pk-bloom { 0% { background: rgba(249,168,212,0.32); } 100% { background: var(--acc-flag-soft); } }

/* objectives — ring → emerald fill on fire */
.hud-objectives { display: flex; flex-direction: column; gap: var(--s-1); }
.hud-obj { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); transition: color var(--t-norm) var(--ease); }
.hud-obj .bx { width: 10px; height: 10px; border-radius: var(--r-pill); border: 1.25px solid var(--pk-25); flex: none; background: transparent; transition: background var(--t-norm) var(--ease), border-color var(--t-norm) var(--ease), box-shadow var(--t-norm) var(--ease); }
.hud-obj.done { color: var(--pk-85); }
.hud-obj.done .bx { background: var(--acc-pulse); border-color: var(--acc-pulse); box-shadow: 0 0 8px var(--acc-pulse-soft); }
.hud-obj.fired .bx { animation: pk-fired 1400ms ease-out; }
@keyframes pk-fired { 20% { box-shadow: 0 0 0 1px rgba(134,239,172,0.40), 0 0 24px rgba(134,239,172,0.55); } 100% { box-shadow: 0 0 8px var(--acc-pulse-soft); } }

/* the waveform — lavender, breathing while someone talks */
.tx-wave { display: flex; gap: 3px; align-items: flex-end; height: var(--s-2); }
.tx-wave span { width: 2px; border-radius: 1px; background: var(--acc-live); height: 30%; opacity: 0.85; }
.talking .tx-wave span { animation: tx-bar 1.3s ease-in-out infinite; }
.talking .tx-wave span:nth-child(2n) { animation-duration: 1.2s; }
.talking .tx-wave span:nth-child(3n) { animation-duration: 1.4s; animation-delay: .15s; }
.talking .tx-wave span:nth-child(5n) { animation-delay: .3s; }
@keyframes tx-bar { 0%, 100% { height: 25%; } 50% { height: 95%; } }

/* ————————————————————————————————————————————————— THE HERO —— */
.ck-hero { position: relative; background: var(--glass-stage); overflow: hidden; }
.ck-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1); opacity: 0.55; }
.ck-hero-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, transparent 30%, rgba(0,0,0,0.45) 100%), var(--ink-20); }
.ck-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--measure-note) + var(--s-4))); gap: var(--gutter); align-items: end; min-height: calc(var(--stage) + var(--stage-half)); padding-top: calc(var(--s-6) + var(--s-5)); padding-bottom: var(--s-5); }
.ck-hero-title h1 { color: var(--paper); font-size: calc(var(--fz-display) * 2); margin-bottom: var(--s-2); }  /* the named hero-scale exception */
.ck-hero-title .tag { font-family: var(--font-serif); font-size: var(--fz-heading-3); line-height: var(--lh-body-1); color: var(--paper-90); margin-bottom: var(--s-3); }
.ck-hero-title .kicker { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--paper-62); display: block; margin-bottom: var(--s-3); }
.ck-hero .hud-cue { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--paper-62); }

.hud { display: flex; flex-direction: column; gap: var(--s-2); }
.hud-panel { padding: var(--s-3); }
.hud-cap { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); margin-bottom: var(--s-2); }
.hud-cap .live { color: var(--acc-pulse); }
.hud-feed {
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: calc(var(--s-6) + var(--s-5)); max-height: calc(2 * var(--s-6) + var(--s-5)); overflow: hidden;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 8%, #000 22%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 8%, #000 22%, #000 100%);
}
.hud-line { font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); color: var(--pk-85); }
.js .hud-line { display: none; }
.js .hud-line.is-on { display: block; animation: pk-read-in .35s ease both; }
@keyframes pk-read-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hud-line .who { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); display: block; }
.hud-line.coach { position: relative; padding-left: var(--s-3); color: var(--pk-95); }
.hud-line.coach::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: var(--r-pill); background: var(--acc-flag); box-shadow: 0 0 14px var(--acc-flag-soft); }
.hud-line.coach .who { color: var(--acc-flag); }
.hud-read .read-line { font-family: var(--font-serif); font-size: var(--fz-heading-3); line-height: var(--lh-body-1); letter-spacing: var(--track-heading-3); color: rgba(255, 255, 255, calc(0.55 + 0.41 * var(--conf, 1))); margin: 0 0 var(--s-2); }
.js .hud-read .read-line { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.hud-read .read-line.on { opacity: 1; transform: none; }
.hud-state { transition: color .15s ease; }
.hud-state.think { color: var(--acc-live); }
.hud-state.ok { color: var(--acc-pulse); }
.hud .tx-wave { margin-bottom: var(--s-1); }

/* ————————————————————————————————————————————————— PAPER — the record
   Structure by SPACE and SCALE. No rules. */
.ck-sec { padding-top: var(--section-gap); }
.ck-sec:last-of-type { padding-bottom: var(--section-gap); }
.ck-eyebrow { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-bottom: var(--s-3); }
.ck-lede { max-width: var(--col-2); }
.ck-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.ck-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

.ck-spec { position: relative; }
.ck-spec img { width: 100%; height: auto; display: block; border-radius: var(--r-row); }
.ck-spec figcaption { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); margin-top: var(--s-2); display: flex; justify-content: space-between; gap: var(--s-2); }
.ck-spec.bleed { margin-top: var(--s-4); }
.ck-spec.bleed img { border-radius: 0; }

.ck-quote { padding-top: var(--section-gap); text-align: center; }
.ck-quote blockquote { border: none; padding: 0; font-family: var(--font-serif); font-size: var(--fz-display); line-height: var(--lh-body-1); letter-spacing: var(--track-display); color: var(--ink); max-width: var(--measure-thesis); margin: 0 auto; }
.ck-quote .attr { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); margin-top: var(--s-2); display: block; }

/* —— moments — stills with real glass cards riding them —— */
.ck-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-4); }
.ck-moment { display: flex; flex-direction: column; }
.ck-moment .stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--glass-stage); border-radius: var(--r-panel); }
.ck-moment .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-moment .stage img { object-position: 50% 12%; }  /* portrait still: keep the face in the 16/10 crop */
.ck-moment .body { padding: var(--s-2) var(--s-1) 0; display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.ck-moment .body h3 { margin-bottom: 0; }
.ck-moment .body p { margin-bottom: 0; color: var(--ink-60); }
.ck-moment .idx { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); }

.vg { position: absolute; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); border-radius: var(--r-row); padding: var(--s-2) var(--s-3); --gl-tint: rgba(16, 16, 22, 0.42); }
.vg .cap { display: flex; justify-content: space-between; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); margin-bottom: 2px; }
.vg .vg-state { color: var(--pk-95); }
.vg .ln { display: block; font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-85); }
.vg .ln.flag { color: var(--acc-flag); }
.vg .hud-obj { color: var(--pk-65); }
.vg .hud-obj.done { color: var(--pk-95); }

/* —— purpose-built cells — mini product stages —— */
.ck-built { margin-top: var(--s-4); }
.ck-built .cell h3 { margin-bottom: var(--s-2); }
.inst { margin: var(--s-2) 0 var(--s-3); border-radius: var(--r-panel); background: #0a0a10; padding: var(--s-3); min-height: var(--s-6); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-2); position: relative; overflow: hidden; }
.inst::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.28) 100%); pointer-events: none; }
.inst > * { position: relative; z-index: 1; }
.inst .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.inst .inst-ev { color: var(--pk-85); }
.inst .inst-late { color: var(--pk-45); padding-top: var(--s-1); }
.inst .inst-out { color: var(--acc-flag); }
.inst-late.struck { text-decoration: line-through; text-decoration-color: var(--pk-15); }
.inst-row { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-85); position: relative; padding-left: var(--s-2); }
.inst-row::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--acc-live); box-shadow: 0 0 6px var(--acc-live-glow); }
.inst-track { position: relative; height: var(--s-2); }
.inst-track::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--r-pill); background: var(--pk-08); }
.inst-track .ph { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--acc-live); box-shadow: 0 0 8px var(--acc-live-glow); }
.play .inst-track .ph { animation: inst-sweep 8.4s linear 1 forwards; }
@keyframes inst-sweep { 0% { left: 0; } 90%, 100% { left: calc(100% - 2px); } }
.inst-track .mark { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--pk-25); }
.inst-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.inst .ctl-chip { height: var(--s-3); padding: 0 var(--s-2); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--pk-15); border-radius: var(--r-pill); color: var(--pk-65); cursor: default; font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-caps); text-transform: uppercase; }
.inst .ctl-chip.active { background: var(--pk-95); color: #0a0a10; border-color: transparent; }
.inst .ctl-chip.pulse { animation: pk-fired 1400ms ease-out; }

/* ————————————————————————————————————————————————— THE TRANSMISSION —— */
.tx { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.tx-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); align-items: stretch; }
.tx-node { border-radius: var(--r-row); background: rgba(255,255,255,0.04); border: 1px solid var(--pk-08); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); min-height: var(--s-6); transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.js .tx-node { opacity: 0.4; }
.tx-node.lit { opacity: 1; background: rgba(255,255,255,0.07); border-color: var(--pk-15); }
.tx-node .t { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); }
.tx-node .v { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-85); min-height: calc(2 * var(--s-2)); }
.tx-node .v.think { color: var(--acc-live); }
.tx-node .v.ok { color: var(--acc-pulse); }
.tx-slow { display: flex; flex-direction: column; gap: var(--s-1); }
.tx-cand { position: relative; display: flex; justify-content: space-between; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); padding-left: var(--s-2); transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tx-cand::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; border-radius: var(--r-pill); background: var(--pk-15); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.js .tx-cand { opacity: 0.4; }
.tx-cand.lit { opacity: 1; color: var(--pk-85); }
.tx-cand.stale { opacity: 0.45; text-decoration: line-through; text-decoration-color: var(--pk-15); }
.tx-cand.match { color: var(--acc-pulse); }
.tx-cand.match::before { background: var(--acc-pulse); box-shadow: 0 0 8px var(--acc-pulse-soft); }
.tx-out { padding-top: var(--s-2); display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; align-items: baseline; }
.tx-out .line { position: relative; font-family: var(--font-serif); font-size: var(--fz-heading-3); line-height: var(--lh-body-1); letter-spacing: var(--track-heading-3); color: var(--pk-95); padding-left: var(--s-3); transition: opacity .2s ease; }
.tx-out .line::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: var(--r-pill); background: var(--acc-flag); box-shadow: 0 0 14px var(--acc-flag-soft); }
.js .tx-out .line { opacity: 0; }
.tx-out .line.on { opacity: 1; }
.tx-out .verdict { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); transition: opacity .15s ease; }
.js .tx-out .verdict { opacity: 0; }
.tx-out .verdict.on { opacity: 1; }
.tx-out .verdict .hb { font-weight: 400; color: var(--acc-pulse); }
.tx .conf { max-width: var(--col); }
.tx .hud-cap { margin-bottom: 0; }

/* ————————————————————————————————————————————————— BALL + CORRECTION —— */
.ball-demo, .cx { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); }
.ball-cap { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); margin-bottom: var(--s-1); }
.ball-cap .ball-state, .ball-cap .cx-state { color: var(--pk-95); }
.cx .cx-read { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--acc-live); }
.js .cx .cx-read { opacity: 0; transition: opacity .35s ease; }
.cx .cx-read.on { opacity: 1; }
.cx .cx-rep { font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: var(--lh-body-1); color: var(--pk-85); padding: var(--s-1) 0; }
.cx .cx-rep .who { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); display: block; }
.js .cx .cx-rep { opacity: 0; transition: opacity .35s ease; }
.cx .cx-rep.is-on { opacity: 1; }
.js .cx-new { opacity: 0; transition: opacity .35s ease; }
.cx-new.in { opacity: 1; }
.stage-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }

/* ————————————————————————————————————————————————— THE BLUEPRINT RIG —— */
.hudbp { padding: var(--s-4); margin-top: var(--s-4); }
.hudbp .ball-cap { margin-bottom: var(--s-2); }
.hudbp-stage { display: grid; grid-template-columns: 28fr 79fr 32fr; gap: var(--s-3); align-items: stretch; min-height: var(--stage-half); }
.hudbp-win { padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); border-radius: var(--r-row); }
.hudbp-win .t { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-85); padding-bottom: var(--s-1); display: flex; justify-content: space-between; gap: var(--s-1); }
.hudbp-win .t .dim { color: var(--pk-45); }
.hudbp-win .r { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); display: flex; align-items: center; gap: var(--s-1); transition: color var(--t-norm) var(--ease); }
.hudbp-win .r.on { color: var(--pk-85); }
.hudbp-win .r .bx { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-pill); border: 1.25px solid var(--pk-25); background: transparent; transition: background var(--t-norm) var(--ease), border-color var(--t-norm) var(--ease); flex: none; }
.hudbp-win .r.done .bx { background: var(--acc-pulse); border-color: var(--acc-pulse); box-shadow: 0 0 8px var(--acc-pulse-soft); }
.hudbp-split { display: grid; grid-template-columns: 6fr 4fr; gap: var(--s-2); flex: 1; }
.hudbp-cell { border-radius: 10px; background: rgba(255,255,255,0.04); padding: var(--s-2); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); display: flex; flex-direction: column; gap: var(--s-1); }
.hudbp-cell .tick { color: var(--pk-85); transition: opacity .15s ease; }
.js .hudbp-cell .tick { opacity: 0; }
.hudbp-cell .tick.on { opacity: 1; }
.hudbp-foot { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.hudbp .hudbp-cell, .hudbp .r { transition: filter .4s ease, opacity .4s ease; }
.hudbp.private .hudbp-cell, .hudbp.private .r { filter: blur(5px); opacity: 0.45; }  /* the privacy beat — the glass actually frosts */

/* ————————————————————————————————————————————————— INSTRUMENTS —— */
.sw { padding: var(--s-4); margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.sw svg { width: 100%; height: auto; aspect-ratio: 700 / 120; display: block; }
.sw .sw-s1 { stroke: var(--pk-45); stroke-width: 1px; }
.sw .sw-s2 { stroke: var(--acc-live); stroke-width: 2.5px; filter: drop-shadow(0 0 6px var(--acc-live-glow)); }
.sw .sw-s3 { stroke: var(--acc-pulse); stroke-width: 1.5px; filter: drop-shadow(0 0 5px var(--acc-pulse-soft)); }
.sw .sw-dot { fill: var(--acc-live); filter: drop-shadow(0 0 6px var(--acc-live-glow)); transition: opacity .2s ease; }
.js .sw .sw-dot { opacity: 0; }
.sw .sw-dot.on { opacity: 1; }
.sw .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.sw .sw-read { color: var(--pk-95); }
.sw .sw-read.flag { color: var(--acc-flag); }
.sw-labels { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.sw .conf { max-width: var(--col); }
.sw .hud-cap { margin-bottom: 0; }

/* beat-engine hidden states — reasoningFade entrances, .js-scoped */
.js [data-demo] .st { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
[data-demo] .st.on { opacity: 1; transform: none; }

.rsn { padding: var(--s-4); margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.rsn .rs { position: relative; display: flex; gap: var(--s-2); align-items: baseline; padding-left: var(--s-3); }
.rsn .rs .dot { position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: var(--r-pill); background: rgba(249, 168, 212, calc(0.18 + 0.65 * var(--sc, 0.5))); box-shadow: 0 0 calc(2px + 8px * var(--sc, 0.5)) var(--acc-flag-soft); }
.rsn .rs .t { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-45); min-width: calc(3 * var(--s-4)); }
.rsn .rs .say { font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: var(--lh-body-1); color: rgba(255, 255, 255, calc(0.45 + 0.5 * var(--sc, 0.6))); }
.rsn .rs.coach .say { color: var(--pk-95); text-shadow: 0 0 24px rgba(249, 168, 212, 0.20); position: relative; padding-left: var(--s-2); }
.rsn .rs.coach .say::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: var(--r-pill); background: var(--acc-flag); box-shadow: 0 0 14px var(--acc-flag-soft); }
.rsn .conf { max-width: var(--col); }
.rsn .ball-cap { margin-bottom: var(--s-1); }

.heat { padding: var(--s-4); margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.heat-grid { display: flex; flex-direction: column; gap: 3px; }
.heat-row { display: grid; grid-template-columns: minmax(0, calc(2 * var(--s-5))) repeat(8, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat-row .rl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.heat-row .hc { height: var(--s-3); border-radius: 4px; background: var(--acc-live); opacity: 0.05; transition: opacity .3s ease; }
.heat-row .hc.lit.h1 { opacity: 0.16; }
.heat-row .hc.lit.h2 { opacity: 0.34; }
.heat-row .hc.lit.h3 { opacity: 0.58; }
.heat-row .hc.lit.h4 { opacity: 0.95; }
.heat-row .hc.hc-flag { background: var(--acc-flag); box-shadow: 0 0 12px var(--acc-flag-soft); }
.heat-row .hc.hc-live { background: var(--acc-pulse); box-shadow: 0 0 12px var(--acc-pulse-soft); }
.heat .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.heat-foot { color: var(--pk-95); }
.heat .hud-cap { margin-bottom: 0; }

.mkt { padding: var(--s-4); margin-top: var(--s-4); }
.mkt svg { width: 100%; height: auto; aspect-ratio: 320 / 110; display: block; }
.mkt .mk-curve path { stroke: var(--pk-85); stroke-width: 1.5px; }
.mkt .mk-dot { fill: var(--acc-live); filter: drop-shadow(0 0 6px var(--acc-live-glow)); transition: opacity .2s ease; }
.js .mkt .mk-dot { opacity: 0; }
.mkt .mk-dot.on { opacity: 1; }
.mkt .mk-num, .mkt .n { display: block; font-family: var(--font-serif); font-size: var(--fz-display); line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--pk-95); }
.mkt .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--pk-65); }
.mk-q-track { height: 6px; border-radius: var(--r-pill); background: var(--pk-08); position: relative; margin-top: var(--s-2); overflow: hidden; }
.mk-q-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); width: calc(var(--q, 0.52) * 100%); background: linear-gradient(90deg, var(--pk-25) 0%, var(--acc-flag) 100%); box-shadow: 0 0 8px var(--acc-flag-soft); transition: width .4s ease; }
.mkt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: end; }

/* the draw pattern — no-JS sees the full trace */
.draw path.seg { fill: none; }
.js .draw path.seg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw path.seg.on { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.js .draw path.seg.fast.on { transition-duration: 0.4s; }

/* ————————————————————————————————————————————————— PAPER REGISTERS —— */
.inv { margin-top: var(--s-4); }
.inv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.inv .n { display: inline-block; font-family: var(--font-serif); font-size: calc(var(--fz-display) * 1.5); line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--ink); }  /* display ×1.5 — the register's one scale-up, named */
.inv .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-top: var(--s-1); }
.inv .inv-b { position: relative; }
.inv .inv-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: var(--r-pill); background: var(--acc-flag); opacity: 0.8; }
.inv .st { display: block; margin-top: var(--s-3); }
.js .inv .st { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.inv .st.on { opacity: 1; transform: none; }

.ck-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding-top: var(--s-4); }
.ck-counter .n { display: block; font-family: var(--font-serif); font-size: var(--fz-display); line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--ink); }
.ck-counter .d { display: block; font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); margin-top: var(--s-1); }
.ck-specs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); padding-top: var(--s-4); }
.ck-spec-cell .n { display: block; font-family: var(--font-serif); font-size: var(--fz-page-title); line-height: var(--lh-page-title); letter-spacing: var(--track-page-title); color: var(--ink); }
.ck-spec-cell .d { display: block; font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); margin-top: var(--s-1); }

.ck-beliefs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-4); }
.ck-belief .no { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-bottom: var(--s-1); }
.ck-belief h3 { margin-bottom: var(--s-1); }
.ck-belief p { color: var(--ink-60); margin-bottom: 0; }

.ledger { margin-top: var(--s-4); }
.ledger-row { position: relative; display: grid; grid-template-columns: var(--viewport-thumb) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); padding: var(--s-2) 0 var(--s-2) var(--s-3); font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; }
.ledger-row::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--ink); }  /* the epoq3 lead-dot atom */
.ledger-row .when { color: var(--grey-51); }
.ledger-row .what { color: var(--ink); }
.ledger-row .proof { color: var(--grey-51); }

.scoreboard { padding: var(--s-3); margin-top: var(--s-3); max-width: var(--measure-note); border-radius: var(--r-row); background: #0a0a10; position: relative; overflow: hidden; }
.scoreboard::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.28) 100%); pointer-events: none; }
.scoreboard > * { position: relative; z-index: 1; }
.scoreboard .hud-cap { margin-bottom: var(--s-2); }

.request-line { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); padding-top: var(--s-3); margin-top: var(--s-3); }
.request-line a { color: var(--ink); }

.mv-index { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-bottom: var(--s-1); }
.ck-sub-eyebrow { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-top: var(--s-1); }

.ck-who-photo { margin-top: var(--s-4); }
.ck-who-cols { margin-top: var(--s-4); }

/* —— doors — real buttons, one main move —— */
.ck-door-primary {
  display: flex; justify-content: space-between; gap: var(--s-2); align-items: center;
  background: var(--paper); color: var(--ink);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-4);
  border-radius: var(--r-row);
  text-decoration: none;
  font-family: var(--font-serif); font-size: var(--fz-page-title); line-height: var(--lh-page-title); letter-spacing: var(--track-page-title);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ck-door-primary:hover { transform: translateY(-1px); }
.ck-door-primary:active { transform: none; }
.ck-door-primary .sub { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); display: block; margin-top: var(--s-1); }
.ck-door-primary .arr { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); }
.ck-door-primary.paper { background: var(--ink); color: var(--paper); }
.ck-door-primary.paper .sub { color: var(--paper-62); }
.ck-door-primary.paper:hover { color: var(--paper-90); }
.ck-doors-quiet { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.ck-doors-quiet a { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--paper-62); text-decoration: none; transition: color .15s ease; }
.ck-doors-quiet a:hover { color: var(--paper); }
.ck-doors-quiet.paper a { color: var(--grey-51); }
.ck-doors-quiet.paper a:hover { color: var(--ink); }

/* —— the closer —— */
.ck-closer { background: var(--glass-stage); margin-top: var(--section-gap); }
.ck-closer-in { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.ck-closer h2, .ck-closer p { color: var(--paper); }
.ck-closer p { color: var(--paper-62); max-width: var(--col-2); }
.ck-closer .ck-eyebrow { color: var(--paper-62); }

/* —— footer —— */
.ck-foot { border-top: var(--hairline) solid var(--line-structural); margin-top: var(--section-gap); }
.ck-closer + .ck-foot { margin-top: 0; border-top: none; }
.ck-foot-in { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; padding-top: var(--s-3); padding-bottom: var(--s-4); }
.ck-foot a { font-family: var(--font-mono); font-size: var(--fz-mono-6); line-height: var(--lh-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .15s ease; }
.ck-foot a:hover { color: var(--grey-51); }
.ck-foot .line { margin-left: auto; font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); }

/* —— the coach — a real glass card —— */
.ck-coach {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 50;
  width: min(var(--measure-note), calc(100vw - 2 * var(--gutter)));
  padding: var(--s-3);
  border-radius: var(--r-row);
  --gl-tint: rgba(250, 250, 252, 0.55);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  visibility: hidden;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, visibility 0s .5s;
}
.ck-coach.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.ck-coach .hud-cap { color: var(--grey-51); }
.ck-coach .hud-cap .hb { font-weight: 400; color: var(--signal-flag); }
.ck-coach .msg { position: relative; font-family: var(--font-serif); font-size: var(--fz-body-1); line-height: var(--lh-body-1); letter-spacing: var(--track-body-1); color: var(--ink); padding-left: var(--s-3); margin: var(--s-1) 0 var(--s-2); }
.ck-coach .msg::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: var(--r-pill); background: var(--signal-flag); }
.ck-coach .row { display: flex; gap: var(--s-2); align-items: center; }
.ck-coach .dismiss { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); padding: 0; }
@media (prefers-reduced-motion: reduce) { .ck-coach { transition: none; } }

/* —— the log wall + entries —— */
.ck-log { margin-top: var(--s-4); }
.ck-log-row { position: relative; display: grid; grid-template-columns: var(--viewport-thumb) minmax(0, 1fr) auto; gap: var(--gutter); align-items: baseline; padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); color: var(--ink); text-decoration: none; border-radius: var(--r-row); transition: background-color .15s ease; }
.ck-log-row::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--ink); }
.ck-log-row:hover { background: var(--ink-03); }
.ck-log-row .when { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); }
.ck-log-row h3 { margin-bottom: 0; }
.ck-log-row .sub { color: var(--ink-60); margin: 0; }
.ck-log-row .arr { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); }
.ck-entry-hero { margin-top: var(--s-4); }
.ck-entry-body { max-width: var(--col-2); margin-top: var(--s-4); }
.ck-entry-nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-2); }
.ck-entry-nav a { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--ink); text-decoration: none; }

/* —— subpage header + channels —— */
.ck-pagehead { padding-top: var(--s-5); }
.ck-pagehead h1 { margin-bottom: var(--s-1); }
.ck-pagehead .tag { color: var(--ink-60); }
.ck-channels { margin-top: var(--s-4); }
.ck-channel { background: var(--ink-03); border-radius: var(--r-row); padding: var(--s-3); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: var(--s-2); transition: background-color .15s ease, transform .15s ease; }
.ck-channel:hover { background: var(--ink-12); transform: translateY(-1px); }
.ck-channel .lbl { font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); text-transform: uppercase; color: var(--grey-51); }
.ck-channel .val { font-family: var(--font-serif); font-size: var(--fz-heading-3); }
.ck-channel.primary { background: var(--ink); color: var(--paper); }
.ck-channel.primary .lbl { color: var(--paper-62); }
.ck-channel.primary:hover { background: var(--graphite); }

/* ————————————————————————————————————————————————— THE MOVEMENT RAIL —— */
.mv-rail { position: fixed; right: var(--s-2); top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: var(--s-1); }
.mv-rail a { display: block; font-family: var(--font-mono); font-size: var(--fz-mono-6); letter-spacing: var(--track-code); color: var(--grey-51); text-decoration: none; padding: 2px var(--s-1); border-radius: var(--r-pill); transition: color .15s ease, background-color .15s ease; }
.mv-rail a.on { color: var(--paper); background: var(--ink); }
.mv-rail a:hover { color: var(--ink); }
.mv-rail a.on:hover { color: var(--paper); }
html { scroll-behavior: smooth; }

/* —— cycle smoothing — loops never hard-flash —— */
[data-demo].cycling > *:not(.backdrop) { transition: opacity .15s ease !important; opacity: 0; }

/* ————————————————————————————————————————————————— RESPONSIVE —— */
@media (max-width: 840px) {
  .ck-hero-in { grid-template-columns: 1fr; align-items: end; }
  .ck-hero-title h1 { font-size: var(--fz-display); }
  .ck-moments, .ck-3col, .ck-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-specs, .ck-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-2col, .mkt-grid, .inv-grid, .stage-duo { grid-template-columns: 1fr; }
  .tx-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hudbp-stage { grid-template-columns: 1fr; }
  .ck-log-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ck-log-row .when { grid-column: 1 / -1; }
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .heat-row { grid-template-columns: minmax(0, var(--s-6)) repeat(8, minmax(0, 1fr)); }
  .mv-rail { display: none; }
  .kl-row .hf { min-width: 0; }
}
@media (max-width: 400px) {
  .ck-moments, .ck-3col, .ck-counters, .ck-specs, .ck-beliefs, .tx-rail { grid-template-columns: 1fr; }
  .ck-frame { padding-left: var(--s-2); padding-right: var(--s-2); }
  .ck-mast { position: static; }
  .ck-brand-tag { display: none; }
  .ck-mast-in { gap: var(--s-2); min-height: var(--s-4); padding-top: var(--s-1); padding-bottom: var(--s-1); }
  .ck-nav { gap: var(--s-2); }
  .ck-hero-in { padding-top: var(--s-5); min-height: var(--stage); }
  .stagepad { padding: var(--s-3); }
  .ck-door-primary { padding: var(--s-3); }
}

/* ————————————————————————————————————————————————— REDUCED MOTION —— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glass--active, .kl-row.draft .kl, .crys .kl, .bloom .kl, .hud-obj.fired .bx,
  .asr-fix, .streaming::after, .talking .tx-wave span, .play .inst-track .ph,
  .js .hud-line.is-on, .inst .ctl-chip.pulse, .ck-session .dot { animation: none; }
  .talking .tx-wave span { height: 60%; }
  .play .inst-track .ph { left: calc(100% - 2px); }
  .js .draw path.seg { stroke-dashoffset: 0; transition: none; }
  .conf .fill, .mk-q-fill { transition: none; }
}