/* ============================================================
   Null Space — homepage
   Brand LOCKED: #6E8BFF family, deep-space voids, SF Pro/Mono.

   One stylesheet, one philosophy: premium is performance.
   No scroll-scrubbing, no perpetual animation loops, no big
   blur() filters, no blend-mode layers. Everything that moves
   is a one-shot transform/opacity transition or a small,
   pausable keyframe. The camera moves only when the visitor
   moves it — never once per frame, never on its own.
   ============================================================ */

:root {
  --void-deep:   #030409;
  --void:        #06070D;
  --panel:       #0C0E16;
  --panel-2:     #11141F;
  --panel-hi:    #181C2A;

  --hair:        rgba(255,255,255,0.06);
  --hair-2:      rgba(255,255,255,0.10);
  --hair-3:      rgba(255,255,255,0.16);

  --text:        #ECEFF7;
  --text-2:      #97A0B6;
  --text-3:      #5A6276;

  /* BRAND — locked */
  --accent:        #6E8BFF;
  --accent-bright: #8FB4FF;
  --accent-glow:   #5A7CFF;
  --accent-deep:   #3D55C9;
  --accent-rgb:        110,139,255;
  --accent-bright-rgb: 143,180,255;
  --accent-deep-rgb:   61,85,201;
  --accent-soft:   rgba(var(--accent-rgb),0.14);
  --accent-line:   rgba(var(--accent-rgb),0.30);

  --success: #5BE0A8;
  --warning: #FFC56E;
  --danger:  #FF7A8A;

  --atmo-glow: 1;

  --font-ui: "SF Pro Display", "SF Pro Rounded", ui-rounded, -apple-system,
             BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --announce-h: 42px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);   /* expo-ish out — the house easing */
}
html[data-announce="0"] { --announce-h: 0px; }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   author rule that sets display (a flex row, a grid card, a fixed overlay)
   silently un-hides it. Everything JS toggles on this site is toggled with the
   attribute, so it has to win. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  background: var(--void-deep);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(var(--accent-rgb),0.32); color: #fff; }

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

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--accent-line);
  font-size: 0.9rem; color: var(--text);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ============================================================
   ANNOUNCE — one line of news above the nav, dismissable
   ============================================================ */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--announce-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 52px;
  background: rgba(8,10,17,0.86);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--hair);
}
html[data-announce="0"] .announce { display: none; }
.announce-link {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 0.82rem; color: var(--text-2);
  white-space: nowrap; transition: color .2s;
}
.announce-link:hover { color: var(--text); }
.announce-link svg { flex: none; transition: transform .3s var(--ease-out); }
.announce-link:hover svg { transform: translateX(3px); }
.announce-t { overflow: hidden; text-overflow: ellipsis; }
.announce-t--short { display: none; }
.a-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 10px 2px rgba(91,224,168,0.75);
}
@media (prefers-reduced-motion: no-preference) {
  .a-dot { animation: pulse-dot 1.8s var(--ease) infinite; }
}
.announce-x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-3);
  font: 400 17px/1 var(--font-ui); cursor: pointer;
  transition: color .2s, background .2s;
}
.announce-x:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ============================================================
   AMBIENT COSMOS — static layers, zero per-frame cost
   ============================================================ */
.bg-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

.bg-nebula { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% -20%, #0B0E1A 0%, transparent 55%),
    var(--void-deep);
}
/* soft falloff painted directly into the gradient — no blur() filter */
.neb { position: absolute; border-radius: 50%; opacity: calc(0.42 * var(--atmo-glow)); }
.neb--1 { width: 1080px; height: 1080px; top: -480px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.26) 0%, rgba(var(--accent-rgb),0.10) 36%, transparent 70%); }
.neb--2 { width: 880px; height: 880px; top: 52%; right: -360px;
  background: radial-gradient(circle, rgba(var(--accent-deep-rgb),0.20) 0%, rgba(var(--accent-deep-rgb),0.08) 38%, transparent 70%); }

/* orbital rings — the brand motif, drifting behind the hero */
.bg-orbits {
  position: fixed; top: 50%; left: 50%; z-index: -1; pointer-events: none;
  width: min(1180px, 150vmin); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}
.bg-orbits::before {
  content: ""; position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.15) 0%, rgba(var(--accent-rgb),0.06) 42%, transparent 70%);
}
.orbit { position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.10); }
.orbit--a { width: 100%; height: 100%; }
.orbit--b { width: 70%; height: 70%; border-color: rgba(var(--accent-rgb),0.14); }
.orbit--c { width: 44%; height: 44%; border-color: rgba(var(--accent-bright-rgb),0.18); }
.orbit .sat { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 14px 2px rgba(var(--accent-bright-rgb),0.8); }
@media (prefers-reduced-motion: no-preference) {
  .orbit--a { animation: spin 80s linear infinite; }
  .orbit--b { animation: spin 56s linear infinite reverse; }
  .orbit--c { animation: spin 38s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   TYPE PRIMITIVES — poster display vs terminal micro-labels
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-bright);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent-line); }

.h2 {
  font-weight: 660; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  text-wrap: balance;
}
.h-display {
  font-weight: 680; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  text-wrap: balance;
}
.grad {
  background: linear-gradient(110deg, var(--accent-bright) 0%, #C7D6FF 45%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   BUTTONS — weight, sheen, a 1px lift; nothing that lags
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 560; letter-spacing: -0.005em;
  transition: box-shadow .35s var(--ease), background .3s,
              border-color .3s, transform .3s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--primary {
  color: #060810;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-glow));
  box-shadow: 0 0 0 1px rgba(var(--accent-bright-rgb),0.35), 0 10px 36px rgba(var(--accent-rgb),0.35);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(var(--accent-bright-rgb),0.55), 0 14px 48px rgba(var(--accent-rgb),0.5); }
/* sheen — a light band sweeps the primary button once per hover */
.btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.5) 50%, transparent 68%);
  transform: translateX(-160%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(160%); }
.btn--ghost {
  color: var(--text); border: 1px solid var(--hair-3);
  background: rgba(255,255,255,0.02);
}
.btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.btn--sm { padding: 8px 18px; font-size: 0.86rem; }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--gut);
  border-bottom: 1px solid transparent;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled {
  padding-block: 11px;
  background: rgba(6,7,13,0.72);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.brand-name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--text-2); font-size: 0.9rem; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.nav-account { color: var(--text); }
.nav-cta { margin-left: 0; }
.nav-toggle { display: none; }
/* the header CTA has no room once the bar collapses — this one rides
   inside the sheet instead, and stays out of the way until then */
.nav-sheet-cta { display: none; }

/* dropdown menus — hover or focus on desktop, click everywhere */
.nav-item { position: relative; display: inline-flex; }
.nav-drop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--text-2);
  transition: color .2s;
}
.nav-item:hover .nav-drop, .nav-drop:focus-visible,
.nav-item[data-open="1"] .nav-drop { color: var(--text); }
.nav-drop svg { width: 9px; height: 6px; transition: transform .25s var(--ease); }
.nav-item:hover .nav-drop svg,
.nav-item[data-open="1"] .nav-drop svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 240px; padding: 8px; border-radius: 14px;
  background: rgba(10,12,20,0.92); border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .3s var(--ease-out);
}
/* invisible bridge so the pointer can cross the gap without closing it */
.nav-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu,
.nav-item[data-open="1"] .nav-menu {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 9px;
  transition: background .2s;
}
.nav-menu a:hover { background: var(--accent-soft); }
.nav-menu .nm-t { font-size: 0.88rem; font-weight: 540; color: var(--text); white-space: nowrap; }
.nav-menu .nm-s { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }

/* ============================================================
   ACT I · HERO — a left-set poster; the canvas peeks below the fold
   ============================================================ */
@keyframes pulse-dot { 50% { opacity: 0.35; } }

.act-hero {
  position: relative;
  min-height: min(68svh, 680px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(clamp(84px, 11vh, 124px) + var(--announce-h)) var(--gut) clamp(26px, 4vh, 46px);
}
.hero-core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  gap: 20px; width: 100%; max-width: 1280px; margin-inline: auto;
}
/* brand + category line — the one place both spellings and the
   category term live above the fold, for people and for crawlers */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.022);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.hero-eyebrow b { color: var(--text); font-weight: 620; letter-spacing: 0.1em; }
.hero-eyebrow i { font-style: normal; color: var(--text-3); }
.hero-title {
  font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(2.55rem, 5.9vw, 5.3rem);
}
.ht-line { display: block; overflow: hidden; padding-block: 0.06em; }
.ht-w { display: inline-block; }

.hero-sub {
  color: var(--text-2); font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.55; max-width: 60ch; text-wrap: pretty;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.hero-note { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); }

/* the CTA swaps by device class, decided before the first paint — a phone is
   offered the link-to-my-Mac form, never an account it can't use */
.cta-phone { display: none; }
html[data-device="phone"] .cta-phone { display: inline-flex; }
html[data-device="phone"] .cta-wide { display: none; }

/* ── proof strip: the only numbers on this page that need no trust ── */
.proof {
  list-style: none; display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 10px 26px; padding: 0; margin-top: 4px;
}
.proof-i {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 15px; position: relative;
}
.proof-i::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: linear-gradient(var(--accent-line), transparent);
}
.proof-i b { font-size: 0.86rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.proof-i b a { border-bottom: 1px solid var(--accent-line); }
.proof-i b a:hover { color: var(--accent-bright); }
.proof-i span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
}
.proof-i--who a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; }
.proof-i--who .proof-ava {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 640;
  letter-spacing: 0; text-transform: none; color: var(--void-deep);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-glow));
}
.proof-i--who b { align-self: end; }
.proof-i--who span { align-self: start; }
.proof-i--who a:hover b { color: var(--accent-bright); }

/* data fields — loose constellations of dots fading in from the edges,
   painted with gradients only; our answer to a pixel mosaic */
.hero-field {
  position: absolute; top: 14%; bottom: 4%; z-index: 1;
  width: clamp(140px, 21vw, 380px); pointer-events: none;
  background-image:
    radial-gradient(rgba(var(--accent-rgb),0.55) 1.5px, transparent 1.5px),
    radial-gradient(rgba(var(--accent-bright-rgb),0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 30px 30px, 19px 19px, 12px 12px;
  background-position: 0 0, 7px 11px, 3px 5px;
}
.hero-field--l {
  left: 0;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,0.9), transparent 92%),
    radial-gradient(120% 55% at 0% 30%, #000 30%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,0.9), transparent 92%),
    radial-gradient(120% 55% at 0% 30%, #000 30%, transparent 72%);
  mask-composite: intersect;
}
.hero-field--r {
  right: 0;
  -webkit-mask-image:
    linear-gradient(270deg, rgba(0,0,0,0.9), transparent 92%),
    radial-gradient(120% 60% at 100% 62%, #000 32%, transparent 74%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(270deg, rgba(0,0,0,0.9), transparent 92%),
    radial-gradient(120% 60% at 100% 62%, #000 32%, transparent 74%);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-field { opacity: 0; animation: field-in 1.6s var(--ease) 0.5s both; }
}
@keyframes field-in { from { opacity: 0; } to { opacity: 1; } }

/* load-in — staggered rise; CSS owns it entirely, so there is
   nothing to flash and nothing to fail if JS never arrives */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .85s var(--ease-out) both; animation-delay: calc(var(--r, 0) * 70ms + 80ms); }
  .ht-line .ht-w { animation-name: rise-word; animation-duration: .95s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes rise-word {
  from { opacity: 0; transform: translateY(112%); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   STANDALONE PAGES — surfaces, pricing, voice, alternatives, vs/*
   Same shell as the homepage, one heading instead of thirteen acts.
   ============================================================ */
.page-head { padding: calc(clamp(96px, 13vh, 150px) + var(--announce-h)) var(--gut) clamp(30px, 5vh, 58px); }
.ph-inner { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px; }
.ph-title { font-size: clamp(2.1rem, 4.6vw, 3.7rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.ph-lead { font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.6; color: var(--text-2);
  max-width: 68ch; text-wrap: pretty; }
.ph-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ph-note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-3); }

/* prose blocks the new pages are mostly made of */
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 74ch; }
.prose p { color: var(--text-2); font-size: 1rem; line-height: 1.68; }
.prose p b, .prose p strong { color: var(--text); font-weight: 620; }
.prose ul { display: flex; flex-direction: column; gap: 9px; padding-left: 20px; color: var(--text-2);
  font-size: 1rem; line-height: 1.6; }
.prose li b { color: var(--text); font-weight: 620; }
.prose h3 { font-size: 1.16rem; font-weight: 640; letter-spacing: -0.02em; margin-top: 10px; }

/* a plain, readable comparison table (vs/* and /pricing) */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; background: rgba(255,255,255,0.016); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.93rem; }
table.cmp th, table.cmp td { text-align: left; padding: 13px 18px; vertical-align: top;
  border-bottom: 1px solid var(--hair); }
table.cmp thead th { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-3); background: rgba(255,255,255,0.02); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td { color: var(--text-2); line-height: 1.55; }
table.cmp td:first-child { color: var(--text); font-weight: 560; }
table.cmp .yes { color: var(--success); }
table.cmp .no { color: var(--text-3); }
table.cmp .us { background: rgba(var(--accent-rgb),0.05); }

/* pricing plans + the awkward-questions grid */
.plans { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 30px 32px; border-radius: 20px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.016); }
.plan--now { border-color: var(--accent-line);
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),0.10), transparent 62%), rgba(255,255,255,0.018); }
.plan-price { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan-price span { display: block; margin-top: 8px; font-size: 1rem; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-2); }
.plan-sub { color: var(--text-2); font-size: 0.96rem; line-height: 1.6; }
.plan-list { list-style: none; display: grid; gap: 9px; }
.plan-list li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 0.93rem; line-height: 1.5; }
.plan-list li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-bright); }
.plan-cta { align-self: flex-start; margin-top: 4px; }
.plan-fine { font-size: 0.85rem; line-height: 1.55; color: var(--text-3); }
.plan-fine b { color: var(--text-2); font-weight: 600; }
.plan-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 18px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.plan-split ul { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.plan-split li { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.ps-h { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ps-h--free { color: var(--success); }
.ps-h--paid { color: var(--warning); }
@media (max-width: 900px) { .plans, .plan-split { grid-template-columns: 1fr; } }

.qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.qa-i { padding: 22px 24px; border-radius: 16px; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.016); }
.qa-i h3 { font-size: 1rem; font-weight: 640; letter-spacing: -0.015em; }
.qa-i p { margin-top: 8px; color: var(--text-2); font-size: 0.92rem; line-height: 1.62; }
.qa-i a { color: var(--accent-bright); }
.qa-i em { font-style: italic; }
@media (max-width: 820px) { .qa { grid-template-columns: 1fr; } }

.six-link { color: var(--accent-bright); font-size: 0.9rem; font-weight: 560; }
.six-link:hover { color: var(--text); }

/* ── six surfaces, and the door to the other seventeen ── */
.six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.six-c { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px;
  border-radius: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,0.018); }
.six-g { font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent-bright); }
.six-c h3 { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.02em; }
.six-c p { font-size: 0.92rem; line-height: 1.58; color: var(--text-2); }
.six-more {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px;
  padding: 18px 24px; border-radius: 16px;
  border: 1px solid var(--accent-line); background: rgba(var(--accent-rgb),0.05);
}
.six-more b { font-size: 1rem; font-weight: 640; }
.six-more span { grid-column: 2; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; color: var(--text-3); }
.six-more b { grid-column: 1; grid-row: 1 / span 2; }
.six-more svg { grid-column: 3; grid-row: 1 / span 2; color: var(--accent-bright); }
.six-more:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.09); }
@media (max-width: 980px) { .six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .six { grid-template-columns: 1fr; }
  .six-more { grid-template-columns: 1fr auto; } .six-more b, .six-more span { grid-column: 1; }
  .six-more b { grid-row: 1; } .six-more span { grid-row: 2; } .six-more svg { grid-row: 1 / span 2; grid-column: 2; } }

