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

:root {
  --bg: #0c1015;
  --surface: #111820;
  --surface2: #172030;
  --surface3: #0a1119;
  --border: #1c2a3a;
  --border-mid: #243548;
  --text: #d4e4ee;
  --text-dim: #5f7384;
  --text-muted: #314152;
  --cyan: #00cfdb;
  --cyan-lo: rgba(0, 207, 219, 0.12);
  --teal: #0099aa;
  --navy: #0a2750;
  --green: #2a9a72;
  --green-lo: rgba(42, 154, 114, 0.7);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --r: 10px;
  --r-sm: 6px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(0, 207, 219, 0.07) 0%, transparent 60%),
    radial-gradient(640px 360px at 8% -8%, rgba(10, 39, 80, 0.4) 0%, transparent 62%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 16, 21, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 58px;
  max-width: 1272px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.nav-logo-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(0, 207, 219, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.08), rgba(10, 39, 80, 0.16)),
    #09131c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.nav-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a[aria-current="page"] {
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border: none;
}

.btn-nav {
  padding: 6px 14px;
  background: var(--cyan);
  color: var(--navy);
  font-size: 13px;
}

.btn-nav:hover {
  background: #00dfeb;
}

.btn-primary {
  padding: 13px 22px;
  background: var(--cyan);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r);
}

.btn-primary:hover {
  background: #00dfeb;
}

.btn-ghost {
  padding: 12px 20px;
  color: var(--text-dim);
  border: 1px solid var(--border-mid);
  background: transparent;
  font-size: 15px;
  border-radius: var(--r);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: #3a5060;
}

.eyebrow,
.section-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cyan);
}

.hero {
  padding: 20px 0 72px;
}

.hero .container {
  max-width: 1272px;
}

.hero-grid {
  display: grid;
  gap: 34px;
}

.hero-copy {
  max-width: 1640px;
}

.hero-copy h1 {
  margin-bottom: 20px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.038em;
  color: #fff;
}

.hero-sub {
  max-width: 560px;
  margin-bottom: 30px;
  font-size: 17px;
  color: #6d8193;
  line-height: 1.72;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #6f8799;
  letter-spacing: 0.04em;
}

.hero-body {
  max-width: 520px;
  font-size: 16px;
  color: #7a9bb0;
  line-height: 1.7;
  margin-bottom: 22px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--cyan);
  color: #071018;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-sm);
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
}
.btn-hero-primary:hover { opacity: 0.88; }

.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: border-color 0.15s, color 0.15s;
}
.btn-hero-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.hero-product {
  width: 100%;
}

.tour-shell {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 207, 219, 0.14);
  border-radius: 14px;
  background: #071018;
  box-shadow:
    0 0 0 1px rgba(0, 207, 219, 0.08),
    0 0 48px rgba(0, 207, 219, 0.05),
    0 32px 80px rgba(0, 0, 0, 0.72);
}

.tour-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: #09131b;
  font-family: var(--mono);
  font-size: 11px;
}

.tour-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tour-speed-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(28, 42, 58, 0.95);
  border-radius: 999px;
  background: rgba(12, 19, 27, 0.9);
}

.tour-speed-label {
  color: #6f8799;
  white-space: nowrap;
}

.tour-speed-label span {
  color: #d5e7f1;
}

.tour-speed-range {
  width: 84px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.tour-mode-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(28, 42, 58, 0.95);
  border-radius: 999px;
  background: rgba(12, 19, 27, 0.9);
}

.tour-mode-btn {
  padding: 5px 9px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #7490a2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tour-mode-btn.active {
  background: var(--cyan);
  color: var(--navy);
  font-weight: 700;
}

.tour-shell.autoplay-mode .tour-nav-item,
.tour-shell.autoplay-mode .tour-workspace-tab,
.tour-shell.autoplay-mode .tour-project-btn,
.tour-shell.autoplay-mode .tour-terminal-tab {
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.tour-shell.autoplay-mode .tour-auto-target {
  box-shadow: 0 0 0 2px rgba(0, 207, 219, 0.6), 0 0 20px rgba(0, 207, 219, 0.18);
}

.tour-kicker {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tour-instruction {
  color: #607586;
}

.tour-body {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 254px;
  min-height: 684px;
  height: 684px;
}

.tour-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  background: #081018;
  border-right: 1px solid var(--border);
}

.tour-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid rgba(28, 42, 58, 0.8);
}

.tour-brand .logo-mark {
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 11px;
}

.tour-brand-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

.tour-brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: #5b7081;
  line-height: 1.2;
}

.tour-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #708695;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.tour-nav-item:hover,
.tour-nav-item.active {
  background: rgba(17, 24, 32, 0.95);
  border-color: rgba(0, 207, 219, 0.2);
  color: var(--text);
  transform: translateX(1px);
}

.tour-nav-item:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.tour-nav-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0c1722;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.tour-nav-item.active .tour-nav-icon,
.tour-nav-item:hover .tour-nav-icon {
  background: var(--cyan);
  color: var(--navy);
  border-color: rgba(0, 207, 219, 0.4);
}

.tour-nav-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tour-rail-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.tour-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(17, 24, 32, 0.88);
  font-family: var(--mono);
  font-size: 9px;
  color: #5f7486;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-status-live {
  border-color: rgba(42, 154, 114, 0.35);
  color: #8bd5b8;
}

.tour-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(640px 280px at 84% -10%, rgba(0, 207, 219, 0.08) 0%, transparent 62%),
    linear-gradient(180deg, #0a121a, #081018);
}

.tour-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28, 42, 58, 0.9);
  font-family: var(--mono);
  font-size: 11px;
}

.tour-stage-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tour-stage-project {
  color: var(--text);
}

.tour-stage-slash {
  color: #34485a;
}

.tour-stage-meta {
  color: #698193;
  text-align: right;
}

.tour-scenes {
  flex: 1;
  padding: 12px;
}

.tour-scene {
  display: none;
  height: 100%;
  flex-direction: column;
  gap: 14px;
  animation: sceneFade 0.18s ease;
}

.tour-scene.active {
  display: flex;
}

@keyframes sceneFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tour-scene-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-scene-title {
  font-size: 16px;
  font-weight: 700;
  color: #f2f7fb;
}

.tour-scene-count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #678092;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-project-stats,
.tour-settings-grid,
.tour-cli-grid {
  display: grid;
  gap: 10px;
}

.tour-project-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tour-stat-card,
.tour-project-card,
.tour-panel-card,
.tour-cli-card,
.tour-side-card,
.tour-ai-panel,
.tour-preview-window,
.tour-terminal-window {
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 12px;
  background: rgba(10, 18, 26, 0.92);
}

.tour-stat-card {
  padding: 12px;
}

.hero-minimal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.hero-accent-line {
  width: 36px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  margin-bottom: -4px;
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
}

.hero-subline {
  display: block;
  font-weight: 400;
  opacity: 0.6;
}

.tour-stat-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: #688093;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #f4fbff;
}

.tour-project-list {
  display: grid;
  gap: 10px;
}

.tour-project-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%),
    rgba(10, 18, 26, 0.94);
}

.tour-project-card.current {
  border-color: rgba(0, 207, 219, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(0, 207, 219, 0.07),
    0 0 0 1px rgba(0, 207, 219, 0.04);
}

.tour-project-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tour-project-info {
  display: flex;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.tour-project-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.12), rgba(10, 39, 80, 0.2)),
    #0c1722;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cyan);
}

.tour-project-copy {
  min-width: 0;
}

.tour-project-row h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #f1f7fb;
}

.tour-project-row p {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: #6a7f90;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tour-project-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 999px;
  background: rgba(12, 19, 27, 0.9);
  font-family: var(--mono);
  font-size: 9px;
  color: #7d95a7;
}

.tour-project-tag.accent {
  border-color: rgba(0, 207, 219, 0.32);
  background: rgba(0, 207, 219, 0.08);
  color: #8ce7ee;
}

.tour-project-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tour-project-launchers,
.tour-project-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tour-project-launchers {
  padding-top: 2px;
}

.tour-project-launcher-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tour-project-launcher-group.secondary {
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(28, 42, 58, 0.9);
}

.tour-project-utility {
  padding-top: 11px;
  border-top: 1px solid rgba(28, 42, 58, 0.9);
}

.tour-project-body {
  display: none;
  padding-top: 2px;
}

.tour-project-card.expanded .tour-project-body {
  display: block;
  animation: sceneFade 0.18s ease;
}

.tour-project-panels {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
}

.tour-project-panel {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background: rgba(8, 15, 22, 0.88);
}

.tour-project-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: #6a8192;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-project-panel-count {
  color: #8aa1b2;
}

.tour-project-mini-table {
  display: grid;
  gap: 6px;
}

.tour-project-mini-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.95fr;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: #8fa6b7;
}

.tour-project-mini-row.header {
  color: #5f7486;
}

.tour-project-mini-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-project-mini-stack {
  display: grid;
  gap: 8px;
}

.tour-project-mini-item {
  display: grid;
  gap: 3px;
}

.tour-project-mini-item strong,
.tour-project-mini-empty {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #d7e7ef;
}

.tour-project-mini-item span {
  font-family: var(--mono);
  font-size: 9px;
  color: #738a9b;
  line-height: 1.45;
}

.tour-project-mini-empty {
  color: #738a9b;
}

.tour-project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid rgba(33, 49, 67, 0.95);
  border-radius: 8px;
  background: rgba(14, 22, 31, 0.95);
  color: #7c95a7;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.tour-project-btn:hover,
.tour-project-btn:focus-visible,
.tour-project-btn.active,
.tour-project-btn[aria-pressed="true"] {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.1);
  color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0, 207, 219, 0.04);
}

.tour-project-btn:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.tour-project-btn-icon {
  min-width: 30px;
  padding: 6px 8px;
}

.tour-project-btn-claude {
  border-color: rgba(240, 160, 96, 0.30);
  background: rgba(240, 160, 96, 0.10);
  color: #f0a060;
}

.tour-project-btn-codex {
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.10);
  color: #2dd4bf;
}

.tour-project-btn-gemini {
  border-color: rgba(129, 140, 248, 0.28);
  background: rgba(129, 140, 248, 0.10);
  color: #818cf8;
}

.tour-project-btn-workspace {
  border-color: rgba(88, 182, 255, 0.45);
  background: rgba(88, 182, 255, 0.16);
  color: #58b6ff;
  font-weight: 700;
  padding: 6px 16px;
  box-shadow: 0 0 10px rgba(88, 182, 255, 0.14);
}

.tour-project-btn-workspace:hover,
.tour-project-btn-workspace:focus-visible,
.tour-project-btn-workspace[aria-pressed="true"] {
  border-color: rgba(88, 182, 255, 0.65);
  background: rgba(88, 182, 255, 0.24);
  color: #a8d8ff;
  box-shadow: 0 0 16px rgba(88, 182, 255, 0.25);
  transform: translateY(-1px);
}

.tour-project-btn-primary {
  border-color: rgba(0, 207, 219, 0.28);
  background: rgba(0, 207, 219, 0.14);
  color: #8ce7ee;
}

.tour-project-btn-good {
  border-color: rgba(42, 154, 114, 0.3);
  background: rgba(42, 154, 114, 0.14);
  color: #9cdebf;
}

.tour-project-btn-danger {
  border-color: rgba(182, 72, 86, 0.32);
  background: rgba(104, 30, 42, 0.32);
  color: #ffc0c8;
}

.tour-project-utility .tour-project-btn:not(.tour-project-btn-danger),
.tour-project-card-actions .tour-project-btn {
  background: rgba(12, 19, 27, 0.9);
  color: #698294;
}

.tour-project-utility .tour-project-btn:not(.tour-project-btn-danger):hover,
.tour-project-utility .tour-project-btn:not(.tour-project-btn-danger):focus-visible,
.tour-project-utility .tour-project-btn:not(.tour-project-btn-danger).active,
.tour-project-utility .tour-project-btn:not(.tour-project-btn-danger)[aria-pressed="true"],
.tour-project-card-actions .tour-project-btn:hover,
.tour-project-card-actions .tour-project-btn:focus-visible,
.tour-project-card-actions .tour-project-btn.active,
.tour-project-card-actions .tour-project-btn[aria-pressed="true"] {
  color: var(--cyan);
}

.tour-project-util-label {
  margin-right: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f7486;
}

.tour-project-util-sep {
  width: 1px;
  height: 15px;
  margin: 0 2px;
  background: rgba(28, 42, 58, 0.9);
}

.tour-toolbar-chip,
.tour-preview-tab,
.tour-tab,
.tour-planner-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: rgba(17, 24, 32, 0.9);
  font-family: var(--mono);
  font-size: 10px;
  color: #7690a2;
}

.tour-terminal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-terminal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(74, 146, 98, 0.28);
  border-radius: 9px;
  background: rgba(8, 20, 13, 0.92);
  color: #7fb794;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tour-terminal-tab:hover,
.tour-terminal-tab:focus-visible,
.tour-terminal-tab.active,
.tour-terminal-tab[aria-pressed="true"] {
  border-color: rgba(110, 255, 160, 0.32);
  background: rgba(72, 255, 146, 0.08);
  color: #d7ffe2;
}

.tour-terminal-tab:focus-visible {
  outline: 1px solid #72ff9c;
  outline-offset: 2px;
}

.tour-terminal-health {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #456153;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.tour-terminal-health.live {
  background: #7dffab;
  box-shadow: 0 0 8px rgba(125, 255, 171, 0.45);
}

.tour-terminal-health.wait {
  background: #d6b36c;
  box-shadow: 0 0 8px rgba(214, 179, 108, 0.3);
}

.tour-terminal-tab-label {
  min-width: 0;
  white-space: nowrap;
}

.tour-terminal-meter {
  position: relative;
  width: 42px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(25, 50, 33, 0.95);
}

.tour-terminal-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #47d97c, #9effbc);
  box-shadow: 0 0 8px rgba(102, 255, 163, 0.25);
}

