:root {
  color-scheme:light;
  --bg:#f8f7fa;
  --surface:#fff;
  --sunk:#f0edf4;
  --ink:#211a2d;
  --muted:#625b6f;
  --faint:#746c81;
  --line:#e3dfe9;
  --line-strong:#cfc8db;
  --danger:#b4413a;
  --violet:#4a2b7c;
  --violet-ink:#644490;
  --violet-soft:#ece6f5;
  --on-violet:#fff;
  --orange:#a64a1d;
  --orange-soft:#fbe9dd;
  --green:#2f7149;
  --green-soft:#e3f1e8;
  --term-bg:#fcfbfd;
  --term-ink:#302939;
  --display:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --body:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --bg:#151318;
    --surface:#1d1a22;
    --sunk:#28232e;
    --ink:#eeeaf3;
    --muted:#b4acbf;
    --faint:#a198ad;
    --line:#342d3f;
    --line-strong:#50455e;
    --danger:#ef8a80;
    --violet:#b59ad5;
    --violet-ink:#c6aee3;
    --violet-soft:#30263e;
    --on-violet:#1a1323;
    --orange:#ee9a66;
    --orange-soft:#3a2a20;
    --green:#85d1a3;
    --green-soft:#21372b;
    --term-bg:#1a171e;
    --term-ink:#e3dce9;
  }
}

* {
  box-sizing:border-box;
}

html {
  scroll-padding-top:88px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:1rem/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
}

button {
  font:inherit;
  cursor:pointer;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:2px solid var(--violet);
  outline-offset:4px;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  text-wrap:balance;
}

h1 {
  font-size:clamp(2.65rem,5.1vw,4.5rem);
  line-height:1.06;
  letter-spacing:-.025em;
}

h1 span {
  display:block;
  color:var(--violet-ink);
}

h2 {
  font-size:clamp(1.9rem,3.5vw,2.65rem);
  line-height:1.15;
  letter-spacing:-.025em;
}

h3 {
  font-size:1.15rem;
  line-height:1.35;
}

code,pre {
  font-family:var(--mono);
}

.wrap {
  max-width:1200px;
  padding-inline:32px;
  margin-inline:auto;
}

.skip {
  position:fixed;
  top:8px;
  left:8px;
  z-index:50;
  transform:translateY(-150%);
  padding:8px 16px;
  background:var(--surface);
}

.skip:focus {
  transform:none;
}

.site-head {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  border-bottom:1px solid transparent;
}

.site-head.scrolled {
  border-color:var(--line);
}

.bar {
  display:flex;
  gap:36px;
  align-items:center;
  height:76px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font:600 1.35rem var(--display);
}

.brand img {
  height:30px;
  width:auto;
}

.site-nav {
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
}

.site-nav .icon-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.site-nav .btn.small {
  white-space:nowrap;
  min-height:34px;
  padding:6px 14px;
  color:var(--ink);
}

.site-nav .btn.small.solid {
  margin-left:-16px;
  color:var(--bg);
}

.site-nav .btn.small.solid:hover {
  opacity:.88;
}

.site-nav a,footer a {
  font-size:.9rem;
  text-decoration:none;
  color:var(--muted);
}

.site-nav a:hover,footer a:hover {
  color:var(--ink);
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  text-decoration:none;
  font-weight:500;
  font-size:.9rem;
  background:var(--surface);
  color:var(--ink);
}

.btn:hover {
  background:var(--sunk);
}

.btn.solid {
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}

.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:64px;
  padding-block:72px 48px;
  align-items:end;
}

