/* =============================================================
   monkey-os.css — /projects/monkey-os case study
   Page chrome: portfolio tokens (styles.css).
   Product mockups (.mk*): Monkey OS tokens (monkey-tokens.css).
   ============================================================= */

/* No portfolio token for pure black exists; defined once here and only
   used to deepen the hero base purple. */
.mo-page { --mo-ink: #000; }

/* ── Shared section rhythm ─────────────────────────────────── */
.mo-page { overflow-x: clip; }

.mo-kicker {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--purple-900);
  margin-bottom:  var(--space-16);
}

.mo-lede {
  font-size:   var(--fs-15);
  line-height: 1.7;
  color:       var(--gray-900);
  max-width:   60ch;
}

/* Scroll reveal — only armed when JS adds .mo-motion to <html>,
   so no-JS and reduced-motion visitors get the final state. */
.mo-motion [data-mo-reveal] {
  opacity:    0;
  transform:  translateY(16px);
  filter:     blur(6px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.7,.2,1), filter 0.8s ease;
}
.mo-motion [data-mo-reveal].is-in {
  opacity: 1; transform: none; filter: none;
}

/* ── 1. Hero (Linear-style layout + gradient) ─────────────────
   Tuning (all derived from portfolio tokens, no new hex):
   --mo-hero-base-mix  how much --purple-500 deepens the hero base
   --mo-glow-hue-mix   purple share of the glow (0% = pure neutral grey)
   --mo-glow-strength  glow opacity at its brightest point            */
.mo-hero {
  --mo-hero-base-mix: 14%;
  --mo-glow-hue-mix:  22%;
  --mo-glow-strength: 34%;
  --mo-hero-base: color-mix(in oklab,
                    color-mix(in oklab, var(--bg-main), var(--purple-500) var(--mo-hero-base-mix)),
                    var(--mo-ink) 22%);
  --mo-glow: color-mix(in oklab, var(--gray-900), var(--purple-900) var(--mo-glow-hue-mix));
  position:      relative;
  isolation:     isolate;
  padding:       var(--space-8) 0 clamp(120px, 16vw, 220px);
  /* body stays in .project-detail's column (--page-pad-x); only .mo-hero__bg bleeds */
}
.mo-hero__bg {
  position:       absolute;
  z-index:        -1;
  top:            -50vh;             /* reach up under the topbar/padding */
  bottom:         0;
  left:           -50vw;
  right:          -50vw;
  pointer-events: none;
  background:
    /* fade back to the page colour: no seam with the stats strip */
    linear-gradient(to bottom, transparent 78%, var(--bg-main) 95%),
    linear-gradient(to bottom, var(--mo-hero-base), var(--mo-hero-base));
}
.mo-hero__bg::before,
.mo-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* glow layers: wide ellipse from the bottom + a tighter core for depth */
.mo-hero__bg::before {
  background:
    radial-gradient(38% 26% at 50% 78%,
      color-mix(in oklab, var(--mo-glow) calc(var(--mo-glow-strength) * 0.8), transparent) 0%,
      transparent 100%),
    radial-gradient(62% 52% at 50% 80%,
      color-mix(in oklab, var(--mo-glow) var(--mo-glow-strength), transparent) 0%,
      color-mix(in oklab, var(--mo-glow) calc(var(--mo-glow-strength) * 0.45), transparent) 38%,
      transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 94%);
  transition: opacity 1.4s ease;
}
/* dithering against banding: tiny inline feTurbulence tile */
.mo-hero__bg::after {
  opacity: 0.05;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 94%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 94%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mo-motion .mo-hero:not(.is-lit) .mo-hero__bg::before { opacity: 0; }

.mo-hero .project-detail__back { margin-bottom: 40px; }

.mo-hero__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-48);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height:    1.05;
  color:          var(--white);
  max-width:      17ch;
  margin-bottom:  var(--space-24);
}
.mo-hero__row {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--space-8) var(--space-24);
  margin-bottom:   88px;
}
.mo-hero__sub {
  font-size:   var(--fs-15);
  line-height: 1.5;
  color:       var(--gray-900);
}
.mo-hero__news {
  font-size:       var(--fs-14);
  color:           var(--gray-900);
  text-decoration: none;
  white-space:     nowrap;
}
.mo-hero__news b { font-weight: 500; color: var(--white); margin-right: 6px; }
.mo-hero__news:hover span { color: var(--white); }
.mo-hero__news:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 4px; }

/* Stage: the product UI rising from blur. Final state is the
   default; the "from" state only applies under .mo-motion. */
.mo-stage {
  position:    relative;
  perspective: 1600px;
}
/* elliptical contact shadow: gradient, not filter (cheap on phones) */
.mo-stage::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: -28px;
  height: 56px;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.6), transparent 70%);
  pointer-events: none;
  transition: opacity 1.2s ease 0.4s;
}
.mo-stage__frame {
  position:         relative;
  z-index:          1;
  transform-origin: 50% 0%;
  transition:
    opacity   1.1s ease,
    transform 1.4s cubic-bezier(.16, 1, .3, 1),
    filter    1.1s ease;
}
.mo-motion .mo-stage:not(.is-in) .mo-stage__frame {
  opacity:   0;
  transform: rotateX(22deg) translateY(64px) scale(0.94);
  filter:    blur(18px);
}
.mo-motion .mo-stage:not(.is-in)::after { opacity: 0; }
.mo-hero .mk-viewport {
  border-color: color-mix(in oklab, var(--white) 14%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--white) 6%, transparent) inset, 0 24px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
  .mo-hero__row { flex-direction: column; align-items: flex-start; margin-bottom: 48px; }
}

/* ── Mockup viewport: fixed 1280×800 frame scaled to fit ───── */
.mk-viewport {
  position:      relative;
  width:         100%;
  height:        calc(800px * var(--mk-scale, 0.5));
  overflow:      hidden;
  border-radius: 14px;
  border:        1px solid var(--section-border);
  box-shadow:    0 30px 80px rgba(0, 0, 0, 0.55);
  background:    var(--bg-main);
}
.mk-viewport > .mk {
  position:         absolute;
  top: 0; left: 0;
  transform:        scale(var(--mk-scale, 0.5));
  transform-origin: 0 0;
}

/* ── 2. Proof strip ────────────────────────────────────────── */
.mo-proof {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  border-top:    1px solid var(--section-border);
  border-bottom: 1px solid var(--section-border);
  margin-bottom: 64px;
}
.mo-proof__item {
  padding:     var(--space-24) var(--space-16);
  border-left: 1px solid var(--section-border);
}
.mo-proof__item:first-child { border-left: 0; }
.mo-proof__num {
  display:        block;
  font-family:    var(--font-headings);
  font-size:      var(--fs-40);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  color:          var(--white);
  line-height:    1;
  margin-bottom:  var(--space-8);
}
.mo-proof__label {
  font-family: var(--font-mono);
  font-size:   var(--fs-12);
  color:       var(--gray-900);
}

/* ── 4. Cluster architecture: layered windows (Linear-style) ──
   Back window = cluster board (mask-faded at its outer edges only;
   every cluster button sits in the fully opaque zone). Front window =
   orchestrator thread that swaps to the chosen cluster's agents. */
.mo-tab:focus-visible,
.mo-theme__btn:focus-visible,
.mo-ctl:focus-visible {
  outline:        2px solid var(--purple-700);
  outline-offset: 2px;
}
.mo-wins {
  position:   relative;
  margin-top: var(--space-32);
  padding:    var(--space-24) 0 var(--space-40);
}
.mo-win {
  border:        1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  background:    var(--mk-bg-sidebar);
  transition:    opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1s ease;
}
.mo-win { overflow: hidden; }
.mo-win__bar {
  /* muted purple titlebar derived per theme from the brand token */
  --mo-titlebar: color-mix(in oklab, var(--mk-bg-sidebar) 80%, var(--mk-brand) 20%);
  display:       flex;
  align-items:   center;
  gap:           var(--mk-space-2);
  min-height:    40px;
  padding:       0 var(--mk-space-3);
  border-bottom: 1px solid var(--mk-border-default);
  background:    var(--mo-titlebar);
  font-size:     var(--fs-13);
  color:         var(--mk-text-primary);
}
.mo-win__lights { display: inline-flex; gap: 6px; margin-right: var(--mk-space-2); }
.mo-win__lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-danger); }
.mo-win__lights i:nth-child(2) { background: var(--mk-warning); }
.mo-win__lights i:nth-child(3) { background: var(--mk-success); }
.mo-win__title { font-weight: 500; }
.mo-win__muted { color: var(--mk-text-secondary); font-size: var(--fs-12); }
.mo-win__ctrls { margin-left: auto; display: inline-flex; gap: var(--mk-space-3); color: var(--mk-text-secondary); }
/* back window: the titlebar stays opaque, only the body fades */
.mo-board { position: relative; }
.mo-board__body {
  padding-bottom: 96px;   /* last card row always ends above the 80px bottom fade */
  -webkit-mask-image:
    linear-gradient(to right, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
          mask-composite: intersect;
}
.mo-board__grid {
  list-style: none;
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap:        var(--mk-space-2);
  padding:    var(--mk-space-4) 6% var(--mk-space-4) calc(40% + 40px);
}
.mo-cluster {
  width:          100%;
  min-width:      0;
  display:        grid;
  gap:            6px;
  padding:        var(--mk-space-2) var(--mk-space-3);
  background:     var(--mk-surface-raised);
  border:         1px solid var(--mk-border-default);
  border-radius:  var(--mk-radius-md);
  color:          var(--mk-text-primary);
  font:           inherit;
  text-align:     left;
  cursor:         pointer;
  transition:     border-color 0.2s, background 0.2s;
}
.mo-cluster:hover { background: var(--mk-surface-hover); }
.mo-cluster[aria-pressed="true"] { border-color: var(--mk-accent); background: var(--mk-surface-selected); }
.mo-cluster:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: 2px; }
.mo-cluster__head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); }
.mo-cluster__head .mk-dot { flex: none; }
.mo-cluster__count { margin-left: auto; color: var(--mk-text-tertiary); font-size: var(--fs-12); }
.mo-cluster__chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; overflow: hidden; }
.mo-cluster__chips span {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--mk-surface-quiet);
  color: var(--mk-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* front window */
.mo-thread {
  position:  absolute;
  top: 56px; left: 24px; bottom: -8px;   /* sits below the back window's titlebar */
  width:     40%;
  display:   flex;
  flex-direction: column;
  background: var(--mk-surface-raised);
  border-color: var(--mk-border-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
  z-index:   2;
}
.mo-thread::after { /* faint contact shadow */
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -22px; height: 36px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.mo-thread__body {
  flex: 1;
  overflow: auto;
  padding: var(--mk-space-4);
  display: grid;
  align-content: start;
  gap: var(--mk-space-3);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mo-thread__body.is-swapping { opacity: 0; transform: translateY(6px); }
.mo-msg { display: grid; grid-template-columns: 28px 1fr; gap: var(--mk-space-3); }
.mo-msg__av {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mk-surface-quiet);
  color: var(--mk-text-primary);
  font-size: var(--fs-12);
}
.mo-msg__av--os { background: var(--mk-accent-soft); color: var(--mk-accent); }
.mo-msg__who { font-size: var(--fs-13); color: var(--mk-text-primary); font-weight: 500; }
.mo-msg__who span { color: var(--mk-text-tertiary); font-weight: 400; margin-left: 6px; font-size: var(--fs-12); }
.mo-msg__text { font-size: var(--fs-14); line-height: 1.5; color: var(--mk-text-secondary); }
.mo-log {
  margin-top: 6px;
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--mk-text-secondary);
}
.mo-log b { font-weight: 400; color: var(--mk-link); }
.mo-status {
  display: flex; flex-wrap: wrap; gap: var(--mk-space-2);
  font-size: var(--fs-12);
}
.mo-status span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--mk-border-default);
  border-radius: 999px;
  color: var(--mk-text-secondary);
}
.mo-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
  padding: 0 var(--mk-space-3);
  border: 1px solid var(--mk-border-strong);
  border-radius: 999px;
  background: var(--mk-surface-control);
  color: var(--mk-text-primary);
  font: inherit; font-size: var(--fs-13);
  cursor: pointer;
}
.mo-back:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: 2px; }
.mo-agents-title { font-size: var(--fs-20); color: var(--mk-text-primary); }
.mo-agents-mission { font-size: var(--fs-13); color: var(--mk-text-secondary); }
.mo-agents { list-style: none; display: grid; gap: var(--mk-space-2); }
.mo-agents li { display: grid; gap: 2px; padding-top: var(--mk-space-2); border-top: 1px solid var(--mk-border-subtle); }
.mo-agents b { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-13); color: var(--mk-text-primary); }
.mo-agents span { font-size: var(--fs-13); color: var(--mk-text-secondary); line-height: 1.45; }
.mo-thread__composer {
  display: flex; justify-content: space-between; align-items: center;
  margin: var(--mk-space-3);
  padding: var(--mk-space-3);
  border: 1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-md);
  background: var(--mk-bg-canvas);
  color: var(--mk-text-tertiary);
  font-size: var(--fs-13);
}

