/* ============================================================================
   APERTURE — "The Instrument"
   A scientific-instrument aesthetic: a warm-black void, first-light gold,
   a precise crimson alarm, editorial serif + instrument monospace, weighted motion.
   ========================================================================== */

:root {
  --void:      #070608;
  --void-2:    #0c0a0e;
  --panel:     rgba(247,240,226,0.022);
  --ink:       #efe6d4;
  --ink-dim:   rgba(239,230,212,0.56);
  --ink-faint: rgba(239,230,212,0.30);
  --ink-ghost: rgba(239,230,212,0.13);
  --rule:      rgba(239,230,212,0.11);
  --rule-soft: rgba(239,230,212,0.06);

  --light:     #ffd089;   /* first light — the knowing glow */
  --light-hi:  #fff4dc;
  --grounded:  #e7c98a;
  --alarm:     #ff4640;   /* fabrication — the confident lie */
  --alarm-dim: rgba(255,70,64,0.5);
  --offmap:    #8a93b8;   /* off the map — lost in the dark */
  --uncertain: #e3a857;   /* hedging — the model unsure of itself */
  --uncertain-dim: rgba(227,168,87,0.5);

  --serif: "Iowan Old Style","Hoefler Text","Charter","Sorts Mill Goudy",Georgia,"Times New Roman",serif;
  --mono:  ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,monospace;

  --acc: var(--light);    /* per-state accent, set by JS */
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}

/* film grain + vignette ---------------------------------------------------- */
.grain {
  position: fixed; inset: -50%; z-index: 9; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)} }
.vignette {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 32%, transparent 38%, rgba(0,0,0,0.55) 100%);
}

/* ───────────── masthead ───────────── */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 22px var(--gut);
  mix-blend-mode: difference;
}
.wordmark {
  font-family: var(--serif); font-size: 19px; letter-spacing: 0.42em;
  font-weight: 400; color: #fff; padding-left: 0.42em;
}
.wordmark .wm-a { color: #fff; }
.masthead-read {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.masthead-read .sl-text {
  border-bottom: 1px dotted rgba(255,255,255,0.45); padding-bottom: 2px; transition: border-color .3s;
}
.masthead-read:hover .sl-text { border-bottom-color: #fff; }
.sl-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  box-shadow: 0 0 8px currentColor;
}
.sl-dot.live { background: var(--light); color: var(--light); animation: pulse 2.4s ease-in-out infinite; }
.sl-dot.mock { background: var(--offmap); color: var(--offmap); }
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ───────────── setup / model-agnostic modal ───────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(6,5,8,0.70); backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05);
  padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal {
  position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(20,22,32,0.74), rgba(10,12,19,0.82));
  backdrop-filter: blur(40px) saturate(1.25); -webkit-backdrop-filter: blur(40px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  transform: translateY(12px) scale(.985); transition: transform .42s cubic-bezier(.2,.8,.2,1);
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-x {
  position: absolute; top: 12px; right: 15px; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 23px; line-height: 1; padding: 4px 8px; transition: color .3s;
}
.modal-x:hover { color: var(--light); }
.modal-eyebrow {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--light); opacity: 0.85; margin-bottom: 10px;
}
.modal-title {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 27px); font-weight: 400; color: var(--ink);
  line-height: 1.2; margin: 0 0 16px;
}
.modal-title #setupModel { font-style: italic; color: var(--light-hi); }
.modal p {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.62; color: var(--ink-dim); margin: 0 0 14px;
}
.modal p b { color: var(--ink); font-weight: 600; }
.modal p i { color: var(--ink); font-style: italic; }
.modal-rule { height: 1px; background: var(--rule); margin: 22px 0; }
.modal-fine { font-size: 12.5px !important; color: var(--ink-faint) !important; }
.modal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.modal-chips span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px;
}

/* ───────────── the instrument ───────────── */
.instrument {
  min-height: 100svh;
  padding: clamp(86px, 12vh, 132px) var(--gut) 56px;
  display: flex; flex-direction: column; align-items: center;
}
.overline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 26px;
  opacity: 0; transform: translateY(6px); animation: rise .9s .15s forwards;
}

/* specimen ----------------------------------------------------------------- */
.specimen {
  display: flex; align-items: baseline; gap: 16px;
  max-width: 760px; width: 100%; justify-content: center; text-align: center;
  padding: 0 0 6px; margin-bottom: clamp(20px, 4vh, 40px);
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0; animation: rise .9s .3s forwards;
}
.specimen-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 auto;
}
.specimen-q {
  font-family: var(--serif); font-size: clamp(18px, 2.5vw, 27px); font-style: italic;
  color: var(--ink); line-height: 1.3;
}

/* WITHOUT ↔ WITH Aperture — a toggle that flips the reading on demand */
.lens-toggle {
  display: inline-flex; align-self: center; margin: -10px 0 18px;
  border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
}
.lt-opt {
  background: transparent; border: 0; cursor: pointer; color: var(--ink-faint);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 20px; transition: color .4s, background .4s; white-space: nowrap;
}
.lt-opt + .lt-opt { border-left: 1px solid var(--rule); }
.lt-opt:hover { color: var(--ink-dim); }
.lt-opt.on { color: #1a1206; background: var(--light); text-shadow: none; }
.lt-opt[data-mode="bare"].on { color: var(--ink); background: rgba(239,230,212,0.12); }

/* stage: VOICE · EYE · MIND ------------------------------------------------ */
.stage {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(18px, 3.4vw, 52px); width: 100%; max-width: 1180px;
}

.panel { min-width: 0; }
.panel-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

/* what it SAYS */
.voice { text-align: right; }
.voice .panel-cap { text-align: right; }
.voice-body {
  font-family: var(--serif); font-size: clamp(16px, 1.55vw, 21px); line-height: 1.55;
  color: var(--ink-dim); min-height: 4.6em; max-height: 30em; overflow-y: auto; padding-left: 6px;
}
.voice-body::-webkit-scrollbar { width: 6px; }
.voice-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.voice-body .cursor { color: var(--ink-faint); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.voice-verdict {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-top: 14px; height: 1.2em; opacity: 0; transition: opacity .5s;
}
.voice-verdict.show { opacity: 1; }
.voice-verdict.fabricated { color: var(--alarm); }
.voice-verdict.correct { color: var(--grounded); }
.voice-verdict.confident { color: var(--light); }
.voice-verdict.uncertain { color: var(--uncertain); }

/* rendered markdown + KaTeX answer (math / reasoning specimens) */
.voice-body.rich {
  text-align: left; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5;
  max-height: 19em; overflow-y: auto; padding-right: 6px;
}
.voice-body.rich :is(h1,h2,h3,h4,h5) {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim); margin: 13px 0 5px; font-weight: 600;
}
.voice-body.rich p { margin: 0 0 9px; }
.voice-body.rich :is(ul,ol) { margin: 0 0 9px; padding-left: 1.25em; }
.voice-body.rich li { margin: 3px 0; }
.voice-body.rich strong { color: var(--ink); font-weight: 600; }
.voice-body.rich code {
  font-family: var(--mono); font-size: .86em; background: rgba(255,255,255,.05);
  padding: 1px 5px; border-radius: 3px; color: var(--light-hi);
}
.voice-body.rich pre {
  background: rgba(255,255,255,.04); border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; margin: 0 0 9px;
}
.voice-body.rich pre code { background: none; padding: 0; }
.voice-body.rich .katex { color: var(--ink); }
.voice-body.rich .katex-display { margin: 11px 0; overflow-x: auto; overflow-y: hidden; }
.voice-body.rich::-webkit-scrollbar { width: 6px; }
.voice-body.rich::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* the EYE */
.eye-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.eye {
  width: clamp(182px, 24vw, 274px); height: clamp(182px, 24vw, 274px);   /* 30% smaller — more room for copy */
  /* --fam (0..1) pupil light, --off (0..1) focus; set by JS */
  --fam: 0; --off: 0;
  filter: saturate(calc(1 - var(--off) * 0.5));
}
.field circle { fill: var(--ink-ghost); }
.calib line { stroke: var(--rule); stroke-width: 1; }
.blade {
  fill: #161220; stroke: rgba(255,214,150,0.08); stroke-width: 0.8;
  transform-box: view-box;                     /* origin resolves in viewBox units */
  /* transform-origin (each blade's pivot on the ring) + transform set inline by JS */
  transition: transform 1.15s cubic-bezier(.34,.72,.16,1);
  transition-delay: calc(var(--ai, 0) * 0.02s);
}
.blade.snap { transition: transform .42s cubic-bezier(.5,0,.5,1); }   /* shutter focus-pull */
.pupil-glow {
  opacity: calc(0.06 + var(--fam) * 0.94);
  transform-box: view-box; transform-origin: 220px 220px;
  transform: scale(calc(0.62 + var(--fam) * 0.66));
  transition: opacity 1.2s cubic-bezier(.3,.7,.2,1), transform 1.2s cubic-bezier(.3,.7,.2,1);
}
.pupil-core {
  opacity: calc(0.12 + var(--fam) * 0.88);
  transform-box: view-box; transform-origin: 220px 220px;
  transform: scale(calc(0.5 + var(--fam) * 0.7));
  transition: opacity 1.2s, transform 1.2s;
}
.eye-state {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-faint); transition: color .5s;
}
.eye-state.seeing { color: var(--grounded); }
.eye-state.blind  { color: var(--alarm); }
.eye-state.offmap { color: var(--offmap); }