.label {
  font:500 .75rem/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.hero .label {
  margin-bottom:20px;
}

.hero-side {
  display:grid;
  gap:24px;
  padding-bottom:4px;
}

.hero-side p {
  font-size:1.125rem;
  color:var(--muted);
  max-width:34em;
}

.agents {
  display:grid;
  gap:12px;
  margin-top:22px;
}

.agents-label {
  font:500 .7rem/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.agent-list {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
}

.agent {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
}

.agent svg {
  width:20px;
  height:20px;
  flex:none;
  color:var(--muted);
}

/* OpenCode's mark is a solid block, so it reads heavier at the same size. */
.agent svg.oc {
  width:17px;
  height:17px;
  margin-inline:1.5px;
}

/* Workspace demo: mirrors the Holark app's holon view and uses its palette. */
.stage {
  padding-bottom:48px;
}

.app {
  --a-rail-hover:#eeedf2;
  --a-rail-text:#535a65;
  --a-rail-active:#e6e8eb;
  --a-rail-active-text:#292e36;
  --a-surface:#fff;
  --a-subtle:#f6f5f8;
  --a-hover:#eeedf2;
  --a-neutral:#74716b;
  --a-on-accent:#fff;
  --a-success-soft:#eaf7f2;
  --a-diff-add:#eaf7f0;
  --a-diff-del:#fff0ec;
  --a-rail:#f7f6f8;
  --a-rail-border:#eeecf1;
  --a-rail-muted:#777c82;
  --a-rail-faint:#9297a0;
  --a-head:#f7f8f9;
  --a-border:#eeebf2;
  --a-border-strong:#dfe1e5;
  --a-term:#fff;
  --a-term-text:#37343e;
  --a-term-muted:#74697e;
  --a-term-soft:#918698;
  --a-term-accent:#8a6aa7;
  --a-term-add:#397554;
  --a-term-del:#ad5868;
  --a-text:#242526;
  --a-muted:#676d74;
  --a-soft:#85818b;
  --a-pill:#fff;
  --a-shadow:#222a3312;
  --a-primary:#242526;
  --a-on-primary:#fff;
  --a-accent:#705092;
  --a-accent-soft:#eee8f6;
  --a-info:#5269c8;
  --a-badge-info:#7051ab;
  --a-warning:#a96112;
  --a-warning-head:#996317;
  --a-success:#16815f;
  --a-success-head:#367351;
  --a-danger:#b50928;
  --a-danger-soft:#ffe1e7;
  --a-purple:#5a499b;
  --a-purple-soft:#ebe7fa;
  --a-row-hover:rgb(255 255 255 / 55%);
  --a-row-hover-line:rgb(255 255 255 / 80%);
  --a-row-hover-shadow:0 1px 3px rgb(39 32 61 / 6%);
  --a-selected-ink:#2b1f45;
  --a-selected-ink-soft:#5a4a80;
  --a-selected-ring:#6a4aa8;
  --a-selected-line:rgb(112 81 171 / 28%);
  --a-selected-bg:linear-gradient(150deg,rgb(255 255 255 / 34%),rgb(255 255 255 / 4%) 70%),rgb(112 81 171 / 15%);
  --a-selected-bg-hover:linear-gradient(150deg,rgb(255 255 255 / 40%),rgb(255 255 255 / 8%) 70%),rgb(112 81 171 / 20%);
  --a-selected-shadow:inset 0 1px 0 rgb(255 255 255 / 50%),0 1px 2px rgb(60 40 110 / 8%);
  --a-idle:#747b85;
  --a-notice-bg:#fff4df;
  --a-notice-border:#d7aa68;
  --a-notice-text:#75571e;
  --a-avatar-border:#d3d6da;
  --a-letter:#737981;
  --a-badge-ring:#fbfafc;
  --a-count-bg:#edeef0;
  --a-panel-border:rgb(139 153 176 / .32);
  --a-panel-bg:
    radial-gradient(ellipse 160px 200px at 0% 0%, rgb(255 255 255 / .62), transparent 70%),
    radial-gradient(ellipse 240px 460px at 100% 60%, rgb(180 199 224 / .14), transparent 75%),
    radial-gradient(ellipse 220px 280px at 0% 100%, rgb(187 178 212 / .1), transparent 75%),
    linear-gradient(110deg, rgb(255 255 255 / .32), transparent 16%, transparent 84%, rgb(255 255 255 / .24)),
    rgb(218 224 234 / .30);
  --a-panel-shadow:
    inset 0 1px 0 rgb(255 255 255 / .98),
    inset 1px 0 0 rgb(255 255 255 / .92),
    inset -1px 0 0 rgb(255 255 255 / .65),
    inset 0 -1px 0 rgb(125 140 164 / .26),
    0 2px 6px rgb(39 32 61 / .04),
    0 12px 32px rgb(39 32 61 / .07);
  --a-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',var(--body);
  --a-mono:'SFMono-Regular',Consolas,'Liberation Mono',var(--mono);

  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  height:600px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  overflow:hidden;
  background:var(--a-term);
  color:var(--a-text);
  font-family:var(--a-sans);
}

.app[data-theme=dark] {
  --a-rail-hover:#2c2c31;
  --a-rail-text:#d7d7de;
  --a-rail-active:#303036;
  --a-rail-active-text:#ededf0;
  --a-surface:#242427;
  --a-subtle:#202023;
  --a-hover:#2a2a2e;
  --a-neutral:#9aa3ad;
  --a-on-accent:#181917;
  --a-success-soft:#1a3323;
  --a-diff-add:#1a3323;
  --a-diff-del:#3b211c;
  --a-rail:#1d1d20;
  --a-rail-border:#2c2c31;
  --a-rail-muted:#a0a0ab;
  --a-rail-faint:#7f7f8b;
  --a-head:#202023;
  --a-border:#2c2c31;
  --a-border-strong:#44444d;
  --a-term:#191a1b;
  --a-term-text:#ededf0;
  --a-term-muted:#aaaab5;
  --a-term-soft:#92929f;
  --a-term-accent:#b59ad5;
  --a-term-add:#70d89a;
  --a-term-del:#f19a8c;
  --a-text:#ededf0;
  --a-muted:#b1b1ba;
  --a-soft:#92929d;
  --a-pill:#303036;
  --a-shadow:rgb(0 0 0 / .24);
  --a-primary:#ededf0;
  --a-on-primary:#18181b;
  --a-accent:#b59ad5;
  --a-accent-soft:#302738;
  --a-info:#76aef5;
  --a-badge-info:#91a8ff;
  --a-warning:#e0a04b;
  --a-warning-head:#e0a04b;
  --a-success:#70d89a;
  --a-success-head:#70d89a;
  --a-danger:#e9574f;
  --a-danger-soft:#3b211c;
  --a-purple:#b7a5ff;
  --a-purple-soft:#302b42;
  --a-row-hover:rgb(255 255 255 / 9%);
  --a-row-hover-line:rgb(255 255 255 / 12%);
  --a-row-hover-shadow:0 0 transparent;
  --a-selected-ink:#f4efff;
  --a-selected-ink-soft:#cbbfe6;
  --a-selected-ring:#c9b4f2;
  --a-selected-line:rgb(181 154 213 / 32%);
  --a-selected-bg:linear-gradient(150deg,rgb(255 255 255 / 8%),transparent 70%),rgb(150 115 220 / 20%);
  --a-selected-bg-hover:linear-gradient(150deg,rgb(255 255 255 / 11%),rgb(255 255 255 / 2%) 70%),rgb(150 115 220 / 26%);
  --a-selected-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 1px 2px rgb(0 0 0 / 20%);
  --a-idle:#b1b1ba;
  --a-notice-bg:#3b3024;
  --a-notice-border:#8f6c40;
  --a-notice-text:#e1d6b5;
  --a-avatar-border:#44444d;
  --a-letter:#92929d;
  --a-badge-ring:#202023;
  --a-count-bg:#2a2a2e;
  --a-panel-border:rgb(220 214 235 / .22);
  --a-panel-bg:
    radial-gradient(ellipse 100% 420px at 0% 0%, rgb(235 229 255 / .14), transparent 72%),
    radial-gradient(ellipse 100% 360px at 100% 100%, rgb(187 170 224 / .055), transparent 75%),
    linear-gradient(135deg, rgb(255 255 255 / .035), transparent 40%, rgb(216 204 242 / .018)),
    rgb(24 24 30 / .56);
  --a-panel-shadow:
    inset 0 1px 0 rgb(255 255 255 / .24),
    inset 1px 0 0 rgb(255 255 255 / .08),
    inset 0 -1px 0 rgb(216 204 242 / .1),
    0 12px 36px rgb(0 0 0 / .28);
}

.app svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.app svg.harness {
  fill:currentColor;
  stroke:none;
}

.rail {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:12px;
  border-right:1px solid var(--a-rail-border);
  background:var(--a-rail);
  color:var(--a-rail-muted);
}

.rail button,.rail-full {
  position:relative;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
}

.rail button:hover {
  background:var(--a-rail-hover);
  color:var(--a-rail-text);
}

.rail button[aria-current=true] {
  background:var(--a-rail-active);
  color:var(--a-rail-active-text);
}

.rail button:focus-visible {
  outline:2px solid var(--a-accent);
  outline-offset:-2px;
}

.rail .rail-mark {
  width:36px;
  height:36px;
  margin-top:18px;
}

.rail .rail-mark:hover {
  background:transparent;
}

.rail-mark img {
  width:22px;
}

.rail-items {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:14px;
  margin-top:24px;
}

.rail-theme {
  margin-bottom:6px;
}

/* Rail tooltips, as in the app. */
.rail [data-tip]::after {
  content:attr(data-tip);
  position:absolute;
  z-index:5;
  left:44px;
  padding:5px 8px;
  border-radius:5px;
  background:var(--a-surface);
  box-shadow:0 4px 14px var(--a-shadow);
  color:var(--a-text);
  font-size:11px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity 120ms ease;
}

.rail [data-tip]:hover::after,.rail [data-tip]:focus-visible::after {
  opacity:1;
}

.rail svg {
  width:19px;
  height:19px;
  stroke-width:2;
}

.rail .sun,.app[data-theme=dark] .rail .moon {
  display:none;
}

.app[data-theme=dark] .rail .sun {
  display:block;
}

.rail small {
  margin-top:6px;
  color:var(--a-rail-faint);
  font-size:9px;
  font-weight:700;
}

.main {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  margin-right:192px;
}

.holon-view {
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:0;
}

.app:not([data-view=holon]) .holon-view,.app[data-view=holon] .page {
  display:none;
}

.head {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:52px;
  padding:0 12px 0 16px;
  background:var(--a-head);
  box-shadow:inset 0 -1px var(--a-border);
}

.tabs {
  flex:1;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar {
  display:none;
}

.tab-track {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  height:40px;
}

/* The selection pill slides between tabs, as in the app. */
.tab-indicator {
  position:absolute;
  z-index:-1;
  top:5px;
  left:0;
  height:30px;
  border-radius:999px;
  background:var(--a-pill);
  box-shadow:0 1px 5px var(--a-shadow);
  transition:transform 240ms cubic-bezier(.22,.8,.25,1),width 240ms cubic-bezier(.22,.8,.25,1);
}

.tab-indicator.instant {
  transition:none;
}

.tab {
  display:inline-flex;
  flex:none;
  align-items:center;
  height:30px;
  border-radius:999px;
  color:var(--a-muted);
  font-size:12px;
  line-height:18px;
  white-space:nowrap;
  transition:color 160ms ease;
}

.tab:not(.on):hover {
  background:color-mix(in srgb,var(--a-text) 5%,transparent);
  color:var(--a-text);
}

.tab.on {
  color:var(--a-text);
}

.tab-main {
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:6px 14px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:inherit;
}

.tab.on .tab-main {
  padding-right:4px;
}

.tab-main:focus-visible,.tab-close:focus-visible,.tab-add:focus-visible {
  outline:1px solid var(--a-info);
  outline-offset:-2px;
}

.tab-icon svg {
  display:block;
  width:16px;
  height:16px;
}

.tab-icon.permission,.tab-icon.input {
  color:var(--a-warning);
}

.tab-icon.working {
  color:var(--a-info);
}

.tab-icon.completed {
  color:var(--a-success);
}

.tab-icon.idle,.tab-icon.neutral {
  color:var(--a-neutral);
}

.tab-actions {
  display:flex;
  align-items:center;
  padding-right:4px;
  color:var(--a-muted);
}

.tab-actions::before {
  content:'';
  width:1px;
  height:14px;
  margin:0 3px;
  background:var(--a-border-strong);
}

.tab-actions i,.tab-close {
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
}

.tab-close:hover {
  background:var(--a-hover);
  color:var(--a-text);
}

.tab-actions svg {
  width:12px;
  height:12px;
}

.tab-add {
  display:grid;
  flex:none;
  place-items:center;
  width:30px;
  height:30px;
  margin-left:2px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--a-muted);
}

.tab-add:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.tab-add:not(:disabled):hover {
  background:var(--a-hover);
  color:var(--a-text);
}

.tab-add svg {
  width:16px;
  height:16px;
}

.head-pr {
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--a-primary);
  color:var(--a-on-primary);
  font-size:12px;
  line-height:18px;
  white-space:nowrap;
}

.head-pr {
  border:0;
  font-family:var(--a-sans);
  cursor:pointer;
}

.head-pr[hidden] {
  display:none;
}

.head-pr.ghost {
  border:1px solid var(--a-border-strong);
  background:var(--a-surface);
  color:var(--a-text);
}

.head-pr.ghost:hover {
  background:var(--a-hover);
}

.head-pr svg {
  width:15px;
  height:15px;
}

.head-more {
  display:grid;
  flex:none;
  place-items:center;
  width:28px;
  height:30px;
  color:var(--a-soft);
}

.head-more svg {
  width:18px;
  height:18px;
  fill:currentColor;
  stroke:none;
}

.body {
  display:flex;
  flex:1;
  min-height:0;
}

.changes {
  display:flex;
  flex:0 0 32px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:32px;
  padding:0;
  border:0;
  border-right:1px solid var(--a-border);
  background:var(--a-head);
  color:var(--a-muted);
  font-family:var(--a-sans);
}

.changes:hover,.changes[aria-expanded=true] {
  background:var(--a-accent-soft);
  color:var(--a-accent);
}

.changes:focus-visible {
  outline:1px solid var(--a-term-muted);
  outline-offset:-2px;
}

.changes svg {
  width:15px;
  height:15px;
  transition:transform 160ms ease;
}

.changes[aria-expanded=true] svg {
  transform:rotate(180deg);
}

.changes-summary {
  display:flex;
  align-items:center;
  gap:10px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:10px;
  line-height:1.5;
  white-space:nowrap;
}

.changes-summary b {
  font-weight:700;
}

.changes-summary .add {
  color:var(--a-term-add);
}

.changes-summary .del {
  color:var(--a-term-del);
}

.term {
  flex:1;
  margin:0;
  padding:22px 26px;
  overflow:auto;
  background:var(--a-term);
  color:var(--a-term-text);
  font:12px/1.75 var(--a-mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.term span {
  display:block;
}

.term .d {
  color:var(--a-term-soft);
}

.term .p {
  color:var(--a-term-accent);
}

.term .v {
  color:var(--a-term-muted);
}

.term .g {
  color:var(--a-term-add);
}

.term .o {
  color:var(--a-warning);
}

.term .ask {
  margin-top:6px;
  padding:10px 12px;
  border:1px solid var(--a-notice-border);
  border-radius:6px;
  background:var(--a-notice-bg);
  color:var(--a-notice-text);
}

.app .term .code i {
  display:inline-block;
  width:3ch;
  margin-right:2ch;
  color:var(--a-term-soft);
  font-style:normal;
  text-align:right;
  user-select:none;
}

.app .review {
  display:none;
  flex:1;
  min-width:0;
  min-height:0;
}

.app.reviewing .term {
  display:none;
}

.app.reviewing .review {
  display:flex;
}

.app .review-empty {
  display:grid;
  flex:1;
  place-items:center;
  color:var(--a-soft);
  font-size:12px;
}

.app .review-side {
  display:flex;
  flex:0 0 200px;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--a-border);
  background:var(--a-subtle);
  font-size:11px;
}

.app .review-title {
  padding:14px 14px 12px;
  border-bottom:1px solid var(--a-border);
  color:var(--a-text);
  font-size:12px;
  font-weight:600;
}

.app .review-sec {
  display:flex;
  justify-content:space-between;
  padding:12px 14px 6px;
  color:var(--a-soft);
}

.app .review-commit {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:4px 14px 8px;
  color:var(--a-muted);
}

.app .review-commit em {
  color:var(--a-accent);
  font-style:normal;
}

.app .review-files {
  margin:0;
  padding:0 8px;
  list-style:none;
}

.app .review-files li {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:6px;
  border-radius:6px;
  color:var(--a-text);
}

.app .review-files li:first-child {
  background:var(--a-hover);
}

.app .review-files span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.app .review-files small {
  color:var(--a-soft);
  font-size:inherit;
}

.app .st-M,.app .st-A {
  flex:none;
  color:var(--a-warning);
  font:normal 600 10px/1.6 var(--a-mono);
}

.app .st-A {
  color:var(--a-success);
}

.app .review-publish {
  display:grid;
  gap:6px;
  margin-top:auto;
  padding:12px;
  text-align:center;
}

.app .review-publish small {
  color:var(--a-soft);
  font-size:10px;
}

/* Solid purple marks controls that start AI work, as DESIGN.md requires. */
.app .ai-solid {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:5px 12px;
  border:0;
  border-radius:7px;
  background:var(--a-accent);
  color:var(--a-on-accent);
  font:500 12px/18px var(--a-sans);
  white-space:nowrap;
}

.app .ai-solid svg {
  width:14px;
  height:14px;
}

.app .ai-solid kbd {
  padding:0 4px;
  border-radius:4px;
  background:rgb(255 255 255 / .2);
  font:600 9px/16px var(--a-sans);
}

.app .review-main {
  flex:1;
  min-width:0;
  overflow:auto;
}

.app .review-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 16px;
  border-bottom:1px solid var(--a-border);
  font-size:12px;
  white-space:nowrap;
}

.app .review-head span {
  color:var(--a-soft);
}

.app .review-stat {
  margin-left:auto;
}

.app .review-stat .add,.app .diff-name .add {
  color:var(--a-term-add);
  font-style:normal;
}

.app .review-stat .del,.app .diff-name .del {
  color:var(--a-term-del);
  font-style:normal;
}

.app .diff-file {
  margin:12px;
  overflow:hidden;
  border:1px solid var(--a-border);
  border-radius:8px;
  font:11px/1.9 var(--a-mono);
}

.app .diff-name {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-bottom:1px solid var(--a-border);
  background:var(--a-subtle);
  color:var(--a-term-text);
}

.app .diff-name span {
  margin-left:auto;
}

.app .dl {
  display:grid;
  grid-template-columns:34px 16px minmax(0,1fr);
  color:var(--a-term-text);
}

.app .dl span {
  color:var(--a-term-soft);
  text-align:right;
}

.app .dl span:nth-child(2) {
  text-align:center;
}

.app .dl code {
  overflow:hidden;
  font:inherit;
  text-overflow:ellipsis;
  white-space:pre;
}

.app .dl.add {
  background:var(--a-diff-add);
}

.app .dl.del {
  background:var(--a-diff-del);
}

/* App pages */
.app .page {
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  background:var(--a-surface);
}

.app[data-theme=dark] .page {
  background:var(--a-term);
}

.app .page-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 14px 22px;
}