/* entrance: back first, front shortly after (final state without JS) */
.mo-motion .mo-wins:not(.is-in) .mo-win { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(12px); }
.mo-wins.is-in .mo-thread { transition-delay: 0.25s; }

@media (max-width: 1200px) and (min-width: 901px) {
  .mo-board__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 900px) {
  .mo-wins { padding-top: 0; display: flex; flex-direction: column; }
  .mo-thread { scroll-margin-top: 96px; position: relative; order: -1; top: auto; left: auto; width: 100%; bottom: auto; min-height: 320px; }
  .mo-board { margin-top: var(--space-16); }
  .mo-board__body { padding-bottom: var(--mk-space-4);
    -webkit-mask-image: linear-gradient(to right, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, #000 95%, transparent 100%); }
  .mo-board__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 150px;
    overflow-x: auto;
    padding: var(--mk-space-4) 20% var(--mk-space-4) var(--mk-space-4);
    scrollbar-width: thin;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mo-win, .mo-thread__body { transition: none; }
}

/* ── 5. How it thinks (bento) ──────────────────────────────── */
.mo-bento {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--space-12);
}
.mo-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  padding:        var(--space-24);
  background:     var(--card-surface);
  border:         1px solid var(--purple-card-border);
}
.mo-card__title { font-size: var(--fs-20); font-weight: var(--fw-heading); color: var(--white); }
.mo-card__text  { font-size: var(--fs-14); line-height: 1.6; color: var(--gray-900); }
.mo-card__viz {
  margin-top:  auto;
  padding-top: var(--space-16);
  font-family: var(--font-mono);
  font-size:   var(--fs-12);
  color:       var(--gray-900);
}
/* viz: file tree */
.mo-viz-tree { list-style: none; display: grid; gap: 4px; }
.mo-viz-tree li { opacity: 0.75; }
.mo-viz-tree li.is-read { opacity: 1; color: var(--purple-900); }
.mo-viz-tree li.is-read::after { content: "  ← read"; color: var(--gray-900); }
/* viz: model ladder */
.mo-viz-ladder { list-style: none; display: grid; gap: 6px; }
.mo-viz-ladder li { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--space-8); }
.mo-viz-ladder i {
  display:    block;
  height:     6px;
  width:      var(--w);
  background: linear-gradient(90deg, var(--purple-500), var(--blue-800));
}
/* viz: review chain */
.mo-viz-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.mo-viz-chain span {
  padding: 4px 8px;
  border:  1px solid var(--purple-card-border);
  color:   var(--off-white);
}
.mo-viz-chain em { font-style: normal; color: var(--purple-700); }
/* viz: state file */
.mo-viz-doc { display: grid; gap: 4px; }
.mo-viz-doc span { display: block; }
.mo-viz-doc span:first-child { color: var(--off-white); }

/* ── 6. Design system + theme switcher ─────────────────────── */
.mo-ds {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap:                   var(--space-32);
  align-items:           start;
}
.mo-ds__list { list-style: none; display: grid; gap: var(--space-8); margin: var(--space-16) 0 var(--space-24); }
.mo-ds__list li {
  display:     flex;
  gap:         var(--space-8);
  font-size:   var(--fs-14);
  line-height: 1.5;
  color:       var(--gray-900);
}
.mo-ds__list i { color: var(--purple-700); font-size: 16px; margin-top: 2px; }


/* ── 7. Gallery (tabs) ─────────────────────────────────────── */
.mo-tabs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--space-4);
  border-bottom: 1px solid var(--section-border);
  margin-bottom: var(--space-24);
}
.mo-tab {
  min-height:    44px;
  padding:       0 var(--space-16);
  background:    transparent;
  border:        0;
  border-bottom: 2px solid transparent;
  color:         var(--gray-900);
  font:          inherit;
  font-size:     var(--fs-14);
  cursor:        pointer;
}
.mo-tab[aria-selected="true"] { color: var(--white); border-bottom-color: var(--purple-700); }
.mo-caption {
  margin-top:  var(--space-12);
  font-family: var(--font-mono);
  font-size:   var(--fs-12);
  color:       var(--gray-900);
}

/* ── 8. Role / stack / status ──────────────────────────────── */
.mo-facts {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   var(--space-12);
}
.mo-fact {
  padding:    var(--space-16);
  border:     1px solid var(--purple-card-border);
  background: var(--purple-card);
}
.mo-fact dt {
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--purple-900);
  margin-bottom:  var(--space-8);
}
.mo-fact dd { font-size: var(--fs-14); line-height: 1.6; color: var(--off-white); }
.mo-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e0a86a;
  margin-right: 6px;
}

/* =============================================================
   PRODUCT MOCKUP (.mk) — everything below uses --mk-* tokens only
   ============================================================= */
.mk {
  font-family: var(--mk-font);
  text-align:  left;
  font-size:   var(--mk-fs-lg);
  color:       var(--mk-text-primary);
  background:  var(--mk-bg-canvas);
  transition:  background var(--mk-duration), color var(--mk-duration);
}
.mk *, .mk *::before, .mk *::after { transition: background-color var(--mk-duration), border-color var(--mk-duration), color var(--mk-duration); }

.mk-app {
  width:   var(--mk-frame-w);
  height:  var(--mk-frame-h);
  display: grid;
  grid-template-columns: var(--mk-sidebar-w) 1fr var(--mk-panel-w);
  gap:     var(--mk-space-2);
  padding: var(--mk-space-2);
}
.mk-side {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        var(--mk-space-3) var(--mk-space-2);
  background:     var(--mk-bg-sidebar);
  border-radius:  var(--mk-radius-lg);
}
.mk-side__icons { display: flex; justify-content: space-between; padding: 0 var(--mk-space-2) var(--mk-space-3); color: var(--mk-text-secondary); }
.mk-side__item {
  display:       flex;
  align-items:   center;
  gap:           var(--mk-space-2);
  padding:       6px var(--mk-space-3);
  border-radius: var(--mk-radius-sm);
  color:         var(--mk-text-primary);
  font-size:     var(--mk-fs-md);
  white-space:   nowrap;
}
.mk-side__item i { font-size: 15px; color: var(--mk-text-secondary); }
.mk-side__item--search { background: var(--mk-surface-control); }
.mk-side__item.is-on { background: var(--mk-surface-selected); }
.mk-side__sep { height: 1px; background: var(--mk-border-default); margin: var(--mk-space-2) var(--mk-space-3); }
.mk-side__label { font-size: var(--mk-fs-sm); color: var(--mk-text-tertiary); padding: var(--mk-space-2) var(--mk-space-3) 2px; }
.mk-side__user {
  margin-top:  auto;
  display:     flex;
  align-items: center;
  gap:         var(--mk-space-2);
  padding:     var(--mk-space-2) var(--mk-space-3);
  font-size:   var(--mk-fs-sm);
}
.mk-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mk-surface-quiet);
  font-size: var(--mk-fs-xs);
}
.mk-muted { color: var(--mk-text-tertiary); }

.mk-main { display: flex; flex-direction: column; min-width: 0; }
.mk-top {
  display:     flex;
  align-items: center;
  gap:         var(--mk-space-1);
  padding:     0 0 var(--mk-space-2);
}
.mk-tab {
  padding:       5px var(--mk-space-3);
  border-radius: var(--mk-radius-sm);
  background:    var(--mk-surface-control);
  color:         var(--mk-text-secondary);
  font-size:     var(--mk-fs-md);
}
.mk-tab.is-on { background: var(--mk-surface-quiet); color: var(--mk-text-primary); }
.mk-top__links { margin-left: auto; display: flex; gap: var(--mk-space-4); font-size: var(--mk-fs-md); color: var(--mk-text-secondary); }
.mk-top__links b { color: var(--mk-text-primary); font-weight: 500; }

.mk-tree { position: relative; flex: 1; padding-top: var(--mk-space-6); }
.mk-tree__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mk-tree__edges path { fill: none; stroke: var(--mk-border-strong); stroke-width: 1.5; }
.mk-tree__edges .mk-pulse { stroke: var(--mk-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 400; animation: mk-pulse 2.4s linear infinite; }
@keyframes mk-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -418; } }

.mk-node {
  position:      relative;
  width:         var(--mk-col-w);
  padding:       var(--mk-space-2) var(--mk-space-3);
  background:    var(--mk-surface-raised);
  border:        1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-md);
  box-shadow:    var(--mk-elevation);
  font-size:     var(--mk-fs-md);
}
.mk-node--root { margin: 0 auto var(--mk-space-6); }
.mk-node__name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.mk-node__name i { color: var(--mk-editing); }
.mk-node__meta { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--mk-text-secondary); font-size: var(--mk-fs-sm); }
.mk-chip {
  padding:       0 5px;
  border-radius: 4px;
  background:    var(--mk-surface-quiet);
  color:         var(--mk-text-primary);
  font-size:     var(--mk-fs-xs);
}
.mk-node__status { display: flex; justify-content: space-between; font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); }
.mk-st { display: inline-flex; align-items: center; gap: 5px; }
.mk-st::before { content: ""; width: var(--mk-dot); height: var(--mk-dot); border-radius: 50%; background: currentColor; }
.mk-st--working { color: var(--mk-info); }
.mk-st--error   { color: var(--mk-danger); }
.mk-st--idle    { color: var(--mk-warning); }
.mk-st--done    { color: var(--mk-success); }
.mk-bar { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--mk-border-default); overflow: hidden; }
.mk-bar i { display: block; height: 100%; width: var(--p); background: var(--mk-accent); }