.tour-terminal-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tour-terminal-session-head strong {
  display: block;
  font-size: 13px;
  color: #effff3;
}

.tour-terminal-session-sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: #6f9a7b;
}

.tour-terminal-session-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tour-terminal-session-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(74, 146, 98, 0.26);
  border-radius: 999px;
  background: rgba(8, 20, 13, 0.92);
  font-family: var(--mono);
  font-size: 9px;
  color: #88bc98;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-terminal-session-pill.live {
  border-color: rgba(110, 255, 160, 0.28);
  color: #b2ffca;
}

.tour-terminal-window {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 15px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  color: #98f5b5;
  background:
    linear-gradient(rgba(20, 255, 126, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 255, 126, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(56, 255, 156, 0.09), transparent 38%),
    #07110b;
  background-size: 100% 3px, 3px 100%, 100% 100%, 100% 100%;
  text-shadow: 0 0 6px rgba(80, 255, 160, 0.16);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45);
}

.tour-terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 90%,
    rgba(0, 0, 0, 0.15)
  );
  pointer-events: none;
}

.tour-terminal-window::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.tour-terminal-body {
  display: flex;
  min-height: 0;
  border-top: 1px solid rgba(74, 146, 98, 0.2);
}

.tour-terminal-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 42px;
  padding: 8px 4px;
  border-left: 1px solid rgba(74, 146, 98, 0.2);
  background: #08150d;
  flex-shrink: 0;
  overflow-y: auto;
}

.tour-terminal-tool {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(80, 180, 110, 0.12);
  border-radius: 7px;
  background: rgba(16, 30, 20, 0.9);
  color: #7fca95;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.tour-terminal-tool:hover,
.tour-terminal-tool:focus-visible {
  background: rgba(60, 255, 140, 0.08);
  border-color: rgba(60, 255, 140, 0.25);
  color: #d7ffe2;
  transform: translateX(-1px);
}

.tour-terminal-tool:focus-visible {
  outline: 1px solid #72ff9c;
  outline-offset: 2px;
}

.tour-terminal-tool.accent {
  background: rgba(60, 255, 140, 0.12);
  border-color: rgba(60, 255, 140, 0.28);
  color: #a6ffc3;
}

.tour-terminal-tool.utility {
  color: #6faa7f;
}

.tour-terminal-tool-sep {
  width: 20px;
  height: 1px;
  margin: 4px 0;
  background: rgba(74, 146, 98, 0.22);
  flex-shrink: 0;
}

.tour-terminal-line {
  color: #8fe6a9;
}

.tour-terminal-line.dim {
  color: #4f8e63;
}

.tour-terminal-line.accent {
  color: #c2ffd3;
}

.tour-terminal-line.divider {
  color: #2c5a3a;
}

.tour-terminal-prompt {
  color: #72ff9c;
}

.tour-terminal-tag {
  color: #b0ffd0;
}

.tour-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--cyan);
  vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}

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

.tour-preview-window {
  overflow: hidden;
}

.tour-browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(28, 42, 58, 0.9);
  background: #09131c;
}

.tour-browser-dots {
  display: flex;
  gap: 5px;
}

.tour-browser-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #203243;
}

.tour-browser-url {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  color: #6a8091;
}

.tour-browser-status {
  font-family: var(--mono);
  font-size: 9px;
  color: #8dd6ba;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-browser-canvas {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.tour-browser-hero {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(0, 207, 219, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.08), rgba(10, 39, 80, 0.18)),
    #0b1620;
}

.tour-browser-kicker {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tour-browser-hero strong {
  font-size: 18px;
  line-height: 1.25;
}

.tour-browser-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.tour-browser-card {
  min-height: 86px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    linear-gradient(135deg, rgba(10, 39, 80, 0.28), rgba(0, 207, 219, 0.08)),
    #0d1822;
}

.tour-browser-card.tall {
  min-height: 138px;
}

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

.tour-panel-card,
.tour-cli-card,
.tour-side-card {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.tour-panel-card.wide {
  grid-column: 1 / -1;
}

.tour-panel-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.tour-panel-card strong,
.tour-cli-card strong,
.tour-side-card strong {
  font-size: 14px;
  color: #eff7fb;
}

.tour-panel-card p,
.tour-cli-card p,
.tour-panel-note {
  font-size: 12px;
  color: #6e8495;
  line-height: 1.6;
}

.tour-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}

.tour-mini-list span {
  padding: 5px 7px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: rgba(17, 24, 32, 0.9);
  font-family: var(--mono);
  font-size: 10px;
  color: #748c9d;
}

.tour-cli-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tour-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
  gap: 12px;
  flex: 1;
}

.tour-ai-panel {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
}

.tour-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-ai-head strong {
  font-size: 14px;
}

.tour-ai-mode {
  margin-left: 8px;
  padding: 4px 7px;
  border: 1px solid rgba(0, 207, 219, 0.24);
  border-radius: 999px;
  background: rgba(0, 207, 219, 0.08);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.tour-task-lights {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tour-task-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #314354;
}

.tour-task-light.active {
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 207, 219, 0.35);
}

.tour-chat-feed {
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  overflow-y: auto;
  align-content: start;
}

.tour-chat-msg {
  padding: 10px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}

.tour-chat-msg.user {
  background: rgba(10, 39, 80, 0.32);
  color: #d8ebff;
}

.tour-chat-msg.assistant {
  background: rgba(17, 24, 32, 0.9);
  color: #c5d8e5;
}

.tour-chat-msg.system {
  background: rgba(12, 29, 22, 0.78);
  color: #9cc7b1;
}

.tour-chat-compose {
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background: #09131c;
  font-size: 12px;
  color: #597082;
}

.tour-chat-compose-text,
.tour-ai-status-text {
  min-width: 0;
  flex: 1;
}

.tour-chat-compose-text {
  display: block;
  min-height: 1.4em;
  color: #9fb6c6;
}

.tour-chat-msg.thinking {
  background: rgba(12, 29, 22, 0.58);
  color: #9cc7b1;
  font-style: italic;
}

.tour-workspace-side {
  display: grid;
  gap: 12px;
}

.tour-side-list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.tour-side-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #8da2b2;
}

.tour-status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
}

.tour-status-dot.live {
  background: #78d9b4;
}

.tour-status-dot.quiet {
  background: #4b6071;
}

.tour-workspace-shell {
  display: grid;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.tour-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.06), rgba(10, 39, 80, 0.12)),
    rgba(8, 15, 22, 0.92);
}

.tour-workspace-kicker,
.tour-field-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f8799;
}

.tour-workspace-heading {
  font-size: 15px;
  font-weight: 700;
  color: #f3fbff;
}

.tour-workspace-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tour-workspace-chip,
.tour-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: rgba(10, 18, 26, 0.9);
  font-family: var(--mono);
  font-size: 9px;
  color: #7790a2;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.tour-workspace-chip.live {
  border-color: rgba(42, 154, 114, 0.3);
  color: #8ed5ba;
}

.tour-inline-btn {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tour-inline-btn:hover,
.tour-inline-btn:focus-visible,
.tour-inline-btn.active {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.08);
  color: var(--cyan);
}

.tour-inline-btn:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.tour-inline-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tour-inline-count {
  color: #6f8799;
  font-weight: 400;
}

.tour-inline-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #6f8799;
  line-height: 1.45;
}

.tour-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.tour-workspace-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 11px;
  background: rgba(10, 18, 26, 0.9);
  color: #7690a2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.tour-workspace-tab:hover,
.tour-workspace-tab:focus-visible,
.tour-workspace-tab.active,
.tour-workspace-tab[aria-pressed="true"] {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.08);
  color: #e1f5fb;
  transform: translateY(-1px);
}

.tour-workspace-tab:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.tour-workspace-tab-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 9px;
  background: #0a141d;
  font-family: var(--mono);
  font-size: 9px;
  color: #84dce3;
  letter-spacing: 0.08em;
}

.tour-workspace-tab.active .tour-workspace-tab-icon,
.tour-workspace-tab:hover .tour-workspace-tab-icon,
.tour-workspace-tab[aria-pressed="true"] .tour-workspace-tab-icon {
  background: var(--cyan);
  border-color: rgba(0, 207, 219, 0.5);
  color: var(--navy);
}

.tour-workspace-tab-copy {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tour-workspace-tab-copy strong {
  font-size: 11px;
  line-height: 1.1;
}

.tour-workspace-tab-copy span {
  display: none;
}


.tour-workspace-panels {
  position: relative;
  min-height: 560px;
  height: 560px;
}

.tour-workspace-panel {
  display: none;
  height: 100%;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%),
    rgba(10, 18, 26, 0.94);
  animation: sceneFade 0.18s ease;
}

.tour-workspace-panel.active {
  display: block;
}

.tour-docs-layout,
.tour-inbox-layout,
.tour-command-grid {
  display: grid;
  gap: 12px;
}

.tour-docs-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  padding: 14px;
}

.tour-docs-sidebar,
.tour-docs-editor,
.tour-inbox-card,
.tour-inbox-editor,
.tour-board-shell,
.tour-command-shell,
.tour-delib-shell,
.tour-ai-shell {
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 11px;
  background: rgba(8, 15, 22, 0.88);
}

.tour-docs-sidebar,
.tour-docs-editor,
.tour-inbox-card,
.tour-inbox-editor,
.tour-delib-shell,
.tour-ai-shell {
  overflow: hidden;
}

.tour-board-shell,
.tour-command-shell {
  overflow: auto;
}

.tour-docs-sidebar {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.tour-docs-side-head,
.tour-inbox-card-head,
.tour-board-top,
.tour-command-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-docs-side-head,
.tour-inbox-card-head {
  margin-bottom: 2px;
}

.tour-docs-side-head strong,
.tour-docs-editor strong,
.tour-inbox-card-head strong,
.tour-board-top strong,
.tour-command-card-head strong,
.tour-delib-title,
.tour-ai-title {
  color: #eef8fc;
}

.tour-docs-group {
  display: grid;
  gap: 6px;
}

.tour-docs-group-label,
.tour-inbox-group-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #6f8799;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tour-docs-item,
.tour-inbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 9px;
  background: rgba(10, 18, 26, 0.9);
  color: #88a0b1;
  font-family: var(--mono);
  font-size: 9.5px;
  text-align: left;
  cursor: pointer;
}

.tour-docs-item.active,
.tour-inbox-item.active {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.08);
  color: #def4fb;
}

.tour-docs-editor {
  display: flex;
  flex-direction: column;
}

.tour-docs-toolbar,
.tour-ai-header,
.tour-delib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(28, 42, 58, 0.9);
}

.tour-docs-toolbar-tabs,
.tour-docs-toolbar-actions,
.tour-ai-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tour-docs-filename {
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: #cfe1eb;
}

.tour-docs-body,
.tour-board-shell,
.tour-command-shell {
  padding: 12px;
}

.tour-docs-body {
  display: grid;
  gap: 7px;
}

.tour-docs-line {
  font-size: 12px;
  color: #b9ceda;
  line-height: 1.55;
}

.tour-docs-line.heading,
.tour-docs-line.subheading {
  font-weight: 700;
  color: #f2fbff;
}

.tour-docs-line.dim,
.tour-command-log,
.tour-command-transcript,
.tour-board-card-foot,
.tour-inbox-item-detail {
  color: #6e8798;
}

.tour-docs-line.divider {
  color: #243446;
}

.tour-docs-line.bullet {
  padding-left: 14px;
  position: relative;
}

.tour-docs-line.bullet::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.tour-inbox-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  padding: 14px;
}

.tour-inbox-left {
  display: grid;
  gap: 12px;
}

.tour-inbox-card,
.tour-inbox-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.tour-field-row {
  display: flex;
  gap: 10px;
}

.tour-field-row.compact {
  max-width: 160px;
}

.tour-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.tour-field-box {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  font-size: 11px;
  color: #c0d5df;
  line-height: 1.5;
}

.tour-field-box.short {
  max-width: 118px;
}

.tour-field-box.tall {
  align-items: flex-start;
  min-height: 58px;
}

.tour-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-inbox-item {
  justify-content: flex-start;
}

.tour-inbox-item-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 207, 219, 0.08);
  color: var(--cyan);
  font-size: 11px;
}

.tour-inbox-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tour-inbox-item-title,
.tour-board-card-top strong,
.tour-command-worker-copy strong {
  font-size: 11px;
  color: #edf8fc;
}

.tour-inbox-badge,
.tour-board-status,
.tour-delib-round {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 999px;
  background: rgba(10, 18, 26, 0.9);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-inbox-badge.open,
.tour-board-status.live {
  color: #9ed0ff;
}

.tour-inbox-badge.in-plan {
  color: #93dcb7;
}

.tour-inbox-badge.done,
.tour-board-status.done {
  color: #8fe1e8;
}

.tour-ai-shell,
.tour-delib-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tour-ai-title-row,
.tour-delib-title-wrap,
.tour-delib-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-ai-title {
  font-size: 14px;
  font-weight: 700;
}

.tour-ai-controls,
.tour-ai-statusbar,
.tour-delib-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-ai-controls {
  margin: 12px 12px 0;
}

.tour-ai-control-select {
  min-width: 0;
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  font-family: var(--mono);
  font-size: 10px;
  color: #bed4df;
}

.tour-ai-context-meter,
.tour-command-context {
  width: 60px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(36, 52, 70, 0.9);
  flex-shrink: 0;
}

.tour-ai-context-meter span,
.tour-command-context span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(0, 207, 219, 0.78);
}

.tour-chat-feed.expanded {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  overflow-y: auto;
}

.tour-chat-msg code,
.tour-delib-statusbar code {
  font-family: var(--mono);
  font-size: 11px;
  color: #d8eef4;
}

.tour-ai-statusbar,
.tour-delib-statusbar {
  margin: 0 12px 8px;
  padding: 8px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background: #09131c;
  font-size: 11px;
  color: #89a1b2;
}

.tour-chat-compose.advanced {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 10px;
  min-height: 54px;
}

.tour-board-shell {
  display: grid;
  gap: 12px;
  height: 100%;
  align-content: start;
}