.app .page-title {
  display:flex;
  flex:none;
  align-items:baseline;
  gap:6px;
  font-size:14px;
  white-space:nowrap;
}

.app .page-title b {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
}

.app .page-title span {
  color:var(--a-soft);
}

.app .page-search {
  display:flex;
  flex:1;
  align-items:center;
  gap:8px;
  min-width:0;
  height:32px;
  padding:0 8px 0 12px;
  border-radius:999px;
  background:var(--a-hover);
  color:var(--a-soft);
  font-size:11px;
  white-space:nowrap;
}

.app .page-search span {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app .page-search svg {
  flex:none;
  width:14px;
  height:14px;
}

.app .page-search kbd,.app .repo-branch kbd {
  padding:1px 5px;
  border:1px solid var(--a-border-strong);
  border-radius:5px;
  background:var(--a-surface);
  font:9px/14px var(--a-sans);
}

.app .page-new {
  border-radius:999px;
}

.app .pill-btn {
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 12px;
  border:1px solid var(--a-border-strong);
  border-radius:999px;
  background:var(--a-surface);
  color:var(--a-muted);
  font-size:12px;
  white-space:nowrap;
}

.app .pill-btn svg {
  width:14px;
  height:14px;
}

.app .page-body {
  padding:0 16px 20px 22px;
  font-size:12px;
}

/* Repository */
/* A shared toolbar keeps the branch picker and the Files/Changes switch in place. */
.app .repo-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.app .repo-changes {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:18px;
  margin-top:6px;
}

.app .repo-history {
  padding-right:14px;
  border-right:1px solid var(--a-border);
}

.app .repo-branch {
  display:flex;
  align-items:center;
  gap:8px;
  width:230px;
  padding:4px 2px;
}

.app .repo-branch svg {
  width:15px;
  height:15px;
}

.app .repo-branch kbd {
  margin-left:auto;
}

.app .repo-day {
  display:flex;
  justify-content:space-between;
  padding:4px 2px 6px;
  color:var(--a-soft);
  font-size:11px;
}

.app .repo-commit {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 8px;
  width:100%;
  padding:7px 8px;
  border:0;
  border-left:2px solid transparent;
  background:transparent;
  color:var(--a-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.app .repo-commit:hover {
  background:var(--a-hover);
}

.app .repo-commit.on {
  border-left-color:var(--a-text);
}

.app .repo-commit b {
  overflow:hidden;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.app .repo-commit span {
  grid-column:1;
  color:var(--a-soft);
  font:10px var(--a-mono);
}

.app .repo-commit time {
  grid-row:1;
  grid-column:2;
  color:var(--a-soft);
  font-size:10px;
}

.app .seg {
  display:inline-flex;
  gap:2px;
  padding:3px;
  border-radius:8px;
  background:var(--a-hover);
}

.app .seg button {
  cursor:pointer;
}

.app .seg span,.app .seg button {
  padding:4px 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--a-muted);
  font:12px/18px var(--a-sans);
}

.app .seg .on {
  background:var(--a-surface);
  box-shadow:0 1px 3px var(--a-shadow);
  color:var(--a-text);
}

.app .repo-path {
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 8px;
  color:var(--a-muted);
}

.app .repo-path svg,.app .tr svg {
  width:14px;
  height:14px;
}

.app .repo-path code {
  margin-left:auto;
  color:var(--a-soft);
  font:10px var(--a-mono);
}

.app .th,.app .tr {
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px 80px;
  gap:8px;
  padding:7px 2px;
  border-bottom:1px solid var(--a-border);
}

.app .th {
  color:var(--a-soft);
  font-size:11px;
}

.app .th span:last-child,.app .tr span:last-child {
  text-align:right;
}

.app .tr span {
  color:var(--a-muted);
}

.app .tr span:first-child {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--a-text);
}

.app .tr span:first-child svg {
  color:var(--a-soft);
}

.app .readme {
  margin-top:14px;
}

.app .readme small {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--a-soft);
  font-size:10px;
}

.app .readme small svg {
  width:12px;
  height:12px;
}

.app .readme h4 {
  margin:8px 0 6px;
  font-size:18px;
  font-weight:600;
}

.app .readme p {
  margin:0;
  color:var(--a-muted);
  line-height:1.7;
}

/* Commit details in the Changes view */
.app .repo-commit-view {
  min-width:0;
}

.app .commit-meta {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px;
  margin:4px 0 0;
  color:var(--a-soft);
  font-size:11px;
}

.app .commit-meta dd {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin:0;
  color:var(--a-muted);
}

.app .commit-meta code {
  overflow:hidden;
  font:10px var(--a-mono);
  text-overflow:ellipsis;
}

.app .commit-meta svg {
  flex:none;
  width:12px;
  height:12px;
  color:var(--a-soft);
}

.app .repo-commit-view h4 {
  margin:16px 0 6px;
  font-size:14px;
  font-weight:500;
}

.app .repo-commit-view p {
  margin:0;
  color:var(--a-muted);
}

.app .commit-sum {
  display:flex;
  align-items:center;
  gap:8px;
  margin:18px 0 8px;
}

.app .commit-sum span {
  margin-left:auto;
  color:var(--a-muted);
}

.app .commit-sum em,.app .diff-name em.add,.app .diff-name em.del {
  font-style:normal;
  font-weight:600;
}

.app .commit-sum .add,.app .diff-name .add {
  color:var(--a-success);
}

.app .commit-sum .del,.app .diff-name .del {
  color:var(--a-danger);
}

.app .repo-commit-view .diff-file {
  margin:0 0 10px;
}

.app .diff-name svg {
  width:12px;
  height:12px;
  color:var(--a-soft);
}

/* The profile button is a round icon, as in the app. */
.app .page-profile {
  justify-content:center;
  width:30px;
  padding:0;
}

/* Lists: My work, pull requests, issues */
.app .work-bar,.app .filter-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.app .work-bar {
  padding-bottom:12px;
}

.app .sync {
  margin-left:auto;
}

.app .chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:4px 11px;
  border:1px solid var(--a-border-strong);
  border-radius:7px;
  background:var(--a-surface);
  color:var(--a-text);
  font:12px/18px var(--a-sans);
  white-space:nowrap;
}