.mk-cols { display: flex; justify-content: center; gap: var(--mk-space-2); }
.mk-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--mk-space-2);
  padding:        var(--mk-space-2);
  background:     var(--mk-bg-sidebar);
  border:         1px solid var(--mk-border-subtle);
  border-radius:  var(--mk-radius-lg);
}
.mk-col .mk-node { width: calc(var(--mk-col-w) - 2 * var(--mk-space-2)); box-shadow: none; }
.mk-col__head { display: flex; align-items: center; gap: 6px; font-size: var(--mk-fs-md); padding: 0 var(--mk-space-1); }
.mk-col__head span:last-child { margin-left: auto; color: var(--mk-text-tertiary); }
.mk-col__add { text-align: center; font-size: var(--mk-fs-sm); color: var(--mk-text-tertiary); padding: 2px 0; }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.mk-composer {
  margin:        0 var(--mk-space-3);
  padding:       var(--mk-space-3);
  border:        1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  background:    var(--mk-surface-raised);
}
.mk-composer__ctx { display: flex; gap: var(--mk-space-4); font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); margin: 0 var(--mk-space-3) var(--mk-space-2); }
.mk-composer__ph { color: var(--mk-text-tertiary); min-height: 40px; }
.mk-composer__row { display: flex; align-items: center; gap: var(--mk-space-3); font-size: var(--mk-fs-md); color: var(--mk-text-secondary); }
.mk-send {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mk-surface-inverse);
  color: var(--mk-text-on-inverse);
}
.mk-foot {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--mk-space-3) var(--mk-space-3) var(--mk-space-1);
  font-size:       var(--mk-fs-md);
  color:           var(--mk-text-secondary);
}
.mk-foot__ctx { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-foot__ctx i { width: 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mk-success) 60%, var(--mk-border-strong) 60%); }
.mk-foot__warn { color: var(--mk-warning); }

.mk-panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--mk-space-2);
  padding:        var(--mk-space-3);
  background:     var(--mk-surface-raised);
  border:         1px solid var(--mk-border-default);
  border-radius:  var(--mk-radius-lg);
  font-size:      var(--mk-fs-md);
}
.mk-panel__head { display: flex; justify-content: space-between; color: var(--mk-text-secondary); }
.mk-panel__row { display: flex; justify-content: space-between; font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); }
.mk-log {
  flex:          1;
  padding:       var(--mk-space-2);
  border-radius: var(--mk-radius-md);
  background:    var(--mk-bg-canvas);
  font-family:   var(--mk-mono);
  font-size:     var(--mk-fs-xs);
  line-height:   1.7;
  color:         var(--mk-text-primary);
}
.mk-log .t  { color: var(--mk-text-tertiary); }
.mk-log .ok { color: var(--mk-success); padding-left: 12px; }
.mk-log .er { color: var(--mk-danger); }
.mk-input {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px var(--mk-space-2);
  border-radius: var(--mk-radius-md);
  background: var(--mk-surface-control);
  color: var(--mk-text-tertiary);
}
.mk-link { color: var(--mk-link); }

/* ── Responsive (native, unscaled) product screens ─────────── */
.mk-screen {
  border:        1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  padding:       var(--mk-space-4);
  background:    var(--mk-bg-canvas);
  box-shadow:    0 20px 60px rgba(0, 0, 0, 0.45);
}
.mk-screen__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mk-space-2) var(--mk-space-4); margin-bottom: var(--mk-space-4); }
.mk-screen__title { font-size: 18px; font-weight: 500; color: var(--mk-text-primary); }
.mk-screen__sub { font-size: var(--mk-fs-md); color: var(--mk-text-secondary); }
.mk-demo {
  margin-left:   auto;
  padding:       2px 8px;
  border-radius: 999px;
  border:        1px solid var(--mk-border-strong);
  font-family:   var(--mk-mono);
  font-size:     var(--mk-fs-xs);
  color:         var(--mk-text-secondary);
}
.mk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-space-2); margin-bottom: var(--mk-space-4); }
.mk-kpi { padding: var(--mk-space-3); border-radius: var(--mk-radius-md); background: var(--mk-surface-raised); border: 1px solid var(--mk-border-subtle); }
.mk-kpi span { display: block; font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); }
.mk-kpi b { font-size: 20px; font-weight: 500; color: var(--mk-text-primary); }
.mk-budget { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--mk-border-default); overflow: hidden; }
.mk-budget i { display: block; height: 100%; width: var(--p); background: var(--mk-warning); }

.mk-controls { display: flex; flex-wrap: wrap; gap: var(--mk-space-2); margin-bottom: var(--mk-space-3); }
.mk .mo-ctl {
  min-height:    36px;
  padding:       0 var(--mk-space-3);
  border-radius: var(--mk-radius-md);
  border:        1px solid var(--mk-border-strong);
  background:    var(--mk-surface-control);
  color:         var(--mk-text-primary);
  font:          inherit;
  font-size:     var(--mk-fs-md);
}
.mk .mo-ctl::placeholder { color: var(--mk-text-tertiary); }
.mk .mo-ctl--search { flex: 1 1 180px; }
.mk .mo-ctl:focus-visible { outline-color: var(--mk-border-focus); }

.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--mk-fs-md); }
.mk-table th {
  text-align:  left;
  font-weight: 500;
  color:       var(--mk-text-secondary);
  padding:     var(--mk-space-2);
  border-bottom: 1px solid var(--mk-border-default);
  white-space: nowrap;
}
.mk-table td { padding: var(--mk-space-2); border-bottom: 1px solid var(--mk-border-subtle); color: var(--mk-text-primary); white-space: nowrap; }
.mk-table td.num, .mk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-empty { padding: var(--mk-space-4); text-align: center; color: var(--mk-text-secondary); font-size: var(--mk-fs-md); }

.mk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-space-2); }
.mk-lane { padding: var(--mk-space-2); border-radius: var(--mk-radius-lg); background: var(--mk-bg-sidebar); border: 1px solid var(--mk-border-subtle); min-height: 180px; }
.mk-lane h4 { display: flex; justify-content: space-between; font-size: var(--mk-fs-md); font-weight: 500; margin-bottom: var(--mk-space-2); color: var(--mk-text-primary); }
.mk-lane h4 span { color: var(--mk-text-tertiary); font-weight: 400; }
.mk-lane ul { list-style: none; display: grid; gap: var(--mk-space-2); }
.mk-card { padding: var(--mk-space-2) var(--mk-space-3); border-radius: var(--mk-radius-md); background: var(--mk-surface-raised); border: 1px solid var(--mk-border-default); font-size: var(--mk-fs-md); }
.mk-card small { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); }

/* ── Reduced motion: final states, no pulse, no transitions ── */
@media (prefers-reduced-motion: reduce) {
  .mk-tree__edges .mk-pulse { animation: none; stroke-dasharray: none; opacity: 0.5; }
  .mk *, .mk, .mo-stage__frame, .mo-stage::after, .mo-hero__bg::before { transition: none !important; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mo-ds { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mo-proof { grid-template-columns: repeat(3, 1fr); }
  .mo-proof__item:nth-child(4) { border-left: 0; }
  .mo-proof__item:nth-child(n+4) { border-top: 1px solid var(--section-border); }
  .mo-facts { grid-template-columns: 1fr; }
  .mk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mo-hero__title { font-size: var(--fs-36); }
  .mo-proof { grid-template-columns: repeat(2, 1fr); }
  .mo-proof__item { border-left: 0; border-top: 1px solid var(--section-border); }
  .mo-proof__item:nth-child(-n+2) { border-top: 0; }
  .mo-proof__item:nth-child(even) { border-left: 1px solid var(--section-border); }
  .mo-proof__num { font-size: var(--fs-32); }
  .mo-bento { grid-template-columns: 1fr; }
  .mk-kpis { grid-template-columns: 1fr; }
  .mk-board { grid-template-columns: 1fr; }
  .mk-viewport { border-radius: 10px; }
  .mo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mo-tab { flex: 0 0 auto; }
  /* keep Model · Provider · Tokens · Cost visible on phones */
  .mk-table th:nth-child(3), .mk-table td:nth-child(3) { display: none; }
}

/* Screen-reader-only utility (no global one exists in styles.css) */
.mo-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 4b. Routing & delegation diagram ──────────────────────── */
.mo-route {
  --tier-fable:  var(--mk-editing);
  --tier-opus:   var(--mk-danger);
  --tier-sonnet: var(--mk-info);
  --tier-haiku:  var(--mk-success);
  --tier-codex:  var(--mk-warning);
  position:   relative;
  display:    grid;
  grid-template-columns: minmax(0, 1.3fr) 56px minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas: "chips gate lanes models";
  column-gap: 72px;
  align-items: center;
  margin-top: var(--space-32);
  padding:    var(--space-32) var(--space-24);
  background:
    linear-gradient(color-mix(in srgb, var(--mk-border-subtle) 55%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, color-mix(in srgb, var(--mk-border-subtle) 55%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--mk-bg-canvas);
  border: 1px solid var(--section-border);
}
.mo-route__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mo-route__svg path { fill: none; stroke: var(--c); transition: opacity 0.35s ease, stroke-width 0.35s ease; }
.mo-route__lines path { stroke-width: 1.25; opacity: 0.35; }
.mo-route__glow path  { stroke-width: 4; opacity: 0.18; }
.mo-route__svg path.is-dim { opacity: 0.06; }
.mo-route__lines path.is-on { opacity: 1; stroke-width: 2; }
.mo-route__glow path.is-on  { opacity: 0.7; stroke-width: 7; }
.mo-route__svg path.is-hidden { opacity: 0; }
.mo-route__pulse { opacity: 0; }
.mo-route__pulse.is-on { opacity: 1; }

.mo-route__chips {
  grid-area: chips;
  position:  relative;
  display:   grid;
  gap:       var(--space-8);
  justify-items: start;
}
.mo-route__chip {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-8);
  min-height:  36px;
  padding:     0 var(--space-12);
  background:  var(--mk-bg-canvas);
  border:      1px solid var(--mk-border-strong);
  border-radius: var(--mk-radius-sm);
  color:       var(--mk-text-secondary);
  font:        inherit;
  font-size:   var(--fs-13);
  cursor:      pointer;
  transition:  color 0.2s, border-color 0.2s, opacity 0.3s;
}
.mo-route__chip:nth-child(even) { margin-left: 28px; }
.mo-route__chip i { font-size: 15px; color: var(--c); }
.mo-route__chip:hover { color: var(--mk-text-primary); }
.mo-route__chip[aria-pressed="true"],
.mo-route__chip.is-preview { color: var(--mk-text-primary); border-color: var(--c); }
.mo-route.has-active .mo-route__chip:not([aria-pressed="true"]):not(.is-preview) { opacity: 0.8; }
.mo-route__chip:focus-visible,
.mo-route__play:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }

.mo-route__gate {
  grid-area:  gate;
  position:   relative;
  align-self: stretch;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mo-route__gate::before {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, var(--mk-text-primary) 30%, var(--mk-text-primary) 70%, transparent);
  box-shadow: 0 0 12px var(--mk-glow);
}
.mo-route__gate-name,
.mo-route__gate-sub {
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  background: var(--mk-bg-canvas);
  white-space: nowrap;
  font-family: var(--font-mono);
}
.mo-route__gate-name { font-size: var(--fs-12); color: var(--mk-text-primary); }
.mo-route__gate-sub  { font-size: var(--fs-11); color: var(--mk-text-tertiary); }

.mo-route__lanes,
.mo-route__models { list-style: none; display: grid; gap: var(--space-12); position: relative; }
.mo-route__lanes  { grid-area: lanes; }
.mo-route__models { grid-area: models; }
.mo-route__lane,
.mo-route__model {
  display: grid;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  background: var(--mk-bg-canvas);
  border-left: 2px solid var(--mk-border-strong);
  transition: border-color 0.3s, opacity 0.3s;
}
.mo-route__lane b { font-weight: 400; font-size: var(--fs-14); color: var(--mk-text-primary); }
.mo-route__lane span { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--mk-text-tertiary); min-height: 1.2em; }
.mo-route__model { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--c); border-left-color: var(--c); }
.mo-route.has-active .mo-route__lane:not(.is-on)  { opacity: 0.7; }
.mo-route.has-active .mo-route__model:not(.is-on) { opacity: 0.88; }
.mo-route__lane.is-on { border-left-color: var(--c); }