.tour-board-top {
  padding-bottom: 2px;
}

.tour-board-add,
.tour-command-flow,
.tour-command-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-board-groups {
  display: grid;
  gap: 12px;
}

.tour-board-group {
  display: grid;
  gap: 8px;
}

.tour-board-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 9px;
  background: rgba(9, 19, 28, 0.92);
  font-family: var(--mono);
  font-size: 9.5px;
  color: #88a0b1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-board-card {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background: rgba(10, 18, 26, 0.9);
}

.tour-board-card.compact {
  gap: 6px;
}

.tour-board-card-top,
.tour-board-card-mid,
.tour-board-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-board-card-mid {
  align-items: flex-start;
  font-size: 11px;
  color: #afc4cf;
  line-height: 1.5;
}

.tour-board-card-foot {
  font-family: var(--mono);
  font-size: 9px;
}

.tour-command-shell {
  display: grid;
  gap: 12px;
  height: 100%;
  align-content: start;
}

.tour-command-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 2px;
}

.tour-command-flow span,
.tour-command-mode {
  padding: 6px 9px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  font-family: var(--mono);
  font-size: 9.5px;
  color: #86a0b2;
}

button.tour-command-mode {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.tour-command-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tour-command-mode {
  display: grid;
  gap: 4px;
}

.tour-command-mode.active {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.08);
}

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

.tour-command-mode-note,
.tour-command-capacity {
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  font-size: 10px;
  line-height: 1.5;
  color: #9bb0bf;
}

.tour-command-workers-list,
.tour-command-task-list,
.tour-command-log-list {
  display: grid;
  gap: 8px;
}

.tour-command-add-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px dashed rgba(0, 207, 219, 0.28);
  border-radius: 10px;
  background: rgba(0, 207, 219, 0.05);
}

.tour-command-plus {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 207, 219, 0.25);
  border-radius: 10px;
  background: rgba(8, 18, 26, 0.96);
  color: var(--cyan);
  font-size: 18px;
  line-height: 1;
}

.tour-command-select {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  color: #d6e6ef;
  font-family: var(--mono);
  font-size: 10px;
}

.tour-command-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  background: rgba(10, 18, 26, 0.9);
}

.tour-command-worker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tour-command-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #49606f;
}

.tour-command-dot.live {
  background: #78d9b4;
}

.tour-command-dot.busy {
  background: var(--cyan);
}

.tour-command-dot.idle {
  background: #d5aa61;
}

.tour-command-worker-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tour-command-worker-copy span,
.tour-command-task,
.tour-command-log,
.tour-command-transcript {
  font-size: 10px;
  line-height: 1.5;
}

.tour-command-task {
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  color: #c2d7e2;
}

.tour-command-card.transcript {
  align-content: start;
}

.tour-delib-header {
  align-items: flex-start;
}

.tour-delib-title {
  font-size: 14px;
  font-weight: 700;
}

.tour-delib-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.tour-delib-badges span,
.tour-delib-round {
  color: #8adfe7;
}

.tour-delib-badges span {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 999px;
  background: rgba(10, 18, 26, 0.9);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tour-delib-messages {
  display: grid;
  gap: 9px;
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.tour-delib-msg {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.55;
}

.tour-delib-msg p {
  color: #c1d5df;
}

.tour-delib-msg.claude {
  background: rgba(39, 21, 58, 0.5);
}

.tour-delib-msg.codex {
  background: rgba(10, 39, 80, 0.32);
}

.tour-delib-msg.gemini {
  background: rgba(13, 35, 47, 0.82);
}

.tour-delib-msg.synthesis {
  background: rgba(12, 29, 22, 0.78);
}

.tour-delib-empty {
  padding: 10px 11px;
  border: 1px dashed rgba(72, 93, 112, 0.9);
  border-radius: 10px;
  background: rgba(9, 19, 28, 0.9);
  font-size: 11px;
  line-height: 1.55;
  color: #8ca3b5;
}

.tour-delib-question {
  font-family: var(--mono);
  color: #d7e7ef;
}

.tour-delib-input {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.tour-detail {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  padding: 18px 16px;
  overflow: auto;
  background: #081018;
  border-left: 1px solid var(--border);
}

.tour-detail-step,
.tour-detail-label,
.tour-proof-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-detail-step {
  color: #6a8192;
}

.tour-detail-label {
  color: var(--cyan);
}

.tour-detail h3 {
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fbfeff;
}

.tour-detail p {
  font-size: 13px;
  color: #8aa1b2;
  line-height: 1.7;
}

.tour-detail-list {
  display: grid;
  gap: 10px;
  list-style: none;
}

.tour-detail-list li {
  position: relative;
  padding-left: 15px;
  font-size: 12px;
  color: #c5d7e3;
  line-height: 1.6;
}

.tour-detail-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.tour-detail-proof {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(0, 207, 219, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.04), rgba(10, 39, 80, 0.12)),
    #0a141d;
}

.tour-proof-label {
  display: block;
  margin-bottom: 6px;
  color: #6f8798;
}

.tour-detail-proof p {
  color: #d0e0ea;
}

.tour-detail-progress {
  display: grid;
  gap: 8px;
}

.tour-detail-progress[hidden],
.tour-detail-trust[hidden] {
  display: none !important;
}

.tour-progress-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f8798;
}

.tour-progress-pills {
  display: grid;
  gap: 7px;
}

.tour-progress-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(28, 42, 58, 0.95);
  border-radius: 11px;
  background: rgba(10, 18, 26, 0.72);
  color: #708899;
  font-size: 11px;
}

.tour-progress-pill strong {
  color: #d3e2eb;
  font-size: 12px;
}

.tour-progress-pill.active {
  border-color: rgba(0, 207, 219, 0.32);
  background: rgba(0, 207, 219, 0.08);
}

.tour-progress-pill.active strong,
.tour-progress-pill.active {
  color: #f4fbff;
}

.tour-progress-pill.done {
  border-color: rgba(42, 154, 114, 0.3);
}

.tour-progress-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(17, 24, 32, 0.95);
  border: 1px solid rgba(28, 42, 58, 0.95);
  font-family: var(--mono);
  font-size: 9px;
}

.tour-detail-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-detail-trust span {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(28, 42, 58, 0.95);
  border-radius: 999px;
  background: rgba(11, 19, 27, 0.94);
  font-family: var(--mono);
  font-size: 9px;
  color: #88a1b2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-guide-bubble {
  position: absolute;
  top: 112px;
  left: 210px;
  width: 250px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(0, 207, 219, 0.28);
  border-radius: 14px;
  background: rgba(6, 14, 21, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 207, 219, 0.06);
  pointer-events: none;
  z-index: 46;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.tour-guide-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tour-guide-bubble::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(0, 207, 219, 0.28);
  border-bottom: 1px solid rgba(0, 207, 219, 0.28);
  background: rgba(6, 14, 21, 0.96);
  transform: rotate(45deg);
}

.tour-guide-bubble-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-guide-bubble p {
  min-height: 48px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #dcecf5;
}

.tour-demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 34px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.18s ease;
}

.tour-demo-cursor.visible {
  opacity: 1;
}

.tour-demo-cursor.clicking .tour-demo-cursor-arrow {
  transform-origin: 6px 6px;
  animation: tourCursorClick 0.3s ease;
}

.tour-demo-cursor-shadow {
  position: absolute;
  left: 7px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(7px);
}

.tour-demo-cursor-arrow {
  position: absolute;
  inset: 0;
}

.tour-demo-cursor-arrow::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 12px solid #f7fcff;
  border-top: 18px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35));
}

.tour-demo-cursor-arrow::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  width: 4px;
  height: 11px;
  border-radius: 4px;
  background: #f7fcff;
  transform: rotate(-28deg);
  box-shadow: 0 0 0 1px rgba(4, 12, 18, 0.08);
}

@keyframes tourCursorClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.section {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}

.section h2 {
  margin-bottom: 44px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.026em;
  color: #fff;
  line-height: 1.18;
}

.spec-list {
  border-top: 1px solid var(--border);
}

.spec-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.spec-key {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.spec-val {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.72;
}

.domain-bridge-section {
  background:
    linear-gradient(180deg, rgba(45, 212, 191, 0.055), rgba(9, 13, 18, 0) 54%),
    #090d12;
}

.domain-bridge-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 34px;
}

.domain-bridge-head h2 {
  margin-bottom: 0;
}

.domain-bridge-lead,
.domain-bridge-detail p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.72;
}

.domain-bridge-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.domain-step {
  min-width: 0;
  padding: 24px 22px 26px;
  border-right: 1px solid var(--border);
}

.domain-step:last-child {
  border-right: none;
}

.domain-step-index,
.domain-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: #47c985;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.domain-step h3 {
  margin-bottom: 12px;
  color: #f4fbff;
  font-size: 17px;
  line-height: 1.25;
}

.domain-step p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.68;
}

.domain-step code,
.domain-install code {
  font-family: var(--mono);
  color: #d9f7f4;
}

.domain-bridge-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}

.domain-install {
  min-width: 0;
}

.domain-install code {
  display: block;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 8px;
  background: rgba(5, 12, 18, 0.78);
  color: #bcefe7;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.product-family-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(0, 207, 219, 0.1), transparent 31%),
    radial-gradient(circle at 88% 88%, rgba(71, 201, 133, 0.08), transparent 30%),
    #090d12;
}

.product-family-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.product-family-section .container {
  position: relative;
  z-index: 1;
}

.product-family-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 38px;
}

.product-family-head h2 {
  max-width: 720px;
  margin-bottom: 0;
}

.product-family-lead {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.75;
}

.product-family-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-family-card {
  position: relative;
  display: flex;
  min-height: 306px;
  flex-direction: column;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 17, 24, 0.9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.17);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.product-family-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--cyan);
  opacity: 0.8;
}

.product-family-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -82px;
  right: -70px;
  border-radius: 50%;
  background: rgba(0, 207, 219, 0.1);
  filter: blur(4px);
}

.product-family-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(13, 21, 29, 0.96);
}

.product-family-card-canvas::before {
  background: linear-gradient(90deg, #00cfdb, #5d8dff);
}

.product-family-card-canvas::after {
  background: rgba(93, 141, 255, 0.11);
}

.product-family-card-unity::before {
  background: linear-gradient(90deg, #47c985, #a4e071);
}

.product-family-card-unity::after {
  background: rgba(71, 201, 133, 0.1);
}

.product-family-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 38px;
  font-family: var(--mono);
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-family-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #f4fbff;
  font-size: 28px;
  line-height: 1.1;
}

.product-family-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.72;
}

.product-family-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 12px;
  text-decoration: none;
}

.product-family-card-unity .product-family-link {
  color: #7ddeaa;
}

.product-family-link span {
  transition: transform 180ms ease;
}

.product-family-link:hover span,
.product-family-link:focus-visible span {
  transform: translateX(4px);
}

.product-proof-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.product-proof-row a {
  display: grid;
  grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 6px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.62);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}

.product-proof-row a:hover,
.product-proof-row a:focus-visible {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(12, 21, 29, 0.88);
}

.product-proof-row span {
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 3px;
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-proof-row strong {
  align-self: end;
  color: #edf8fb;
  font-size: 15px;
  font-weight: 600;
}

.product-proof-row small {
  align-self: start;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .product-family-head,
  .product-family-grid {
    grid-template-columns: 1fr;
  }

  .product-family-head {
    gap: 22px;
  }

  .product-family-card {
    min-height: 0;
  }

  .product-proof-row,
  .product-proof-row a {
    grid-template-columns: 1fr;
  }

  .product-proof-row a {
    gap: 8px;
  }

  .product-proof-row span {
    grid-row: auto;
    padding-top: 0;
  }
}

.positioning-section {
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.035), rgba(9, 13, 18, 0)),
    #090d12;
}

.positioning-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 54px;
  align-items: start;
}

.positioning-copy h2 {
  margin-bottom: 24px;
}

.positioning-copy p {
  max-width: 650px;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.72;
}

.positioning-copy .positioning-line {
  color: #d8edf5;
}

.context-efficiency-note {
  margin: 22px 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(45, 212, 191, 0.26);
  border-radius: 8px;
  background: rgba(45, 212, 191, 0.06);
}

.context-efficiency-note span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mint);
}

.positioning-copy .context-efficiency-note p {
  margin-bottom: 0;
  color: #cfe4ea;
}

.positioning-link {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(0, 207, 219, 0.32);
  border-radius: 8px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.positioning-link:hover {
  border-color: var(--cyan);
  background: rgba(0, 207, 219, 0.07);
}

.positioning-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.positioning-point {
  min-height: 132px;
  padding: 17px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(10, 18, 26, 0.74);
}

.positioning-point span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.positioning-point p {
  color: #9db4c2;
  font-size: 13px;
  line-height: 1.55;
}

.phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.phone-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.026em;
  color: #fff;
  line-height: 1.18;
}

.phone-lead {
  margin-bottom: 28px;
  font-size: 17px;
  color: #607080;
  line-height: 1.7;
}

.phone-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px;
  list-style: none;
}

.phone-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: #8aaabb;
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--cyan);
}

.phone-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #253040;
  line-height: 1.65;
}

.phone-visual {
  display: flex;
  justify-content: center;
}

.phone-frame {
  width: 240px;
  padding: 10px;
  border: 1px solid #1c2a3a;
  border-radius: 38px;
  background: #080d12;
  box-shadow:
    0 0 0 5px #0a1018,
    0 0 0 6px #141e28,
    0 24px 64px rgba(0, 0, 0, 0.6);
}

.phone-notch {
  width: 72px;
  height: 20px;
  margin: 0 auto 8px;
  border: 1px solid #1c2a3a;
  border-radius: 12px;
  background: #080d12;
}

.phone-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: #07101a;
  height: 420px;
}

/* Phone DOM screens — show/hide */
.pdom-screen {
  display: none;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
}

.pdom-screen.pdom-active {
  display: flex;
}

