* { box-sizing: border-box; }

:root {
  --page-max: 1240px;
  --hud-alpha: 0.56;
  --field-light: 1;
  --line-soft: color-mix(in srgb, var(--kin-camel) 24%, transparent);
  --line-sky: color-mix(in srgb, var(--kin-skyblue) 54%, transparent);
  --glass: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  --glass-strong: color-mix(in srgb, var(--bg-deep) 94%, transparent);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--kin-aubergine) 58%, transparent), transparent 34rem),
    var(--bg-deep);
  overflow-x: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  top: -80px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: var(--radius-xs);
}

.skip-link:focus { top: var(--space-4); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-3) max(var(--space-5), calc((100vw - var(--page-max)) / 2));
  background: color-mix(in srgb, var(--bg-deep) 84%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  color: var(--fg);
  font-weight: 700;
}

.nav-brand img { width: 31px; height: 31px; }
.nav-brand small { display: block; font-size: 10px; color: var(--fg-soft); letter-spacing: .12em; text-transform: uppercase; }

.site-nav a:not(.nav-brand) {
  color: var(--fg-soft);
  font-size: var(--fs-sm);
}

.site-nav a:hover { color: var(--accent); }

.page-shell { width: min(var(--page-max), calc(100% - 40px)); margin: 0 auto; }

.hero {
  position: relative;
  min-height: 740px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
  padding: 96px 0 88px;
}

.hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -170px;
  top: 90px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 84px color-mix(in srgb, var(--kin-camel) 3%, transparent), 0 0 0 168px color-mix(in srgb, var(--kin-skyblue) 2%, transparent);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 760px; margin: var(--space-4) 0 var(--space-6); font-size: clamp(54px, 6.2vw, 88px); }
.hero p { max-width: 700px; font-size: 19px; line-height: 1.65; }

.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kin-camel);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.btn-primary, .btn-secondary, .btn-quiet {
  border-radius: var(--radius-xs);
  padding: 11px 16px;
  border: 1px solid transparent;
  font-weight: 700;
}

.btn-primary { background: var(--accent); color: var(--bg-deep); box-shadow: var(--shadow-glow-accent); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-quiet { background: var(--surface-muted); color: var(--fg-muted); border-color: var(--border); }

.hero-field {
  position: relative;
  height: 520px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(color-mix(in srgb, var(--kin-camel) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--kin-camel) 8%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--kin-skyblue) 12%, transparent), transparent 34%),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto, auto;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: perspective(1100px) rotateY(-4deg) rotateX(2deg);
}

.hero-field .horizon {
  position: absolute;
  inset: 9% 9% auto;
  height: 33%;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 50%;
  opacity: .7;
}

.field-chip, .context-chip, .hud-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--glass);
  color: var(--fg-muted);
  font-size: 11px;
  backdrop-filter: blur(12px);
}

.hero-field .field-chip { position: absolute; top: 18px; left: 18px; }

.ally-band {
  position: absolute;
  z-index: 15;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-deep) calc(var(--hud-alpha) * 100%), transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}

.ally-presence {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.ally-band .ally-copy { flex: 1; color: var(--fg-muted); font-size: 12px; }
.ally-band .voice-state { font-family: var(--font-mono); color: var(--fg-soft); font-size: 10px; }

.mini-node { position: absolute; text-align: center; color: var(--fg-muted); font-size: 10px; }
.mini-node .shape { margin: 0 auto 7px; box-shadow: var(--shadow-md); }
.mini-node.persona .shape { width: 32px; height: 32px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); }
.mini-node.actor .shape { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-elev); border: 2px solid var(--kin-camel); }
.mini-node.artifact .shape { width: 48px; height: 38px; background: var(--surface-elev); border: 1px solid var(--kin-skyblue); clip-path: polygon(0 0, 78% 0, 100% 24%, 100% 100%, 0 100%); }
.mini-node.project .shape { width: 70px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--kin-skyblue); transform: rotate(4deg); }
.mini-node.n1 { left: 22%; top: 27%; }
.mini-node.n2 { left: 64%; top: 23%; }
.mini-node.n3 { left: 49%; top: 49%; }
.mini-node.n4 { left: 24%; top: 62%; }

