/* ============================================================================
   Coflow — coflow.stream
   ----------------------------------------------------------------------------
   The page is not a scroll. It is one orbital system: a core at dead centre,
   five nodes riding the ring, and a deck that unfolds beside the core when a
   node is chosen. Ceramic stone throughout (ContextStream Ceramic palette).

   Layout contract — why text can never overlap here:
     · The universe is a CSS grid. Stage and deck each own a column/row.
       They cannot occupy the same space.
     · Nodes are placed by polar transform at r = 0.42·size and stack their
       label BELOW the dot, so a label always moves away from the core.
     · The core is a circle of 0.44·size. Node dots sit at 0.42·size from
       centre — outside the core's 0.22·size radius, by construction.
   ========================================================================= */

:root {
  /* paper */
  --paper:      #e6e3dc;
  --paper-2:    #dfdcd5;
  --paper-3:    #dbd8d1;
  --paper-card: #f5f2ec;
  --paper-lift: #faf8f2;

  /* ink */
  --ink:      #22282b;
  --ink-soft: #3c4347;
  --muted:    #596066;
  --faint:    #6b716e;

  --line:        #cfccc4;
  --line-strong: #b8b4ab;
  --line-soft:   #dedbd4;

  /* accents, tuned for ivory */
  /* brand — measured from assets/coflowlogo.png */
  --navy:         #22282b;
  --violet-soft:  #48a294;   /* filament tint, reads against the navy stroke */

  --violet:       #24564c;   /* the crescent on the logo's "o" */
  --violet-deep:  #1c443c;
  --violet-pale:  #dfeee9;
  --violet-wash:  rgba(36, 86, 76, .08);
  --violet-ring:  rgba(36, 86, 76, .3);

  --cyan-deep: #48a294;
  --cyan-pale: #dfeee9;
  --blue-deep: #2b6a92;
  --blue-pale: #dfe8ec;
  --green:     #3fa48f;
  --amber:     #8a5a2c;
  --red:       #c2593a;

  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:  "DM Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 26px;

  --sh-1: 0 1px 2px rgba(38, 32, 20, .05), 0 8px 24px -10px rgba(38, 32, 20, .16);
  --sh-2: 0 2px 6px rgba(38, 32, 20, .06), 0 28px 64px -22px rgba(38, 32, 20, .3);
  --sh-3: 0 3px 10px rgba(38, 32, 20, .07), 0 60px 120px -40px rgba(38, 32, 20, .38);
  --sh-violet: 0 1px 2px rgba(38, 32, 20, .1), 0 16px 40px -14px rgba(36, 86, 76, .55);

  --topbar-h: 68px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
code, kbd, pre { font-family: var(--mono); }
::selection { background: var(--violet-pale); color: var(--violet-deep); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  transform: translateY(-160%);
  border-radius: 8px; background: var(--violet); color: #fff;
  padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- paper */
.paper {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.paper-bloom { position: absolute; border-radius: 50%; filter: blur(110px); }
.paper-bloom--violet {
  width: 76vmin; height: 76vmin; top: -26vmin; left: 50%; margin-left: -38vmin;
  background: radial-gradient(circle, rgba(36, 86, 76, .14), rgba(36, 86, 76, .04) 48%, transparent 72%);
  animation: bloom-a 34s ease-in-out infinite alternate;
}
.paper-bloom--cyan {
  width: 58vmin; height: 58vmin; bottom: -22vmin; left: -14vmin;
  background: radial-gradient(circle, rgba(14, 148, 143, .1), transparent 70%);
  animation: bloom-b 40s ease-in-out infinite alternate;
}
@keyframes bloom-a { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
@keyframes bloom-b { from { transform: translate3d(0, 0, 0) scale(1); }      to { transform: translate3d(9%, -6%, 0) scale(1.12); } }

/* No horizon rule: at 50% it cuts straight through the orbit and reads as an
   artefact. The field stays pure paper + bloom + grain. */
.paper-rule { display: none; }
.paper-grain {
  position: absolute; inset: -50%; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 20px;
  padding-inline: clamp(18px, 3.4vw, 38px);
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.topbar.is-lifted {
  background: rgba(230, 227, 220, .8);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}

/* The lockup is the logo — mark and wordmark are drawn together, so it is used
   as one image rather than reconstructed from a glyph plus a webfont. */
.brand { display: inline-flex; align-items: center; }
/* The updated artwork is relatively taller (3.03:1 vs the previous 3.67:1),
   so it needs more height to read at the same wordmark size. */
.brand-lockup { width: auto; height: 31px; }
.footer-brand .brand-lockup { height: 36px; }

.topbar-meta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--faint);
}
.topbar-meta a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); }
.topbar-meta a:hover { color: var(--violet); border-color: var(--violet-ring); }
.topbar-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--green); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 164, 143, .4); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 164, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 164, 143, 0); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 99px;
  font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  padding: 12px 22px; font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.btn--lg { padding: 15px 30px; font-size: 15.5px; }

.btn--solid { background: var(--violet); color: #fff; box-shadow: var(--sh-violet); }
.btn--solid:hover { background: var(--violet-deep); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(38,32,20,.1), 0 22px 48px -14px rgba(100,62,220,.6); }
.btn--solid:active { transform: translateY(0); }

.btn--quiet { background: var(--paper-lift); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-1); }
.btn--quiet:hover { border-color: var(--violet-ring); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ============================================================================
   THE UNIVERSE
   ========================================================================= */
.universe {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--topbar-h);
}

/* ---------------------------------------------------------------- stage */
.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 2.8vh, 32px);
  min-height: calc(100dvh - var(--topbar-h));
  padding: clamp(18px, 3vh, 34px) clamp(20px, 4vw, 44px);
  text-align: center;
  transition: gap .5s cubic-bezier(.2,.7,.3,1);
}

.stage-lead, .stage-tail {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 940px;
  transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.3,1);
}

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; border-radius: 99px;
  background: var(--paper-lift); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-1);
  font-size: 13px; color: var(--muted);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kicker:hover { border-color: var(--violet-ring); transform: translateY(-1px); box-shadow: var(--sh-2); }
.kicker-pulse { width: 7px; height: 7px; border-radius: 99px; background: var(--cyan-deep); animation: pulse 2.6s ease-out infinite; }
.kicker b { padding: 4px 11px; border-radius: 99px; background: var(--violet-pale); color: var(--violet-deep); font-size: 12.5px; font-weight: 700; }

