/* Vyakti proposal, v4. Paper and ink, after vyakti.ai.
   Phones: a normal flowing page. Desktops: a deck. Every section is exactly one screen, the whole
   type scale follows the window (root size = min of width and height), and each slide slides over the last. */
:root {
  color-scheme: light;
  --bg: #f6f6f1;
  --paper: #fbfbf8;
  --card: #ffffff;
  --raised: #efefe9;
  --line: #e0e0d8;
  --line2: #c9c9c0;
  --ink: #0d0f0e;
  --ink2: #3c3f3b;
  --ink3: #63655f;
  --sig: #b9301f;
  --sig2: #d33f2c;
  --sig-soft: rgba(211, 63, 44, .09);
  --ok: #1f6b54;
  --ok-soft: rgba(31, 107, 84, .1);
  --half: #c48a22;
  --half-ink: #8a5d0e;
  --lost: #c13a26;
  --face-paper: #f6f6f1;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --nav: 56px;
  --gut: 18px;
  --r: 16px;
  --shadow: 0 1px 0 rgba(13, 15, 14, .03), 0 18px 48px -30px rgba(13, 15, 14, .25);
  --h1: 2.55rem;
  --h2: 2.05rem;
  --lede: 1.06rem;
  --tiny: .7rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; overflow-wrap: break-word;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-weight: 520; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-weight: 560; letter-spacing: -.015em; line-height: 1.25; }