.relationship-orbit {
  position: absolute;
  left: 14%;
  top: 17%;
  width: 31%;
  height: 33%;
  border: 1px solid var(--line-sky);
  border-radius: 48%;
  background: color-mix(in srgb, var(--kin-skyblue) 4%, transparent);
}

.section { padding: 92px 0; }
.section.compact { padding: 64px 0; }
.section-header { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: var(--space-10); align-items: end; margin-bottom: var(--space-10); }
.section-header h2 { margin: var(--space-3) 0 0; font-size: clamp(38px, 4vw, 58px); }
.section-header p { margin: 0; font-size: var(--fs-lg); }

.lead-callout {
  padding: var(--space-6);
  border-left: 3px solid var(--kin-camel);
  background: var(--accent-warm-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-callout);
  color: var(--fg);
  font-size: var(--fs-lg);
}

.card-grid { display: grid; gap: var(--space-5); }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.content-card {
  position: relative;
  min-height: 210px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-md);
}

.content-card h3 { margin: var(--space-3) 0; }
.content-card p { margin: 0; }
.content-card.recommended { border-color: var(--line-sky); box-shadow: var(--shadow-glow-accent); }
.content-card .tag { display: inline-block; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--fg-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.content-card.recommended .tag { color: var(--accent); border-color: var(--line-sky); }

.direction-visual {
  position: relative;
  height: 130px;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--bg);
}

.direction-visual.constellation { background: radial-gradient(circle at 30% 38%, var(--accent) 0 2px, transparent 3px), radial-gradient(circle at 68% 56%, var(--kin-camel) 0 3px, transparent 4px), radial-gradient(circle at 48% 72%, var(--kin-mint) 0 2px, transparent 3px), var(--bg); }
.direction-visual.constellation::after { content: ""; position: absolute; inset: 18% 17%; border: 1px solid var(--line-sky); border-radius: 50%; transform: rotate(-12deg); }
.direction-visual.terrain { background: linear-gradient(145deg, var(--surface-elev), var(--bg)); }
.direction-visual.terrain::before { content: ""; position: absolute; width: 52%; height: 64%; left: 23%; top: 18%; border: 2px dashed var(--kin-camel); border-radius: 48%; }
.direction-visual.terrain::after { content: ""; position: absolute; width: 26%; height: 38%; left: 42%; top: 31%; border: 2px solid var(--accent); border-radius: var(--radius-xl); }
.direction-visual.workbench { background: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), var(--bg); background-size: 26px 26px; }
.direction-visual.workbench::before, .direction-visual.workbench::after { content: ""; position: absolute; top: 30%; width: 76px; height: 58px; background: var(--surface-elev); border: 1px solid var(--line-sky); border-radius: var(--radius-md); }
.direction-visual.workbench::before { left: 24%; transform: rotate(-6deg); }
.direction-visual.workbench::after { right: 24%; transform: rotate(7deg); }

.principles { counter-reset: principles; }
.principle { display: grid; grid-template-columns: 54px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.principle::before { counter-increment: principles; content: counter(principles, decimal-leading-zero); font-family: var(--font-display); color: var(--kin-camel); font-size: 32px; }
.principle h3 { margin: 0 0 var(--space-2); }
.principle p { margin: 0; }

.grammar-board {
  position: relative;
  min-height: 720px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--kin-camel) 13%, transparent), transparent 55%),
    linear-gradient(160deg, var(--surface-elev), var(--bg-deep));
  overflow: hidden;
}

.grammar-board .ground-label { position: absolute; left: 26px; top: 24px; }
.grammar-board .ecosystem-label { position: absolute; right: 26px; top: 24px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; }