.display {
  font-size: clamp(31px, 4.6vw, 54px);
  line-height: 1.03;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
  max-width: 24ch;
}
.display em {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.02em;
  color: var(--violet);
  font-size: 1.06em;
}

.lede { font-size: clamp(15.5px, 1.5vw, 17.5px); color: var(--muted); max-width: 82ch; text-wrap: pretty; }

.proof {
  display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--faint);
}
.proof span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.proof b { font-weight: 700; color: var(--ink-soft); font-size: 13px; }
.proof b + b::before { content: "·"; color: var(--line-strong); margin-right: 16px; }

/* ---------------------------------------------------------------- orbit */
.orbit {
  /* Sized against viewport HEIGHT as well as width, so the whole composition —
     headline, orbit, lede, proof — lands inside one screen without scrolling. */
  --size: min(47vh, 80vw, 440px);
  position: relative;
  width: var(--size); height: var(--size);
  flex: none;
  transition: width .55s cubic-bezier(.2,.7,.3,1), height .55s cubic-bezier(.2,.7,.3,1);
}
.orbit-plate {
  position: absolute; inset: 0;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

/* ---- the dial ----------------------------------------------------------
   Everything lives in one 400×400 SVG so ticks, rings and links share a
   coordinate system and stay in register at any size. */
.dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* soft well, no hard edge — replaces the old plate and its visible seam */
.dial-well { fill: url(#well); }

/* Graduation drawn as a dashed stroke: stroke-width is the tick LENGTH
   (radial), the dash is its WIDTH (tangential). 60 minor at r104, 12 major
   at r101 — both dash patterns divide the circumference exactly, so there is
   no seam where the ring closes. Kept inside the node orbit so tick marks and
   node dots never occupy the same band. */
.tick { fill: none; }
.tick--minor { stroke: rgba(38, 32, 20, .2);  stroke-width: 5; stroke-dasharray: 1.2 9.6908; }
.tick--major { stroke: rgba(38, 32, 20, .32); stroke-width: 9; stroke-dasharray: 1.6 51.2834; }

.dial-ring { fill: none; stroke-width: 1; }
.dial-ring--outer { stroke: rgba(38, 32, 20, .16); }
.dial-ring--inner { stroke: rgba(38, 32, 20, .09); stroke-dasharray: 2 6; animation: spin 190s linear infinite; transform-origin: 200px 200px; }

/* one long arc riding a gradient — a relay listening, not a broken stroke */
.dial-sweep {
  fill: none; stroke: url(#sweep); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 150 906;
  transform-origin: 200px 200px;
  animation: spin 20s linear infinite;
}
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }

/* ---- signed events arriving at the relay -------------------------------
   Each link is a faint rule with a short bright dash travelling node → core.
   That is literally what the product does, so it is the one thing animated. */
.link  { fill: none; stroke: rgba(38, 32, 20, .12); stroke-width: 1; }
.event {
  fill: none; stroke: var(--violet); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 7 200;
  stroke-dashoffset: 0;
  animation: send 2.8s cubic-bezier(.45, 0, .2, 1) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes send {
  0%       { stroke-dashoffset: 0;   opacity: 0; }
  12%      { opacity: 1; }
  62%, 100% { stroke-dashoffset: -104; opacity: 0; }
}

/* Hovering a surface shows that surface's traffic to the relay intensify;
   the selected surface keeps a lit line. Driven by data-hot / data-on which
   app.js sets on the plate. */
.orbit-plate[data-hot] .event { opacity: .25; }
.orbit-plate[data-hot="room"]   .event--room,
.orbit-plate[data-hot="memory"] .event--memory,
.orbit-plate[data-hot="agents"] .event--agents,
.orbit-plate[data-hot="trust"]  .event--trust,
.orbit-plate[data-hot="start"]  .event--start {
  opacity: 1;
  stroke-width: 3.2;
  animation-duration: 1.05s;
  animation-delay: 0s;
}
.orbit-plate[data-hot="room"]   .link--room,
.orbit-plate[data-hot="memory"] .link--memory,
.orbit-plate[data-hot="agents"] .link--agents,
.orbit-plate[data-hot="trust"]  .link--trust,
.orbit-plate[data-hot="start"]  .link--start,
.orbit-plate[data-on="room"]    .link--room,
.orbit-plate[data-on="memory"]  .link--memory,
.orbit-plate[data-on="agents"]  .link--agents,
.orbit-plate[data-on="trust"]   .link--trust,
.orbit-plate[data-on="start"]   .link--start {
  stroke: var(--violet-ring);
  stroke-width: 1.4;
}

/* the core acknowledging arrivals */
.dial-receive {
  fill: none; stroke: var(--violet); stroke-width: 1.2;
  transform-origin: 200px 200px;
  animation: receive 2.8s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes receive {
  0%, 44% { transform: scale(.62); opacity: 0; }
  56%     { opacity: .5; }
  100%    { transform: scale(1); opacity: 0; }
}

/* ---- nodes: polar placement, label always radially outward-safe ---- */
.orbit-nodes { position: absolute; inset: 0; }
.node {
  position: absolute; left: 50%; top: 50%;
  width: 132px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translate(calc(var(--size) * .42))
    rotate(calc(-1 * var(--a)));
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.node-dot {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-1);
  color: var(--muted);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s, background .28s, color .28s;
}
.node-dot svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.node-label { display: flex; flex-direction: column; gap: 1px; transition: color .28s; }
.node-label b { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.node-label small { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; color: var(--faint); white-space: nowrap; }

.node:hover .node-dot,
.node:focus-visible .node-dot {
  transform: scale(1.12);
  border-color: var(--violet-ring);
  color: var(--violet);
  box-shadow: var(--sh-2);
}
.node[aria-selected="true"] .node-dot {
  background: var(--violet); color: #fff; border-color: transparent;
  box-shadow: var(--sh-violet);
  transform: scale(1.1);
}
.node[aria-selected="true"] .node-label b { color: var(--violet-deep); }

/* ---- core ---- */
.core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--size) * .44);
  height: calc(var(--size) * .44);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: radial-gradient(circle at 50% 34%, var(--paper-lift), var(--paper-card) 70%, var(--paper-2));
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: width .55s cubic-bezier(.2,.7,.3,1), height .55s cubic-bezier(.2,.7,.3,1);
}
/* The Coflow mark at scale. `mark-flow` is a thinner purple filament riding the
   same path inside the navy stroke — the logo's own accent, in motion.
   Path length ≈ 677 (segments 116.3, 149.4, 145.5, 149.4, 116.3). */
.core-mark { position: relative; width: auto; height: clamp(42px, 30%, 72px); overflow: visible; }
.mark-body, .mark-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark-body { stroke: var(--navy); stroke-width: 34; }
.mark-flow {
  stroke: var(--violet-soft); stroke-width: 11;
  stroke-dasharray: 74 603;
  animation: mark-flow 4.6s linear infinite;
}
@keyframes mark-flow { from { stroke-dashoffset: 677; } to { stroke-dashoffset: 0; } }
.core-line {
  position: relative;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.btn--core { position: relative; padding: 10px 20px; font-size: 13.5px; }
/* Lives under the orbit, not inside the core — at focus size the core circle
   has no room for a second control. */
.core-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 8px 16px; border-radius: 99px;
  background: var(--paper-lift); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-1);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted);
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.core-back:hover { color: var(--violet); border-color: var(--violet-ring); transform: translateY(-1px); box-shadow: var(--sh-2); }
.core-back[hidden] { display: none; }

/* ---------------------------------------------------------------- deck */
.deck { display: none; }
.panel { display: none; }

/* ============================================================================
   FOCUS STATE — the universe collapses left, the deck unfolds beside it
   ========================================================================= */
@media (min-width: 1080px) {
  .universe[data-state="focus"] {
    grid-template-columns: minmax(340px, 30vw) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 56px);
    padding-inline: clamp(20px, 3.4vw, 44px) ;
    align-items: start;
  }
  .universe[data-state="focus"] .stage {
    position: sticky;
    top: var(--topbar-h);
    min-height: calc(100dvh - var(--topbar-h));
    padding-inline: 0;
    gap: 0;
  }
  .universe[data-state="focus"] .orbit { --size: min(30vw, 360px); }
  .universe[data-state="focus"] .stage-lead,
  .universe[data-state="focus"] .stage-tail {
    opacity: 0; transform: translateY(10px);
    height: 0; overflow: hidden; pointer-events: none;
  }
  .universe[data-state="focus"] .deck { display: block; padding-block: clamp(40px, 7vh, 96px) 96px; }
}

.universe[data-state="focus"] .panel[data-active] { display: block; }

/* ---------------------------------------------------------------- panels */
.panel {
  max-width: 940px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
  animation: panel-in .55s cubic-bezier(.2,.7,.3,1);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(18px); } }