h1 em, h2 em, h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; color: var(--sig); }
h1 em, h2 em { font-size: 1.08em; line-height: .9; }
.lede { font-size: var(--lede); color: var(--ink2); line-height: 1.55; text-wrap: pretty; }
.muted { color: var(--ink3); }
.tiny { font-family: var(--f-mono); font-size: max(var(--tiny), 9.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.eyebrow { font-family: var(--f-mono); font-size: max(.74rem, 10px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); display: inline-flex; align-items: center; gap: .6rem; }
.src { font-family: var(--f-mono); font-size: max(.68rem, 9.5px); color: var(--ink3); letter-spacing: .02em; display: block; margin-top: .2rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
:focus-visible { outline: 2px solid var(--sig2); outline-offset: 3px; border-radius: 6px; }

/* ---------- reveal motion ---------- */
.js .rv { opacity: 0; transform: translateY(1.1rem); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .seen .rv { opacity: 1; transform: none; }
.split .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .16em .02em; margin: 0 -.1em -.16em -.02em; }
.split .wi { display: inline-block; }
.js .split .wi { transform: translateY(112%) rotate(3deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 30ms + 60ms); }
.js .seen .split .wi { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .split .wi { opacity: 1; transform: none; transition: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.9em; padding: 0 1.3em; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: transform .25s var(--ease), border-color .2s, background .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--ink3); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.sm { min-height: 2.5em; padding: 0 1em; font-size: .86rem; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .45em .95em; font-size: .84rem; font-weight: 500; color: var(--ink2); transition: background .25s, color .25s, border-color .25s; }
.seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav); display: flex; align-items: center; gap: 1.2rem; padding: 0 var(--gut);
  background: rgba(246, 246, 241, .8); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); transition: background .4s, color .4s, border-color .4s;
}
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.logo .mark { display: grid; place-items: center; min-width: 1.9rem; height: 1.9rem; font-family: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: -.12em; line-height: 1; transition: color .2s; }
.logo .word { display: inline-flex; align-items: baseline; font-size: 1.06rem; font-weight: 600; letter-spacing: -.045em; text-transform: lowercase; }
.logo .tld { margin-left: .16em; font-family: var(--f-mono); font-size: .56em; font-weight: 500; letter-spacing: -.02em; color: var(--sig2); }
.logo:hover .mark { color: var(--sig2); }
.nav nav { margin-left: auto; display: flex; gap: .2rem; }
.nav nav a { text-decoration: none; font-size: .86rem; color: var(--ink2); padding: .42em .8em; border-radius: 999px; transition: background .2s, color .2s; }
.nav nav a:hover, .nav nav a.on { background: var(--raised); color: var(--ink); }
.nav nav a.key { background: var(--ink); color: var(--paper); }
.count { font-family: var(--f-mono); font-size: max(.74rem, 10px); color: var(--ink3); letter-spacing: .06em; min-width: 4.2em; text-align: right; }
.count b { color: var(--ink); font-weight: 500; }
.prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.prog b { display: block; height: 100%; background: var(--sig2); transform-origin: 0 50%; transform: scaleX(0); }
.nav.on-dark { background: rgba(13, 15, 14, .7); color: var(--paper); border-color: #2a2d29; }
.nav.on-dark nav a { color: #c9cac4; }
.nav.on-dark nav a:hover, .nav.on-dark nav a.on { background: #23261f; color: #fff; }
.nav.on-dark nav a.key { background: var(--paper); color: var(--ink); }
.nav.on-dark .count, .nav.on-dark .count b { color: #c9cac4; }
.nav.on-dark .logo { color: var(--paper); }
@media (max-width: 999px) { .nav nav a:not(.key) { display: none; } .nav { gap: .8rem; } }

/* ---------- slides: phone / tablet flow ---------- */
.slide { position: relative; background: var(--bg); }
.slide .inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 72px var(--gut) 64px; display: grid; gap: 22px; }
.slide + .slide { border-top: 1px solid var(--line); }
.col-text { display: grid; gap: 16px; align-content: start; }
.two { grid-template-columns: minmax(0, 1fr); }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; }
.hero .inner { order: 2; padding-top: 18px; }
.hero-copy { display: grid; gap: 16px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sig2); position: relative; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--sig2); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-note { font-family: var(--f-mono); font-size: max(.72rem, 10px); color: var(--ink3); letter-spacing: .03em; }
.face-stage { order: 1; position: relative; height: min(50svh, 440px); margin-top: var(--nav); overflow: hidden; }
.face-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ring.back { z-index: 0; }
.ring.front { z-index: 2; }
.ring .orb { fill: none; stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 5; }
.ring .nd circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.ring .nd text { font-family: var(--f-serif); font-style: italic; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.ring .nd .lab { font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .1em; fill: var(--ink3); }
.ring .nd.hot circle { fill: var(--sig2); stroke: var(--sig2); }
.ring .nd.hot text:not(.lab) { fill: #fff; }
.face-fallback { position: absolute; inset: 10% 25%; border-radius: 50% 50% 44% 44%; opacity: 0; background: radial-gradient(rgba(13, 15, 14, .55) 1px, transparent 1.6px) 0 0 / 7px 7px; -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }
.noface .face-fallback { opacity: .6; }
.noface canvas { display: none; }
.dialog { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 10px; display: grid; max-width: 420px; }
.dialog > .layer {
  grid-area: 1 / 1; align-self: start; opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.dialog > .layer.on { opacity: 1; transform: none; visibility: visible; }
.dialog .who { font-family: var(--f-mono); font-size: max(.64rem, 9.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: .2rem; padding-right: 6.5rem; }
.dialog .vy .who { color: var(--sig); }
.dialog .txt { font-size: .98rem; line-height: 1.42; }
.dialog .rest { color: transparent; }
.dialog .read { display: grid; gap: .3rem; }
.dialog .read div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .6rem; font-size: .86rem; line-height: 1.38; opacity: 0; transform: translateX(-4px); transition: opacity .35s, transform .35s; }
.dialog .read div.on { opacity: 1; transform: none; }
.dialog .read b { font-family: var(--f-mono); font-size: max(.62rem, 9px); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--half-ink); padding-top: .2em; }
.dialog .read div:last-child b { color: var(--sig); }
.face-state { position: absolute; z-index: 4; top: .65rem; right: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem .22rem .5rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-family: var(--f-mono); font-size: max(.6rem, 9px); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.face-state i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--ok); }
.face-state.think i { background: var(--half); animation: blinkdot .9s infinite alternate; }
.face-state.speak i { background: var(--sig2); }
@keyframes blinkdot { to { opacity: .25; } }

/* ---------- problem: ladder ---------- */
.ladder { padding: 1.3rem; display: grid; gap: .2rem; align-content: start; }
.ladder > .eyebrow { margin-bottom: .6rem; }
.rung { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); }
.rl { display: grid; gap: .05rem; }
.rl b { font-weight: 600; }
.rl span { font-size: .84rem; color: var(--ink3); }
.bar { grid-column: 1 / -1; grid-row: 2; position: relative; height: .7rem; border-radius: 99px; background: var(--raised); overflow: hidden; }
.bar b { position: absolute; top: 0; bottom: 0; left: var(--l, 0); width: var(--w); border-radius: 99px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease); transition-delay: calc(var(--i, 0) * 180ms + 400ms); }
.seen .bar b { transform: scaleX(1); }
.bar b.ok { background: var(--ok); } .bar b.half { background: var(--half); } .bar b.lost { background: var(--lost); }
.bar b.soft { opacity: .4; border-radius: 0 99px 99px 0; }
.bar b.reach { top: 42%; bottom: auto; height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(31, 107, 84, .65) 0 5px, transparent 5px 9px); transition-duration: 2.2s; }
.bar .mark { position: absolute; top: 0; bottom: 0; left: calc(var(--at) - 2px); width: 4px; border-radius: 4px; background: var(--ok); }
.bar.empty { background: repeating-linear-gradient(-45deg, var(--raised) 0 6px, transparent 6px 12px); border: 1px dashed var(--line2); display: grid; place-items: center; height: 1.3rem; }
.bar.empty em { font-family: var(--f-mono); font-style: normal; font-size: max(.62rem, 9px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.rn { display: grid; justify-items: end; text-align: right; gap: .05rem; }
.rn b { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rn b small { font-weight: 450; font-size: .78rem; color: var(--ok); }
.rn b.sig { color: var(--sig); font-size: 1.3rem; }
.rn span { font-family: var(--f-mono); font-size: max(.64rem, 9px); color: var(--ink3); }

/* ---------- learning: facts + room ---------- */
.facts { display: grid; gap: .9rem; }
.facts li { padding-left: 1rem; border-left: 2px solid var(--line); color: var(--ink2); font-size: .97rem; }
.facts li b { color: var(--ink); display: block; }
.facts li:last-child { border-left-color: var(--sig2); }
.room { padding: 1.2rem; display: grid; gap: 1rem; align-content: start; }
.seats { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .45rem; width: 100%; max-width: 30rem; justify-self: center; }
.seat { aspect-ratio: 1; border-radius: 50%; background: var(--ink); position: relative; transition: background .6s var(--ease), transform .6s var(--ease); transition-delay: var(--w, 0ms); animation: nod 2.6s ease-in-out infinite; animation-delay: var(--d); }
.seat::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .7rem; font-weight: 700; opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s var(--ease); transition-delay: var(--w, 0ms); }
@keyframes nod { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(12%); } 90% { transform: translateY(-4%); } }
.room[data-m="true"] .seat, .room[data-m="ai"] .seat { animation: none; }
.room[data-m="true"] .seat.u, .room[data-m="ai"] .seat.u { background: var(--ok); }
.room[data-m="true"] .seat.f, .room[data-m="ai"] .seat.f { background: var(--half); }
.room[data-m="true"] .seat.l, .room[data-m="ai"] .seat.l { background: var(--lost); }
.room[data-m="ai"] .seat::after { opacity: 1; transform: none; }
.room-cap { color: var(--ink2); font-size: .95rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .8rem; color: var(--ink2); }
.legend i { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; }
.legend i.ok { background: var(--ok); } .legend i.half { background: var(--half); } .legend i.lost { background: var(--lost); }

/* ---------- map ---------- */
.map-grid { grid-template-columns: minmax(0, 1fr); }
.map-head { display: grid; gap: 14px; }
.fam-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fam-chips button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .32em .75em; font-size: .8rem; color: var(--ink2); display: inline-flex; gap: .35em; align-items: baseline; transition: all .25s; }
.fam-chips button b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--sig); }
.fam-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fam-chips button[aria-pressed="true"] b { color: #f3a493; }
.map-vis { width: 100%; max-width: 560px; justify-self: center; aspect-ratio: 1; }
#mapSvg { width: 100%; height: 100%; overflow: visible; }
#mapSvg .spoke { stroke: var(--line2); stroke-width: 1; transition: stroke .3s, stroke-width .3s; }
#mapSvg .spoke.on { stroke: var(--sig2); stroke-width: 1.6; }
#mapSvg .arc { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .14; transition: opacity .3s, stroke .3s; }
#mapSvg .arc.on { stroke: var(--sig2); opacity: 1; }
#mapSvg .dn { cursor: pointer; }
#mapSvg .dn circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; transition: fill .3s, stroke .3s, r .3s; }
#mapSvg .dn.first circle { fill: var(--ink); }
#mapSvg .dn text { font: 500 11px var(--f-mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#mapSvg .dn.first text { fill: var(--paper); }
#mapSvg .dn.on circle { fill: var(--sig2); stroke: var(--sig2); }
#mapSvg .dn.on text { fill: #fff; }
#mapSvg .halo { fill: none; stroke: var(--sig2); stroke-width: 1.4; opacity: .5; }
#mapSvg .flab { font: 500 11px var(--f-mono); letter-spacing: .1em; fill: var(--ink3); text-transform: uppercase; }
#mapSvg .flab.on { fill: var(--sig); }
#mapSvg .fl2 { font: italic 22px var(--f-serif); fill: var(--sig); }
#mapSvg .ctr { fill: var(--ink); }
#mapSvg .ctrt { font: italic 26px var(--f-serif); fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
#mapSvg .pulse-c { fill: none; stroke: var(--ink); opacity: .12; }
.dim-card { padding: 1.3rem; display: grid; gap: .8rem; align-content: start; }
.dim-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dim-top .fam { font-family: var(--f-mono); font-size: max(.68rem, 9.5px); letter-spacing: .09em; text-transform: uppercase; color: var(--sig); }
.dim-top .star { font-family: var(--f-mono); font-size: max(.62rem, 9px); letter-spacing: .08em; text-transform: uppercase; padding: .25em .6em; border-radius: 99px; background: var(--ink); color: var(--paper); }
.dim-top .star.no { background: var(--raised); color: var(--ink3); }
.dim-card h3 { font-size: 1.35rem; display: flex; gap: .55rem; align-items: baseline; }
.dim-card h3 .num { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--sig); font-size: 1.3em; }
.dim-card dl { margin: 0; display: grid; gap: .65rem; }
.dim-card dt { font-family: var(--f-mono); font-size: max(.64rem, 9px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.dim-card dd { margin: .1rem 0 0; color: var(--ink2); font-size: .96rem; line-height: 1.45; }
.dim-card dd.gt { color: var(--ink); font-weight: 500; }
.dim-card .anim { animation: dimIn .5s var(--ease) both; }
.dim-card .anim:nth-child(2) { animation-delay: .05s; } .dim-card .anim:nth-child(3) { animation-delay: .1s; }
@keyframes dimIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.dim-nav { display: flex; gap: .4rem; align-items: center; }
.dim-nav span { margin-left: auto; }

/* ---------- trust (dark slide) ---------- */
.slide.dark { background: var(--ink); color: var(--paper); }
.slide.dark .eyebrow, .slide.dark .tiny, .slide.dark .src { color: #9a9c95; }
.slide.dark h2 em { color: #f08a77; }
.trust-grid { grid-template-columns: minmax(0, 1fr); }
.trust-copy { display: grid; gap: 20px; }
.trust-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid #2c2f2b; border-bottom: 1px solid #2c2f2b; }
.trust-stat .n { font-size: 4rem; font-weight: 450; letter-spacing: -.05em; line-height: .9; color: #f08a77; font-variant-numeric: tabular-nums; }
.trust-stat p { color: #c9cac4; font-size: .95rem; }
.trust-so { color: #e6e7e1; font-size: 1.04rem; }
.loop-vis { width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 1; }
#loopSvg { width: 100%; height: 100%; overflow: visible; }
#loopSvg .track { fill: none; stroke: #2e312d; stroke-width: 2; }
#loopSvg .lit { fill: none; stroke: #f08a77; stroke-width: 2; stroke-linecap: round; }
#loopSvg .pt { fill: #f6c3b8; }
#loopSvg .nd rect { fill: #161917; stroke: #3a3d39; stroke-width: 1.2; transition: stroke .4s, fill .4s; }
#loopSvg .nd.on rect { stroke: #f08a77; fill: #241815; }
#loopSvg .nd text { font: 500 17px var(--f-sans); fill: #f2f2ec; text-anchor: middle; }
#loopSvg .nd .s { font: 500 10px var(--f-mono); letter-spacing: .1em; fill: #9a9c95; }
#loopSvg .ctr { font: italic 44px var(--f-serif); fill: #f2f2ec; text-anchor: middle; dominant-baseline: central; }
#loopSvg .ctr2 { font: 500 10px var(--f-mono); letter-spacing: .14em; fill: #9a9c95; text-anchor: middle; }

/* ---------- hypothesis ---------- */
.manifesto { font-size: 1.75rem; line-height: 1.15; font-weight: 480; letter-spacing: -.03em; max-width: 30ch; }
.manifesto em { color: var(--sig); }
.hyp-grid { display: grid; gap: 18px; }
.hyp-text { display: grid; gap: 16px; align-content: start; }
.hs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.h { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: grid; gap: .25rem; }
.h .k { font-family: var(--f-mono); font-size: max(.64rem, 9px); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.h b { font-size: .95rem; line-height: 1.3; }
.h p { font-size: .82rem; color: var(--ink3); line-height: 1.4; }
.h p span { font-family: var(--f-mono); font-size: max(.6rem, 9px); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); margin-right: .45em; }
.chart { padding: 1.1rem 1.2rem; display: grid; gap: .6rem; align-content: start; }
.chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.chart-h b { font-size: 1.1rem; }
#betChart { width: 100%; height: auto; overflow: visible; }
#betChart .grid { stroke: var(--line); }
#betChart .ax { stroke: var(--line2); }
#betChart .lbl { font: 500 11px var(--f-mono); fill: var(--ink3); }
#betChart .lv { fill: none; stroke: var(--sig2); stroke-width: 3; stroke-linecap: round; }
#betChart .lm { fill: none; stroke: var(--ink2); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
#betChart .ly { fill: none; stroke: var(--line2); stroke-width: 2; stroke-linecap: round; }
#betChart .area { fill: url(#areaG); }
#betChart .tick { fill: var(--sig2); }
.chart-key { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--ink2); }
.chart-key i { display: inline-block; width: 1.1rem; height: 3px; border-radius: 3px; vertical-align: middle; margin-right: .5rem; }
.chart-key i.v { background: var(--sig2); }
.chart-key i.m { background: repeating-linear-gradient(90deg, var(--ink2) 0 2px, transparent 2px 6px); }
.chart-key i.y { background: var(--line2); }
.chart-note { text-transform: none; letter-spacing: .01em; line-height: 1.45; }

/* ---------- theory ---------- */
.principles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem 1rem; }
.principles li { font-size: .86rem; color: var(--ink3); padding-top: .6rem; border-top: 2px solid var(--ink); }
.principles b { display: block; color: var(--ink); font-size: .92rem; }
.doc { padding: 1.2rem 1.3rem; display: grid; gap: .8rem; align-content: start; }
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.doc-top h3 { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 2rem; line-height: 1; }
.play { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line2); background: var(--paper); font-size: .7rem; flex: none; }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: 2px; background: var(--line); }
.timeline .fill { position: absolute; left: 0; top: .5rem; height: 2px; background: var(--sig2); transition: width .8s var(--ease); }
.timeline button { position: relative; background: none; border: 0; padding: 1.3rem 0 0; text-align: left; font-family: var(--f-mono); font-size: max(.66rem, 9.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.timeline button::before { content: ""; position: absolute; left: 0; top: .1rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2); transition: all .4s; }
.timeline button.past::before { background: var(--sig2); border-color: var(--sig2); }
.timeline button.cur { color: var(--ink); }
.timeline button.cur::before { box-shadow: 0 0 0 .3rem var(--sig-soft); }
.drows { display: grid; }
.drow { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 5.4rem; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); align-items: start; }
.drow .k { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; line-height: 1.1; color: var(--ink3); }
.drow .tx { position: relative; font-size: .88rem; color: var(--ink2); line-height: 1.4; display: grid; }
.drow .tx > span { grid-area: 1 / 1; }
.drow .old { text-decoration: line-through; text-decoration-color: var(--sig2); color: var(--ink3); animation: oldOut 1.6s var(--ease) forwards; }
@keyframes oldOut { 0%, 35% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.6rem); } }
.drow .new { animation: newIn 1.6s var(--ease) both; }
@keyframes newIn { 0%, 40% { opacity: 0; transform: translateY(.6rem); } 100% { opacity: 1; transform: none; } }
.drow .tag { display: inline-block; margin-left: .4em; font-family: var(--f-mono); font-size: max(.56rem, 8.5px); letter-spacing: .08em; text-transform: uppercase; padding: .1em .45em; border-radius: 99px; vertical-align: .15em; }
.drow .tag.changed { background: var(--sig-soft); color: var(--sig); }
.drow .tag.fading { background: var(--raised); color: var(--ink3); }
.drow .tag.new { background: var(--ok-soft); color: var(--ok); }
.drow.ch .k { color: var(--sig); }
.drow.fade .tx { opacity: .55; }
.cbar { display: grid; gap: .25rem; padding-top: .15rem; }
.cbar span { font-family: var(--f-mono); font-size: max(.6rem, 9px); color: var(--ink3); font-variant-numeric: tabular-nums; }
.cbar i { display: block; height: 4px; border-radius: 9px; background: var(--raised); overflow: hidden; }
.cbar b { display: block; height: 100%; background: var(--ink); border-radius: 9px; transition: width 1.2s var(--ease); }
.drow.ch .cbar b { background: var(--sig2); }
.dbets { display: grid; gap: .35rem; padding-top: .6rem; border-top: 1px solid var(--ink); }
.dbets .tiny { margin-bottom: .1rem; }
.betrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; font-size: .86rem; }
.betrow .p { font-family: var(--f-mono); font-size: max(.72rem, 9.5px); color: var(--ink2); }
.betrow .o { font-family: var(--f-mono); font-size: max(.6rem, 9px); letter-spacing: .06em; text-transform: uppercase; padding: .25em .6em; border-radius: 99px; white-space: nowrap; transition: all .5s; }
.betrow .o.yes { background: var(--ok-soft); color: var(--ok); }
.betrow .o.no { background: var(--sig-soft); color: var(--sig); }
.betrow .o.wait { background: var(--raised); color: var(--ink3); }
.betrow.flip .o { animation: flip .7s var(--ease); }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.dnote { font-size: .86rem; color: var(--ink2); padding: .6rem .8rem; border-radius: 10px; background: var(--raised); min-height: 3.2em; }
.dnote b { color: var(--sig); font-weight: 600; }