.organization-ground {
  position: absolute;
  inset: 16% 6% 8%;
  border: 1px solid var(--line-soft);
  border-radius: 50% 50% 14% 14%;
  background: color-mix(in srgb, var(--kin-camel) 5%, transparent);
}

.community-zone {
  position: absolute;
  left: 10%;
  top: 30%;
  width: 34%;
  height: 41%;
  border: 2px dashed var(--kin-camel);
  border-radius: 49%;
}

.alliance-zone {
  position: absolute;
  right: 9%;
  top: 34%;
  width: 31%;
  height: 38%;
  border: 2px solid var(--kin-camel);
  border-radius: 48%;
}

.alliance-table { position: absolute; right: 19%; top: 49%; width: 90px; height: 40px; border-radius: 50%; background: var(--surface-elev); border: 1px solid var(--kid-sun-gold); }

.project-site {
  position: absolute;
  left: 40%;
  top: 33%;
  width: 21%;
  height: 24%;
  border: 1px solid var(--line-sky);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  transform: rotate(-2deg);
}

.relationship-chamber {
  position: absolute;
  left: 22%;
  top: 46%;
  width: 150px;
  height: 80px;
  border: 1px solid var(--line-sky);
  border-radius: 44px;
  background: color-mix(in srgb, var(--kin-skyblue) 7%, transparent);
}

.grammar-label { position: absolute; padding: 5px 9px; background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--fg-muted); font-size: 10px; backdrop-filter: blur(8px); }
.label-community { left: 12%; top: 27%; }
.label-alliance { right: 10%; top: 31%; }
.label-project { left: 44%; top: 30%; }
.label-relationship { left: 23%; top: 59%; }
.label-organization { left: 42%; bottom: 11%; }
.label-institution { right: 5%; top: 74%; }
.label-artifact { left: 53%; top: 64%; }

.grammar-persona { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); box-shadow: 0 0 0 7px color-mix(in srgb, var(--kid-moon-cream) 8%, transparent); }
.gp1 { left: 26%; top: 52%; }
.gp2 { left: 34%; top: 52%; }
.gp3 { left: 18%; top: 42%; }
.gp4 { left: 73%; top: 46%; }
.gp5 { left: 82%; top: 58%; }

.grammar-actor { position: absolute; left: 49%; top: 42%; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-elev); border: 2px solid var(--kin-camel); }
.grammar-artifact { position: absolute; left: 56%; top: 67%; width: 66px; height: 46px; background: var(--surface-elev); border: 1px solid var(--accent); clip-path: polygon(0 0, 80% 0, 100% 25%, 100% 100%, 0 100%); }
.grammar-institution { position: absolute; right: 7%; top: 77%; width: 70px; height: 42px; border: 2px double var(--kin-camel); background: var(--surface); }
.grammar-portal { position: absolute; left: 61%; top: 19%; width: 64px; height: 98px; border: 3px solid var(--accent); border-bottom: 0; border-radius: 38px 38px 0 0; box-shadow: 0 0 30px var(--accent-soft); }

.mockup-block { margin: var(--space-10) 0; }
.mockup-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-4); }
.mockup-meta h3 { margin: 0; font-size: 30px; }
.mockup-meta p { margin: 0; max-width: 700px; }

.desktop-frame, .browser-frame, .tv-frame {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: var(--shadow-lg);
}

.window-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--fg-dim);
  font-size: 10px;
}

.window-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-elev); }
.window-title { margin-left: 8px; }
.window-address { margin-left: auto; font-family: var(--font-mono); }

.studio-screen {
  position: relative;
  height: 690px;
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--kin-camel) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--kin-camel) 8%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 48% 48%, color-mix(in srgb, var(--kin-skyblue) 8%, transparent), transparent 28%),
    linear-gradient(155deg, var(--surface), var(--bg));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.studio-screen[data-hud="clear"] { --hud-alpha: .12; --field-light: 1; }
.studio-screen[data-hud="context"] { --hud-alpha: .56; --field-light: .82; }
.studio-screen[data-hud="focus"] { --hud-alpha: .94; --field-light: .52; }

