:root {
  /* ── Brand: color ── see docs/v2-brand-system.md */
  --v2-bg: #060a0c;
  --v2-bg-gradient: radial-gradient(ellipse 120% 80% at 50% 20%, #0f2a2e 0%, #060a0c 55%, #040608 100%);
  --v2-teal: #2ee8d6;
  --v2-teal-dim: #1a9e92;
  --v2-teal-glow: 0 0 24px rgba(46, 232, 214, 0.35);
  --v2-neon-teal: #42fff0;
  --v2-yellow: #f5d547;
  --v2-yellow-bright: #ffe566;
  --v2-yellow-dim: #e6c030;
  --v2-brand-do: #2f6660;
  --v2-text: #e8f4f2;
  --v2-text-muted: #8aa8a3;
  --v2-border: rgba(66, 255, 240, 0.48);
  --v2-border-dashed: rgba(66, 255, 240, 0.32);
  /* Frosted glass — identical on frame + both sidebars (see glass.css) */
  --v2-glass-alpha: 0.36;
  --v2-glass-bg: rgba(4, 12, 14, var(--v2-glass-alpha));
  --v2-glass-blur: 11px;
  --v2-glass-saturate: 1.12;
  --v2-glass-bg-soft: rgba(4, 12, 14, 0.18);
  --v2-glass-tint: rgba(46, 232, 214, 0.22);
  /* Prompt frame — lighter glass than sidebars */
  --v2-frame-glass-alpha: 0.24;
  --v2-frame-glass-bg: rgba(4, 12, 14, var(--v2-frame-glass-alpha));
  --v2-frame-glass-blur: 3px;
  --v2-frame-glass-tint: rgba(46, 232, 214, 0.14);
  /* Bottom snap — authoritative offset from clean screenshot (frame top at bottom anchor) */
  --v2-bottom-snap-top-offset: clamp(4.85rem, 12.5vh, 5.75rem);
  --v2-bottom-snap-gap: clamp(0.45rem, 1.1vh, 0.65rem);
  --v2-composer-content-gap: var(--v2-bottom-snap-gap);
  --v2-composer-block-h: clamp(3.25rem, 8vh, 4.25rem);
  --v2-scroll-bottom-reserve: var(--v2-bottom-snap-gap);
  --v2-content-bottom-reserve: calc(var(--v2-composer-block-h) + var(--v2-bottom-snap-gap));
  --v2-frame-bg: var(--v2-glass-bg);
  --v2-radius: 14px;
  --v2-radius-lg: 22px;
  --v2-radius-pill: 999px;
  --v2-frame-radius: calc(var(--v2-radius) + 2px);
  --v2-frame-shadow: 0 0 20px rgba(66, 255, 240, 0.18), 0 0 36px rgba(46, 232, 214, 0.08);

  /* ── Brand: layout ── */
  --v2-rail-w: clamp(16rem, 20vw, 19rem);
  --v2-rail-w-collapsed: 4.35rem;
  --v2-rail-inset: clamp(1rem, 2.5vw, 1.5rem);
  --v2-rail-gap: 0.65rem;
  --v2-rail-bg: var(--v2-glass-bg);
  --v2-rail-motion-duration: 0.38s;
  --v2-rail-motion-ease: cubic-bezier(0.32, 0.94, 0.42, 1);
  --v2-rail-tip-duration: 0.2s;
  --v2-rail-tip-shift: 0.45rem;
  --v2-rail-tip-ease: cubic-bezier(0.32, 0.94, 0.42, 1);
  --v2-hero-motion-duration: 680ms;
  --v2-hero-motion-ease: cubic-bezier(0.32, 0.94, 0.42, 1);
  --v2-rail-stack-gap: 0.75rem;
  --v2-rail-body-top-gap: var(--v2-rail-stack-gap);
  --v2-rail-dotted-border: 1px dotted var(--v2-border-dashed);
  --v2-corner-bl-square: var(--v2-frame-radius) var(--v2-frame-radius) var(--v2-frame-radius) 0;
  --v2-frame-w: min(94vw, 720px);
  --v2-center-gutter: 0px;
  --v2-main-gutter: clamp(0.85rem, 2.2vw, 1.5rem);
  --v2-shell-radius: 0 var(--v2-frame-radius) var(--v2-frame-radius) var(--v2-frame-radius);
  --v2-shell-radius-right: var(--v2-frame-radius) 0 var(--v2-frame-radius) var(--v2-frame-radius);
  /*
   * Desktop prompt frame. Top edge at 25vh, so the frame is the lower three
   * quarters of the viewport and the node map has the band above it.
   * Mobile overrides this inside css/v2/mobile.css (max-width: 900px).
   */
  --whatimado-frame-top-default: 25vh;
  --whatimado-frame-top: var(--whatimado-frame-top-default);
  /* Compact mission summary pinned above the node map. The prompt drops by this same amount. */
  --v2-timeline-h: 2.75rem;
  /* Gap that keeps the constellation above the prompt frame, not inside the glass. */
  --v2-map-frame-clearance: clamp(0.85rem, 2.2vh, 1.35rem);
  --whatimado-scroll-thumb-h: 3.25rem;
  --v2-kicker-reserve: clamp(4.5rem, 11.5vh, 5.75rem);
  --v2-hero-node-gap: clamp(0.3rem, 0.75vh, 0.5rem);
  --v2-map-band-offset-top: clamp(0.4rem, 1vh, 0.7rem);
  --v2-map-graph-top-pad: clamp(0.85rem, 2.2vh, 1.35rem);
  /* Full main column — global pan surface; graph SVG stays in upper band */
  --v2-map-band-h: 100%;
  --v2-map-svg-h: calc(
    var(--whatimado-frame-top-default) - var(--v2-kicker-reserve) - var(--v2-hero-node-gap)
      + var(--v2-map-band-offset-top)
  );
  --v2-kicker-top: calc(var(--whatimado-frame-top-default) - var(--v2-kicker-reserve));

  /* ── Brand: map look (physics constants live in whatimado-map.js) ── */
  --v2-map-ghost-opacity: 0.28;
  --v2-map-node-lg: 8.5;
  --v2-map-node-sm: 4.25;
  --v2-map-drift-duration: 11s;
  --v2-map-edge-width: 1.45;
  --v2-map-dim: 0;
  --v2-frame-elevation: 0;
  /** Docked frame top (px) — set during hero dismiss; frozen after dock settles */
  --v2-docked-frame-top: var(--whatimado-frame-top-default);
  /** Visual-only float on docked prompt frame (transform, not layout) */
  --v2-frame-breathe-amplitude: clamp(2px, 0.35vh, 4px);
  /** Global upward shift for the node graph (fraction of SVG view height) */
  --v2-map-graph-shift-y: 0.08;

  /* ── Brand: typography ── */
  --v2-font: "Inter", system-ui, -apple-system, sans-serif;
  --v2-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --v2-font-hero: "Montserrat", "Avenir Next", "Avenir", system-ui, sans-serif;

  /* ── Brand: Text Box corners (3 rounded + 1 straight) ── */
  --v2-btn-radius: 0 var(--v2-frame-radius) var(--v2-frame-radius) var(--v2-frame-radius);
  --v2-prompt-radius: var(--v2-frame-radius) 0 var(--v2-frame-radius) var(--v2-frame-radius);
  --v2-response-radius: var(--v2-btn-radius);
  --v2-shell-radius: 0 var(--v2-frame-radius) var(--v2-frame-radius) var(--v2-frame-radius);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
}

html {
  overflow-x: clip;
}

body.v2-app {
  font-family: var(--v2-font);
  color: var(--v2-text);
  background: var(--v2-bg);
  background-image: var(--v2-bg-gradient);
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Buttons + titles share hero display stack (Montserrat, caps) */
body.v2-app button,
body.v2-app .v2-section-label,
body.v2-app .v2-nav-group-label,
body.v2-app .v2-msg-label,
body.v2-app .v2-path-card h3,
body.v2-app .v2-active-path strong,
body.v2-app .v2-brand-word {
  font-family: var(--v2-font-hero);
  text-transform: uppercase;
}

body.v2-app button {
  border-radius: var(--v2-btn-radius);
}

.hidden {
  display: none !important;
}

.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;
}