/* ============================================================
   EMAIL CAPTURE — the second door
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.notify-msg { font-size: 0.85rem; line-height: 1.5; color: var(--text-2); }
.notify-msg.is-err { color: #FF8E86; }
.notify-msg.is-ok { color: var(--success); }
.notify-msg:empty { display: none; }

.maclink {
  width: 100%; max-width: 560px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.02);
  text-align: left;
}
.ml-t { font-size: 0.94rem; line-height: 1.55; color: var(--text-2); }
.ml-t b { color: var(--text); font-weight: 620; }
.ml-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ml-field { flex: 1 1 220px; display: block; }
.ml-field input {
  width: 100%; padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--hair-2); background: rgba(0,0,0,0.28);
  color: var(--text); font: inherit; font-size: 0.94rem;
}
.ml-field input::placeholder { color: var(--text-3); }
.ml-field input:focus-visible { outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
.ml-form .notify-msg { flex: 1 1 100%; }
.ml-form.is-busy { opacity: 0.7; }
.ml-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ml-done { font-size: 0.95rem; color: var(--success); }
.ml-fine { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); }

/* ── exit intent ── */
.exitm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.exitm-back { position: absolute; inset: 0; background: rgba(3,4,9,0.72); backdrop-filter: blur(6px); }
.exitm-card {
  position: relative; width: min(520px, 100%);
  display: flex; flex-direction: column; gap: 13px;
  padding: 30px 32px; border-radius: 20px;
  border: 1px solid var(--hair-2); background: var(--panel);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .exitm-card { animation: pitch-in .35s var(--ease-out) both; }
}
.exitm-x {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--text-3); font-size: 20px; line-height: 1;
}
.exitm-x:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.exitm-h { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.03em; }
.exitm-p { font-size: 0.95rem; line-height: 1.6; color: var(--text-2); }
.exitm-alt { font-size: 0.85rem; color: var(--text-3); }
.exitm-alt a { color: var(--accent-bright); border-bottom: 1px solid var(--accent-line); }

/* ── the straight answer, in short, high up on the page ── */
.act-straight { padding-top: clamp(52px, 8vh, 92px); }
.straight {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px;
  padding: 26px 30px; border-radius: 18px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.016);
}
.st-col { display: flex; flex-direction: column; gap: 8px; }
.st-h {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-bright);
}
.st-col:nth-child(2) .st-h { color: var(--warning); }
.st-col:nth-child(3) .st-h { color: var(--success); }
.st-col p { font-size: 0.92rem; line-height: 1.55; color: var(--text-2); }
.st-col p b { color: var(--text); font-weight: 600; }
.st-more {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px;
  padding-top: 18px; border-top: 1px solid var(--hair);
  font-size: 0.88rem; color: var(--text-2);
}
.st-more svg { flex: none; color: var(--accent-bright); }
.st-more:hover { color: var(--text); }
@media (max-width: 860px) { .straight { grid-template-columns: 1fr; padding: 22px; } }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.act-section { position: relative; padding: clamp(96px, 15vh, 170px) var(--gut); }
.act-section + .act-section { padding-top: 0; }
.sec-inner {
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(44px, 7vh, 76px);
}
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sec-lead { color: var(--text-2); font-size: 1.02rem; line-height: 1.55;
  max-width: 56ch; text-wrap: pretty; }

/* below-the-fold sections skip layout & paint until approached */
#act-tools, #act-plugins, #act-follow, #act-voice {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

/* reveal-on-scroll — a one-shot animation, so it never hijacks
   the hover transitions of the element it reveals */
.reveal { opacity: 0; }
.reveal.on {
  opacity: 1;
  animation: reveal-in .8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.on { animation: none; }
}

/* ============================================================
   ACT II · THE SPACE — the app itself, running in the page
   ============================================================ */
/* The demo is the one block on this page that is not a column of text — it is
   a screen. It gets its own, wider gutter so the board can be framed whole at
   a size where 11px type is still 11px. */
.act-space {
  padding: clamp(24px, 5vh, 72px) clamp(12px, 2.2vw, 40px) clamp(40px, 8vh, 110px);
  /* the height the board is allowed to take — the frame is derived from it,
     never the other way round, so a capped height narrows the screen instead
     of flattening it. The allowance is deliberately generous (the board is the
     page's one screen, and side gutters were the only thing the old cap bought
     us): it buys ~13% more board in both dimensions while the Mac's 16:10 stays
     exactly 16:10. */
  --board-h: min(86vh, 980px);
}
/* The whole block — the intro row, the app and the notes under it — is cut to
   the width of the screen it frames, so nothing runs wider than the board. */
.space-inner {
  width: min(100%, max(960px, calc(var(--board-h) * 1.6)));
  max-width: min(1840px, 100%); margin-inline: auto;
}

/* intro row above the demo window — what it is, where to go next */
.space-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.space-id {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  font-size: 0.93rem; color: var(--text-2);
}
.space-id b { flex: none; color: var(--text); font-weight: 620; letter-spacing: -0.01em; }
.space-id span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* it really is running in the page — say so */
.space-live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 6px; overflow: visible;
  border: 1px solid rgba(91,224,168,0.26); background: rgba(91,224,168,0.075);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--success);
}
.space-live i { flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 7px rgba(91,224,168,0.85); }
@media (prefers-reduced-motion: no-preference) {
  .space-live i { animation: pulse-dot 2s var(--ease) infinite; }
}
.space-glyph { flex: none; width: 22px; height: 22px; border-radius: 6px; }
.space-link {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 540; color: var(--accent-bright);
  transition: color .2s;
}
.space-link:hover { color: var(--accent); }
.space-link svg { transition: transform .3s var(--ease-out); }
.space-link:hover svg { transform: translateX(3px); }

.demo { display: flex; flex-direction: column; gap: 14px; position: relative; }

/* ---- the poster: what stands in the first screen until the board is alive ----
   It lies on top of the app rather than beside it, so nothing shifts when it
   goes. Without JavaScript it simply stays — a product shot instead of a hole. */
.demo-poster {
  position: absolute; inset: 0; z-index: 9;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity .5s var(--ease);
}
.demo.is-live .demo-poster { opacity: 0; pointer-events: none; }

/* ---- the ask, at the peak: raised the first time the board is driven ---- */
.demo-pitch {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 16px 13px 19px; border-radius: 14px;
  border: 1px solid var(--accent-line); background: rgba(var(--accent-rgb),0.07);
}
@media (prefers-reduced-motion: no-preference) {
  .demo-pitch { animation: pitch-in .6s var(--ease-out) both; }
}
@keyframes pitch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.demo-pitch .dp-t { flex: 1 1 260px; font-size: 0.92rem; color: var(--text-2); }
.demo-pitch .dp-t b { color: var(--text); font-weight: 620; }

/* ---- app window chrome: the real toolbar, faithfully ---- */
.app {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--hair-2);
  background: #07080C;
  box-shadow: 0 0 0 1px rgba(3,4,9,0.6), 0 40px 100px rgba(0,0,0,0.5);
}
.app-bar {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)), #12141E;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-ui); font-size: 11px; color: var(--text);
}
.tls { display: flex; gap: 5px; flex: none; }
.tls i { width: 9px; height: 9px; border-radius: 50%; }
.tls i:nth-child(1) { background: #FF5F57; }
.tls i:nth-child(2) { background: #FEBC2E; }
.tls i:nth-child(3) { background: #28C840; }
.app-logo { width: 15px; height: 15px; border-radius: 4px; flex: none; }
.app-name { font-weight: 700; letter-spacing: -0.01em; flex: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ab-ic { flex: none; width: 21px; height: 19px; display: grid; place-items: center;
  border-radius: 6px; color: var(--text-3); position: relative;
  transition: color .2s, background .2s; }
.ab-ic:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.ab-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-grid svg { fill: currentColor; stroke: none; }
.ab-div { flex: none; width: 1px; height: 16px; background: var(--hair-2); margin: 0 2px; }

/* "Save place" + the empty-state note — the toolbar's centre lane */
.ab-save {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.03);
  font-size: 10px; font-weight: 590; color: var(--text);
}
.ab-save svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
.ab-note {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10px; color: var(--text-3);
}

.app-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
/* two-line chips: Stay-Awake state and the session budget */
.ab-2l { display: flex; flex-direction: column; line-height: 1.16; }
.ab-2l b { font-size: 9px; font-weight: 620; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.ab-2l i { font-style: normal; font-size: 7.5px; color: var(--text-faint); white-space: nowrap; }
.ab-sleep {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: 8px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.025);
  color: var(--text-3);
}
.ab-sleep svg { width: 13px; height: 13px; flex: none; }
.ab-sleep .mn { fill: currentColor; }
.ab-sleep .zz { fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round; }
.ab-session {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 3px; border-radius: 8px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.025);
}
.ab-face { width: 16px; height: 16px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: linear-gradient(140deg, #2B3046, #171B29);
  border: 1px solid var(--hair-2); }
.ab-face svg { width: 9px; height: 9px; fill: currentColor; }
.ab-session > i {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--accent-bright) calc(var(--p, 0) * 360deg), rgba(255,255,255,0.10) 0);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%);
  mask: radial-gradient(circle, transparent 42%, #000 44%);
  transition: background .6s var(--ease);
}
.ab-bell em { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px rgba(255,107,122,0.8); }
.ab-bell em[hidden] { display: none; }

/* ---- the canvas: pan, zoom, rearrange ---- */
.canvas {
  position: relative; overflow: hidden; outline: none;
  /* A screen, not a strip. The canvas holds a Mac's own 16:10 at every page
     width — the frame above it is already sized from the height the board may
     take, so there is no max-height here to stretch the shape into a
     letterbox. Widen the page and the board grows; it never flattens. */
  width: 100%; aspect-ratio: 16 / 10;
  height: auto; min-height: 360px;
  background: radial-gradient(90% 130% at 50% 40%, #0B0E16, #04050A);
  cursor: grab;
  touch-action: pan-y; /* the page keeps its scroll until the visitor opts in */
}
.canvas.touch { touch-action: none; }
.canvas.grabbing { cursor: grabbing; }
.canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb),0.45); }
/* a soft vignette, not a lid — windows near the edge stay readable */
.canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 56px rgba(3,4,9,0.42);
}

/* the world is deliberately larger than the board it holds — the camera opens
   on the windows, and there is still somewhere left to pan in every direction */
.world {
  position: absolute; left: 0; top: 0;
  width: 2400px; height: 1400px;
  transform-origin: 0 0;
}
.world.glide { transition: transform .95s cubic-bezier(.19,1,.22,1); }
/* the app's dot lattice: 40px step, every 5th node major */
.world-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.085) 1.6px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 200px 200px, 40px 40px;
}
.origin { /* crosshair at world zero, like the app */
  position: absolute; left: 1200px; top: 700px; width: 18px; height: 18px;
  transform: translate(-50%, -50%);
}
.origin::before, .origin::after {
  content: ""; position: absolute; background: rgba(var(--accent-rgb),0.25);
}
.origin::before { left: 0; right: 0; top: 50%; height: 1px; }
.origin::after { top: 0; bottom: 0; left: 50%; width: 1px; }