/* Phone DOM — projects screen */
.pdom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 9px;
  background: #0c1828;
  border-bottom: 1px solid #1e3550;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.pdom-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

.pdom-bar-title {
  color: #f4f8ff;
  letter-spacing: 0.04em;
  flex: 1;
}

.pdom-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px 0;
  flex: 1;
  overflow: hidden;
}

.pdom-card {
  border: 1px solid #1e3550;
  border-radius: 11px;
  background: #0c1828;
  padding: 9px 10px;
}

.pdom-card-open {
  border-color: rgba(240, 160, 96, 0.26);
  background: rgba(240, 160, 96, 0.04);
}

.pdom-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pdom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.pdom-meta {
  flex: 1;
  min-width: 0;
}

.pdom-name {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #f4f8ff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdom-pills {
  display: flex;
  gap: 4px;
}

.pdom-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}

.pdom-pill-dim {
  color: #3a5268;
  border-color: #1e3550;
  background: transparent;
}

.pdom-expand-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #2e4560;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.15s, color 0.12s;
  padding: 0;
}

.pdom-expand-btn:hover {
  color: #9aadbf;
}

.pdom-card-expanded .pdom-expand-btn {
  transform: rotate(180deg);
}

.pdom-card-body {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.pdom-card-expanded .pdom-card-body {
  display: flex;
}

.pdom-launcher-row,
.pdom-action-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.pdom-act-ws {
  color: #58b6ff !important;
  border-color: rgba(88,182,255,0.30) !important;
  background: rgba(88,182,255,0.08) !important;
}

.pdom-ws-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #3a5268;
  padding: 0;
  border: 1px solid #1e3550;
  border-radius: 7px;
  background: transparent;
}

.pdom-ws-glow {
  color: #58b6ff;
  border-color: rgba(88, 182, 255, 0.35);
  background: rgba(88, 182, 255, 0.08);
  box-shadow: 0 0 8px rgba(88, 182, 255, 0.2);
}

.pdom-session {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(240, 160, 96, 0.12);
}

.pdom-health {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pdom-health-run {
  background: #47c985;
  box-shadow: 0 0 5px rgba(71, 201, 133, 0.5);
}

.pdom-sid {
  font-family: var(--mono);
  font-size: 9px;
  color: #9aadbf;
  flex: 1;
}

.pdom-pid {
  font-family: var(--mono);
  font-size: 8.5px;
  color: #2e4560;
}

.pdom-actions {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}

.pdom-act {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid #1e3550;
  border-radius: 6px;
  background: transparent;
  color: #9aadbf;
}

.pdom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9px 0 11px;
  border-top: 1px solid #1e3550;
  background: #0c1828;
  flex-shrink: 0;
}

.pdom-nav-item {
  font-size: 14px;
  color: #2e4560;
  line-height: 1;
}

.pdom-nav-active {
  color: #58b6ff;
}

/* WS button — interactive cursor */
.pdom-ws-btn {
  cursor: pointer;
}

.pdom-ws-btn:hover {
  opacity: 0.8;
}

/* Workspace topbar */
.pdom-ws-topbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 10px 8px;
  background: #0c1828;
  border-bottom: 1px solid #1e3550;
  flex-shrink: 0;
}

.pdom-back-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #58b6ff;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.pdom-back-btn:hover {
  opacity: 0.75;
}

.pdom-ws-projname {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #f4f8ff;
  flex: 1;
}

.pdom-topbar-icon {
  font-size: 13px;
  color: #2e4560;
  flex-shrink: 0;
}

.pdom-topbar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #2e4560;
  flex-shrink: 0;
}

.pdom-bell-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  background: #d94f4f;
  color: #fff;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 700;
  padding: 0 2.5px;
  line-height: 10px;
  min-width: 10px;
  text-align: center;
}

/* Workspace bottom nav */
.pdom-ws-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px 2px 7px;
  border-top: 1px solid #1e3550;
  background: #0c1828;
  flex-shrink: 0;
}

.pdom-ws-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: #2e4560;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 7px;
  transition: color 0.12s;
  min-width: 28px;
}

.pdom-ws-nav-item.pdom-ws-active {
  color: #58b6ff;
}

.pdom-ws-nav-item:hover:not(.pdom-ws-active) {
  color: #4a7090;
}

.pdom-ws-nav-label {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Workspace content area */
.pdom-ws-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.pdom-ws-panel {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.pdom-ws-panel.pdom-active {
  display: flex;
}

/* AI panel: chat area grows, input bar pins to bottom */
.pdom-ws-panel-ai {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.pdom-ws-panel-ai .pdom-ai-session-bar {
  flex-shrink: 0;
  margin: 8px 8px 4px;
}

.pdom-ws-panel-ai .pdom-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 4px;
}

/* AI input bar */
.pdom-ai-input-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 7px;
  border-top: 1px solid #1a2f45;
  background: #080f1a;
  flex-shrink: 0;
}

.pdom-ai-input {
  flex: 1;
  background: #0d1c2c;
  border: 1px solid #1e3550;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: #3a5268;
  outline: none;
  min-width: 0;
}

.pdom-ai-send {
  width: 22px;
  height: 22px;
  background: rgba(88,182,255,0.10);
  border: 1px solid rgba(88,182,255,0.25);
  border-radius: 6px;
  color: #58b6ff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Inbox panel */
.pdom-inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(88,182,255,0.14);
  border-radius: 8px;
  background: rgba(88,182,255,0.04);
}

.pdom-inbox-item.pdom-inbox-read {
  border-color: #1e3550;
  background: transparent;
}

.pdom-inbox-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58b6ff;
  box-shadow: 0 0 4px rgba(88,182,255,0.5);
  flex-shrink: 0;
  margin-top: 2px;
}

.pdom-inbox-dot-read {
  background: #1e3550;
  box-shadow: none;
}

.pdom-inbox-sender {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: #58b6ff;
  margin-bottom: 2px;
}

.pdom-inbox-read .pdom-inbox-sender {
  color: #3a5268;
}

.pdom-inbox-text {
  font-family: var(--mono);
  font-size: 8.5px;
  color: #6a8faa;
  line-height: 1.3;
}

.pdom-inbox-read .pdom-inbox-text {
  color: #2e4560;
}

/* Docs panel */
.pdom-doc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid #1e3550;
  border-radius: 8px;
  background: #0c1828;
}

.pdom-doc-icon {
  flex-shrink: 0;
  color: #3a5268;
}

.pdom-doc-name {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #c8ddf0;
}

.pdom-doc-info {
  font-family: var(--mono);
  font-size: 8px;
  color: #2e4560;
  margin-top: 2px;
}

/* Delib panel */
.pdom-delib-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  color: #818cf8;
  margin-bottom: 2px;
}

.pdom-delib-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 4px rgba(129,140,248,0.5);
  flex-shrink: 0;
}

.pdom-delib-msg {
  padding: 6px 8px;
  border: 1px solid rgba(129,140,248,0.16);
  border-radius: 8px;
  background: rgba(129,140,248,0.05);
}

.pdom-delib-speaker {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  color: #818cf8;
  margin-bottom: 2px;
}

.pdom-delib-text {
  font-family: var(--mono);
  font-size: 8.5px;
  color: #8090b0;
  line-height: 1.35;
}

.pdom-delib-synthesis {
  font-family: var(--mono);
  font-size: 8px;
  color: #2e4560;
  padding-top: 6px;
  border-top: 1px solid #1a2f45;
  margin-top: 2px;
}

/* Task panel */
.pdom-task-group-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #2e4560;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pdom-task-card {
  border: 1px solid #1e3550;
  border-radius: 8px;
  background: #0c1828;
  padding: 7px 9px;
}

.pdom-task-done {
  opacity: 0.5;
}

.pdom-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.pdom-task-id {
  font-family: var(--mono);
  font-size: 9px;
  color: #58b6ff;
}

.pdom-task-status {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
}

.pdom-status-active {
  color: #47c985;
  background: rgba(71, 201, 133, 0.1);
  border-color: rgba(71, 201, 133, 0.24);
}

.pdom-status-pending {
  color: #f2bb55;
  background: rgba(242, 187, 85, 0.1);
  border-color: rgba(242, 187, 85, 0.24);
}

.pdom-status-done {
  color: #2e4560;
  background: transparent;
  border-color: #1e3550;
}

.pdom-task-title {
  font-family: var(--mono);
  font-size: 9px;
  color: #9aadbf;
  line-height: 1.4;
}

/* Command panel */
.pdom-cmd-summary {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pdom-cmd-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #1e3550;
  color: #9aadbf;
}

.pdom-cmd-active {
  color: #47c985;
  background: rgba(71, 201, 133, 0.08);
  border-color: rgba(71, 201, 133, 0.26);
}

.pdom-cmd-section-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #2e4560;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pdom-worker-card {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #1e3550;
  border-radius: 8px;
  background: #0c1828;
  padding: 7px 9px;
}

.pdom-worker-supervisor {
  border-color: rgba(240, 160, 96, 0.22);
  background: rgba(240, 160, 96, 0.04);
}

.pdom-worker-info {
  flex: 1;
  min-width: 0;
}

.pdom-worker-role {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: #9aadbf;
  margin-bottom: 2px;
}

.pdom-worker-supervisor .pdom-worker-role {
  color: #f0a060;
}

.pdom-worker-status {
  font-family: var(--mono);
  font-size: 8.5px;
  color: #2e4560;
}

.pdom-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pdom-progress-track {
  flex: 1;
  height: 4px;
  background: #1e3550;
  border-radius: 99px;
  overflow: hidden;
}

.pdom-progress-fill {
  height: 100%;
  background: #47c985;
  border-radius: 99px;
}

.pdom-progress-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #47c985;
  white-space: nowrap;
}

/* AI panel */
.pdom-ai-session-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(88, 182, 255, 0.14);
  border-radius: 8px;
  background: rgba(88, 182, 255, 0.04);
}

.pdom-ai-mode-pill {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  color: #f0a060;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(240, 160, 96, 0.1);
  border: 1px solid rgba(240, 160, 96, 0.22);
}

.pdom-ai-session-id {
  font-family: var(--mono);
  font-size: 9px;
  color: #47c985;
}

.pdom-chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.pdom-chat-msg {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid #1e3550;
  background: #0c1828;
}

.pdom-msg-planner {
  border-color: rgba(88, 182, 255, 0.18);
  background: rgba(88, 182, 255, 0.04);
}

.pdom-chat-role {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  color: #2e4560;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pdom-msg-planner .pdom-chat-role {
  color: #58b6ff;
}

.pdom-chat-text {
  font-family: var(--mono);
  font-size: 9px;
  color: #9aadbf;
  line-height: 1.5;
}

.pdom-msg-user .pdom-chat-text {
  color: #7a9bb0;
}


.scale-intro {
  max-width: 520px;
  margin-top: -28px;
  margin-bottom: 44px;
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.65;
}

.scale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--border);
}

.scale-card {
  padding: 40px 36px;
  background: var(--surface);
}