.field-layer { position: absolute; inset: 0; filter: brightness(var(--field-light)); transition: filter 320ms ease; }
.studio-screen .field-chip { position: absolute; top: 16px; left: 18px; z-index: 10; }

.hud-controls { position: absolute; z-index: 20; top: 15px; right: 18px; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--glass); backdrop-filter: blur(12px); }
.hud-controls button { padding: 5px 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-soft); font-size: 10px; }
.hud-controls button[aria-pressed="true"] { background: var(--accent); color: var(--bg-deep); font-weight: 800; }

.project-ground { position: absolute; left: 18%; right: 16%; top: 15%; bottom: 15%; border: 1px solid var(--line-soft); border-radius: 48% 44% 12% 12%; background: color-mix(in srgb, var(--kin-camel) 4%, transparent); transform: perspective(900px) rotateX(4deg); }
.project-title { position: absolute; left: 22%; top: 19%; font-family: var(--font-display); font-size: 28px; color: var(--fg); }
.project-subtitle { position: absolute; left: 22%; top: 25%; font-size: 11px; color: var(--fg-soft); }

.studio-node {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 10px;
  border: 0;
  background: transparent;
}

.studio-node .node-shape { transition: transform 180ms ease, box-shadow 180ms ease; }
.studio-node:hover .node-shape, .studio-node.is-selected .node-shape { transform: translateY(-3px); box-shadow: var(--shadow-glow-accent); }
.studio-node.is-selected::after { content: "selected"; color: var(--accent); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.studio-node.persona .node-shape { width: 40px; height: 40px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); }
.studio-node.actor .node-shape { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface-elev); border: 2px solid var(--kin-camel); }
.studio-node.artifact .node-shape { width: 72px; height: 52px; background: var(--surface-elev); border: 1px solid var(--accent); clip-path: polygon(0 0, 82% 0, 100% 24%, 100% 100%, 0 100%); }
.studio-node.doc .node-shape { width: 78px; height: 56px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--kin-mint); }
.studio-node.sn1 { left: 30%; top: 38%; }
.studio-node.sn2 { left: 55%; top: 31%; }
.studio-node.sn3 { left: 46%; top: 58%; }
.studio-node.sn4 { left: 66%; top: 55%; }
.studio-node.sn5 { left: 24%; top: 62%; }

.relationship-zone-studio { position: absolute; left: 25%; top: 30%; width: 22%; height: 28%; border: 1px solid var(--line-sky); border-radius: 48%; background: color-mix(in srgb, var(--kin-skyblue) 4%, transparent); }
.relationship-zone-studio span { position: absolute; top: -10px; left: 22px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--glass); color: var(--accent); font-size: 9px; }

.context-action { position: absolute; z-index: 9; right: 3%; top: 18%; width: 250px; padding: 12px 14px; border: 1px solid var(--line-sky); border-radius: var(--radius-md); background: var(--glass-strong); box-shadow: var(--shadow-glow-accent); }
.context-action strong { display: block; margin-bottom: 5px; color: var(--fg); font-size: 12px; }
.context-action p { margin: 0 0 9px; color: var(--fg-soft); font-size: 10px; line-height: 1.45; }
.context-action .action-row { display: flex; gap: 6px; }
.context-action button { padding: 5px 9px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: transparent; color: var(--fg-muted); font-size: 9px; }
.context-action button:first-child { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); }

.gather-ring { position: absolute; z-index: 4; left: 39%; top: 43%; width: 250px; height: 190px; border: 2px dashed var(--accent); border-radius: 50%; opacity: 0; transform: scale(.84); transition: opacity 260ms ease, transform 260ms ease; }
.studio-screen.is-gathered .gather-ring { opacity: 1; transform: scale(1); }