/* ---- cables: glow + glass body + sheen, gradient-tinted per kind ---- */
.cables { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; }
.cables .cgl { fill: none; stroke-width: 9; stroke-opacity: 0.10; stroke-linecap: round; }
.cables .cbd { fill: none; stroke-width: 3.4; stroke-opacity: 0.55; stroke-linecap: round; }
.cables .csh { fill: none; stroke: #fff; stroke-width: 1; stroke-opacity: 0.16; stroke-linecap: round; }
/* the intro draws every cable in; JS releases the dashes afterwards */
.cables .cgl, .cables .cbd, .cables .csh {
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1.4s var(--ease);
}
.live .cables .cgl, .live .cables .cbd, .live .cables .csh { stroke-dashoffset: 0; }
.cables .cport { fill: #0C0E16; stroke-width: 1.6; }
.cdot {
  fill: #fff; opacity: 0; offset-rotate: 0deg;
  filter: drop-shadow(0 0 6px rgba(var(--accent-bright-rgb),0.8));
}
/* glints run while the canvas has your attention — never unattended */
@media (prefers-reduced-motion: no-preference) {
  .canvas:hover .cdot, .canvas.touch .cdot, .demo.pulse .cdot, .demo.simming .cdot {
    opacity: 1; animation: cdot-run 2.2s linear infinite;
  }
}
@keyframes cdot-run { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

/* ---- windows: the app's card chrome, faithfully ---- */
.win {
  position: absolute; border-radius: 14px;
  background: #0E1018;
  border: 1px solid var(--hair);
  box-shadow: 0 9px 16px rgba(0,0,0,0.40);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* the intro cascade: cards land one after another */
@media (prefers-reduced-motion: no-preference) {
  .demo .win { opacity: 0; }
  .live .win { animation: win-in .7s var(--ease-out) both; }
  .live .win:nth-of-type(2) { animation-delay: 60ms; }
  .live .win:nth-of-type(3) { animation-delay: 120ms; }
  .live .win:nth-of-type(4) { animation-delay: 180ms; }
  .live .win:nth-of-type(5) { animation-delay: 240ms; }
  .live .win:nth-of-type(6) { animation-delay: 300ms; }
  .live .win:nth-of-type(7) { animation-delay: 360ms; }
  .live .win:nth-of-type(8) { animation-delay: 420ms; }
  .live .win:nth-of-type(9) { animation-delay: 480ms; }
  .live .win:nth-of-type(10) { animation-delay: 540ms; }
  .live .win:nth-of-type(11) { animation-delay: 600ms; }
  .live .win:nth-of-type(12) { animation-delay: 660ms; }
  .live .win:nth-of-type(13) { animation-delay: 720ms; }
  .live .win:nth-of-type(14) { animation-delay: 780ms; }
}
@keyframes win-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
/* selection — the app's un-animated focus ring */
.win.sel {
  border-color: rgba(var(--accent-bright-rgb),0.9);
  box-shadow:
    0 0 0 0.5px rgba(var(--accent-bright-rgb),0.9),
    0 0 5px rgba(var(--accent-glow-rgb, 90,124,255),0.75),
    0 0 11px rgba(var(--accent-glow-rgb, 90,124,255),0.45),
    0 14px 26px rgba(0,0,0,0.55);
}
.win.drag { box-shadow: 0 14px 26px rgba(0,0,0,0.55); }
/* "this window wants you" — the app's violet attention pulse */
.win.att { border-color: rgba(197,139,255,0.85); }
@media (prefers-reduced-motion: no-preference) {
  .win.att { animation: att-pulse 1.5s var(--ease) infinite; }
}
@keyframes att-pulse {
  0%, 100% { box-shadow: 0 0 0 0.5px rgba(197,139,255,0.6), 0 0 7px rgba(164,91,255,0.35), 0 9px 16px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 0.5px rgba(197,139,255,0.95), 0 0 18px rgba(164,91,255,0.6), 0 9px 16px rgba(0,0,0,0.4); }
}
/* the sim re-arranges the board: windows glide to their new home */
.win.glide { transition: left .85s var(--ease-out), top .85s var(--ease-out),
  border-color .2s var(--ease), box-shadow .2s var(--ease); }
.win.closing { animation: win-out .3s var(--ease) forwards; pointer-events: none; }
@keyframes win-out { to { opacity: 0; transform: scale(0.93); } }

.win-bar {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 12px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), #141722;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.win-bar--agent { background: linear-gradient(180deg, rgba(217,119,87,0.11), rgba(255,255,255,0.01)), #141722; }
.win.drag .win-bar { cursor: grabbing; }
/* the app's dot buttons — squircles, not traffic lights */
.dots { display: flex; gap: 7px; flex: none; }
.dots i {
  width: 15px; height: 15px; border-radius: 5px; font-style: normal;
  background: #1B1F2D; border: 1px solid var(--hair);
  display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.dots i::before { content: "×"; font-size: 9px; line-height: 1; font-weight: 700; color: #5A6276; }
.dots .d-m::before { content: "−"; }
.win .d-x { cursor: pointer; }
.win .d-x:hover { background: rgba(255,107,122,0.18); border-color: rgba(255,107,122,0.65); }
.win .d-x:hover::before { color: var(--danger); }
.w-ic { color: var(--accent-bright); font-size: 11px; font-weight: 600; flex: none; }
.win-name { font-weight: 600; font-size: 12.5px; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-count {
  margin-left: auto; font-size: 10.5px; color: var(--text-2);
  background: #0E1018; border: 1px solid var(--hair);
  padding: 1px 8px; border-radius: 999px; flex: none;
}
.run-chip {
  margin-left: auto; flex: none; max-width: 48%;
  font-size: 10px; color: var(--text-3);
  background: #0E1018; border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.win-body { height: calc(100% - 38px); position: relative; overflow: hidden;
  border-radius: 0 0 13px 13px; }

/* kind sub-header (git, diff, web) — body below it is shorter */
.win-sub {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px; flex: none;
  background: #0E1018; border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2);
}
.win-sub + .win-body { height: calc(100% - 68px); }

/* LOD — far away, a card collapses to its placeholder, like the app */
.lod {
  position: absolute; inset: 0; z-index: 2; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(180deg, #141722, #0E1018);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.win.lod-on .lod { opacity: 1; }
.lod-ic {
  width: 30%; max-width: 110px; aspect-ratio: 1; border-radius: 24%;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid rgba(var(--accent-bright-rgb),0.25);
  color: var(--accent-bright); font-size: 38px; font-family: var(--font-mono);
}
.lod-t { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--text); }

/* ---- terminal type (kept for the switchboard previews) ---- */
.term {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.72;
  white-space: pre-wrap; color: #D7DCE8;
}
.term .t-dim { color: var(--text-3); }
.term .t-ok  { color: var(--success); }
.term .t-warn { color: var(--warning); }
.term .t-err { color: var(--danger); }
.term .t-acc { color: var(--accent-bright); }
.term .t-cmd { color: #D7DCE8; }
.term .t-cmd b { color: var(--accent-bright); font-weight: 400; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.caret-i { display: inline-block; width: 8px; height: 14px; margin-left: 2px;
  background: var(--accent-bright); vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .caret-i { animation: blink 1.05s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- bits kept for the switchboard previews (Act III) ---- */
.dl {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  padding: 2px 10px; border-radius: 6px; white-space: pre; overflow: hidden;
}
.dl.ctx { color: var(--text-3); }
.dl.add { color: var(--success); background: rgba(91,224,168,0.10); }
.dl.del { color: var(--danger); background: rgba(255,122,138,0.10); }
.assign {
  margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10.5px;
  color: #E6A184; background: rgba(217,119,87,0.16);
  border: 1px solid rgba(217,119,87,0.42);
  padding: 2px 8px; border-radius: 999px;
}

/* ---- sub-bar chips (git graph, file tree) ---- */
.ref-badge {
  font-size: 10.5px; color: var(--accent-bright); flex: none;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.chg-pill {
  font-size: 10.5px; color: var(--success); white-space: nowrap; flex: none;
  background: rgba(91,224,168,0.16); border: 1px solid rgba(91,224,168,0.3);
  padding: 2px 9px; border-radius: 999px;
}
.chg-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-ic { color: var(--text-3); font-size: 11px; flex: none; }
.gg-tool {
  flex: none; font-size: 10px; color: var(--text-2); white-space: nowrap;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.03);
  padding: 2px 8px; border-radius: 6px;
}
.gg-end { margin-left: auto; }

/* ---- planner ---- */
.plan2-body { background: #0B0D14; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.pl-head { display: flex; align-items: center; gap: 8px; }
.pl-ttl { font: 600 12.5px var(--font-mono); color: var(--text); white-space: nowrap; }
.pl-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
  background: #12141E; border: 1px solid var(--hair);
  padding: 1px 7px; border-radius: 999px; }
.pl-add {
  margin-left: auto; flex: none; cursor: pointer;
  font: 600 11px var(--font-mono); color: var(--text-2);
  background: #12141E; border: 1px solid var(--hair-2);
  border-radius: 8px; padding: 4px 10px;
  transition: color .2s, border-color .2s, background .2s;
}
.pl-add:hover { color: var(--accent-bright); border-color: var(--accent-line);
  background: var(--accent-soft); }
.pl-list { display: flex; flex-direction: column; gap: 8px;
  min-height: 0; overflow: hidden auto; }
.pl-task {
  position: relative; flex: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px; border-radius: 10px;
  background: #10131D; border: 1px solid var(--hair);
}
.pl-row1 { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-bright); box-shadow: 0 0 7px rgba(var(--accent-bright-rgb),0.6);
  transition: background .3s, box-shadow .3s; }
.pl-dot--todo { background: var(--text-3); box-shadow: none; }
.pl-dot--rev { background: #C58BFF; box-shadow: 0 0 7px rgba(164,91,255,0.6); }
.pl-dot--done { background: var(--success); box-shadow: 0 0 7px rgba(91,224,168,0.6); }
.pl-name { font-size: 13px; font-weight: 620; color: var(--text); min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; outline: none; }
.pl-chip {
  margin-left: auto; flex: none; font: 500 9.5px var(--font-mono);
  color: var(--accent-bright); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  transition: color .3s, background .3s, border-color .3s;
}
.pl-chip--todo { color: var(--text-3); background: rgba(255,255,255,0.04); border-color: var(--hair-2); }
.pl-chip--rev { color: #C58BFF; background: rgba(164,91,255,0.13); border-color: rgba(164,91,255,0.35); }
.pl-chip--done { color: var(--success); background: rgba(91,224,168,0.13); border-color: rgba(91,224,168,0.32); }
.pl-row2 { display: flex; align-items: center; gap: 8px;
  font: 500 10.5px var(--font-mono); color: var(--text-3); }
.pl-ava { width: 16px; height: 16px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 8px;
  background: rgba(217,119,87,0.16); border: 1px solid rgba(217,119,87,0.45);
  color: #D97757; }
.pl-sub b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-bar { display: block; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.07); position: relative; overflow: hidden; }
.pl-bar::after { content: ""; position: absolute; inset: 0;
  width: calc(var(--p, 0) * 100%); border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width .6s var(--ease); }

/* ---- task cockpit ---- */
.task2-body { background: #0B0D14; display: flex; flex-direction: column;
  padding: 0 0 12px; overflow: hidden; }
.tk-hero { display: flex; align-items: center; gap: 9px; flex: none;
  padding: 12px;
  background: linear-gradient(180deg, rgba(139,125,246,0.10), transparent); }
.tk-dot { flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-bright); box-shadow: 0 0 8px rgba(var(--accent-bright-rgb),0.7); }
.tk-name { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-state {
  margin-left: auto; flex: none; font: 600 8.5px var(--font-mono);
  letter-spacing: 0.08em; white-space: nowrap;
  color: var(--accent-bright); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 3px 8px; border-radius: 999px;
  transition: color .3s, background .3s, border-color .3s;
}
.tk-state--todo { color: var(--text-3); background: rgba(255,255,255,0.05); border-color: var(--hair-2); }
.tk-state--rev { color: #C58BFF; background: rgba(164,91,255,0.13); border-color: rgba(164,91,255,0.35); }
.tk-state--done { color: var(--success); background: rgba(91,224,168,0.13); border-color: rgba(91,224,168,0.32); }
.tk-seg { display: flex; gap: 3px; flex: none; margin: 0 12px 10px; padding: 3px;
  border-radius: 9px; background: #0F1119; border: 1px solid var(--hair); }
.tk-seg span {
  flex: 1; text-align: center; cursor: pointer; white-space: nowrap;
  font: 500 9px var(--font-mono); color: var(--text-3);
  padding: 4px 2px; border-radius: 7px; border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.tk-seg span:hover { color: var(--text-2); background: rgba(255,255,255,0.03); }
.tk-seg span.on { color: var(--accent-bright); background: var(--accent-soft);
  border-color: var(--accent-line); }
.tk-agent { display: flex; align-items: center; gap: 10px; flex: none;
  margin: 0 12px 10px; padding: 10px; border-radius: 10px;
  background: #10131D; border: 1px solid var(--hair); }
.tk-ava { width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: rgba(217,119,87,0.16); border: 1px solid rgba(217,119,87,0.5);
  color: #D97757; }
.tk-agent-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-agent-id b { font-size: 12px; font-weight: 620; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-working { display: inline-flex; align-items: center; gap: 5px;
  font: 500 9.5px var(--font-mono); font-style: normal; color: var(--success); }
.tk-live { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .tk-live { animation: pulse-dot 1.4s var(--ease) infinite; }
}
.tk-agent-acts { margin-left: auto; flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tk-btn { font: 600 9.5px var(--font-mono); color: var(--text-2); white-space: nowrap;
  background: #161927; border: 1px solid var(--hair-2);
  padding: 3px 9px; border-radius: 7px; }
.tk-detach { font: 500 9.5px var(--font-mono); font-style: normal; color: var(--text-faint); }
.tk-branch { display: flex; align-items: center; gap: 8px; flex: none; margin: 0 12px 10px; }
.tk-branch-in { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  font: 500 10.5px var(--font-mono); color: var(--text-faint);
  background: #0F1119; border: 1px solid var(--hair);
  border-radius: 8px; padding: 6px 10px; }
.tk-delta { flex: none; font: 600 10.5px var(--font-mono); display: flex; gap: 5px; }
.tk-delta .add { color: var(--success); }
.tk-delta .del { color: var(--danger); }
.tk-brief-head { display: flex; align-items: center; flex: none; margin: 2px 12px 6px;
  font: 600 8.5px var(--font-mono); letter-spacing: 0.16em; color: var(--text-faint); }
.tk-edit { margin-left: auto; font: 500 9.5px var(--font-mono); font-weight: 500;
  letter-spacing: 0; color: var(--text-3); }
.tk-brief {
  flex: 1; min-height: 0; overflow: auto; margin: 0 12px;
  padding: 10px 11px; border-radius: 10px;
  background: #0F1119; border: 1px solid var(--hair);
  font-size: 11.5px; line-height: 1.55; color: var(--text-2);
  outline: none; cursor: text;
  transition: border-color .2s, color .2s;
  /* a brief longer than the field runs on — fade the tail out instead of
     slicing a line in half at the edge, the way the log does */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
.tk-brief:focus { border-color: var(--accent-line); color: var(--text); }

/* ---- Claude Code — banner, streaming log, a prompt you can type in ---- */
.w-ava {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(217,119,87,0.16); border: 1px solid rgba(217,119,87,0.45);
  color: #D97757; font-size: 10px;
}
.w-ic--cc { color: #D97757; }
.cc-body { background: #07080C; display: flex; flex-direction: column; overflow: hidden; }
.cc-banner { position: relative; flex: none; display: flex; gap: 12px;
  align-items: flex-start; padding: 10px 14px 6px; }
.cc-mark { font: 700 10px/1.3 var(--font-mono); color: #D97757; white-space: pre;
  text-shadow: 0 0 16px rgba(217,119,87,0.55); }
.cc-meta { display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); min-width: 0; }
.cc-meta b { font-size: 12px; font-weight: 600; color: var(--text); }
.cc-meta span { font-size: 10.5px; color: var(--text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cc-live { position: absolute; top: 12px; right: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: #D97757;
  box-shadow: 0 0 8px rgba(217,119,87,0.8); }
@media (prefers-reduced-motion: no-preference) {
  .cc-live.run { animation: pulse-dot 1.2s var(--ease) infinite; }
}
.ag-log { font-family: var(--font-mono); }
.ag-log .agl { display: block; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.ag-log .agl-t { color: var(--text); }
.ag-log .agl-t b { color: #D97757; font-weight: 600; margin-right: 6px; }
.ag-log .agl-t em { font-style: normal; color: var(--text-2); }
.ag-log .agl-r { color: var(--text-3); }
.ag-log .agl-th { color: var(--text-3); font-style: italic; }
.ag-log .agl-ok { color: var(--success); }
.ag-log .agl-user { color: var(--text); }
.ag-log .agl-user b { color: #D97757; font-weight: 600; margin-right: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .ag-log .agl.fresh { animation: line-in .28s var(--ease-out) both; }
}
/* scrollback runs off the top — fade it out instead of slicing a line in half */
.cc-log { flex: 1; min-height: 0; padding: 4px 14px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  font-size: 11.5px; line-height: 1.68;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px); }
.cc-in {
  flex: none; margin: 8px 12px 6px; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(217,119,87,0.35); background: rgba(217,119,87,0.05);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text);
  cursor: text; transition: border-color .2s, box-shadow .2s;
}
.cc-in:focus-within { border-color: rgba(217,119,87,0.7);
  box-shadow: 0 0 14px rgba(217,119,87,0.16); }
.cc-b { color: #D97757; flex: none; }
.cc-input { flex: 1; min-width: 0; outline: none;
  white-space: nowrap; overflow: hidden; }
.cc-input:empty::before { content: attr(data-ph); color: var(--text-faint); }
/* ---- Claude's status line: the 1M window, the cache, the burn rate ----
   The app reports what the session is actually costing — how much of the
   context window is spoken for, how much came back off the prompt cache,
   and where auto-compact will cut in. */
.cc-status {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  margin: 6px 12px 0; padding: 8px 10px 9px; border-radius: 9px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.022);
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
}
.cc-ctx { display: flex; align-items: center; gap: 9px; }
.cc-ctx-k { flex: none; color: var(--text-faint);
  letter-spacing: 0.1em; text-transform: uppercase; }
.cc-ctx-bar {
  position: relative; flex: 1; min-width: 36px; height: 4px;
  border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden;
}
.cc-ctx-bar em {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, #B75E43, #D97757);
  transition: width .7s var(--ease), background .4s var(--ease);
}
.cc-ctx-bar.hot em { background: linear-gradient(90deg, #D97757, var(--warning)); }
/* where auto-compact cuts in — marked on the track, like the real gauge */
.cc-ctx-bar b { position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(var(--c, 0.82) * 100%); background: rgba(255,255,255,0.34); }
.cc-ctx-v { flex: none; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cc-ctx-v b { color: var(--text-2); font-weight: 600; }
.cc-ctx-p { flex: none; color: #E6A184; font-variant-numeric: tabular-nums; }

.cc-meters { display: flex; align-items: center; gap: 11px;
  color: var(--text-faint); min-width: 0; }
.cc-m { display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-m b { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-m--hit i { flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px rgba(91,224,168,0.7); }
.cc-m--end { margin-left: auto; flex: none; }

.cc-foot { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 5px; font-family: var(--font-mono); font-size: 10px;
  color: rgba(230,161,132,0.8); }
.cc-perm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cc-foot i { font-style: normal; color: var(--text-faint); }
.cc-rc { margin-left: auto; flex: none; color: var(--text-faint); }

/* ---- git graph — a commit list on live lanes ---- */
.gg-body { background: #080A10; padding: 6px 6px 6px 0; overflow: hidden; }
/* the lane runs past the foot of the window — fade the last row out rather
   than leaving a commit sliced in half on the edge */
.gg-rows { position: relative; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.gg-rows::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; opacity: 0.45;
  background: linear-gradient(180deg, var(--accent-bright), rgba(110,139,255,0.2)); }
.gg-row {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 23px; padding: 0 8px 0 36px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-2); min-width: 0;
}
.gg-row:hover { background: rgba(255,255,255,0.03); }
.gg-node { position: absolute; left: 15px; top: 50%; margin-top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #0C0E16; border: 2px solid var(--accent-bright); }
.gg-row.lane-o .gg-node { left: 25px; border-color: var(--warning); }
.gg-row.lane-g .gg-node { left: 25px; border-color: var(--success); }
.gg-badge { flex: none; font-size: 8.5px; color: var(--accent-bright);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 0 6px; border-radius: 999px; white-space: nowrap; line-height: 1.6; }
.gg-badge--o { color: var(--warning); background: rgba(255,197,110,0.12);
  border-color: rgba(255,197,110,0.3); }
.gg-badge--g { color: var(--success); background: rgba(91,224,168,0.12);
  border-color: rgba(91,224,168,0.3); }
.gg-msg { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gg-hash { margin-left: auto; flex: none; font-weight: 500; font-size: 9.5px;
  color: var(--text-faint); font-variant-numeric: tabular-nums; }
.gg-time { flex: none; width: 84px; text-align: right; font-style: normal;
  font-size: 9.5px; color: var(--text-faint);
  overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .gg-row.fresh { animation: line-in .32s var(--ease-out) both; }
}

/* ---- file tree ---- */
.ft-crumb { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center;
  gap: 6px; color: var(--text-2); overflow: hidden; white-space: nowrap; }
.ft-crumb b { color: var(--text); font-weight: 600; }
.ft-body { background: #080A10; padding: 8px 6px;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-mono); font-size: 11px; }
.ft-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3.5px 9px; border-radius: 6px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ft-row:hover { background: rgba(255,255,255,0.035); }
.ft-caret { flex: none; width: 8px; font-style: normal; font-size: 8px;
  color: var(--text-faint); }
.ft-ic { position: relative; flex: none; width: 13px; height: 9px; margin-top: 2px;
  border-radius: 1.5px 2.5px 2.5px 2.5px; opacity: 0.75;
  background: linear-gradient(180deg, #8B98B8, #6B7794); }
.ft-ic::before { content: ""; position: absolute; top: -2.5px; left: 0;
  width: 5.5px; height: 3px; border-radius: 1.5px 1px 0 0; background: #8B98B8; }

/* ---- repositories ---- */
/* 19 repositories in a 250px window — the list runs on, so fade its foot */
.rp-body { background: #080A10; padding: 8px;
  display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); }
.rp-head { display: flex; align-items: center; gap: 7px;
  padding: 4px 8px 8px; margin-bottom: 4px;
  font-size: 10.5px; color: var(--text-2);
  border-bottom: 1px solid var(--hair); }
.rp-head .sub-ic { margin-left: auto; }
.rp-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: 8px; min-width: 0;
}
.rp-row:hover { background: rgba(255,255,255,0.035); }
.rp-ic { flex: none; color: var(--accent-bright); font-size: 11px; }
.rp-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-id b { font-size: 11px; font-weight: 600; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-id i { font-style: normal; font-size: 9.5px; color: var(--text-faint);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-end { margin-left: auto; flex: none; display: inline-flex; align-items: center;
  gap: 7px; font-size: 10px; color: var(--text-faint); }
.rp-badge { font-style: normal; font-size: 9px; font-weight: 700; color: #EAF0FF;
  background: var(--accent); border-radius: 999px; padding: 1px 6px;
  font-variant-numeric: tabular-nums; }
.rp-badge--dim { background: rgba(110,139,255,0.35); }

/* ---- text editor — a real one, type into it ---- */
.tx-body { background: #0A0C12; display: flex; overflow: hidden; }
.tx-gutter { flex: none; width: 34px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: flex-end;
  background: #080A10; border-right: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--text-faint); overflow: hidden; }
.tx-gutter i { font-style: normal; padding-right: 8px; font-variant-numeric: tabular-nums; }
.tx-edit { flex: 1; min-width: 0; padding: 10px 12px; margin: 0;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
  outline: none; cursor: text; overflow: auto; }
.tx-edit:empty::before { content: attr(data-ph); color: var(--text-faint); }

/* ---- rows land one after another when the scene wakes ---- */
.ft-row, .gg-row, .rp-row, .pl-task {
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .4s var(--ease-out), background .2s;
}
.live .ft-row, .live .gg-row, .live .rp-row, .live .pl-task { opacity: 1; transform: none; }
.live .ft-row { transition-delay: calc(var(--i, 0) * 40ms + .25s); }
.live .gg-row { transition-delay: calc(var(--i, 0) * 45ms + .3s); }
.live .rp-row { transition-delay: calc(var(--i, 0) * 70ms + .3s); }
.live .pl-task { transition-delay: calc(var(--i, 0) * 120ms + .35s); }

/* ---- notes — the window the visitor mints from the dock ---- */
.note-body {
  background: #0A0C12; padding: 14px 16px; outline: none; cursor: text;
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}
.note-body:focus { color: var(--text); }

/* ---- HUD over the canvas ---- */
.hud { position: absolute; z-index: 5; }
.hud-nav {
  right: 11px; bottom: 11px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.minimap {
  position: relative; width: 174px; height: 102px; cursor: pointer;
  border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(180deg, rgba(20,23,34,0.55), rgba(14,16,24,0.8));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mm-win {
  position: absolute; left: 0; top: 0; border-radius: 2.5px;
  background: linear-gradient(180deg, rgba(154,163,184,0.52), rgba(154,163,184,0.30));
  outline: 0.5px solid rgba(255,255,255,0.16);
  transition: background .3s var(--ease);
}
.mm-win.mm-ai {
  background: linear-gradient(180deg, rgba(217,119,87,0.62), rgba(217,119,87,0.32));
}
.mm-win.mm-acc {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.5), rgba(var(--accent-rgb),0.28));
}
.mm-view {
  position: absolute; left: 0; top: 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.2), rgba(var(--accent-rgb),0.06));
  border: 1.3px solid var(--accent-bright);
  box-shadow: 0 0 5px rgba(var(--accent-rgb),0.55);
}
/* the app's zoom pill, under the map — where the real thing keeps it */
.zoom-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(20,23,34,0.55), rgba(14,16,24,0.8));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.zp-b, .zp-v {
  border: none; background: transparent; color: var(--text-2); cursor: pointer;
  border-radius: 999px; transition: background .2s, color .2s;
}
.zp-b { width: 25px; height: 22px; display: grid; place-items: center; }
.zp-b svg { width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; }
.zp-v {
  min-width: 44px; height: 22px; padding: 0 4px;
  font: 600 10.5px var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text);
}
.zp-b:hover, .zp-v:hover { background: #1B1F2D; color: var(--accent-bright); }

/* the app's left toolbar — a vertical rail, like the real thing */
.hud-rail {
  left: 11px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 5px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,23,34,0.55), rgba(14,16,24,0.8));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rail-b {
  width: 28px; height: 26px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.rail-b svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-b:hover { background: #1B1F2D; color: var(--accent-bright); }

/* one pill, alone at the foot of the canvas — nothing left to collide with */
.hud-hint {
  left: 50%; bottom: 16px; transform: translateX(-50%);
  max-width: calc(100% - 120px);
  margin: 0; padding: 5px 14px; border-radius: 999px;
  background: rgba(10,12,19,0.94); border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease) 1.6s;
}
.live .hud-hint { opacity: 1; }
.hud-hint .hint-live { display: none; }
.engaged .hud-hint { transition-delay: 0s; }
.engaged .hud-hint .hint-idle { display: none; }
.engaged .hud-hint .hint-live { display: inline; }

.demo-exit {
  top: 12px; right: 12px; display: none;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: rgba(14,16,24,0.8);
  color: var(--text-2); font: 500 11px var(--font-mono); cursor: pointer;
}
.demo-exit:hover { color: var(--text); border-color: var(--hair-3); }
.engaged .demo-exit { display: inline-flex; }

/* touch veil — on phones the canvas is opt-in, the page scroll stays sacred */
.veil {
  position: absolute; inset: 0; z-index: 6; border: none; cursor: pointer;
  display: grid; place-items: end center; padding-bottom: 26px;
  background: linear-gradient(180deg, transparent 55%, rgba(4,5,10,0.55));
}
.veil[hidden] { display: none; }
.veil-chip {
  padding: 11px 20px; border-radius: 999px;
  background: rgba(14,16,24,0.85); border: 1px solid var(--accent-line);
  color: var(--text); font-weight: 600; font-size: 13.5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb),0.25);
}

/* ---- three quiet notes under the board ----
   The six-chapter track auto-played a story nobody asked for. This says the
   same thing in one still row and lets the canvas do the talking. */
.demo-notes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hair); margin-top: 4px;
}
/* four across needs a wide desk; between that and the stack they pair up — and in
   two columns the divider belongs to the right-hand cell only, not to every
   item after the first, or the item starting row two grows a rule down its left */
@media (min-width: 961px) and (max-width: 1180px) {
  .demo-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-item:nth-child(odd) { padding-left: 0; }
  .dn-item:nth-child(odd)::before { display: none; }
  .dn-item:nth-child(n + 3) { border-top: 1px solid var(--hair); padding-top: 18px; }
}
.dn-s kbd {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--text);
  padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--hair-3); background: rgba(255,255,255,0.05); white-space: nowrap;
}
.dn-s b { color: var(--text); font-weight: 600; }
.dn-item { position: relative; margin: 0; padding: 18px 26px 0 0;
  display: flex; flex-direction: column; gap: 6px; }
.dn-item + .dn-item { padding-left: 26px; }
.dn-item + .dn-item::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 2px; width: 1px;
  background: var(--hair);
}
.dn-k {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.93rem; font-weight: 620; letter-spacing: -0.015em; color: var(--text);
}
.dn-k::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 1.5px;
  background: var(--accent-bright); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.55);
}
.dn-s { font-size: 0.875rem; line-height: 1.56; color: var(--text-2);
  text-wrap: pretty; max-width: 46ch; }

/* ============================================================
   ACT III · SURFACES — the switchboard
   ============================================================ */
.sx { display: grid; grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: start; }

.sx-index { display: flex; flex-direction: column; gap: 26px; }
.sx-group { display: flex; flex-direction: column; gap: 10px; }
.sx-group-head { display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hair-2); }
.sx-group-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sx-items { display: flex; flex-direction: column; gap: 2px; }

.sx-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font: inherit; color: var(--text-2);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.sx-item:hover { color: var(--text); background: rgba(255,255,255,0.035); }
.sx-item.act {
  color: var(--text);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.13), rgba(var(--accent-rgb),0.04));
  border-color: rgba(var(--accent-rgb),0.32);
}
.sx-num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--text-3); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.sx-item.act .sx-num { color: var(--accent-bright); }
.sx-name { font-size: 0.95rem; font-weight: 540; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-glyph { margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-3); font-variant-emoji: text; transition: color .3s var(--ease); }
.sx-item.act .sx-glyph { color: var(--accent-bright); }

.sx-stage { position: sticky; top: clamp(76px, 12vh, 120px);
  display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sx-win { position: relative; display: flex; flex-direction: column;
  width: 100%; height: clamp(330px, 46vh, 430px); }
.sx-win .win-bar { flex: none; }

.sx-prog { flex: none; height: 1.5px; background: rgba(255,255,255,0.04); }
.sx-prog i { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform: scaleX(0); transform-origin: 0 50%; }
.sx.live .sx-prog i { animation: sx-run var(--sx-cycle, 4.6s) linear infinite; }
@keyframes sx-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sx-body { position: relative; flex: 1; min-height: 0; }
.sx-prev {
  position: absolute; inset: 0; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease-out);
}
.sx-prev.act { opacity: 1; transform: none; }

.sx-desc { display: flex; flex-direction: column; gap: 6px; min-height: 70px; }
.sx-desc-k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-bright); }
.sx-desc-t { color: var(--text-2); font-size: 0.97rem; line-height: 1.55;
  max-width: 58ch; text-wrap: pretty; }

/* ---- preview primitives ---- */
.sxt { font-size: 13px; line-height: 1.75; }
.sxp-foot { margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.sxp-foot b { color: var(--accent-bright); font-weight: 500; }
.sxp-add { color: var(--success); font-weight: 600; }
.sxp-del { color: var(--danger); font-weight: 600; }

.sxp-cmds { display: flex; gap: 8px; flex-wrap: wrap; }
.sxp-cmd { font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  border: 1px solid var(--hair-2); border-radius: 999px; padding: 5px 13px; }
.sxp-cmd.act { color: var(--accent-bright); background: var(--accent-soft);
  border-color: var(--accent-line); }

.sxp-web { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.sxp-web-hero { height: 34%; min-height: 44px; border-radius: 8px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb),0.35), rgba(var(--accent-deep-rgb),0.22)); }
.sxp-web-line { height: 9px; border-radius: 999px; background: rgba(255,255,255,0.10); }
.sxp-web-grid { display: flex; gap: 8px; flex: 1; min-height: 36px; }
.sxp-web-grid i { flex: 1; border-radius: 8px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--hair); }

.sxp-rows { display: flex; flex-direction: column; gap: 6px; }
.sxp-row { display: flex; align-items: center; gap: 12px; padding: 9px 13px;
  border-radius: 9px; border: 1px solid var(--hair); background: rgba(255,255,255,0.015);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.sxp-row--dim { opacity: 0.55; }
.sxp-port { color: var(--accent-bright); min-width: 42px; font-variant-numeric: tabular-nums; }
.sxp-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sxp-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--hair-2); padding: 2px 8px; border-radius: 999px; }
.sxp-x { margin-left: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sxp-x--kill { color: var(--danger); }
.sxp-st { width: 20px; height: 20px; flex: none; border-radius: 6px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
.sxp-st--m { color: var(--warning); background: rgba(255,197,110,0.12); }
.sxp-st--a { color: var(--success); background: rgba(91,224,168,0.12); }
.sxp-st--d { color: var(--danger); background: rgba(255,122,138,0.10); }
.sxp-ck { margin-left: auto; width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--hair-3); display: grid; place-items: center;
  font-size: 10px; color: #060810; }
.sxp-ck.on { background: linear-gradient(120deg, var(--accent-bright), var(--accent-glow));
  border-color: transparent; }

.sxp-code { display: grid; grid-template-columns: auto 1fr; gap: 13px 16px; align-items: center; }
.sxp-ln { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-align: right; }
.sxp-bar { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.10); }
.sxp-bar--acc { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.22)); }
.sxp-bar--dim { background: rgba(255,255,255,0.05); }
.sxp-dirty { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }

.sxp-doc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  flex: 1; min-height: 0; }
.sxp-pane { border: 1px solid var(--hair); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 11px; background: rgba(255,255,255,0.015);
  min-width: 0; }
.sxp-pane--src { background: rgba(0,0,0,0.25); font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3); }
.sxp-h { font-size: 1rem; font-weight: 620; letter-spacing: -0.02em; color: var(--text); }
.sxp-wire { position: relative; width: 36px; }
.sxp-wire::before { content: ""; position: absolute; top: 50%; left: 4px; right: 4px; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.5) 0 4px, transparent 4px 9px); }
.sxp-wire i { position: absolute; top: 50%; left: 4px; width: 5px; height: 5px;
  margin-top: -2.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px rgba(var(--accent-bright-rgb),1); }
@media (prefers-reduced-motion: no-preference) {
  .sx-prev.act .sxp-wire i { animation: sx-wire 1.6s linear infinite; }
}
@keyframes sx-wire { from { left: 4px; } to { left: calc(100% - 9px); } }

.sxp-tree { display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.sxp-ti--1 { padding-left: 18px; } .sxp-ti--2 { padding-left: 36px; }
.sxp-ti.act { color: var(--accent-bright); }

.sxp-img { flex: 1; min-height: 0; position: relative; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--hair);
  background:
    radial-gradient(80% 90% at 75% 18%, rgba(var(--accent-bright-rgb),0.35), transparent 60%),
    linear-gradient(180deg, rgba(var(--accent-deep-rgb),0.45), rgba(8,10,18,0.9)); }
.sxp-img-sun { position: absolute; top: 18%; left: 16%; width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(var(--accent-bright-rgb),0.25) 70%); }
.sxp-img-hill { position: absolute; bottom: -32%; left: -10%; right: -10%; height: 72%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.35), rgba(6,8,14,0.9)); }

.sxp-tasks { display: flex; flex-direction: column; gap: 13px; }
.sxp-task { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text); }
.sxp-task .assign { margin-left: auto; }
.sxp-tick { width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--hair-3); display: grid; place-items: center;
  font-size: 10.5px; color: #060810; }
.sxp-task.done .sxp-tick { background: linear-gradient(120deg, var(--accent-bright), var(--accent-glow));
  border-color: transparent; }
.sxp-task.done .sxp-task-t { color: var(--text-3); }

.sxp-stat { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.sxp-msg { font-family: var(--font-mono); font-size: 13px; color: var(--text);
  border: 1px solid var(--hair-2); border-radius: 10px; padding: 14px;
  background: rgba(0,0,0,0.25); }
.sxp-btn { align-self: flex-start; font-size: 13px; font-weight: 560; color: #061018;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent));
  border-radius: 999px; padding: 8px 18px; }

.sxg { flex: 1; width: 100%; min-height: 0; }
.sxg-lane { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sxg-a { stroke: var(--accent); } .sxg-b { stroke: var(--success); }
.sxg-dot { fill: #0C0E16; stroke: var(--accent-bright); stroke-width: 2; }
.sxg-dot--b { stroke: var(--success); }
.sxg-dot--hi { stroke: #fff; }
.sxg-msg { font-family: var(--font-mono); font-size: 12px; fill: var(--text-2); }
.sxg-msg--hi { fill: var(--text); }

.sxp-diff { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.sxp-agent { display: flex; flex-direction: column; gap: 10px; }
/* agent log lines in the AI previews */
.al { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.al-k { color: var(--accent-bright); margin-right: 6px; }
.al-think { color: var(--text-3); font-style: italic; }
.al .ok { color: var(--success); font-weight: 600; }
.al-done { color: var(--success); }

/* ============================================================
   ACT IV · PLUGINS
   ============================================================ */
.plug-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.plug {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(17,20,31,0.72), rgba(8,10,17,0.9));
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-out);
}
.plug:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),0.45);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.18), 0 0 50px rgba(var(--accent-rgb),0.13),
              0 24px 60px rgba(0,0,0,0.5);
}
.plug-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--hair); background: rgba(255,255,255,0.015); }
.plug-icon { width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; color: var(--accent-bright);
  background: var(--accent-soft); border: 1px solid var(--accent-line); }
.plug-icon svg { width: 20px; height: 20px; }
.plug-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plug-name { font-size: 1.02rem; font-weight: 560; letter-spacing: -0.01em; color: var(--text); }
.plug-kind { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); }
.plug-free { margin-left: auto; align-self: flex-start; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--success); background: rgba(91,224,168,0.12);
  border: 1px solid rgba(91,224,168,0.3); padding: 3px 9px; border-radius: 999px; }
.plug-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; flex: 1; }
.plug-tagline { font-size: 0.98rem; font-weight: 540; color: var(--text); line-height: 1.4;
  letter-spacing: -0.01em; }
.plug-points { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plug-points li { display: flex; gap: 10px; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.plug-points .pk { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-bright); }
.plug-points .pk svg { width: 16px; height: 16px; }
.plug-meta { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.plug-meta b { color: var(--text-2); font-weight: 500; }

.plug-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.plug-note { font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

/* ============================================================
   FOLLOW · social
   ============================================================ */
.follow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.follow-card {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  border-radius: 16px; border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(17,20,31,0.66), rgba(8,10,17,0.86));
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .4s var(--ease-out);
}
.follow-card:hover {
  border-color: rgba(var(--accent-rgb),0.42); transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.16), 0 0 46px rgba(var(--accent-rgb),0.12),
              0 22px 56px rgba(0,0,0,0.5);
}
.follow-top { display: flex; align-items: center; gap: 13px; }
.follow-ava { width: 46px; height: 46px; flex: none; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; font-weight: 600; font-size: 1.15rem; color: var(--text);
  background: var(--accent-soft); border: 1px solid var(--accent-line); }
.follow-ava img { width: 100%; height: 100%; object-fit: cover; }
.follow-id { display: flex; flex-direction: column; gap: 2px; }
.follow-name { font-size: 1rem; font-weight: 560; letter-spacing: -0.01em; color: var(--text);
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.follow-role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-bright);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 2px 7px; border-radius: 999px; }
.follow-handle { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-3); }
.follow-x { margin-left: auto; width: 18px; height: 18px; color: var(--text-2); }
.follow-desc { color: var(--text-2); font-size: 0.94rem; line-height: 1.55; flex: 1; text-wrap: pretty; }
.follow-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 0.9rem; font-weight: 540; color: var(--accent-bright); }
.follow-cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.follow-card:hover .follow-cta svg { transform: translateX(3px); }

/* ============================================================
   FAQ — the plain-language answers, in the page and in the schema
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: 8px; max-width: 880px;
  width: 100%; margin-inline: auto; }
.faq-q {
  border: 1px solid var(--hair); border-radius: 14px;
  background: rgba(255,255,255,0.016);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.faq-q:hover { border-color: var(--hair-2); }
.faq-q[open] { border-color: rgba(var(--accent-rgb),0.26); background: rgba(var(--accent-rgb),0.045); }
.faq-q > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 580; letter-spacing: -0.015em; color: var(--text);
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-mark {
  flex: none; margin-left: auto; position: relative; width: 13px; height: 13px;
  transition: transform .3s var(--ease-out);
}
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px; border-radius: 2px;
  background: var(--text-2); transform: translateY(-50%);
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); transition: opacity .25s var(--ease); }
.faq-q[open] .faq-mark { transform: rotate(180deg); }
.faq-q[open] .faq-mark::after { opacity: 0; }
.faq-a { padding: 0 20px 18px; color: var(--text-2); font-size: 0.94rem;
  line-height: 1.62; max-width: 68ch; text-wrap: pretty; }
.faq-a p + p { margin-top: 9px; }
.faq-a b { color: var(--text); font-weight: 580; }
.faq-foot { color: var(--text-3); font-size: 0.86rem; text-align: center; }
.faq-foot a { color: var(--accent-bright); }
.faq-foot a:hover { text-decoration: underline; }

/* ============================================================
   ACT V · FINALE
   ============================================================ */
.act-beta { position: relative; }
.finale {
  min-height: 88vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 26px; padding: 14vh var(--gut) 12vh;
}
.craft { position: relative; width: 230px; height: 230px; display: grid; place-items: center; margin-bottom: 6px; }
.craft-mark { width: 130px; height: 130px; border-radius: 30px;
  box-shadow: 0 0 70px rgba(var(--accent-rgb),0.4); }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),0.18); }