.scale-label {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.scale-card h3 {
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 600;
  color: #e4f0f8;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.scale-card p {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.72;
}

.scale-card p:last-child {
  margin-bottom: 0;
}

.scale-aside {
  color: #324151 !important;
  font-style: italic;
}

.trust-strip {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  background: #090d12;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trust-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #314152;
}

.trust-value {
  font-size: 13.5px;
  color: #7090a0;
  font-weight: 500;
  line-height: 1.45;
}

.footer {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.footer-brand .logo-mark {
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 8px;
}

.footer-links {
  display: flex;
  gap: 18px;
  margin-left: auto;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-dim);
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-note {
  width: 100%;
  margin-top: -8px;
  font-family: var(--mono);
  font-size: 11px;
  color: #3a5268;
  line-height: 1.6;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}


.tour-chat-compose-text,
.tour-delib-question {
  white-space: pre-wrap;
  word-break: break-word;
}

.tour-chat-compose-text {
  display: block;
  min-width: 0;
  flex: 1;
  min-height: 1.4em;
  max-height: 2.9em;
  overflow-y: auto;
  padding-right: 2px;
  color: #d5e7f1;
}

.tour-chat-compose-text:empty::before,
.tour-delib-question:empty::before {
  content: attr(data-placeholder);
  color: #7f95a6;
}

.tour-delib-question {
  align-items: flex-start;
  min-height: 88px;
  max-height: 88px;
  overflow-y: auto;
}

.tour-board-group {
  display: grid;
  gap: 8px;
}

.tour-board-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 9px;
  background: rgba(9, 19, 28, 0.92);
  font-family: var(--mono);
  font-size: 10px;
  color: #88a0b1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tour-board-group-head:hover,
.tour-board-group-head:focus-visible,
.tour-board-group-head.active {
  border-color: rgba(0, 207, 219, 0.28);
  background: linear-gradient(90deg, rgba(0, 207, 219, 0.12), rgba(9, 19, 28, 0.94) 60%);
  color: #dff5fb;
}

.tour-board-group-head:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

.tour-board-group-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-board-group-caret {
  color: #6d8597;
  transition: transform 0.15s ease;
}

.tour-board-group.expanded .tour-board-group-caret {
  transform: rotate(90deg);
}

.tour-board-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5e7385;
  flex-shrink: 0;
}

.tour-board-group-dot.deliberation { background: #41c48a; }
.tour-board-group-dot.design { background: #ef6b96; }
.tour-board-group-dot.orchestrator { background: #68a5ff; }
.tour-board-group-dot.orchestrator-test { background: #8db84e; }
.tour-board-group-dot.phone-app { background: #65c054; }
.tour-board-group-dot.planner { background: #ea5aa6; }
.tour-board-group-dot.readme { background: #b15cff; }
.tour-board-group-dot.release { background: #f0a444; }
.tour-board-group-dot.workspace { background: #8abf57; }
.tour-board-group-dot.uncategorized { background: #5f7384; }

.tour-board-group-name,
.tour-board-group-count {
  white-space: nowrap;
}

.tour-board-group-count {
  color: #7f96a7;
}

.tour-board-group-body {
  display: none;
  gap: 8px;
  padding: 0 0 0 14px;
}

.tour-board-group.expanded .tour-board-group-body {
  display: grid;
}

.tour-board-add .tour-field-box {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tour-board-shell::-webkit-scrollbar,
.tour-command-shell::-webkit-scrollbar,
.tour-chat-feed.expanded::-webkit-scrollbar,
.tour-delib-messages::-webkit-scrollbar,
.tour-chat-compose-text::-webkit-scrollbar,
.tour-delib-question::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tour-board-shell::-webkit-scrollbar-thumb,
.tour-command-shell::-webkit-scrollbar-thumb,
.tour-chat-feed.expanded::-webkit-scrollbar-thumb,
.tour-delib-messages::-webkit-scrollbar-thumb,
.tour-chat-compose-text::-webkit-scrollbar-thumb,
.tour-delib-question::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(78, 101, 118, 0.9);
}

.tour-board-shell,
.tour-command-shell,
.tour-chat-feed.expanded,
.tour-delib-messages,
.tour-chat-compose-text,
.tour-delib-question {
  scrollbar-color: rgba(78, 101, 118, 0.9) transparent;
}

@media (max-width: 1100px) {
  .tour-body {
    grid-template-columns: 164px minmax(0, 1fr);
  }

  .tour-detail {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    border-left: none;
  }
}

@media (max-width: 960px) {
  .nav-links {
    display: none;
  }

  .hero {
    padding: 72px 0 56px;
  }

  .spec-row {
    grid-template-columns: 170px 1fr;
    gap: 26px;
  }

  .positioning-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .domain-bridge-head,
  .domain-bridge-detail {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .domain-bridge-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .domain-step:nth-child(2) {
    border-right: none;
  }

  .domain-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .phone-grid,
  .scale-grid {
    grid-template-columns: 1fr;
  }

  .phone-visual {
    justify-content: flex-start;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-settings-grid,
  .tour-cli-grid,
  .tour-workspace-grid,
  .tour-project-panels {
    grid-template-columns: 1fr;
  }

  .tour-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tour-docs-layout,
  .tour-inbox-layout,
  .tour-command-grid,
  .tour-command-modes {
    grid-template-columns: 1fr;
  }

  .tour-command-hero,
  .tour-workspace-head {
    flex-direction: column;
  }

  .tour-workspace-chips {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .tour-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .tour-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .tour-brand {
    border-bottom: none;
    padding-bottom: 0;
  }

  .tour-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .tour-nav::-webkit-scrollbar {
    display: none;
  }

  .tour-nav-item {
    min-width: 176px;
  }

  .tour-rail-footer {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tour-workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }

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

  .hero-product,
  .tour-shell {
    min-width: 0;
  }

  .tour-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .tour-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tour-scenes {
    padding: 12px;
  }

  .tour-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .tour-terminal-session-head {
    flex-direction: column;
  }

  .tour-terminal-session-pills {
    justify-content: flex-start;
  }

  .tour-terminal-body {
    flex-direction: column;
  }

  .tour-terminal-toolbar {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 10px;
    border-left: none;
    border-top: 1px solid rgba(28, 42, 58, 0.9);
  }

  .tour-terminal-tool:hover,
  .tour-terminal-tool:focus-visible {
    transform: none;
  }

  .tour-terminal-tool-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
  }

  .tour-project-stats,
  .tour-browser-grid,
  .positioning-points,
  .domain-bridge-flow,
  .spec-row,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .domain-step,
  .domain-step:nth-child(2),
  .domain-step:nth-child(-n + 2) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .domain-step:last-child {
    border-bottom: none;
  }

  .tour-workspace-tabs {
    grid-template-columns: 1fr;
  }

  .tour-ai-controls,
  .tour-ai-statusbar,
  .tour-chat-compose.advanced,
  .tour-field-row,
  .tour-board-add,
  .tour-command-flow,
  .tour-inline-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .tour-ai-controls .tour-ai-control-select,
  .tour-board-add .tour-field-box,
  .tour-field-box.short {
    width: 100%;
    max-width: none;
  }

  .tour-delib-header {
    flex-direction: column;
  }

  .tour-delib-badges {
    margin-left: 0;
  }

  .tour-project-launcher-group.secondary {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .tour-nav-item {
    min-width: 158px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    margin-left: 0;
  }
}


@media (max-width: 900px) {
  .tour-topbar {
    align-items: flex-start;
  }

  .tour-topbar-actions {
    flex-direction: column;
    align-items: flex-end;
  }
}

@media (max-height: 950px), (max-width: 1500px) {
  .hero {
    padding: 12px 0 44px;
  }

  .hero-grid {
    gap: 22px;
  }

  .hero-copy h1,
  .hero-title {
    font-size: clamp(30px, 3.6vw, 46px);
    margin-bottom: 14px;
  }

  .hero-note {
    font-size: 10.5px;
  }

  .tour-topbar {
    padding: 9px 12px;
    font-size: 10px;
  }

  .tour-body {
    grid-template-columns: 148px minmax(0, 1fr) 228px;
    min-height: 620px;
    height: 620px;
  }

  .tour-rail {
    padding: 13px 12px;
    gap: 12px;
  }

  .tour-scenes {
    padding: 10px;
  }

  .tour-workspace-panels {
    min-height: 500px;
    height: 500px;
  }

  .tour-workspace-tabs {
    gap: 5px;
  }

  .tour-workspace-tab {
    padding: 7px 6px;
  }

  .tour-workspace-tab-icon {
    width: 26px;
    height: 26px;
  }
}



/* Docs / Inbox / Tasks fidelity additions */
.tour-select-wrap {
  display: flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 8px;
  background: #09131c;
  overflow: hidden;
}

.tour-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: #d6e6ef;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: lowercase;
}

.tour-select:focus {
  outline: none;
}

.tour-type-text {
  display: block;
  width: 100%;
  min-height: 1.35em;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d5e7f1;
}

.tour-type-text:empty::before {
  content: attr(data-placeholder);
  color: #7f95a6;
}

.tour-type-text-multiline {
  min-height: 3.7em;
}

.tour-docs-item span:last-child {
  color: #6f8799;
}

.tour-board-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tour-board-filter {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(28, 42, 58, 0.9);
  border-radius: 9px;
  background: rgba(9, 19, 28, 0.92);
  color: #88a0b1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tour-board-filter span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-board-filter strong {
  font-size: 14px;
  color: #f1f7fb;
}

.tour-board-filter:hover,
.tour-board-filter:focus-visible,
.tour-board-filter.active {
  border-color: rgba(0, 207, 219, 0.34);
  background: rgba(0, 207, 219, 0.08);
  color: #def4fb;
}

.tour-board-filter:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .tour-board-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Phone-only product tour (t-397) -------------------------- */

.ptour {
  display: none;
}

@media (max-width: 700px) {
  .tour-shell {
    display: none;
  }

  .ptour {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ptour-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 2px;
  }

  .ptour-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
  }

  .ptour-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
  }

  .ptour-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface3) 100%);
  }

  .ptour-chapter {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .ptour-num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--cyan);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 2px 9px;
    background: var(--surface2);
  }

  .ptour-label {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .ptour-title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
  }

  .ptour-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-dim);
  }

  .ptour-text code {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cyan);
  }

  .ptour-mock {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
  }

  /* chapter 01 - project card */
  .ptour-proj-head {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .ptour-proj-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(240, 160, 96, 0.3);
    background: rgba(240, 160, 96, 0.14);
    color: #f0a060;
    font-weight: 600;
  }

  .ptour-proj-meta strong {
    display: block;
    color: var(--text);
    font-size: 12px;
  }

  .ptour-tags {
    display: flex;
    gap: 5px;
    margin-top: 3px;
  }

  .ptour-tag {
    padding: 1px 7px;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    font-size: 9.5px;
  }

  .ptour-tag.accent {
    color: #f0a060;
    border-color: rgba(240, 160, 96, 0.24);
    background: rgba(240, 160, 96, 0.08);
  }

  .ptour-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ptour-chip {
    padding: 3px 10px;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
    font-size: 10.5px;
  }

  .ptour-chip.claude {
    color: #f0a060;
    border-color: rgba(240, 160, 96, 0.3);
    background: rgba(240, 160, 96, 0.1);
  }

  .ptour-chip.codex {
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(45, 212, 191, 0.1);
  }

  .ptour-chip.gemini {
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.28);
    background: rgba(129, 140, 248, 0.1);
  }

  .ptour-chip.run {
    color: #47c985;
    border-color: rgba(71, 201, 133, 0.28);
    background: rgba(71, 201, 133, 0.08);
  }

  .ptour-chip.ws {
    color: #58b6ff;
    border-color: rgba(88, 182, 255, 0.4);
    background: rgba(88, 182, 255, 0.14);
    font-weight: 700;
  }

  /* chapter 02 - terminal */
  .ptour-term-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ptour-term-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    font-size: 10px;
  }

  .ptour-term-tab.active {
    color: var(--text);
    border-color: rgba(0, 207, 219, 0.35);
    background: var(--cyan-lo);
  }

  .ptour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: none;
  }

  .ptour-dot.run {
    background: #47c985;
    box-shadow: 0 0 6px rgba(71, 201, 133, 0.6);
  }

  .ptour-dot.wait {
    background: #f0a060;
  }

  .ptour-term-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .ptour-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ptour-line.dim {
    color: var(--text-muted);
  }

  .ptour-line.accent {
    color: var(--cyan);
  }

  .ptour-prompt {
    color: #47c985;
    margin-right: 5px;
  }

  .ptour-cursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    background: var(--cyan);
    animation: ptourBlink 1.1s steps(1) infinite;
    vertical-align: text-bottom;
  }

  /* chapter 03 - workspace chat */
  .ptour-wsm-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }

  .ptour-wsm-tabs span {
    padding: 2px 9px;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    font-size: 9.5px;
  }

  .ptour-wsm-tabs span.active {
    color: var(--text);
    border-color: rgba(0, 207, 219, 0.35);
    background: var(--cyan-lo);
  }

  .ptour-bubble {
    max-width: 88%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: var(--sans);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text);
  }

  .ptour-bubble.user {
    align-self: flex-end;
    background: var(--surface2);
    border-color: var(--border-mid);
  }

  .ptour-bubble.ai {
    align-self: flex-start;
    background: rgba(0, 207, 219, 0.06);
    border-color: rgba(0, 207, 219, 0.22);
  }

  .ptour-wsm-compose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 10.5px;
  }

  .ptour-send {
    color: var(--cyan);
    border: 1px solid rgba(0, 207, 219, 0.35);
    border-radius: var(--r-sm);
    padding: 2px 10px;
    background: var(--cyan-lo);
    flex: none;
  }

  /* chapter 04 - command center */
  .ptour-worker {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
  }

  .ptour-worker.sup {
    border-color: rgba(0, 207, 219, 0.3);
  }

  .ptour-worker-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .ptour-worker-info strong {
    color: var(--text);
    font-size: 11px;
  }

  .ptour-worker-info span {
    font-size: 10px;
    color: var(--text-dim);
  }

  .ptour-prog {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .ptour-prog-track {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
  }

  .ptour-prog-fill {
    display: block;
    width: 60%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--cyan));
  }

  .ptour-prog-label {
    font-size: 10px;
    color: var(--text-dim);
    flex: none;
  }

  /* chapter 05 - deliberation */
  .ptour-delib-chips {
    display: flex;
    gap: 6px;
  }

  .ptour-delib-chips span {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-mid);
    font-size: 10px;
  }

  .ptour-delib-chips .claude {
    color: #f0a060;
    border-color: rgba(240, 160, 96, 0.3);
    background: rgba(240, 160, 96, 0.08);
  }

  .ptour-delib-chips .codex {
    color: #2dd4bf;
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(45, 212, 191, 0.08);
  }

  .ptour-delib-chips .gemini {
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.28);
    background: rgba(129, 140, 248, 0.08);
  }

  .ptour-delib-msg {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--sans);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-dim);
  }

  .ptour-delib-msg strong {
    color: var(--text);
    margin-right: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
  }

  .ptour-delib-syn {
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@keyframes ptourBlink {
  50% {
    opacity: 0;
  }
}

/* -- Workspace History subview (t-396) ------------------------ */

.tour-history-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.tour-history-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tour-history-top strong {
  color: var(--text);
  font-size: 14px;
}

.tour-history-day {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 2px;
}

.tour-history-day-count {
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: none;
}

.tour-history-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.tour-history-item.dim {
  opacity: 0.72;
}

.tour-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tour-history-task {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
  border: 1px solid rgba(0, 207, 219, 0.3);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--cyan-lo);
  flex: none;
}

.tour-history-title {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tour-history-agent {
  font-family: var(--mono);
  font-size: 9.5px;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--border-mid);
  margin-left: auto;
  flex: none;
}

.tour-history-agent.claude {
  color: #f0a060;
  border-color: rgba(240, 160, 96, 0.3);
  background: rgba(240, 160, 96, 0.08);
}

.tour-history-agent.codex {
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.08);
}

.tour-history-agent.gemini {
  color: #818cf8;
  border-color: rgba(129, 140, 248, 0.28);
  background: rgba(129, 140, 248, 0.08);
}

.tour-history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

.tour-history-meta code {
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 6px;
}

.tour-history-diff em {
  font-style: normal;
  margin-right: 6px;
}

.tour-history-diff .add {
  color: #47c985;
}

.tour-history-diff .del {
  color: #e0705a;
}

.tour-history-files {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-history-revert {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid rgba(224, 112, 90, 0.3);
  border-radius: var(--r-sm);
  background: rgba(224, 112, 90, 0.05);
}

.tour-history-revert p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.tour-history-revert code {
  font-family: var(--mono);
  font-size: 10px;
  color: #e0705a;
}

.tour-history-top .tour-panel-label {
  display: block;
  margin-bottom: 2px;
}

.tour-history-item.has-diff {
  cursor: pointer;
}

.tour-history-item.has-diff:hover {
  border-color: rgba(0, 207, 219, 0.35);
}

.tour-history-item.expanded {
  border-color: rgba(0, 207, 219, 0.4);
  background: var(--surface2);
}

.tour-history-diffview {
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface3);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  overflow-x: auto;
}