.panel-head { max-width: 640px; margin-bottom: 34px; }
.panel-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 16px;
}
.eyebrow span {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--paper-lift);
  color: var(--violet); font-size: 10.5px;
}

.panel h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: var(--ink);
  text-wrap: balance;
}
.panel h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--violet); font-size: 1.08em; letter-spacing: -.015em;
}
.panel-lede { margin-top: 18px; font-size: 16.5px; color: var(--muted); text-wrap: pretty; }
.panel-caption {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 18px; font-size: 13px; color: var(--faint);
}
.live, .live-dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--green); flex: none;
  animation: pulse 2.6s ease-out infinite;
}

/* ---------------------------------------------------------------- product window */
.product-window {
  border-radius: var(--radius-lg);
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.window-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  background: linear-gradient(180deg, var(--paper-card), var(--paper-2));
  border-bottom: 1px solid var(--line);
}
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 10px; height: 10px; border-radius: 99px; background: var(--line-strong); }
.window-dots i:nth-child(1) { background: #c2593a; }
.window-dots i:nth-child(2) { background: #a07430; }
.window-dots i:nth-child(3) { background: #3fa48f; }
.window-title {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: -.01em;
}
.window-title img { border-radius: 5px; }
.window-title span { color: var(--faint); font-weight: 500; }
.window-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap;
}
.window-status i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }

.workspace-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 226px; min-height: 430px; }