.gather-tools { position: absolute; z-index: 18; left: 18px; bottom: 82px; display: flex; gap: 8px; }
.gather-tools button { padding: 7px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: var(--glass); color: var(--fg-muted); font-size: 10px; }
.gather-tools button:first-child { color: var(--accent); border-color: var(--line-sky); }

.hud-focus-panel { position: absolute; z-index: 14; top: 0; right: 0; bottom: 0; width: 35%; padding: 72px 20px 84px; border-left: 1px solid var(--border); background: var(--glass-strong); backdrop-filter: blur(20px); transform: translateX(105%); transition: transform 320ms cubic-bezier(.3,0,.2,1); }
.studio-screen[data-hud="focus"] .hud-focus-panel { transform: translateX(0); }
.hud-focus-panel .message { margin-bottom: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-muted); font-size: 11px; line-height: 1.5; }
.hud-focus-panel .message.member { margin-left: 18%; background: var(--accent); color: var(--bg-deep); border-color: var(--accent); }
.hud-focus-panel .mini-action { padding: 12px; border: 1px solid var(--line-sky); border-radius: var(--radius-md); color: var(--fg-muted); font-size: 10px; }

.studio-screen .ally-band { transition: background 320ms ease; }

.bench-screen { position: relative; height: 650px; background: radial-gradient(circle at 50% 48%, var(--accent-soft), transparent 24%), linear-gradient(155deg, var(--surface), var(--bg)); overflow: hidden; }
.bench-chip { position: absolute; left: 18px; top: 18px; }
.bench-agent { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; color: var(--fg); }
.bench-agent .pad { width: 190px; height: 130px; margin: 0 auto; border: 1px solid var(--line-sky); border-radius: 50%; background: var(--accent-soft); transform: perspective(500px) rotateX(55deg); }
.bench-agent .presence { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 45px; height: 45px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-deep); box-shadow: 0 0 0 8px var(--accent-soft); }
.bench-agent strong { display: block; margin-top: 8px; font-size: 13px; }
.bench-card { position: absolute; width: 250px; min-height: 130px; padding: 15px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--glass-strong); box-shadow: var(--shadow-md); }
.bench-card h4 { margin: 0 0 8px; font-family: var(--font-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bench-card p { margin: 0; font-size: 11px; line-height: 1.48; }
.bench-card.c1 { left: 4%; top: 14%; }
.bench-card.c2 { right: 4%; top: 14%; }
.bench-card.c3 { left: 4%; bottom: 16%; }
.bench-card.c4 { right: 4%; bottom: 16%; }
.bench-screen .ally-band { bottom: 16px; }

.interaction-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: var(--space-8); }
.flow-step { position: relative; padding: var(--space-5); border: 1px solid var(--border); background: var(--surface); min-height: 160px; }
.flow-step:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.flow-step:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 30px; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--bg-deep); }
.flow-step .step-no { font-family: var(--font-display); font-size: 28px; color: var(--kin-camel); }
.flow-step strong { display: block; margin: var(--space-2) 0; color: var(--fg); }
.flow-step p { margin: 0; font-size: 12px; }