.mo-route__foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-16);
}
.mo-route__play {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: 36px; padding: 0 var(--space-12);
  background: transparent;
  border: 1px solid var(--section-border);
  color: var(--gray-900);
  font: inherit; font-size: var(--fs-13);
  cursor: pointer;
}
.mo-route__log {
  min-height: 7.5em;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--section-border);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--gray-900);
}
.mo-route__log b { font-weight: 400; color: var(--white); }

@media (max-width: 1100px) {
  .mo-route { column-gap: 48px; grid-template-columns: minmax(0, 1.2fr) 48px minmax(0, 1fr) minmax(0, 0.9fr); }
}
@media (max-width: 900px) {
  .mo-route {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "chips chips" "gate gate" "lanes models";
    row-gap: 40px;
    column-gap: 32px;
    padding: var(--space-24) var(--space-16);
  }
  .mo-route__chips { grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .mo-route__chip:nth-child(even) { margin-left: 0; }
  .mo-route__gate { flex-direction: row; gap: var(--space-8); min-height: 44px; }
  .mo-route__gate::before {
    top: 50%; bottom: auto; left: 8%; right: 8%;
    width: auto; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, var(--mk-text-primary) 30%, var(--mk-text-primary) 70%, transparent);
  }
  .mo-route__foot { grid-template-columns: 1fr; }
  .mo-route__play { justify-self: start; }
}
@media (max-width: 640px) {
  .mo-route__chips { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-route__svg path, .mo-route__chip, .mo-route__lane, .mo-route__model { transition: none; }
  .mo-route__pulse { display: none; }
}

/* =============================================================
   WHOLE-PAGE THEMES — html[data-mo-theme="indigo|black|light"]
   Set pre-paint by the inline <head> script, only on this page, so
   the shared chrome is re-coloured here without touching styles.css.
   Values are the Monkey OS theme tokens (monkey-tokens.css) mapped
   onto the portfolio variables the page and the chrome already use.
   ============================================================= */
/* Page background one step darker than the product surfaces:
   indigo has no darker token → derived once (--mo-page-bg);
   black/light use their real next step (Monkey --bg-void). */
/* One tunable per theme: --mo-page-bg-depth (0% = product surface colour,
   100% = the full darker step). Everything page-level reads --bg-main. */
html[data-mo-theme] {
  --mo-page-bg-depth: 50%;
  --mo-page-bg: color-mix(in oklab, var(--mo-t-lift), var(--mo-t-dark) var(--mo-page-bg-depth));
  --bg-main: var(--mo-page-bg);  --bg-hero: var(--mo-page-bg);
}
html[data-mo-theme="indigo"] {
  --mo-t-lift: #080C1D;                                           /* old --bg-main */
  --mo-t-dark: color-mix(in oklab, var(--mo-t-lift) 62%, #000);   /* derived: no darker indigo token */
}
html[data-mo-theme="black"] {
  --mo-t-lift: #141415;
  --mo-t-dark: #000000;  /* Monkey dark --bg-void */
  --mo-t-bg: var(--mo-page-bg);  --mo-t-surface: #212121;  --mo-t-surface-2: #28282b;
  --mo-t-text: #f0f0f0; --mo-t-text-2: #b7b7b7;  --mo-t-border: #2e2e30;  --mo-t-border-2: #3a3a3d;
  --mo-t-on-accent: #f0f0f0;
  --bg-hero: var(--mo-page-bg);  --bg-chip: var(--mo-t-surface);
  --white: var(--mo-t-text);  --off-white: var(--mo-t-text);  --gray-900: var(--mo-t-text-2);
  --purple-card: var(--mo-t-surface);  --purple-card-border: var(--mo-t-border);
  --card-surface: var(--mo-t-surface); --card-surface-hover: var(--mo-t-surface-2);
  --section-border: var(--mo-t-border); --purple-border: var(--mo-t-border-2);
}
html[data-mo-theme="light"] {
  --mo-t-lift: #f7f6f2;
  --mo-t-dark: #efeee8;  /* Monkey light --bg-void */
  --mo-t-bg: var(--mo-page-bg);  --mo-t-surface: #ffffff;  --mo-t-surface-2: #e6e5dd;
  --mo-t-text: #26251e; --mo-t-text-2: #55544c;  --mo-t-border: #cfcec4;  --mo-t-border-2: #b3b2a6;
  --mo-t-on-accent: #f7f6f2;
  --bg-hero: var(--mo-page-bg);  --bg-chip: var(--mo-t-surface-2);
  --white: var(--mo-t-text);  --off-white: var(--mo-t-text);  --gray-900: var(--mo-t-text-2);
  --purple-900: #7A00B8;      /* Monkey light --accent-brand: kicker/labels */
  --purple-700: #4b4ca6;      /* Monkey light --agent-editing: focus ring, accents */
  --blue-800:   #2c68b4;      /* Monkey light --link */
  --purple-card: var(--mo-t-surface);  --purple-card-border: var(--mo-t-border);
  --card-surface: var(--mo-t-surface); --card-surface-hover: var(--mo-t-surface-2);
  --section-border: var(--mo-t-border); --purple-border: var(--mo-t-border-2);
}
/* hero gradient per theme (the 3 tuning variables re-derived) */
html[data-mo-theme="black"] .mo-hero { --mo-hero-base-mix: 0%; --mo-glow-hue-mix: 0%; --mo-glow-strength: 26%; }
html[data-mo-theme="light"] .mo-hero { --mo-hero-base-mix: 5%; --mo-glow-hue-mix: 30%; --mo-glow-strength: 16%; }
html[data-mo-theme="light"] .mo-page { --mo-ink: var(--mo-t-bg); }  /* no darkening on light */

/* cheap root-level transition only */
html[data-mo-theme] body,
html[data-mo-theme] .sidebar,
html[data-mo-theme] .site-footer,
html[data-mo-theme] .mobile-nav__bar { transition: background-color 0.2s ease, color 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  html[data-mo-theme] body, html[data-mo-theme] .sidebar,
  html[data-mo-theme] .site-footer, html[data-mo-theme] .mobile-nav__bar { transition: none; }
}

/* shared chrome, scoped to this page (non-indigo themes) */
html[data-mo-theme="black"] :is(.lang-menu__btn, .lang-menu__panel, .ai-topbar, .mobile-nav__ai),
html[data-mo-theme="light"] :is(.lang-menu__btn, .lang-menu__panel, .ai-topbar, .mobile-nav__ai) {
  background: var(--card-surface);
}
html[data-mo-theme="black"] :is(.lang-menu__btn, .site-footer__nav a, .site-footer__copy, .site-footer__brand, .site-footer__stack-label),
html[data-mo-theme="light"] :is(.lang-menu__btn, .site-footer__nav a, .site-footer__copy, .site-footer__brand, .site-footer__stack-label) {
  color: var(--gray-900);
}
html[data-mo-theme="black"] .ai-topbar__input::placeholder,
html[data-mo-theme="light"] .ai-topbar__input::placeholder { color: var(--gray-900); }
html[data-mo-theme="black"] .site-footer,
html[data-mo-theme="light"] .site-footer { background: var(--bg-chip); }
html[data-mo-theme="black"] .ham-icon__line,
html[data-mo-theme="light"] .ham-icon__line { background: var(--off-white); }
html[data-mo-theme="black"] .mobile-nav__ai-text,
html[data-mo-theme="light"] .mobile-nav__ai-text { color: var(--off-white); }
html[data-mo-theme="black"] :is(.sidebar__logo, .mobile-nav__logo, .site-footer__brand) rect,
html[data-mo-theme="light"] :is(.sidebar__logo, .mobile-nav__logo, .site-footer__brand) rect { fill: var(--off-white); }
html[data-mo-theme="light"] .sidebar__label { color: var(--off-white); }
/* white line icons → dark on the light theme */
html[data-mo-theme="light"] :is(.sidebar__item img, .mobile-nav__link img, .mobile-nav__ai-icon) { filter: invert(1) brightness(0.3); }
html[data-mo-theme="light"] .mobile-nav__cta { background: var(--off-white); color: var(--bg-main); }
html[data-mo-theme="light"] .btn-contact { background: var(--off-white); color: var(--bg-main); }
html[data-mo-theme="light"] .ai-topbar__send i { color: var(--off-white) !important; }  /* inline #FAFAFA in shared markup */
html[data-mo-theme="light"] .btn-primary { color: var(--mo-t-on-accent); }
html[data-mo-theme="light"] .btn-primary i { color: inherit; }
html[data-mo-theme="light"] .mo-hero .mk-viewport { box-shadow: 0 24px 60px rgba(38, 37, 30, 0.18); }
html[data-mo-theme="light"] .mo-stage::after { background: radial-gradient(50% 50% at 50% 50%, rgba(38, 37, 30, 0.22), transparent 70%); }

/* ── Big theme switch (design-system section) ──────────────── */
.mo-switch { margin: var(--space-24) 0 var(--space-40); }
.mo-switch__title {
  font-size: var(--fs-28);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--white);
  margin-bottom: var(--space-8);
}
.mo-switch__hint { font-size: var(--fs-15); color: var(--gray-900); margin-bottom: var(--space-24); }
.mo-theme {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}
.mo-theme__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: 72px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--section-border);
  border-radius: 12px;
  background: transparent;
  color: var(--gray-900);
  font: inherit;
  font-size: var(--fs-20);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.mo-theme__btn:hover { border-color: var(--purple-border); color: var(--white); }
.mo-theme__btn[aria-checked="true"] {
  background: var(--card-surface);
  border-color: var(--purple-700);
  box-shadow: 0 0 0 1px var(--purple-700);
  color: var(--white);
}
.mo-theme__btn:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 3px; }
.mo-theme__label { flex: 1; }
.mo-theme__check { font-size: 24px; color: var(--purple-700); opacity: 0; }
.mo-theme__btn[aria-checked="true"] .mo-theme__check { opacity: 1; }
/* mini window thumbnail painted with that theme's real tokens */
.mo-theme__thumb {
  position: relative;
  flex: none;
  width: 64px; height: 44px;
  border-radius: 6px;
  border: 1px solid var(--mk-border-strong);
  background: var(--mk-bg-canvas);
  overflow: hidden;
}
.mo-theme__thumb i { position: absolute; display: block; }
.mo-theme__thumb .t-bar  { left: 0; top: 0; bottom: 0; width: 16px; background: var(--mk-bg-sidebar); border-right: 1px solid var(--mk-border-default); }
.mo-theme__thumb .t-card { left: 22px; top: 8px; right: 6px; height: 16px; border-radius: 3px; background: var(--mk-surface-raised); border: 1px solid var(--mk-border-default); }
.mo-theme__thumb .t-dot  { left: 22px; bottom: 7px; width: 22px; height: 6px; border-radius: 3px; background: var(--mk-accent); }