.workspace-sidebar { border-right: 1px solid var(--line); background: var(--paper-card); padding: 14px 10px; }
.workspace-switcher { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
.workspace-avatar {
  width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--violet), var(--blue-deep)); color: #fff; font-weight: 800; font-size: 13px;
}
.workspace-switcher > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.workspace-switcher b { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.workspace-switcher small { font-size: 10.5px; color: var(--faint); }

.side-group { margin-top: 6px; }
.side-group p {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); padding: 12px 8px 6px;
}
.side-group span {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: var(--muted);
}
.side-group span > i { font-style: normal; color: var(--faint); width: 14px; text-align: center; flex: none; }
.side-group span.is-active { background: var(--violet-pale); color: var(--violet-deep); font-weight: 700; box-shadow: inset 2px 0 0 var(--violet); }
.side-group span.is-active > i { color: var(--violet); }
.side-group span b { margin-left: auto; font-size: 10px; background: var(--violet); color: #fff; padding: 1px 6px; border-radius: 99px; }
.agent-dot {
  width: 18px !important; height: 18px; border-radius: 6px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; color: #fff; font-style: normal;
}
.agent-dot--cyan { background: var(--cyan-deep); }
.agent-dot--blue { background: var(--blue-deep); }
.agent-dot--violet { background: var(--violet); }
.side-group span em.live { margin-left: auto; }

.side-context {
  display: flex; align-items: center; gap: 9px; margin: 16px 6px 0;
  padding: 10px; border-radius: 12px;
  background: var(--violet-pale); border: 1px solid var(--violet-ring);
}
.context-glyph { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 14px; flex: none; }
.side-context > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.side-context b { font-size: 12px; font-weight: 700; color: var(--violet-deep); }
.side-context small { font-size: 10px; color: var(--muted); }

.room-panel { display: flex; flex-direction: column; min-width: 0; }
.room-header { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.room-header b { display: block; font-size: 14px; color: var(--ink); letter-spacing: -.02em; }
.room-header span { font-size: 11.5px; color: var(--faint); }
.room-people { margin-left: auto; display: flex; align-items: center; }
.room-people span {
  width: 22px; height: 22px; border-radius: 99px; margin-left: -6px;
  display: grid; place-items: center; font-size: 9px; font-weight: 800;
  background: var(--line-strong); color: var(--ink); border: 1.5px solid var(--paper-lift);
}
.room-people span.is-agent { background: linear-gradient(140deg, var(--cyan-deep), var(--blue-deep)); color: #fff; }
.room-people b { margin-left: 6px; font-size: 10.5px; color: var(--faint); }

.room-feed { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.feed-message { display: flex; gap: 11px; }
.feed-avatar {
  width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, #8f8b82, #55594f);
}
.feed-avatar--cyan { background: linear-gradient(140deg, var(--cyan-deep), #24564c); }
.feed-avatar--blue { background: linear-gradient(140deg, var(--blue-deep), #205069); }
.feed-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.feed-meta b { font-weight: 700; color: var(--ink); }
.feed-meta time { font-size: 10.5px; color: var(--faint); }
.agent-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; padding: 2px 5px; border-radius: 4px;
  background: var(--cyan-pale); color: var(--cyan-deep); border: 1px solid rgba(14, 148, 143, .28);
}
.feed-message p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.evidence-stack {
  margin-top: 10px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--violet-ring);
  background: linear-gradient(180deg, var(--violet-pale), var(--paper-lift));
}
.evidence-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid var(--violet-ring);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep);
}
.evidence-head span { display: inline-flex; align-items: center; gap: 7px; }
.evidence-head i { width: 6px; height: 6px; border-radius: 99px; background: var(--violet); }
.evidence-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-top: 1px solid rgba(38, 32, 20, .05);
}
.evidence-row:first-of-type { border-top: 0; }
.evidence-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.evidence-row b { font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-row small { font-size: 10.5px; color: var(--faint); }
.evidence-row em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); flex: none; }

.entity {
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; font-weight: 500;
  padding: 3.5px 6px; border-radius: 4px; flex: none; text-align: center;
}
.entity--decision { background: rgba(157, 108, 8, .11);  color: var(--amber); }
.entity--lesson   { background: rgba(194, 89, 58, .1);   color: var(--red); }
.entity--code     { background: rgba(43, 106, 146, .1);  color: var(--blue-deep); }
.entity--runbook  { background: rgba(63, 164, 143, .1);   color: var(--green); }
.entity--session  { background: var(--violet-pale);      color: var(--violet); }

.workflow-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(157, 108, 8, .06); border: 1px solid rgba(157, 108, 8, .24);
}
.workflow-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--amber); color: #fff; flex: none; }
.workflow-copy { display: flex; flex-direction: column; }
.workflow-copy span { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.workflow-copy b { font-size: 12.5px; color: var(--ink); }
.workflow-steps { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.workflow-steps span { font-size: 10.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--paper-lift); }
.workflow-steps span.is-done { color: var(--green); border-color: rgba(63, 164, 143, .3); }
.workflow-steps span.is-waiting { background: var(--amber); color: #fff; border-color: transparent; font-weight: 700; }
.workflow-steps i { width: 10px; height: 1px; background: var(--line-strong); }

.composer {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 14px 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--paper-card); border: 1px solid var(--line);
}
.composer span { color: var(--faint); }
.composer p { flex: 1; font-size: 12.5px; color: var(--faint); }
.composer kbd { font-size: 10px; color: var(--faint); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; }

.activity-panel { border-left: 1px solid var(--line); background: var(--paper-card); padding: 14px 13px; display: flex; flex-direction: column; gap: 12px; }
.activity-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.activity-head b { color: var(--green); }
.activity-agent { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; background: var(--paper-lift); border: 1px solid var(--line); }
.agent-orbit { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.activity-agent div { display: flex; flex-direction: column; min-width: 0; }
.activity-agent b { font-size: 12px; color: var(--ink); }
.activity-agent small { font-size: 10px; color: var(--faint); }
.activity-live { margin-left: auto; width: 7px; height: 7px; border-radius: 99px; background: var(--green); animation: pulse 2.6s ease-out infinite; }

.activity-list { display: flex; flex-direction: column; gap: 2px; }
.activity-list li { display: flex; gap: 9px; padding: 7px 8px; border-radius: 9px; transition: background .3s; }
.activity-list li > i {
  font-style: normal; width: 16px; height: 16px; border-radius: 99px; flex: none; margin-top: 2px;
  display: grid; place-items: center; font-size: 9px;
  border: 1px solid var(--line-strong); color: var(--faint); background: var(--paper-lift);
}
.activity-list li.is-complete > i { background: var(--green); border-color: transparent; color: #fff; }
.activity-list li.is-active { background: var(--violet-pale); }
.activity-list li.is-active > i { border-color: var(--violet); border-top-color: transparent; animation: spin .8s linear infinite; }
.activity-list span { display: flex; flex-direction: column; min-width: 0; }
.activity-list b { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.activity-list small { font-size: 10px; color: var(--faint); }

.activity-diff { margin-top: auto; padding: 10px; border-radius: 10px; background: var(--paper-lift); border: 1px solid var(--line); }
.activity-diff > span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.activity-diff b { color: var(--green); }
.activity-diff em { font-style: normal; color: var(--red); }
.diff-bars { display: flex; gap: 3px; margin: 7px 0; }
.diff-bars i { height: 6px; flex: 1; border-radius: 2px; background: var(--green); }
.diff-bars i:nth-child(4) { background: var(--red); }
.diff-bars i:nth-child(5) { background: var(--line-strong); }
.activity-diff small { font-size: 9.5px; color: var(--faint); }

/* ---------------------------------------------------------------- triad + equation */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.triad-card {
  padding: 24px; border-radius: var(--radius);
  background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.triad-card:hover { transform: translateY(-4px); border-color: var(--violet-ring); box-shadow: var(--sh-2); }
.triad-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.triad-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint); }
.triad-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--violet-pale); color: var(--violet); font-size: 15px; }
.triad-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.triad-card > p { margin-top: 9px; font-size: 14px; color: var(--muted); }
.triad-card ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.triad-card li { position: relative; padding-left: 20px; font-size: 13px; color: var(--muted); }
.triad-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--violet); opacity: .5;
}

.equation {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px;
  margin-top: 24px; padding: 24px; border-radius: var(--radius);
  background: var(--paper-2); border: 1px solid var(--line);
}
.equation > div { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.equation span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--faint); }
.equation b { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.equation i { font-style: normal; font-family: var(--serif); font-size: 22px; color: var(--line-strong); }
.equation-result span { color: var(--violet); }
.equation-result b { color: var(--violet-deep); }

/* ---------------------------------------------------------------- memory */
.memory-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .95fr); gap: 22px; align-items: start; }