.phone-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.phone-wrap { text-align: center; }
.phone-wrap h4 { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.phone-wrap p { margin: 0 auto; max-width: 250px; font-size: 12px; }

.phone {
  position: relative;
  width: min(100%, 286px);
  aspect-ratio: 390 / 844;
  margin: 0 auto;
  border: 8px solid var(--surface-elev);
  border-radius: 36px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.phone::before { content: ""; position: absolute; z-index: 30; left: 50%; top: 8px; transform: translateX(-50%); width: 36%; height: 20px; border-radius: var(--radius-pill); background: var(--bg-deep); }
.phone-status { position: absolute; z-index: 20; left: 16px; right: 16px; top: 12px; display: flex; justify-content: space-between; color: var(--fg-soft); font-size: 8px; }
.phone-field { position: absolute; inset: 0; background: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), radial-gradient(circle at 50% 36%, var(--accent-soft), transparent 35%), linear-gradient(155deg, var(--surface), var(--bg)); background-size: 32px 32px, 32px 32px, auto, auto; }
.phone .field-chip { position: absolute; z-index: 12; top: 48px; left: 14px; max-width: calc(100% - 28px); font-size: 9px; }
.phone .ally-band { left: 12px; right: 12px; bottom: 16px; min-height: 52px; padding: 8px 11px; border-radius: 20px; }
.phone .ally-copy { text-align: left; font-size: 9px; line-height: 1.35; }
.phone .voice-state { display: none; }
.phone-node { position: absolute; z-index: 7; text-align: center; color: var(--fg-muted); font-size: 8px; }
.phone-node .shape { margin: 0 auto 5px; }
.phone-node.persona .shape { width: 34px; height: 34px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); }
.phone-node.actor .shape { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-elev); border: 2px solid var(--kin-camel); }
.phone-node.artifact .shape { width: 52px; height: 38px; background: var(--surface-elev); border: 1px solid var(--accent); clip-path: polygon(0 0, 80% 0, 100% 25%, 100% 100%, 0 100%); }
.phone-node.p1 { left: 23%; top: 29%; }
.phone-node.p2 { right: 20%; top: 39%; }
.phone-node.p3 { left: 42%; top: 55%; }
.phone-portal { position: absolute; z-index: 4; right: 16%; top: 21%; width: 48px; height: 76px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 0 22px var(--accent-soft); }

.phone-lens { position: absolute; z-index: 10; left: 7%; right: 7%; top: 24%; min-height: 52%; padding: 18px 16px; border: 1px solid var(--line-sky); border-radius: 46% 46% var(--radius-xl) var(--radius-xl); background: color-mix(in srgb, var(--bg-deep) 84%, transparent); backdrop-filter: blur(14px); }
.lens-personas { display: flex; justify-content: center; gap: 34px; margin: 18px 0 15px; }
.lens-personas span { width: 38px; height: 38px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); }
.phone-lens h5 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 10px; color: var(--fg); }
.phone-lens p { margin: 0 0 10px; font-size: 9px; line-height: 1.45; }
.phone-lens .lens-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.phone-lens .lens-actions span { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--fg-muted); font-size: 8px; }
.phone-lens .lens-actions span:first-child { color: var(--accent); border-color: var(--line-sky); }

.phone-action { position: absolute; z-index: 11; left: 8%; right: 8%; top: 31%; padding: 16px; border: 1px solid var(--line-sky); border-radius: var(--radius-lg); background: var(--glass-strong); box-shadow: var(--shadow-glow-accent); text-align: left; }
.phone-action .action-label { color: var(--accent); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.phone-action h5 { margin: 8px 0 6px; font-family: var(--font-sans); font-size: 11px; color: var(--fg); }
.phone-action p { margin: 0 0 12px; font-size: 9px; line-height: 1.45; }
.hold-control { position: relative; height: 40px; display: grid; place-items: center; border: 1px solid var(--kid-sun-gold); border-radius: var(--radius-xs); color: var(--kid-sun-gold); font-size: 9px; overflow: hidden; }
.hold-control::before { content: ""; position: absolute; inset: 0; width: 36%; background: color-mix(in srgb, var(--kid-sun-gold) 13%, transparent); }

.voice-room { position: absolute; z-index: 10; left: 7%; right: 7%; top: 21%; min-height: 56%; padding: 16px; border: 1px solid var(--line-sky); border-radius: var(--radius-xl); background: var(--glass-strong); backdrop-filter: blur(16px); }
.voice-room .voice-title { color: var(--fg); font-size: 11px; font-weight: 700; }
.voice-room .voice-meta { margin: 3px 0 14px; color: var(--fg-soft); font-size: 8px; }
.voice-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.voice-person { text-align: center; color: var(--fg-muted); font-size: 8px; }
.voice-person span { display: block; width: 36px; height: 36px; margin: 0 auto 5px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--border-strong); }
.voice-person.speaking span { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.voice-room .transcript-state { margin-top: 15px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg-soft); font-size: 8px; }
.voice-room .mic-button { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--bg-deep); font-weight: 900; }