/* ── Floating pill (appears after the hero, hides at the switch) ── */
.mo-pill {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--purple-border);
  border-radius: 999px;
  background: var(--bg-main);
  box-shadow: var(--elev-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.mo-pill.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mo-pill__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
.mo-pill__btn[aria-checked="true"] { border-color: var(--purple-700); }
.mo-pill__btn:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.mo-pill__sw {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mk-border-strong);
  background: linear-gradient(135deg, var(--mk-bg-canvas) 50%, var(--mk-accent) 50%);
}
@media (prefers-reduced-motion: reduce) { .mo-pill { transition: none; transform: none; } }

@media (max-width: 640px) {
  .mo-theme { gap: var(--space-8); }
  .mo-theme__btn { flex-direction: column; align-items: flex-start; gap: var(--space-8); font-size: var(--fs-15); padding: var(--space-12); }
  .mo-theme__thumb { width: 100%; }
  .mo-theme__check { position: absolute; top: 8px; right: 8px; font-size: 18px; }
  .mo-switch__title { font-size: var(--fs-24); }
}

/* Phones: a fixed pill always sits on top of content at 390px (verified over
   the routing diagram), so it is not shown; the big switch remains. */
@media (max-width: 640px) { .mo-pill { display: none; } }

/* ── 3b. Research: converge diagram + findings ─────────────── */
.mo-proof--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-24) 0 var(--space-32); }
.mo-proof--mini .mo-proof__num { font-size: var(--fs-32); }
.mo-conv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
  padding: var(--space-24) 0;
}
.mo-conv__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mo-conv__svg path { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: 0.55; }
.mo-conv__svg path.is-on { opacity: 1; stroke-width: 2.25; }
.mo-motion .mo-conv:not(.is-in) .mo-conv__svg path { stroke-dashoffset: var(--len); }
.mo-conv__svg path { stroke-dasharray: var(--len) var(--len); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1), opacity 0.3s; }
.mo-conv__fields { display: grid; gap: var(--space-8); position: relative; }
.mo-field {
  display: flex; align-items: center; gap: var(--space-8);
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 1px solid var(--purple-card-border);
  background: var(--bg-main);
  color: var(--off-white);
  font: inherit; font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.mo-field i { color: var(--c); font-size: 18px; }
.mo-field:hover { background: var(--card-surface-hover); }
.mo-field[aria-expanded="true"] { border-color: var(--purple-700); background: var(--card-surface); }
.mo-field:focus-visible, .mo-conv__link:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.mo-conv__hub {
  position: relative;
  display: grid; justify-items: center; gap: 4px;
  padding: var(--space-24) var(--space-16);
  border: 1px solid var(--purple-border);
  background: var(--card-surface);
  text-align: center;
  box-shadow: 0 0 40px color-mix(in oklab, var(--purple-500) 25%, transparent);
}
.mo-conv__hub-name { font-size: var(--fs-20); color: var(--white); font-weight: 500; }
.mo-conv__hub-sub { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gray-900); }
.mo-conv__out { position: relative; display: grid; gap: var(--space-12); }
.mo-conv__steps { list-style: none; display: grid; gap: var(--space-8); }
.mo-conv__steps li {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--purple-card-border);
  background: var(--bg-main);
  color: var(--off-white);
  font-size: var(--fs-14);
}
.mo-conv__steps li i { color: var(--purple-700); font-size: 18px; }
.mo-conv__link { color: var(--purple-700); font-size: var(--fs-14); text-decoration: none; }
.mo-conv__link:hover { text-decoration: underline; }
.mo-finding {
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--purple-card-border);
  background: var(--purple-card);
  display: grid; gap: var(--space-8);
}
.mo-finding h3 { font-size: var(--fs-20); color: var(--white); font-weight: var(--fw-heading); }
.mo-finding dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px var(--space-16); }
.mo-finding dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-900); padding-top: 3px; }
.mo-finding dd { font-size: var(--fs-14); line-height: 1.55; color: var(--off-white); }
.mo-finding .is-pending { color: var(--gray-900); font-style: italic; }
.mo-finding__src { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gray-900); }
.mo-why { margin-top: var(--space-24); }
.mo-why__title { font-size: var(--fs-15); color: var(--white); margin-bottom: var(--space-8); }
.mo-why__list { list-style: none; display: grid; gap: 6px; }
.mo-why__list li { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-14); color: var(--gray-900); }
.mo-tag {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--purple-border);
  font-family: var(--font-mono); font-size: var(--fs-11);
  color: var(--purple-900);
}
@media (max-width: 900px) {
  .mo-conv { grid-template-columns: 1fr; row-gap: 40px; }
  .mo-conv__fields { grid-template-columns: 1fr 1fr; }
  .mo-finding dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mo-conv__svg path { transition: none; stroke-dasharray: none; } }

/* ── 7d. IA canvas (Relume-style sitemap) — --mk-* tokens only ── */
.mo-ia {
  border: 1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-size: var(--mk-fs-md);
}
.mo-ia__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-space-2) var(--mk-space-4);
  padding: var(--mk-space-2) var(--mk-space-3);
  border-bottom: 1px solid var(--mk-border-default);
  background: var(--mk-bg-sidebar);
}
.mo-ia__project { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--mk-text-primary); }
.mo-ia__crumb { color: var(--mk-text-secondary); }
.mo-ia__views { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--mk-radius-md); background: var(--mk-surface-control); }
.mo-ia__view { padding: 4px 10px; border: 0; border-radius: var(--mk-radius-sm); background: transparent; color: var(--mk-text-secondary); font: inherit; font-size: var(--mk-fs-sm); }
.mo-ia__view[aria-pressed="true"] { background: var(--mk-surface-quiet); color: var(--mk-text-primary); }
.mo-ia__view:disabled { cursor: not-allowed; }
.mo-ia__stats { margin-left: auto; font-family: var(--mk-mono); font-size: var(--mk-fs-sm); color: var(--mk-text-secondary); }
.mo-ia .mk-demo { margin-left: 0; }
.mo-ia__body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; flex: 1; min-height: 0; }
.mo-ia__list { display: flex; flex-direction: column; gap: var(--mk-space-2); padding: var(--mk-space-3); border-right: 1px solid var(--mk-border-default); background: var(--mk-bg-sidebar); min-height: 0; }
.mo-ia__controls { display: grid; gap: 6px; }
.mo-ia .mo-ctl { min-height: 32px; width: 100%; font-size: var(--mk-fs-sm); }
.mo-ia__pages { list-style: none; overflow: auto; display: grid; gap: 2px; align-content: start; }
.mo-ia__page {
  width: 100%; display: flex; justify-content: space-between; gap: 6px;
  padding: 6px 8px; border: 0; border-radius: var(--mk-radius-sm);
  background: transparent; color: var(--mk-text-primary); font: inherit; font-size: var(--mk-fs-sm); text-align: left; cursor: pointer;
}
.mo-ia__page span:last-child { font-family: var(--mk-mono); color: var(--mk-text-tertiary); }
.mo-ia__page[aria-current="true"] { background: var(--mk-surface-selected); }
.mo-ia__page:hover { background: var(--mk-surface-hover); }
.mo-ia__stage { position: relative; min-width: 0; }
.mo-ia__viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: var(--mk-bg-canvas);
  background-image: radial-gradient(var(--mk-border-strong) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.mo-ia__viewport.is-panning { cursor: grabbing; }
.mo-ia__viewport:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: -3px; }
.mo-ia__world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mo-ia__edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.mo-ia__edges path { fill: none; stroke: var(--mk-border-strong); stroke-width: 1.5; }
.mo-ia__edges path.is-on { stroke: var(--mk-accent); stroke-width: 2; }
.mo-ia__edges circle { fill: var(--mk-border-strong); }
.mo-ia__edges circle.is-on { fill: var(--mk-accent); }
.mo-ia__card {
  position: absolute; width: 200px;
  border: 1px solid var(--mk-border-strong);
  border-radius: var(--mk-radius-md);
  background: var(--mk-surface-raised);
  box-shadow: var(--mk-elevation);
  transition: opacity 0.2s, border-color 0.2s;
}
.mo-ia__card.is-dim { opacity: 0.3; }
.mo-ia__card.is-selected { border-color: var(--mk-accent); box-shadow: 0 0 0 1px var(--mk-accent), var(--mk-elevation); }
.mo-ia__head {
  width: 100%; display: grid; gap: 2px;
  padding: 8px 10px; border: 0; border-bottom: 1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-md) var(--mk-radius-md) 0 0;
  background: var(--mk-surface-control); color: var(--mk-text-primary);
  font: inherit; text-align: left; cursor: pointer;
}
.mo-ia__head b { font-weight: 500; font-size: var(--mk-fs-md); display: flex; justify-content: space-between; gap: 6px; }
.mo-ia__head code { font-family: var(--mk-mono); font-size: var(--mk-fs-xs); color: var(--mk-text-secondary); }
.mo-ia__type { padding: 0 6px; border-radius: 4px; background: var(--mk-surface-quiet); font-size: var(--mk-fs-xs); font-weight: 400; color: var(--mk-text-primary); }
.mo-ia__rows { list-style: none; display: grid; gap: 4px; padding: 6px; }
.mo-ia__row {
  width: 100%; display: flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 6px;
  border: 1px solid var(--mk-border-default); border-radius: var(--mk-radius-sm);
  background: var(--mk-bg-canvas); color: var(--mk-text-primary);
  font: inherit; font-size: var(--mk-fs-sm); text-align: left; cursor: pointer;
}
.mo-ia__row i { color: var(--mk-text-tertiary); }
.mo-ia__row small { margin-left: auto; font-family: var(--mk-mono); font-size: var(--mk-fs-xs); color: var(--mk-text-tertiary); }
.mo-ia__row[aria-pressed="true"] { border-color: var(--mk-accent); background: var(--mk-accent-soft); }
.mo-ia__row--add { border-style: dashed; color: var(--mk-text-secondary); cursor: default; }
.mo-ia__head:focus-visible, .mo-ia__row:focus-visible, .mo-ia__page:focus-visible, .mo-ia__tool:focus-visible, .mo-ia__view:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: 1px; }
.mo-ia__tools, .mo-ia__zoom {
  position: absolute; display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--mk-border-default); border-radius: var(--mk-radius-md);
  background: var(--mk-surface-raised); box-shadow: var(--mk-elevation);
}
.mo-ia__tools { top: 10px; right: 10px; }
.mo-ia__zoom { right: 10px; bottom: 10px; }
.mo-ia__tool {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--mk-radius-sm); background: transparent; color: var(--mk-text-primary); cursor: pointer;
}
.mo-ia__tool[aria-pressed="true"] { background: var(--mk-surface-quiet); }
.mo-ia__tool:disabled { color: var(--mk-text-tertiary); cursor: not-allowed; }
.mo-ia__pct { min-width: 44px; text-align: center; font-family: var(--mk-mono); font-size: var(--mk-fs-sm); color: var(--mk-text-primary); }
.mo-ia__mini {
  position: absolute; left: 10px; top: 10px; width: 120px; height: 72px;
  border: 1px solid var(--mk-border-default); border-radius: var(--mk-radius-sm);
  background: var(--mk-bg-sidebar);
}
.mo-ia__mini rect.pg { fill: var(--mk-border-strong); }
.mo-ia__mini rect.vp { fill: none; stroke: var(--mk-accent); stroke-width: 1.5; }
.mo-ia__prompt {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 8px; width: min(320px, calc(100% - 190px));
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--mk-border-strong); border-radius: 999px;
  background: var(--mk-surface-raised); color: var(--mk-text-tertiary); font-size: var(--mk-fs-sm);
  box-shadow: var(--mk-elevation);
}
.mo-ia__prompt span:nth-child(2) { flex: 1; }
.mo-ia__inspect { padding: var(--mk-space-3); border-left: 1px solid var(--mk-border-default); background: var(--mk-bg-sidebar); display: grid; align-content: start; gap: var(--mk-space-2); overflow: auto; }
.mo-ia__inspect h4 { font-size: var(--mk-fs-lg); font-weight: 500; color: var(--mk-text-primary); }
.mo-ia__inspect dl { display: grid; gap: 2px 0; }
.mo-ia__inspect dt { font-size: var(--mk-fs-xs); color: var(--mk-text-tertiary); margin-top: 6px; }
.mo-ia__inspect dd { font-size: var(--mk-fs-sm); color: var(--mk-text-primary); word-break: break-word; }
.mo-ia__inspect code { font-family: var(--mk-mono); font-size: var(--mk-fs-xs); }
.mo-ia { display: flex; flex-direction: column; }
@media (max-width: 1100px) {
  /* inspector becomes a sheet over the canvas bottom-left */
  .mo-ia__body { grid-template-columns: 170px minmax(0, 1fr); }
  .mo-ia__inspect {
    position: absolute; right: 10px; top: 56px; width: 200px; max-height: calc(100% - 120px);
    border: 1px solid var(--mk-border-default); border-radius: var(--mk-radius-md); box-shadow: var(--mk-elevation);
  }
  .mo-ia__body { position: relative; }
  .mo-ia__mini { display: none; }
}
@media (max-width: 640px) {
  .mo-ia__body { grid-template-columns: 1fr; }
  .mo-ia__list { display: none; }
  .mo-ia__views, .mo-ia__mini, .mo-ia__prompt, .mo-ia__tools { display: none; }
  .mo-ia__stats { margin-left: 0; }
  .mo-ia__inspect { left: 10px; right: auto; top: auto; bottom: 58px; width: calc(100% - 20px); max-height: 38%; }
}