.memory-console {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-lift); border: 1px solid var(--line-strong); box-shadow: var(--sh-2);
}
.console-topbar {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: linear-gradient(180deg, var(--paper-card), var(--paper-2)); border-bottom: 1px solid var(--line);
}
.console-topbar b { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.console-topbar em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; }

.memory-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper-card); flex-wrap: wrap; }
.memory-tabs button {
  padding: 7px 15px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.memory-tabs button:hover { color: var(--ink); background: var(--paper-2); }
.memory-tabs button.is-active { background: var(--violet); color: #fff; box-shadow: var(--sh-violet); }

.memory-panel { padding: 18px; animation: panel-in .4s cubic-bezier(.2,.7,.3,1); }
.panel-command {
  display: flex; gap: 9px; padding: 11px 13px; border-radius: 10px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.panel-command span { color: var(--violet); }
.panel-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.panel-status i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }
.panel-status span { color: var(--green); }

.context-result { margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.context-result-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--paper-card); border-bottom: 1px solid var(--line);
}
.context-result-head b { font-size: 12px; color: var(--ink); }
.context-result-head span { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.context-result article { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.context-result article:first-of-type { border-top: 0; }
.context-result p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.context-result b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.context-result small { font-size: 10.5px; color: var(--faint); }
.context-result em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--violet); flex: none; }
.panel-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--faint); }
.panel-foot span {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: var(--violet-pale); color: var(--violet-deep); font-size: 10px; font-weight: 700;
}

.search-mode { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.search-mode span { padding: 3px 8px; border-radius: 5px; background: var(--violet); color: #fff; letter-spacing: .08em; }
.search-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.search-results article { padding: 12px; border-radius: 11px; background: var(--paper-card); border: 1px solid var(--line); }
.search-results b { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.search-results span { display: block; font-family: var(--mono); font-size: 10px; color: var(--violet); margin-top: 3px; }
.search-results p { margin-top: 6px; font-size: 12px; color: var(--muted); }

.graph-header { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.graph-header span { font-size: 13px; font-weight: 700; color: var(--ink); }
.graph-header b { font-family: var(--mono); font-size: 10px; color: var(--faint); font-weight: 500; }
.graph-canvas { position: relative; margin-top: 12px; border-radius: 12px; background: var(--paper-card); border: 1px solid var(--line); overflow: hidden; }
.graph-canvas svg { width: 100%; height: auto; }
.graph-canvas path { stroke: var(--line-strong); stroke-width: 1.4; fill: none; stroke-dasharray: 3 5; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.graph-canvas circle { fill: var(--paper-lift); stroke-width: 1.6; }
.node-core    { fill: var(--violet-pale); stroke: var(--violet); }
.node-code    { stroke: var(--blue-deep); }
.node-lesson  { stroke: var(--red); }
.node-runbook { stroke: var(--green); }
.node-test    { stroke: var(--amber); }
.node-file    { stroke: var(--line-strong); }
.graph-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.25; text-align: center; color: var(--ink-soft);
  pointer-events: none;
}
.graph-label--core    { left: 50%;  top: 48.3%; color: var(--violet-deep); font-weight: 500; }
.graph-label--code    { left: 22.8%; top: 26.3%; }
.graph-label--lesson  { left: 18.7%; top: 76%; }
.graph-label--runbook { left: 76.8%; top: 22.7%; }
.graph-label--test    { left: 82%;  top: 75.3%; }

.handoff-card { padding: 22px; border-radius: 14px; background: linear-gradient(180deg, var(--violet-pale), var(--paper-lift)); border: 1px solid var(--violet-ring); }
.handoff-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--violet); color: #fff; font-size: 18px; }
.handoff-kicker { display: block; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-deep); }
.handoff-card h3 { margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.handoff-card > p { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.handoff-scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.handoff-scope span { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 99px; background: var(--paper-lift); border: 1px solid var(--line-strong); color: var(--muted); }
.handoff-link { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 9px 9px 13px; border-radius: 10px; background: var(--paper-lift); border: 1px solid var(--line-strong); }
.handoff-link code { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.handoff-link button { padding: 6px 13px; border-radius: 99px; background: var(--violet); color: #fff; font-size: 11.5px; font-weight: 700; }
.handoff-policy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11px; color: var(--faint); }
.handoff-policy span { display: inline-flex; align-items: center; gap: 6px; }
.handoff-policy i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }

.memory-points { display: flex; flex-direction: column; gap: 12px; }
.memory-points > div { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.memory-points > div > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--violet-pale); color: var(--violet); font-size: 15px; flex: none; }
.memory-points p { display: flex; flex-direction: column; gap: 4px; }
.memory-points b { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.memory-points small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--violet); }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -3px); }

/* ---------------------------------------------------------------- agents */
.runtime-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px; }
.runtime {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 16px 10px; border-radius: var(--radius);
  background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.runtime:hover { transform: translateY(-3px); border-color: var(--violet-ring); }
.runtime-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--paper-2); color: var(--muted); font-size: 14px; font-weight: 800;
}
.runtime-mark--amber  { background: rgba(157, 108, 8, .12);  color: var(--amber); }
.runtime-mark--green  { background: rgba(63, 164, 143, .12);  color: var(--green); }
.runtime-mark--blue   { background: var(--blue-pale);        color: var(--blue-deep); }
.runtime-mark--violet { background: var(--violet-pale);      color: var(--violet); }
.runtime b { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.runtime small { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }

.agents-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.agent-features { display: flex; flex-direction: column; gap: 12px; }
.agent-feature { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.agent-feature > span { font-family: var(--mono); font-size: 11px; color: var(--violet); flex: none; padding-top: 2px; }
.agent-feature h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.agent-feature p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

.activity-demo { border-radius: var(--radius-lg); background: var(--paper-lift); border: 1px solid var(--line-strong); box-shadow: var(--sh-2); overflow: hidden; }
.activity-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-card); }
.activity-demo-head > div { display: flex; align-items: center; gap: 10px; }
.activity-demo-head p { display: flex; flex-direction: column; }
.activity-demo-head b { font-size: 13px; color: var(--ink); }
.activity-demo-head small { font-size: 10.5px; color: var(--faint); }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; background: rgba(63, 164, 143, .1); color: var(--green); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.live-pill i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); animation: pulse 2.6s ease-out infinite; }