/* idle breathing on the pupil */
.eye:not(.read) .pupil-glow { animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.07} 50%{opacity:.16} }

/* ── per-verdict aperture behaviour (each sample animates in its OWN way) ───── */
/* GROUNDED — it KNOWS: dilate wide, hold open, a slow living breath; light floods + stays */
.eye.st-grounded .blade { animation: g-open .85s cubic-bezier(.2,.85,.2,1) both, g-breathe 6s .85s ease-in-out infinite; }
@keyframes g-open    { from { transform: rotate(28deg); } to { transform: rotate(0deg); } }
@keyframes g-breathe { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(2.1deg); } }
.eye.st-grounded .pupil-glow { animation: pg-on 5.5s ease-in-out infinite; }
@keyframes pg-on { 0%,100% { opacity: .86; } 50% { opacity: 1; } }

/* LIKELY FABRICATION — bluffing: open but RESTLESS (hunting), a false light that GUTTERS */
.eye.st-low .blade { animation: l-open .8s cubic-bezier(.2,.85,.2,1) both, l-hunt 3.1s .8s ease-in-out infinite; }
@keyframes l-open { from { transform: rotate(28deg); } to { transform: rotate(8deg); } }
@keyframes l-hunt { 0% { transform: rotate(8deg); } 34% { transform: rotate(13deg); } 68% { transform: rotate(6deg); } 100% { transform: rotate(8deg); } }
.eye.st-low .pupil-glow, .eye.st-low .pupil-core { animation: pg-gutter 3.4s ease-in-out infinite; }
@keyframes pg-gutter {
  0%{opacity:.02} 13%{opacity:.16} 26%{opacity:.03} 50%{opacity:.02} 62%{opacity:.12} 74%{opacity:.03} 100%{opacity:.02}
}

/* OFF THE MAP — can't acquire: the iris SEARCHES slowly and never locks; dark; the field drifts */
.eye.st-off .blade { animation: o-open .7s ease-out both, o-search 5s ease-in-out .7s infinite; }
@keyframes o-open   { from { transform: rotate(28deg); } to { transform: rotate(15deg); } }
@keyframes o-search { 0% { transform: rotate(15deg); } 50% { transform: rotate(24deg); } 100% { transform: rotate(15deg); } }
.eye.st-off .pupil-glow, .eye.st-off .pupil-core { animation: o-dim 4.5s ease-in-out infinite; }
@keyframes o-dim { 0%,100% { opacity: .012; } 50% { opacity: .05; } }
.eye.st-off .field { animation: o-drift 6s ease-in-out infinite; }
@keyframes o-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } }

/* what it KNOWS */
.readout { margin-bottom: 30px; }
.readout:last-child { margin-bottom: 0; }
.ro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ro-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.ro-val {
  font-family: var(--mono); font-size: clamp(30px, 4vw, 46px); font-weight: 500;
  color: var(--ink); line-height: 1; letter-spacing: -0.01em; transition: color .6s;
  font-variant-numeric: tabular-nums;
}
.ro-val.bad  { color: var(--alarm); text-shadow: 0 0 18px var(--alarm-dim); }
.ro-val.good { color: var(--grounded); }
.ro-val.warn { color: var(--offmap); }
.ro-val.amber { color: var(--uncertain); }
.ro-track {
  height: 2px; background: var(--rule); margin: 13px 0 9px; position: relative; overflow: hidden;
}
.ro-fill {
  position: absolute; top: 0; bottom: 0; left: 0; right: 100%; background: var(--grounded);
  box-shadow: 0 0 10px var(--grounded);
  transition: right 1.1s cubic-bezier(.2,.7,.2,1), background .6s;
}
.ro-fill.bad  { background: var(--alarm); box-shadow: 0 0 12px var(--alarm); }
.ro-fill.warn { background: var(--offmap); box-shadow: 0 0 10px var(--offmap); }
.ro-fill.amber { background: var(--uncertain); box-shadow: 0 0 10px var(--uncertain); }
.ro-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-faint); }

/* ── the WITHOUT → WITH Aperture reveal: the mind stays dark until the lens engages ── */
.mind { transition: opacity .7s ease; }
.instrument[data-phase="bare"] .mind { opacity: .08; }
.instrument[data-phase="lens"] .mind { opacity: 1; }

/* verdict ------------------------------------------------------------------ */
.verdict {
  display: flex; align-items: center; gap: 22px;
  margin: clamp(34px, 6vh, 64px) auto 0; padding: 22px 34px;
  border: 1px solid var(--rule); border-radius: 2px;
  max-width: 720px; width: 100%; justify-content: center;
  background: linear-gradient(180deg, rgba(247,240,226,0.018), transparent);
  position: relative;
}
.verdict[data-state="idle"] { opacity: .5; }
.verdict::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acc);
  opacity: 0; transition: opacity .5s;
}
.verdict.stamped::before { opacity: .9; }
.verdict-seal {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--acc); position: relative; opacity: .85;
}
.verdict-seal::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--acc); opacity: calc(0.2 + var(--fam, 0) * 0.7);
}
.verdict-body { text-align: left; }
.verdict-label {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.01em;
  color: var(--acc); line-height: 1.1;
}
.verdict-advice {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-dim);
  margin-top: 6px; line-height: 1.5;
}
.verdict.stamp-in { animation: stamp .55s cubic-bezier(.2,1.3,.3,1); }
@keyframes stamp { 0%{transform:scale(1.12);opacity:0} 55%{transform:scale(.985)} 100%{transform:scale(1);opacity:1} }

/* console (now up top, above the stage) ------------------------------------ */
.console { width: 100%; max-width: 720px; margin: 2px auto clamp(22px, 4vh, 40px);
  opacity: 0; animation: rise .9s .22s forwards; }