.tv-screen { position: relative; aspect-ratio: 16/9; background: radial-gradient(ellipse at 50% 100%, var(--accent-soft), transparent 48%), linear-gradient(155deg, var(--surface), var(--bg)); overflow: hidden; }
.tv-horizon { position: absolute; left: 8%; right: 8%; top: 18%; height: 58%; border-bottom: 1px solid var(--line-soft); border-radius: 50%; }
.tv-scene-title { position: absolute; left: 5%; top: 8%; }
.tv-scene-title h3 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 44px); }
.tv-room-safe { position: absolute; right: 4%; top: 8%; }
.tv-gather { position: absolute; left: 36%; top: 36%; width: 29%; height: 31%; border: 2px dashed var(--accent); border-radius: 50%; }
.tv-object { position: absolute; width: 86px; height: 64px; background: var(--surface-elev); border: 1px solid var(--line-sky); border-radius: var(--radius-md); color: var(--fg-muted); font-size: 10px; display: grid; place-items: center; text-align: center; }
.tv-object.t1 { left: 41%; top: 43%; transform: rotate(-6deg); }
.tv-object.t2 { left: 53%; top: 46%; transform: rotate(5deg); }
.tv-person { position: absolute; text-align: center; color: var(--fg-muted); font-size: 10px; }
.tv-person::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: var(--kin-camel); border: 2px solid var(--kid-moon-cream); }
.tv-person.tp1 { left: 21%; top: 46%; }
.tv-person.tp2 { right: 20%; top: 39%; }
.tv-ally { position: absolute; left: 5%; right: 5%; bottom: 5%; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--glass); color: var(--fg-muted); font-size: 11px; }