.activity-demo-body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.activity-event { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; }
.activity-event > span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; flex: none;
  font-size: 11px; border: 1px solid var(--line-strong); color: var(--faint); background: var(--paper-card);
}
.activity-event.is-done > span { background: var(--green); border-color: transparent; color: #fff; }
.activity-event.is-running { background: var(--violet-pale); }
.activity-event.is-running > span { border-color: var(--violet); border-top-color: transparent; animation: spin .8s linear infinite; }
.activity-event p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.activity-event b { font-size: 13px; font-weight: 700; color: var(--ink); }
.activity-event small { font-size: 11px; color: var(--faint); }
.activity-event time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; }
.activity-demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper-card); font-size: 12px; }
.activity-demo-foot span { color: var(--ink); font-weight: 700; }
.activity-demo-foot b { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--faint); }

/* ---------------------------------------------------------------- trust */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-card { padding: 24px; border-radius: var(--radius); background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; }
.trust-card:hover { transform: translateY(-4px); border-color: var(--violet-ring); box-shadow: var(--sh-2); }
.trust-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--violet-pale); color: var(--violet); font-size: 16px; }
.trust-label { margin-top: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--faint); }
.trust-card h3 { margin-top: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.24; }
.trust-card > p { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.trust-line { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 12px; border-radius: 10px; background: var(--paper-card); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.trust-line code { color: var(--ink-soft); }
.trust-line i { font-style: normal; margin-left: auto; color: var(--green); }
.trust-line i.live { margin-left: 0; }
.trust-line--scope i { margin-left: 0; color: var(--line-strong); }
.trust-line--scope span { color: var(--violet); }

.architecture {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0;
  margin-top: 26px; padding: 26px 22px; border-radius: var(--radius-lg);
  background: var(--paper-2); border: 1px solid var(--line);
  position: relative;
}
.arch-node { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 18px 12px; border-radius: 14px; background: var(--paper-lift); border: 1px solid var(--line); }
.arch-node span { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--faint); }
.arch-node b { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.arch-node small { font-size: 10.5px; color: var(--faint); }
.arch-node--core { border-color: var(--violet-ring); background: var(--violet-pale); }
.arch-node--core span, .arch-node--core b { color: var(--violet-deep); }
.arch-node--memory { border-color: rgba(14, 148, 143, .32); background: var(--cyan-pale); }
.arch-node--memory span, .arch-node--memory b { color: var(--cyan-deep); }
.arch-flow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; }
/* flex:1 collapses to nothing inside an `auto` grid track — give the rules a
   real width so the connection actually reads. */
.arch-flow i { flex: none; width: 20px; height: 1px; background: var(--line-strong); }
.arch-flow span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

/* the flows live between the nodes: 4 nodes + 3 flows = 7 columns */
.architecture { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }

/* ---------------------------------------------------------------- start */
.panel--start { text-align: center; }
.start-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.start-note { margin-top: 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--faint); }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; text-align: left; }
.start-grid > div { padding: 20px; border-radius: var(--radius); background: var(--paper-lift); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.start-grid b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.start-grid small { display: block; margin-top: 7px; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ============================================================================
   SHOWCASE — the app, below the dial. Native scroll-snap so trackpad and touch
   momentum come free; JS only drives the dots, arrows and keyboard.
   ========================================================================= */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  transition: color .2s;
}
.scroll-cue:hover { color: var(--violet); }
.scroll-cue span {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--violet), transparent);
  animation: cue 2.4s cubic-bezier(.4, 0, .3, 1) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* the deck owns the screen while a node is open */
#universe[data-state="focus"] ~ .showcase { display: none; }

.showcase { position: relative; z-index: 1; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.showcase-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px, 4vw, 46px); padding-inline: 24px; }
.showcase-head .eyebrow { justify-content: center; }
.showcase-head h2 {
  font-size: clamp(27px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -.035em;
  font-weight: 800; color: var(--ink); text-wrap: balance;
}
.showcase-head em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--violet); font-size: 1.08em; letter-spacing: -.015em;
}

.showcase-rail {
  display: flex; gap: clamp(16px, 2.4vw, 30px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 6px var(--edge) 12px;
  --edge: max(24px, calc((100vw - min(1000px, 88vw)) / 2));
  scrollbar-width: none;
}
.showcase-rail::-webkit-scrollbar { display: none; }
.showcase-rail:focus-visible { outline-offset: -3px; }

/* Fade the peeked neighbours out rather than letting the viewport guillotine
   them. Only where there is peek room: the fade ends at 11% (158px at 1440)
   and the centred slide starts at 220px, so it is never touched. */
@media (min-width: 1100px) {
  .showcase-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  }
}

.slide { flex: 0 0 min(1000px, 88vw); scroll-snap-align: center; }

/* neighbours sit back until they are the one being read */
.slide .app { transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s, box-shadow .5s; }
.showcase-rail:not(.no-peek) .slide:not(.is-current) .app {
  transform: scale(.955); opacity: .5;
}
.slide.is-current .app { box-shadow: var(--sh-3); }

.slide-cap {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-inline: 4px;
  font-size: 14px; color: var(--muted);
  opacity: 0; transition: opacity .4s;
}
.slide.is-current .slide-cap { opacity: 1; }
.slide-cap b {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet);
}

/* ---- controls ---- */
.showcase-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.sc-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px;
  background: var(--paper-lift); border: 1px solid var(--line-strong); box-shadow: var(--sh-1);
  color: var(--ink-soft);
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s, opacity .2s;
}
.sc-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-arrow:hover:not(:disabled) { color: var(--violet); border-color: var(--violet-ring); transform: translateY(-2px); box-shadow: var(--sh-2); }
.sc-arrow:disabled { opacity: .35; cursor: default; }

.sc-dots { display: flex; align-items: center; gap: 8px; }
.sc-dot {
  width: 8px; height: 8px; border-radius: 99px; padding: 0;
  background: var(--line-strong);
  transition: background .25s, width .25s;
}
.sc-dot[aria-selected="true"] { background: var(--violet); width: 26px; }