/* ── Gallery: one fixed frame height for every tab (no layout jump) ── */
.mo-frame { aspect-ratio: 16 / 10; width: 100%; }
.mk-viewport.mo-frame { height: auto; }
.mo-frame--scroll { overflow: auto; }
[role="tabpanel"] .mo-caption { min-height: 2.6em; }
@media (max-width: 640px) {
  .mo-frame { aspect-ratio: auto; height: 600px; }
  .mk-viewport.mo-frame { height: 600px; }
}

/* ── Spec-driven board + brainstorm console ────────────────── */
.mo-sdd {
  display: flex; flex-direction: column;
  border: 1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.mo-sdd .mk-demo { margin-left: auto; }
.mo-sdd__board { flex: 3 1 0; min-height: 0; display: flex; flex-direction: column; padding: var(--mk-space-3); }
.mo-sdd .mk-controls { margin-bottom: var(--mk-space-2); }
.mo-sdd .mo-ctl { min-height: 32px; }
.mo-sdd__lanes { flex: 1; min-height: 0; overflow: auto; align-items: start; }
.mo-sdd__lanes:focus-visible, .mo-sdd__log:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: -2px; }
.mo-sdd .mk-lane { min-height: 0; }
.mo-sdd .mk-card { width: 100%; display: grid; gap: 4px; font: inherit; font-size: var(--mk-fs-md); color: var(--mk-text-primary); text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s, opacity 0.35s, transform 0.35s; }
.mo-sdd .mk-card:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: 2px; }
.mo-sdd .mk-card.is-hl { border-color: var(--mk-accent); background: var(--mk-accent-soft); }
.mo-sdd .mk-card.is-new { opacity: 0; transform: translateY(-8px); }
.mo-sdd .mk-card small { justify-content: space-between; }
.mo-st-chip { padding: 0 6px; border-radius: 4px; border: 1px solid var(--mk-border-strong); font-size: var(--mk-fs-xs); color: var(--mk-text-secondary); }
.mo-st-chip[data-s="Approved"] { color: var(--mk-success); border-color: currentColor; }
.mo-st-chip[data-s="Blocked by spec"] { color: var(--mk-warning); border-color: currentColor; }
.mo-from { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mk-mono); font-size: var(--mk-fs-xs); color: var(--mk-link); }
.mo-sdd__console {
  flex: 2 1 0; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-top: 1px solid var(--mk-border-default);
  background: var(--mk-bg-sidebar);
}
.mo-sdd__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px var(--mk-space-3); border-bottom: 1px solid var(--mk-border-subtle); }
.mo-sdd__chip { padding: 2px 8px; border-radius: 999px; background: var(--mk-surface-control); color: var(--mk-text-primary); font-size: var(--mk-fs-sm); }
.mo-sdd__rule { display: inline-flex; align-items: center; gap: 4px; color: var(--mk-warning); font-size: var(--mk-fs-sm); }
.mo-sdd__btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px;
  border: 1px solid var(--mk-border-strong); border-radius: var(--mk-radius-sm);
  background: var(--mk-surface-control); color: var(--mk-text-primary); font: inherit; font-size: var(--mk-fs-sm); cursor: pointer;
}
#sddPlay { margin-left: auto; }
.mo-sdd__btn:focus-visible, .mo-chipbtn:focus-visible { outline: 2px solid var(--mk-border-focus); outline-offset: 2px; }
.mo-sdd__log { overflow: auto; padding: var(--mk-space-2) var(--mk-space-3); display: grid; gap: var(--mk-space-2); align-content: start; }
.mo-sdd__msg { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: var(--mk-fs-md); transition: opacity 0.3s, transform 0.3s; }
.mo-sdd__msg.is-new { opacity: 0; transform: translateY(6px); }
.mo-sdd__msg.is-hl .mo-sdd__text { background: var(--mk-accent-soft); }
.mo-sdd__av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-surface-quiet); color: var(--mk-text-primary); font-size: var(--mk-fs-xs); }
.mo-sdd__av--os { background: var(--mk-accent-soft); color: var(--mk-accent); }
.mo-sdd__text { color: var(--mk-text-secondary); line-height: 1.45; border-radius: 4px; }
.mo-sdd__text b { color: var(--mk-text-primary); font-weight: 500; margin-right: 6px; }
.mo-sdd__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mo-chipbtn {
  padding: 1px 8px; border: 1px solid var(--mk-border-strong); border-radius: 999px;
  background: var(--mk-bg-canvas); color: var(--mk-link);
  font-family: var(--mk-mono); font-size: var(--mk-fs-xs); cursor: pointer;
}
.mo-sdd__composer {
  display: flex; justify-content: space-between; align-items: center;
  margin: 6px var(--mk-space-3) var(--mk-space-2);
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--mk-border-default); border-radius: var(--mk-radius-md);
  background: var(--mk-bg-canvas); color: var(--mk-text-tertiary); font-size: var(--mk-fs-sm);
}
@media (max-width: 900px) {
  .mo-sdd .mk-board.mo-sdd__lanes {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    padding-right: 14%;
  }
  .mo-sdd__rule { order: 5; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-sdd .mk-card, .mo-sdd__msg { transition: none; }
}

/* ── 3b. Research process stepper ──────────────────────────── */
.mo-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
  position: relative;
}
/* thin glow connector running through the step numbers */
.mo-steps::before {
  content: "";
  position: absolute; left: 4%; right: 4%; top: 27px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-700) 12%, var(--blue-800) 88%, transparent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--purple-700) 60%, transparent);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mo-motion .mo-steps:not(.is-in)::before { transform: scaleX(0); }
.mo-step__btn {
  position: relative;
  width: 100%; height: 100%;
  display: grid; align-content: start; gap: 6px;
  padding: var(--space-12);
  border: 1px solid var(--purple-card-border);
  background: var(--card-surface);
  color: var(--off-white);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.mo-step__btn:hover { background: var(--card-surface-hover); }
.mo-step__btn[aria-expanded="true"] { border-color: var(--purple-700); box-shadow: 0 0 0 1px var(--purple-700); }
.mo-step__btn:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.mo-step__n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--purple-900); }
.mo-step__t { font-size: var(--fs-14); font-weight: 500; color: var(--white); line-height: 1.3; }
.mo-step__l { font-size: var(--fs-12); color: var(--gray-900); line-height: 1.45; }
.mo-step-detail {
  margin-top: var(--space-12);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--purple-card-border);
  background: var(--purple-card);
  display: grid; gap: var(--space-12);
}
.mo-step-detail__head { display: flex; align-items: baseline; gap: var(--space-12); }
.mo-step-detail__head h3 { font-size: var(--fs-20); font-weight: var(--fw-heading); color: var(--white); }
.mo-step-detail__dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px var(--space-16); }
.mo-step-detail__dl dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-900); padding-top: 3px; }
.mo-step-detail__dl dd { font-size: var(--fs-14); line-height: 1.55; color: var(--off-white); }
.mo-step-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-evid { padding: 2px 8px; border: 1px solid var(--purple-border); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gray-900); }
.mo-step-fields { display: grid; gap: var(--space-8); }
.mo-step-fields__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.mo-step-fields .mo-finding { margin-top: 0; }
@media (max-width: 1100px) {
  .mo-steps { grid-template-columns: 1fr; }
  .mo-steps::before { left: 22px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--purple-700) 8%, var(--blue-800) 92%, transparent); transform-origin: top center; }
  .mo-motion .mo-steps:not(.is-in)::before { transform: scaleY(0); }
  .mo-step__btn { grid-template-columns: 36px 1fr; column-gap: var(--space-8); }
  .mo-step__n { grid-row: span 2; padding-top: 2px; }
  .mo-step__btn .mo-step__l { grid-column: 2; }
}
@media (max-width: 640px) {
  .mo-step-fields__row { grid-template-columns: 1fr 1fr; }
  .mo-step-detail { padding: var(--space-16); }
  .mo-step-detail__dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mo-steps::before { transition: none; } }

/* page-level cards that used to share the page colour stay lifted */
html[data-mo-theme] :is(.mo-field, .mo-conv__steps li, .mo-pill, .mo-route__foot .mo-route__log, .mo-route__play) { background: var(--mo-t-lift); }

/* routing diagram follows the theme: softer glow on light, pulse uses text colour */
.mo-route__pulse { fill: var(--mk-text-primary); filter: drop-shadow(0 0 6px var(--mk-accent)); }
html[data-mo-theme="light"] .mo-route__glow path { opacity: 0.08; }
html[data-mo-theme="light"] .mo-route__glow path.is-on { opacity: 0.28; }
html[data-mo-theme="light"] .mo-route__lines path { opacity: 0.5; }
html[data-mo-theme="light"] .mo-route__lines path.is-on { opacity: 1; }
/* light theme: opacity dimming drops secondary text under 4.5:1, so dimmed
   items keep full opacity there (state still shown by border/stream) */