.app button.chip:hover {
  border-color:var(--a-soft);
}

.app .chip span {
  color:var(--a-muted);
}

.app .chip.on {
  border-color:color-mix(in srgb,var(--a-accent) 45%,transparent);
  background:var(--a-accent-soft);
  color:var(--a-accent);
}

.app .chip.on span {
  color:inherit;
}

.app .chip b {
  font-weight:600;
}

.app .chip svg {
  width:12px;
  height:12px;
}

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

.app .row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 6px;
  border-bottom:1px solid var(--a-border);
}

.app .row > svg {
  flex:none;
  width:16px;
  height:16px;
  color:var(--a-soft);
}

.app .row[data-open-issue] {
  cursor:pointer;
}

.app .row[data-open-issue]:hover {
  background:var(--a-hover);
}

.app .row-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.app .row-copy b {
  overflow:hidden;
  font-size:12.5px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.app .row-copy > span {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color:var(--a-soft);
  font-size:11px;
}

.app .tag {
  padding:0 5px;
  border:1px solid var(--a-border-strong);
  border-radius:4px;
  font-style:normal;
}

.app .avatars {
  display:flex;
  flex:none;
  gap:3px;
}

.app .avatars i {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--a-hover);
  color:var(--a-muted);
  font:normal 600 9px/1 var(--a-sans);
}

.app .state {
  flex:none;
  min-width:46px;
  color:var(--a-success);
  font-size:11px;
  font-weight:600;
  text-align:right;
}

.app .state.draft {
  color:var(--a-soft);
}

.app .state.merged {
  color:var(--a-accent);
}

.app .filters {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--a-border);
  border-radius:10px;
}

.app .filter-search {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:34px;
  padding:0 12px;
  border:1px solid var(--a-border-strong);
  border-radius:8px;
  color:var(--a-soft);
}

.app .filter-search svg {
  width:14px;
  height:14px;
}

.app .cards {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}

.app .card {
  border:1px solid var(--a-border);
  border-radius:10px;
  padding:11px 12px;
}

.app .labels {
  display:flex;
  gap:4px;
}

.app .issue-label {
  padding:0 6px;
  border-radius:999px;
  background:var(--a-hover);
  color:var(--a-muted);
  font:normal 600 10px/16px var(--a-sans);
}

.app .issue-label.bug {
  background:var(--a-diff-del);
  color:var(--a-danger);
}

.app .issue-label.enhancement {
  background:var(--a-accent-soft);
  color:var(--a-accent);
}

.app .issue-label.documentation {
  background:var(--a-success-soft);
  color:var(--a-success);
}

.app .gh {
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:4px;
  color:var(--a-muted);
  font-size:11px;
}

.app .gh svg {
  width:12px;
  height:12px;
}

.app .start-agent {
  flex:none;
}

.app .start-agent:hover {
  background:color-mix(in srgb,var(--a-accent) 88%,var(--a-text));
}

.app .row[data-open-pr-page] {
  cursor:pointer;
}

.app .row[data-open-pr-page]:hover {
  background:var(--a-hover);
}

.app .holon-tag {
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.app .holon-tag svg {
  width:11px;
  height:11px;
}

/* Pull request page mockup */
.app .pr-page {
  padding:16px 16px 24px 22px;
  font-size:12px;
}

.app .pr-top {
  display:flex;
  align-items:center;
  gap:10px;
}

.app .pr-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--a-success) 30%,transparent);
  border-radius:999px;
  background:var(--a-success-soft);
  color:var(--a-success);
  font-size:11px;
  font-weight:600;
}

.app .pr-badge.merged {
  border-color:color-mix(in srgb,var(--a-purple) 30%,transparent);
  background:var(--a-purple-soft);
  color:var(--a-purple);
}

.app .pr-badge.draft {
  border-color:var(--a-border-strong);
  background:var(--a-hover);
  color:var(--a-muted);
}

.app .pr-merge.off {
  border-color:var(--a-border);
  background:var(--a-subtle);
  color:var(--a-soft);
  font-weight:500;
}

.app .pr-empty-note {
  margin:0;
  padding:14px;
  border:1px dashed var(--a-border-strong);
  border-radius:8px;
  color:var(--a-soft);
}

.app .pr-badge svg {
  width:12px;
  height:12px;
}

.app .pr-number {
  color:var(--a-soft);
}

.app .pr-more {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-left:auto;
  color:var(--a-muted);
}