/* ============================================================================
   THE APP FRAME — structure follows the real desktop client: search / inbox /
   agents rail, channel header with a Context control, composer.
   ========================================================================= */
.app {
  border-radius: var(--radius-lg);
  background: var(--paper-lift);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2);
  overflow: hidden;
  position: relative;
}
.app-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: linear-gradient(180deg, var(--paper-card), var(--paper-2));
  border-bottom: 1px solid var(--line);
}
.app-lights { display: flex; gap: 6px; }
.app-lights i { width: 9px; height: 9px; border-radius: 99px; }
.app-lights i:nth-child(1) { background: #c2593a; }
.app-lights i:nth-child(2) { background: #a07430; }
.app-lights i:nth-child(3) { background: #3fa48f; }
.app-name {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-soft);
}
.app-spacer { width: 40px; }

.app-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); height: clamp(360px, 42vw, 470px); }
.app-body--ctx { grid-template-columns: 158px minmax(0, 1fr) 220px; }
.app-body--dim .app-main { background: var(--paper-card); }

/* rail */
.app-rail { border-right: 1px solid var(--line); background: var(--paper-card); padding: 11px 9px; display: flex; flex-direction: column; gap: 2px; }
.rail-search {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  padding: 7px 9px; border-radius: 9px;
  background: var(--paper-lift); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--faint);
}
.rail-search span { color: var(--muted); }
.rail-search kbd { margin-left: auto; font-size: 9px; color: var(--dim, var(--faint)); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 4px; }
.rail-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 12px; color: var(--muted); }
.rail-item > span { width: 13px; text-align: center; color: var(--faint); flex: none; }
.rail-item.is-on { background: var(--violet-pale); color: var(--violet-deep); font-weight: 700; }
.rail-item.is-on > span { color: var(--violet); }
.rail-item em { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700; background: var(--violet); color: #fff; padding: 1px 6px; border-radius: 99px; }
.rail-head { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); padding: 12px 9px 5px; }
.pip { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 9px; font-weight: 800; font-style: normal; color: #fff; flex: none; }
.pip--cyan { background: var(--cyan-deep); }
.pip--blue { background: var(--blue-deep); }
.rail-me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 7px 2px; border-top: 1px solid var(--line); }
.rail-me i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; font-style: normal; color: #fff; background: linear-gradient(140deg, var(--violet), var(--blue-deep)); flex: none; }
.rail-me span { display: flex; flex-direction: column; min-width: 0; }
.rail-me b { font-size: 11.5px; color: var(--ink); }
.rail-me small { font-size: 9.5px; color: var(--faint); }