.ring--1 { inset: 0; }
.ring--2 { inset: 26px; border-color: rgba(var(--accent-bright-rgb),0.24); }
.ring .sat { position: absolute; top: -3.5px; left: calc(50% - 3.5px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 12px 2px rgba(var(--accent-bright-rgb),0.8); }
@media (prefers-reduced-motion: no-preference) {
  .ring--1 { animation: spin 56s linear infinite; }
  .ring--2 { animation: spin 38s linear infinite reverse; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px var(--gut) 60px; border-top: 1px solid var(--hair);
  text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; }
.footer-brand img { border-radius: 6px; }
.footer-meta { color: var(--text-3); font-size: 0.84rem; max-width: 60ch; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  color: var(--text-3); font-size: 0.84rem; }
.footer-links a { color: var(--text-2); transition: color .2s; }
.footer-links a:hover { color: var(--text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-field { display: none; }
  .space-head { flex-wrap: wrap; gap: 10px 14px; }
  .space-id { flex: 1 1 100%; }
  .space-id span { white-space: normal; }
  .space-link { margin-left: 0; }
  .canvas { min-height: 340px; max-height: 62vh; }
  .minimap { width: 128px; height: 78px; }
  .hud-hint { display: none; }
  /* the notes stack; the rules turn from columns into rows */
  .demo-notes { grid-template-columns: 1fr; }
  .dn-item { padding: 15px 0 0; }
  .dn-item + .dn-item { padding-left: 0; border-top: 1px solid var(--hair); }
  .dn-item + .dn-item::before { display: none; }
  .dn-s { max-width: none; }

  .sx { display: flex; flex-direction: column; gap: 28px; }
  .sx-stage { position: static; order: -1; }
  .sx-win { height: clamp(300px, 48vh, 380px); }
  .sx-items { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
  .sx-item { width: auto; padding: 7px 13px; border-radius: 999px; border-color: var(--hair-2); }
  .sx-glyph { display: none; }
  .sx-desc { min-height: 88px; }
}
@media (max-width: 860px) {
  .nav { gap: 14px; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; width: 40px; height: 40px;
    align-items: center; justify-content: center; border-radius: 10px;
    border: 1px solid var(--hair-2); background: rgba(255,255,255,0.02);
    color: var(--text); cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 17px; height: 1.6px; border-radius: 2px;
    background: currentColor; transition: transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle span { position: relative; }
  .nav-toggle span::before { position: absolute; top: -5px; }
  .nav-toggle span::after  { position: absolute; top: 5px; }
  .nav[data-open="1"] .nav-toggle span { background: transparent; }
  .nav[data-open="1"] .nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
  .nav[data-open="1"] .nav-toggle span::after  { transform: translateY(-5px) rotate(-45deg); }

  /* anchored to the bar itself, so the announce strip and the scrolled
     state can never push the bar over its own sheet */
  .nav-links {
    position: absolute; top: calc(100% + 6px); left: 14px; right: 14px; bottom: auto;
    flex-direction: column;
    align-items: stretch; gap: 4px; margin-left: 0; padding: 12px;
    border-radius: 16px; border: 1px solid var(--hair-2);
    background: rgba(8,10,17,0.94);
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none;
    transition: opacity .25s var(--ease), transform .3s var(--ease-out);
  }
  .nav[data-open="1"] .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 11px 13px; border-radius: 10px; font-size: 0.95rem; }
  .nav-links a:hover { background: var(--accent-soft); }
  .nav .nav-cta { display: none; }
  .nav-links .nav-sheet-cta {
    display: inline-flex; justify-content: center;
    margin-top: 8px; padding: 12px 20px; border-radius: 12px; font-size: 0.92rem;
  }

  /* dropdowns flatten into the panel: buttons go, links stay */
  .nav-item { display: contents; }
  .nav-drop { display: none; }
  .nav-menu {
    /* inherit, not auto: the closed sheet is pointer-events:none, and a flat
       child must not keep catching taps through an invisible panel */
    position: static; transform: none; opacity: 1; pointer-events: inherit;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; padding: 0; border: none; border-radius: 0;
    background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-menu::before { display: none; }
  .nav-menu a { flex-direction: row; align-items: baseline; gap: 8px; }
  .nav-menu .nm-s { display: none; }
}
@media (max-width: 760px) {
  .announce { padding: 0 44px; }
  .announce-t { display: none; }
  .announce-t--short { display: inline; }
  .space-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .space-link { margin-left: 0; }
  .app-acts { display: none; }
  /* the toolbar keeps its identity; the empty-state note folds away */
  .ab-note, .ab-div { display: none; }
  .app-bar { padding: 8px 12px; }
  .plug-grid, .follow-grid { grid-template-columns: 1fr; }
  .finale { gap: 20px; }
  .craft { width: 180px; height: 180px; }
  .craft-mark { width: 100px; height: 100px; }
}
@media (max-width: 560px) {
  /* a 148px map on a 390px canvas is a lid, not a HUD */
  .minimap { display: none; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2rem, 10.2vw, 2.45rem); }
  .h-display { font-size: clamp(2.1rem, 10.5vw, 2.5rem); }
  .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* ============================================================
   HERO EDGE — the three uncontested things, on the first screen
   ============================================================ */
.hero-edge {
  list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.015);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-edge li { flex: 1 1 210px; min-width: 0; }
.hero-edge li + li { border-left: 1px solid var(--hair); }
.hero-edge a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 17px; height: 100%;
  transition: background .25s var(--ease);
}
.hero-edge a:hover { background: rgba(var(--accent-rgb),0.07); }
.hero-edge b {
  font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.hero-edge b::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.7);
}
.hero-edge span { font-size: 0.76rem; color: var(--text-3); line-height: 1.4; padding-left: 12px; }

/* ============================================================
   ACT · THE PHONE — the companion, drawn rather than screenshotted
   ============================================================ */
.ph-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(36px, 6vw, 84px); align-items: center;
}
/* the section shells centre their heads; this one is a column of prose */
.ph-copy .sec-head, .lm-copy { align-items: flex-start; text-align: left; }
.ph-copy .sec-head .kicker { justify-content: flex-start; }
.ph-copy { display: flex; flex-direction: column; gap: 28px; }

.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ph-list li { position: relative; padding-left: 22px; }
.ph-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 9px rgba(var(--accent-rgb),0.55);
}
.ph-list b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.ph-list span { display: block; font-size: 0.9rem; line-height: 1.55; color: var(--text-2); max-width: 52ch; }
.ph-note { font-size: 0.86rem; color: var(--text-3); line-height: 1.55; max-width: 50ch; }
.ph-note b { color: var(--text-2); font-weight: 600; }

.ph-stage { position: relative; display: grid; place-items: center; }
.ph-glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.20), transparent 68%);
  filter: blur(30px); pointer-events: none;
}