.tour-history-diff-file {
  color: var(--text);
  font-weight: 600;
  margin: 2px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tour-history-diff-more {
  color: var(--text-dim);
  font-weight: 400;
}

.tour-dline {
  white-space: pre;
  padding-left: 6px;
}

.tour-dline.ctx {
  color: var(--text-dim);
}

.tour-dline.add {
  color: #47c985;
  background: rgba(71, 201, 133, 0.07);
}

.tour-dline.del {
  color: #e0705a;
  background: rgba(224, 112, 90, 0.07);
}

/* -- Audit trail section (t-401) ------------------------------ */

.audit-section {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(640px 300px at 12% 0%, rgba(0, 207, 219, 0.05) 0%, transparent 60%),
    var(--bg);
}

.audit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}

.audit-lead {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
}

.audit-lead em {
  color: var(--text);
  font-style: italic;
}

.audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}

.audit-mock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 24%),
    rgba(10, 18, 26, 0.94);
}

.audit-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audit-point {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}

.audit-point span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 5px;
}

.audit-point p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

.audit-point code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.audit-note {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 0 4px;
}

@media (max-width: 960px) {
  .audit-head,
  .audit-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.run-section {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(680px 320px at 50% 0%, rgba(0, 207, 219, 0.05) 0%, transparent 62%),
    var(--bg);
}

.run-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 32px;
}

.run-lead {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
}

.run-figure {
  margin: 0;
}

.run-video-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  border-radius: var(--r);
  background: #05080b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.run-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #05080b;
}

.run-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
}

.run-econ {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r);
  background: var(--surface);
}

.run-econ-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
}

.run-econ p:last-child {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-dim);
}

.run-econ strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 960px) {
  .run-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Built with Alepou */
.bw-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 82px;
}

.bw-hero::before {
  position: absolute;
  width: 760px;
  height: 760px;
  right: -310px;
  top: -390px;
  border: 1px solid rgba(0, 207, 219, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 92px rgba(0, 207, 219, 0.025),
    0 0 0 184px rgba(10, 39, 80, 0.06);
  content: "";
  pointer-events: none;
}

.bw-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  gap: 70px;
  align-items: center;
}

.bw-hero-copy {
  max-width: 640px;
}

.bw-hero .hero-title {
  margin: 0 0 24px;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 0.98;
}

.bw-lede {
  max-width: 620px;
  color: #829bab;
  font-size: 18px;
  line-height: 1.72;
}

.bw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.bw-hero-note {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #4e697a;
}

.bw-hero-note em {
  color: var(--cyan);
  font-style: normal;
}

.bw-contract {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(0, 207, 219, 0.05), transparent 38%),
    rgba(8, 15, 22, 0.94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.bw-contract::after {
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  border: 1px solid rgba(0, 207, 219, 0.15);
  border-radius: 50%;
  content: "";
}

.bw-contract-head,
.bw-contract-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bw-contract-head {
  border-bottom: 1px solid var(--border);
  color: #7690a1;
}

.bw-contract-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #638778;
}

.bw-contract-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(42, 154, 114, 0.6);
}

.bw-contract-list {
  list-style: none;
}

.bw-contract-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-bottom: 1px solid rgba(28, 42, 58, 0.78);
}

.bw-contract-num {
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
}

.bw-contract-list strong,
.bw-contract-list small {
  display: block;
}

.bw-contract-list strong {
  margin-bottom: 3px;
  color: #d8e8f1;
  font-size: 14px;
  font-weight: 600;
}

.bw-contract-list small {
  color: #607687;
  font-size: 12.5px;
  line-height: 1.55;
}

.bw-contract-foot {
  align-items: flex-start;
  text-transform: none;
  letter-spacing: 0;
  color: #4c6475;
}

.bw-contract-foot strong {
  max-width: 230px;
  color: #89a0ae;
  font-weight: 500;
  text-align: right;
}

.bw-breadth {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(8, 13, 18, 0.72);
}

.bw-breadth-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bw-breadth-inner::-webkit-scrollbar {
  display: none;
}

.bw-breadth span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #536b7a;
}

.bw-breadth i {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--teal);
}

.bw-projects {
  background:
    radial-gradient(520px 260px at 12% 0%, rgba(0, 207, 219, 0.035), transparent 70%);
}

.bw-section-head,
.bw-proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: end;
  margin-bottom: 34px;
}

.bw-section-head h2,
.bw-proof-head h2,
.bw-paths-copy h2 {
  margin-bottom: 12px;
}

.bw-section-head p {
  max-width: 680px;
  color: var(--text-dim);
  font-size: 15px;
}

.bw-result {
  min-width: 104px;
  padding-left: 22px;
  border-left: 1px solid var(--border-mid);
}

.bw-result span,
.bw-result small {
  display: block;
}

.bw-result span {
  color: #dcecf3;
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1;
}

.bw-result small {
  margin-top: 8px;
  color: #4e6676;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.bw-filter {
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(10, 17, 25, 0.72);
  color: #6d8493;
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bw-filter:hover,
.bw-filter:focus-visible {
  border-color: #355267;
  color: #b8cad4;
  outline: none;
}

.bw-filter.active {
  border-color: rgba(0, 207, 219, 0.5);
  background: var(--cyan-lo);
  color: var(--cyan);
}

.bw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.bw-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12, 20, 28, 0.86);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.bw-card:hover {
  border-color: #2b4458;
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
}

.bw-card-media {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.bw-card-media.mushroom {
  background:
    radial-gradient(circle at 70% 72%, rgba(116, 191, 135, 0.26), transparent 8%),
    radial-gradient(circle at 63% 68%, rgba(222, 132, 73, 0.35), transparent 12%),
    radial-gradient(circle at 78% 66%, rgba(236, 184, 95, 0.2), transparent 10%),
    linear-gradient(145deg, #111a23 0%, #10252c 48%, #151e1e 100%);
}

.bw-card-media.maria {
  background:
    linear-gradient(132deg, rgba(0, 207, 219, 0.09), transparent 45%),
    linear-gradient(155deg, #111827, #101924 48%, #141421);
}

.bw-card-media.has-image {
  background: #091018;
}

.bw-card-media-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
  filter: saturate(0.86) contrast(1.04);
}

.bw-card-media.mushroom.has-image::before {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(6, 12, 18, 0.9) 0%, rgba(6, 12, 18, 0.44) 58%, rgba(6, 12, 18, 0.1) 100%);
  box-shadow: none;
}

.bw-card-media.mushroom.has-image::after {
  display: none;
}

.bw-card-media::before,
.bw-card-media::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.bw-card-media.mushroom::before {
  width: 230px;
  height: 110px;
  right: 24px;
  bottom: -34px;
  border: 1px solid rgba(139, 202, 152, 0.28);
  border-radius: 50%;
  background: rgba(21, 50, 41, 0.65);
  box-shadow: 0 -24px 50px rgba(115, 194, 135, 0.06);
}

.bw-card-media.mushroom::after {
  width: 74px;
  height: 38px;
  right: 116px;
  bottom: 34px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #d98054, #814c3e);
  box-shadow:
    52px 13px 0 -12px #d5a65e,
    -45px 20px 0 -18px #8eaa73;
}

.bw-card-media.maria::before {
  width: 220px;
  height: 124px;
  right: 34px;
  bottom: 27px;
  border: 1px solid rgba(0, 207, 219, 0.24);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(0, 207, 219, 0.5) 0 48px, transparent 48px) 14px 22px / 104px 5px no-repeat,
    linear-gradient(90deg, rgba(95, 115, 132, 0.65) 0 112px, transparent 112px) 14px 39px / 150px 4px no-repeat,
    linear-gradient(90deg, rgba(95, 115, 132, 0.45) 0 82px, transparent 82px) 14px 54px / 150px 4px no-repeat,
    linear-gradient(90deg, rgba(95, 115, 132, 0.35) 0 128px, transparent 128px) 14px 76px / 170px 4px no-repeat,
    rgba(7, 13, 21, 0.74);
  box-shadow: -18px 18px 0 rgba(7, 13, 21, 0.45);
  transform: rotate(-2deg);
}

.bw-card-media.maria::after {
  width: 9px;
  height: 9px;
  right: 230px;
  bottom: 123px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 18px 0 0 #e8b34a, 36px 0 0 #597384;
}

.bw-card-media-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(70, 101, 119, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 101, 119, 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, black, transparent 85%);
}

.bw-card-media-copy {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  max-width: 230px;
}

.bw-card-media-copy span,
.bw-card-media-copy strong,
.bw-card-media-copy small {
  display: block;
}

.bw-card-media-eyebrow {
  margin-bottom: 8px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bw-card-media-copy strong {
  color: #f1f7fa;
  font-size: 24px;
  letter-spacing: -0.025em;
}

.bw-card-media-copy small {
  margin-top: 4px;
  color: #6e8594;
  font-family: var(--mono);
  font-size: 10px;
}

.bw-card-state {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border: 1px solid rgba(232, 179, 74, 0.28);
  border-radius: 999px;
  background: rgba(13, 17, 20, 0.78);
  color: #d6a84e;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bw-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px;
}

.bw-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.bw-card-tags span {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #678090;
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bw-card h3 {
  margin-bottom: 12px;
  color: #e7f1f6;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.bw-card-outcome {
  color: #a6bac6;
  font-size: 15px;
  line-height: 1.65;
}

.bw-card-synopsis {
  margin-top: 12px;
  color: #617787;
  font-size: 13px;
  line-height: 1.68;
}

.bw-card-facts {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 8px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}

.bw-card-facts dt {
  color: #496171;
  font-family: var(--mono);
}

.bw-card-facts dd {
  color: #829aa8;
}

.bw-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.bw-card-coming,
.bw-card-story,
.bw-card-external {
  font-family: var(--mono);
  font-size: 10.5px;
}

.bw-card-coming {
  color: #4f6574;
}

.bw-card-story {
  color: var(--cyan);
}

.bw-card-story:hover,
.bw-card-story:focus-visible {
  color: #7ceaf0;
  outline: none;
}

.bw-card-external {
  color: var(--cyan);
}

.bw-card-external:hover,
.bw-card-external:focus-visible {
  color: #7ceaf0;
  outline: none;
}

.bw-noscript {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-dim);
}

.bw-proof {
  background: rgba(8, 13, 18, 0.58);
}

.bw-proof-head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
}

.bw-proof-head > p {
  color: #6b8190;
  font-size: 15px;
  line-height: 1.7;
}

.bw-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
  gap: 1px;
}

.bw-proof-card {
  min-height: 250px;
  padding: 30px;
  background: #0e161f;
}

.bw-proof-card.featured {
  background:
    linear-gradient(180deg, rgba(0, 207, 219, 0.055), transparent 60%),
    #0f1821;
}

.bw-proof-level {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bw-proof-card h3 {
  margin: 38px 0 14px;
  color: #dcebf2;
  font-size: 19px;
  line-height: 1.3;
}

.bw-proof-card p {
  color: #637989;
  font-size: 13.5px;
  line-height: 1.7;
}

.bw-paths-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(230px, 0.8fr));
  gap: 18px;
  align-items: stretch;
}

.bw-paths-copy {
  padding-right: 34px;
}

.bw-paths-copy p {
  max-width: 520px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.72;
}

.bw-path-card {
  display: flex;
  min-height: 276px;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(14, 22, 31, 0.84);
}

.bw-path-card.outcome {
  border-top-color: rgba(0, 207, 219, 0.6);
}

.bw-path-card.method {
  border-top-color: rgba(42, 154, 114, 0.7);
}

.bw-path-kicker {
  margin-bottom: 28px;
  color: #58707f;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bw-path-card h3 {
  margin-bottom: 12px;
  color: #dceaf1;
  font-size: 21px;
}

.bw-path-card p {
  color: #637887;
  font-size: 13px;
  line-height: 1.68;
}

.bw-path-card a {
  margin-top: auto;
  padding-top: 20px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 10.5px;
}

.bw-path-card a:hover,
.bw-path-card a:focus-visible {
  color: #7ceaf0;
  outline: none;
}