html[data-mo-theme="light"] .mo-route.has-active :is(.mo-route__chip:not([aria-pressed="true"]):not(.is-preview), .mo-route__model:not(.is-on)) { opacity: 1; }
html[data-mo-theme="light"] .mo-viz-tree li { opacity: 0.92; }
@media (max-width: 640px) {
  .mo-sdd .mo-win__muted, .mo-sdd__bar .mo-sdd__chip:first-of-type { display: none; }
  .mo-sdd__board { flex: 1 1 0; }
  .mo-sdd__console { flex: 1 1 0; }
  .mo-ia__inspect { max-height: 30%; }
}

/* ── 7b. CLI (planned) ─────────────────────────────────────── */
.mo-planned {
  margin-left: var(--space-8);
  padding: 1px 8px;
  border: 1px solid var(--purple-border);
  border-radius: 999px;
  letter-spacing: 0.06em;
  color: var(--gray-900);
}
.mo-cli__switch { display: inline-flex; gap: 4px; padding: 4px; margin: var(--space-16) 0 var(--space-12); border: 1px solid var(--section-border); }
.mo-cli__opt {
  min-height: 40px; padding: 0 var(--space-16);
  border: 1px solid transparent; background: transparent;
  color: var(--gray-900); font-family: var(--font-mono); font-size: var(--fs-13); cursor: pointer;
}
.mo-cli__opt[aria-checked="true"] { background: var(--card-surface-hover); border-color: var(--purple-700); color: var(--white); }
.mo-cli__opt:focus-visible, .mo-cli__screen:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.mo-cli {
  border: 1px solid var(--mk-border-default);
  border-radius: var(--mk-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--mk-mono);
  font-size: var(--fs-13);
}
.mo-cli__tabs {
  display: flex; align-items: center; gap: var(--mk-space-4);
  padding: 8px var(--mk-space-4);
  border-bottom: 1px solid var(--mk-border-default);
  background: var(--mk-bg-sidebar);
  font-family: var(--mk-font); font-size: var(--mk-fs-md); color: var(--mk-text-secondary);
}
.mo-cli__tabs .is-on { padding: 2px 8px; border-radius: 4px; background: var(--mk-surface-control); color: var(--mk-text-primary); }
.mo-cli__ver { margin-left: auto; font-family: var(--mk-mono); font-size: var(--mk-fs-sm); }
.mo-cli__screen {
  height: 460px;
  overflow-y: auto;
  padding: var(--mk-space-4);
  background: var(--mk-bg-canvas);
  color: var(--mk-text-primary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.mo-cli__screen p { margin: 0 0 6px; }
.mo-cli .dim { color: var(--mk-text-tertiary); }
.mo-cli .ind { padding-left: 18px; }
.mo-cli .hl-g { color: var(--mk-success); }
.mo-cli .hl-b { color: var(--mk-info); }
.mo-cli .hl-a { color: var(--mk-warning); }
.mo-cli .bul { color: var(--mk-text-primary); margin-right: 6px; }
.mo-cli__ps { color: var(--mk-success); }
.mo-cli__caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: var(--mk-text-primary); margin-left: 2px; animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
.mo-cli__head { display: flex; gap: var(--mk-space-4); align-items: center; margin: var(--mk-space-3) 0; }
.mo-cli__head p { margin: 0; }
.mo-cli__auth { padding: 4px 8px; border-left: 2px solid var(--mk-success); background: var(--mk-surface-raised); }
.mo-cli__auth b { font-weight: 400; color: var(--mk-success); margin-right: 8px; }
.mo-cli__prompt { padding: 6px 8px; background: var(--mk-surface-control); margin-top: var(--mk-space-3) !important; }
.mo-cli__prompt span { color: var(--mk-text-secondary); margin-right: 6px; }
.mo-cli__box { margin-top: var(--mk-space-3); padding: 8px 10px; border-top: 1px solid var(--mk-border-strong); border-bottom: 1px solid var(--mk-border-strong); }
.mo-motion .mo-cli__out [data-l] { transition: opacity 0.25s ease, transform 0.25s ease; }
.mo-cli__out [data-l].is-hidden { opacity: 0; transform: translateY(4px); }
.mo-cli__ctrl { display: flex; gap: 6px; margin-top: var(--space-8); }
.mo-cli__btn { border-color: var(--section-border); background: transparent; color: var(--gray-900); }
.mo-cli__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-16); }
.mo-cli__card { display: grid; gap: 4px; padding: var(--space-12) var(--space-16); border: 1px solid var(--purple-card-border); background: var(--purple-card); opacity: 0.8; transition: opacity 0.2s, border-color 0.2s; }
.mo-cli__card[aria-current="true"] { opacity: 1; border-color: var(--purple-700); }
.mo-cli__card b { font-weight: 500; color: var(--white); font-size: var(--fs-14); }
.mo-cli__card span { font-size: var(--fs-13); color: var(--gray-900); }
@media (max-width: 640px) {
  .mo-cli__switch { display: grid; grid-template-columns: 1fr; width: 100%; }
  .mo-cli__tabs span:not(.is-on):not(.mo-cli__ver) { display: none; }
  .mo-cli__screen { height: 520px; font-size: var(--fs-12); }
  .mo-cli__cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mo-cli__caret { animation: none; } }

/* ── 7c. Connections marquee ───────────────────────────────── */
.mo-marquee {
  --mo-logo-h: 40px;
  margin-top: var(--space-24);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mo-marquee__track { display: flex; width: max-content; }
.mo-marquee.is-looping .mo-marquee__track {
  animation: mo-marquee var(--mo-loop-dur, 40s) linear infinite;
  will-change: transform;
}
.mo-marquee.is-looping:hover .mo-marquee__track,
.mo-marquee.is-looping:focus-within .mo-marquee__track,
.mo-marquee.is-paused .mo-marquee__track { animation-play-state: paused; }
@keyframes mo-marquee { to { transform: translateX(calc(-1 * var(--mo-loop-w, 50%))); } }
.mo-marquee__set {
  list-style: none;
  display: flex; align-items: center;
  gap: 56px;
  padding-right: 56px;   /* = gap, so one set width is an exact loop period */
}
.mo-logo { flex: none; display: grid; place-items: center; height: calc(var(--mo-logo-h) + 16px); color: var(--mo-logo-c, var(--gray-900)); transition: color 0.2s; }
.mo-logo__mark {
  display: block;
  width: var(--mo-logo-h); height: var(--mo-logo-h);
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.mo-logo__word { font-weight: 600; font-size: var(--fs-20); letter-spacing: -0.02em; white-space: nowrap; }
@media (hover: hover) { .mo-logo:hover { color: var(--white); } }
.mo-marquee__foot { display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-12); }
.mo-marquee__foot .mo-caption { margin: 0; }
/* no-JS / reduced motion: static wrapped grid, everything visible */
.mo-marquee:not(.is-looping) { -webkit-mask-image: none; mask-image: none; }
.mo-marquee:not(.is-looping) .mo-marquee__track { width: auto; }
.mo-marquee:not(.is-looping) .mo-marquee__set { flex-wrap: wrap; justify-content: center; gap: 24px 40px; padding-right: 0; }
@media (max-width: 640px) {
  .mo-marquee { --mo-logo-h: 30px; }
  .mo-marquee__set { gap: 36px; padding-right: 36px; }
  .mo-logo__word { font-size: var(--fs-15); }
  .mo-marquee__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mo-marquee .mo-marquee__track { animation: none !important; } }

/* Theme switch: vertical stack inside the text column */
.mo-ds .mo-switch { margin: var(--space-24) 0 var(--space-16); }
.mo-ds .mo-theme { grid-template-columns: 1fr; gap: var(--space-8); }
.mo-ds .mo-theme__btn { min-height: 64px; flex-direction: row; align-items: center; }
.mo-ds .mo-theme__thumb { width: 64px; }
.mo-ds .mo-theme__check { position: static; font-size: 24px; }
.mo-ds { align-items: start; }
@media (max-width: 640px) {
  .mo-ds .mo-theme__btn { flex-direction: row; font-size: var(--fs-15); }
  .mo-ds .mo-theme__thumb { width: 56px; height: 40px; }
}


/* Research labels: borderless, tinted (only .mo-tag and .mo-evid) */
.mo-tag, .mo-evid {
  border: 0;
  border-radius: 4px;
  background: color-mix(in oklab, var(--purple-700) 14%, transparent);
}
.mo-tag { padding: 2px 8px; }
.mo-evid { padding: 3px 8px; color: var(--off-white); }

/* =============================================================
   Soft fades (Linear-style). Reusable mask vars; applied only to
   static decorative layers, never to text or controls.
   ============================================================= */
.mo-page {
  --mo-fade: 48px;
  --mo-mask-edge-x: linear-gradient(90deg, transparent, #000 var(--mo-fade), #000 calc(100% - var(--mo-fade)), transparent);
  --mo-mask-edge-y: linear-gradient(180deg, transparent, #000 var(--mo-fade), #000 calc(100% - var(--mo-fade)), transparent);
  --mo-mask-bottom: linear-gradient(180deg, #000 calc(100% - var(--mo-fade) * 1.5), transparent);
}
.mo-mask-corners {
  -webkit-mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
          mask-composite: intersect;
}

/* Routing: stage fill + dotted grid move to a masked ::before; the box
   edge dissolves, chips/lanes/tags keep their own opaque fills. */
.mo-route { background: none; border-color: transparent; isolation: isolate; }
.mo-route::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(color-mix(in srgb, var(--mk-border-subtle) 55%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, color-mix(in srgb, var(--mk-border-subtle) 55%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--mk-bg-canvas);
  -webkit-mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
          mask-composite: intersect;
}
.mo-route__gate-name, .mo-route__gate-sub, .mo-route__lane, .mo-route__model { background: var(--mk-bg-canvas); }

/* IA canvas: dotted background fades toward the canvas edges */
.mo-ia__viewport { background-image: none; }
.mo-ia__viewport::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--mk-border-strong) 1px, transparent 1.2px);
  background-size: 18px 18px;
  pointer-events: none;
  -webkit-mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--mo-mask-edge-x), var(--mo-mask-edge-y);
          mask-composite: intersect;
}

/* Hero mockup: left unmasked — a bottom fade would also cut its elevation shadow. */

/* Architecture back window: body already masked (.mo-board__body); titlebar stays opaque by request. */

/* =============================================================
   Elevation scale (theme-aware). sm = inline cards · md = back window
   · lg = hero mockup + gallery screens · float = front Thread window.
   ============================================================= */
html[data-mo-theme="indigo"] { --mo-shadow-rgb: 1 0 8;  --mo-shadow-a: 0.95;  --mo-rim: rgb(255 255 255 / 0.07); }
html[data-mo-theme="black"]  { --mo-shadow-rgb: 0 0 0;   --mo-shadow-a: 1;  --mo-rim: rgb(255 255 255 / 0.07); }
html[data-mo-theme="light"]  { --mo-shadow-rgb: 44 40 78; --mo-shadow-a: 0.2; --mo-rim: rgb(255 255 255 / 0.7); }
html[data-mo-theme] {
  --mo-sh: rgb(var(--mo-shadow-rgb) / var(--mo-shadow-a));
  --mo-sh-soft: rgb(var(--mo-shadow-rgb) / calc(var(--mo-shadow-a) * 0.5));
  --mo-elev-sm: 0 1px 2px var(--mo-sh-soft), 0 6px 14px -6px var(--mo-sh-soft);
  --mo-elev-md: 0 2px 6px var(--mo-sh-soft), 0 18px 40px -12px var(--mo-sh);
  --mo-elev-lg: inset 0 1px 0 var(--mo-rim), 0 2px 6px var(--mo-sh-soft), 0 24px 48px -8px var(--mo-sh), 0 40px 100px -20px var(--mo-sh);
  --mo-shadow-float:
    0 0 0 1px var(--mo-rim),
    inset 0 1px 0 var(--mo-rim),
    0 2px 4px var(--mo-sh-soft),
    0 6px 12px var(--mo-sh-soft),
    0 24px 48px -8px var(--mo-sh),
    0 30px 80px 12px var(--mo-sh),
    0 48px 120px -16px var(--mo-sh);
}
.mo-thread { box-shadow: var(--mo-shadow-float); }
.mo-board { box-shadow: var(--mo-elev-md); }
.mo-hero .mk-viewport,
html[data-mo-theme="light"] .mo-hero .mk-viewport { box-shadow: var(--mo-elev-lg); }
.mo-frame, .mo-cli { box-shadow: var(--mo-elev-lg); }
.mo-card, .mo-step__btn, .mo-fact, .mo-cli__card { box-shadow: var(--mo-elev-sm); }
.mo-wins { padding-bottom: 120px; }

/* Research rail: sits ABOVE the cards (never over them), with a node per step */
.mo-steps { padding-top: 32px; }
.mo-steps::before { top: 10px; pointer-events: none; }
.mo-step { position: relative; }
.mo-step::before {           /* node on the rail */
  content: "";
  position: absolute; left: 14px; top: -26px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple-border);
  pointer-events: none;
}
.mo-step::after {            /* tick from node to its card */
  content: "";
  position: absolute; left: 17px; top: -19px;
  width: 1px; height: 19px;
  background: var(--purple-border);
  pointer-events: none;
}
.mo-step:has(.mo-step__btn[aria-expanded="true"])::before {
  background: var(--purple-700);
  box-shadow: 0 0 10px var(--purple-700);
}
@media (max-width: 1100px) {
  .mo-steps { padding-top: 0; padding-left: 28px; }
  .mo-steps::before { left: 9px; top: 8px; bottom: 8px; }
  .mo-step::before { left: -22px; top: 16px; }
  .mo-step::after { left: -15px; top: 19px; width: 15px; height: 1px; }
}