.controller-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.controller { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.controller-phone { width: 38px; height: 68px; border: 3px solid var(--surface-elev); border-radius: 9px; background: radial-gradient(circle at 50% 32%, var(--accent) 0 3px, transparent 4px), var(--bg); }
.controller strong { display: block; color: var(--fg); font-size: 12px; }
.controller span { color: var(--fg-soft); font-size: 10px; }

.browser-chrome { height: 74px; background: var(--surface); border-bottom: 1px solid var(--border); }
.browser-tabs { height: 31px; display: flex; align-items: end; gap: 4px; padding: 0 12px; }
.browser-tab { width: 190px; padding: 7px 12px; border-radius: 8px 8px 0 0; background: var(--surface-elev); color: var(--fg-muted); font-size: 9px; }
.browser-toolbar { height: 43px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--bg-deep); }
.browser-address { flex: 1; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg-soft); font-size: 9px; }
.express-chip { padding: 7px 11px; border: 1px solid var(--line-sky); border-radius: var(--radius-pill); color: var(--accent); font-size: 9px; }
.web-page { position: relative; min-height: 600px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; background: var(--kin-cream-white); color: var(--kin-black); }
.web-copy { padding: 68px 7%; }
.web-copy .web-kicker { color: var(--kin-accent-chestnut); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.web-copy h3 { max-width: 680px; margin: 12px 0 18px; color: var(--kin-black); font-size: clamp(34px, 4vw, 58px); }
.web-copy p { max-width: 680px; color: var(--kin-darkumber); font-size: 15px; line-height: 1.7; }
.page-card { width: 70%; height: 150px; margin-top: 32px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--kin-camel), var(--kin-cream)); }
.express-lens { align-self: stretch; padding: 24px 20px; border-left: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.express-lens .registered { display: inline-block; padding: 5px 8px; border: 1px solid var(--line-sky); border-radius: var(--radius-pill); color: var(--accent); font-size: 9px; }
.express-lens h4 { margin: 18px 0 8px; font-family: var(--font-sans); color: var(--fg); font-size: 14px; }
.express-lens p { color: var(--fg-soft); font-size: 11px; line-height: 1.5; }
.trace-list { margin: 18px 0; padding: 0; list-style: none; }
.trace-list li { padding: 9px 0; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: 10px; }
.express-actions { display: grid; gap: 7px; }
.express-actions button { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: transparent; color: var(--fg-muted); text-align: left; font-size: 10px; }
.express-actions button:first-child { background: var(--accent); border-color: var(--accent); color: var(--bg-deep); font-weight: 700; }

.continuity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.continuity-step { position: relative; min-height: 250px; padding: var(--space-6); background: var(--surface); border-right: 1px solid var(--border); }
.continuity-step:last-child { border-right: 0; }
.continuity-step::after { content: "→"; position: absolute; right: -13px; top: 50%; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--bg-deep); }
.continuity-step:last-child::after { display: none; }
.continuity-step .surface-name { color: var(--kin-camel); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.continuity-step h3 { margin: 12px 0; }
.continuity-step p { font-size: 13px; }
.same-object { margin-top: var(--space-6); padding: 12px; border: 1px solid var(--line-sky); border-radius: var(--radius-md); color: var(--accent); font-family: var(--font-mono); font-size: 10px; }

.matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.matrix { width: 100%; border-collapse: collapse; background: var(--surface); }
.matrix th, .matrix td { padding: 13px 15px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 12px; }
.matrix th { color: var(--kin-camel); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.matrix td { color: var(--fg-muted); }
.matrix tr:last-child td { border-bottom: 0; }
.matrix .yes { color: var(--accent); }

.decision-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.spaced-grid { margin-top: var(--space-5); }
.decision { display: grid; grid-template-columns: 42px 1fr; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.decision .number { font-family: var(--font-display); color: var(--kin-camel); font-size: 28px; }
.decision strong { display: block; color: var(--fg); margin-bottom: 5px; }
.decision p { margin: 0; font-size: 12px; }

.source-note { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); }
.source-note p, .source-note li { font-size: 13px; }

.footer { padding: 56px 0 72px; border-top: 1px solid var(--border); }
.footer-row { display: flex; justify-content: space-between; gap: var(--space-8); align-items: center; }
.footer img { width: 160px; }
.footer p { max-width: 620px; margin: 0; font-size: 13px; }

@media (max-width: 980px) {
  .site-nav a:not(.nav-brand) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-field { max-width: 680px; width: 100%; }
  .section-header { grid-template-columns: 1fr; }
  .card-grid.three, .card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interaction-flow { grid-template-columns: 1fr; gap: var(--space-2); }
  .flow-step, .flow-step:first-child, .flow-step:last-child { border-radius: var(--radius-md); }
  .flow-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -14px; transform: translateX(50%); }
  .continuity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continuity-step:nth-child(2) { border-right: 0; }
  .continuity-step:nth-child(2)::after { display: none; }
  .continuity-step:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .studio-screen { height: 600px; }
  .bench-card { width: 210px; }
  .web-page { grid-template-columns: 1fr; }
  .express-lens { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 680px) {
  .page-shell { width: min(100% - 24px, var(--page-max)); }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 50px; }
  .section { padding: 68px 0; }
  .card-grid.three, .card-grid.four, .card-grid.two, .phone-row, .controller-row, .continuity, .decision-list { grid-template-columns: 1fr; }
  .continuity-step { border-right: 0; border-bottom: 1px solid var(--border); }
  .continuity-step::after { display: none; }
  .hero-field { height: 440px; transform: none; }
  .grammar-board { min-height: 580px; }
  .grammar-label { display: none; }
  .desktop-frame { overflow-x: auto; }
  .studio-screen, .bench-screen { min-width: 900px; }
  .controller-row { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media print {
  .site-nav, .hero-actions, .hud-controls, .gather-tools { display: none !important; }
  body { background: var(--bg-deep); }
  .section, .hero { break-inside: avoid; }
  .mockup-block, .desktop-frame, .phone-row, .tv-frame, .browser-frame { break-inside: avoid; }
}