.app .pr-more svg {
  width:16px;
  height:16px;
}

.app .pr-h {
  margin:14px 0 8px;
  color:var(--a-text);
  font:600 22px/1.2 var(--a-sans);
  letter-spacing:-.02em;
}

.app .pr-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color:var(--a-muted);
  font-size:11px;
}

.app .pr-meta svg {
  width:12px;
  height:12px;
  color:var(--a-soft);
}

.app .pr-meta code,.app .pr-commits code {
  font:11px var(--a-mono);
}

.app .pr-tabs {
  display:flex;
  gap:4px;
  margin-top:16px;
  border-bottom:1px solid var(--a-border);
}

.app .pr-tabs button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:-1px;
  padding:8px 6px 9px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--a-muted);
  font:12px var(--a-sans);
  white-space:nowrap;
  cursor:pointer;
}

.app .pr-tabs button:hover {
  color:var(--a-text);
}

.app .pr-tabs button.on {
  border-bottom-color:var(--a-accent);
  color:var(--a-text);
}

.app .pr-tabs i {
  padding:0 5px;
  border-radius:4px;
  background:var(--a-hover);
  color:var(--a-muted);
  font:normal 10px/16px var(--a-sans);
}

.app .pr-tabs em,.app .pr-file em {
  font:normal 10px var(--a-mono);
}

.app .pr-tabs .add,.app .pr-file .add {
  color:var(--a-term-add);
}

.app .pr-tabs .del,.app .pr-file .del {
  color:var(--a-term-del);
}

.app .pr-body {
  padding-top:16px;
}

.app .pr-body .diff-file {
  margin:10px 0 0;
}

.app .pr-overview {
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:20px;
  align-items:start;
}

.app .pr-main {
  display:grid;
  gap:10px;
  min-width:0;
}

.app .pr-sec {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.app .pr-sec > b {
  font-size:13px;
  font-weight:600;
}

.app .pr-sec-actions {
  display:flex;
  gap:12px;
  color:var(--a-muted);
  font-size:11px;
  font-weight:600;
}

.app .pr-sec-actions .ai-text {
  color:var(--a-accent);
}

.app .pr-desc {
  margin:0 0 8px;
  color:var(--a-muted);
  line-height:1.55;
}

.app .pr-comment {
  padding:10px 12px;
  border:1px solid var(--a-border);
  border-radius:8px;
  background:var(--a-surface);
}

.app .pr-comment header {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  color:var(--a-soft);
  font-size:10.5px;
}

.app .pr-comment header b {
  color:var(--a-text);
  font-size:12px;
  font-weight:600;
}

.app .pr-comment header span {
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.app .pr-comment header svg {
  width:11px;
  height:11px;
}

.app .pr-comment p {
  margin:6px 0 0;
  color:var(--a-text);
  line-height:1.5;
}

.app .pr-comment .diff-file {
  margin:8px 0 0;
}

.app .pr-foot {
  display:flex;
  margin-top:8px;
}

.app .pr-comment.resolved p,.app .pr-comment.resolved header b {
  color:var(--a-soft);
}

.app .pr-resolved {
  margin-left:auto;
}

.app .pr-progress {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--a-accent);
  font-size:11px;
}

.app .pr-progress svg {
  width:12px;
  height:12px;
}

.app .pr-page [data-open-holon]:not(.ai-solid) {
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

.app .pr-side {
  display:grid;
  gap:16px;
}

.app .pr-card {
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--a-border);
  border-radius:10px;
  background:var(--a-surface);
}

.app .pr-card h5 {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px;
  font-size:13px;
  font-weight:600;
}

.app .pr-card h5 svg {
  width:14px;
  height:14px;
  color:var(--a-soft);
}

.app .pr-row {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--a-muted);
  font-size:11px;
}

.app .pr-row b {
  color:var(--a-text);
  font-weight:600;
}

.app .pr-row svg {
  flex:none;
  width:13px;
  height:13px;
}

.app .pr-row.ok {
  color:var(--a-success);
}

.app .pr-row.soft {
  color:var(--a-soft);
}

.app .pr-resolve {
  width:100%;
  cursor:pointer;
}

.app .pr-merge {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:4px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb,var(--a-success) 30%,transparent);
  border-radius:7px;
  background:var(--a-success-soft);
  color:var(--a-success);
  font-size:12px;
  font-weight:600;
}

.app .pr-merge.done {
  border-color:color-mix(in srgb,var(--a-purple) 30%,transparent);
  background:var(--a-purple-soft);
  color:var(--a-purple);
}

.app .pr-merge svg {
  width:14px;
  height:14px;
}

.app .pr-people {
  display:grid;
  gap:6px;
  font-size:11px;
}

.app .pr-people b {
  font-weight:600;
}

.app .pr-people span {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  color:var(--a-muted);
}

.app .pr-people i {
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:1px solid var(--a-border-strong);
  border-radius:50%;
  font:normal 600 9px/1 var(--a-sans);
}

.app .pr-files {
  border:1px solid var(--a-border);
  border-radius:8px;
}

.app .pr-file {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  font:11px var(--a-mono);
}

.app .pr-file + .pr-file {
  border-top:1px solid var(--a-border);
}

.app .pr-file span {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:1000px) {
  .app .page-profile,.app .hide-sm {
    display:none;
  }
  .app .repo-changes {
    grid-template-columns:minmax(0,1fr);
  }
  .app .repo-history {
    padding-right:0;
    border-right:0;
  }
  .app .repo-commit:nth-of-type(n+4) {
    display:none;
  }
  .app .repo-branch {
    width:auto;
  }
  .app .repo-branch kbd {
    display:none;
  }
}

/* Continue the Holon header behind the Holons panel, as the app does, so the workspace reads as one surface. */
.app[data-view=holon]::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:192px;
  height:52px;
  background:var(--a-head);
  box-shadow:inset 0 -1px var(--a-border);
  pointer-events:none;
}

.holons {
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  width:168px;
  padding:0 12px;
  overflow:hidden;
  border:1px solid var(--a-panel-border);
  border-radius:22px;
  background:var(--a-panel-bg);
  box-shadow:var(--a-panel-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  transition:width 120ms ease-out;
}

@media(hover:hover) {
  .holons:hover,.holons:focus-within {
    width:340px;
  }
}

.holons-head {
  display:flex;
  flex:none;
  align-items:center;
  gap:8px;
  height:54px;
}

.holons-head b {
  font-size:14px;
  font-weight:600;
}

.holons-count {
  padding:1px 5px;
  border-radius:999px;
  background:var(--a-count-bg);
  color:var(--a-muted);
  font-size:10px;
}

.holons-head svg {
  width:16px;
  height:16px;
  margin-left:auto;
  color:var(--a-muted);
}

.holons-list {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:1px;
  min-height:0;
  padding-bottom:8px;
  overflow-y:auto;
  scrollbar-width:none;
}

.grp {
  display:flex;
  justify-content:space-between;
  gap:4px;
  margin:16px 0 6px;
  padding:5px 4px;
  border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);
  font-size:11px;
  font-weight:600;
  line-height:16px;
  white-space:nowrap;
}

.grp:first-child {
  margin-top:0;
}

.grp.permission,.grp.input {
  color:var(--a-warning-head);
}

.grp.completed {
  color:var(--a-success-head);
}

.grp.working {
  color:var(--a-accent);
}

.grp.idle {
  color:var(--a-idle);
}

.holon {
  position:relative;
  display:flex;
  flex:none;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--a-text);
  font-family:var(--a-sans);
  text-align:left;
}

.holon:hover {
  background:var(--a-row-hover);
  box-shadow:inset 0 0 0 1px var(--a-row-hover-line),var(--a-row-hover-shadow);
}

.holon[aria-pressed=true] {
  background:var(--a-selected-bg);
  box-shadow:inset 0 0 0 1px var(--a-selected-line),var(--a-selected-shadow);
}

.holon[aria-pressed=true]:hover {
  background:var(--a-selected-bg-hover);
}

.holon[aria-pressed=true] .holon-copy b {
  color:var(--a-selected-ink);
  font-weight:600;
}

.holon[aria-pressed=true] .meta,.holon[aria-pressed=true] .meta .tok:not(.warn):not(.danger) {
  color:var(--a-selected-ink-soft);
}

.holon:focus-visible {
  outline:1px solid var(--a-text);
  outline-offset:-2px;
}

