:root {
        --aph-say: #38bdf8;
        --aph-reasoning: #94a3b8;
        --aph-attack: #f87171;
        --aph-cooperate: #4ade80;
        --aph-hp-fill: #6366f1;
        --public-page-max: 74rem;
        --insights-page-max: min(100%, 96rem);
        --public-ink: #e5e7eb;
        --public-muted: #9ca3af;
        --public-line: rgb(148 163 184 / 0.22);
        --public-line-strong: rgb(148 163 184 / 0.38);
        --public-surface: #12131a;
        --public-surface-strong: #171923;
        --public-surface-muted: #0d0e14;
        --public-accent: #7dd3fc;
        --public-accent-soft: rgb(125 211 252 / 0.16);
        --public-accent-secondary: #c084fc;
        --public-good-soft: rgb(74 222 128 / 0.14);
        --public-bad-soft: rgb(248 113 113 / 0.14);
        --public-neutral-soft: rgb(250 204 21 / 0.14);
        --public-shadow: 0 18px 46px rgb(0 0 0 / 0.28);
      }

      html[data-theme="light"] {
        --public-ink: #24211d;
        --public-muted: #67625b;
        --public-line: rgb(64 59 54 / 0.16);
        --public-line-strong: rgb(64 59 54 / 0.3);
        --public-surface: #f2eee7;
        --public-surface-strong: #ece7de;
        --public-surface-muted: #f7f4ed;
        --public-accent: #345a73;
        --public-accent-soft: rgb(52 90 115 / 0.1);
        --public-accent-secondary: #76518d;
        --public-good-soft: rgb(67 132 87 / 0.14);
        --public-bad-soft: rgb(170 86 86 / 0.14);
        --public-neutral-soft: rgb(180 142 55 / 0.14);
        --public-shadow: 0 10px 24px rgb(77 67 54 / 0.08);
      }

      /* Fill viewport: room + turns share stable “below hero” height */
      main.container:has(.alt-hero-layout) {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        box-sizing: border-box;
      }

      body[data-viewer-mode="true"] footer.app-footer,
      body[data-landing="true"] footer.app-footer {
        display: none;
      }

      body[data-landing="true"] main.container {
        padding: 0;
      }

      body[data-landing="true"] #public-page {
        padding: 0;
      }

      .app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.15rem;
        padding: 0.9rem 0 1rem;
        border-bottom: 1px solid var(--public-line);
      }

      .brand-link {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        text-decoration: none;
        color: inherit;
      }

      .brand-mark {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent) 18%, transparent), transparent),
          linear-gradient(135deg, var(--public-surface-strong), var(--public-surface-muted));
        border: 1px solid var(--public-line-strong);
        box-shadow:
          inset 0 1px 0 rgb(255 255 255 / 0.05),
          0 0 0 1px rgb(0 0 0 / 0.08);
      }

      .brand-copy {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }

      .brand-copy strong {
        font-size: 1.05rem;
        line-height: 1.1;
      }

      .brand-meta {
        color: var(--public-muted);
        font-size: 0.8rem;
      }

      .app-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        flex: 1 1 auto;
        min-width: 0;
      }

      .app-nav a {
        padding: 0.55rem 0.8rem;
        border-radius: 0.45rem;
        border: 1px solid transparent;
        color: var(--public-muted);
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition:
          background-color 120ms ease,
          color 120ms ease,
          border-color 120ms ease;
      }

      .app-nav a:hover,
      .app-nav a[aria-current="page"] {
        background: var(--public-accent-soft);
        border-color: var(--public-line-strong);
        color: var(--public-ink);
        text-decoration: none;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }

      .theme-icon-btn {
        min-width: 2.75rem;
        padding: 0.45rem 0.7rem;
        border-radius: 0.45rem;
        border-color: var(--public-line-strong);
        background: var(--public-surface-muted);
      }

      .theme-icon {
        font-size: 1rem;
        line-height: 1;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .viewer-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid var(--public-line);
        border-radius: 0.6rem;
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent-soft) 85%, transparent), transparent 65%),
          color-mix(in srgb, var(--public-surface-muted) 82%, var(--pico-background-color));
      }

      .viewer-toolbar-main {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
      }

      .viewer-kicker {
        margin: 0;
        color: var(--public-muted);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-status {
        margin: 0;
        font-size: 0.95rem;
      }

      .viewer-toolbar-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.75rem;
        flex: 1 1 26rem;
      }

      .viewer-control-group {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem 0.65rem;
        padding: 0.45rem 0.6rem;
        border: 1px solid var(--public-line);
        border-radius: 0.45rem;
        background: color-mix(in srgb, var(--public-surface) 72%, transparent);
      }

      .viewer-control-group--session {
        margin-left: 0.15rem;
        border-color: var(--public-line-strong);
      }

      .viewer-group-label {
        color: var(--public-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-toolbar-slot {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .viewer-toolbar-slot:empty {
        display: none;
      }

      .viewer-toggle {
        margin: 0;
        font-size: 0.82rem;
      }

      .viewer-action-btn {
        min-height: 2.2rem;
        padding: 0.45rem 0.75rem;
        border-radius: 0.42rem;
      }

      /* --- Prototype layout only below header --- */
      .alt-hero-layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1 1 0;
        min-height: clamp(32rem, calc(100dvh - 7rem), 56rem);
      }

      /* Hero: fixed 40% viewport; map floats on top-left over art */
      .alt-hero {
        width: 100%;
        flex-shrink: 0;
      }

      .alt-hero-composite {
        position: relative;
        width: 100%;
        height: 40dvh;
        min-height: 40dvh;
        max-height: 40dvh;
        margin: 0;
        box-sizing: border-box;
        border-radius: var(--pico-border-radius);
        background: #0f172a;
        overflow: hidden;
        box-shadow: 0 12px 40px color-mix(in srgb, #000 35%, transparent);
      }

      .alt-hero-composite #rail-room-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: filter 0.7s ease;
      }

      /* Shared glass for map + full agent chrome HUD on the hero */
      .alt-hero-hud {
        position: absolute;
        z-index: 2;
        border-radius: 0.55rem;
        background: color-mix(in srgb, #0f172a 28%, transparent);
        border: 1px solid color-mix(in srgb, #fff 35%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 24px color-mix(in srgb, #000 28%, transparent);
      }

      .alt-hero-map-panel {
        left: 0.65rem;
        top: 0.65rem;
        max-width: min(10.75rem, 42vw);
        padding: 0.4rem 0.45rem 0.5rem;
      }

      /* Full agent bar — bottom-right, one horizontal row, white type on dark glass */
      #mud-agent-chrome.alt-hero-chrome-panel {
        right: 0.65rem;
        bottom: 0.65rem;
        left: auto;
        top: auto;
        width: max-content;
        max-width: min(42rem, calc(100% - 1.35rem));
        padding: 0.42rem 0.7rem 0.48rem;
        flex-shrink: 0;
        border-radius: 0.55rem;
        /* Slightly darker than map HUD so white text stays legible on bright art */
        background: color-mix(in srgb, #020617 52%, transparent);
        border: 1px solid color-mix(in srgb, #fff 22%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 4px 28px color-mix(in srgb, #000 40%, transparent);
      }

      .alt-hero-chrome-panel .rail-controls {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
        padding: 0;
        gap: 0.5rem 0.85rem;
        white-space: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: thin;
        color: #fff;
      }

      .alt-hero-chrome-panel .rail-controls::-webkit-scrollbar {
        height: 4px;
      }

      .alt-hero-chrome-panel .rail-controls::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, #fff 35%, transparent);
        border-radius: 999px;
      }

      .alt-hero-chrome-panel .rail-stat {
        flex-shrink: 0;
        color: #fff;
        font-size: 0.78rem;
      }

      .alt-hero-chrome-panel #rail-turn {
        font-weight: 600;
        color: #fff;
        text-shadow: 0 1px 3px rgb(0 0 0 / 0.75);
      }

      .alt-hero-chrome-panel .rail-hp-track {
        width: 3.75rem;
        height: 0.36rem;
        background: color-mix(in srgb, #fff 22%, transparent);
        border: 1px solid color-mix(in srgb, #fff 38%, transparent);
      }

      .alt-hero-chrome-panel #rail-hp-bar {
        border-radius: 999px;
      }

      /* Lobby: hide HUD chips until a run is active */
      .alt-hero-layout:has(.alt-main-split[data-game-active="false"]) .alt-hero-hud {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
      }

      .alt-hero-map-label {
        display: block;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: color-mix(in srgb, #0a0a0a 88%, transparent);
        text-shadow: 0 0 0.35rem color-mix(in srgb, #fff 55%, transparent);
        margin: 0 0 0.2rem 0.1rem;
      }

      .alt-hero-map-panel #rail-map-slot {
        width: 100%;
        max-width: 10rem;
        margin: 0;
      }

      .alt-hero-map-panel .mud-map-svg {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.9));
      }

      /* High-contrast “white chip + black ink” map (readable on busy photos) */
      .alt-hero-map-panel .map-edge {
        stroke: #0a0a0a;
        stroke-width: 2.25;
        stroke-linecap: round;
      }

      .alt-hero-map-panel .map-room {
        fill: #f8fafc;
        stroke: #0a0a0a;
        stroke-width: 1.35;
      }

      .alt-hero-map-panel .map-room-active {
        fill: #7dd3fc;
        stroke: #0a0a0a;
        stroke-width: 1.6;
      }

      .alt-hero-map-panel .map-label {
        fill: #0a0a0a;
        font-size: 7.5px;
        font-weight: 700;
        stroke: none;
        paint-order: normal;
        pointer-events: none;
      }

      .alt-hero-map-panel .map-dot-you {
        fill: #22d3ee;
        stroke: #0a0a0a;
        stroke-width: 0.9px;
        paint-order: stroke fill;
      }

      .alt-hero-map-panel .map-dot-other {
        fill: #e2e8f0;
        stroke: #0a0a0a;
        stroke-width: 0.85px;
        opacity: 1;
        paint-order: stroke fill;
      }

      html[data-theme="light"] .alt-hero-hud {
        background: color-mix(in srgb, #fff 32%, transparent);
        border-color: color-mix(in srgb, #0f172a 22%, transparent);
      }

      html[data-theme="light"] .alt-hero-map-label {
        color: #0a0a0a;
        text-shadow: 0 0 0.35rem color-mix(in srgb, #fff 70%, transparent);
      }

      html[data-theme="light"] #mud-agent-chrome.alt-hero-chrome-panel {
        background: color-mix(in srgb, #020617 48%, transparent);
        border-color: color-mix(in srgb, #fff 26%, transparent);
      }

      html[data-theme="light"] .alt-hero-chrome-panel .rail-controls {
        color: #fff;
      }

      html[data-theme="light"] .alt-hero-chrome-panel .rail-hp-track {
        background: color-mix(in srgb, #fff 20%, transparent);
        border-color: color-mix(in srgb, #fff 36%, transparent);
      }

      /* Bottom: room / map left, turns + chrome right.
         When #mud-top-rail is display:none (lobby), grid auto-placement used to put
         .viewer-right-stack in column 1 — turns looked "on the left". We pin columns
         via data-game-active set from viewer-app setGameChromeVisible(). */
      .alt-main-split {
        display: grid;
        gap: 1.25rem;
        align-items: stretch;
        align-content: stretch;
        min-height: 18rem;
        flex: 1 1 0;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
      }

      .alt-main-split[data-game-active="true"] {
        grid-template-columns: minmax(0, 40%) minmax(min(22rem, 52vw), 1fr);
      }

      .alt-main-split[data-game-active="true"] #mud-top-rail {
        grid-column: 1;
      }

      .alt-main-split[data-game-active="true"] .viewer-right-stack {
        grid-column: 2;
        min-width: 0;
      }

      .alt-main-split[data-game-active="false"] .viewer-right-stack {
        grid-column: 1 / -1;
      }

      #mud-top-rail {
        position: relative;
        top: auto;
        align-self: stretch;
        min-height: 0;
        height: 100%;
        max-height: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: color-mix(in srgb, var(--pico-background-color) 96%, var(--pico-muted-border-color));
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius);
        padding: 0.85rem;
        margin: 0;
        min-width: 0;
      }

      .alt-env-head {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--pico-muted-color);
        margin: 0 0 0.5rem 0;
        flex-shrink: 0;
      }

      .viewer-left-stack {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        flex: 1 1 0;
        min-height: 0;
      }

      .rail-text {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        gap: 0.35rem;
      }

      .rail-text h2,
      #rail-room-title {
        margin: 0 0 0.5rem 0;
        font-size: 1.05rem;
        flex-shrink: 0;
      }

      .rail-flavor-slot {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding-right: 0.15rem;
      }

      #rail-flavor {
        margin: 0;
        font-size: 0.88rem;
        color: var(--pico-muted-color);
        line-height: 1.45;
        white-space: pre-wrap;
      }

      .rail-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        align-items: center;
        margin: 0;
        padding: 0;
        border: none;
      }

      #mud-agent-chrome:not(.alt-hero-chrome-panel) {
        flex-shrink: 0;
        background: var(--pico-background-color);
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius);
        padding: 0.65rem 0.75rem;
      }

      .viewer-right-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: none;
      }

      .rail-stat {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .rail-hp-track {
        width: 4rem;
        height: 0.35rem;
        background: var(--pico-muted-border-color);
        border-radius: 999px;
        overflow: hidden;
      }

      #rail-hp-bar {
        height: 100%;
        background: var(--aph-hp-fill);
        width: 100%;
      }

      .persp-opt {
        margin-right: 0.75rem;
        font-size: 0.85rem;
      }

      .pacing-opt {
        margin-right: 0.75rem;
        font-size: 0.85rem;
      }

      #mud-scroll {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        scroll-behavior: smooth;
        padding-right: 0.25rem;
        border: 1px solid var(--pico-muted-border-color);
        border-radius: var(--pico-border-radius);
        padding: 0.75rem;
      }

      @media (max-width: 768px) {
        .alt-main-split[data-game-active="true"] {
          grid-template-columns: 1fr;
          grid-template-rows: auto minmax(0, 1fr);
        }

        .alt-main-split[data-game-active="false"] {
          grid-template-rows: minmax(0, 1fr);
        }

        .alt-main-split[data-game-active="true"] #mud-top-rail,
        .alt-main-split[data-game-active="true"] .viewer-right-stack {
          grid-column: auto;
        }

        /* Nav is now one line on mobile — restore hero to full height */
        .alt-hero-composite {
          height: 40dvh;
          min-height: 40dvh;
          max-height: 40dvh;
        }

        .alt-hero-map-panel {
          max-width: min(9.5rem, 52vw);
          padding: 0.35rem 0.4rem 0.45rem;
        }

        #mud-agent-chrome.alt-hero-chrome-panel {
          right: 0.5rem;
          bottom: 0.5rem;
          max-width: calc(100% - 1rem);
          padding: 0.4rem 0.5rem 0.45rem;
        }

        .alt-hero-chrome-panel .rail-stat {
          font-size: 0.78rem;
        }

        #mud-scroll {
          flex: 1 1 0;
          min-height: 12rem;
        }

        /* Room rail: one-line label — title only, no flavor, no padding */
        #mud-top-rail .viewer-left-stack {
          padding: 0.2rem 0.25rem 0.15rem;
        }

        #mud-top-rail .alt-env-head {
          display: none;
        }

        #mud-top-rail h2 {
          font-size: 0.75rem;
          font-weight: 600;
          margin-bottom: 0;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: color-mix(in srgb, var(--pico-color) 60%, transparent);
        }

        #mud-top-rail .rail-flavor-slot,
        #mud-top-rail #rail-key-events {
          display: none !important;
        }
      }

      .mud-turn-block {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--pico-muted-border-color);
      }

      .mud-turn-head {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--pico-muted-color);
        margin-bottom: 0.65rem;
        line-height: 1.35;
        word-break: break-word;
      }

      .mud-phase {
        margin: 0.5rem 0;
      }

      .mud-phase-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--pico-muted-color);
        margin: 0 0 0.35rem 0;
      }

      .mud-setup p {
        margin: 0.35rem 0;
        font-size: 0.9rem;
        white-space: pre-wrap;
      }

      .mud-you-say {
        color: var(--aph-say);
        margin: 0.25rem 0;
      }

      .mud-other-say {
        margin: 0.25rem 0;
      }

      .mud-silence {
        color: var(--pico-muted-color);
        font-style: italic;
        margin: 0.25rem 0;
      }

      .mud-action {
        margin: 0.25rem 0;
        font-size: 0.95rem;
      }

      .mud-action.phase-attack {
        color: var(--aph-attack);
      }

      .mud-action.phase-cooperate {
        color: var(--aph-cooperate);
      }

      .mud-resolution {
        margin: 0.35rem 0 0 1rem;
        padding: 0;
        font-size: 0.88rem;
        color: var(--pico-color);
      }

      .mud-muted {
        color: var(--pico-muted-color);
        font-size: 0.9rem;
      }

      .mud-disclosures {
        margin-top: 0.75rem;
      }

      .mud-fold {
        margin: 0.35rem 0;
        font-size: 0.82rem;
      }

      .mud-fold-body {
        margin-top: 0.35rem;
        white-space: pre-wrap;
        color: var(--pico-muted-color);
      }

      .mud-outcome {
        margin-top: 1.5rem;
        padding: 1rem;
        border: 1px solid var(--pico-primary);
        border-radius: var(--pico-border-radius);
        background: color-mix(in srgb, var(--pico-primary) 8%, transparent);
      }

      /* LLM status banner — bottom-left hero overlay, matches agent chrome glass */
      .alt-hero-status-panel {
        left: 0.65rem;
        bottom: 0.65rem;
        right: auto;
        top: auto;
        max-width: min(22rem, calc(100% - 1.35rem));
        padding: 0.42rem 0.7rem 0.48rem;
        font-family: ui-monospace, "Cascadia Code", monospace;
        font-size: 0.78rem;
        color: #fff;
        background: color-mix(in srgb, #020617 52%, transparent);
        border: 1px solid color-mix(in srgb, #fff 22%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 4px 28px color-mix(in srgb, #000 40%, transparent);
      }

      .alt-hero-status-panel[hidden] {
        display: none !important;
      }

      .llm-status-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: baseline;
        justify-content: space-between;
        white-space: nowrap;
        overflow: hidden;
      }

      .llm-cursor {
        animation: llm-cursor-blink 1.1s step-end infinite;
        color: #fff;
      }

      @keyframes llm-cursor-blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }

      .llm-status-elapsed {
        color: color-mix(in srgb, #fff 55%, transparent);
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
      }

      .llm-status-detail {
        display: block;
        margin-top: 0.2rem;
        color: color-mix(in srgb, #fff 48%, transparent);
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        min-height: 1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .llm-status-progress {
        display: block;
        width: 100%;
        height: 0.28rem;
        margin-top: 0.38rem;
        -webkit-appearance: none;
        appearance: none;
        background: color-mix(in srgb, #fff 16%, transparent);
        border: none;
        border-radius: 2px;
      }
      .llm-status-progress::-webkit-progress-bar {
        background: transparent;
        border-radius: 2px;
      }
      .llm-status-progress::-webkit-progress-value {
        background: color-mix(in srgb, #fff 60%, transparent);
        border-radius: 2px;
      }
      .llm-status-progress::-moz-progress-bar {
        background: color-mix(in srgb, #fff 60%, transparent);
        border-radius: 2px;
      }

      .lobby-error {
        color: var(--pico-del-color, #c00);
        margin-bottom: 1rem;
      }

      footer.app-footer {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--pico-muted-border-color);
        font-size: 0.8rem;
        color: var(--pico-muted-color);
        text-align: center;
      }

      html[data-debug="false"] .mud-debug {
        display: none;
      }

      /* ── Agent chips ── */
      .agent-chip {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-weight: 600;
      }
      .agent-chip-portrait {
        width: 16px;
        height: 16px;
        image-rendering: pixelated;
        border-radius: 2px;
      }
      .agent-chip.has-portrait .agent-chip-dot { display: none; }
      .agent-chip-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--agent-color);
        display: inline-block;
        flex-shrink: 0;
      }
      .agent-chip-name { color: var(--agent-color); }

      /* ── Turn-card typography ── */
      .mud-action-line {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
      }

      /* ── Chat bubble speech ── */
      .speech-row {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        margin: .55rem 0;
      }
      .speech-row--you { flex-direction: row-reverse; }
      .speech-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
        background: var(--agent-color);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        margin-top: .1rem;
      }
      .speech-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated;
      }
      .speech-avatar-label {
        color: rgba(255,255,255,.88);
        font-size: .72rem;
        font-weight: 700;
        pointer-events: none;
        line-height: 1;
      }
      .speech-content {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 44px);
      }
      .speech-sender {
        font-size: .66rem;
        font-weight: 700;
        margin-bottom: .18rem;
        margin-left: .2rem;
      }
      .speech-row--you .speech-sender {
        text-align: right;
        margin-left: 0;
        margin-right: .2rem;
      }
      .speech-bubble {
        background: color-mix(in srgb, var(--agent-color) 10%, var(--public-surface-strong));
        border: 1px solid color-mix(in srgb, var(--agent-color) 28%, var(--public-line));
        border-radius: 0 .5rem .5rem .5rem;
        padding: .45rem .65rem;
        font-size: .88rem;
        line-height: 1.5;
        color: var(--public-ink);
        word-break: break-word;
      }
      .speech-row--you .speech-bubble {
        border-radius: .5rem 0 .5rem .5rem;
        background: color-mix(in srgb, var(--agent-color) 16%, var(--public-surface-strong));
      }
      .speech-bubble--silent {
        background: transparent;
        border-style: dashed;
        border-color: var(--public-line);
        color: var(--public-muted);
        font-style: italic;
        opacity: .65;
        padding: .28rem .55rem;
      }
      .speech-all-silent {
        color: var(--public-muted);
        font-size: .82rem;
        font-style: italic;
        padding: .3rem 0;
        text-align: center;
      }

      /* ── Room crossfade + thinking-mode dim ──
         Must include `filter` here or the later `transition: opacity`
         shorthand wipes the `transition: filter` set earlier and the dim
         snaps on/off on every phase boundary (looks like a flicker). */
      #rail-room-image { transition: opacity 250ms ease, filter 600ms ease; }
      #rail-room-image.is-transitioning { opacity: 0; }

      /* ── Two-agent status strip ── */
      #mud-agent-chrome.alt-hero-chrome-panel { display: flex; flex-direction: column; gap: .2rem; }
      #two-agent-strip {
        display: grid;
        grid-template-columns: max-content auto max-content;
        column-gap: .5rem;
        row-gap: .22rem;
        align-items: center;
        border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
        padding-top: .22rem;
      }
      #two-agent-strip:empty { display: none; }
      .agent-row { display: contents; }
      .phase-track { display: inline-flex; gap: 4px; align-items: center; align-self: center; }
      .phase-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: color-mix(in srgb, #fff 22%, transparent);
        border: 1px solid color-mix(in srgb, #fff 30%, transparent);
        flex-shrink: 0;
      }
      .phase-dot--done {
        background: #10b981;
        border-color: #10b981;
      }
      @keyframes phase-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: .55; transform: scale(1.35); }
      }
      .phase-dot--active {
        background: var(--public-accent);
        border-color: var(--public-accent);
        animation: phase-pulse 800ms ease-in-out infinite;
      }
      .hp-pip-bar { display: inline-flex; gap: 2px; align-items: center; }
      .hp-pip {
        width: 6px;
        height: 6px;
        border-radius: 1px;
        background: color-mix(in srgb, #fff 20%, transparent);
        border: 1px solid color-mix(in srgb, #fff 35%, transparent);
        flex-shrink: 0;
      }
      .hp-pip.hp-pip--filled {
        background: var(--aph-hp-fill);
        border-color: var(--aph-hp-fill);
      }

      /* ── Pulse panel ── */
      .pulse-panel {
        position: absolute;
        top: .65rem;
        right: .65rem;
        width: 320px;
        max-width: calc(100% - 1.35rem);
        z-index: 10;
        padding: .45rem .7rem .55rem;
        font-family: ui-monospace, "Cascadia Code", monospace;
        font-size: .75rem;
        color: #fff;
        background: color-mix(in srgb, #020617 58%, transparent);
        border: 1px solid color-mix(in srgb, #fff 20%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 4px 28px color-mix(in srgb, #000 40%, transparent);
        border-radius: .5rem;
      }
      .pulse-panel[hidden] { display: none !important; }

      /* ── Thinking-pane toggle (mobile): user override for dim + pulse ── */
      .hero-pulse-toggle {
        display: none;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 11;
        width: 1.95rem;
        height: 1.95rem;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, #fff 30%, transparent);
        background: color-mix(in srgb, #020617 62%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #e2e8f0;
        font-size: 0.85rem;
        line-height: 1;
        cursor: pointer;
        align-items: center;
        justify-content: center;
      }
      .hero-pulse-toggle:focus-visible {
        outline: 2px solid color-mix(in srgb, #7c4dff 70%, transparent);
        outline-offset: 2px;
      }
      /* When user has collapsed the pane: force-bright art + hide pulse */
      .alt-hero-composite.pulse-collapsed[data-hero-mode="thinking"] #rail-room-image {
        filter: none;
      }
      .alt-hero-composite.pulse-collapsed .pulse-panel {
        display: none !important;
      }
      .pulse-panel-head {
        display: flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: .3rem;
      }
      .pulse-panel-label {
        color: color-mix(in srgb, #fff 52%, transparent);
        font-size: .67rem;
        letter-spacing: .05em;
      }
      .pulse-panel-stream {
        height: 9rem;
        overflow-y: scroll;
        scrollbar-width: none;
        word-break: break-word;
        color: color-mix(in srgb, #fff 80%, transparent);
        line-height: 1.45;
      }
      .pulse-panel-stream::-webkit-scrollbar { display: none; }
      .pulse-token { transition: opacity 1.2s ease; }
      .pulse-token--old { opacity: .3; }
      .pulse-separator {
        display: block;
        height: 1px;
        background: color-mix(in srgb, #fff 14%, transparent);
        margin: .3rem 0;
      }

      /* ── Outcome tableau ── */
      .outcome-tableau {
        margin-top: 2rem;
        padding: 1.25rem 1.35rem;
        border: 1px solid var(--public-line-strong);
        border-radius: .6rem;
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent-soft) 55%, transparent), transparent 38%),
          var(--public-surface);
        box-shadow: var(--public-shadow);
      }
      .tableau-title {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-align: center;
        text-transform: uppercase;
        color: var(--public-accent);
      }
      .tableau-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: .85rem;
        font-size: .88rem;
      }
      .tableau-agent-row td {
        padding: .3rem .45rem;
        vertical-align: middle;
      }
      .tableau-hp { font-variant-numeric: tabular-nums; color: var(--public-muted); white-space: nowrap; }
      .tableau-holding { font-size: .92rem; }
      .tableau-state { color: var(--public-muted); font-style: italic; }
      .tableau-prose-block { margin-top: .85rem; border-top: 1px solid var(--public-line); padding-top: .75rem; }
      .tableau-prose {
        margin: .4rem 0;
        font-size: .9rem;
        color: var(--public-ink);
        line-height: 1.55;
      }
      .tableau-epilogue {
        margin-top: .9rem;
        border-top: 1px solid var(--public-line);
        padding-top: .9rem;
      }
      .tableau-epilogue-banner { margin-top: .25rem; }
      .tableau-epilogue-title {
        margin: 0 0 .55rem 0;
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--public-muted);
      }
      .tableau-epilogue-row {
        margin: .4rem 0;
        font-size: .92rem;
        color: var(--public-ink);
        line-height: 1.6;
      }
      .tableau-epilogue-name { font-weight: 700; }
      .tableau-epilogue-message { font-style: italic; }
      .tableau-pending { color: var(--public-muted); }
      .tableau-silence { color: var(--public-muted); }

      #public-page {
        margin-bottom: 1.25rem;
      }

      .public-shell {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
        max-width: var(--public-page-max);
        margin: 0 auto;
      }

      .public-muted {
        color: var(--public-muted);
      }

      .surface-card,
      .content-card,
      .play-card,
      .action-panel {
        border: 1px solid var(--public-line);
        border-radius: 0.6rem;
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 35%),
          var(--public-surface);
        box-shadow: var(--public-shadow);
      }

      .content-card,
      .play-card,
      .action-panel {
        padding: 1rem 1.05rem;
      }

      .landing-hero {
        display: grid;
        gap: 1.35rem;
        padding: 1.6rem;
        border-radius: 0.75rem;
        border: 1px solid var(--public-line-strong);
        background:
          radial-gradient(circle at 84% 18%, rgb(192 132 252 / 0.2), transparent 26%),
          radial-gradient(circle at 12% 30%, rgb(125 211 252 / 0.14), transparent 24%),
          repeating-linear-gradient(
            0deg,
            rgb(255 255 255 / 0.03),
            rgb(255 255 255 / 0.03) 1px,
            transparent 1px,
            transparent 14px
          ),
          linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 50%),
          linear-gradient(135deg, #12131a, #171923 58%, #101117);
        box-shadow: var(--public-shadow);
      }

      .landing-hero-copy {
        max-width: 42rem;
      }

      .landing-eyebrow {
        margin: 0 0 0.5rem 0;
        color: var(--public-accent);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .landing-hero h2 {
        margin: 0 0 0.6rem 0;
        font-size: clamp(2.1rem, 5vw, 3.3rem);
        line-height: 0.98;
        color: var(--public-ink);
      }

      .landing-hero p {
        max-width: 35rem;
        margin: 0;
        color: var(--public-muted);
      }

      .landing-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.15rem;
      }

      .ui-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.8rem;
        padding: 0.6rem 0.95rem;
        border: 1px solid var(--public-line-strong);
        border-radius: 0.45rem;
        background: var(--public-surface-strong);
        color: var(--public-ink);
        font-size: 0.92rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: none;
        transition:
          transform 120ms ease,
          background-color 120ms ease,
          border-color 120ms ease,
          color 120ms ease;
      }

      .ui-button:hover {
        transform: translateY(-1px);
        color: var(--public-ink);
        text-decoration: none;
      }

      .ui-button.is-primary {
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent) 20%, transparent), transparent),
          linear-gradient(135deg, color-mix(in srgb, var(--public-accent) 35%, #111827), #0f172a);
        border-color: color-mix(in srgb, var(--public-accent) 60%, var(--public-line-strong));
      }

      .ui-button.is-secondary {
        background: color-mix(in srgb, var(--public-accent-soft) 75%, var(--public-surface-strong));
      }

      .ui-button.is-subtle {
        background: transparent;
        color: var(--public-muted);
      }

      .landing-action-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
      }

      .action-panel {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: 100%;
      }

      .panel-header {
        display: grid;
        gap: 0.25rem;
      }

      .panel-header h2,
      .panel-header h3,
      .content-card h2,
      .play-header h2,
      .content-page h2 {
        margin: 0;
        color: var(--public-ink);
      }

      .panel-header p,
      .content-card p,
      .play-header p,
      .content-page p {
        margin: 0;
      }

      .featured-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
      }

      .featured-card {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        min-height: 100%;
        padding: 0.95rem;
        border: 1px solid var(--public-line);
        border-radius: 0.5rem;
        background: var(--public-surface-strong);
      }

      .featured-card-head {
        display: grid;
        gap: 0.55rem;
      }

      .featured-card h3 {
        margin: 0;
        font-size: 0.98rem;
        color: var(--public-ink);
      }

      .featured-rationale {
        margin: 0;
        font-size: 0.86rem;
        color: var(--public-muted);
      }

      .featured-card-footer {
        margin-top: auto;
        padding-top: 0.15rem;
      }

      .ui-button.is-card {
        width: 100%;
      }

      .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
      }

      .model-pill,
      .outcome-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 0.18rem 0.52rem;
        border: 1px solid var(--public-line);
        font-size: 0.72rem;
        color: var(--public-ink);
        white-space: nowrap;
      }

      .model-pill {
        background: var(--public-accent-soft);
      }

      .outcome-pill {
        background: color-mix(in srgb, var(--public-line) 70%, transparent);
      }

      .outcome-pill.outcome-good {
        background: var(--public-good-soft);
      }

      .outcome-pill.outcome-bad {
        background: var(--public-bad-soft);
      }

      .outcome-pill.outcome-neutral {
        background: var(--public-neutral-soft);
      }

      .featured-panel-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .compact-form {
        display: grid;
        gap: 0.8rem;
      }

      .compact-form fieldset {
        margin: 0;
      }

      .compact-form details {
        margin: 0;
      }

      .compact-form .form-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .compact-form .ui-button {
        width: 100%;
      }

      .about-strip {
        display: grid;
        gap: 0.75rem;
      }

      .about-strip .content-card {
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent-soft) 65%, transparent), transparent 52%),
          var(--public-surface);
      }

      html[data-theme="light"] .app-header {
        border-bottom-color: var(--public-line-strong);
      }

      html[data-theme="light"] .landing-hero {
        background:
          radial-gradient(circle at 84% 18%, rgb(118 92 154 / 0.12), transparent 28%),
          radial-gradient(circle at 12% 30%, rgb(88 117 138 / 0.12), transparent 24%),
          repeating-linear-gradient(
            0deg,
            rgb(56 50 44 / 0.035),
            rgb(56 50 44 / 0.035) 1px,
            transparent 1px,
            transparent 14px
          ),
          linear-gradient(180deg, rgb(255 255 255 / 0.45), transparent 55%),
          linear-gradient(135deg, #f4f0e8, #ebe5dc 60%, #f7f4ed);
      }

      html[data-theme="light"] .ui-button.is-primary {
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.34), transparent),
          linear-gradient(135deg, #4c677a, #324b5a);
        border-color: color-mix(in srgb, #324b5a 72%, var(--public-line-strong));
        color: #f7f4ed;
      }

      html[data-theme="light"] .ui-button.is-secondary {
        background: color-mix(in srgb, #fff 45%, var(--public-surface-strong));
      }

      html[data-theme="light"] .viewer-toolbar,
      html[data-theme="light"] .theme-icon-btn,
      html[data-theme="light"] .viewer-control-group {
        background: color-mix(in srgb, #fff 52%, var(--public-surface));
      }

      .support-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .public-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.9fr);
        gap: 1.1rem;
        padding: 1.35rem;
        border: 1px solid var(--public-line-strong);
        border-radius: 0.35rem;
        background:
          radial-gradient(circle at 82% 16%, rgb(192 132 252 / 0.17), transparent 24%),
          linear-gradient(135deg, #0f1118, #151923 54%, #11131b);
        box-shadow: var(--public-shadow);
        overflow: hidden;
        position: relative;
      }

      .public-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          repeating-linear-gradient(
            0deg,
            rgb(255 255 255 / 0.028),
            rgb(255 255 255 / 0.028) 1px,
            transparent 1px,
            transparent 11px
          );
        opacity: 0.5;
        pointer-events: none;
      }

      .public-hero > * {
        position: relative;
        z-index: 1;
      }

      .public-hero-copy,
      .public-hero-side {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
      }

      .public-hero-side {
        justify-content: flex-end;
      }

      .public-hero h2,
      .public-band h2,
      .stack-panel h2 {
        margin: 0;
        font-size: clamp(1.8rem, 4vw, 3rem);
        line-height: 0.95;
        color: var(--public-ink);
      }

      .public-hero--play h2,
      .public-hero--records h2,
      .public-hero--insights h2,
      .public-hero--support h2 {
        font-size: clamp(1.65rem, 3vw, 2.45rem);
      }

      .public-hero--insights h2 {
        font-size: clamp(1.55rem, 2.85vw, 2.25rem);
      }

      .insights-standouts-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
      }

      .insights-standouts-grid .metric-card {
        min-width: 0;
      }

      @media (max-width: 960px) {
        .insights-standouts-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 560px) {
        .insights-standouts-grid {
          grid-template-columns: 1fr;
        }
      }

      .insights-group-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .insights-filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 0;
      }

      .insights-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
      }

      .insights-filter-chip {
        font-size: 0.78rem;
        padding: 0.35rem 0.6rem;
      }

      .insights-dim-stack {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        align-items: flex-start;
        min-width: 0;
        max-width: 100%;
      }

      .insights-dim-value {
        font-size: 0.82rem;
        color: var(--public-ink);
        word-break: break-word;
        overflow-wrap: anywhere;
      }

      .content-page--insights .model-pill {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
        line-height: 1.25;
      }

      .content-page--insights .insights-table td:first-child {
        min-width: 10rem;
        max-width: 40rem;
        word-break: break-word;
        overflow-wrap: anywhere;
      }

      .insights-pct-cell {
        border-radius: 0.2rem;
      }

      .insights-pct-cell.insights-pct--good {
        background: var(--public-good-soft);
      }

      .insights-pct-cell.insights-pct--bad {
        background: var(--public-bad-soft);
      }

      .insights-pct-cell.insights-pct--neutral {
        background: var(--public-neutral-soft);
      }

      .insights-table th.insights-sort {
        cursor: pointer;
        user-select: none;
      }

      .insights-table th.insights-sort.is-sorted {
        border-bottom: 2px solid var(--public-accent);
      }

      .insights-empty {
        text-align: center;
        color: var(--public-muted);
        padding: 1.25rem !important;
      }

      .insights-charts-band .chart-card {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 0.95rem;
        border: 1px solid var(--public-line);
        border-radius: 0.28rem;
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 32%),
          color-mix(in srgb, var(--public-surface-strong) 88%, black);
      }

      .insights-charts-band .chart-card h3 {
        margin: 0;
        font-size: 1.05rem;
      }

      .insights-charts-band .chart-card h4 {
        margin: 0 0 0.35rem;
        font-size: 0.88rem;
        font-weight: 600;
      }

      .chart-canvas-wrap {
        position: relative;
        width: 100%;
        min-height: 240px;
      }

      .insights-chart-canvas-wrap--scatter {
        height: 360px;
      }

      .insights-chart-canvas-wrap--fates {
        min-height: 200px;
      }

      @media (max-width: 560px) {
        .insights-chart-canvas-wrap {
          min-height: 220px;
        }

        .insights-chart-canvas-wrap--scatter {
          height: 280px;
        }
      }

      .insights-slope-canvas-wrap {
        position: relative;
        height: 200px;
      }

      .slope-panels {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
        align-items: start;
      }

      .slope-panel {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 0;
      }

      @media (max-width: 720px) {
        .slope-panels {
          grid-template-columns: 1fr;
        }
      }

      .public-band,
      .stack-panel {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.1rem;
        border: 1px solid var(--public-line);
        border-radius: 0.35rem;
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 36%),
          var(--public-surface);
        box-shadow: var(--public-shadow);
      }

      .public-band--split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .metric-card,
      .stack-card,
      .mode-summary-card,
      .consent-card {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 0.95rem;
        border: 1px solid var(--public-line);
        border-radius: 0.28rem;
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 32%),
          color-mix(in srgb, var(--public-surface-strong) 88%, black);
      }

      .metric-card--accent,
      .mode-summary-card.is-selected {
        border-color: color-mix(in srgb, var(--public-accent) 55%, var(--public-line-strong));
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent-soft) 88%, transparent), transparent 36%),
          color-mix(in srgb, var(--public-surface-strong) 90%, black);
      }

      .insights-standout {
        border-color: var(--public-line-strong);
      }
      .insights-standout--heroic {
        border-color: color-mix(in srgb, #4ade80 55%, var(--public-line-strong));
        background:
          linear-gradient(180deg, var(--public-good-soft), transparent 36%),
          color-mix(in srgb, var(--public-surface-strong) 90%, black);
        --card-accent: #4ade80;
      }
      .insights-standout--skill {
        border-color: color-mix(in srgb, var(--public-accent) 55%, var(--public-line-strong));
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--public-accent-soft) 88%, transparent), transparent 36%),
          color-mix(in srgb, var(--public-surface-strong) 90%, black);
        --card-accent: var(--public-accent);
      }
      .insights-standout--treacherous {
        border-color: color-mix(in srgb, #f87171 55%, var(--public-line-strong));
        background:
          linear-gradient(180deg, var(--public-bad-soft), transparent 36%),
          color-mix(in srgb, var(--public-surface-strong) 90%, black);
        --card-accent: #f87171;
      }
      .insights-standout--warn {
        border-color: color-mix(in srgb, #facc15 55%, var(--public-line-strong));
        background:
          linear-gradient(180deg, var(--public-neutral-soft), transparent 36%),
          color-mix(in srgb, var(--public-surface-strong) 90%, black);
        --card-accent: #facc15;
      }

      .insights-standout__byline {
        margin: 0;
        color: var(--card-accent, var(--public-accent));
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .insights-standout__quip {
        display: block;
        margin: 0.1rem 0 0;
        font-size: 1.18rem;
        line-height: 1.2;
        font-weight: 600;
        font-style: italic;
        letter-spacing: -0.005em;
        color: var(--public-ink);
      }
      .insights-standout__value {
        margin: 0.25rem 0 0;
        font-size: 0.92rem;
        color: var(--public-muted);
      }
      .insights-standout__model {
        margin: 0.1rem 0 0;
      }

      .metric-label,
      .feature-card-eyebrow {
        margin: 0;
        color: var(--public-accent);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .metric-card strong,
      .stack-card strong,
      .mode-summary-card h3,
      .consent-card strong {
        font-size: 1rem;
        line-height: 1.25;
        color: var(--public-ink);
      }

      .metric-card p,
      .stack-card p,
      .mode-summary-card p,
      .consent-card p {
        margin: 0;
        color: var(--public-muted);
      }

      /* Standouts: trump generic `.metric-card strong` / `.metric-card p` above */
      .metric-card.insights-standout strong.insights-standout__quip {
        display: block;
        margin: 0.1rem 0 0;
        font-size: 1.18rem;
        line-height: 1.2;
        font-weight: 600;
        font-style: italic;
        letter-spacing: -0.005em;
        color: var(--public-ink);
      }
      .metric-card.insights-standout p.insights-standout__value {
        margin: 0.25rem 0 0;
        font-size: 0.92rem;
        color: var(--public-muted);
      }
      .metric-card.insights-standout p.insights-standout__model {
        margin: 0.1rem 0 0;
      }

      .metric-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        font-size: 0.78rem;
        color: var(--public-muted);
      }

      .metric-link {
        color: var(--public-accent);
        font-size: 0.82rem;
        font-weight: 700;
        text-decoration: none;
      }

      .budget-meter {
        width: 100%;
        height: 0.45rem;
        background: color-mix(in srgb, var(--public-line) 80%, transparent);
        overflow: hidden;
      }

      .budget-meter-fill {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--public-accent-secondary), var(--public-accent));
      }

      .featured-grid--landing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .featured-card--relic {
        gap: 0.9rem;
        border-radius: 0.25rem;
      }

      .featured-card--relic .featured-card-footer {
        display: grid;
        gap: 0.55rem;
      }

      .cta-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
      }

      .cta-strip--stack {
        grid-template-columns: 1fr;
      }

      .stack-grid {
        display: grid;
        gap: 0.8rem;
      }

      .command-grid {
        display: grid;
        grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.35fr);
        gap: 1rem;
        align-items: start;
      }

      .command-sidebar,
      .command-main {
        display: grid;
        gap: 1rem;
      }

      .compact-form--dense {
        gap: 1rem;
      }

      .compact-form--dense fieldset,
      .compact-form--dense details {
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--public-line);
        border-radius: 0.28rem;
        background: color-mix(in srgb, var(--public-surface-muted) 82%, black);
      }

      .records-filters,
      .insights-filters {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
      }

      .records-filters label,
      .insights-filters label {
        margin: 0;
      }

      .insights-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .insights-fates-sort {
        margin-bottom: 0.5rem;
      }

      .records-table-shell,
      .insights-table-shell {
        overflow-x: auto;
        border: 1px solid var(--public-line);
        border-radius: 0.3rem;
        background: color-mix(in srgb, var(--public-surface-muted) 86%, black);
      }

      .records-table,
      .insights-table {
        width: 100%;
        border-collapse: collapse;
        min-width: max-content;
      }

      .records-table th,
      .records-table td,
      .insights-table th,
      .insights-table td {
        padding: 0.85rem;
        border-bottom: 1px solid var(--public-line);
        text-align: left;
        vertical-align: top;
      }

      .records-table td,
      .insights-table td {
        white-space: nowrap;
      }

      .insights-table td:first-child {
        white-space: normal;
      }

      .records-table th,
      .insights-table th {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--public-accent);
        max-width: 6.5rem;
        word-break: break-word;
      }

      .insights-table thead th:first-child,
      .insights-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--public-surface-muted);
        box-shadow: 1px 0 0 0 var(--public-line);
      }

      .insights-table thead th:first-child {
        z-index: 3;
        background: color-mix(in srgb, var(--public-surface-muted) 86%, black);
      }

      /* Group dividers between unlike column families */
      .insights-table th:nth-child(4),
      .insights-table td:nth-child(4),
      .insights-table th:nth-child(8),
      .insights-table td:nth-child(8),
      .insights-table th:nth-child(14),
      .insights-table td:nth-child(14),
      .insights-table th:nth-child(18),
      .insights-table td:nth-child(18),
      .insights-table th:nth-child(21),
      .insights-table td:nth-child(21) {
        border-right: 2px solid color-mix(in srgb, var(--public-accent) 35%, var(--public-line));
      }

      .insights-table-shell::-webkit-scrollbar { height: 10px; }
      .insights-table-shell::-webkit-scrollbar-thumb {
        background: var(--public-accent);
        border-radius: 4px;
      }
      .insights-table-shell { scrollbar-width: thin; }

      .records-row-note {
        margin-top: 0.35rem;
        color: var(--public-muted);
        font-size: 0.8rem;
      }

      .records-table-link {
        padding: 0;
        border: 0;
        background: none;
        color: var(--public-accent);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }

      .brand-mark,
      .app-nav a,
      .theme-icon-btn,
      .ui-button,
      .viewer-control-group,
      .viewer-toolbar,
      .mode-btn,
      .play-mode-switch,
      .content-card,
      .play-card,
      .action-panel {
        border-radius: 0.3rem;
      }

      .app-header {
        padding-top: 0.8rem;
        margin-bottom: 1rem;
      }

      .app-nav a {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.76rem;
      }

      .app-footer {
        text-align: left;
      }

      .play-shell,
      .content-page {
        max-width: 46rem;
        margin: 0 auto;
      }

      /* Must come after `.content-page` so equal specificity wins; otherwise Insights stayed 46rem wide */
      .content-page.content-page--insights {
        max-width: var(--insights-page-max);
        width: 100%;
        box-sizing: border-box;
      }

      .content-page--insights .public-shell:not(.public-shell--landing) {
        max-width: var(--insights-page-max);
        width: 100%;
        box-sizing: border-box;
      }

      .play-shell {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .play-header {
        display: grid;
        gap: 0.35rem;
      }

      .play-header h2,
      .content-page h2 {
        margin: 0;
      }

      .play-header p,
      .content-page p {
        margin: 0;
      }

      .play-mode-switch {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.35rem;
        width: fit-content;
        border-radius: 0.55rem;
        border: 1px solid var(--public-line);
        background: var(--public-surface);
      }

      .mode-btn {
        border-radius: 0.42rem;
        padding-inline: 0.95rem;
        border-color: transparent;
        background: transparent;
        color: var(--public-muted);
        font-weight: 700;
      }

      .mode-btn[data-active="true"] {
        background: var(--public-accent-soft);
        border-color: var(--public-line-strong);
        color: var(--public-ink);
      }

      .form-stack {
        display: grid;
        gap: 0.85rem;
      }

      .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
      }

      .play-card details {
        margin-top: 0.35rem;
      }

      .form-note {
        margin: 0;
        font-size: 0.84rem;
        color: var(--public-muted);
      }

      .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .stub-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1rem 0;
      }

      .stub-filters label {
        margin: 0;
      }

      .help-list {
        margin: 0;
        padding-left: 1.1rem;
      }

      .muted-link {
        color: var(--public-muted);
      }

      @media (max-width: 900px) {
        .app-header {
          flex-wrap: wrap;
        }

        .app-nav {
          order: 3;
          width: 100%;
          justify-content: flex-start;
          overflow-x: auto;
          padding-bottom: 0.15rem;
        }

        .featured-grid {
          grid-template-columns: 1fr 1fr;
        }

        .public-hero,
        .public-band--split,
        .command-grid,
        .cta-strip,
        .records-filters,
        .insights-filters {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 768px) {
        .landing-hero {
          padding: 1.2rem;
        }

        .featured-grid {
          grid-template-columns: 1fr;
        }

        .field-grid {
          grid-template-columns: 1fr;
        }

        .public-hero,
        .public-band,
        .stack-panel {
          padding: 1rem;
        }

        .content-page--insights .public-shell:not(.public-shell--landing) {
          padding-inline: 0.5rem;
          width: 99%;
        }

        .content-page--insights .public-band,
        .content-page--insights .public-hero--insights {
          padding-inline: 0.5rem;
        }

        .content-page--insights .insights-charts-band {
          gap: 0.75rem;
        }
      }

      :root {
        --pico-font-family: "Space Grotesk", system-ui, sans-serif;
        --pico-border-radius: 0px;
        --pico-form-element-border-radius: 0px;
        --pico-card-border-radius: 0px;
        --public-page-max: 80rem;
        --insights-page-max: min(100%, 96rem);
        --public-ink: #e4e1e9;
        --public-muted: #9f98ac;
        --public-line: rgb(148 142 161 / 0.18);
        --public-line-strong: rgb(148 142 161 / 0.34);
        --public-surface: #131318;
        --public-surface-strong: #1f1f25;
        --public-surface-muted: #0e0e13;
        --public-accent: #94d3c1;
        --public-accent-soft: rgb(148 211 193 / 0.12);
        --public-accent-secondary: #7c4dff;
        --public-good-soft: rgb(148 211 193 / 0.12);
        --public-bad-soft: rgb(255 180 171 / 0.12);
        --public-neutral-soft: rgb(200 198 197 / 0.12);
        --public-shadow: 0 18px 46px rgb(0 0 0 / 0.32);
      }

      body {
        margin: 0;
        font-family: "Space Grotesk", system-ui, sans-serif;
        background: var(--public-surface-muted);
        color: var(--public-ink);
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background:
          linear-gradient(
            to bottom,
            transparent 50%,
            rgb(148 211 193 / 0.02) 50%
          );
        background-size: 100% 4px;
        pointer-events: none;
        opacity: 0.5;
        z-index: 999;
      }

      main.container {
        width: 100%;
        max-width: none;
        padding: 0;
      }

      ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }

      ::-webkit-scrollbar-track {
        background: #131318;
      }

      ::-webkit-scrollbar-thumb {
        background: #7c4dff;
      }

      #public-page {
        width: 100%;
      }

      #viewer-workspace {
        box-sizing: border-box;
        width: min(100%, calc(var(--public-page-max) + 6rem));
        margin: 0 auto;
        padding-left: 3rem;
        padding-right: 3rem;
        display: flex;
        flex-direction: column;
        /* Less top chrome now that game controls live in sticky header */
        min-height: calc(100dvh - 4rem);
        padding-bottom: 3rem;
      }

      #viewer-workspace.mud-v2 {
        --mud-bg: #0a0b10;
        --mud-sf: #10111a;
        --mud-sf2: #14151f;
        --mud-ink: #d1d5db;
        --mud-ink2: #e5e7eb;
        --mud-dim: #6b7280;
        --mud-dim2: #4b5563;
        --mud-muted: #9ca3af;
        --mud-line: rgb(148 163 184 / 0.12);
        --mud-line2: rgb(148 163 184 / 0.22);
        --mud-purple: #c084fc;
        --mud-sky: #7dd3fc;
        --mud-red: #f87171;
        --mud-green: #4ade80;
        --mud-a0: #818cf8;
        --mud-a1: #fbbf24;
        --mud-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
        --mud-ui: "Space Grotesk", system-ui, sans-serif;
        --mud-fs-label: 0.625rem;
        --mud-fs-ui: 0.75rem;
        --mud-fs-body: 0.875rem;
        --mud-lh-tight: 1.35;
        --mud-lh-body: 1.7;
        width: 100%;
        max-width: none;
        min-height: calc(100dvh - 3.5rem);
        margin: 0;
        padding: 0;
        background: var(--mud-bg);
        color: var(--mud-ink);
        font-family: var(--mud-ui);
      }

      @keyframes mud-v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
      @keyframes mud-v2-fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
      @keyframes mud-v2-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.45); } }

      #viewer-workspace.mud-v2 .mud-v2-shell {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        height: calc(100dvh - 3.5rem);
        overflow: hidden;
        border-top: 1px solid var(--mud-line);
      }

      #viewer-workspace.mud-v2 .mud-sidebar {
        flex: 0 0 25%;
        width: 25%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: var(--mud-sf);
        border-right: 1px solid var(--mud-line);
      }

      #viewer-workspace.mud-v2 .mud-room-art {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
        overflow: hidden;
        background: #080910;
        border-bottom: 1px solid var(--mud-line);
      }

      #viewer-workspace.mud-v2 .mud-room-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: opacity 250ms ease;
      }

      #viewer-workspace.mud-v2 .mud-room-art img.is-transitioning {
        opacity: 0.35;
      }

      #viewer-workspace.mud-v2 .mud-room-label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.45rem 0.55rem;
        background: linear-gradient(transparent, rgb(4 5 14 / 0.92));
      }

      #viewer-workspace.mud-v2 .mud-room-label span,
      #viewer-workspace.mud-v2 .mud-sidebar-kicker,
      #viewer-workspace.mud-v2 .mud-feed-head {
        font-family: var(--mud-mono);
        font-size: var(--mud-fs-label);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      #viewer-workspace.mud-v2 .mud-room-label span {
        display: block;
        color: rgb(192 132 252 / 0.7);
      }

      #viewer-workspace.mud-v2 .mud-room-label strong {
        display: block;
        color: #f1f5f9;
        font-size: var(--mud-fs-body);
      }

      #viewer-workspace.mud-v2 .mud-mini-map,
      #viewer-workspace.mud-v2 .mud-vitals {
        padding: 0.5rem;
        border-bottom: 1px solid var(--mud-line);
      }

      #viewer-workspace.mud-v2 .mud-mini-map .mud-map-svg {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.95));
      }

      #viewer-workspace.mud-v2 .map-edge {
        stroke: #1a1d2e;
        stroke-width: 2.5;
        stroke-linecap: round;
      }

      #viewer-workspace.mud-v2 .map-room {
        fill: #1a1d2e;
        stroke: #2d3148;
        stroke-width: 1.5;
      }

      #viewer-workspace.mud-v2 .map-room-active {
        fill: rgb(192 132 252 / 0.85);
        stroke: rgb(192 132 252 / 0.5);
      }

      #viewer-workspace.mud-v2 .map-label {
        fill: var(--mud-dim);
        font: 700 7px var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .map-label-active {
        fill: var(--mud-bg);
      }

      #viewer-workspace.mud-v2 .map-presence {
        fill: none;
        stroke-width: 2.1;
        vector-effect: non-scaling-stroke;
      }

      #viewer-workspace.mud-v2 .map-presence-you {
        stroke: var(--mud-a0);
      }

      #viewer-workspace.mud-v2 .map-presence-other {
        stroke: var(--mud-a1);
        stroke-dasharray: 2.8 1.6;
      }

      #viewer-workspace.mud-v2 .mud-vitals {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-family: var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .mud-vital-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
      }

      #viewer-workspace.mud-v2 .mud-vital-name {
        min-width: 3.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--agent-color);
        font-size: var(--mud-fs-ui);
        font-weight: 700;
        white-space: nowrap;
      }

      #viewer-workspace.mud-v2 .hp-pip-bar {
        display: inline-flex;
        gap: 2px;
      }

      #viewer-workspace.mud-v2 .hp-pip {
        width: 7px;
        height: 7px;
        border: 1px solid var(--mud-line2);
        border-radius: 1px;
        background: rgb(148 163 184 / 0.18);
      }

      #viewer-workspace.mud-v2 .hp-pip.hp-pip--filled {
        background: var(--agent-color);
        border-color: var(--agent-color);
      }

      #viewer-workspace.mud-v2 .mud-run-id {
        display: none;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.45rem 0.5rem;
        border-top: 1px solid var(--mud-line);
        color: var(--mud-dim);
        font: var(--mud-fs-ui) var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .mud-feed {
        flex: 0 0 50%;
        width: 50%;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--mud-bg);
      }

      #viewer-workspace.mud-v2 .mud-v2-shell.thinking-collapsed .mud-feed {
        flex: 1 1 auto;
        width: auto;
      }

      .public-hero--insights {
        grid-template-columns: minmax(0, 1fr);
      }

      .public-hero--insights .insights-findings {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem 1.5rem;
        list-style: none;
        margin: 1.25rem 0 0.5rem;
        padding: 0;
      }

      .public-hero--insights .insights-findings li {
        margin: 0;
        list-style: none;
        line-height: 1.6;
      }

      @media (max-width: 640px) {
        .public-hero--insights .insights-findings {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      .insights-findings strong {
        display: block;
        color: var(--public-accent);
      }

      .insights-sample {
        margin: 0.65rem 0;
      }

      .insights-scope-note summary {
        width: fit-content;
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--public-muted);
      }

      #viewer-workspace.mud-v2 .viewer-run-error {
        flex: 0 0 auto;
        max-height: 30dvh;
        overflow-y: auto;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #9a6537;
        background: #2b1d16;
        color: #ffe0ba;
        font-size: var(--mud-fs-body);
        line-height: 1.5;
      }

      #viewer-workspace.mud-v2 .mud-feed-head {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 0 0 auto;
        padding: 0.35rem 1rem;
        border-bottom: 1px solid var(--mud-line);
        background: rgb(10 11 16 / 0.97);
        color: var(--mud-dim);
        backdrop-filter: blur(8px);
      }

      #viewer-workspace.mud-v2 .mud-feed-live {
        margin-left: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        color: rgb(74 222 128 / 0.65);
      }

      #viewer-workspace.mud-v2 .mud-feed-controls {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }

      #viewer-workspace.mud-v2 .mud-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        margin: 0;
        color: var(--mud-dim);
        font: var(--mud-fs-label) var(--mud-mono);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      #viewer-workspace.mud-v2 .mud-toggle input {
        width: 0.75rem;
        height: 0.75rem;
        margin: 0;
        accent-color: var(--mud-purple);
      }

      #viewer-workspace.mud-v2 .mud-feed-live::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: var(--mud-green);
        animation: mud-v2-pulse 1.5s ease-in-out infinite;
      }

      #viewer-workspace.mud-v2 #mud-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        background: var(--mud-bg);
      }

      #viewer-workspace.mud-v2 #mud-root {
        min-height: 100%;
      }

      #viewer-workspace.mud-v2 .mud-turn-block {
        padding: 1.1rem 1.25rem 1rem;
        margin: 0;
        border-bottom: 1px solid var(--mud-line);
        background: transparent;
        animation: mud-v2-fadein 220ms ease;
      }

      #viewer-workspace.mud-v2 #mud-root.is-story-streaming .mud-turn-block {
        animation: none;
      }

      #viewer-workspace.mud-v2 .mud-turn-block.is-active {
        background: rgb(192 132 252 / 0.03);
      }

      #viewer-workspace.mud-v2 .mud-turn-head {
        margin-bottom: 0.85rem;
        overflow: hidden;
        color: var(--mud-dim);
        font: var(--mud-fs-ui) var(--mud-mono);
        letter-spacing: 0.05em;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
      }

      #viewer-workspace.mud-v2 .mud-turn-lead {
        margin: 0 0 0.65rem;
        color: var(--mud-ink);
        font: var(--mud-fs-ui) var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .mud-story-block {
        min-height: 0;
      }

      #viewer-workspace.mud-v2 .mud-room-copy {
        margin: 0 0 0.1rem;
        color: var(--mud-ink);
        font: var(--mud-fs-body)/var(--mud-lh-body) var(--mud-ui);
        line-height: var(--mud-lh-body);
        white-space: pre-line;
      }

      #viewer-workspace.mud-v2 .mud-room-copy-label {
        color: var(--mud-dim);
        font: var(--mud-fs-ui) var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .mud-rpg-box {
        margin: 0.85rem 0;
        padding: 0.55rem 0.8rem;
        border: 1px solid rgb(148 163 184 / 0.28);
        border-radius: 2px;
        background: rgb(255 255 255 / 0.025);
        color: var(--mud-ink);
        font: var(--mud-fs-body)/var(--mud-lh-body) var(--mud-ui);
      }

      #viewer-workspace.mud-v2 .mud-actions-box {
        margin: 0.85rem 0;
        padding: 0.55rem 0.8rem;
        border: 1px solid rgb(148 163 184 / 0.28);
        border-radius: 2px;
        background: rgb(255 255 255 / 0.025);
        color: var(--mud-ink);
        font: var(--mud-fs-ui)/var(--mud-lh-body) var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .mud-rpg-section {
        display: grid;
        grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
        gap: 0.35rem 0.75rem;
        align-items: start;
        margin-bottom: 0.5rem;
      }

      #viewer-workspace.mud-v2 .mud-rpg-section:last-of-type {
        margin-bottom: 0;
      }

      #viewer-workspace.mud-v2 .mud-rpg-label {
        margin-bottom: 0;
        font-size: var(--mud-fs-label);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mud-dim);
        padding-top: 0.1rem;
      }

      #viewer-workspace.mud-v2 .mud-rpg-col2 {
        min-width: 0;
      }

      #viewer-workspace.mud-v2 .mud-rpg-line {
        margin: 0 0 0.28rem;
        line-height: var(--mud-lh-body);
      }

      #viewer-workspace.mud-v2 .mud-rpg-line:last-child {
        margin-bottom: 0;
      }

      #viewer-workspace.mud-v2 .mud-rpg-empty {
        font-style: italic;
      }

      #viewer-workspace.mud-v2 .mud-rpg-exits {
        line-height: var(--mud-lh-body);
      }

      #viewer-workspace.mud-v2 .mud-rpg-exits .mud-exit-chip {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      #viewer-workspace.mud-v2 .mud-rpg-exits .mud-rpg-exit-join {
        color: var(--mud-dim);
      }

      @media (max-width: 420px) {
        #viewer-workspace.mud-v2 .mud-rpg-section {
          grid-template-columns: 1fr;
        }

        #viewer-workspace.mud-v2 .mud-rpg-label {
          padding-top: 0;
        }
      }

      #viewer-workspace.mud-v2 .mud-actions-box {
        border-style: dashed;
        border-color: rgb(148 163 184 / 0.22);
      }

      #viewer-workspace.mud-v2 .mud-action-option {
        display: grid;
        grid-template-columns: 6ch minmax(0, 1fr);
        gap: 0.5rem;
      }

      #viewer-workspace.mud-v2 .mud-action-option span:first-child {
        color: var(--mud-ink);
      }

      #viewer-workspace.mud-v2 .mud-action-option span:last-child {
        color: var(--mud-dim);
      }

      #viewer-workspace.mud-v2 .mud-box-label {
        margin-bottom: 0.2rem;
        color: var(--mud-dim);
        font-size: var(--mud-fs-label);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      #viewer-workspace.mud-v2 .mud-box-row {
        margin-bottom: 0.45rem;
      }

      #viewer-workspace.mud-v2 .mud-box-row:last-child {
        margin-bottom: 0;
      }

      #viewer-workspace.mud-v2 .mud-kw {
        color: var(--mud-ink2);
        font-weight: 700;
        letter-spacing: 0.03em;
      }

      #viewer-workspace.mud-v2 .mud-list-line {
        padding-left: 2ch;
      }

      #viewer-workspace.mud-v2 .mud-muted {
        color: var(--mud-dim);
      }

      #viewer-workspace.mud-v2 .mud-exit-chip {
        color: var(--mud-sky);
      }

      #viewer-workspace.mud-v2 .mud-rpg-divider {
        border-top: 1px solid rgb(148 163 184 / 0.15);
        margin: 0.4rem 0;
      }

      #viewer-workspace.mud-v2 .mud-last-pulse,
      #viewer-workspace.mud-v2 .mud-event-prose-block {
        margin: 0 0 0.85rem;
        padding-left: 0.75rem;
        border-left: 2px solid rgb(148 163 184 / 0.1);
        color: var(--mud-dim);
        font: var(--mud-fs-body)/var(--mud-lh-body) var(--mud-ui);
      }

      #viewer-workspace.mud-v2 .mud-event-prose-block {
        margin-top: 0.75rem;
        color: var(--mud-ink);
        border-left-color: rgb(192 132 252 / 0.25);
      }

      #viewer-workspace.mud-v2 .mud-event-prose-block p {
        margin: 0.25rem 0 0;
        white-space: pre-line;
      }

      #viewer-workspace.mud-v2 .mud-event-prose-label {
        color: rgb(192 132 252 / 0.55);
        font-size: var(--mud-fs-label);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      #viewer-workspace.mud-v2 .mud-speech,
      #viewer-workspace.mud-v2 .mud-action-line,
      #viewer-workspace.mud-v2 .mud-resolution-list {
        margin: 0.65rem 0;
        color: var(--mud-ink);
        font: var(--mud-fs-body)/var(--mud-lh-body) var(--mud-ui);
      }

      #viewer-workspace.mud-v2 .mud-speech strong,
      #viewer-workspace.mud-v2 .mud-action-line strong {
        font: 700 var(--mud-fs-ui)/var(--mud-lh-body) var(--mud-mono);
        letter-spacing: 0.03em;
      }

      #viewer-workspace.mud-v2 .mud-speech-text {
        color: var(--mud-ink2);
      }

      #viewer-workspace.mud-v2 .mud-action-line .phase-attack,
      #viewer-workspace.mud-v2 .mud-resolution-line.is-danger {
        color: var(--mud-red);
      }

      #viewer-workspace.mud-v2 .mud-action-line .phase-cooperate {
        color: var(--mud-ink);
      }

      #viewer-workspace.mud-v2 .mud-key-event {
        margin-top: 0.4rem;
        color: var(--mud-red);
        font-weight: 700;
        letter-spacing: 0.04em;
      }

      #viewer-workspace.mud-v2 .mud-key-event.is-good {
        color: var(--mud-green);
      }

      #viewer-workspace.mud-v2 .mud-feed-footer {
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        flex: 0 0 auto;
        padding: 0.55rem 1rem;
        border-top: 1px solid var(--mud-line);
        background: rgb(10 11 16 / 0.97);
      }

      #viewer-workspace.mud-v2 .next-turn-btn {
        margin: 0;
        padding: 0.45rem 1.1rem;
        border: 1px solid rgb(192 132 252 / 0.35);
        border-radius: 2px;
        background: rgb(192 132 252 / 0.08);
        color: rgb(192 132 252 / 0.8);
        font: 700 var(--mud-fs-ui) var(--mud-mono);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      #viewer-workspace.mud-v2 .next-turn-btn:disabled {
        opacity: 0.45;
      }

      #viewer-workspace.mud-v2 #next-turn-progress-track {
        width: 7rem;
        height: 0.2rem;
        margin-bottom: 0.45rem;
        background: var(--mud-line);
      }

      #viewer-workspace.mud-v2 #next-turn-progress {
        height: 100%;
        width: 0;
        background: var(--mud-purple);
      }

      #viewer-workspace.mud-v2 .mud-thinking-col {
        flex: 0 0 25%;
        width: 25%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--mud-sf);
        border-left: 1px solid var(--mud-line);
        transition: width 180ms ease, min-width 180ms ease, flex-basis 180ms ease;
      }

      #viewer-workspace.mud-v2 .mud-thinking-col.is-collapsed {
        width: 28px;
        min-width: 28px;
        flex-basis: 28px;
      }

      #viewer-workspace.mud-v2 .thinking-col-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.55rem;
        border: 0;
        border-bottom: 1px solid var(--mud-line);
        background: transparent;
        color: var(--mud-dim);
        font: 700 var(--mud-fs-label) var(--mud-ui);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      #viewer-workspace.mud-v2 .mud-thinking-col.is-collapsed .thinking-col-label,
      #viewer-workspace.mud-v2 .mud-thinking-col.is-collapsed .thinking-col-panels {
        display: none;
      }

      #viewer-workspace.mud-v2 .thinking-col-label {
        color: var(--mud-purple);
      }

      #viewer-workspace.mud-v2 .thinking-col-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        overflow: hidden;
        padding: 0.6rem;
      }

      #viewer-workspace.mud-v2 .agent-thinking-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgb(148 163 184 / 0.14);
        border-radius: 3px;
      }

      #viewer-workspace.mud-v2 .agent-thinking-head {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0.28rem 0.5rem;
        border-bottom: 1px solid rgb(148 163 184 / 0.1);
        background: rgb(148 163 184 / 0.05);
        font-family: var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .agent-thinking-dot {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 999px;
        background: var(--agent-color);
        animation: mud-v2-pulse 1.3s ease-in-out infinite;
      }

      #viewer-workspace.mud-v2 .agent-thinking-name {
        color: var(--agent-color);
        font-size: var(--mud-fs-label);
        font-weight: 700;
        letter-spacing: 0.06em;
      }

      #viewer-workspace.mud-v2 .agent-thinking-room,
      #viewer-workspace.mud-v2 .agent-thinking-phase {
        color: var(--mud-dim2);
        font-size: var(--mud-fs-label);
      }

      #viewer-workspace.mud-v2 .agent-thinking-phase {
        margin-left: auto;
      }

      #viewer-workspace.mud-v2 .agent-thinking-stream {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 0.4rem 0.5rem;
        color: rgb(192 132 252 / 0.6);
        font: var(--mud-fs-ui)/var(--mud-lh-body) var(--mud-mono);
        white-space: pre-wrap;
      }

      #viewer-workspace.mud-v2 .pulse-panel {
        display: none;
      }

      #viewer-workspace.mud-v2 .agent-thinking-stream::after {
        content: "▋";
        opacity: 0.5;
        animation: mud-v2-blink 1.1s step-end infinite;
      }

      #viewer-workspace.mud-v2 .agent-thinking-separator {
        margin: 0.45rem 0;
        border-top: 1px solid rgb(148 163 184 / 0.14);
      }

      #viewer-workspace.mud-v2 .llm-status-panel {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-top: auto;
        padding: 0.5rem;
        border-bottom: 1px solid var(--mud-line);
        color: var(--mud-dim);
        font: var(--mud-fs-ui) var(--mud-mono);
      }

      #viewer-workspace.mud-v2 .llm-status-panel .llm-status-row {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
      }

      #viewer-workspace.mud-v2 .llm-status-panel .llm-status-label {
        min-width: 0;
        overflow: hidden;
        color: var(--mud-purple);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #viewer-workspace.mud-v2 .llm-status-panel .llm-status-progress {
        width: 100%;
        height: 0.25rem;
      }

      #viewer-workspace.mud-v2 .llm-status-panel[hidden] {
        display: flex;
        visibility: hidden;
      }

      #viewer-workspace.mud-v2 .mobile-hero-bar {
        display: none;
      }

      #viewer-workspace.mud-v2 .hero-thinking-toggle {
        display: none;
      }

      #viewer-workspace.mud-v2 .feed-options-toggle {
        display: none;
      }

      #viewer-workspace.mud-v2 .mud-room-art .pulse-panel {
        display: none;
      }

      @media (min-width: 769px) {
        body[data-viewer-mode="true"] main.container {
          display: flex;
          flex-direction: column;
          height: 100dvh;
          min-height: 0;
          overflow: hidden;
        }

        body[data-viewer-mode="true"] .app-header {
          flex-shrink: 0;
        }

        body[data-viewer-mode="true"] #viewer-workspace.mud-v2 {
          flex: 1 1 0;
          min-height: 0;
        }

        #viewer-workspace.mud-v2 .mud-v2-shell {
          height: auto;
        }

        #viewer-workspace.mud-v2 .mud-sidebar {
          overflow-y: auto;
          overscroll-behavior: contain;
        }

        /* Reserve room for vitals and live progress on shorter screens. */
        #viewer-workspace.mud-v2 .mud-room-art {
          max-height: 30dvh;
        }

        #viewer-workspace.mud-v2 .mud-mini-map .mud-map-svg {
          max-height: 25dvh;
        }

        #viewer-workspace.mud-v2 .mud-mini-map,
        #viewer-workspace.mud-v2 .mud-vitals,
        #viewer-workspace.mud-v2 .llm-status-panel {
          flex-shrink: 0;
        }
      }

      @media (max-width: 768px) {
        body[data-viewer-mode="true"] {
          overflow: hidden;
          overscroll-behavior: none;
        }

        body[data-viewer-mode="true"] main.container {
          display: flex;
          flex-direction: column;
          height: 100dvh;
          min-height: 0;
          overflow: hidden;
          overscroll-behavior: none;
        }

        body[data-viewer-mode="true"] #viewer-workspace.mud-v2 {
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden;
        }

        #viewer-workspace.mud-v2 .mud-v2-shell {
          flex-direction: column;
          height: 100%;
          min-height: 0;
          overscroll-behavior: none;
        }

        #viewer-workspace.mud-v2 .mud-sidebar {
          display: block;
          position: relative;
          width: 100%;
          flex: 0 0 auto;
          border-right: 0;
          border-bottom: 1px solid var(--mud-line);
        }

        #viewer-workspace.mud-v2 .mud-room-art {
          width: 100%;
          height: 0;
          aspect-ratio: auto;
          position: relative;
          border-bottom: 0;
          transition: height 180ms ease, border-color 180ms ease;
        }

        #viewer-workspace.mud-v2 .mud-room-art.mobile-context-open {
          height: min(42dvh, 22rem);
          border-bottom: 1px solid var(--mud-line);
        }

        #viewer-workspace.mud-v2 .mud-room-label {
          display: none;
        }

        #viewer-workspace.mud-v2 .mud-mini-map,
        #viewer-workspace.mud-v2 .mud-vitals,
        #viewer-workspace.mud-v2 .mud-run-id,
        #viewer-workspace.mud-v2 .llm-status-panel,
        #viewer-workspace.mud-v2 .mud-thinking-col {
          display: none;
        }

        #viewer-workspace.mud-v2 .llm-status-panel[hidden] {
          display: none;
        }

        #viewer-workspace.mud-v2 .mud-feed {
          flex: 1 1 auto;
          width: 100%;
          min-height: 0;
          overscroll-behavior: none;
        }

        #viewer-workspace.mud-v2 .mud-feed-head {
          gap: 0.35rem;
          min-width: 0;
          padding: 0.35rem 0.55rem;
          overflow: hidden;
          position: relative;
        }

        #viewer-workspace.mud-v2 .mud-feed-title,
        #viewer-workspace.mud-v2 .mud-feed-sep {
          flex: 0 0 auto;
        }

        #viewer-workspace.mud-v2 .mud-feed-pov {
          flex: 1 1 auto;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        #viewer-workspace.mud-v2 .mud-feed-turn-count,
        #viewer-workspace.mud-v2 .mud-feed-live {
          flex: 0 0 auto;
          white-space: nowrap;
        }

        #viewer-workspace.mud-v2 .mud-feed-controls {
          flex: 0 1 auto;
          min-width: 0;
          margin-left: auto;
          overflow: hidden;
        }

        #viewer-workspace.mud-v2 .mud-feed-live {
          margin-left: 0;
        }

        #viewer-workspace.mud-v2 #mud-scroll {
          overscroll-behavior: contain;
        }

        #viewer-workspace.mud-v2 .mud-feed-footer {
          gap: 0.5rem;
          padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
        }

        #viewer-workspace.mud-v2 .mud-feed-footer .next-turn-btn {
          flex: 1 1 auto;
          min-width: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        #viewer-workspace.mud-v2 .mud-feed-footer #next-turn-progress-track {
          flex: 0 0 4.5rem;
          width: 4.5rem;
        }

        #viewer-workspace.mud-v2 .mobile-next-turn-btn {
          display: none !important;
        }

        #viewer-workspace.mud-v2 .mobile-hero-bar {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          gap: 0.6rem;
          padding: 1rem 0.75rem 0.4rem;
          background: linear-gradient(transparent, rgb(2 6 23 / 0.92));
          font: var(--mud-fs-ui) var(--mud-mono);
          z-index: 6;
        }

        #viewer-workspace.mud-v2 .mobile-hero-bar > * {
          flex: 0 0 auto;
          white-space: nowrap;
        }

        #viewer-workspace.mud-v2 .mobile-hero-bar-room {
          flex: 1 1 auto;
          min-width: 0;
          overflow: hidden;
          color: #f8fafc;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-overflow: ellipsis;
          text-transform: uppercase;
          white-space: nowrap;
        }

        #viewer-workspace.mud-v2 .hero-thinking-toggle {
          position: static;
          flex: 0 0 auto;
          width: 1.95rem;
          height: 1.95rem;
          margin: 0;
          padding: 0;
          border-radius: 999px;
          border: 1px solid color-mix(in srgb, #fff 30%, transparent);
          background: color-mix(in srgb, #020617 62%, transparent);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          color: #e2e8f0;
          font-size: 0.95rem;
          line-height: 1;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
        }

        #viewer-workspace.mud-v2 .hero-thinking-toggle.has-thinking {
          color: #f8fafc;
          border-color: color-mix(in srgb, #c084fc 55%, transparent);
          box-shadow: 0 0 0 1px rgb(192 132 252 / 0.1), 0 0 18px rgb(192 132 252 / 0.22);
        }

        #viewer-workspace.mud-v2 .hero-thinking-toggle.is-streaming {
          animation: mud-v2-pulse 1.6s ease-in-out infinite;
        }

        #viewer-workspace.mud-v2 .hero-thinking-toggle:focus-visible {
          outline: 2px solid color-mix(in srgb, #7c4dff 70%, transparent);
          outline-offset: 2px;
        }

        #viewer-workspace.mud-v2 .mud-room-art .pulse-panel {
          display: none;
        }

        #viewer-workspace.mud-v2 .mud-room-art.thinking-open .pulse-panel:not([hidden]) {
          display: flex;
          flex-direction: column;
          position: absolute;
          inset: 2.6rem 0.5rem 3.2rem 0.5rem;
          width: auto;
          max-width: none;
          min-height: 0;
          background: rgb(10 11 16 / 0.78);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          border: 1px solid rgb(148 163 184 / 0.18);
          border-radius: 0.5rem;
          padding: 0.65rem 0.8rem;
          overflow: hidden;
          contain: layout paint style;
          transform: translateZ(0);
          backface-visibility: hidden;
          z-index: 8;
        }

        #viewer-workspace.mud-v2 .mud-room-art.thinking-open .pulse-panel-stream {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          overflow-anchor: none;
          overscroll-behavior: contain;
          scrollbar-gutter: stable;
          will-change: scroll-position;
        }
      }

      @media (max-width: 430px) {
        #viewer-workspace.mud-v2 .mud-feed-title,
        #viewer-workspace.mud-v2 .mud-feed-head > .mud-feed-sep:first-of-type {
          display: none;
        }

        #viewer-workspace.mud-v2 .feed-options-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 auto;
          width: 1.75rem;
          height: 1.75rem;
          margin: 0;
          padding: 0;
          border-radius: 999px;
          border: 1px solid rgb(148 163 184 / 0.22);
          background: rgb(15 23 42 / 0.78);
          color: var(--mud-muted);
          font: 0.8rem var(--mud-mono);
          line-height: 1;
        }

        #viewer-workspace.mud-v2 .mud-feed-controls {
          display: none;
          gap: 0.35rem;
        }

        #viewer-workspace.mud-v2 .mud-feed-head.controls-open {
          overflow: visible;
        }

        #viewer-workspace.mud-v2 .mud-feed-head.controls-open .mud-feed-controls {
          position: absolute;
          top: calc(100% + 0.25rem);
          right: 0.5rem;
          z-index: 20;
          display: inline-flex;
          padding: 0.45rem 0.55rem;
          border: 1px solid var(--mud-line2);
          border-radius: 0.35rem;
          background: rgb(10 11 16 / 0.96);
          box-shadow: 0 12px 24px rgb(0 0 0 / 0.35);
        }

        #viewer-workspace.mud-v2 .mud-toggle {
          font-size: 0.58rem;
          letter-spacing: 0.03em;
        }
      }
      #viewer-toolbar {
        box-sizing: border-box;
      }

      .app-header {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0;
        padding: 0.65rem 3rem;
        border-bottom: 1px solid rgb(124 77 255 / 0.16);
        background: rgb(19 19 24 / 0.94);
        backdrop-filter: blur(18px);
      }

      /* --- Game chrome merged into header (live / replay) --- */
      body[data-viewer-mode="true"] .app-header {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.25rem;
        column-gap: 0.65rem;
        padding: 0.35rem 2rem 0.4rem;
        margin-bottom: 0;
      }

      body[data-viewer-mode="true"] .app-nav {
        display: none;
      }

      body[data-viewer-mode="true"] .header-actions {
        display: none;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0.12rem 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem 0.55rem;
        flex-wrap: wrap;
        font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-main {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.6rem;
        flex: 0 1 auto;
        min-width: 0;
        margin-right: auto;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-kicker {
        margin: 0;
        padding: 0;
        font-size: 0.62rem;
        line-height: 1;
        letter-spacing: 0.14em;
        opacity: 0.85;
        display: inline-flex;
        align-items: center;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-status {
        margin: 0;
        padding: 0;
        font-size: 0.68rem;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        color: var(--public-accent);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(42vw, 22rem);
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-controls {
        flex: 0 1 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 0.35rem 0.45rem;
        flex-wrap: wrap;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-slot {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.2rem 0.45rem;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-control-group {
        display: inline-flex;
        align-items: center;
        min-height: 1.65rem;
        padding: 0.1rem 0.4rem;
        gap: 0.25rem 0.4rem;
        border-width: 1px;
        border-radius: 0.2rem;
        background: rgb(0 0 0 / 0.2);
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-control-group--session {
        margin-left: 0;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-group-label {
        display: inline-flex;
        align-items: center;
        align-self: center;
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        line-height: 1;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0;
        font-size: 0.65rem;
        line-height: 1;
        min-height: 1.65rem;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        min-height: 1.65rem;
        padding: 0 0.5rem;
        font-size: 0.62rem;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .pacing-opt,
      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .persp-opt {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin: 0;
        font-size: 0.65rem;
        line-height: 1;
        min-height: 1.65rem;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome input[type="radio"],
      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome input[type="checkbox"] {
        margin: 0;
        flex-shrink: 0;
        align-self: center;
      }

      body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome input[type="radio"] {
        width: 0.75rem;
        height: 0.75rem;
      }

      body[data-viewer-mode="true"] .brand-link {
        flex: 0 0 auto;
      }

      body[data-viewer-mode="true"] .brand-copy strong {
        font-size: 0.95rem;
      }

      @media (max-width: 768px) {
        body[data-viewer-mode="true"] .app-header {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome {
          flex-basis: 100%;
          order: 3;
          justify-content: flex-start;
          padding-top: 0.2rem;
          border-top: 1px solid var(--public-line);
        }

        body[data-viewer-mode="true"] .brand-link {
          order: 1;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-main {
          flex-basis: 100%;
          margin-right: 0;
          overflow: hidden;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-status {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-control-group {
          width: auto;
          flex: 1 1 auto;
          min-width: 0;
          justify-content: flex-start;
        }
      }

      /* ── Mobile menu button (visible only ≤640px in viewer mode) ── */
      .mobile-menu-btn {
        display: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0 0.55rem;
        min-height: 1.65rem;
        font-size: 1rem;
        line-height: 1;
        border-radius: 0.2rem;
        letter-spacing: 0;
        flex-shrink: 0;
      }

      /* Mobile hero bar: hidden by default; the 640px block below reveals it. */
      .mobile-hero-bar {
        display: none;
      }

      /* ── Mobile ≤640px: nav collapses to summary line + expandable controls ── */
      @media (max-width: 640px) {
        body[data-viewer-mode="true"] .mobile-menu-btn {
          display: inline-flex;
          margin-left: auto;
        }

        /* Toolbar wraps internally: [turn-meta + ⋯] on row 1, controls on row 2 (visibility via JS inline style) */
        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome {
          flex-wrap: wrap;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-main {
          flex: 1 1 0;
          flex-basis: 0;
          min-width: 0;
          overflow: hidden;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .mobile-menu-btn {
          flex: 0 0 auto;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-kicker {
          display: none;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-status {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 0;
          max-width: 100%;
        }

        /* Controls: full-width second row; JS sets display:none/'' via inline style */
        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-controls {
          flex-basis: 100%;
          flex-wrap: wrap;
          gap: 0.4rem;
          padding-top: 0.5rem;
          border-top: 1px solid var(--public-line);
          margin-top: 0.2rem;
        }

        body[data-viewer-mode="true"] #viewer-toolbar.header-game-chrome .viewer-toolbar-controls .viewer-control-group {
          flex: 1 1 calc(50% - 0.4rem);
        }

        /* ── Hero: art dim is the only mode-gated rule on mobile ── */
        .alt-hero-composite[data-hero-mode="thinking"] #rail-room-image {
          filter: brightness(0.2) saturate(0.5);
        }

        /* Pulse toggle: always visible on mobile so user can toggle anytime */
        .alt-hero-composite .hero-pulse-toggle {
          display: flex;
        }

        /* Pulse panel: ALWAYS full-bleed on mobile when visible */
        .alt-hero-composite .pulse-panel:not([hidden]) {
          position: absolute;
          inset: 0 0 2.6rem 0;
          width: auto;
          max-width: none;
          height: auto;
          border-radius: 0;
          background: transparent;
          border: none;
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          z-index: 8;
          padding: 0.85rem 1.1rem 0.5rem;
          display: flex;
          flex-direction: column;
        }

        .alt-hero-composite .pulse-panel-stream {
          flex: 1;
          height: auto;
          overflow-y: auto;
        }

        .alt-hero-composite .pulse-panel-head {
          margin-bottom: 0.5rem;
        }

        /* Status banner: ALWAYS bottom strip on mobile when visible */
        .alt-hero-composite .alt-hero-status-panel:not([hidden]) {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: auto;
          max-width: 100%;
          width: 100%;
          border-radius: 0;
          border-left: none;
          border-right: none;
          border-bottom: none;
          padding: 0.28rem 1.1rem 0.32rem;
          z-index: 9;
        }

        .alt-hero-composite .llm-status-detail,
        .alt-hero-composite #llm-status-progress {
          display: none;
        }

        /* Mobile: unreadable at these sizes — hide the floating map chip and
           chrome chip unconditionally. Turn/HP/next-turn surface in the mobile hero bar. */
        .alt-hero-composite .alt-hero-map-panel {
          display: none;
        }

        .alt-hero-composite #mud-agent-chrome {
          display: none !important;
        }

        /* Mobile info bar sits directly beneath the hero */
        .mobile-hero-bar {
          display: flex;
          align-items: center;
          gap: 0.6rem;
          padding: 0.3rem 0.75rem;
          font-size: 0.74rem;
          font-family: ui-monospace, "Cascadia Code", monospace;
          border-bottom: 1px solid var(--public-line);
          background: color-mix(in srgb, #020617 45%, transparent);
        }
        /* Room name: primary, truncates on overflow */
        .mobile-hero-bar-room {
          flex: 1 1 auto;
          min-width: 0;
          color: #f8fafc;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .mobile-hero-bar-turn {
          flex: 0 0 auto;
          color: color-mix(in srgb, #e2e8f0 70%, transparent);
          white-space: nowrap;
        }
        .mobile-hero-bar-hp {
          flex: 0 0 auto;
          color: #cbd5e1;
          white-space: nowrap;
        }
        .mobile-next-turn-btn {
          margin: 0;
          padding: 0.22rem 0.7rem;
          font-size: 0.74rem;
          font-weight: 600;
          letter-spacing: 0.04em;
          border-radius: 0.3rem;
          background: color-mix(in srgb, #fff 8%, transparent);
          border: 1px solid color-mix(in srgb, #fff 18%, transparent);
          color: color-mix(in srgb, #fff 40%, transparent);
          cursor: default;
          transition: background 160ms, color 160ms, border-color 160ms;
        }
        .mobile-next-turn-btn.ready {
          background: color-mix(in srgb, #4ade80 22%, transparent);
          border-color: color-mix(in srgb, #4ade80 50%, transparent);
          color: #d1fae5;
          cursor: pointer;
        }
        .mobile-next-turn-btn.waiting {
          background: color-mix(in srgb, #f59e0b 10%, transparent);
          border-color: color-mix(in srgb, #f59e0b 30%, transparent);
          color: color-mix(in srgb, #fde68a 60%, transparent);
        }

        /* Room rail: hide on mobile — room name now lives in the mobile-hero-bar.
           Collapse grid to a single 1fr row so the right-stack fills the card area
           (the 768px rule's `auto minmax(0,1fr)` would otherwise sink the scroll
           into the zero-height auto row left empty by the hidden rail). */
        .alt-main-split[data-game-active="true"] #mud-top-rail {
          display: none;
        }
        .alt-main-split[data-game-active="true"] {
          grid-template-rows: minmax(0, 1fr);
        }

        /* Pin the whole viewer to exactly one viewport; let each nested flex
           container distribute the remaining space. Previously min-height: 100dvh
           on #viewer-workspace stacked with the header and overflowed ~5%. */
        body[data-viewer-mode="true"] main.container:has(.alt-hero-layout) {
          height: 100dvh;
          min-height: 0;
        }
        #viewer-workspace {
          padding-bottom: 0.5rem;
          min-height: 0;
          flex: 1 1 auto;
        }
        .alt-hero-layout {
          min-height: 0;
          gap: 0.25rem;
          flex: 1 1 auto;
        }
        .alt-main-split {
          min-height: 0;
        }
      }


      .brand-link {
        gap: 0.4rem;
      }

      .brand-mark {
        display: none;
      }

      .brand-copy strong {
        color: var(--public-accent-secondary);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }

      .brand-meta {
        display: none;
      }

      .app-nav {
        gap: 1.6rem;
      }

      .app-nav a {
        padding: 0;
        border: 0;
        background: none;
        color: rgb(124 77 255 / 0.72);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .app-nav a:hover,
      .app-nav a[aria-current="page"] {
        background: none;
        border: 0;
        color: var(--public-accent);
      }

      .header-actions {
        gap: 0.75rem;
      }

      .header-icons {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--public-accent-secondary);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .header-icon {
        color: var(--public-accent-secondary);
        opacity: 0.78;
      }

      .theme-icon-btn {
        min-width: 2.4rem;
        padding: 0.55rem 0.7rem;
        border: 1px solid var(--public-line);
        background: transparent;
        color: var(--public-accent-secondary);
      }

      .theme-icon-btn:hover {
        border-color: var(--public-line-strong);
        background: rgb(124 77 255 / 0.08);
      }

      .ui-button {
        min-height: 0;
        padding: 0.95rem 1.3rem;
        border: 1px solid var(--public-line-strong);
        border-radius: 0;
        background: transparent;
        color: var(--public-ink);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .ui-button.is-primary {
        background: var(--public-accent-secondary);
        border-color: var(--public-accent-secondary);
        color: #fcf6ff;
      }

      .ui-button.is-primary:hover {
        background: #8a61ff;
        border-color: #8a61ff;
        color: #fcf6ff;
      }

      .ui-button.is-secondary {
        background: transparent;
        border-color: var(--public-line-strong);
        color: var(--public-ink);
      }

      .ui-button.is-secondary:hover,
      .ui-button.is-subtle:hover {
        background: rgb(255 255 255 / 0.03);
      }

      .ui-button.is-subtle {
        color: var(--public-accent);
      }

      .header-login {
        white-space: nowrap;
      }

      .public-shell {
        width: 100%;
      }

      .public-shell:not(.public-shell--landing) {
        max-width: var(--public-page-max);
        margin: 0 auto;
        padding: 2rem 3rem 3rem;
      }

      .public-shell--landing {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .public-shell--landing .public-band {
        border: 0;
        box-shadow: none;
        background: transparent;
      }

      .landing-stage {
        position: relative;
        display: flex;
        align-items: center;
        min-height: calc(100vh - 4.5rem);
        padding: 5.5rem 3rem 4rem;
        overflow: hidden;
        background:
          radial-gradient(circle at 72% 24%, rgb(124 77 255 / 0.24), transparent 18rem),
          radial-gradient(circle at 58% 42%, rgb(148 211 193 / 0.06), transparent 12rem),
          linear-gradient(135deg, #0d0d12 0%, #12131a 40%, #181624 72%, #0e0e13 100%);
      }

      .landing-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 67% 34%, rgb(170 118 255 / 0.24), transparent 9rem),
          radial-gradient(circle at 62% 44%, rgb(83 59 141 / 0.42), transparent 16rem),
          radial-gradient(circle at 56% 46%, rgb(255 255 255 / 0.06), transparent 2rem),
          radial-gradient(circle at 78% 18%, rgb(255 255 255 / 0.04), transparent 1.2rem);
        filter: blur(18px);
        opacity: 0.95;
      }

      .landing-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgb(14 14 19 / 0.06), rgb(14 14 19 / 0.7) 72%, rgb(14 14 19 / 0.9)),
          linear-gradient(180deg, rgb(14 14 19 / 0.18), transparent 32%, rgb(14 14 19 / 0.66));
      }

      .landing-stage-copy,
      .landing-stage-coords {
        position: relative;
        z-index: 1;
      }

      .landing-stage-copy {
        max-width: 38rem;
      }

      .landing-eyebrow,
      .metric-label,
      .feature-card-eyebrow {
        margin: 0;
        color: var(--public-accent);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .landing-stage h2 {
        margin: 0 0 1rem;
        max-width: 9ch;
        font-size: clamp(3.25rem, 8vw, 5.8rem);
        line-height: 0.92;
        letter-spacing: -0.04em;
        text-transform: uppercase;
      }

      .landing-stage-copy > p:last-of-type {
        max-width: 31rem;
        margin: 0;
        color: #b9b5c3;
        font-size: 1rem;
        line-height: 1.65;
      }

      .landing-hero-actions {
        gap: 0.9rem;
        margin-top: 1.75rem;
      }

      .landing-stage-coords {
        position: absolute;
        right: 3rem;
        bottom: 2rem;
        display: grid;
        gap: 0.25rem;
        color: rgb(228 225 233 / 0.42);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-align: right;
      }

      .landing-section {
        padding: 4.5rem 3rem;
      }

      .landing-section--economy {
        background: var(--public-surface-strong);
        border-top: 1px solid rgb(255 255 255 / 0.03);
      }

      .landing-grid--economy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 31rem);
        gap: 3rem;
        align-items: start;
      }

      .landing-copy {
        display: grid;
        gap: 1rem;
        max-width: 36rem;
      }

      .landing-copy h2,
      .landing-featured-head h2 {
        margin: 0;
        font-size: clamp(2.2rem, 5vw, 3rem);
        line-height: 0.96;
        text-transform: uppercase;
      }

      .landing-quote {
        margin: 0.25rem 0 0;
        padding-left: 1.35rem;
        border-left: 2px solid var(--public-accent-secondary);
        color: #c8c3d8;
        font-size: 0.94rem;
        font-style: italic;
        line-height: 1.7;
      }

      .glass-panel {
        background: rgb(53 52 58 / 0.4);
        border: 1px solid rgb(255 255 255 / 0.05);
        backdrop-filter: blur(20px);
      }

      .relic-glow {
        box-shadow: 0 0 40px rgb(124 77 255 / 0.08);
      }

      .economy-card {
        display: grid;
        gap: 1.25rem;
        padding: 1.5rem;
      }

      .economy-card-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
      }

      .economy-amount {
        display: block;
        margin-top: 0.35rem;
        color: #e8deff;
        font-size: clamp(2.6rem, 5vw, 3.4rem);
        line-height: 0.9;
      }

      .economy-percent {
        display: grid;
        gap: 0.2rem;
        text-align: right;
      }

      .economy-percent strong {
        font-size: 1.4rem;
      }

      .budget-meter {
        height: 0.3rem;
        background: rgb(148 142 161 / 0.18);
      }

      .budget-meter-fill {
        background: linear-gradient(90deg, var(--public-accent-secondary), var(--public-accent));
      }

      .economy-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }

      .economy-stat {
        display: grid;
        gap: 0.25rem;
        padding: 0.85rem 1rem;
        background: rgb(53 52 58 / 0.26);
        border: 1px solid rgb(255 255 255 / 0.05);
      }

      .economy-stat strong {
        font-size: 0.95rem;
      }

      .metric-row {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .metric-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--public-accent-secondary);
        font: inherit;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        cursor: pointer;
      }

      .metric-link:hover {
        color: var(--public-accent);
        text-decoration: none;
      }

      .landing-featured {
        display: grid;
        gap: 2rem;
        background: var(--public-surface);
      }

      .landing-featured-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
      }

      .landing-featured-head p {
        max-width: 34rem;
        margin: 0;
        color: var(--public-muted);
      }

      .featured-cinematic {
        position: relative;
        aspect-ratio: 21 / 9;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgb(29 16 47 / 0.2), rgb(14 14 19 / 0.15)),
          linear-gradient(135deg, #3a294d 0%, #8f6279 35%, #272339 68%, #101018 100%);
      }

      .featured-cinematic::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, transparent 0 18%, rgb(18 19 24 / 0.4) 18% 36%, transparent 36% 52%, rgb(18 19 24 / 0.48) 52% 71%, transparent 71% 100%),
          linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 50%),
          radial-gradient(circle at 50% 28%, rgb(255 224 183 / 0.1), transparent 18%);
      }

      .featured-cinematic::after {
        content: "";
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: 0;
        height: 78%;
        background:
          linear-gradient(180deg, rgb(45 28 62 / 0.08), rgb(18 19 24 / 0.54)),
          linear-gradient(90deg, rgb(24 24 30 / 0.98) 0 12%, transparent 12% 22%, rgb(24 24 30 / 0.92) 22% 38%, transparent 38% 62%, rgb(24 24 30 / 0.92) 62% 78%, transparent 78% 88%, rgb(24 24 30 / 0.96) 88% 100%);
        clip-path: polygon(0 100%, 0 34%, 10% 10%, 19% 0, 27% 12%, 32% 100%, 44% 100%, 44% 26%, 52% 6%, 60% 0, 67% 10%, 71% 100%, 82% 100%, 82% 28%, 89% 8%, 96% 2%, 100% 16%, 100% 100%);
        opacity: 0.95;
      }

      .featured-overlay {
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        display: grid;
        gap: 0.85rem;
        justify-items: center;
        padding: 1.5rem 1.85rem;
        text-align: center;
      }

      .featured-overlay strong {
        font-size: 1.2rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .signal-grid {
        display: grid;
        grid-template-columns: repeat(6, 0.42rem);
        gap: 0.22rem;
      }

      .signal-grid span {
        width: 0.42rem;
        height: 0.42rem;
        background: rgb(148 211 193 / 0.18);
      }

      .signal-grid span:nth-child(2),
      .signal-grid span:nth-child(5),
      .signal-grid span:nth-child(8),
      .signal-grid span:nth-child(11) {
        background: rgb(124 77 255 / 0.52);
      }

      .featured-grid--landing {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        background: rgb(148 142 161 / 0.12);
      }

      .featured-run-tile {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        min-height: 15rem;
        padding: 1.3rem 1rem 1rem;
        background: var(--public-surface-muted);
      }

      .featured-run-tile h3 {
        margin: 0;
        font-size: 1.16rem;
        text-transform: uppercase;
      }

      .featured-rationale {
        margin: 0;
        color: #bbb6c6;
        line-height: 1.6;
      }

      .pill-row {
        gap: 0.5rem;
      }

      .model-pill,
      .outcome-pill {
        padding: 0.28rem 0.55rem;
        border: 1px solid var(--public-line);
        border-radius: 0;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .model-pill {
        background: rgb(148 211 193 / 0.08);
      }

      .featured-card-footer {
        display: grid;
        gap: 0.45rem;
        margin-top: auto;
      }

      .public-lobby-error-wrap {
        padding: 1.25rem 3rem 0;
        background: var(--public-surface-strong);
      }

      .public-lobby-error-wrap:has(#public-lobby-error:empty) {
        display: none;
      }

      .lobby-shell {
        max-width: var(--public-page-max);
        margin: 0 auto;
        padding: 1.4rem 3rem 2.5rem;
        display: grid;
        gap: 1.1rem;
      }

      .lobby-main {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.85fr);
        gap: 1.35rem;
        align-items: start;
      }

      .lobby-left-column,
      .lobby-right-column {
        display: grid;
        gap: 1rem;
      }

      .lobby-start-card,
      .lobby-records,
      .lobby-mmo-link,
      .lobby-feed {
        border: 1px solid var(--public-line);
        background:
          linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 35%),
          var(--public-surface);
        box-shadow: var(--public-shadow);
      }

      .lobby-start-card {
        overflow: hidden;
      }

      .lobby-start-hero {
        position: relative;
        padding: 1.35rem;
        min-height: 12.5rem;
        display: flex;
        align-items: end;
        background:
          linear-gradient(180deg, rgb(17 18 26 / 0.08), rgb(17 18 26 / 0.2)),
          linear-gradient(135deg, #161623 0%, #241c35 42%, #6a4d89 72%, #161623 100%);
      }

      .lobby-start-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 48% 40%, rgb(255 255 255 / 0.08), transparent 10%),
          linear-gradient(90deg, transparent 0 18%, rgb(16 14 28 / 0.48) 18% 22%, transparent 22% 57%, rgb(16 14 28 / 0.54) 57% 66%, transparent 66% 100%);
      }

      .lobby-start-hero::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: -1px;
        height: 84%;
        background:
          linear-gradient(90deg, rgb(20 28 46 / 0.9) 0 14%, transparent 14% 32%, rgb(13 21 33 / 0.92) 32% 44%, transparent 44% 62%, rgb(27 34 52 / 0.92) 62% 76%, transparent 76% 88%, rgb(15 18 28 / 0.92) 88% 100%);
        clip-path: polygon(0 100%, 0 26%, 12% 0, 21% 34%, 31% 8%, 38% 100%, 50% 100%, 50% 18%, 59% 0, 67% 30%, 73% 100%, 85% 100%, 85% 24%, 94% 0, 100% 22%, 100% 100%);
        opacity: 0.94;
      }

      .lobby-start-copy {
        position: relative;
        z-index: 1;
        max-width: 33rem;
        display: grid;
        gap: 0.45rem;
      }

      .lobby-start-copy h1 {
        margin: 0;
        font-size: clamp(2.3rem, 5vw, 3.35rem);
        line-height: 0.94;
        letter-spacing: -0.04em;
        text-transform: uppercase;
      }

      .lobby-start-copy p:last-child {
        margin: 0;
        max-width: 30rem;
        color: #cac3d8;
        line-height: 1.65;
      }

      .lobby-start-body {
        display: grid;
        gap: 0.9rem;
        padding: 1.1rem;
        background: var(--public-surface-strong);
      }

      .lobby-form-shell {
        display: grid;
        gap: 0.8rem;
      }

      .lobby-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
      }

      .lobby-inline-fieldset {
        margin: 0;
        padding: 0.85rem 1rem;
        border: 1px solid var(--public-line);
        background: color-mix(in srgb, var(--public-surface-muted) 84%, black);
      }

      .lobby-actions {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.9rem;
        flex-wrap: wrap;
      }

      .lobby-actions .form-note {
        flex: 1 1 18rem;
      }

      .lobby-budget-flag {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.55rem;
        border: 1px solid var(--public-line-strong);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--public-accent);
        background: rgb(148 211 193 / 0.08);
      }

      .lobby-budget-flag.is-empty {
        color: #ffb4ab;
        background: rgb(255 180 171 / 0.08);
      }

      .lobby-config-summary {
        margin: 0;
        max-width: 100%;
        color: var(--public-muted);
        font-size: 0.78rem;
        line-height: 1.5;
      }

      .lobby-cost-estimate {
        margin: 0;
        padding: 0.65rem 0.75rem;
        border-left: 2px solid #ffb4ab;
        background: rgb(255 180 171 / 0.06);
        color: var(--public-muted);
        line-height: 1.5;
      }

      .lobby-cost-estimate.is-available {
        border-left-color: var(--public-accent);
        background: rgb(148 211 193 / 0.06);
        color: var(--public-ink);
      }

      .lobby-advanced-model-toggle {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin: 0;
        font-size: 0.82rem;
        color: var(--public-ink);
      }

      .lobby-advanced-model-toggle input {
        width: auto;
        margin: 0;
      }

      .lobby-advanced-dialog {
        max-width: min(38rem, 94vw);
        width: 100%;
        max-height: min(92dvh, 46rem);
        padding: 0;
        border: 1px solid var(--public-line-strong);
        background: var(--public-surface-strong);
        color: var(--public-ink);
        overflow: hidden;
      }

      .lobby-advanced-dialog::backdrop {
        background: rgb(0 0 0 / 0.55);
      }

      .lobby-dialog-shell {
        display: flex;
        flex-direction: column;
        max-height: min(92dvh, 46rem);
        min-height: 0;
      }

      .lobby-dialog-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        flex-shrink: 0;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--public-line);
        background: var(--public-surface-strong);
      }

      .lobby-dialog-head-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
      }

      .lobby-dialog-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 1rem 1.25rem 1.35rem;
        display: grid;
        gap: 0.85rem;
      }

      .lobby-dialog-title {
        margin: 0;
        font-size: 1rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .lobby-dialog-subhead {
        margin: 0.5rem 0 0;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--public-accent-secondary);
      }

      .lobby-dialog-subhead--spaced {
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid var(--public-line);
      }

      .lobby-dialog-prose {
        margin: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        line-height: 1.55;
      }

      .lobby-dialog-field {
        display: grid;
        gap: 0.35rem;
        font-size: 0.78rem;
      }

      .lobby-dialog-field select {
        width: 100%;
        max-width: none;
      }

      .lobby-form-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
      }

      .lobby-actions--byok-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
      }

      .lobby-actions--byok-footer .form-note {
        flex: none;
      }

      .lobby-action-buttons {
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
        margin-left: auto;
      }

      .lobby-mode-panel {
        display: grid;
        gap: 0.9rem;
      }

      .lobby-mode-panel.is-hidden {
        display: none;
      }

      .lobby-mode-panel--advanced {
        border: 1px solid var(--public-line);
        background: color-mix(in srgb, var(--public-surface-muted) 80%, black);
        padding: 1rem;
      }

      .lobby-mode-panel.is-advanced {
        box-shadow: inset 0 0 0 1px rgb(124 77 255 / 0.12);
      }

      .lobby-mode-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .lobby-back-link {
        white-space: nowrap;
      }

      .lobby-settings-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        color: var(--public-ink);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .lobby-settings-gear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border: 1px solid var(--public-line-strong);
        color: var(--public-accent-secondary);
        font-size: 1rem;
      }

      .lobby-advanced-body {
        display: grid;
        gap: 1rem;
      }

      .lobby-records,
      .lobby-mmo-link {
        display: grid;
        gap: 1rem;
        padding: 1rem;
      }

      .lobby-record-list {
        display: grid;
        gap: 0.8rem;
      }

      .lobby-record-item {
        display: grid;
        gap: 0.55rem;
        padding: 0.9rem;
        border: 1px solid rgb(148 142 161 / 0.1);
        background: var(--public-surface-muted);
      }

      .lobby-record-head {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .lobby-record-head h3 {
        margin: 0;
        font-size: 1rem;
        text-transform: uppercase;
      }

      .lobby-record-copy {
        margin: 0;
        color: var(--public-muted);
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .lobby-feed {
        display: grid;
        gap: 1rem;
        padding: 1rem;
      }

      .lobby-feed-list {
        display: grid;
        gap: 0.55rem;
      }

      .lobby-feed-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.85rem;
        align-items: center;
        padding: 0.6rem 0;
        border-bottom: 1px solid rgb(148 142 161 / 0.08);
      }

      .lobby-feed-row:last-child {
        border-bottom: 0;
      }

      .lobby-feed-time {
        color: var(--public-muted);
        font-size: 0.74rem;
        font-family: ui-monospace, monospace;
      }

      .lobby-feed-copy {
        font-size: 0.82rem;
        color: var(--public-ink);
      }

      .lobby-feed-badge {
        padding: 0.2rem 0.45rem;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        background: rgb(124 77 255 / 0.18);
        color: #e8deff;
      }

      .lobby-feed-badge--exfil-bitter {
        background: var(--public-bad-soft);
        color: #f87171;
        border: 1px solid rgb(248 113 113 / 0.38);
      }

      html[data-theme="light"] .lobby-feed-badge--exfil-bitter {
        color: #a33434;
        border-color: rgb(170 86 86 / 0.42);
      }

      .lobby-feed-badge--terminal-grey {
        background: rgb(148 163 184 / 0.14);
        color: rgb(186 197 212);
        border: 1px solid rgb(148 163 184 / 0.28);
      }

      html[data-theme="light"] .lobby-feed-badge--terminal-grey {
        background: rgb(100 116 139 / 0.12);
        color: #5c6570;
        border-color: rgb(100 116 139 / 0.32);
      }

      .lobby-feed-silent-line {
        color: var(--public-muted);
        font-style: normal;
      }

      .app-footer {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 2rem;
        margin: 0;
        padding: 1.5rem 3rem;
        background: #131318;
        border-top: 1px solid rgb(255 255 255 / 0.04);
        font-size: 0.66rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .app-footer-brand,
      .app-footer-node {
        display: grid;
        gap: 0.28rem;
      }

      .app-footer-brand strong,
      .app-footer-node strong {
        color: var(--public-accent-secondary);
      }

      .app-footer-meta {
        color: var(--public-muted);
      }

      .app-footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        flex-wrap: wrap;
      }

      .app-footer a {
        color: rgb(124 77 255 / 0.64);
        text-decoration: none;
      }

      .app-footer a:hover {
        color: var(--public-accent);
      }

      @media (max-width: 960px) {
        #viewer-workspace,
        .public-shell:not(.public-shell--landing),
        .app-header,
        .landing-stage,
        .landing-section,
        .public-lobby-error-wrap,
        .app-footer {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }

        .app-header {
          flex-wrap: wrap;
          gap: 0.9rem 1.2rem;
        }

        .app-nav {
          order: 3;
          width: 100%;
          justify-content: flex-start;
          overflow-x: auto;
          padding-bottom: 0.2rem;
        }

        .landing-stage {
          min-height: auto;
          padding-top: 4rem;
          padding-bottom: 5.5rem;
        }

        .landing-grid--economy,
        .featured-grid--landing,
        .lobby-main,
        .lobby-form-grid,
        .public-band--split,
        .command-grid,
        .cta-strip,
        .records-filters,
        .insights-filters {
          grid-template-columns: 1fr;
        }

        .landing-featured-head,
        .economy-card-head,
        .app-footer {
          grid-template-columns: 1fr;
          display: grid;
          justify-content: start;
        }

        .landing-featured-head,
        .economy-card-head {
          align-items: start;
        }

        .app-footer-links {
          justify-content: flex-start;
        }
      }

      @media (max-width: 640px) {
        #viewer-workspace,
        .public-shell:not(.public-shell--landing),
        .app-header,
        .landing-stage,
        .landing-section,
        .public-lobby-error-wrap,
        .app-footer {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        .header-actions {
          width: 100%;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .landing-stage h2 {
          font-size: clamp(2.65rem, 14vw, 4rem);
        }

        .landing-stage-coords {
          right: 1rem;
          bottom: 1rem;
        }

        .economy-stats,
        .field-grid {
          grid-template-columns: 1fr;
        }

        .lobby-actions,
        .lobby-feed-row {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .lobby-action-buttons {
          margin-left: 0;
        }
      }

      /* ── Next-turn button ── */
      #next-turn-wrap {
        border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
        padding-top: .3rem;
        margin-top: .1rem;
      }
      #next-turn-btn {
        width: 100%;
        padding: .28rem .6rem;
        border-radius: .35rem;
        font-size: .74rem;
        font-weight: 600;
        letter-spacing: .04em;
        border: 1px solid color-mix(in srgb, #fff 18%, transparent);
        background: color-mix(in srgb, #fff 8%, transparent);
        color: color-mix(in srgb, #fff 35%, transparent);
        cursor: default;
        transition: background 160ms, color 160ms, border-color 160ms;
        margin: 0;
      }
      #next-turn-btn.next-turn-btn--ready {
        background: color-mix(in srgb, #4ade80 18%, transparent);
        border-color: color-mix(in srgb, #4ade80 50%, transparent);
        color: #d1fae5;
        cursor: pointer;
      }
      #next-turn-btn.next-turn-btn--ready:hover {
        background: color-mix(in srgb, #4ade80 30%, transparent);
      }
      #next-turn-btn.next-turn-btn--waiting {
        background: color-mix(in srgb, #f59e0b 10%, transparent);
        border-color: color-mix(in srgb, #f59e0b 30%, transparent);
        color: color-mix(in srgb, #fde68a 60%, transparent);
        cursor: default;
      }
      #next-turn-progress-track {
        height: .18rem;
        background: color-mix(in srgb, #fff 10%, transparent);
        border-radius: 999px;
        overflow: hidden;
        margin-top: .22rem;
      }
      #next-turn-progress {
        height: 100%;
        background: #4ade80;
        border-radius: 999px;
        width: 0%;
      }

      /* ── Rail key events ── */
      .rail-key-events-slot {
        border-top: 1px solid var(--public-line);
        padding-top: .55rem;
        margin-top: .3rem;
        flex-shrink: 0;
      }
      .rail-key-event {
        margin: .25rem 0 0;
        font-size: .84rem;
        font-style: italic;
        color: var(--public-ink);
        line-height: 1.45;
        opacity: .82;
      }
      .rail-key-event:first-child { margin-top: 0; }

      /* ── Outcome prose name label ── */
      .tableau-prose-name { font-weight: 700; }