/* The handset is a frame; what's inside it is the companion itself. The screen
   is authored at the phone's true 393 × 852 pt with the PWA's own type scale
   (NullSpace-mobile/src: index.css tokens, AppBar, Segmented, AgentRow, TabBar)
   and scaled down as ONE block — so every number below is the number the app
   ships, and a component that changes there changes here by the same figure. */
.ph-device {
  --ph-w: 306;                        /* what those 393pt are drawn at, in px */
  --ph-s: calc(var(--ph-w) / 393);    /* … and the scale that gets us there */
  position: relative;
  width: calc(var(--ph-w) * 1px + 18px);
  height: calc(852px * var(--ph-s) + 18px);
  max-width: 100%;
  border-radius: 42px; padding: 9px;
  background: linear-gradient(165deg, #23283A, #0D0F18 46%, #191D2B);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 40px 90px rgba(0,0,0,0.62);
}
/* the glass: the app's own Background.tsx — void, two nebulae, a dotted grid */
.ph-viewport {
  position: absolute; inset: 9px; overflow: hidden;
  border-radius: 34px; border: 1px solid rgba(255,255,255,0.05);
  background:
    radial-gradient(closest-side at 50% 4%, rgba(110,139,255,0.16), transparent),
    radial-gradient(closest-side at 106% 100%, rgba(61,85,201,0.20), transparent),
    #030409;
}
.ph-viewport::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 78%);
}
.ph-screen {
  --ink-faint: #3C4356;               /* the mobile token the site has no name for */
  --dg: #FF6B7A;
  position: relative; width: 393px; height: 852px;
  transform: scale(var(--ph-s)); transform-origin: 0 0;
  display: flex; flex-direction: column;
  font-family: var(--font-ui); color: var(--text); line-height: 1.4;
}

/* ---- iOS chrome (the OS, not us — the PWA runs standalone under it) ---- */
.ios-bar {
  flex: none; height: 54px; padding: 0 32px 0 34px;
  display: flex; align-items: center; justify-content: space-between;
}
.ios-time { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ios-right { display: inline-flex; align-items: center; gap: 6px; fill: var(--text); }
.ios-sig { width: 18px; height: 12px; }
.ios-wifi { width: 16px; height: 12px; }
.ios-batt { width: 26px; height: 12px; }
.ios-batt-c { fill: none; stroke: var(--text); stroke-width: 1; opacity: 0.42; }

/* ---- AppBar ---- */
.m-appbar {
  flex: none; border-bottom: 1px solid var(--hair);
  background: rgba(6,7,13,0.7); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.m-appbar-in { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; }
.m-appbar-t { flex: 1; min-width: 0; padding: 0 4px; }
.m-title-row { display: flex; align-items: center; gap: 8px; }
/* the phone mock-up's own title — a picture of a heading, not a heading, so the
   page keeps exactly one <h1> */
.m-title-row .m-h1 { font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--text); }
.m-live {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; background: rgba(91,224,168,0.12);
  font-size: 10px; font-weight: 600; letter-spacing: 0.025em;
  text-transform: uppercase; color: var(--success);
}
.m-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.m-sub { font-size: 12px; line-height: 1.25; color: var(--text-3); }

/* ---- the tab's own body: Segmented + the agent rows ---- */
.m-main { flex: 1 1 auto; min-height: 0; padding: 16px 16px 24px; }
.m-seg {
  display: flex; padding: 4px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.04);
  font-size: 13px; font-weight: 500;
}
.m-seg-b {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; color: var(--text-3);
}
.m-seg-b.on { background: rgba(var(--accent-rgb),0.20); color: var(--text); }
.m-seg-b em {
  font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,0.05); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.m-seg-b.on em { background: rgba(255,255,255,0.10); color: var(--text-2); }

.m-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* .glass + rounded-card + p-3.5, exactly as AgentRow draws it */
.m-row {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 20px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -28px rgba(0,0,0,0.9);
}
.m-kind {
  flex: none; width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(255,255,255,0.06); color: var(--text-2);
}
.m-kind--ai { background: rgba(var(--accent-rgb),0.15); color: var(--accent-bright); }
.m-row-main { flex: 1; min-width: 0; }
.m-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.m-prev {
  font-size: 12px; font-family: var(--font-mono); color: var(--text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.m-vitals { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.m-model {
  flex: none; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,0.06); font-weight: 500; color: var(--text-2);
}
.m-ctx { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.m-ctx i { display: block; flex: none; width: 56px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.m-ctx i em { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.m-ctx b {
  font-family: var(--font-mono); font-weight: 400; color: var(--accent-bright);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* StatusPill — one tone vocabulary (lib/tone.ts) for pill, text and dot */
.m-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.m-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m-pill--busy { background: rgba(91,224,168,0.12); color: var(--success); }
.m-pill--attention { background: rgba(255,197,110,0.12); color: var(--warning); }
.m-pill--idle { background: rgba(255,255,255,0.05); color: var(--text-3); }
.m-pill--exited { background: rgba(var(--accent-bright-rgb),0.12); color: var(--accent-bright); }
@media (prefers-reduced-motion: no-preference) {
  .ns-pulse { animation: ns-pulse 1.4s var(--ease-out) infinite; }
}
@keyframes ns-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}

/* ---- TabBar: two tabs a side, NullAgent's portal in the middle ---- */
.m-tabs {
  flex: none; margin-top: auto;
  padding: 32px 12px 44px;   /* pt-8 … pb-[safe+10] */
  background: linear-gradient(to top, var(--void-deep), rgba(3,4,9,0.8) 52%, transparent);
}
.m-dock {
  display: flex; align-items: stretch; padding: 0 6px; border-radius: 26px;
  border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), rgba(12,14,22,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05),
              0 24px 48px -20px rgba(0,0,0,0.9), 0 4px 16px -6px rgba(0,0,0,0.6);
}
.m-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; font-size: 10px; font-weight: 500; color: var(--text-3);
}
.m-tab.on { color: var(--accent-bright); }
.m-tab-i { position: relative; display: grid; place-items: center; width: 48px; height: 28px; border-radius: 999px; }
.m-tab.on .m-tab-i {
  background: rgba(var(--accent-rgb),0.15);
  box-shadow: 0 0 16px -2px rgba(var(--accent-rgb),0.45);
}
.m-tab-i svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.m-tab.on .m-tab-i svg { stroke-width: 2.2; }
.m-badge {
  position: absolute; top: -4px; right: 4px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--dg); color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal; line-height: 1;
}
.m-portal { position: relative; flex: none; width: 72px; }
.m-orb-ring {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  padding: 1px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(169,198,255,0.65), rgba(59,76,133,0.9));
  box-shadow: 0 10px 28px -8px rgba(var(--accent-rgb),0.55), 0 4px 14px -6px rgba(0,0,0,0.8);
}
/* the portal is a round window into the void, with faint stars inside */
.m-orb {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background-image:
    radial-gradient(1px 1px at 24% 22%, rgba(234,242,255,0.95), transparent 55%),
    radial-gradient(1px 1px at 72% 30%, rgba(143,180,255,0.8), transparent 55%),
    radial-gradient(1.5px 1.5px at 64% 76%, rgba(234,242,255,0.5), transparent 55%),
    radial-gradient(1px 1px at 34% 80%, rgba(143,180,255,0.45), transparent 55%),
    radial-gradient(1px 1px at 84% 56%, rgba(234,242,255,0.35), transparent 55%),
    radial-gradient(130% 130% at 32% 18%, #141d36 0%, #070a13 58%, #04050a 100%);
}
.m-orb img { width: 42px; height: 42px; }
@media (prefers-reduced-motion: no-preference) {
  .m-orb img { animation: ns-bob 3.2s ease-in-out infinite; }
}
@keyframes ns-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ============================================================
   ACT · HEAD-ROOM — the limits instrument
   ============================================================ */
.lm-grid {
  display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px); align-items: center;
}
.lm-copy .kicker { justify-content: flex-start; }
/* The plate is the canvas window, drawn at the app's own point size: the same
   window chrome, the same 10pt padding, the same rings, rows, rules and legend.
   Sizes here are the Swift numbers (Theme.ui(11.5) → 11.5px, dial 82, ring 6.5
   wide with a 4pt gap, chart 96 tall over a 28pt gutter). */
.lm-stage { position: relative; display: flex; justify-content: center; }
/* the same card chrome the board's windows wear — it is the same app */
.lm-win {
  width: 100%; max-width: 420px; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--hair);
  background: #0E1018;
  box-shadow: 0 9px 16px rgba(0,0,0,0.40), 0 30px 70px rgba(0,0,0,0.45);
}
.lm-win .win-bar { cursor: default; }
.lm-ic { display: grid; place-items: center; width: 13px; height: 13px; }
.lm-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.lm-plate {
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
  background: #0A0C12;                       /* Theme.surface — the card body */
  font-family: var(--font-ui);
}