.console-in { margin-bottom: 14px; }
.in-row {
  display: grid; grid-template-columns: 1fr 0.6fr auto; gap: 0;
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
  transition: border-color .3s;
}
.in-row:focus-within { border-color: var(--ink-faint); }
.in-q, .in-e {
  background: transparent; border: 0; color: var(--ink); padding: 15px 18px;
  font-family: var(--serif); font-size: 16px; font-style: italic; outline: none; min-width: 0;
}
.in-e { font-style: normal; font-family: var(--mono); font-size: 12px; border-left: 1px solid var(--rule); letter-spacing: .04em; }
.in-q::placeholder { color: var(--ink-faint); }
.in-e::placeholder { color: var(--ink-faint); }
.in-go {
  background: transparent; border: 0; border-left: 1px solid var(--rule); cursor: pointer;
  color: var(--ink); padding: 0 22px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; transition: background .3s, color .3s;
}
.in-go:hover { background: var(--light); color: #1a1206; }
.in-go.busy { color: var(--ink-faint); pointer-events: none; }

/* single shuffle button (replaces the specimen chip row) */
.console-aux { display: flex; justify-content: center; margin-top: 2px; }
.shuffle-btn {
  background: transparent; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 9px 24px; transition: color .3s, border-color .3s;
}
.shuffle-btn:hover { color: var(--light); border-color: var(--ink-faint); }
.shuffle-btn:active { transform: translateY(1px); }

/* ───────────── field notes ───────────── */
.notes { padding: clamp(60px, 14vh, 150px) var(--gut) 0; border-top: 1px solid var(--rule-soft); }
.phenomenon { max-width: 900px; margin: 0 auto clamp(60px,12vh,128px); text-align: center; }
.ph-line { font-family: var(--serif); font-size: clamp(24px, 4.2vw, 50px); line-height: 1.22; letter-spacing: -0.01em; }
.ph-line.dim { color: var(--ink-faint); }
.ph-em { color: var(--light); font-style: italic; }

.spec-sheet {
  max-width: 980px; margin: 0 auto clamp(60px,12vh,128px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--rule); border-radius: 2px;
}
.spec { padding: 28px 26px; border-right: 1px solid var(--rule); }
.spec:last-child { border-right: 0; }
.spec-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--light); margin-bottom: 14px; }
.spec-v { font-family: var(--serif); font-size: 15.5px; line-height: 1.62; color: var(--ink-dim); }
.spec-v b { color: var(--ink); font-weight: 600; }
.spec-v em { color: var(--ink); font-style: italic; }
.t { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 2px; white-space: nowrap; }
.t-g { color: var(--grounded); border: 1px solid rgba(231,201,138,.35); }
.t-c { color: var(--light); border: 1px solid rgba(255,208,137,.40); }
.t-u { color: var(--alarm); border: 1px solid var(--alarm-dim); }
.t-h { color: var(--uncertain); border: 1px solid var(--uncertain-dim); }
.t-o { color: var(--offmap); border: 1px solid rgba(138,147,184,.35); }

.evidence {
  max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 68px); align-items: center; padding-bottom: clamp(60px,12vh,120px);
}
.ev-plate { text-align: center; border: 1px solid var(--rule); border-radius: 2px; padding: 30px 36px; }
.ev-num { font-family: var(--mono); font-size: clamp(54px, 8vw, 92px); font-weight: 500; color: var(--light); line-height: .92; letter-spacing: -0.02em; text-shadow: 0 0 40px rgba(255,208,137,.25); font-variant-numeric: tabular-nums; }
.ev-unit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5em; color: var(--ink-faint); margin-top: 14px; }
.ev-copy h2 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; font-weight: 400; margin-bottom: 16px; }
.ev-copy p { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; color: var(--ink-dim); margin-bottom: 12px; max-width: 56ch; }
.ev-copy .num { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.ev-copy .fine { font-size: 13.5px; color: var(--ink-faint); }

/* ───────────── benchmarks: unique + needed ───────────── */
.benchmarks { max-width: 1000px; margin: 0 auto; padding-bottom: clamp(60px, 12vh, 120px); }
.bm-head { text-align: center; margin-bottom: clamp(34px, 5vh, 58px); }
.bm-head h3 {
  font-family: var(--serif); font-size: clamp(20px, 2.7vw, 31px); font-weight: 400;
  line-height: 1.25; color: var(--ink); max-width: 30ch; margin: 16px auto 0;
}
.bm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(30px, 5vh, 50px);
}
.bm-card { border: 1px solid var(--rule); border-radius: 3px; padding: 26px 24px; background: rgba(255,255,255,0.012); }
.bm-num {
  font-family: var(--mono); font-size: clamp(36px, 4.8vw, 52px); font-weight: 500; color: var(--light);
  line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 30px rgba(255,208,137,.18);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.bm-vs { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-faint); text-shadow: none; }
.bm-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin: 17px 0 11px;
}
.bm-d { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.bm-d b { color: var(--ink); font-weight: 600; }
.bm-compare { border: 1px solid var(--rule-soft); border-radius: 3px; padding: clamp(22px, 3vw, 34px); margin-bottom: 26px; }
.bm-compare-head { font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); font-style: italic; color: var(--ink); margin-bottom: 16px; }
.bm-rows { list-style: none; display: flex; flex-direction: column; }
.bm-rows li {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; padding: 13px 0;
  border-top: 1px solid var(--rule-soft); align-items: baseline;
}
.bm-rows li:first-child { border-top: 0; }
.bm-m { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-dim); text-transform: uppercase; }
.bm-f { font-family: var(--serif); font-size: 14.5px; color: var(--ink-faint); line-height: 1.5; }
.bm-rows li.bm-ours { border-top-color: rgba(255,208,137,.25); }
.bm-rows li.bm-ours .bm-m { color: var(--light); }
.bm-rows li.bm-ours .bm-f { color: var(--ink-dim); }
.bm-fine {
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--ink-faint);
  letter-spacing: 0.02em; text-align: center; max-width: 80ch; margin: 6px auto 0;
}
@media (max-width: 760px) {
  .bm-grid { grid-template-columns: 1fr; }
  .bm-rows li { grid-template-columns: 1fr; gap: 3px; }
  .bm-f { font-size: 13.5px; }
}
.ev-copy b { color: var(--ink); }

.foot {
  max-width: 980px; margin: 0 auto; padding: 30px 0 56px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot-wm { font-family: var(--serif); font-size: 15px; letter-spacing: 0.3em; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); }
.foot-mode { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }

/* boot + motion ------------------------------------------------------------ */
@keyframes rise { to { opacity: 1; transform: none; } }

