*, *::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);
}

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

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