/* ---- UsageStatusStrip ---- */
.lm-strip {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--hair);
}
.lm-brand { flex: none; width: 18px; text-align: center; font-size: 13px; color: #E8875F; }
.lm-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lm-who b { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--text); }
.lm-chev { font-style: normal; font-size: 9px; line-height: 1; color: var(--text-3); transform: translateY(-1px); }
.lm-who > span { font-size: 10px; color: #5A6276; }
.lm-refresh { margin-left: auto; flex: none; color: var(--text-2); display: grid; place-items: center; }
.lm-refresh svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-live {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 4px rgba(91,224,168,0.7);
}

/* ---- AgentQuotaBody: the ring cluster and its key rows ---- */
.lm-body { display: flex; align-items: center; gap: 14px; }
.lm-cluster { position: relative; flex: none; width: 82px; height: 82px; }
.lm-dials { display: block; }
.lm-arc { filter: drop-shadow(0 0 3px rgba(255,255,255,0.18)); }
.lm-hole {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; pointer-events: none;
}
.lm-hole b {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  line-height: 1; color: var(--success);
}
.lm-hole span { font-size: 6.5px; font-weight: 500; color: #5A6276; }

.lm-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.lm-row { display: flex; align-items: flex-start; gap: 8px; }
.lm-key { flex: none; width: 10px; height: 10px; margin-top: 3px; }
.lm-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-w b { font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.lm-w i { font-style: normal; font-size: 9.5px; color: #5A6276; }
.lm-pct {
  flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* severity, always carried by the numbers: green above 30, amber to 15, red under */
.lm-pct.is-ok { color: var(--success); }
.lm-pct.is-warn { color: var(--warning); }
.lm-pct.is-low { color: #FF6B7A; }

.lm-rule { height: 1px; background: var(--hair); }

/* ---- HeadroomChart + HeadroomLegend ---- */
.lm-burn { display: flex; flex-direction: column; gap: 7px; }
.lm-burn-head { display: flex; align-items: center; gap: 6px; }
.lm-axis { font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: #5A6276; }
.lm-spans { margin-left: auto; display: inline-flex; gap: 2px; }
.lm-spans b {
  padding: 2px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 600; color: #5A6276;
}
.lm-spans b.on { background: var(--panel-hi); color: var(--text); }

.lm-chart { display: block; width: 100%; height: auto; }
.lm-gl { stroke: rgba(255,255,255,0.045); stroke-width: 1; }
.lm-gl.dash { stroke-dasharray: 2 3; }
.lm-gl.major { stroke: rgba(255,255,255,0.085); }
.lm-tick { font-family: var(--font-ui); font-size: 9px; fill: #5A6276; }
.lm-tick.ahead { fill-opacity: 0.55; }
.lm-trail { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-proj { fill: none; stroke-width: 1.6; stroke-dasharray: 3.5 3.5; opacity: 0.75; }
/* the end cap: a short upright tick, so a projection reads as "lands here" */
.lm-cap { fill: none; stroke-width: 1.6; opacity: 0.75; }

.lm-legend { display: flex; align-items: flex-start; gap: 7px; }
.lm-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5px; }
.lm-leg-t {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; color: var(--text);
}
.lm-leg-t i { flex: none; width: 5px; height: 5px; border-radius: 50%; }
.lm-leg-r { font-size: 8.5px; color: var(--text-2); }
.lm-leg-s { font-size: 8.5px; }
.lm-leg-s.is-ok { color: var(--success); }
.lm-leg-s.is-warn { color: var(--warning); }
.lm-leg-s.is-low { color: #FF6B7A; }

.lm-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 13px; text-align: left; }
.lm-list li { font-size: 0.92rem; line-height: 1.58; color: var(--text-2); max-width: 54ch; padding-left: 18px; position: relative; }
.lm-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--accent-line);
}
.lm-list b { color: var(--text); font-weight: 600; }
.lm-note { font-size: 0.8rem; color: var(--text-faint); text-align: left; }

/* ============================================================
   ACT · NULLAGENT — the voice layer, in preview
   ============================================================ */
.va-bar {
  display: flex; align-items: center; gap: 14px;
  max-width: 760px; margin-inline: auto; padding: 11px 16px;
  border: 1px solid var(--hair-2); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)), rgba(12,14,22,0.9);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.10), 0 22px 60px rgba(0,0,0,0.5);
}
.va-orb {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.6);
}
.va-orb i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.92); }
.va-wave { flex: none; display: flex; align-items: center; gap: 2.5px; height: 20px; }
.va-wave i {
  width: 2px; border-radius: 2px; background: var(--accent-bright); opacity: 0.75;
  height: calc(4px + (var(--h, 6)) * 1px);
}
.va-wave i:nth-child(1) { --h: 4 } .va-wave i:nth-child(2) { --h: 9 }
.va-wave i:nth-child(3) { --h: 14 } .va-wave i:nth-child(4) { --h: 7 }
.va-wave i:nth-child(5) { --h: 12 } .va-wave i:nth-child(6) { --h: 3 }
.va-wave i:nth-child(7) { --h: 10 } .va-wave i:nth-child(8) { --h: 15 }
.va-wave i:nth-child(9) { --h: 6 }  .va-wave i:nth-child(10) { --h: 11 }
.va-wave i:nth-child(11) { --h: 4 } .va-wave i:nth-child(12) { --h: 8 }
@media (prefers-reduced-motion: no-preference) {
  .va-wave i { animation: va-bob 1.35s var(--ease) infinite alternate; animation-delay: calc(var(--h, 6) * -0.07s); }
}
@keyframes va-bob { from { transform: scaleY(0.42); } to { transform: scaleY(1); } }
.va-said {
  flex: 1 1 auto; min-width: 0; font-size: 0.92rem; color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.va-keys { flex: none; display: flex; align-items: center; gap: 6px; }
.va-keys span { font-size: 0.7rem; color: var(--text-faint); margin-right: 4px; }

/* home.css never needed a key cap before; the voice section does */
kbd {
  font-family: var(--font-mono); font-size: 0.82em; white-space: nowrap;
  padding: 1.5px 6px; border-radius: 6px;
  border: 1px solid var(--hair-2); border-bottom-width: 2px;
  background: rgba(255,255,255,0.05); color: var(--text-2);
}

.va-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.va-card {
  position: relative; padding: 22px 22px 24px;
  border: 1px solid var(--hair); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  transition: border-color .3s var(--ease), transform .3s var(--ease-out);
}
.va-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.va-n {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--accent); margin-bottom: 12px;
}
.va-card h3 { font-size: 1rem; font-weight: 620; letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; }
.va-card p { font-size: 0.89rem; line-height: 1.58; color: var(--text-2); }

.va-note {
  max-width: 76ch; margin-inline: auto; text-align: center;
  padding: 18px 22px; border-radius: 16px;
  border: 1px solid rgba(255,197,110,0.22); background: rgba(255,197,110,0.04);
  font-size: 0.9rem; line-height: 1.6; color: var(--text-2);
}
.va-note b { color: var(--warning); font-weight: 620; }
.va-note a { color: var(--accent-bright); white-space: nowrap; }
.va-note a:hover { color: var(--accent); }

/* ── the two voice layers, side by side: one shipping, one coming ── */
.vsplit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.vlane {
  position: relative; min-width: 0;
  padding: 26px clamp(20px, 2.4vw, 30px) 24px;
  border: 1px solid var(--hair); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.vlane:hover { border-color: var(--accent-line); transform: translateY(-3px); }
/* the shipping lane carries the brand edge; the coming one stays quiet */
.vlane--now { border-color: rgba(91,224,168,0.20); }
.vlane--now:hover { border-color: rgba(91,224,168,0.42); }
.vlane-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair-2);
}
.vlane-tag--live { color: var(--success); border-color: rgba(91,224,168,0.32); }
.vlane-tag--live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px rgba(91,224,168,0.8);
}
.vlane-h h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 640; letter-spacing: -0.025em;
  color: var(--text); margin: 13px 0 9px;
}
.vlane-h p { font-size: 0.93rem; line-height: 1.62; color: var(--text-2); }
.vlane-h kbd, .vlane-l kbd {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--text);
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--hair-3); background: rgba(255,255,255,0.05);
  white-space: nowrap;
}
.vlane-l { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.vlane-l li {
  position: relative; padding-left: 19px;
  font-size: 0.875rem; line-height: 1.6; color: var(--text-2);
}
.vlane-l li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6);
}
.vlane--now .vlane-l li::before { background: var(--success); box-shadow: 0 0 8px rgba(91,224,168,0.6); }
.vlane-l b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .vsplit { grid-template-columns: 1fr; gap: 13px; }
  .vlane { padding: 22px 18px 20px; border-radius: 16px; }
}

/* ============================================================
   ACT · THE UNATTENDED MAC — the menu-bar panel, drawn
   ============================================================ */
.mbp {
  display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px); align-items: start;
}
.mbp-panel {
  position: sticky; top: calc(var(--announce-h) + 84px);
  border: 1px solid var(--hair-2); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset;
  font-size: 0.83rem;
}
.mbp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--hair);
  background: rgba(255,255,255,0.022);
}
.mbp-head b { font-size: 0.86rem; font-weight: 620; color: var(--text); letter-spacing: -0.01em; }
.mbp-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.65rem;
  color: var(--success); padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(91,224,168,0.3); background: rgba(91,224,168,0.07);
}
.mbp-lane {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-bottom: 1px solid var(--hair);
}
.mbp-ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 0.86rem; color: var(--accent-bright);
  border: 1px solid var(--hair-2); background: rgba(var(--accent-rgb),0.08);
}
.mbp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbp-txt b { font-size: 0.83rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.mbp-txt i {
  font-style: normal; font-size: 0.72rem; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mbp-sw {
  flex: none; margin-left: auto; width: 32px; height: 18px; border-radius: 999px;
  border: 1px solid var(--hair-3); background: rgba(255,255,255,0.05); position: relative;
}
.mbp-sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text-3); transition: all .3s var(--ease);
}
.mbp-sw.on { background: rgba(var(--accent-rgb),0.30); border-color: var(--accent-line); }
.mbp-sw.on::after { left: 16px; background: var(--accent-bright); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.8); }
.mbp-foot {
  display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px;
  font-family: var(--font-mono); font-size: 0.67rem; color: var(--text-3);
  background: rgba(0,0,0,0.22);
}
.mbp-copy { display: grid; gap: 20px; }
.mbp-item { padding-left: 20px; border-left: 1px solid var(--hair-2); }
.mbp-item h3 {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 630; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 8px;
}
.mbp-item p { font-size: 0.9rem; line-height: 1.65; color: var(--text-2); }
.mbp-item em { color: var(--text); font-style: normal; font-weight: 560; }
@media (max-width: 860px) {
  .mbp { grid-template-columns: 1fr; gap: 26px; }
  .mbp-panel { position: static; max-width: 400px; margin-inline: auto; }
  .mbp-item { padding-left: 15px; }
}

/* ============================================================
   ACT · FIRST RUN — the tour and the guidebook
   ============================================================ */
.fr-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 760px) { .fr-grid { grid-template-columns: minmax(0, 1fr); } }
.fr-card {
  min-width: 0; padding: 24px clamp(19px, 2.2vw, 27px);
  border: 1px solid var(--hair); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.fr-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.fr-card--wide { grid-column: 1 / -1; }
.fr-n {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-bright);
}
.fr-card h3 {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem); font-weight: 630; letter-spacing: -0.022em;
  color: var(--text); margin: 9px 0 9px;
}
.fr-card p { font-size: 0.89rem; line-height: 1.66; color: var(--text-2); }
.fr-card b { color: var(--text); font-weight: 600; }
.fr-card em { font-style: normal; color: var(--text); font-weight: 560; }
.fr-card kbd {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--text);
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--hair-3); background: rgba(255,255,255,0.05); white-space: nowrap;
}
@media (min-width: 900px) { .fr-card--wide p { max-width: 78ch; } }

/* ============================================================
   ACT · THE STRAIGHT ANSWER — what leaves the Mac, what money buys
   ============================================================ */
.hon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 14px;
}
.hon {
  min-width: 0; padding: 24px clamp(19px, 2.2vw, 26px);
  border: 1px solid var(--hair); border-radius: 18px;
  background: rgba(255,255,255,0.014);
}
/* first card is the reassuring one, third is the ask — colour them accordingly */
.hon:first-child { border-color: rgba(91,224,168,0.20); background: rgba(91,224,168,0.030); }
.hon:last-child  { border-color: var(--accent-line);    background: rgba(var(--accent-rgb),0.045); }
.hon-h {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 15px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair);
}
.hon:first-child .hon-h { color: var(--success); border-color: rgba(91,224,168,0.20); }
.hon:last-child .hon-h  { color: var(--accent-bright); border-color: var(--accent-line); }
.hon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hon li {
  position: relative; padding-left: 18px;
  font-size: 0.875rem; line-height: 1.55; color: var(--text-2);
}
.hon li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 1.5px; background: var(--text-3);
}
.hon:first-child li::before { background: var(--success); }
.hon:last-child li::before  { background: var(--accent); }
.hon li em { font-style: italic; color: var(--text); }
.hon-p {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--accent-line);
  font-size: 0.845rem; line-height: 1.62; color: var(--text-3);
}
@media (max-width: 620px) {
  .fr-card, .hon { padding: 20px 17px; border-radius: 15px; }
}

/* ============================================================
   RELEASE CARD — the changelog's front page, on the homepage
   ============================================================ */