/* Light-on-dark elevation: coloured halo + brighter rim on dark themes,
   dark cool shadow on light. Halo is decorative (behind content). */
/* Halo = page-bg-derived (no purple/white tint): a deepened version of the
   page colour that reads over the lighter back window and melts into the page. */
html[data-mo-theme] {
  --mo-halo: color-mix(in oklab, color-mix(in oklab, var(--mo-page-bg) 45%, #000) 85%, transparent);
  --mo-halo-soft: color-mix(in oklab, var(--mo-page-bg) 70%, transparent);
  --mo-contact: color-mix(in oklab, var(--mo-page-bg) 40%, #000);
}
html[data-mo-theme="indigo"] { --mo-rim: rgb(255 255 255 / 0.13); }
html[data-mo-theme="black"]  { --mo-rim: rgb(255 255 255 / 0.12); }
html[data-mo-theme="light"]  {
  --mo-halo: color-mix(in oklab, color-mix(in oklab, var(--mo-page-bg) 40%, #000) 22%, transparent);
  --mo-halo-soft: color-mix(in oklab, color-mix(in oklab, var(--mo-page-bg) 40%, #000) 10%, transparent);
  --mo-contact: color-mix(in oklab, color-mix(in oklab, var(--mo-page-bg) 40%, #000) 35%, transparent);
}
html[data-mo-theme] {
  --mo-shadow-float:
    0 0 0 1px var(--mo-rim),
    inset 0 1px 0 var(--mo-rim),
    0 2px 4px var(--mo-sh-soft),
    6px 10px 18px var(--mo-contact),
    0 26px 90px 4px var(--mo-halo),
    0 0 80px 16px var(--mo-halo-soft),
    0 48px 120px -16px var(--mo-sh);
  --mo-elev-lg:
    inset 0 1px 0 var(--mo-rim),
    0 0 0 1px var(--mo-rim),
    0 24px 48px -8px var(--mo-sh),
    0 24px 80px -12px var(--mo-halo-soft),
    0 40px 100px -20px var(--mo-sh);
}
/* front window one surface step above the back window */
.mo-thread { background: var(--mk-surface-elevated); }
.mo-thread .mo-thread__composer { background: var(--mk-surface-raised); }

/* Design system: two-line title + mockup bleeding off the right edge */
.mo-line { display: block; }
.mo-page { --mo-bleed-scale: 1.5; --mo-bleed-fade: 18%; }
.mo-ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); overflow: clip; overflow-x: clip; margin-right: calc(-1 * var(--page-pad-x)); padding-right: 0; }
.mo-ds__bleed {
  /* this box is exactly the visible area: from the column's left edge to the viewport's right edge */
  overflow: hidden;
  padding: 24px 0 64px 24px;
  margin: -24px 0 -64px -24px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--mo-bleed-fade)), transparent), var(--mo-mask-edge-y);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, #000 calc(100% - var(--mo-bleed-fade)), transparent), var(--mo-mask-edge-y);
          mask-composite: intersect;
}
.mo-ds__bleed .mk-viewport { width: calc(100% * var(--mo-bleed-scale)); }
@media (max-width: 1100px) {
  .mo-page { --mo-bleed-scale: 1.35; }
  .mo-ds { grid-template-columns: 1fr; }
  .mo-ds > div:first-child { padding-right: var(--page-pad-x); }
}

/* ── 3c. Build: two-track timeline ─────────────────────────── */
.mo-tracks { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-24); }
.mo-tracks__labels { display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gray-900); }
.mo-tracks__labels i { color: var(--purple-700); }
.mo-tracks__shared { color: var(--white); }
.mo-tracks__steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
/* shared tokens bar: the middle layer both lanes sync with */
.mo-tracks__steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--purple-700) 8%, var(--blue-800) 92%, transparent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--purple-700) 60%, transparent);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.mo-motion .mo-tracks:not(.is-in) .mo-tracks__steps::before { transform: translateY(-50%) scaleX(0); }
.mo-track { position: relative; display: grid; grid-template-rows: 1fr auto 1fr; gap: 14px; }
.mo-track__cell {
  display: grid; place-items: center; text-align: center;
  min-height: 56px; padding: var(--space-8);
  font-size: var(--fs-12); line-height: 1.4; color: var(--gray-900);
  background: color-mix(in oklab, var(--purple-700) 8%, transparent);
  border-radius: 6px;
}
.mo-track__cell--code { font-family: var(--font-mono); }
/* two-way sync ticks between lanes and the tokens bar */
.mo-track::before, .mo-track::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: var(--purple-border); pointer-events: none;
}
.mo-track::before { top: calc(50% - 44px); }
.mo-track::after { bottom: calc(50% - 44px); }
.mo-track__node {
  position: relative; z-index: 1;
  display: grid; gap: 2px; justify-items: start;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--purple-card-border);
  border-radius: 8px;
  background: var(--card-surface);
  box-shadow: var(--mo-elev-sm);
  color: var(--off-white); font: inherit; text-align: left; cursor: pointer;
}
.mo-track__node[aria-expanded="true"] { border-color: var(--purple-700); box-shadow: 0 0 0 1px var(--purple-700), var(--mo-elev-sm); }
.mo-track__node:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 2px; }
.mo-track__t { font-size: var(--fs-13); font-weight: 500; color: var(--white); line-height: 1.3; }
.mo-track__d { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--gray-900); }
.mo-track__vhs { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--purple-900); }
.mo-track__term { padding: 1px 6px; border-radius: 4px; background: color-mix(in oklab, var(--purple-700) 14%, transparent); }
.mo-track__finding { font-size: var(--fs-14); line-height: 1.55; color: var(--off-white); }
@media (max-width: 900px) {
  .mo-tracks { grid-template-columns: 1fr; }
  .mo-tracks__labels { display: none; }
  .mo-tracks__steps { grid-template-columns: 1fr; gap: var(--space-12); }
  .mo-tracks__steps::before { left: 12px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: none;
    background: linear-gradient(180deg, transparent, var(--purple-700) 6%, var(--blue-800) 94%, transparent); transform-origin: top center; }
  .mo-motion .mo-tracks:not(.is-in) .mo-tracks__steps::before { transform: scaleY(0); }
  .mo-track { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 6px; margin-left: 28px; }
  .mo-track::before, .mo-track::after { display: none; }
  .mo-track__node { grid-column: 1 / -1; grid-row: 1; }
  .mo-track__cell { min-height: 0; place-items: start; text-align: left; }
  .mo-track__cell--fig::before { content: "Figma · "; color: var(--purple-900); }
  .mo-track__cell--code::before { content: "Code · "; color: var(--purple-900); }
}
@media (prefers-reduced-motion: reduce) { .mo-tracks__steps::before { transition: none; } }
/* nodes sit OVER the tokens bar: opaque fill so the line never crosses text */
.mo-track__node { background: linear-gradient(var(--card-surface), var(--card-surface)), var(--mo-t-lift); }

/* Real vhs logo (pixel art: keep hard edges, no recolouring) */
.mo-cli__logo img, .mo-track__logo { image-rendering: pixelated; display: block; }
.mo-cli__logo img { width: 64px; height: 64px; }
@media (max-width: 640px) { .mo-cli__logo img { width: 48px; height: 48px; } }

/* ── Routing on phones: vertical mirror of the desktop, one viewport ──
   chips (2×4) → horizontal gate → 5 lanes → 5 model tags. */
@media (max-width: 640px) {
  .mo-route {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chips" "gate" "lanes" "models";
    row-gap: clamp(18px, 3.2svh, 30px);
    padding: 14px 10px;
    max-height: min(560px, calc(100svh - 200px));
  }
  .mo-route__chips { grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 14px; }
  .mo-route__chip {
    position: relative;
    min-height: clamp(30px, 4.6svh, 36px);
    padding: 0 8px;
    font-size: var(--fs-12);
    gap: 6px;
  }
  .mo-route__chip::after { content: ""; position: absolute; inset: -4px 0; }  /* ≥44px tap target without layout change */
  .mo-route__chip i { font-size: 14px; }
  .mo-route__gate { min-height: 28px; }
  .mo-route__gate-name, .mo-route__gate-sub { font-size: var(--fs-11); }
  .mo-route__lanes, .mo-route__models {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .mo-route__lane, .mo-route__model {
    padding: 4px 3px;
    border-left: 0;
    border-top: 2px solid var(--mk-border-strong);
    text-align: center;
    overflow-wrap: anywhere;
  }
  .mo-route__lane.is-on, .mo-route__model { border-top-color: var(--c); }
  .mo-route__lane b { font-size: var(--fs-11); line-height: 1.25; }
  .mo-route__lane span { font-size: var(--fs-11); min-height: 0; }
  .mo-route__lane:not(.is-on) span { display: none; }
  .mo-route__model { font-size: var(--fs-11); line-height: 1.3; }
  .mo-route__log { min-height: 0; font-size: var(--fs-12); padding: var(--space-8) var(--space-12); overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  /* reserve room for the active lane's agent line so the stage never changes height */
  .mo-route__lane { min-height: 76px; align-content: start; }
}
@media (max-width: 640px) { .mo-route__chip { text-align: left; line-height: 1.2; } }