.av {
  position:relative;
  display:grid;
  flex:0 0 29px;
  place-items:center;
  height:29px;
  border:1px solid var(--a-avatar-border);
  border-radius:50%;
  color:var(--a-letter);
  font-size:12px;
  line-height:1;
}

.holon[aria-pressed=true] .av {
  border-color:var(--a-selected-ring);
  color:var(--a-selected-ring);
}

.av.permission,.av.input,.holon[aria-pressed=true] .av.permission,.holon[aria-pressed=true] .av.input {
  border-color:var(--a-warning);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a-warning) 14%,transparent);
}

.av i {
  position:absolute;
  right:-3px;
  bottom:-2px;
  display:grid;
  place-items:center;
  width:12px;
  height:12px;
  border:2px solid var(--a-badge-ring);
  border-radius:50%;
  color:#fff;
  font:normal 700 8px/8px var(--a-sans);
}

.av.permission i,.av.input i {
  background:var(--a-warning);
}

.av.completed i {
  background:var(--a-success);
}

.av.working i {
  background:var(--a-badge-info);
}

.av.idle i {
  background:var(--a-idle);
}

.holon-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
}

.holon-copy b {
  overflow:hidden;
  font-size:12px;
  font-weight:500;
  line-height:17px;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);
}

.meta {
  display:flex;
  align-items:center;
  gap:4px;
  overflow:hidden;
  color:var(--a-soft);
  font-size:10px;
  line-height:14px;
  white-space:nowrap;
}

.meta svg {
  flex:none;
  width:11px;
  height:11px;
}

.meta.long {
  display:none;
}

@media(hover:hover) {
  .holons:is(:hover,:focus-within) .meta.short {
    display:none;
  }
  .holons:is(:hover,:focus-within) .meta.long {
    display:flex;
  }
}

.meta .permission,.meta .input {
  color:var(--a-warning);
}

.meta .completed {
  color:var(--a-success);
}

.meta .tok {
  font-weight:700;
}

.meta .tok.warn {
  color:var(--a-warning);
}

.meta .tok.danger {
  padding:0 3px;
  border-radius:4px;
  background:var(--a-danger-soft);
  color:var(--a-danger);
}

/* Holons sharing a pull request sit under one calm header, as in the app. */
.independent,.pr-holons {
  display:flex;
  flex-direction:column;
  gap:1px;
}

.pr-group {
  display:flex;
  flex:none;
  flex-direction:column;
  gap:1px;
  margin-top:6px;
}

.independent + .pr-group {
  margin-top:12px;
}

.pr-head {
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  min-height:30px;
  padding:0 3px 0 2px;
  border-radius:8px;
  color:var(--a-text);
  font-size:12px;
  line-height:16px;
}

.pr-toggle {
  display:grid;
  flex:0 0 0;
  place-items:center;
  width:0;
  height:22px;
  margin-right:-2px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--a-soft);
  opacity:0;
  visibility:hidden;
  transition:flex-basis 120ms ease-out,width 120ms ease-out,opacity 120ms ease-out;
}

button.pr-toggle {
  cursor:pointer;
}

button.pr-toggle:hover,.pr-head:has(button.pr-title:hover) button.pr-toggle {
  background:var(--a-hover);
  color:var(--a-text);
}

.pr-toggle svg {
  width:13px;
  height:13px;
  transition:transform 120ms;
}

.pr-toggle[aria-expanded=true] svg {
  transform:rotate(90deg);
}

.pr-link,.pr-title {
  display:flex;
  align-items:center;
  height:30px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
}

.pr-link {
  flex:none;
  gap:6px;
  height:22px;
  padding:0 4px;
  border-radius:4px;
  cursor:pointer;
  transition:background 120ms;
}

.pr-link:hover {
  background:var(--a-hover);
}

.pr-link:focus-visible,.pr-toggle:focus-visible {
  outline:1px solid var(--a-text);
  outline-offset:-2px;
}

.pr-icon {
  position:relative;
  display:grid;
  flex:0 0 14px;
  place-items:center;
  color:var(--a-soft);
}

.pr-icon svg {
  width:14px;
  height:14px;
}

.pr-icon.open {
  color:var(--a-success);
}

.pr-icon.merged {
  color:var(--a-purple);
}

.pr-icon.closed {
  color:var(--a-danger);
}

.pr-icon.attention {
  color:var(--a-warning);
}

.pr-icon.attention::after {
  content:'!';
  position:absolute;
  top:-5px;
  right:-6px;
  display:grid;
  place-items:center;
  width:12px;
  height:12px;
  box-sizing:border-box;
  border:2px solid var(--a-surface);
  border-radius:50%;
  background:var(--a-warning);
  color:#fff;
  font:8px/8px var(--a-sans);
}

.pr-num {
  flex:none;
  color:var(--a-soft);
  font-variant-numeric:tabular-nums;
}

.pr-title {
  flex:1;
  min-width:0;
  padding:0 8px 0 0;
  overflow:hidden;
  font-weight:600;
  white-space:nowrap;
  user-select:none;
}

button.pr-title {
  cursor:pointer;
}

/* Long titles fade out at the edge instead of ending in an ellipsis. */
.pr-title {
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);
}

.pr-title-text {
  display:block;
  width:max-content;
}

.pr-head.empty .pr-title {
  color:var(--a-muted);
  font-weight:500;
}

.pr-pin {
  display:none;
  flex:0 0 24px;
  place-items:center;
  height:24px;
  color:var(--a-soft);
}

.app .pr-pin svg {
  width:13px;
  height:13px;
  fill:currentColor;
  stroke:none;
}

.pr-holons {
  margin-left:0;
  transition:margin-left 120ms ease-out;
}

@media(hover:hover) {
  .holons:is(:hover,:focus-within) .pr-toggle {
    flex-basis:18px;
    width:18px;
    margin-right:0;
    opacity:1;
    visibility:visible;
  }
  .holons:is(:hover,:focus-within) .pr-pin {
    display:grid;
  }
  .holons:is(:hover,:focus-within) .pr-holons {
    margin-left:20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .pr-toggle,.pr-toggle svg,.pr-holons {
    transition:none;
  }
}

/* Benefits and workflow */
.sec {
  padding-block:72px;
  border-top:1px solid var(--line);
}

.benefits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px;
  padding-bottom:64px;
}

.benefit {
  border-top:1px solid var(--line-strong);
  padding-top:20px;
}

.benefit .label {
  margin-bottom:14px;
  color:var(--violet-ink);
}

.benefit h3 {
  font-size:1.3rem;
  margin-bottom:10px;
}

.benefit p {
  color:var(--muted);
}

.sec-head {
  display:grid;
  align-content:start;
  gap:14px;
  max-width:700px;
  margin-bottom:36px;
}

.sec-head>p:not(.label) {
  color:var(--muted);
}

#how .flow {
  margin:0;
  padding:0;
  list-style:none;
}

/* Stages hang off a numbered rail; the 03 → 04 segment is dashed because review can send work back. */
#how .stage-card {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px;
  align-items:center;
  padding:0 0 52px 64px;
}

#how .stage-card:last-child {
  padding-bottom:0;
}

#how .stage-card::before {
  content:'';
  position:absolute;
  left:16px;
  top:36px;
  bottom:4px;
  width:1px;
  background:var(--line-strong);
}

#how .stage-card:last-child::before {
  display:none;
}

#how .loop-start::before {
  width:0;
  background:none;
  border-left:1px dashed var(--violet-ink);
}

#how .loop-start::after {
  content:'↻';
  position:absolute;
  left:5px;
  bottom:calc(32px - 11px);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--bg);
  color:var(--violet-ink);
  font-size:.875rem;
}

#how .stage-card .n {
  position:absolute;
  left:0;
  top:0;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--surface);
  font:.75rem var(--mono);
  color:var(--muted);
}

#how .stage-text {
  align-self:start;
  padding-top:4px;
}

#how .stage-text h3 {
  font-size:1.25rem;
  line-height:1.3;
}

#how .roles {
  margin:18px 0 0;
  display:grid;
  gap:10px;
}

#how .roles div {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:12px;
}

#how .roles dt {
  padding-top:3px;
  font:.75rem var(--mono);
  color:var(--faint);
}

#how .roles dd {
  margin:0;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--muted);
}

#how .roles div:first-child dd {
  color:var(--ink);
}

/* UI miniatures: one shared frame, compact type, restrained colour. */
#how .mini {
  min-height:236px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  font-size:.8125rem;
  overflow:hidden;
}

#how .mini code {
  font:.75rem var(--mono);
  color:var(--muted);
}