.rel {
  display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--hair-2); border-radius: 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb),0.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
}
.rel-l { display: flex; flex-direction: column; gap: 6px; }
.rel-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 6px;
  border: 1px solid rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.09);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright);
}
.rel-badge i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 8px rgba(var(--accent-bright-rgb),0.9);
}
.rel-v {
  font-family: var(--font-mono); font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(135deg, #fff 10%, var(--accent-bright) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rel-d { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-3); }
.rel-s { margin-top: 6px; font-size: 0.76rem; color: var(--text-faint); line-height: 1.5; }

.rel-r { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rel-list li {
  position: relative; padding-left: 18px;
  font-size: 0.92rem; line-height: 1.5; color: var(--text-2);
}
.rel-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--accent-line);
}
.rel-list b { color: var(--text); font-weight: 600; }

/* ---- narrow: both split sections stack, copy first ---- */
@media (max-width: 780px) {
  .rel { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 900px) {
  .ph-grid, .lm-grid { grid-template-columns: 1fr; gap: 40px; }
  .lm-stage { order: 2; }
  .lm-copy { order: 1; }
  .ph-device { --ph-w: 292; margin-inline: auto; }
  .va-bar { flex-wrap: wrap; border-radius: 20px; }
  .va-said { flex-basis: 100%; white-space: normal; order: 3; }
  .va-keys { margin-left: auto; }
}

/* ============================================================
   THE PHONE BUILD
   ------------------------------------------------------------
   A phone is not a narrow desktop. The inline <head> script
   decides what a phone is (UA, pointer, width) and stamps it on
   <html data-device>, so this sheet and home.js can never
   disagree. Everything here keys off that one attribute.

   The rule of the page changes: on a desktop the canvas is a
   toy you drive; on a phone it is a film you watch. Nothing on
   the board can be panned, zoomed, dragged or typed into —
   the camera walks it for you, and one button stops it.
   ============================================================ */
.on-phone { display: none; }
html[data-device="phone"] .on-phone { display: inline; }
html[data-device="phone"] .on-wide { display: none; }

html[data-device="phone"] {
  --gut: 18px;
  --announce-h: 40px;
}

/* ---- ambient layers: quieter, and nothing spinning on a battery ---- */
html[data-device="phone"] .bg-orbits { opacity: 0.32; }
html[data-device="phone"] .orbit { animation: none !important; }
html[data-device="phone"] .neb--1 { width: 720px; height: 720px; top: -320px; }
html[data-device="phone"] .neb--2 { width: 560px; height: 560px; right: -260px; }

/* ---- nav: a sheet anchored to the bar itself, CTA inside it ---- */
html[data-device="phone"] .nav { padding: 12px var(--gut); gap: 12px; }
html[data-device="phone"] .brand-mark { width: 26px; height: 26px; }
html[data-device="phone"] .nav-links {
  position: absolute; top: calc(100% + 6px); left: var(--gut); right: var(--gut);
  inset-inline: var(--gut); max-height: 72svh; overflow-y: auto;
  padding: 10px; gap: 2px;
}
html[data-device="phone"] .nav-menu a { padding: 10px 13px; }

/* ---- hero: shorter runway, thumb-width buttons ---- */
html[data-device="phone"] .act-hero {
  min-height: 0;
  padding: calc(var(--announce-h) + 92px) var(--gut) 26px;
}
html[data-device="phone"] .hero-core { gap: 16px; }
html[data-device="phone"] .hero-title { font-size: clamp(2.1rem, 11vw, 2.9rem); }
html[data-device="phone"] .hero-sub { font-size: 1rem; line-height: 1.5; }
html[data-device="phone"] .hero-cta { width: 100%; gap: 10px; }
html[data-device="phone"] .hero-cta .btn { flex: 1 1 100%; justify-content: center; padding: 14px 20px; }
html[data-device="phone"] .hero-note { font-size: 0.66rem; letter-spacing: 0.09em; }

/* ============================================================
   THE PHONE DEMO — a trailer, not a toy
   ============================================================ */
html[data-device="phone"] .act-space { padding: 8px var(--gut) 44px; }
/* a phone screen sets its own width — the desktop board's 16:10 frame is off */
html[data-device="phone"] .space-inner { width: 100%; }
html[data-device="phone"] .space-head { margin-bottom: 12px; }
html[data-device="phone"] .space-id { font-size: 0.86rem; flex-wrap: wrap; gap: 8px; }
html[data-device="phone"] .space-id span { white-space: normal; }
html[data-device="phone"] .demo { gap: 12px; }
html[data-device="phone"] .app { border-radius: 14px; }
html[data-device="phone"] .app-bar { padding: 7px 10px; gap: 6px; }
html[data-device="phone"] .ab-grid { display: none; }

html[data-device="phone"] .canvas {
  aspect-ratio: auto; min-height: 0; max-height: none;
  height: 62vh; height: clamp(340px, 62svh, 520px);
  cursor: default;
  touch-action: pan-y;               /* the page scroll is the only gesture here */
}
/* a phone on its side has height to spare and none to waste */
@media (orientation: landscape) and (max-height: 560px) {
  html[data-device="phone"] .canvas { height: 78vh; height: 78svh; min-height: 260px; }
}
/* the board is scenery: nothing in it can be tapped, dragged or focused */
html[data-device="phone"] .demo .world { pointer-events: none; user-select: none; -webkit-user-select: none; }
html[data-device="phone"] .demo .hud,
html[data-device="phone"] .demo .veil,
html[data-device="phone"] .demo .cc-in { display: none; }
html[data-device="phone"] .win-bar { cursor: default; }
/* a trailer needs no window furniture that invites a click */
html[data-device="phone"] .win .d-x, html[data-device="phone"] .win .d-m { opacity: 0.55; }

/* the chapter spotlight — the camera's subject wears the app's focus ring */
html[data-device="phone"] .win { transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }

/* ---- the player strip: site chrome, plainly separate from app chrome ---- */
.trailer[hidden] { display: none; }
.trailer {
  position: relative; z-index: 6;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), #0A0C13;
  padding: 9px 11px 10px;
}
.tr-track { display: flex; gap: 3px; height: 3px; margin-bottom: 9px; }
.tr-seg {
  flex: 1; height: 100%; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.09);
}
.tr-seg b {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}
.tr-seg.done b { transform: scaleX(1); opacity: 0.45; }
.tr-seg.on b { animation: tr-fill var(--d, 4s) linear forwards; }
@keyframes tr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trailer.paused .tr-seg.on b, .trailer.halt .tr-seg.on b { animation-play-state: paused; }

.tr-row { display: flex; align-items: center; gap: 10px; }
.tr-play {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.04);
  color: var(--text);
}
.tr-play:active { background: rgba(255,255,255,0.09); }
.tr-i { width: 11px; height: 11px; fill: currentColor; }
.tr-i--play { display: none; }
.trailer.paused .tr-i--pause { display: none; }
.trailer.paused .tr-i--play { display: block; }
.tr-cap {
  flex: 1; min-width: 0; margin: 0;
  font-size: 0.8rem; font-weight: 540; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tr-n {
  flex: none; font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* ---- the three notes read as a list, not a table ---- */
html[data-device="phone"] .demo-notes { margin-top: 0; }
html[data-device="phone"] .dn-item { padding-top: 13px; }
html[data-device="phone"] .dn-k { font-size: 0.88rem; }
html[data-device="phone"] .dn-s { font-size: 0.83rem; line-height: 1.5; }

/* ============================================================
   PHONE · the rest of the page
   ============================================================ */
html[data-device="phone"] .act-section { padding: clamp(64px, 9vh, 92px) var(--gut); }
html[data-device="phone"] .sec-inner { gap: 32px; }
html[data-device="phone"] .h2 { font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
html[data-device="phone"] .sec-lead { font-size: 0.95rem; }
html[data-device="phone"] .kicker { font-size: 0.62rem; letter-spacing: 0.2em; }

/* surfaces — one scrolling rail of chips per group, stage on top */
html[data-device="phone"] .sx { gap: 22px; }
html[data-device="phone"] .sx-index { gap: 18px; }
html[data-device="phone"] .sx-group-head { gap: 10px; }
html[data-device="phone"] .sx-items {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 2px 0 6px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: none;
}
html[data-device="phone"] .sx-items::-webkit-scrollbar { display: none; }
html[data-device="phone"] .sx-item { flex: none; scroll-snap-align: center; }
html[data-device="phone"] .sx-win { height: clamp(270px, 44svh, 340px); }
html[data-device="phone"] .sx-desc { min-height: 76px; }

/* plugins, follow, faq, finale */
html[data-device="phone"] .plug-body { padding: 14px; }
html[data-device="phone"] .plug-foot .btn { width: 100%; justify-content: center; }
html[data-device="phone"] .faq-q summary { font-size: 0.95rem; }
html[data-device="phone"] .act-beta { padding-bottom: 30px; }
html[data-device="phone"] .craft { width: 148px; height: 148px; }
html[data-device="phone"] .craft-mark { width: 84px; height: 84px; }
html[data-device="phone"] .finale .hero-cta { width: 100%; }
html[data-device="phone"] .finale .btn { flex: 1 1 100%; justify-content: center; }
html[data-device="phone"] .footer { padding-bottom: 8px; }

/* ============================================================
   PHONE · the beta stays under the thumb
   ============================================================ */
.mcta[hidden] { display: none; }
.mcta {
  position: fixed; z-index: 55; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px 11px; border-radius: 16px;
  background: rgba(8,10,17,0.92); border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.mcta.on { transform: none; opacity: 1; pointer-events: auto; }
.mcta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; border-radius: 999px;
  color: #060810; font-size: 0.95rem; font-weight: 600;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-glow));
  box-shadow: 0 0 0 1px rgba(var(--accent-bright-rgb),0.35), 0 8px 24px rgba(var(--accent-rgb),0.35);
}
.mcta-btn:active { transform: scale(0.985); }
.mcta-note {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
/* the bar is 78px of overlay — give the page its foot back */
html[data-device="phone"] body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---- the new sections, cut to a phone ---- */
@media (max-width: 620px) {
  /* four claims in one row is a desktop shape; on a thumb they are a list.
     the 210px basis is a *width* in a row — left alone in a column it becomes
     a 210px-tall empty box per claim, so it has to go back to content height */
  .hero-edge { flex-direction: column; }
  .hero-edge li { flex: 0 0 auto; }
  .hero-edge li + li { border-left: 0; border-top: 1px solid var(--hair); }
}
html[data-device="phone"] .act-phone,
html[data-device="phone"] .act-limits,
html[data-device="phone"] .act-voice { padding-inline: var(--gut); }
html[data-device="phone"] .ph-copy .sec-head,
html[data-device="phone"] .lm-copy { align-items: flex-start; text-align: left; }
html[data-device="phone"] .ph-device { --ph-w: 246; }
html[data-device="phone"] .va-bar { padding: 12px 14px; gap: 10px; }
html[data-device="phone"] .va-said { font-size: 0.86rem; }
html[data-device="phone"] .va-note { text-align: left; }

/* ============================================================
   REDUCED MOTION — end-states, instantly
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .world.glide { transition: none; }
  .cables .cgl, .cables .cbd, .cables .csh { transition: none; }
  .gg-row, .ft-row, .rp-row, .pl-task, .pl-bar::after,
  .ab-session > i, .win.glide { transition: none; }
  .sx-prev { transition: none; }
  .sx-prog { display: none; }
  .cdot { display: none; }
  .btn--primary::after { display: none; }
}

/* QA snapshot mode — render end-states instantly */
html.qa-snap * { transition-duration: 0s !important; animation: none !important; }
html.qa-snap .reveal, html.qa-snap .rise, html.qa-snap .ht-line .ht-w { opacity: 1; transform: none; }
html.qa-snap .demo .win { opacity: 1; transform: none; }
html.qa-snap .act-hero { min-height: 760px; }

/* ============================================================
   THE PHONE, LIVE — assets/js/phone.js boots the companion
   ------------------------------------------------------------
   Everything below dresses the interactive build of the phone:
   the four PWA surfaces, NullAgent's page, the task sheet and
   the toast. Shared row/pill/dock classes above stay untouched —
   the live build reuses them so still and live can never drift.
   ============================================================ */

/* interactive now — controls are real buttons inside the handset */
.ph-screen button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent;
}
/* the reset outguns single-class components (0,1,1 vs 0,1,0) — hand the
   button-flavoured ones their chrome back at .ph-screen specificity */
.ph-screen button.m-row {
  padding: 14px; border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -28px rgba(0,0,0,0.9);
}
.ph-screen .m-seg-b { padding: 6px 12px; }
.ph-screen .m-tab { padding: 8px 0 6px; }
.ph-screen .m-orb-ring {
  padding: 1px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(169,198,255,0.65), rgba(59,76,133,0.9));
  box-shadow: 0 10px 28px -8px rgba(var(--accent-rgb),0.55), 0 4px 14px -6px rgba(0,0,0,0.8);
}
.mp-app [hidden] { display: none !important; }

.mp-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.mp-screen { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.mp-screen.on { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .mp-screen.on { animation: mp-screen-in 0.22s var(--ease-out); }
}
@keyframes mp-screen-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.mp-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 24px;
  scrollbar-width: none;
}
.mp-body::-webkit-scrollbar { display: none; }
.mp-body .m-seg { margin-bottom: 0; }
.mp-body .m-list { margin-top: 16px; }

/* the icon vocabulary (lucide, same set the PWA imports) */
.mp-i {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* round appbar button (AppBar `right` slot) */
.mp-abtn {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  transition: background-color 0.15s ease;
}
.mp-abtn:active { background: rgba(255,255,255,0.08); }
.mp-abtn.is-accent { background: rgba(var(--accent-rgb),0.15); color: var(--accent-bright); }
.mp-abtn .mp-i { width: 18px; height: 18px; }
.mp-spin .mp-i, .mp-spin.mp-i { animation: mp-spin 0.8s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* tones the static build never needed */
.m-pill--running { background: rgba(var(--accent-rgb),0.14); color: var(--accent-bright); }
.m-ctx.is-warn i em { background: var(--warning); } .m-ctx.is-warn b { color: var(--warning); }
.m-ctx.is-bad i em { background: var(--dg); } .m-ctx.is-bad b { color: var(--dg); }

/* rows born from the sim slide in like ns-enter does on the phone */
@media (prefers-reduced-motion: no-preference) {
  .mp-enter { animation: mp-enter 0.26s var(--ease-out); }
}
@keyframes mp-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* tappable rows (TaskRow) */
button.m-row { width: 100%; }
.mp-tap { transition: transform 0.12s ease; }
.mp-tap:active { transform: scale(0.99); }

/* ---- Workspace · Tasks ---- */
.mp-tgroup { margin-top: 20px; }
.mp-tgroup:first-of-type { margin-top: 16px; }
.mp-tgroup .m-list { margin-top: 8px; }
.mp-tgroup-h { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.mp-tgroup-h h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-2);
}
.mp-tgroup-h span { font-size: 12px; color: var(--ink-faint); }
.mp-t-title.is-done { color: var(--text-3); text-decoration: line-through; }
.mp-t-note { margin-top: 2px; font-size: 12px; color: var(--text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-t-meta { margin-top: 3px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.mp-t-agent { color: var(--accent-bright); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-t-src { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-faint); }
.mp-t-src .mp-i { width: 12px; height: 12px; }
.mp-t-count { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mp-t-edit { width: 14px; height: 14px; flex: none; color: var(--ink-faint); }

/* ---- empty states ---- */
.mp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 32px;
}
.mp-empty .mp-i { width: 28px; height: 28px; color: var(--text-3); }
.mp-empty img { opacity: 0.9; }
.mp-empty p { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.mp-empty span { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--text-3); max-width: 260px; }

/* ---- cards (PanelCard / Card) ---- */
.mp-card {
  margin-top: 12px; padding: 16px; border-radius: 20px;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 40px -28px rgba(0,0,0,0.9);
}
.mp-card:first-child { margin-top: 0; }
.mp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mp-card-h h3 { font-size: 13px; font-weight: 600; color: var(--text); }
.mp-card.is-list { padding: 0 16px; }
.mp-card.is-hero { position: relative; overflow: hidden; }

/* ---- Limits ---- */
.mp-lmtabs {
  display: flex; gap: 4px; padding: 0 12px 8px; overflow-x: auto;
  scrollbar-width: none;
}
.mp-lmtabs::-webkit-scrollbar { display: none; }
.ph-screen .mp-lmtab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--text-3);
}
.ph-screen .mp-lmtab .mp-i { width: 16px; height: 16px; }
.ph-screen .mp-lmtab.on { background: var(--panel-hi); color: var(--text); }
.mp-livedot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px rgba(91,224,168,0.7);
}

.mp-tiles { display: flex; align-items: flex-start; gap: 12px; }
.mp-tile { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mp-tile-n { font-size: 14px; font-weight: 600; }
.mp-tile-rows { width: 100%; display: flex; flex-direction: column; gap: 6px; }

.mp-rings { position: relative; display: inline-grid; place-items: center; flex: none; }
.mp-rings svg { grid-area: 1 / 1; }
.mp-ring-read { grid-area: 1 / 1; text-align: center; line-height: 1; }
.mp-ring-read b {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.mp-ring-read span {
  display: block; padding-top: 2px; font-size: 8px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}

.mp-qrow { min-width: 0; }
.mp-qrow-l { display: flex; align-items: center; gap: 6px; }
.mp-keyglyph { flex: none; }
.mp-qrow-l > span {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mp-low {
  flex: none; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,107,122,0.15); color: var(--dg);
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
}
.mp-qpct { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-qreset { margin-top: 2px; padding-left: 20px; font-size: 10px; color: var(--text-3); }

.mp-qbody { display: flex; align-items: center; gap: 16px; }
.mp-qbody-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.mp-summary { margin-top: 12px; font-size: 12px; }
.mp-summary.is-ok { color: var(--text-3); }
.mp-summary.is-warn { color: var(--warning); }

.mp-scope {
  display: flex; padding: 2px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.04);
}
.mp-scope button { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.mp-scope button.on { background: var(--panel-hi); color: var(--text); }

.mp-axis {
  margin-bottom: 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.mp-chart { display: block; width: 100%; height: auto; }

.mp-legend { display: flex; gap: 8px; margin-top: 12px; }
.mp-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-leg-t { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text); }
.mp-leg-t i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.mp-leg-r { font-size: 10px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-leg-s { font-size: 10px; }
.mp-leg-s.is-ok { color: var(--success); }
.mp-leg-s.is-warn { color: var(--warning); }
.mp-leg-s.is-bad { color: var(--dg); }

/* ---- Alerts ---- */
.mp-hero { display: flex; align-items: center; gap: 14px; }
.mp-hero-line {
  position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.6), transparent);
}
.mp-hero-i {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 16px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--accent-rgb),0.2);
  background: rgba(var(--accent-rgb),0.1); color: var(--accent-bright);
}
.mp-hero-i.is-on {
  border-color: rgba(91,224,168,0.25); background: rgba(91,224,168,0.1); color: var(--success);
}
.mp-hero-i i { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.mp-hero-t { flex: 1; min-width: 0; }
.mp-hero-t p { font-size: 14px; font-weight: 600; color: var(--text); }
.mp-hero-t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-3); }
.mp-hero-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.mp-hero-foot button {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--accent-bright);
}
.mp-hero-foot .mp-i { width: 16px; height: 16px; }

.mp-seclab {
  margin: 20px 4px 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3);
}
.mp-seclab em { font-style: normal; color: var(--ink-faint); }
.mp-seclab.is-row { display: flex; align-items: center; justify-content: space-between; }
.mp-seclab.is-row button {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3);
}
.mp-seclab.is-row button .mp-i { width: 13px; height: 13px; }