/* ---------- system ---------- */
.stepper { padding: 1rem 1.1rem; display: grid; gap: .45rem; }
.st-top { display: flex; justify-content: space-between; }
.st-who { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.st-who::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sig2); box-shadow: 0 0 0 .25rem var(--sig-soft); }
.st-txt { color: var(--ink2); font-size: .92rem; min-height: 4.2em; }
.st-ctrl { display: flex; align-items: center; gap: .4rem; }
.sdots { display: flex; gap: 4px; margin-left: auto; }
.sdots i { width: 1rem; height: 3px; border-radius: 9px; background: var(--line); transition: background .3s; }
.sdots i.on { background: var(--ink); }
.board { position: relative; display: grid; gap: .55rem; align-content: start; }
.flows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.flows path { fill: none; stroke: var(--sig2); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 5; opacity: .75; }
.flows circle { fill: var(--sig2); }
.lane { position: relative; z-index: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: .75rem; display: grid; gap: .55rem; box-shadow: var(--shadow); }
.lane-h { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.lane-h b { font-size: .92rem; }
.lane-h span { font-family: var(--f-mono); font-size: max(.62rem, 9px); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.node { position: relative; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: .55rem .7rem; display: grid; gap: .05rem; transition: border-color .4s, background .4s, box-shadow .4s, transform .4s var(--ease); }
.node b { font-size: .86rem; font-weight: 600; line-height: 1.25; transition: color .3s; }
.node span { font-size: .74rem; color: var(--ink3); line-height: 1.3; }
.node.core { background: var(--raised); }
.node.judge { border-style: dashed; border-color: var(--ok); }
.node.judge b { color: var(--ok); }
.node.future { border-style: dashed; }
.node.act { border-color: var(--sig2); background: #fff; box-shadow: 0 0 0 .22rem var(--sig-soft); transform: translateY(-2px); }
.node.act b { color: var(--sig); }

/* ---------- senses ---------- */
.sense-head { display: grid; gap: 14px; }
.sense-grid { display: grid; gap: 18px; }
.tracks { position: relative; padding: 1rem 1.1rem; overflow: hidden; }
.track { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .25rem .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.tl { font-family: var(--f-mono); font-size: max(.64rem, 9px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.tc { display: flex; align-items: center; gap: .7rem; min-height: 1.9rem; min-width: 0; }
.note { grid-column: 2; font-size: .8rem; color: var(--sig); font-weight: 500; opacity: 0; transform: translateX(-6px); transition: opacity .5s, transform .5s var(--ease); }
.track.on .note { opacity: 1; transform: none; }
.track .tc > * { opacity: .25; transition: opacity .6s; }
.track.on .tc > * { opacity: 1; }
.wave { display: flex; align-items: center; gap: 1.5px; height: 1.9rem; width: 100%; overflow: hidden; }
.wave i { flex: 1 1 0; min-width: 1px; max-width: 4px; border-radius: 2px; background: var(--ink2); height: var(--h); }
.wave i.hot { background: var(--sig2); }
.wave i.gap { background: var(--line); }
.pill { padding: .3em .8em; border-radius: 99px; background: var(--sig-soft); border: 1px solid rgba(211, 63, 44, .35); color: var(--sig); font-size: .84rem; white-space: nowrap; }
.ink { font-family: var(--f-serif); font-size: 1.35rem; }
.ink s { text-decoration-color: var(--lost); text-decoration-thickness: 2px; color: var(--ink3); }
.ink span { color: var(--ok); }
.stuck { width: min(12rem, 55%); height: .55rem; border-radius: 99px; background: var(--raised); overflow: hidden; }
.stuck b { display: block; height: 100%; width: 0; background: var(--half); border-radius: 99px; transition: width 2.2s var(--ease); }
.track.on .stuck b { width: 62%; }
.days { display: flex; gap: .45rem; }
.days i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--ink2); }
.days i.x { background: transparent; border: 2px solid var(--lost); }
.verdict { display: grid; gap: .15rem; padding-top: .7rem; opacity: .2; transition: opacity .8s; }
.verdict.on { opacity: 1; }
.verdict b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--sig2); opacity: 0; box-shadow: 0 0 18px 6px rgba(211, 63, 44, .12); }
.surface { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.phone { width: 12.5rem; aspect-ratio: 9 / 18; border-radius: 2rem; background: var(--ink); padding: .5rem; box-shadow: 0 30px 60px -34px rgba(13, 15, 14, .6); }
.scr { height: 100%; border-radius: 1.55rem; background: var(--paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.pbar { display: flex; justify-content: space-between; padding: .9rem .9rem .3rem; font-family: var(--f-mono); font-size: max(.58rem, 8.5px); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.pbar span:last-child { color: var(--sig); }
.pstage { position: relative; }
.mode { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94); filter: blur(4px); transition: opacity .55s, transform .55s var(--ease), filter .55s; }
.mode.on { opacity: 1; transform: none; filter: none; }
.mode svg { width: 94%; }
.wv rect { fill: var(--ink); transform-origin: center; transform-box: fill-box; animation: wv 1.1s ease-in-out infinite alternate; }
@keyframes wv { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ps { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.pa { fill: none; stroke: var(--sig2); stroke-width: 2.5; stroke-linecap: round; }
.pfa { fill: var(--sig2); } .pfo { fill: var(--ok); }
.pt { font: 600 17px var(--f-sans); fill: var(--ink); }
.pt2 { font: 400 10.5px var(--f-sans); fill: var(--ink2); }
.mode.on .draw { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 1.4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.psay { margin: .45rem; padding: .6rem .7rem; border-radius: .9rem; background: var(--raised); font-size: .74rem; line-height: 1.35; min-height: 4.4em; }
.psay b { display: block; font-family: var(--f-mono); font-size: max(.56rem, 8.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); font-weight: 500; }
.modes { display: grid; gap: .35rem; }
.modes button { text-align: left; padding: .5rem .75rem; border-radius: 11px; border: 1px solid var(--line); background: var(--card); display: grid; transition: border-color .25s, box-shadow .25s; }
.modes b { font-size: .86rem; }
.modes button span { font-size: .76rem; color: var(--ink3); }
.modes button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- learning anything: orbit ---------- */
.travels { display: grid; gap: .5rem; }
.tchips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tchips span { font-size: .8rem; padding: .3em .75em; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); color: var(--ink2); }
.orbit { position: relative; height: 32rem; }
.orbit-core { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 50; width: 11.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-content: center; text-align: center; gap: .25rem; padding: 1.4rem; box-shadow: 0 0 0 .6rem rgba(13, 15, 14, .05), 0 0 0 1.4rem rgba(13, 15, 14, .03), 0 30px 60px -30px rgba(13, 15, 14, .6); }
.orbit-core .tiny { color: #a4a59f; }
.orbit-core b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 2.1rem; line-height: 1; }
.orbit-core .oc-sub { font-size: .72rem; color: #c9cac4; line-height: 1.35; }
.olines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.olines line { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 5; }
.olines line.on { stroke: var(--sig2); stroke-width: 1.6; stroke-dasharray: none; }
.olines .spark { fill: var(--sig2); }
.ochip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: .5em; padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: .92rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow); will-change: transform, opacity; transform-origin: 50% 50%; transition: background .4s, color .4s, border-color .4s; }
.ochip i { font-family: var(--f-serif); font-style: normal; color: var(--sig); }
.ochip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ochip.on i { color: #f3a493; }
.subj-card { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(32rem, 100%); padding: 1rem 1.2rem; display: grid; gap: .55rem; z-index: 95; }
.sc-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.sc-h b { font-size: 1.15rem; }
.sc-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.sc-b p { font-size: .88rem; color: var(--ink2); line-height: 1.4; }
.sc-b p span { display: block; font-family: var(--f-mono); font-size: max(.58rem, 8.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); margin-bottom: .15rem; }
.subj-card .anim { animation: dimIn .5s var(--ease) both; }

/* ---------- beyond ---------- */
.gpts { display: grid; gap: .5rem; }
.gpt { text-align: left; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); opacity: .6; transition: opacity .3s, border-color .3s, box-shadow .3s; display: grid; gap: .15rem; }
.gpt.on { opacity: 1; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gpt span { font-size: .88rem; color: var(--ink2); }
.beyond-right { display: grid; gap: .7rem; }
.gbox { aspect-ratio: 1.45 / 1; overflow: hidden; padding: 0; }
.gbox canvas { width: 100%; height: 100%; }
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.use { background: var(--card); padding: .6rem .7rem; display: grid; gap: .05rem; }
.use .k { font-family: var(--f-mono); font-size: max(.56rem, 8.5px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.use b { font-size: .86rem; }
.use.first { background: var(--ink); color: var(--paper); }
.use.first .k { color: #f3a493; }

/* ---------- future ---------- */
.future-head { display: grid; gap: 14px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.fcard { position: relative; padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: .45rem; align-content: start; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.fcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(13, 15, 14, .45); }
.fcard .fn { font-family: var(--f-serif); font-style: italic; font-size: 2.6rem; line-height: .9; color: var(--line2); }
.fcard .when { font-family: var(--f-mono); font-size: max(.62rem, 9px); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.fcard h3 { font-size: 1.12rem; }
.fcard p:not(.when) { font-size: .86rem; color: var(--ink2); line-height: 1.45; }
.fcard.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fcard.dark .fn { color: #4a4d49; }
.fcard.dark .when { color: #f3a493; }
.fcard.dark p:not(.when) { color: #c9cac4; }
.fcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sig2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.fcard:hover::after { transform: scaleX(1); }

/* ---------- research ---------- */
.res-grid { display: grid; gap: 18px; }
.qs { display: grid; gap: .55rem; }
.qs li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; padding: .85rem 1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.qn { font-family: var(--f-serif); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--sig); }
.qs b { font-size: 1rem; }
.qs p { font-size: .86rem; color: var(--ink2); line-height: 1.45; margin-top: .1rem; }
.dims { display: inline-block; margin-top: .35rem; font-family: var(--f-mono); font-size: max(.6rem, 9px); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.res-side { display: grid; gap: .7rem; align-content: start; }
.exists { padding: 1.1rem 1.2rem; display: grid; gap: .6rem; }
.exists ul { display: grid; gap: .5rem; }
.exists li { font-size: .86rem; color: var(--ink2); line-height: 1.4; }
.exists li b { display: block; color: var(--ink); font-size: .92rem; }
.exists .open { font-size: .84rem; padding-top: .6rem; border-top: 1px dashed var(--line2); color: var(--ink); font-weight: 500; }
.guard { display: flex; flex-wrap: wrap; gap: .35rem; }
.guard span { font-size: .76rem; padding: .3em .7em; border-radius: 99px; background: var(--raised); color: var(--ink2); }

/* ---------- close ---------- */
.close .inner { align-content: space-between; }
.close-main { display: grid; gap: 18px; justify-items: start; }
.close-main h2 { max-width: 20ch; }
.close-main .lede { max-width: 58ch; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.contact span { font-family: var(--f-mono); font-size: .92rem; overflow-wrap: anywhere; }
.foot { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.brand-line { font-size: .86rem; color: var(--ink2); }
.brand-links { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-left: auto; }
.brand-links a { font-size: .84rem; color: var(--ink2); text-decoration: none; }
.brand-links a:hover { color: var(--sig); }
@media (max-width: 639px) { .brand-links { margin-left: 0; } }
.sources { font-size: .8rem; color: var(--ink2); }
.sources summary { cursor: pointer; font-family: var(--f-mono); font-size: max(.68rem, 9.5px); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.sources ol { margin-top: .5rem; padding-left: 1.2rem; list-style: decimal; display: grid; gap: .15rem; columns: 1; }

/* ---------- tablet flow tweaks ---------- */
@media (min-width: 640px) and (max-width: 999px), (min-width: 1000px) and (max-aspect-ratio: 5/4), (min-width: 1000px) and (max-height: 539px) {
  .two, .map-grid, .trust-grid, .hyp-grid, .res-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .map-head { grid-column: 1 / -1; }
  .hs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nodes.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nodes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .face-stage { height: min(60svh, 600px); }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use.first { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .principles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .surface { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .modes { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modes button:last-child { grid-column: 1 / -1; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use.first { grid-column: 1 / -1; }
  #mapSvg .dn circle { r: 18px; }
  #mapSvg .dn text { font-size: 15px; }
  #mapSvg .flab { font-size: 19px; }
  #mapSvg .fl2 { font-size: 32px; }
  #mapSvg .ctrt { font-size: 34px; }
  #mapSvg .halo { stroke-width: 2.4; }
  .map-vis { max-width: none; }
  .drow { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .drow .cbar { grid-column: 2; }
  .orbit { height: auto; display: grid; gap: 12px; }
  .orbit-core { position: relative; left: auto; top: auto; transform: none; width: 100%; aspect-ratio: auto; border-radius: 18px; padding: 1.2rem; }
  .olines { display: none; }
  .ochips { display: flex; flex-wrap: wrap; gap: .4rem; }
  .ochip { position: relative; transform: none !important; opacity: 1 !important; font-size: .86rem; box-shadow: none; }
  .subj-card { position: relative; left: auto; bottom: auto; transform: none; width: 100%; }
  .fgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 14px; scrollbar-width: none; }
  .fgrid::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 78%; scroll-snap-align: center; }
  .trust-stat .n { font-size: 3.2rem; }
  .map-vis { max-width: 400px; }
  .dialog .who { padding-right: 6rem; }
}

/* ======================================================================
   DESKTOP DECK
   ====================================================================== */
@media (min-width: 1000px) and (min-height: 540px) and (min-aspect-ratio: 5/4) {
  html { font-size: clamp(10.5px, min(1.04vw, 1.86vh), 28px); }
  :root { --nav: 3.7rem; --gut: 3.4rem; --h1: 4.6rem; --h2: 3rem; --lede: 1.16rem; --tiny: .7rem; --r: 1.1rem; }
  body { font-size: 1rem; }
  .nav { gap: 1.4rem; }
  .deck > .slide { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-top: 0; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -2.2rem 4rem -3rem rgba(13, 15, 14, .45); }
  .deck > .slide:first-child { border-radius: 0; box-shadow: none; }
  .slide .inner { height: 100%; max-width: 92rem; padding: calc(var(--nav) + 1.6rem) var(--gut) 2rem; align-content: center; gap: 1.6rem; will-change: transform, opacity; transform-origin: 50% 0; }
  .two { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
  .two.wide-right { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 3.4rem; }
  .col-text { gap: 1.2rem; }

  /* hero */
  .hero { display: block; }
  .hero .inner { padding-top: calc(var(--nav) + 1rem); }
  .hero-copy { width: 44%; gap: 1.35rem; }
  .hero h1 { font-size: 5rem; }
  .hero .lede { max-width: 36rem; }
  .face-stage { position: absolute; margin: 0; top: 0; right: 0; bottom: 0; width: 56%; height: auto; overflow: visible; }
  .face-stage canvas { top: var(--nav); height: calc(100% - var(--nav)); }
  .dialog { left: 4%; right: auto; bottom: 2.6rem; width: 25rem; max-width: 46%; }
  .ring .nd .lab { font-size: 11px; }

  /* problem */
  .ladder { padding: 1.6rem 1.8rem; }
  .rung { grid-template-columns: 11rem minmax(0, 1fr) 10.5rem; gap: 1.4rem; padding: 1.05rem 0; }
  .bar { grid-column: auto; grid-row: auto; }

  /* learning */
  .facts { gap: 1.1rem; }
  .room { padding: 1.5rem; }

  /* map */
  .map-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: 2.2rem; align-items: center; }
  .map-head { gap: 1.1rem; }
  .map-head .lede { font-size: 1.05rem; }
  .map-vis { max-width: none; width: min(100%, calc(100svh - var(--nav) - 6rem), 40rem); aspect-ratio: 1; }
  .dim-card { padding: 1.5rem; }

  /* trust */
  .trust-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; align-items: center; }
  .trust-copy { gap: 1.5rem; }
  .split.big { font-size: 3.3rem; }
  .trust-stat .n { font-size: 5rem; }
  .loop-vis { max-width: none; height: min(36rem, calc(100svh - var(--nav) - 6rem)); width: auto; }

  /* hypothesis */
  .manifesto { font-size: 2.7rem; max-width: 34ch; }
  .hyp-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 2.6rem; align-items: start; }
  .hs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* system */
  .nodes.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nodes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board { gap: .7rem; }
  .lane { padding: .85rem .9rem; }

  /* senses */
  .sense-head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: end; }
  .sense-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
  .track { grid-template-columns: 4rem minmax(0, 1fr) 13.5rem; gap: 1rem; padding: .6rem 0; }
  .note { grid-column: auto; padding-left: .8rem; border-left: 2px solid var(--sig2); }
  .phone { width: 12rem; }

  /* anything */
  .orbit { height: min(36rem, calc(100svh - var(--nav) - 6rem)); }

  /* beyond */
  .gbox { aspect-ratio: 1.6 / 1; }

  /* future */
  .future-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: end; }
  .fgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
  .fcard { padding: 1.3rem 1.2rem 1.4rem; min-height: 17rem; }

  /* research */
  .res-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: start; }

  /* close */
  .close .inner { padding-bottom: 1.4rem; }
  .close-main h2 { font-size: 3.6rem; }
  .sources ol { columns: 2; column-gap: 2rem; display: block; }
  .sources li { break-inside: avoid; margin-bottom: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seat, .wv rect { animation: none; }
}