#how .mini .k {
  display:block;
  margin-bottom:2px;
  font:.6875rem var(--mono);
  color:var(--faint);
}

#how .m-chip {
  align-self:center;
  padding:6px 12px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--bg);
}

#how .m-arrow {
  align-self:center;
  line-height:1;
  color:var(--faint);
}

#how .m-bundle {
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  padding:16px 14px 12px;
  border:1px dashed var(--line-strong);
  border-radius:8px;
}

#how .m-bundle div {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#how .m-cap {
  position:absolute;
  top:-8px;
  left:12px;
  padding:0 6px;
  background:var(--surface);
  font:.6875rem var(--mono);
  color:var(--violet-ink);
}

#how .m-task {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1px 12px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg);
}

#how .m-task.on {
  border-color:var(--violet-ink);
}

#how .m-task .t {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#how .m-task code {
  grid-column:1 / -1;
}

#how .m-task .s {
  font-size:.75rem;
}

#how .s.work {
  color:var(--violet-ink);
}

#how .s.input {
  color:var(--orange);
}

#how .s.done {
  color:var(--green);
}

#how .m-term {
  padding:6px 10px;
  border-radius:6px;
  background:var(--term-bg);
  border:1px solid var(--line);
  font:.75rem var(--mono);
  color:var(--term-ink);
}

#how .m-term span {
  color:var(--faint);
}

#how .m-term b {
  margin-left:6px;
  font-weight:400;
  color:var(--green);
}

#how .m-pr {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

#how .m-pr b {
  font-weight:500;
}

#how .m-pr span {
  color:var(--faint);
  white-space:nowrap;
}

/* The comment's round trip, drawn as a rail of connected steps. */
#how .m-loop {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

#how .m-loop li {
  position:relative;
  padding-left:20px;
}

#how .m-loop li::before {
  content:'';
  position:absolute;
  left:3px;
  top:6px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--line-strong);
}

#how .m-loop li:not(:last-child)::after {
  content:'';
  position:absolute;
  left:6px;
  top:15px;
  bottom:-10px;
  width:1px;
  background:var(--line-strong);
}

#how .m-loop li.end::before {
  background:var(--green);
}

#how .m-loop .k {
  display:inline;
  margin-right:8px;
}

#how .m-ai {
  display:inline-block;
  padding:4px 10px;
  border-radius:5px;
  background:var(--violet);
  color:var(--on-violet);
  font-size:.75rem;
}

#how .m-diff {
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  font:.75rem/1.75 var(--mono);
}

#how .m-diff div {
  padding:0 10px;
  white-space:pre;
}

#how .m-diff .del {
  color:var(--orange);
  background:var(--orange-soft);
}

#how .m-diff .add {
  color:var(--green);
  background:var(--green-soft);
}

#how .m-review {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

#how .m-review .k {
  display:inline;
}

#how .m-review .ok {
  color:var(--green);
}

#how .m-again {
  font:.6875rem var(--mono);
  color:var(--faint);
}

#how .m-merged {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg);
}

#how .m-merged .badge {
  padding:1px 8px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.75rem;
  color:var(--muted);
}

@media(max-width:899px) {
  #how .stage-card {
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    padding:0 0 48px 52px;
  }
  #how .mini {
    min-height:0;
  }
}

@media(max-width:440px) {
  #how .stage-card {
    padding-left:44px;
  }
  #how .mini {
    padding:14px;
  }
  #how .roles div {
    grid-template-columns:48px minmax(0,1fr);
  }
  #how .m-bundle {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Setup */
.start {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:72px;
}

.sec-head .needs-k {
  margin-top:28px;
  font:500 .75rem var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--faint);
}

.sec-head .needs-k+.needs {
  margin-top:12px;
}

.needs {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  font-size:.9rem;
  color:var(--ink);
}

.needs li {
  position:relative;
  padding-left:16px;
}

.needs li::before {
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--violet);
}

.needs code {
  font:.85em var(--mono);
}

.install-wrap {
  min-width:0;
  align-self:start;
  padding-top:28px;
}

.install {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,10,40,.04),0 12px 32px -16px rgba(20,10,40,.18);
}

.install-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 8px 10px;
  border-bottom:1px solid var(--line);
  background:var(--sunk);
}

.install-tabs {
  display:flex;
  gap:2px;
  min-width:0;
}

.install-tab {
  border:1px solid transparent;
  border-radius:6px;
  background:none;
  padding:5px 12px;
  font:500 .8125rem var(--body);
  color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
}

.install-tab:hover {
  color:var(--ink);
}

.install-tab[aria-selected="true"] {
  color:var(--ink);
  background:var(--surface);
  border-color:var(--line);
}

.install-copy {
  border:0;
  border-radius:6px;
  background:none;
  padding:5px 10px;
  font:500 .8125rem var(--body);
  color:var(--muted);
  cursor:pointer;
}

.install-copy:hover {
  color:var(--ink);
  background:var(--surface);
}

.install-panel[hidden] {
  display:none;
}

.install-panel pre .c {
  color:var(--faint);
  word-break:normal;
}

.install-req {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:14px 20px 0;
  font-size:.8125rem;
}

.install-req span {
  margin-right:4px;
  color:var(--faint);
}

.install-req b {
  font-weight:500;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:5px;
  padding:2px 8px;
  background:var(--bg);
}

.install-req a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

.install-panel pre {
  margin:0;
  padding:16px 20px 18px;
  font:.8125rem/1.9 var(--mono);
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-all;
}

.install-tab .narrow {
  display:none;
}

@media(max-width:519px) {
  .install-tab .narrow {
    display:inline;
  }
}

.install-help {
  margin:-8px 20px 16px;
  font-size:.8125rem;
  color:var(--muted);
}

.install-help summary {
  cursor:pointer;
  width:max-content;
  max-width:100%;
}

.install-help summary:hover {
  color:var(--ink);
}

.install-help p {
  margin-top:8px;
}

.install-panel .install-help pre {
  margin-top:6px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg);
}

.install-run {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 20px;
}

.install-step {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size:.875rem;
  font-weight:500;
  color:var(--ink);
}

.install-step span {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  font:.6875rem var(--mono);
  color:var(--muted);
}

.install+.install-step {
  margin-top:24px;
}

.install-run pre {
  flex:1;
  min-width:0;
  margin:0;
  font:.8125rem/2 var(--mono);
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-all;
}

@media(max-width:519px) {
  .install-tab .wide {
    display:none;
  }
  .install-tab {
    padding-inline:9px;
  }
}

/* Coming soon: lighter than How it works. Miniatures are illustrations, not controls. */
.next-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.next-card {
  display:grid;
  grid-template-rows:auto 1fr;
  gap:20px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}

.next-card.lead {
  grid-column:1 / -1;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  grid-template-rows:none;
  align-items:center;
  gap:40px;
  padding:32px;
}

.next-card h3 {
  font-size:1.125rem;
  line-height:1.3;
}

.next-card.lead h3 {
  font-size:1.375rem;
}

.next-copy p {
  margin-top:8px;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--muted);
}

.nm {
  align-self:stretch;
  display:grid;
  align-content:start;
  gap:10px;
  padding:14px;
  border-radius:8px;
  background:var(--bg);
  font-size:.8125rem;
  line-height:1.45;
  user-select:none;
}

.next-card>*,.nm>* {
  min-width:0;
}

.nm ul,.nm ol {
  margin:0;
  padding:0;
  list-style:none;
}

.nm code {
  font:.75rem var(--mono);
  color:var(--ink);
}

.nm-k {
  display:block;
  margin-bottom:3px;
  font:.6875rem var(--mono);
  color:var(--faint);
}

.nm-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

.nm-head span:first-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nm-head span:last-child {
  flex:none;
  color:var(--faint);
}

.nm-flows {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:14px;
}

.nm-list {
  display:grid;
  align-content:start;
  gap:4px;
}

.nm-list li {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  border-radius:6px;
  color:var(--muted);
}

.nm-list li span {
  font-size:.75rem;
  color:var(--faint);
  white-space:nowrap;
}

.nm-list li.on {
  background:var(--surface);
  box-shadow:inset 2px 0 0 var(--violet-ink);
  color:var(--ink);
}

.nm-detail {
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
}

.nm-path {
  display:grid;
  gap:6px;
  margin-bottom:10px!important;
}

.nm-path li {
  position:relative;
  padding-left:16px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nm-path li::before {
  content:'';
  position:absolute;
  left:1px;
  top:7px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--violet-ink);
}