/* main */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.app-head > b { font-size: 13.5px; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.app-head-sub { font-size: 11px; color: var(--faint); border-left: 1px solid var(--line-strong); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chip { margin-left: auto; font-size: 10.5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--paper-lift); white-space: nowrap; flex: none; }
.app-chip--ctx { color: var(--violet-deep); border-color: var(--violet-ring); background: var(--violet-pale); font-weight: 700; }
.app-chip--ctx.is-open { background: var(--violet); color: #fff; border-color: transparent; }
.app-head .app-chip ~ .app-chip { margin-left: 0; }

.app-scroll { flex: 1; padding: 13px 15px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.app-scroll--pad { gap: 14px; }

.am { display: flex; gap: 10px; }
.am-av { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; color: #fff; background: linear-gradient(140deg, #8f8b82, #55594f); }
.am-av--cyan { background: linear-gradient(140deg, var(--cyan-deep), #24564c); }
.am-av--blue { background: linear-gradient(140deg, var(--blue-deep), #205069); }
.am-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.am-meta b { font-weight: 700; color: var(--ink); }
.am-meta time { font-size: 9.5px; color: var(--faint); }
.am-tag { font-style: normal; font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; padding: 2px 4px; border-radius: 3px; background: var(--cyan-pale); color: var(--cyan-deep); border: 1px solid rgba(14,148,143,.28); }
.am p { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.am-ev { margin-top: 8px; border-radius: 10px; border: 1px solid var(--violet-ring); background: linear-gradient(180deg, var(--violet-pale), var(--paper-lift)); overflow: hidden; }
.am-ev-h { display: flex; align-items: center; gap: 6px; padding: 6px 10px !important; border-bottom: 1px solid var(--violet-ring); font-family: var(--mono); font-size: 8.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep) !important; }
.am-ev-h i { width: 5px; height: 5px; border-radius: 99px; background: var(--violet); }
.am-ev-h b { margin-left: auto; font-weight: 500; }
.am-ev > p { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px !important; border-top: 1px solid rgba(38,32,20,.05); }
.am-ev > p:nth-of-type(2) { border-top: 0; }
.am-flow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(157,108,8,.06); border: 1px solid rgba(157,108,8,.24); }
.am-flow i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--amber); color: #fff; font-style: normal; flex: none; }
.am-flow span { display: flex; flex-direction: column; }
.am-flow b { font-size: 11.5px; color: var(--ink); font-family: var(--mono); font-weight: 500; }
.am-flow small { font-size: 10px; color: var(--muted); }
.am-flow em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: 99px; background: var(--amber); color: #fff; }

.app-composer { display: flex; align-items: center; gap: 9px; margin: 0 13px 13px; padding: 9px 11px; border-radius: 10px; background: var(--paper-card); border: 1px solid var(--line); }
.app-composer span { color: var(--faint); font-size: 12px; }
.app-composer p { flex: 1; font-size: 11.5px; color: var(--faint); }
.app-composer kbd { font-size: 9px; color: var(--faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; }

/* agents page */
.ag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ag-card { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 14px 8px; border-radius: 12px; background: var(--paper-card); border: 1px solid var(--line); }
.ag-card b { font-size: 12px; color: var(--ink); }
.ag-card small { font-size: 9.5px; color: var(--faint); }
.ag-card em { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: var(--faint); padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-strong); margin-top: 2px; }
.ag-card em.ag-live { color: var(--green); border-color: rgba(63,164,143,.32); }
.ag-face { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 800; font-style: normal; color: #fff; background: var(--line-strong); flex: none; }
.ag-face--cyan { background: linear-gradient(140deg, var(--cyan-deep), #24564c); }
.ag-face--blue { background: linear-gradient(140deg, var(--blue-deep), #205069); }
.ag-face--violet { background: linear-gradient(140deg, var(--violet), var(--violet-deep)); }
.ag-card--add { justify-content: center; border-style: dashed; color: var(--faint); }
.ag-card--add span { font-size: 20px; color: var(--dim, var(--faint)); }
.ag-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.ag-team { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--paper-card); border: 1px solid var(--line); }
.ag-stack { display: flex; }
.ag-stack .ag-face { width: 28px; height: 28px; font-size: 11px; margin-left: -8px; border: 2px solid var(--paper-card); }
.ag-stack .ag-face:first-child { margin-left: 0; }
.ag-team span:nth-of-type(2) { display: flex; flex-direction: column; }
.ag-team b { font-size: 12.5px; color: var(--ink); }
.ag-team small { font-size: 10px; color: var(--faint); }
.ag-team em { margin-left: auto; }

/* command palette */
.palette {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(560px, 78%);
  border-radius: 16px; overflow: hidden;
  background: var(--paper-lift); border: 1px solid var(--line-strong);
  box-shadow: 0 4px 12px rgba(38,32,20,.1), 0 60px 120px -30px rgba(38,32,20,.45);
}
.palette-field { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.palette-field span { color: var(--faint); }
.palette-field p { flex: 1; display: flex; align-items: center; font-size: 14px; color: var(--ink); }
.cursor { width: 1.5px; height: 15px; background: var(--violet); margin-left: 2px; animation: blink 1.06s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.palette-field kbd { font-size: 9px; color: var(--faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px; }
.palette-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); padding: 9px 15px 4px; }
.palette-row { display: flex; align-items: center; gap: 10px; padding: 8px 15px; }
.palette-row b { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-row em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--violet); }
.palette-row:first-of-type { background: var(--violet-pale); }
.palette-row--act span { width: 20px; text-align: center; color: var(--violet); }

/* docked context panel */
.app-ctx { border-left: 1px solid var(--line); background: var(--paper-card); padding: 11px 10px; display: flex; flex-direction: column; gap: 8px; }
.app-ctx-h { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-deep); }
.app-ctx-h i { width: 5px; height: 5px; border-radius: 99px; background: var(--violet); }
.app-ctx-h em { margin-left: auto; font-style: normal; color: var(--faint); letter-spacing: .06em; }
.app-ctx-list { display: flex; flex-direction: column; gap: 6px; }
.app-ctx-list a { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 9px; background: var(--paper-lift); border: 1px solid var(--line); }
.app-ctx-list .entity { align-self: flex-start; }
.app-ctx-list b { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.app-ctx-list small { font-size: 9.5px; color: var(--faint); }
.app-ctx-f { margin-top: auto; font-size: 9.5px; color: var(--faint); }

@media (max-width: 900px) {
  .app-body, .app-body--ctx { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 340px; }
  .app-rail, .app-ctx { display: none; }
  .ag-grid { grid-template-columns: repeat(2, 1fr); }
  .palette { width: 88%; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 52px clamp(20px, 4vw, 44px) 30px;
}
.footer-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 40px; max-width: 1240px; margin-inline: auto; padding-bottom: 40px; }
.footer-brand p { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 34ch; }
.footer-brand > span { display: block; margin-top: 10px; font-size: 12.5px; color: var(--faint); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.footer-links div { display: flex; flex-direction: column; gap: 9px; }
.footer-links b { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; font-weight: 500; }
.footer-links a { font-size: 13.5px; color: var(--muted); width: max-content; transition: color .2s; }
.footer-links a:hover { color: var(--violet); }
.footer-base {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1240px; margin-inline: auto; padding-top: 22px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint);
}
.footer-domain { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); letter-spacing: .06em; color: var(--muted); }
.footer-domain i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); }

/* ============================================================================
   RESPONSIVE — below 1080px the universe stacks: orbit on top, deck beneath.
   Still one grid, so still no overlap.
   ========================================================================= */
@media (max-width: 1079px) {
  .universe[data-state="focus"] .stage {
    min-height: 0;
    padding-bottom: 8px;
    gap: 18px;
  }
  .universe[data-state="focus"] .orbit { --size: min(70vw, 320px); }
  .universe[data-state="focus"] .stage-lead,
  .universe[data-state="focus"] .stage-tail { display: none; }
  .universe[data-state="focus"] .deck { display: block; padding: 8px clamp(20px, 4vw, 44px) 80px; }
  .panel { margin-inline: auto; }
}

@media (max-width: 980px) {
  .workspace-grid { grid-template-columns: 1fr; min-height: 0; }
  .workspace-sidebar, .activity-panel { display: none; }
  .memory-layout, .agents-layout { grid-template-columns: 1fr; }
  .triad, .trust-grid, .start-grid { grid-template-columns: 1fr; }
  .runtime-row { grid-template-columns: repeat(2, 1fr); }
  .equation { grid-template-columns: 1fr; gap: 12px; }
  .equation i { display: none; }
  .architecture { grid-template-columns: 1fr; gap: 10px; }
  .arch-flow { padding: 2px 0; }
  .arch-flow i { max-width: 40px; }
  .footer-main { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
  .topbar-meta { display: none; }
  /* The kicker's trailing chip wraps the pill onto two lines at this width. */
  .kicker b { display: none; }
  .kicker { padding: 7px 15px; }
  .orbit { --size: min(84vw, 380px); }
  .node { width: 84px; }
  .node-dot { width: 40px; height: 40px; }
  .node-label b { font-size: 12px; }
  .node-label small { display: none; }
  .proof b:nth-of-type(n+4) { display: none; }
  .runtime-row { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .orbit { --size: min(90vw, 330px); }
  .node { width: 68px; }
  .node-label b { font-size: 11px; }
  .runtime-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   NO JAVASCRIPT — the universe becomes a plain document. Every panel renders.
   ========================================================================= */
html:not(.js) .deck { display: block; padding: 40px clamp(20px, 4vw, 44px) 90px; }
html:not(.js) .panel { display: block; max-width: 1000px; margin: 0 auto 90px; }
html:not(.js) .core-back { display: none; }
html:not(.js) .node { pointer-events: none; }

/* ============================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .orbit-plate { transform: none !important; }
  /* With the animation frozen these would render as a dashed overlay on the
     strands and a stalled pulse on the links — hide them rather than leave
     the mark looking broken. The dial stays; only the motion goes. */
  .mark-flow, .event, .dial-receive { display: none; }
}