/* responsive --------------------------------------------------------------- */
@media (max-width: 880px) {
  .stage { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .voice { text-align: center; order: 3; max-width: 460px; }
  .voice .panel-cap { text-align: center; }
  .eye-wrap { order: 1; }
  .mind { order: 2; width: 100%; max-width: 380px; }
  .panel-cap { text-align: center; }
  .evidence { grid-template-columns: 1fr; text-align: center; }
  .ev-copy p { margin-left: auto; margin-right: auto; }
  .spec-sheet { grid-template-columns: 1fr; }
  .spec { border-right: 0; border-bottom: 1px solid var(--rule); }
  .spec:last-child { border-bottom: 0; }
  .in-row { grid-template-columns: 1fr; }
  .in-q, .in-e, .in-go { border-left: 0; border-bottom: 1px solid var(--rule); }
  .in-go { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .1s !important; }
}

/* ── council + advanced (the live engine: a parallax across independent minds) ── */
.console-aux { display:flex; gap:16px; align-items:center; }
.adv-btn { background:none; border:0; color:var(--ink-faint); font:inherit; font-size:13px; cursor:pointer; letter-spacing:.04em; }
.adv-btn:hover { color:var(--ink); }
.advanced { margin-top:12px; padding:14px 16px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.02); }
.adv-row { display:flex; align-items:center; gap:14px; margin-bottom:11px; }
.adv-k { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); min-width:64px; }
.advanced .in-e { flex:1; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); color:var(--ink); border-radius:8px; padding:9px 12px; font:inherit; }
.council-pick { display:flex; gap:8px; flex-wrap:wrap; }
.pick { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.13); color:var(--ink-faint); border-radius:20px; padding:6px 13px; font-size:13px; cursor:pointer; transition:.12s; }
.pick:hover { color:var(--ink); }
.pick.on { color:var(--ink); border-color:var(--grounded,#9fe2a0); background:rgba(120,200,130,.09); }
.pick.flag { cursor:default; border-color:var(--light,#f7c873); color:var(--ink); }
.adv-fine { font-size:12px; color:var(--ink-faint); margin:10px 0 0; line-height:1.55; }
.indep-tag { font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none; opacity:.9; }
.indep-tag.good { color:var(--grounded,#9fe2a0); } .indep-tag.bad { color:var(--alarm,#ff8a7a); } .indep-tag.warn { color:var(--uncertain,#e6c86a); }
.council-list { display:flex; flex-direction:column; gap:9px; }
.cv { border:1px solid rgba(255,255,255,.07); border-left:2px solid rgba(255,255,255,.18); border-radius:8px; padding:8px 11px; background:rgba(255,255,255,.02); }
.cv.flag { border-left-color:var(--light,#f7c873); }
.cv-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.cv-nm { font-weight:600; font-size:13.5px; }
.cv-fam { font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.cv-ans { font-size:13px; opacity:.82; margin-top:3px; line-height:1.45; }
.cv-foot { font-size:11.5px; color:var(--ink-faint); letter-spacing:.02em; padding-top:2px; }

/* ───────────── council debate (shared: /debate page + front-page modal) ───────────── */
.debate-btn { border: 1px solid var(--light, #f7c873) !important; color: var(--ink) !important; }
.debate-btn:hover { background: rgba(255, 208, 137, 0.10) !important; }
.modal--debate { max-width: 760px; }
.dm-lede { color: var(--ink-dim) !important; font-size: 15px !important; margin: 0 0 18px !important; }
.dconsole { background:rgba(255,255,255,.02); border:1px solid var(--line,#241f29); border-radius:14px; padding:16px; }
.drow { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.dq { flex:1; min-width:240px; background:rgba(0,0,0,.28); border:1px solid var(--line,#241f29); color:var(--ink,#e9e2d6); border-radius:10px; padding:12px 14px; font:16px/1.5 inherit; }
.drounds { background:rgba(0,0,0,.28); border:1px solid var(--line,#241f29); color:var(--ink,#e9e2d6); border-radius:10px; padding:0 10px; }
.dgo { background:var(--light,#f7c873); color:#1a1206; border:0; border-radius:10px; padding:12px 22px; font-weight:700; cursor:pointer; font-size:15px; }
.dgo:disabled { opacity:.5; cursor:wait; }
.dchips { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dchip { background:rgba(255,255,255,.03); border:1px solid var(--line,#241f29); color:var(--ink-faint); border-radius:20px; padding:6px 13px; font-size:13px; cursor:pointer; }
.dchip:hover { color:var(--ink); }
.dstatus { margin:22px 0 0; border-radius:16px; border:1px solid; padding:18px 20px;
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 22px 64px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06); }
.s-VERIFIED,.s-GROUNDED { background:rgba(13,36,23,0.58); border-color:var(--grounded,#3fb37f); } .s-VERIFIED .stag,.s-GROUNDED .stag { color:#6fe0a6; }
.s-IMPOSSIBLE,.s-REFUTED { background:rgba(12,26,42,0.58); border-color:#3f74b3; } .s-IMPOSSIBLE .stag,.s-REFUTED .stag { color:#7fb6ff; }
.s-UNRESOLVED,.s-UNCERTAIN,.s-LOW_CONFIDENCE { background:rgba(42,36,16,0.58); border-color:var(--uncertain,#c79a2a); } .s-UNRESOLVED .stag,.s-UNCERTAIN .stag,.s-LOW_CONFIDENCE .stag { color:var(--uncertain,#e6c86a); }
.s-ONMAP { background:rgba(42,36,16,0.52); border-color:var(--light,#ffd089); } .s-ONMAP .stag { color:var(--light,#ffd089); }
.s-OFFMAP { background:rgba(20,24,38,0.55); border-color:var(--offmap,#8a93b8); } .s-OFFMAP .stag { color:#aab3da; }
.s-FABRICATION { background:rgba(46,16,18,0.55); border-color:var(--alarm,#ff4640); } .s-FABRICATION .stag { color:#ff8a82; }
.esc-row { display:flex; gap:9px; flex-wrap:wrap; margin:12px 0 2px; }
.esc-btn { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:var(--ink-dim); font-family:var(--mono); font-size:11px; letter-spacing:.03em; padding:7px 13px; border-radius:999px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.esc-btn:hover { color:var(--light,#ffd089); border-color:rgba(255,208,137,.45); background:rgba(255,208,137,.07); }
.stag { font-weight:800; letter-spacing:.04em; font-size:15px; }
.sans { margin-top:8px; font-size:16px; line-height:1.55; }
.srcpt { margin-top:8px; color:var(--ink-faint); font-size:13px; }
.dsection { margin-top:18px; }
.dcap { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.dfacts { list-style:none; padding:0; margin:0; font-size:13.5px; color:var(--ink-dim); }
.dfacts li { padding:3px 0 3px 16px; position:relative; } .dfacts li::before { content:"•"; position:absolute; left:0; color:var(--ink-faint); }
.dround { border:1px solid var(--line,#241f29); border-left:2px solid #3a3340; border-radius:10px; padding:11px 14px; margin-bottom:10px; background:rgba(255,255,255,.015); }
.dround.verifier { border-left-color:#7fb6ff; } .dround.chair { border-left-color:var(--light,#f7c873); }
.dround.search { border-left-color:#5fd0d0; }
.dsources { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.dsrc { color:#5fd0d0; text-decoration:none; font-size:12.5px; opacity:.82; word-break:break-all; line-height:1.4; }
.dsrc:hover { opacity:1; text-decoration:underline; }
.drhd { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:10px; }
.drrole { font-weight:700; font-size:13px; letter-spacing:.04em; } .drmeta { font-size:11.5px; color:var(--ink-faint); text-align:right; }
.dprop { margin-top:7px; font-size:13.5px; } .dprop .pn { color:var(--acc,#6ea8fe); font-weight:600; } .dprop .pf { color:var(--ink-faint); font-size:11px; }
.dprop .pt { display:block; opacity:.85; margin:1px 0 7px; line-height:1.45; }
.dmatrix { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:#6fe0a6; background:rgba(0,0,0,.3); border-radius:8px; padding:10px; overflow:auto; margin-top:8px; }
.spin { display:inline-block; animation:dsp 1s linear infinite; } @keyframes dsp { to { transform:rotate(360deg); } }

/* ───────────── THE PRISM — the aperture refracting (reuses the main-page lens DNA) ───────────── */
.aperture-stage { display:flex; justify-content:center; margin: 2px 0 16px; }
.ap-svg { width: clamp(232px, 46vw, 366px); height: clamp(232px, 46vw, 366px); --fam: .12; }
.aperture-stage .ap-calib line { stroke: var(--rule); stroke-width: 1; }
.aperture-stage .spk { fill: var(--ink-ghost); }
.aperture-stage .blade {
  fill:#a6d0f0; fill-opacity:.4; stroke:rgba(210,232,252,.12); stroke-width:.7; transform-box:view-box; transform: rotate(15deg);
  transition: transform 1.05s cubic-bezier(.34,.72,.16,1); transition-delay: calc(var(--ai,0)*.018s);
}
.aperture-stage .pupil-glow { opacity: calc(.06 + var(--fam)*.94); transform-box:view-box; transform-origin:220px 220px;
  transform: scale(calc(.62 + var(--fam)*.66)); transition: opacity 1s, transform 1s; }
.aperture-stage .pupil-core { opacity: calc(.12 + var(--fam)*.88); transform-box:view-box; transform-origin:220px 220px;
  transform: scale(calc(.5 + var(--fam)*.7)); transition: opacity 1s, transform 1s; }
.ap-corona { transform-box: view-box; transform-origin: 220px 220px; }
.petal { opacity: 0; }

/* refracting — the lens opens, the pupil flares, the spectrum radiates and revolves around the aperture */
.aperture-stage.ph-refracting { --fam:.92; }
.ph-refracting .blade { animation: apr-open .9s cubic-bezier(.2,.85,.2,1) both, apr-swirl 9s .9s ease-in-out infinite; }
.ph-refracting .ap-corona { animation: apr-revolve 18s linear infinite; }
.ph-refracting .petal { animation: apr-grow .7s both; animation-delay: calc(var(--i)*.14s); }
.ph-refracting .pupil-glow { animation: apr-flare 1.9s ease-in-out infinite; }
@keyframes apr-open { from{transform:rotate(26deg)} to{transform:rotate(3deg)} }
@keyframes apr-swirl { 0%,100%{transform:rotate(3deg)} 50%{transform:rotate(6deg)} }
@keyframes apr-revolve { to { transform: rotate(360deg); } }
@keyframes apr-grow { from{opacity:0} to{opacity:.66} }
@keyframes apr-flare { 0%,100%{opacity:.72} 50%{opacity:1} }

/* converge (VERIFIED / GROUNDED) — the light sweeps back into the pupil; it ignites */
.aperture-stage.ph-converge { --fam:1; }
.ph-converge .blade { transform: rotate(1deg); animation: apr-breathe 6s 1s ease-in-out infinite; }
.ph-converge .petal { animation: apr-converge 1.1s cubic-bezier(.4,0,.3,1) forwards; }
.ph-converge .pupil-glow { animation: apr-ignite 4s ease-in-out infinite; }
@keyframes apr-breathe { 0%,100%{transform:rotate(1deg)} 50%{transform:rotate(3deg)} }
@keyframes apr-converge { 0%{opacity:.55; transform:scale(1)} 100%{opacity:0; transform:scale(.12)} }
@keyframes apr-ignite { 0%,100%{opacity:.9} 50%{opacity:1} }
.ph-converge .petal { transform-box:view-box; transform-origin:220px 220px; }

/* disperse (UNRESOLVED / UNCERTAIN) — the spectrum stays fanned; the pupil stays low */
.aperture-stage.ph-disperse { --fam:.22; }
.ph-disperse .blade { transform: rotate(9deg); }
.ph-disperse .ap-corona { animation: apr-revolve 34s linear infinite; }
.ph-disperse .petal { opacity:.6; }

/* forbidden (IMPOSSIBLE) — the iris stops down; the corona collapses; the lens goes cold */
.aperture-stage.ph-forbidden { --fam:.07; }
.ph-forbidden .ap-svg { filter: saturate(.55) hue-rotate(150deg); }
.ph-forbidden .blade { transform: rotate(23deg); }
.ph-forbidden .petal { opacity:.1; }

/* verdict optical subtitle + the refracting stamp */
.voptical { margin-top:5px; font-style:italic; color: var(--ink-dim); font-size:13.5px; }
.s-REFRACTING { background:rgba(255,255,255,.02); border:1px solid var(--line,#241f29); }
.s-REFRACTING .stag { color: var(--light); }

/* the spectrum row — the model icons (names hidden; hover a band reveals it) */
.spectrum-row { display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.band { position:relative; width:28px; height:28px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.band-sw { width:20px; height:20px; border-radius:50%;
  background: radial-gradient(circle at 38% 34%, #fff7e6 0%, var(--hue) 46%, rgba(0,0,0,.3) 100%);
  box-shadow: 0 0 10px -1px var(--hue), inset 0 0 4px rgba(0,0,0,.4); transition: transform .18s, box-shadow .18s; }
.band:hover .band-sw, .band:focus .band-sw { transform: scale(1.2); box-shadow: 0 0 16px var(--hue), inset 0 0 4px rgba(0,0,0,.4); }
.band-lens .band-sw { border-radius:3px; }
.spec-note { font-size:12px; color: var(--ink-faint); margin-left:4px; }
.bandcard { position:absolute; top:142%; left:0; transform:translateY(6px); width:244px; max-width:74vw; z-index:6;
  background: linear-gradient(180deg,#161019,#0d0a10); border:1px solid var(--line,#2a2030); border-radius:10px;
  padding:11px 13px; opacity:0; pointer-events:none; transition: opacity .16s, transform .16s;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:3px; }
.band:hover .bandcard, .band:focus .bandcard { opacity:1; transform:translateY(0); }
.band:nth-last-child(2) .bandcard, .band:last-of-type .bandcard { left:auto; right:0; }  /* last bands open leftward */

/* ═══════════════ APERTURE OS — the aperture-first home ═══════════════ */
.os-mast { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:center; align-items:center;
  padding:20px clamp(18px,4vw,40px); pointer-events:none; }
.os-mast > * { pointer-events:auto; }
.os-status { display:none; }
.os-status--unused { background:none; border:0; cursor:pointer; align-items:center; gap:7px; color:var(--ink-faint);
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
.os-status:hover { color:var(--ink); }

.os { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(96px,13vh,150px) 20px clamp(56px,9vh,96px); }
.stack { width:100%; max-width:656px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; }
.tagline { text-align:center; font-family:var(--serif); font-style:italic; color:var(--ink-dim);
  font-size:clamp(15px,2vw,18px); margin:0 0 18px; text-shadow:0 1px 14px rgba(0,0,0,.62); }

/* the lead — the plain-language value, stated before the instrument */
.lead { position:relative; z-index:20; text-align:center; margin:0 0 18px; display:flex; flex-direction:column; align-items:center;
  padding:clamp(30px,3.6vw,46px) clamp(24px,2.6vw,32px);
  background:linear-gradient(180deg, rgba(14,16,24,0.62), rgba(9,11,18,0.76));
  backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.12); border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.08); }
.lead .tagline { margin:0 0 15px; opacity:.85; }
.lead-h1 { font-family:var(--serif); font-weight:600; color:var(--ink); letter-spacing:-0.015em;
  font-size:clamp(30px,6vw,50px); line-height:1.06; margin:0 0 20px; text-shadow:0 2px 34px rgba(0,0,0,.55); }
.lead-sub { font-family:var(--serif); color:rgba(239,230,212,0.68); max-width:560px; margin:0 auto;
  font-size:clamp(15.5px,2.05vw,18px); line-height:1.62; }
.lead-sub b { font-weight:600; color:var(--ink); }
.lead-sub b.g { color:var(--grounded); }
.lead-sub b.o { color:var(--offmap); }
.lead-cta { margin-top:24px; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.17);
  border-radius:999px; padding:12px 24px; cursor:pointer; transition:border-color .25s, background .25s, color .25s; }
.lead-cta:hover { background:rgba(255,208,137,0.09); border-color:rgba(255,208,137,0.5); color:var(--light-hi); }
.lead-cta .arw { transition:transform .25s; opacity:.8; }
.lead-cta:hover .arw { transform:translateX(3px); opacity:1; }
/* hero strap + dual CTAs */
.lead-strap { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:15px 0 0; }
.lead-ctas { display:flex; gap:11px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.lead-ctas .lead-cta { margin-top:0; text-decoration:none; }
.lead-cta--primary { background:var(--light,#ffd089); border-color:var(--light,#ffd089); color:#1a1206; font-weight:700; }
.lead-cta--primary:hover { background:var(--light-hi,#fff4dc); border-color:var(--light-hi,#fff4dc); color:#1a1206; }
/* the narrative spine — the scrolling case, each a frosted card over the aurora */
.nseg { position:relative; z-index:20; margin:16px 0 0; text-align:left;
  padding:clamp(28px,3.6vw,42px) clamp(24px,3vw,40px);
  background:linear-gradient(180deg, rgba(14,16,24,0.56), rgba(9,11,18,0.70));
  backdrop-filter:blur(30px) saturate(1.25); -webkit-backdrop-filter:blur(30px) saturate(1.25);
  border:1px solid rgba(255,255,255,0.10); border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07); scroll-margin-top:84px; }
.nseg .neb { font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--light,#ffd089); opacity:.85; }
.nseg h2 { font-family:var(--serif); font-weight:600; color:var(--ink); font-size:clamp(23px,3.3vw,33px); line-height:1.13; letter-spacing:-0.01em; margin:9px 0 13px; }
.nseg p { font-family:var(--serif); font-size:clamp(15.5px,1.9vw,17px); line-height:1.6; color:var(--ink-dim); margin:0; }
.nseg p + p { margin-top:12px; }
.nseg p b { color:var(--ink); font-weight:600; }
.nseg .nbound { margin-top:15px; padding-top:13px; border-top:1px solid var(--rule-soft,rgba(239,230,212,0.06)); font-size:13px; line-height:1.55; color:var(--ink-faint); }
.nseg .nlink { display:inline-block; margin-top:15px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--light,#ffd089); text-decoration:none; }
.nseg .nlink:hover { color:var(--light-hi,#fff4dc); }
.nseg--offer { border-color:rgba(255,208,137,0.30); box-shadow:0 24px 80px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,208,137,0.10); }
.nstat { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.nstat span { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:6px 12px; }
.nseg .close-line { margin-top:18px; color:var(--ink); font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,26px); line-height:1.2; }
.console-card { background:linear-gradient(180deg, rgba(15,17,26,0.55), rgba(9,11,18,0.70));
  backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.12); border-radius:24px; padding:clamp(22px,3vw,32px);
  box-shadow:0 30px 90px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.08); }

/* the hero — the lens stays centered; its verdict card sits in the right gutter (above the fold) */
.hero { display:flex; flex-direction:column; align-items:center; width:100%; }
.lens { position:fixed; bottom:clamp(8px,2.4vh,26px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; z-index:2; }
.vcard { width:100%; margin:16px 0 0; text-align:left; animation: vfade .5s ease both; }
.vcard:empty { display:none; margin:0; }
.vcard .dstatus { margin:0; }
@keyframes vfade { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.lens .ap-svg { width: clamp(264px, 54vmin, 460px); height: clamp(264px, 54vmin, 460px);
  transition: width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); cursor:pointer; }
body[data-stage="open"] .lens .ap-svg { width: clamp(118px, 17vmin, 168px); height: clamp(118px, 17vmin, 168px); cursor:default; }
.lens-state { display:none; }
.lens-hit { position:absolute; inset:13%; border-radius:50%; background:none; border:0; cursor:pointer; z-index:3; }
body[data-stage="open"] .lens-hit { display:none; }
.lens-state { font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:14px; min-height:14px; transition:color .4s; }

/* rest caption */
.rest-cap { text-align:center; margin-top:26px; }
.rest-tag { font-family:var(--serif); font-style:italic; color:var(--ink-dim); font-size:clamp(15px,2.2vw,19px); margin:0 0 16px; }
.rest-open { font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--light);
  cursor:pointer; margin:0; animation: restpulse 3.6s ease-in-out infinite; }
.rest-open:hover { opacity:1 !important; }
@keyframes restpulse { 0%,100%{opacity:.45} 50%{opacity:.95} }
body[data-stage="open"] .rest-cap { display:none; }

/* the deck — blooms down from the lens */
.deck { width:100%; max-width:680px; margin:24px auto 0; opacity:0; transform:translateY(20px); pointer-events:none;
  transition: opacity .6s .12s, transform .6s .12s; }
body[data-stage="open"] .deck { opacity:1; transform:none; pointer-events:auto; }
body[data-stage="rest"] .deck { display:none; }

.modedial { display:flex; width:fit-content; margin:0 auto; gap:2px; background:rgba(255,255,255,.03);
  border:1px solid var(--line,#241f29); border-radius:999px; padding:3px; }
.md-opt { background:none; border:0; cursor:pointer; color:var(--ink-faint); font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; padding:8px 22px; border-radius:999px; transition: color .25s, background .25s; }
.md-opt.on { color:#1a1206; background:var(--light); }
.mode-lede { text-align:center; color:var(--ink-dim); font-family:var(--serif); font-size:15px; line-height:1.55; margin:16px auto 18px; max-width:570px; }

.os-console { display:flex; gap:10px; align-items:stretch; }
.os-q { flex:1; min-width:0; background:rgba(0,0,0,.3); border:1px solid var(--line,#241f29); color:var(--ink);
  border-radius:12px; padding:14px 16px; font:16px/1.5 var(--serif); }
.os-q:focus { outline:none; border-color:var(--light); }
.os-go { background:var(--light); color:#1a1206; border:0; border-radius:12px; padding:0 24px; font-weight:700; cursor:pointer; font-size:15px; white-space:nowrap; }
.os-go:disabled { opacity:.5; cursor:wait; }
body[data-mode="read"] #rounds { display:none; }

/* ───────────── the live read — dockable drawer ───────────── */
/* the in-flow launcher in the console section */
.nlive { margin-top:24px; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--light,#ffd089); color:#1a1206; border:0; border-radius:999px;
  padding:13px 24px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  transition:background .25s, transform .25s, box-shadow .25s; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.nlive:hover { background:var(--light-hi,#fff4dc); transform:translateY(-1px); box-shadow:0 14px 38px rgba(0,0,0,0.38); }
.nlive .arw { transition:transform .25s; }
.nlive:hover .arw { transform:translateX(3px); }

/* the persistent floating launcher (bottom-right) */
.drawer-tab { position:fixed; right:clamp(14px,3vw,30px); bottom:clamp(14px,3vh,30px); z-index:55;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--light,#ffd089); color:#1a1206; border:0; border-radius:999px;
  padding:14px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  box-shadow:0 16px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,208,137,0.4), 0 0 34px rgba(255,208,137,0.22);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s, box-shadow .3s; }
.drawer-tab:hover { transform:translateY(-2px); box-shadow:0 20px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,208,137,0.6), 0 0 44px rgba(255,208,137,0.34); }
.dt-dot { width:8px; height:8px; border-radius:50%; background:#1a1206; opacity:.8;
  box-shadow:0 0 0 3px rgba(26,18,6,0.18); }
body.drawer-open .drawer-tab { opacity:0; pointer-events:none; transform:translateY(10px); }

/* the dimming scrim behind the panel */
.drawer-scrim { position:fixed; inset:0; z-index:60; background:rgba(6,5,8,0.50);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; }
.drawer-scrim.show { opacity:1; visibility:visible; }

/* the panel itself — docks to the right edge, full height */
.drawer { position:fixed; top:50%; left:50%; z-index:70;
  width:min(560px, 94vw); max-height:min(86vh, 820px); display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(20,22,32,0.86), rgba(10,12,19,0.93));
  backdrop-filter:blur(42px) saturate(1.25); -webkit-backdrop-filter:blur(42px) saturate(1.25);
  border:1px solid rgba(255,255,255,0.12); border-radius:20px;
  box-shadow:0 44px 130px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:translate(-50%, -46%) scale(0.97); opacity:0; visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s ease, visibility .42s; will-change:transform, opacity; }
.drawer.open { transform:translate(-50%, -50%) scale(1); opacity:1; visibility:visible; }

.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:0 0 auto;
  padding:20px clamp(20px,3.4vw,30px); border-bottom:1px solid rgba(255,255,255,0.08); }
.drawer-id { display:flex; align-items:baseline; gap:11px; }
.drawer-dot { align-self:center; width:8px; height:8px; border-radius:50%; background:var(--light,#ffd089);
  box-shadow:0 0 10px rgba(255,208,137,0.7); animation:restpulse 3.6s ease-in-out infinite; }
.drawer-title { font-family:var(--serif); font-size:19px; color:var(--ink); }
.drawer-sub { font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.drawer-x { background:none; border:0; cursor:pointer; color:var(--ink-faint); font-size:27px; line-height:1; padding:2px 8px; transition:color .3s; }
.drawer-x:hover { color:var(--light); }

.drawer-body { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:clamp(20px,3.4vw,30px); }
/* flatten the console card chrome — the drawer is the card now */
.drawer .console-card { background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:0; border-radius:0; padding:0; box-shadow:none; }

@media (max-width:560px){ .drawer { width:94vw; max-height:90vh; } }
@media (prefers-reduced-motion: reduce){ .drawer, .drawer-tab, .drawer-scrim { transition:none; } }

.os-aux { display:flex; gap:14px; align-items:center; margin-top:12px; justify-content:center; flex-wrap:wrap; }
.aux-btn { background:none; border:1px solid var(--line,#241f29); border-radius:999px; color:var(--ink-faint); font-size:12.5px; padding:6px 15px; cursor:pointer; transition:color .2s; }
.aux-btn:hover { color:var(--ink); }
.aux-status { font-size:12px; color:var(--ink-faint); }
.adv-fine { font-size:12px; color:var(--ink-faint); line-height:1.55; margin:12px auto 0; max-width:570px; text-align:center; }

.chips { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:14px; }
.chips-try { color:var(--ink-faint); font-size:12px; margin-right:2px; }
.chips .dchip { padding:5px 12px; font-size:12.5px; }
.readout { margin-top:10px; }

.facets { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:36px 0 12px; }
.facet { background:none; border:0; cursor:pointer; color:var(--ink-faint); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:color .25s; }
.facet:hover { color:var(--light); }
.facet.ghost { opacity:.5; }

/* the lens at rest — a slow pulse with shutter movement */
.aperture-stage.ph-rest { --fam:.16; }
.ph-rest .blade { animation: rest-shutter 9s ease-in-out infinite; }
.ph-rest .pupil-glow { animation: rest-breathe 6s ease-in-out infinite; }
.ph-rest .pupil-core { opacity:.5; }
@keyframes rest-shutter { 0%,100%{transform:rotate(13deg)} 50%{transform:rotate(20deg)} }
@keyframes rest-breathe { 0%,100%{opacity:.1} 50%{opacity:.27} }
.lens:hover .aperture-stage.ph-rest { --fam:.3; }            /* warm to the touch */
.lens:hover .ph-rest .pupil-glow { animation-duration: 3.4s; }

@media (max-width:560px){ .os-console{flex-wrap:wrap} .os-go{width:100%;padding:13px} }

/* rich answers — markdown + KaTeX */
.sans p, .modelsays p { margin:0 0 8px; } .sans p:last-child, .modelsays p:last-child { margin-bottom:0; }
.sans ul, .sans ol, .modelsays ul, .modelsays ol { margin:6px 0; padding-left:20px; }
.sans li, .modelsays li { margin:2px 0; }
.sans h1, .sans h2, .sans h3, .sans h4 { font-size:16px; margin:11px 0 4px; color:var(--ink); font-weight:600; line-height:1.3; }
.sans h1:first-child, .sans h2:first-child, .sans h3:first-child { margin-top:0; }
.sans .katex { font-size:1.04em; } .sans .katex-display { margin:8px 0; overflow-x:auto; overflow-y:hidden; }
.sans strong, .modelsays strong, .pt strong { color:var(--ink); }
.sans code, .modelsays code, .pt code { background:rgba(255,255,255,.06); border-radius:4px; padding:1px 5px; font-size:.92em; font-family:ui-monospace,Menlo,monospace; }
/* long code blocks / unbreakable strings stay INSIDE the card — wrap or scroll, never blow out the layout */
.sans, .modelsays { overflow-wrap:anywhere; min-width:0; }
.sans pre, .modelsays pre { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:10px 12px; margin:8px 0; max-width:100%; max-height:320px; overflow:auto; }
.sans pre code, .modelsays pre code { display:block; background:none; border:0; padding:0; font-size:12.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.sans code, .modelsays code, .pt code { overflow-wrap:anywhere; word-break:break-word; }
.modelsays { font-size:14px; line-height:1.62; color:var(--ink-dim); max-height:300px; overflow:auto; padding-right:6px; }
.modelsays h1,.modelsays h2,.modelsays h3 { font-size:14.5px; margin:11px 0 4px; color:var(--ink); font-weight:600; }
.modelsays h1:first-child,.modelsays h2:first-child,.modelsays h3:first-child { margin-top:0; }
.drtext { font-size:13.5px; line-height:1.5; opacity:.92; }
.katex { font-size:1.03em; } .katex-display { margin:.5em 0; overflow-x:auto; overflow-y:hidden; }

/* ── readability over the aurora — frosted controls + a card for the under-fold detail ── */
.os-q { background: rgba(0,0,0,0.26); border-color: rgba(255,255,255,0.10); }
.modedial { background: rgba(0,0,0,0.22); }
.dchip, .aux-btn, #rounds, #dm-rounds { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#detail:not(:empty) { margin-top:16px; padding:4px 20px 18px; border:1px solid rgba(255,255,255,0.06); border-radius:16px;
  background: linear-gradient(180deg, rgba(10,12,20,0.52), rgba(7,9,15,0.70));
  backdrop-filter: blur(13px) saturate(1.05); -webkit-backdrop-filter: blur(13px) saturate(1.05); }
.mode-lede, .lens-state, .facet, .chips-try, .spec-note, .dcap, .wordmark, .os-status, .aux-status {
  text-shadow: 0 1px 12px rgba(0,0,0,0.6); }

/* the "try an example" dropdown — consolidates the specimen chips */
.try-wrap { position:relative; }
.try-pop { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:7;
  min-width:240px; max-width:320px; padding:6px; display:flex; flex-direction:column; gap:1px;
  background:linear-gradient(180deg, rgba(18,20,30,0.97), rgba(11,13,21,0.98)); border:1px solid rgba(255,255,255,0.10);
  border-radius:13px; box-shadow:0 22px 56px rgba(0,0,0,0.6); }
.try-pop[hidden] { display:none; }
.try-pop button { text-align:left; background:none; border:0; color:var(--ink-dim); cursor:pointer;
  padding:8px 11px; border-radius:8px; font:13px/1.4 var(--serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s,color .12s; }
.try-pop button:hover { background:rgba(255,255,255,0.07); color:var(--ink); }

/* ── the dropdown must float above the cards below it (their backdrop-filter traps z-index) ── */
.console-card { position:relative; z-index:20; }
.try-pop { z-index:40; background:linear-gradient(180deg, rgba(17,19,29,0.99), rgba(10,12,20,1.0)); }

/* ── larger, more readable type over the aurora ── */
.tagline { font-size:clamp(16px,2.3vw,20px); }
.md-opt { font-size:12px; padding:9px 24px; }
.mode-lede { font-size:16.5px; line-height:1.62; max-width:none; }
.os-q { font-size:17px; padding:15px 17px; }
.os-go { font-size:16px; }
.aux-btn { font-size:13.5px; }
.try-pop button { font-size:14.5px; }
.dstatus .stag { font-size:17px; }
.voptical { font-size:15px; }
.dstatus .sans { font-size:17.5px; line-height:1.55; }
.srcpt { font-size:13.8px; }
.dcap { font-size:12.5px; }
.dfacts { font-size:14.5px; } .dfacts li { padding-left:18px; }
.dprop .pn { font-size:14.5px; } .dprop .pt { font-size:14px; line-height:1.5; }
.drtext { font-size:14.5px; }
.modelsays { font-size:15px; line-height:1.65; }
.dmatrix { font-size:13px; }
.spec-note { font-size:13px; }
.bc-name { font-size:14.5px; } .bc-role { font-size:13px; } .bc-idx { font-size:12.5px; } .bc-text { font-size:13px; }

/* ═══════════ living gradient background + JS-driven home lens ═══════════ */
#bg { position:fixed; inset:0; z-index:-1; display:block; width:100%; height:100%; }
.os, .os-mast { position:relative; }                 /* sit above the canvas */

/* the home lens — motion driven by aperture.js (idle breath + cursor focus + thinking), iris only */
.aperture-stage.live .ap-corona { display:none; }    /* no rotating color lights on the home */
.aperture-stage.live .blade { transform: rotate(calc(var(--rot,15) * 1deg)); transition:none; animation:none; }
.aperture-stage.live .pupil-glow { opacity: var(--pop,.13); transform: scale(var(--psc,.85));
  transform-box:view-box; transform-origin:220px 220px; transition:none; animation:none; }
.aperture-stage.live .pupil-core { opacity: calc(var(--pop,.13) * 1.06); transform: scale(calc(var(--psc,.85) * .66));
  transform-box:view-box; transform-origin:220px 220px; transition:none; animation:none; }
.aperture-stage.live .ap-svg { transition: filter .9s ease; }
.aperture-stage.live.v-cold .ap-svg { filter: saturate(.5) hue-rotate(150deg); }
.bc-name { font-size:13.5px; color: var(--ink); }
.bc-fam { font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.bc-role { font-size:12px; color: var(--ink-dim); }
.bc-idx { font-size:11.5px; color: var(--ink-faint); }
.bc-text { font-size:12px; color: var(--ink-dim); margin-top:4px; padding-top:6px; border-top:1px solid var(--line,#241f29); line-height:1.45; max-height:84px; overflow:hidden; }

/* ───────────── the proof — the signal ───────────── */
.lift { margin:22px 0 4px; display:flex; flex-direction:column; gap:12px; }
.lift-row { display:grid; grid-template-columns:minmax(120px,33%) 1fr 56px; align-items:center; gap:13px; }
.lift-lbl { font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); }
.lift-track { height:13px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.lift-fill { display:block; height:100%; width:var(--w); border-radius:999px; transform-origin:left;
  background:linear-gradient(90deg, rgba(138,147,184,.45), rgba(138,147,184,.82));
  animation: liftgrow 1.15s cubic-bezier(.2,.85,.2,1) both; }
.lift-fill--us { background:linear-gradient(90deg, var(--light,#ffd089), #fff1d2); box-shadow:0 0 20px rgba(255,208,137,.5); }
.lift-row--us .lift-lbl { color:var(--light,#ffd089); }
.lift-val { font-family:var(--serif); font-size:clamp(18px,2.4vw,23px); color:var(--ink-dim); text-align:right; }
.lift-row--us .lift-val { color:var(--light,#ffd089); font-weight:600; }
.lift-cap { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
@keyframes liftgrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.pstats { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:22px; }
.pstat { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:17px 10px; text-align:center; }
.pnum { display:block; font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.4vw,32px); color:var(--light,#ffd089); line-height:1; }
.plbl { display:block; margin-top:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); line-height:1.5; }
@media (max-width:600px){ .pstats{grid-template-columns:repeat(2,1fr)} .lift-row{grid-template-columns:1fr 50px} .lift-lbl{grid-column:1/-1; margin-bottom:-4px} }

/* ═══════════════ universal aperture menu (menu.js) ═══════════════ */
.ap-menu { position: fixed; top: clamp(11px, 1.6vw, 17px); right: clamp(14px, 4vw, 38px); z-index: 65; }
/* the trigger — the aperture mark */
.ap-menu-btn { -webkit-appearance:none; appearance:none; background: rgba(12,14,22,.34); border: 1px solid rgba(255,255,255,.10);
  width: 44px; height: 44px; border-radius: 50%; padding: 6px; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 6px 22px rgba(0,0,0,.32); transition: border-color .3s, background .3s, box-shadow .3s, transform .3s; }
.ap-menu-btn:hover { border-color: rgba(255,208,137,.55); background: rgba(20,18,12,.46); box-shadow: 0 8px 26px rgba(0,0,0,.4), 0 0 22px rgba(255,208,137,.16); }
.ap-menu-btn:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.ap-menu.open .ap-menu-btn { border-color: rgba(255,208,137,.7); background: rgba(20,18,12,.55); }
/* the iris */
.ap-ic { width: 100%; height: 100%; display: block; overflow: visible; }
.ap-ic-blades { transform-origin: 220px 220px; animation: apm-revolve 46s linear infinite; }
@keyframes apm-revolve { to { transform: rotate(360deg); } }
.ap-ic-blade { fill: rgba(255,208,137,.16); stroke: rgba(255,208,137,.82); stroke-width: 5; stroke-linejoin: round;
  transform: rotate(12deg); transition: transform .55s cubic-bezier(.2,.85,.2,1), fill .4s, stroke .4s; }
.ap-menu-btn:hover .ap-ic-blade { transform: rotate(21deg); fill: rgba(255,208,137,.24); stroke: rgba(255,208,137,.95); }
.ap-menu.open .ap-ic-blade { transform: rotate(3deg); fill: rgba(255,208,137,.28); stroke: var(--light-hi); }
.ap-ic-pupil { opacity: .8; animation: apm-pulse 4.4s ease-in-out infinite; }
@keyframes apm-pulse { 0%,100%{opacity:.55} 50%{opacity:.95} }
.ap-menu-btn:hover .ap-ic-pupil, .ap-menu.open .ap-ic-pupil { opacity: 1; }
/* the dropdown */
.ap-menu-drop { position: absolute; top: calc(100% + 11px); right: 0; width: 280px; transform-origin: top right;
  background: linear-gradient(180deg, rgba(20,22,32,.86), rgba(10,12,19,.92));
  backdrop-filter: blur(34px) saturate(1.25); -webkit-backdrop-filter: blur(34px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 9px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-9px) scale(.97);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.85,.2,1), visibility .22s; }
.ap-menu.open .ap-menu-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.ap-menu-cap { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
  padding: 7px 12px 9px; }
.ap-menu-item { display: block; text-decoration: none; padding: 10px 13px; border-radius: 12px; position: relative;
  transition: background .18s; }
.ap-menu-item:hover, .ap-menu-item:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.ap-mi-t { display: block; font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.2; }
.ap-mi-s { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.ap-menu-item.is-here { background: rgba(255,208,137,.07); }
.ap-menu-item.is-here::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 3px; background: var(--light); box-shadow: 0 0 10px rgba(255,208,137,.6); }
.ap-menu-item.is-here .ap-mi-t { color: var(--light); }
.ap-menu-foot { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-ghost);
  display: flex; align-items: center; gap: 6px; padding: 11px 12px 6px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.06); }
.ap-menu-foot-mk { color: var(--light); opacity: .6; }
@media (max-width: 600px) { .ap-menu-drop { width: min(78vw, 280px); } .ap-menu-btn { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .ap-ic-blades, .ap-ic-pupil { animation: none; } }

/* ── streaming Iris read — the thought forming live ── */
.streamlive { white-space: pre-wrap; word-break: break-word; margin-top: 6px; }
.streamcaret { display: inline-block; color: var(--light); margin-left: 1px; animation: blink 1.05s step-end infinite; }
@media (prefers-reduced-motion: reduce) { .streamcaret { animation: none; } }