@media (max-width: 960px) {
  .bw-hero {
    padding: 64px 0;
  }

  .bw-hero-grid,
  .bw-section-head,
  .bw-proof-head,
  .bw-paths-grid {
    grid-template-columns: 1fr;
  }

  .bw-contract {
    max-width: 640px;
  }

  .bw-result {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    border-left: none;
  }

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

  .bw-proof-grid {
    grid-template-columns: 1fr;
  }

  .bw-proof-card {
    min-height: 0;
  }

  .bw-proof-card h3 {
    margin-top: 24px;
  }

  .bw-paths-copy {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .bw-hero {
    padding: 48px 0 54px;
  }

  .bw-hero .hero-title {
    font-size: clamp(42px, 16vw, 62px);
  }

  .bw-lede {
    font-size: 16px;
  }

  .bw-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bw-hero-actions .btn {
    justify-content: center;
  }

  .bw-contract-head,
  .bw-contract-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .bw-contract-foot strong {
    text-align: left;
  }

  .bw-breadth-inner {
    justify-content: flex-start;
  }

  .bw-section-head {
    gap: 20px;
  }

  .bw-filters {
    flex-wrap: nowrap;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bw-filters::-webkit-scrollbar {
    display: none;
  }

  .bw-filter {
    flex: 0 0 auto;
  }

  .bw-card-media {
    min-height: 220px;
  }

  .bw-card-media::before,
  .bw-card-media::after {
    opacity: 0.62;
  }

  .bw-card-media-copy {
    left: 20px;
    bottom: 20px;
  }

  .bw-card-state {
    top: 12px;
    right: 12px;
  }

  .bw-card-body,
  .bw-proof-card,
  .bw-path-card {
    padding: 22px;
  }

  .bw-card-facts {
    grid-template-columns: 1fr;
  }

  .bw-card-facts dd + dt {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-card {
    transition: none;
  }

  .bw-card:hover {
    transform: none;
  }
}

/* Alepou Canvas product page */
.canvas-page {
  background: #080c11;
}

.canvas-hero {
  position: relative;
  overflow: hidden;
  padding: 112px 0 92px;
  background:
    radial-gradient(circle at 20% 16%, rgba(0, 207, 219, 0.13), transparent 34%),
    radial-gradient(circle at 88% 66%, rgba(93, 141, 255, 0.13), transparent 35%),
    linear-gradient(180deg, #0b1119, #080c11);
}

.canvas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 230, 240, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 230, 240, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.canvas-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  gap: 64px;
  align-items: center;
}

.canvas-product-logo {
  display: block;
  width: min(290px, 75%);
  height: auto;
  margin-bottom: 26px;
}

.canvas-status {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 22px;
  font-family: var(--mono);
  color: #8da6b7;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.canvas-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #47c985;
  box-shadow: 0 0 16px rgba(71, 201, 133, 0.8);
}

.canvas-hero-copy h1 {
  margin: 0 0 24px;
  color: #f5fbff;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.canvas-hero-copy h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, #28dce3, #7f9cff);
  background-clip: text;
  -webkit-background-clip: text;
}

.canvas-lede {
  max-width: 640px;
  margin: 0;
  color: #afc0cb;
  font-size: 18px;
  line-height: 1.7;
}

.canvas-hero-actions,
.canvas-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.canvas-hero-note {
  max-width: 600px;
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.canvas-product-shot {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(81, 176, 214, 0.3);
  border-radius: 14px;
  background: #0a1017;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.48), 0 0 70px rgba(0, 207, 219, 0.07);
  transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
}

.canvas-product-shot-bar,
.canvas-product-shot figcaption {
  display: flex;
  min-height: 38px;
  padding: 0 14px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(85, 112, 132, 0.26);
  background: #0d151e;
  font-family: var(--mono);
}

.canvas-product-shot-bar span,
.canvas-product-shot-bar small,
.canvas-product-shot figcaption span,
.canvas-product-shot figcaption small {
  color: #7890a1;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.canvas-product-shot-bar span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #9fb4c1;
}

.canvas-product-shot-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #47c985;
  box-shadow: 0 0 14px rgba(71, 201, 133, 0.72);
}

.canvas-product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.canvas-product-shot figcaption {
  min-height: 34px;
  border-top: 1px solid rgba(85, 112, 132, 0.22);
  border-bottom: 0;
  background: #0b121a;
}

.canvas-product-shot figcaption span {
  color: #9cb1bd;
}

.canvas-studio-visual {
  overflow: hidden;
  border: 1px solid rgba(81, 176, 214, 0.28);
  border-radius: 14px;
  background: #0a1017;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.48), 0 0 70px rgba(0, 207, 219, 0.07);
  transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
}

.canvas-studio-bar,
.canvas-studio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(85, 112, 132, 0.26);
  background: #0d151e;
  font-family: var(--mono);
  color: #8299aa;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.canvas-studio-actions {
  display: flex;
  gap: 6px;
}

.canvas-studio-actions i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #284052;
}

.canvas-studio-actions i:first-child {
  background: #2dd4bf;
}

.canvas-studio-body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 142px;
  min-height: 430px;
}

.canvas-studio-rail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  padding: 18px 7px;
  border-right: 1px solid rgba(85, 112, 132, 0.2);
  background: #0b121a;
}

.canvas-studio-rail span,
.canvas-studio-rail b {
  display: grid;
  width: 29px;
  height: 22px;
  place-items: center;
  border: 1px solid #243746;
  border-radius: 4px;
  font-family: var(--mono);
  color: #647d8f;
  font-size: 8px;
  font-weight: 400;
}

.canvas-studio-rail .active {
  border-color: rgba(0, 207, 219, 0.6);
  color: #7cebf0;
  background: rgba(0, 207, 219, 0.08);
}

.canvas-studio-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 42px 28px 28px;
  background-color: #080d13;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
}

.canvas-stage-label {
  position: absolute;
  top: 14px;
  left: 20px;
  font-family: var(--mono);
  color: #5f7788;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.canvas-stage-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 8% 8%;
  border: 1px solid rgba(127, 156, 255, 0.35);
  background:
    radial-gradient(circle at 80% 30%, rgba(0, 207, 219, 0.23), transparent 27%),
    linear-gradient(145deg, #101a2c, #0b1220 65%, #111f2c);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.38);
}

.canvas-stage-card small {
  font-family: var(--mono);
  color: #38d8df;
  font-size: 7px;
  letter-spacing: 0.16em;
}

.canvas-stage-card h2 {
  position: relative;
  z-index: 1;
  margin: 8% 0 4%;
  color: #f5f9ff;
  font-size: clamp(16px, 2.4vw, 32px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.canvas-stage-card p {
  color: #9aacbe;
  font-size: clamp(7px, 0.9vw, 11px);
}

.canvas-stage-orbit {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  top: 12%;
  right: 4%;
  border: 1px solid rgba(103, 144, 255, 0.58);
  border-radius: 50%;
}

.canvas-stage-orbit::before,
.canvas-stage-orbit::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(0, 207, 219, 0.46);
  border-radius: 50%;
}

.canvas-stage-orbit::after {
  inset: 38%;
  background: #43dfe5;
  box-shadow: 0 0 28px rgba(67, 223, 229, 0.8);
}

.canvas-stage-line {
  position: absolute;
  width: 34%;
  height: 2px;
  left: 8%;
  bottom: 10%;
  background: linear-gradient(90deg, #32dce3, transparent);
}

.canvas-studio-inspector {
  padding: 16px 12px;
  border-left: 1px solid rgba(85, 112, 132, 0.2);
  background: #0b121a;
  font-family: var(--mono);
}

.canvas-studio-inspector > span {
  color: #6e8799;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.canvas-studio-inspector label {
  display: block;
  margin-top: 20px;
  color: #587183;
  font-size: 7px;
  text-transform: uppercase;
}

.canvas-studio-inspector strong {
  display: block;
  margin-top: 6px;
  color: #b7c7d2;
  font-size: 9px;
  font-weight: 400;
  text-transform: none;
}

.canvas-studio-inspector .editable {
  color: #58d4a0;
}

.canvas-inspector-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 18px;
}

.canvas-inspector-row i,
.canvas-inspector-field {
  height: 22px;
  border: 1px solid #243746;
  border-radius: 3px;
  background: #0e1822;
}

.canvas-inspector-field {
  margin-top: 8px;
}

.canvas-inspector-field.short {
  width: 70%;
}

.canvas-studio-footer {
  min-height: 28px;
  border-top: 1px solid rgba(85, 112, 132, 0.2);
  border-bottom: 0;
  background: #0b121a;
  font-size: 7px;
}

.canvas-types-section,
.canvas-compile-section,
.canvas-proof-section {
  background: #090d12;
}

.canvas-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 38px;
}

.canvas-section-head h2 {
  margin-bottom: 0;
}

.canvas-section-head > p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.75;
}

.canvas-type-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.canvas-type-grid article {
  min-height: 224px;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
}

.canvas-type-grid article:last-child {
  border-right: 0;
}

.canvas-type-grid span,
.canvas-design-modes span {
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.canvas-type-grid h3 {
  margin: 46px 0 12px;
  color: #f1f8fb;
  font-size: 19px;
}

.canvas-type-grid p,
.canvas-design-copy > p,
.canvas-design-modes p,
.canvas-alepou-copy > p,
.canvas-proof-copy > p,
.canvas-final-inner p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.72;
}

.canvas-design-section {
  background:
    linear-gradient(90deg, rgba(0, 207, 219, 0.055), transparent 46%),
    #0b1016;
}

.canvas-design-grid,
.canvas-alepou-grid,
.canvas-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.canvas-design-copy h2,
.canvas-alepou-copy h2,
.canvas-proof-copy h2 {
  margin-bottom: 20px;
}

.canvas-design-modes {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.canvas-design-modes article {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(8, 14, 20, 0.66);
}

.canvas-design-modes h3 {
  margin: 10px 0 6px;
  color: #f1f8fb;
  font-size: 18px;
}

.canvas-design-modes p {
  margin: 0;
}

.canvas-direction-board {
  padding: 20px;
  border: 1px solid rgba(81, 176, 214, 0.24);
  border-radius: 12px;
  background: rgba(7, 12, 18, 0.82);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
}

.canvas-direction-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 14px;
  font-family: var(--mono);
}

.canvas-direction-title span {
  color: #eaf6fa;
  font-size: 11px;
}

.canvas-direction-title small {
  color: #637b8c;
  font-size: 9px;
}

.canvas-direction-card {
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0e1722;
}

.canvas-direction-card > div {
  position: relative;
  min-height: 170px;
  padding: 24px;
}

.canvas-direction-card small {
  font-family: var(--mono);
  color: #60dfe5;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.canvas-direction-card strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 240px;
  margin-top: 42px;
  color: #f3f7fd;
  font-size: 26px;
  line-height: 1.02;
}

.canvas-direction-card > div > span {
  position: absolute;
  width: 170px;
  height: 170px;
  top: -30px;
  right: -20px;
  border: 1px solid rgba(81, 151, 255, 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(0, 207, 219, 0.08);
}

.canvas-direction-card > p {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  color: #718897;
  font-size: 8px;
}

.canvas-direction-card.direction-b > div {
  background: #eee7dc;
}

.canvas-direction-card.direction-b small {
  color: #8e5e40;
}

.canvas-direction-card.direction-b strong {
  color: #201d1b;
}

.canvas-direction-card.direction-b > div > span {
  width: 130px;
  height: 130px;
  top: 20px;
  right: 20px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(145deg, #cd8063, #8d5168);
  transform: rotate(8deg);
  box-shadow: 18px 18px 0 #d7cdbf;
}

.canvas-direction-status {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 2px 0;
  font-family: var(--mono);
  color: #7d93a2;
  font-size: 9px;
}

.canvas-direction-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #47c985;
}

.canvas-compile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.canvas-compile-grid article {
  min-height: 270px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0c1219;
}

.canvas-compile-grid span {
  display: block;
  margin-bottom: 56px;
  font-family: var(--mono);
  color: #57dca8;
  font-size: 34px;
}

.canvas-compile-grid .decoration span {
  color: #52d5dc;
}

.canvas-compile-grid .component span {
  color: #899ff6;
}

.canvas-compile-grid h3 {
  margin: 0 0 12px;
  color: #f0f7fa;
  font-size: 19px;
}

.canvas-compile-grid p,
.canvas-metric-note {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}

.canvas-metric-note {
  margin: 18px 0 0;
  font-family: var(--mono);
  color: #617989;
  font-size: 10px;
}

.canvas-alepou-section {
  background:
    radial-gradient(circle at 80% 50%, rgba(0, 207, 219, 0.08), transparent 36%),
    #0a0f15;
}

.canvas-alepou-copy ul {
  display: grid;
  gap: 11px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.canvas-alepou-copy li {
  position: relative;
  padding-left: 22px;
  color: #b4c4ce;
  font-size: 13px;
  line-height: 1.6;
}

.canvas-alepou-copy li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--cyan);
}

.canvas-folder-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 92px;
}

.canvas-folder-root,
.canvas-folder-branch {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0c141d;
}

.canvas-folder-root {
  position: absolute;
  width: 62%;
  top: 0;
  left: 19%;
  text-align: center;
}

.canvas-folder-root::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 30px;
  bottom: -30px;
  left: 50%;
  background: #315164;
}

.canvas-folder-map::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 91px;
  left: 16.7%;
  right: 16.7%;
  background: #315164;
}

.canvas-folder-root span,
.canvas-folder-branch span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.canvas-folder-root strong {
  color: #e8f3f7;
  font-size: 13px;
}

.canvas-folder-branch p {
  margin: 0;
  color: #79909f;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.65;
}

.canvas-folder-branch.artifact span {
  color: #819cff;
}

.canvas-folder-branch.bridge span {
  color: #5eda9f;
}