.nm-meta {
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  padding-top:8px;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--muted);
}

.nm-meta b {
  font-weight:400;
  color:var(--green);
}

.nm-meta .risk {
  color:var(--orange);
}

.nm-msg {
  max-width:88%;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}

.nm-msg.from-agent {
  justify-self:end;
  border-color:var(--violet-soft);
  background:var(--violet-soft);
}

.nm-msg.from-agent .nm-k {
  color:var(--violet-ink);
}

.nm-refs {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
  font-size:.6875rem;
  color:var(--muted);
}

.nm-refs>* {
  padding:1px 7px;
  border-radius:4px;
  background:var(--surface);
}

.nm-refs code {
  font-size:.6875rem;
}

.nm-typing {
  justify-self:end;
  display:flex;
  gap:4px;
  padding:9px 12px;
  border-radius:8px;
  background:var(--violet-soft);
}

.nm-typing i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--violet-ink);
  opacity:.5;
}

.nm-ask {
  justify-self:end;
}

.nm-recap {
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
}

.nm-recap .nm-k {
  color:var(--violet-ink);
}

.nm-recap ul {
  display:grid;
  gap:8px;
}

.nm-recap li {
  position:relative;
  padding-left:14px;
  color:var(--muted);
}

.nm-recap li::before {
  content:'';
  position:absolute;
  left:1px;
  top:8px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--violet-ink);
}

.nm-recap b {
  font-weight:500;
  color:var(--ink);
}

.nm-recap code {
  margin-left:2px;
  padding:0 6px;
  border-radius:4px;
  background:var(--violet-soft);
  font-size:.6875rem;
  color:var(--violet-ink);
  white-space:nowrap;
}

.nm-attn {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
}

.nm-attn li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
}

.nm-attn small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.75rem;
  color:var(--faint);
}

.nm-attn span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nm-attn em {
  flex:none;
  font-style:normal;
  font-size:.75rem;
}

.nm-attn .quick {
  color:var(--green);
}

.nm-attn .deep {
  color:var(--orange);
}

.nm-attn .ready {
  color:var(--violet-ink);
}

@media(max-width:999px) {
  .next-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .next-card.lead {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    padding:24px;
  }
}

@media(max-width:519px) {
  .next-card,.next-card.lead {
    padding:18px;
  }
  .nm-flows {
    grid-template-columns:minmax(0,1fr);
  }
  .nm-list li:not(.on) {
    display:none;
  }
}

/* Waitlist */
.waitlist {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:48px;
  align-items:end;
}

.waitlist .sec-head {
  margin-bottom:0;
}

.wl-form {
  display:grid;
  gap:10px;
  min-width:0;
}

.wl-label {
  font-size:.85rem;
  color:var(--muted);
}

.wl-row {
  display:flex;
  gap:8px;
}

.wl-input {
  flex:1;
  min-width:0;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--line-strong);
  border-radius:7px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:.95rem;
}

.wl-input::placeholder {
  color:var(--muted);
}

.wl-input:focus {
  outline:2px solid var(--violet);
  outline-offset:1px;
  border-color:transparent;
}

.wl-input[aria-invalid=true] {
  border-color:var(--danger);
}

.wl-form .btn {
  cursor:pointer;
  font-family:inherit;
}

.wl-form .btn:disabled {
  opacity:.6;
  cursor:default;
}

.wl-form [hidden] {
  display:none;
}

.wl-status {
  min-height:1.4em;
  font-size:.85rem;
  color:var(--muted);
}

.wl-status.ok {
  color:var(--ink);
}

.wl-status.error {
  color:var(--danger);
}

footer {
  border-top:1px solid var(--line);
  padding-block:24px 32px;
}

.foot {
  display:flex;
  align-items:center;
  gap:24px;
}

.foot>span {
  color:var(--muted);
  font-size:.8rem;
}

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

.foot .brand {
  font-size:1rem;
}

.foot .brand img {
  height:24px;
}

@media(min-width:1500px) {
  .hero {
    padding-top:88px;
  }
}

@media(max-width:1000px) {
  .hero {
    gap:32px;
  }
  .start {
    gap:36px;
  }
  .bar {
    gap:24px;
  }
  .site-nav {
    gap:18px;
  }
}

@media(max-width:760px) {
  .app {
    grid-template-columns:44px minmax(0,1fr);
    height:520px;
  }
  .app .rail-full,.app .rail small,.app .rail [data-tip]::after,.app .head-more,.app .review-side,.app .page-search,.app .page-new span,.app .page-new kbd,.app .avatars,.app .tag,.app .gh {
    display:none;
  }
  .app .rail button {
    width:32px;
    height:32px;
  }
  .app .rail .rail-mark {
    margin-top:12px;
  }
  .app .rail-items {
    gap:6px;
    margin-top:14px;
  }
  .app .main {
    margin-right:64px;
  }
  .app[data-view=holon]::after {
    width:64px;
  }
  .app .head {
    padding-left:8px;
  }
  .app .head-pr span {
    display:none;
  }
  .app .page-head {
    justify-content:space-between;
    padding:12px;
  }
  .app .page-title b,.app .page-title span,.app .changes,.app.reviewing .review {
    display:none;
  }
  .app.reviewing .term {
    display:block;
  }
  .app .page-title {
    font-size:14px;
    font-weight:600;
  }
  .app .page-new {
    padding-inline:9px;
  }
  .app .page-body {
    padding:0 12px 16px;
  }
  .app .row {
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .app .row-copy {
    flex-basis:calc(100% - 30px);
  }
  .app .row .state {
    min-width:0;
    margin-left:26px;
  }
  .app .start-agent {
    margin-left:auto;
  }
  .app .term {
    padding:16px;
    font-size:11px;
  }
  .app .holons {
    width:52px;
    padding-inline:4px;
    border-radius:16px;
  }
  .app .holons-head {
    justify-content:center;
  }
  .app .holons-head b,.app .holons-count,.app .holon-copy {
    display:none;
  }
  .app .holons-head svg {
    margin-left:0;
  }
  .app .grp {
    justify-content:center;
    margin:8px 0 2px;
    padding:0;
    border:0;
    font-size:0;
  }
  .app .grp span:last-child {
    font-size:10px;
  }
  .app .holon {
    justify-content:center;
    padding:6px 2px;
  }
  .app .pr-num,.app .pr-title {
    display:none;
  }
  .app .pr-head {
    justify-content:center;
    padding:0;
  }
  .app .pr-link {
    flex:none;
    padding:0;
  }
  .app .pr-holons {
    margin-left:0;
  }
  .app .pr-page {
    padding:12px 12px 20px;
  }
  .app .pr-h {
    font-size:17px;
  }
  .app .pr-overview {
    grid-template-columns:minmax(0,1fr);
  }
  .app .pr-tabs {
    overflow-x:auto;
    scrollbar-width:none;
  }
  .app .pr-tabs em {
    display:none;
  }
  .wrap {
    padding-inline:20px;
  }
  .bar {
    height:68px;
  }
  .site-nav {
    gap:16px;
  }
  .site-nav .icon-link span,.site-nav .wl-link {
    display:none;
  }
  .site-nav .btn.small.solid {
    margin-left:0;
  }
  .waitlist {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .hero {
    grid-template-columns:minmax(0,1fr);
    padding-block:44px 36px;
    gap:24px;
  }
  .hero-side p {
    font-size:1rem;
  }
  .hero .label {
    margin-bottom:16px;
  }
  .agents {
    gap:6px 12px;
    margin-top:20px;
  }
  .benefits {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    padding-bottom:44px;
  }
  .benefit {
    padding-top:18px;
  }
  .benefit .label {
    margin-bottom:8px;
  }
  .benefit h3 {
    font-size:1.2rem;
  }
  .sec {
    padding-block:48px;
  }
  .start {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  .install-wrap {
    padding-top:16px;
  }
  .foot {
    flex-wrap:wrap;
    gap:16px;
  }
  .foot nav {
    margin-left:auto;
    gap:16px;
  }
  .stage {
    padding-bottom:32px;
  }
}

@media(max-width:440px) {
  .foot>span {
    display:none;
  }
  h1 {
    font-size:2.65rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
  }
}

@media(max-width:400px) {
  .bar,.site-nav {
    gap:12px;
  }
  .brand {
    font-size:1.15rem;
  }
  .site-nav a {
    font-size:.85rem;
  }
  .site-nav .btn.small {
    padding:5px 10px;
  }
  .wl-row {
    flex-direction:column;
  }
}