.mp-prefrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.mp-prefrow.is-nth { border-top: 1px solid var(--hair); }
.mp-prefrow p { font-size: 14px; color: var(--text); }
.mp-prefrow span { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); }

.ph-screen .mp-switch {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ph-screen .mp-switch span {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: transform 0.2s ease;
}
.ph-screen .mp-switch.on {
  border-color: rgba(var(--accent-rgb),0.4);
  background: linear-gradient(180deg, var(--accent), #4A63C9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 14px -3px rgba(var(--accent-rgb),0.6);
}
.ph-screen .mp-switch.on span { transform: translateX(18px); }

.mp-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-alert {
  display: flex; gap: 12px; padding: 14px; border-radius: 20px;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)), var(--panel);
}
.mp-al-i { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.mp-al-i.is-attention { background: rgba(255,197,110,0.12); color: var(--warning); }
.mp-al-i.is-busy { background: rgba(91,224,168,0.12); color: var(--success); }
.mp-al-i.is-running { background: rgba(var(--accent-rgb),0.14); color: var(--accent-bright); }
.mp-al-main { flex: 1; min-width: 0; }
.mp-al-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mp-al-head p {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mp-al-head span { flex: none; font-size: 11px; color: var(--text-3); }
.mp-al-body { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--text-2); }

/* ---- Profile ---- */
.mp-who { display: flex; align-items: center; gap: 14px; margin: 2px 0 4px; }
.mp-who p { font-size: 16px; font-weight: 600; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-avatar {
  flex: none; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--void-deep); font-size: 20px; font-weight: 600;
}
.mp-plan {
  display: inline-flex; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent-rgb),0.2); color: var(--accent-bright);
  font-size: 11px; font-weight: 600;
}
.mp-dl-h { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.mp-dl-h .mp-i { width: 16px; height: 16px; }
.mp-dl-h h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.mp-dl-h span { font-size: 12px; color: var(--ink-faint); }
.mp-dl-p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.mp-cmd {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--hair); background: rgba(0,0,0,0.4);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  overflow-x: auto; white-space: pre; scrollbar-width: none;
}
.mp-cmd::-webkit-scrollbar { display: none; }
.ph-screen .mp-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; }
.ph-screen .mp-nav:active { background: rgba(255,255,255,0.03); }
.ph-screen .mp-nav.is-nth { border-top: 1px solid var(--hair); }
.ph-screen .mp-nav .mp-i { width: 18px; height: 18px; color: var(--text-3); }
.ph-screen .mp-nav span { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.ph-screen .mp-nav .mp-nav-c { width: 16px; height: 16px; color: var(--ink-faint); }
.mp-foot { margin: 14px 4px 0; font-size: 12px; color: var(--text-3); }

/* ---- buttons (Button.tsx variants) ---- */
.ph-screen .mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.ph-screen .mp-btn:active { transform: scale(0.97); }
.ph-screen .mp-btn .mp-i { width: 15px; height: 15px; }
.ph-screen .mp-btn--primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #fff; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb),0.6);
}
.ph-screen .mp-btn--subtle { background: rgba(255,255,255,0.06); color: var(--text); }
.ph-screen .mp-btn--ghost { border: 1px solid var(--hair-2); color: var(--text); }
.ph-screen .mp-btn--danger { background: rgba(255,107,122,0.12); color: var(--dg); }
.ph-screen .mp-btn.is-block { display: flex; width: 100%; padding: 12px 14px; margin-top: 14px; }
.ph-screen .mp-btn.is-grow { flex: 1; }

/* ---- task sheet ---- */
.mp-modal { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.ph-screen .mp-veil { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mp-sheet {
  position: relative; max-height: 88%; overflow-y: auto; scrollbar-width: none;
  padding: 20px 20px 28px; border-radius: 24px 24px 0 0;
  border: 1px solid var(--hair); border-bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)), var(--panel-2);
  box-shadow: 0 -24px 60px -20px rgba(0,0,0,0.8);
}
.mp-sheet::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mp-sheet { animation: mp-sheet-in 0.26s var(--ease-out); }
}
@keyframes mp-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mp-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mp-sheet-h h2 { font-size: 16px; font-weight: 600; color: var(--text); }
.mp-field { display: block; margin-top: 12px; }
.mp-field > span {
  display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.mp-input {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.05);
  font: inherit; font-size: 14px; color: var(--text);
}
.mp-input:focus { outline: none; border-color: var(--accent-line); }
.mp-input::placeholder { color: var(--ink-faint); }
.mp-steps { display: flex; flex-direction: column; gap: 8px; }
.mp-step { display: flex; align-items: center; gap: 10px; }
.mp-step-c { flex: none; display: grid; place-items: center; color: var(--text-3); }
.mp-step-c.on { color: var(--success); }
.mp-step-t { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
.mp-step-t.is-done { color: var(--text-3); text-decoration: line-through; }
.mp-step-x { flex: none; color: var(--ink-faint); }
.mp-step-x .mp-i { width: 14px; height: 14px; }
.mp-step-add { display: flex; gap: 8px; margin-top: 10px; }
.mp-step-add .mp-input { flex: 1; }
.mp-sheet-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.mp-ro-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-ro-head p { font-size: 15px; font-weight: 600; color: var(--text); }
.mp-ro-note { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.mp-ro-agent { margin: 8px 0 12px; font-size: 12px; color: var(--accent-bright); }
.mp-ro-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.mp-ro-lock .mp-i { width: 13px; height: 13px; }

/* ---- NullAgent's page (the portal's destination) ---- */
.mp-agentpage {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background-color: #04050B;
  background-image: radial-gradient(closest-side at 50% 0%, rgba(110,139,255,0.14), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .mp-agentpage { animation: mp-screen-in 0.22s var(--ease-out); }
}
.mp-ag-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.mp-ag-head p { font-size: 15px; font-weight: 600; color: var(--text); }
.mp-ag-head span { display: block; font-size: 11px; color: var(--text-3); }
.mp-ag-stage { flex: none; display: grid; place-items: center; padding: 22px 0 10px; }
.mp-ag-orb {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background-image:
    radial-gradient(1px 1px at 24% 22%, rgba(234,242,255,0.95), transparent 55%),
    radial-gradient(1px 1px at 72% 30%, rgba(143,180,255,0.8), transparent 55%),
    radial-gradient(1.5px 1.5px at 64% 76%, rgba(234,242,255,0.5), transparent 55%),
    radial-gradient(130% 130% at 32% 18%, #141d36 0%, #070a13 58%, #04050a 100%);
  box-shadow: 0 0 0 1px rgba(169,198,255,0.3), 0 18px 44px -14px rgba(var(--accent-rgb),0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .mp-ag-orb img { animation: ns-bob 3.2s ease-in-out infinite; }
}
.mp-ag-chat {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 16px;
}
.mp-ag-chat::-webkit-scrollbar { display: none; }
.mp-bub {
  max-width: 78%; padding: 10px 14px; border-radius: 18px;
  font-size: 13px; line-height: 1.45;
}
.mp-bub.is-user {
  align-self: flex-end; border-bottom-right-radius: 6px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: #fff;
}
.mp-bub.is-agent {
  align-self: flex-start; border-bottom-left-radius: 6px;
  border: 1px solid var(--hair); background: rgba(255,255,255,0.05); color: var(--text-2);
}
.mp-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.mp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .mp-typing i { animation: mp-dot 1s ease-in-out infinite; }
  .mp-typing i:nth-child(2) { animation-delay: 0.16s; }
  .mp-typing i:nth-child(3) { animation-delay: 0.32s; }
}
@keyframes mp-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.mp-ag-foot { flex: none; padding: 12px 16px 42px; }
.mp-ag-form { display: flex; align-items: center; gap: 8px; }
.ph-screen .mp-ag-input {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 15px;
  appearance: none; -webkit-appearance: none;
  border-radius: 21px; border: 1px solid var(--hair-2);
  background: rgba(255,255,255,0.04);
  font: inherit; font-size: 13px; color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ph-screen .mp-ag-input:focus { outline: none; border-color: var(--accent-line); background: rgba(255,255,255,0.06); }
.ph-screen .mp-ag-input::placeholder { color: var(--ink-faint); }
.ph-screen .mp-ag-send {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-glow));
  color: var(--void-deep); box-shadow: 0 10px 24px -10px rgba(var(--accent-rgb),0.7);
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.ph-screen .mp-ag-send .mp-i { width: 19px; height: 19px; stroke-width: 2.4; }
.ph-screen .mp-ag-send:disabled {
  background: rgba(255,255,255,0.07); color: var(--ink-faint); box-shadow: none;
}
.ph-screen .mp-ag-send:not(:disabled):active { transform: scale(0.94); }

/* empty thread: him, one line about what he's for, and four openers */
.mp-ag-chat.is-empty { justify-content: center; }
.mp-ag-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 2px 2px 8px; }
.mp-ag-intro p { font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--text-3); }
.mp-ag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ph-screen .mp-chip {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: rgba(255,255,255,0.03);
  font-size: 11.5px; color: var(--text-2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ph-screen .mp-chip:hover { border-color: var(--accent-line); background: rgba(255,255,255,0.07); }
.mp-ag-live {
  display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-radius: 50%; background: var(--success); vertical-align: middle;
}

/* ---- toast ---- */
.mp-toast {
  position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%);
  z-index: 50; max-width: 84%; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: rgba(12,14,22,0.96);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.8);
  font-size: 12px; color: var(--text); text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mp-toast.show { animation: mp-toast-in 0.24s var(--ease-out); }
}
@keyframes mp-toast-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- the "it's live" hint under the handset ---- */
.ph-hint {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-3);
}
.ph-hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px rgba(91,224,168,0.8);
}

/* dock buttons keep the static geometry; only cursor + feedback change */
.ph-screen .m-tab, .ph-screen .m-seg-b { transition: color 0.15s ease; }
.ph-screen .m-orb-ring { display: block; transition: transform 0.15s ease; }
.ph-screen .m-orb-ring:active { transform: translateX(-50%) scale(0.92); }

/* ══════════════════════════════════════════════════════════════
   LIVE REPLICAS — the drawn pieces of the app, once they behave
   (assets/js/replicas.js). Nothing here is required to read the
   page: without JS every one of these stays the still it was.
   ══════════════════════════════════════════════════════════════ */

/* Every control below is a real <button> for the keyboard's sake, and the
   stylesheet has no global button reset — so they get one here, before the
   rules that dress them. */
.lm-whobtn, .lm-refreshb, .lm-row, .lm-spans button, .lm-pick button,
.mbp-open, .va-hold {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; color: inherit; font: inherit;
  padding: 0; margin: 0; cursor: pointer;
}
.lm-whobtn:focus-visible, .lm-refreshb:focus-visible, .lm-row:focus-visible,
.lm-spans button:focus-visible, .lm-pick button:focus-visible,
.mbp-open:focus-visible, .mbp-sw:focus-visible, .va-hold:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

/* ── Agent Limits ───────────────────────────────────────────── */
.lm-strip { position: relative; }
.lm-whobtn {
  display: flex; align-items: center; min-width: 0; padding: 2px 6px; margin: -2px -6px;
  border-radius: 7px; text-align: left; transition: background .18s var(--ease);
}
.lm-whobtn:hover, .lm-whobtn[aria-expanded="true"] { background: rgba(255,255,255,0.06); }
.lm-whobtn[aria-expanded="true"] .lm-chev { transform: translateY(-1px) rotate(180deg); }
.lm-chev { transition: transform .2s var(--ease); }
.lm-pick {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; min-width: 168px;
  padding: 5px; border-radius: 11px; border: 1px solid var(--hair-2);
  background: rgba(16,18,26,0.98); box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 1px;
}
.lm-pick button {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
  font-size: 12px; color: var(--text-2); text-align: left;
}
.lm-pick button i { font-style: normal; font-size: 12px; }
.lm-pick button:hover { background: rgba(var(--accent-rgb),0.14); color: var(--text); }
.lm-refreshb {
  margin-left: auto; display: grid; place-items: center; padding: 4px; border-radius: 6px;
  color: var(--text-2); transition: background .18s var(--ease), color .18s var(--ease);
}
.lm-refreshb:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.lm-refreshb .lm-refresh { margin: 0; }
.lm-refreshb.is-spin .lm-refresh { animation: lm-spin .62s var(--ease); }
@keyframes lm-spin { to { transform: rotate(360deg); } }

.lm-row {
  width: 100%; text-align: left; padding: 3px 5px; margin: -3px -5px; border-radius: 8px;
  transition: background .16s var(--ease);
}
.lm-row:hover { background: rgba(255,255,255,0.045); }
.lm-row[aria-pressed="true"] { background: rgba(var(--accent-rgb),0.12); }
.lm-spans button {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 5px;
  color: var(--text-3); transition: background .16s var(--ease), color .16s var(--ease);
}
.lm-spans button:hover { color: var(--text-2); background: rgba(255,255,255,0.05); }
.lm-spans button.on { background: var(--panel-hi); color: var(--text); }
.lm-plate[data-focus] .lm-leg { opacity: 0.42; transition: opacity .2s var(--ease); }
.lm-plate[data-focus="session"] .lm-leg[data-w="session"],
.lm-plate[data-focus="weekly"] .lm-leg[data-w="weekly"],
.lm-plate[data-focus="model"] .lm-leg[data-w="model"] { opacity: 1; }
.lm-hole.is-warn b { color: var(--warning); }
.lm-hole.is-low b { color: #FF6B7A; }

/* ── the menu-bar panel ─────────────────────────────────────── */
.mbp-lane { position: relative; flex-wrap: wrap; }
.mbp-open {
  position: absolute; inset: 0; z-index: 1; border-radius: 10px;
  transition: background .16s var(--ease);
}
.mbp-open:hover { background: rgba(255,255,255,0.035); }
.mbp-lane .mbp-ic, .mbp-lane .mbp-txt { position: relative; z-index: 2; pointer-events: none; }
.mbp-sw { z-index: 2; cursor: pointer; }
.mbp-lane.is-off .mbp-ic { color: var(--text-3); background: rgba(255,255,255,0.03); }
.mbp-lane.is-off .mbp-txt b { color: var(--text-2); }
.mbp-detail {
  position: relative; z-index: 2; flex-basis: 100%; margin-top: 10px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.028);
  font-size: 0.72rem; line-height: 1.75; color: var(--text-3);
}
.mbp-detail b { font-weight: 600; color: var(--text-2); }
.mbp-badge.is-idle { color: var(--text-3); border-color: var(--hair-2); background: rgba(255,255,255,0.04); }
.mbp-foot span { font-variant-numeric: tabular-nums; }

/* ── the voice bar ──────────────────────────────────────────── */
.va-bar { position: relative; }
.va-hold {
  position: absolute; inset: 0; z-index: 1; border-radius: 999px; cursor: pointer;
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
.va-hold:hover { background: rgba(255,255,255,0.028); }
.va-bar > *:not(.va-hold) { position: relative; z-index: 2; pointer-events: none; }
.va-bar[data-va="listening"] { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.55), 0 22px 60px rgba(0,0,0,0.5); }
.va-bar[data-va="listening"] .va-orb { animation: va-pulse 1.1s var(--ease) infinite alternate; }
.va-bar[data-va="idle"] .va-wave i { animation-play-state: paused; opacity: 0.32; transform: scaleY(0.5); }
.va-bar[data-va="thinking"] .va-wave i,
.va-bar[data-va="acting"] .va-wave i { opacity: 0.5; transform: scaleY(0.35); animation-play-state: paused; }
.va-bar[data-va="done"] .va-wave i { opacity: 0.32; transform: scaleY(0.3); animation-play-state: paused; }
.va-bar[data-va="done"] .va-said { color: var(--success); }
.va-bar[data-va="cancelled"] .va-said { color: var(--text-3); }
.va-bar[data-va="acting"] .va-said, .va-bar[data-va="thinking"] .va-said { color: var(--accent-bright); }
/* it is talking back: the meter runs and the orb breathes for exactly as long
   as the clip lasts, so the sound has something on screen behind it */
.va-bar.is-speaking .va-wave i { opacity: 0.85; animation-play-state: running; }
.va-bar.is-speaking .va-orb { animation: va-pulse 0.62s var(--ease) infinite alternate; }
.va-said { transition: color .2s var(--ease); }
@keyframes va-pulse {
  from { box-shadow: 0 0 16px rgba(var(--accent-rgb),0.6); transform: scale(1); }
  to   { box-shadow: 0 0 26px rgba(var(--accent-rgb),0.95); transform: scale(1.09); }
}