.canvas-proof-media {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0b1219;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.canvas-proof-media img {
  display: block;
  width: 100%;
  height: auto;
}

.canvas-proof-media figcaption {
  padding: 12px 16px;
  font-family: var(--mono);
  color: #708695;
  font-size: 9px;
}

.canvas-final-cta {
  background: linear-gradient(120deg, rgba(0, 207, 219, 0.1), rgba(93, 141, 255, 0.08)), #0b1118;
}

.canvas-final-inner {
  display: flex;
  gap: 50px;
  align-items: end;
  justify-content: space-between;
}

.canvas-final-inner h2 {
  max-width: 720px;
  margin-bottom: 16px;
}

.canvas-final-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 1080px) {
  .canvas-hero-grid {
    grid-template-columns: 1fr;
  }

  .canvas-studio-visual,
  .canvas-product-shot {
    transform: none;
  }

  .canvas-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .canvas-type-grid article:nth-child(3) {
    border-right: 0;
  }

  .canvas-type-grid article:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 760px) {
  .canvas-hero {
    padding: 78px 0 62px;
  }

  .canvas-hero-grid,
  .canvas-design-grid,
  .canvas-alepou-grid,
  .canvas-proof-grid,
  .canvas-section-head,
  .canvas-compile-grid {
    grid-template-columns: 1fr;
  }

  .canvas-hero-grid,
  .canvas-design-grid,
  .canvas-alepou-grid,
  .canvas-proof-grid,
  .canvas-section-head {
    gap: 34px;
  }

  .canvas-studio-body {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 310px;
  }

  .canvas-studio-inspector {
    display: none;
  }

  .canvas-type-grid {
    grid-template-columns: 1fr;
  }

  .canvas-type-grid article,
  .canvas-type-grid article:nth-child(3) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .canvas-type-grid article:last-child {
    border-bottom: 0;
  }

  .canvas-type-grid h3 {
    margin-top: 24px;
  }

  .canvas-folder-map {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .canvas-folder-root {
    position: relative;
    width: auto;
    left: auto;
  }

  .canvas-folder-root::after,
  .canvas-folder-map::before {
    display: none;
  }

  .canvas-final-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .canvas-final-actions {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .canvas-hero-copy h1 {
    font-size: 42px;
  }

  .canvas-lede {
    font-size: 16px;
  }

  .canvas-studio-visual,
  .canvas-product-shot {
    margin-inline: -12px;
  }

  .canvas-product-shot-bar,
  .canvas-product-shot figcaption {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding-block: 9px;
  }

  .canvas-direction-card strong {
    max-width: 175px;
    font-size: 21px;
  }

  .canvas-direction-card > div > span {
    opacity: 0.68;
  }
}

/* Alepou Unity Bridge product page */
.unity-page {
  background: #090d11;
}

.unity-hero {
  position: relative;
  overflow: hidden;
  padding: 118px 0 96px;
  background:
    radial-gradient(circle at 78% 24%, rgba(75, 210, 143, 0.12), transparent 33%),
    radial-gradient(circle at 18% 76%, rgba(0, 207, 219, 0.08), transparent 34%),
    linear-gradient(155deg, #0b1015, #090d11 70%);
}

.unity-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(113, 232, 169, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 232, 169, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, black, transparent 76%);
}

.unity-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
  gap: 72px;
  align-items: center;
}

.unity-kicker {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 24px;
  font-family: var(--mono);
  color: #718b7d;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unity-kicker span {
  padding: 6px 9px;
  border: 1px solid rgba(90, 218, 151, 0.35);
  border-radius: 3px;
  color: #75dea8;
  background: rgba(63, 192, 126, 0.07);
}

.unity-hero-copy h1 {
  max-width: 720px;
  margin: 0 0 26px;
  color: #f6fbf8;
  font-size: clamp(46px, 5.4vw, 78px);
  line-height: 0.97;
  letter-spacing: -0.057em;
}

.unity-lede {
  max-width: 650px;
  margin: 0;
  color: #aec0b6;
  font-size: 18px;
  line-height: 1.72;
}

.unity-hero-actions,
.unity-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.unity-hero-note {
  max-width: 630px;
  margin: 22px 0 0;
  color: #73867c;
  font-size: 12px;
  line-height: 1.65;
}

.unity-processor {
  overflow: hidden;
  border: 1px solid rgba(91, 194, 137, 0.3);
  border-radius: 11px;
  background: #0b1110;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.48), 0 0 70px rgba(61, 190, 122, 0.06);
  transform: perspective(1100px) rotateY(-2deg);
}

.unity-processor-head,
.unity-processor-foot {
  display: flex;
  min-height: 44px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(104, 138, 120, 0.22);
  background: #0f1715;
  font-family: var(--mono);
}

.unity-processor-head > div {
  display: flex;
  gap: 9px;
  align-items: center;
}

.unity-processor-head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #53d58f;
  box-shadow: 0 0 18px rgba(83, 213, 143, 0.85);
}

.unity-processor-head strong {
  color: #bacbc1;
  font-size: 9px;
  letter-spacing: 0.11em;
}

.unity-processor-head > span {
  color: #5ad394;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.unity-health-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.4fr;
  gap: 0;
  border-bottom: 1px solid rgba(104, 138, 120, 0.18);
}

.unity-health-row > div {
  min-height: 82px;
  padding: 18px 16px;
  border-right: 1px solid rgba(104, 138, 120, 0.18);
}

.unity-health-row > div:last-child {
  border-right: 0;
}

.unity-health-row small {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  color: #587166;
  font-size: 7px;
  letter-spacing: 0.09em;
}

.unity-health-row strong {
  color: #b4c8bc;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
}

.unity-heartbeat {
  display: flex;
  gap: 5px;
  align-items: center;
}

.unity-heartbeat span {
  width: 4px;
  border-radius: 3px;
  background: #4dcc88;
}

.unity-heartbeat span:nth-child(1),
.unity-heartbeat span:nth-child(5) { height: 12px; opacity: 0.35; }
.unity-heartbeat span:nth-child(2),
.unity-heartbeat span:nth-child(4) { height: 24px; opacity: 0.65; }
.unity-heartbeat span:nth-child(3) { height: 38px; box-shadow: 0 0 14px rgba(77, 204, 136, 0.45); }

.unity-workflow {
  padding: 12px;
}

.unity-workflow > div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  min-height: 60px;
  padding: 11px 12px;
  align-items: center;
  border-bottom: 1px solid rgba(104, 138, 120, 0.13);
  font-family: var(--mono);
}

.unity-workflow > div:last-child {
  border-bottom: 0;
}

.unity-workflow > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #2b4036;
  border-radius: 50%;
  color: #5c7468;
  font-size: 8px;
}

.unity-workflow p {
  margin: 0;
  color: #afc2b7;
  font-size: 10px;
}

.unity-workflow small {
  display: block;
  margin-top: 5px;
  color: #587065;
  font-size: 8px;
}

.unity-workflow b {
  color: #5d7569;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.unity-workflow .done > span {
  border-color: rgba(83, 213, 143, 0.52);
  color: #5ad394;
  background: rgba(83, 213, 143, 0.06);
}

.unity-workflow .done b {
  color: #57c88d;
}

.unity-workflow .active {
  border: 1px solid rgba(83, 213, 143, 0.28);
  border-radius: 6px;
  background: rgba(83, 213, 143, 0.045);
}

.unity-workflow .active > span {
  border-color: #53d58f;
  color: #d6f6e4;
  box-shadow: 0 0 18px rgba(83, 213, 143, 0.17);
}

.unity-workflow .active b {
  color: #74dea5;
}

.unity-processor-foot {
  min-height: 31px;
  border-top: 1px solid rgba(104, 138, 120, 0.18);
  border-bottom: 0;
  color: #52695e;
  font-size: 7px;
}

.unity-service-section,
.unity-work-section,
.unity-install-section {
  background: #090d11;
}

.unity-split,
.unity-quest-grid,
.unity-install-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}

.unity-copy h2,
.unity-quest-copy h2,
.unity-install-copy h2 {
  margin-bottom: 22px;
}

.unity-copy > p,
.unity-quest-copy > p,
.unity-install-copy > p,
.unity-section-head > p,
.unity-final-inner p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.75;
}

.unity-check-list {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.unity-check-list li {
  position: relative;
  padding-left: 24px;
  color: #b4c5bb;
  font-size: 13px;
  line-height: 1.65;
}

.unity-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #56d592;
  font-family: var(--mono);
}

.unity-state-map {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(93, 147, 118, 0.24);
  border-radius: 12px;
  background: #0c1211;
}

.unity-state-source,
.unity-state-target {
  padding: 18px 20px;
  border: 1px solid rgba(83, 213, 143, 0.24);
  border-radius: 7px;
  background: rgba(83, 213, 143, 0.045);
}

.unity-state-target {
  border-color: rgba(0, 207, 219, 0.22);
  background: rgba(0, 207, 219, 0.035);
}

.unity-state-source span,
.unity-state-target span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  color: #5fd797;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.unity-state-target span {
  color: var(--cyan);
}

.unity-state-source strong,
.unity-state-target strong {
  color: #d5e4dc;
  font-size: 13px;
}

.unity-state-line {
  width: 1px;
  height: 24px;
  margin: 0 auto;
  background: #385748;
}

.unity-state-files {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.unity-state-files article {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0b1012;
}

.unity-state-files span {
  color: #4fc986;
  font-family: var(--mono);
  font-size: 7px;
}

.unity-state-files p {
  margin: 12px 0 5px;
  color: #c2d0c8;
  font-family: var(--mono);
  font-size: 10px;
}

.unity-state-files small {
  color: #64796d;
  font-size: 8px;
}

.unity-authority-section,
.unity-quest-section {
  background:
    linear-gradient(120deg, rgba(64, 190, 123, 0.055), transparent 48%),
    #0b1010;
}

.unity-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}

.unity-section-head h2 {
  margin-bottom: 0;
}

.unity-section-head > p {
  margin: 0;
}

.unity-authority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.unity-authority-grid article {
  position: relative;
  min-height: 300px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d1313;
}

.unity-authority-grid article.recommended {
  border-color: rgba(83, 213, 143, 0.45);
  background: linear-gradient(165deg, rgba(83, 213, 143, 0.1), rgba(13, 19, 19, 0.95) 46%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.unity-authority-grid article > span {
  color: #5bcf92;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
}

.unity-authority-grid h3 {
  margin: 54px 0 14px;
  color: #f0f8f3;
  font-size: 19px;
  line-height: 1.15;
}

.unity-authority-grid p {
  margin: 0;
  color: #8ca096;
  font-size: 13px;
  line-height: 1.7;
}

.unity-authority-grid small {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  color: #60756a;
  font-family: var(--mono);
  font-size: 8px;
}

.unity-boundary-note {
  margin: 20px 0 0;
  padding: 18px 20px;
  border-left: 2px solid #d5a64c;
  background: rgba(213, 166, 76, 0.045);
  color: #928775;
  font-size: 11px;
  line-height: 1.7;
}

.unity-boundary-note strong {
  color: #d3bb8d;
}

.unity-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.unity-capability-grid article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0c1214;
}

.unity-capability-grid span {
  color: #57d392;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.unity-capability-grid h3 {
  margin: 38px 0 12px;
  color: #eef6f1;
  font-size: 20px;
}

.unity-capability-grid p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.72;
}

.unity-capability-grid code,
.unity-quest-copy code,
.unity-install-copy code {
  color: #73dca4;
  font-family: var(--mono);
  font-size: 0.92em;
}

.unity-barrier-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 13px;
  align-items: center;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(77, 125, 99, 0.24);
  border-radius: 9px;
  background: #0b1110;
}

.unity-barrier-strip > div {
  text-align: center;
}

.unity-barrier-strip b {
  display: grid;
  width: 28px;
  height: 28px;
  margin: 0 auto 9px;
  place-items: center;
  border: 1px solid #30483b;
  border-radius: 50%;
  color: #718b7d;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
}

.unity-barrier-strip .passed b {
  border-color: #4bc986;
  color: #58d895;
  background: rgba(75, 201, 134, 0.06);
}

.unity-barrier-strip span {
  color: #71877b;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.unity-barrier-strip > i {
  width: 22px;
  height: 1px;
  background: #31473b;
}

.unity-quest-media {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(94, 171, 129, 0.28);
  border-radius: 11px;
  background: #090e0d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.unity-quest-media img {
  display: block;
  width: 100%;
  height: auto;
}

.unity-quest-media figcaption {
  padding: 12px 16px;
  color: #6b8175;
  font-family: var(--mono);
  font-size: 9px;
}

.unity-quest-copy > p {
  margin-bottom: 18px;
}

.unity-quest-copy .btn {
  margin-top: 8px;
}

.unity-install-copy ol {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding-left: 22px;
  color: #afc0b6;
  font-size: 13px;
  line-height: 1.65;
}

.unity-install-copy li::marker {
  color: #52ce8d;
  font-family: var(--mono);
}

.unity-install-panel {
  padding: 28px;
  border: 1px solid rgba(83, 213, 143, 0.28);
  border-radius: 10px;
  background: #0c1311;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

.unity-install-title span {
  display: block;
  margin-bottom: 9px;
  color: #55d18f;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
}

.unity-install-title strong {
  color: #e5f0e9;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
}

.unity-install-panel dl {
  margin: 28px 0;
  border-top: 1px solid var(--border);
}

.unity-install-panel dl > div {
  display: flex;
  padding: 13px 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.unity-install-panel dt,
.unity-install-panel dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
}

.unity-install-panel dt {
  color: #687c70;
}

.unity-install-panel dd {
  color: #afc3b7;
}

.unity-install-panel > p {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 22px;
  color: #887d69;
  font-family: var(--mono);
  font-size: 8px;
}

.unity-install-panel > p span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5a64c;
}

.unity-install-panel > a {
  color: #62d99a;
  font-family: var(--mono);
  font-size: 10px;
  text-decoration: none;
}

.unity-install-panel > a:hover {
  color: #b7f2d2;
}

.unity-final-cta {
  background:
    linear-gradient(110deg, rgba(78, 204, 137, 0.1), rgba(0, 207, 219, 0.035)),
    #0c1211;
}

.unity-final-inner {
  display: flex;
  gap: 50px;
  align-items: end;
  justify-content: space-between;
}

.unity-final-inner h2 {
  max-width: 760px;
  margin-bottom: 16px;
}

.unity-final-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 1080px) {
  .unity-hero-grid {
    grid-template-columns: 1fr;
  }

  .unity-processor {
    transform: none;
  }

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

@media (max-width: 760px) {
  .unity-hero {
    padding: 78px 0 64px;
  }

  .unity-hero-grid,
  .unity-split,
  .unity-quest-grid,
  .unity-install-grid,
  .unity-section-head,
  .unity-capability-grid {
    grid-template-columns: 1fr;
  }

  .unity-hero-grid,
  .unity-split,
  .unity-quest-grid,
  .unity-install-grid,
  .unity-section-head {
    gap: 36px;
  }

  .unity-health-row {
    grid-template-columns: 1fr 1fr;
  }

  .unity-health-row > div:first-child {
    display: none;
  }

  .unity-authority-grid {
    grid-template-columns: 1fr;
  }

  .unity-authority-grid article {
    min-height: 250px;
  }

  .unity-authority-grid h3 {
    margin-top: 34px;
  }

  .unity-barrier-strip {
    grid-template-columns: 1fr;
  }

  .unity-barrier-strip > i {
    width: 1px;
    height: 14px;
    margin: 0 auto;
  }

  .unity-final-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .unity-final-actions {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .unity-hero-copy h1 {
    font-size: 44px;
  }

  .unity-lede {
    font-size: 16px;
  }

  .unity-processor {
    margin-inline: -12px;
  }

  .unity-workflow > div {
    grid-template-columns: 30px 1fr;
  }

  .unity-workflow b {
    display: none;
  }

  .unity-state-files {
    grid-template-columns: 1fr;
  }
}