/* ═══════════════════════════════════════════════════════════════════════
   zirocode.in

   Direction: technical brutalism — an instrument panel, not a brochure.
   Every corner is square (0 radius, no exceptions), rules are hairlines,
   shadows are hard offsets with no blur, and labels speak in monospace with
   index numbers, the way a control surface labels its own switches.

   Type    Chakra Petch (angular display, matches the mark's cut) /
           IBM Plex Sans (body, engineered not neutral) /
           JetBrains Mono (the machine's own voice)
   Colour  graphite ground, one warm ramp — gold → orange → magenta — off the
           logo, spent only on what matters. Status colours stay outside it.
   Motion  one idea: things arrive from below, and the machine keeps working
           while you read.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #08090C;
  --bg-2: #0C0E12;
  --panel: #101218;
  --panel-2: #171A21;
  --panel-3: #21252E;
  --border: #262A34;
  --border-strong: #3A404D;
  --rule: #1A1D25;

  --fg: #F2F3F6;
  --fg-2: #A2A5B0;
  --fg-3: #6E727D;

  --brand-gold: #FFB65A;
  --brand: #F5814D;
  --brand-magenta: #F65E8B;
  --brand-fg: #140702;
  --brand-soft: rgb(245 129 77 / .12);
  --brand-glow: rgb(245 129 77 / .3);

  --claude: #FFB65A;
  --codex: #F65E8B;
  --live: #2FD98A;
  --wait: #FFC43D;
  --err: #FF4757;
  --git: #3ECFD6;
  --tree: #A855F7;

  --hard: 6px 6px 0 var(--panel-3);
  --hard-a: 6px 6px 0 var(--brand);

  --display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --page: 1180px;
  --gut: clamp(20px, 4vw, 56px);   /* page gutter — grows with the viewport */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="light"] {
  --bg: #EAE4DD;
  --bg-2: #F2EDE7;
  --panel: #FBF8F5;
  --panel-2: #EDE6DF;
  --panel-3: #DED4CA;
  --border: #D5C9BD;
  --border-strong: #B4A597;
  --rule: #DED4CA;

  --fg: #16110F;
  --fg-2: #52483F;
  --fg-3: #837567;

  --brand-gold: #9A6B12;
  --brand: #C4521F;
  --brand-magenta: #B32C5C;
  --brand-fg: #FFF6EF;
  --brand-soft: rgb(196 82 31 / .10);
  --brand-glow: rgb(196 82 31 / .22);

  --claude: #9A6B12;
  --codex: #B32C5C;
  --live: #0A7F4E;
  --wait: #8A5700;
  --err: #BC1C2E;
  --git: #0A6E77;
  --tree: #6428CE;

  --hard: 6px 6px 0 var(--panel-3);
  --hard-a: 6px 6px 0 var(--brand);
}

/* ── base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3 { margin: 0; }
::selection { background: var(--brand); color: var(--brand-fg); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.display { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: .96; }
.mono { font-family: var(--mono); }

/* the room's own grid, faintly */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *:not(.grid-overlay):not(.noise) { position: relative; z-index: 1; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99; background: transparent; }
.progress i { display: block; height: 100%; width: 0; background: var(--brand); }

/* ── header ───────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gut); height: 64px;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  transition: border-color .25s ease;
}
.bar.stuck { border-bottom-color: var(--border); }

.brand { display: flex; align-items: center; gap: 9px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .04em; }
.tag-sq {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  padding: 3px 6px; border: 1px solid var(--border-strong); color: var(--fg-3);
}

.bar-nav { display: flex; gap: 2px; margin-left: 12px; }
.bar-nav a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 12px; font-size: 13.5px; color: var(--fg-2);
  border: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.bar-nav a i { font-family: var(--mono); font-size: 9.5px; font-style: normal; color: var(--fg-3); }
.bar-nav a:hover { color: var(--fg); border-color: var(--border); background: var(--panel); }

.bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.stars, .sq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 11px;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg-2);
  font-family: var(--mono); font-size: 12px;
  transition: color .16s ease, border-color .16s ease, transform .12s ease;
}
.sq-btn { width: 34px; padding: 0; }
.stars:hover, .sq-btn:hover { color: var(--fg); border-color: var(--brand); transform: translate(-1px, -1px); }
.i-moon { display: none; }
[data-theme="light"] .i-sun { display: none; }
[data-theme="light"] .i-moon { display: block; }

.btn-hard {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 34px; padding: 0 16px;
  background: var(--brand); color: var(--brand-fg);
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .06em;
  border: 1px solid var(--brand);
  box-shadow: 3px 3px 0 var(--brand-fg);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .16s ease;
}
.btn-hard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--brand-fg); filter: brightness(1.05); }
.btn-hard:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--brand-fg); }
.btn-hard.lg { height: 52px; padding: 0 26px; font-size: 15px; box-shadow: 5px 5px 0 var(--brand-fg); }
.btn-hard.lg:hover { box-shadow: 8px 8px 0 var(--brand-fg); }
.btn-hard.sm { height: 32px; padding: 0 12px; font-size: 11.5px; }

.btn-wire {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border: 1px solid var(--border-strong); color: var(--fg);
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  background: var(--panel);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .16s ease;
}
.btn-wire:hover { border-color: var(--fg-3); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--panel-3); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero { max-width: var(--page); margin: 0 auto; padding: clamp(38px, 6vw, 86px) var(--gut) clamp(30px, 4vw, 54px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(34px, 5vw, 76px); align-items: center; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--fg-2);
  border: 1px solid var(--border); background: var(--panel);
  padding: 7px 12px; margin-bottom: 26px;
}
.blip { width: 7px; height: 7px; background: var(--live); animation: blip 2.4s steps(1) infinite; }
@keyframes blip { 0%, 60% { opacity: 1 } 61%, 100% { opacity: .25 } }

h1.display { font-size: clamp(40px, 5.6vw, 74px); letter-spacing: -.02em; }
h1 .line2 { display: block; }
h1 .w { display: inline-block; opacity: 0; transform: translateY(24px); }
h1 .w.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
h1 .hl { color: var(--brand); }
[data-theme="light"] h1 .hl { color: var(--brand); }

.lede { margin: 26px 0 0; font-size: 17px; line-height: 1.62; color: var(--fg-2); max-width: 31em; }
.lede b { color: var(--fg); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 42px 0 0; border: 1px solid var(--border); background: var(--panel);
}
.proof > div { padding: 14px 12px; border-right: 1px solid var(--border); }
.proof > div:last-child { border-right: 0; }
.proof dt { font-family: var(--display); font-weight: 700; font-size: 27px; color: var(--brand); line-height: 1; }
.proof dd { margin: 6px 0 0; font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }

/* ── the app, drawn ───────────────────────────────────────────────────── */

.win {
  border: 1px solid var(--border-strong);
  background: var(--panel);
  box-shadow: var(--hard);
  overflow: hidden;
}
.win-bar {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--brand-soft), transparent);
}
.lights { display: flex; gap: 6px; margin-right: 4px; }
.lights i { width: 10px; height: 10px; background: var(--panel-3); }
.lights i:nth-child(1) { background: #ED6A5E } .lights i:nth-child(2) { background: #F5BF4F } .lights i:nth-child(3) { background: #61C554 }
.lights.sm i { width: 8px; height: 8px; }
.win-name { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; }
.win-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--live); border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
  padding: 2px 8px;
}
.win-live i { width: 5px; height: 5px; background: var(--live); animation: blip 2s steps(1) infinite; }

.win-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 356px; }
.win-rail { border-right: 1px solid var(--border); background: var(--bg-2); padding: 10px 8px; }
.rail-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--fg-3); padding: 4px 6px 10px; }

.srow {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease;
}
.srow:hover { background: var(--panel-2); border-color: var(--border); }
.srow.on { background: var(--panel-2); border-color: var(--border-strong); }
.srow > i { width: 3px; height: 28px; flex-shrink: 0; }
.srow b { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow em { display: block; font-family: var(--mono); font-style: normal; font-size: 9.5px; color: var(--fg-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow u.live { width: 6px; height: 6px; background: var(--live); flex-shrink: 0; animation: blip 2s steps(1) infinite; }

.win-main { display: flex; flex-direction: column; min-width: 0; }
.win-tabs { display: flex; border-bottom: 1px solid var(--border); }
.wt {
  padding: 11px 15px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--fg-3); border-right: 1px solid var(--border);
  transition: color .16s ease, background .16s ease;
}
.wt:hover { color: var(--fg-2); background: var(--panel-2); }
.wt.on { color: var(--brand); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--brand); }

.pane { display: none; padding: 14px 16px; }
.pane.on { display: block; animation: rise .3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }

.term { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.78; color: var(--fg-2); white-space: pre-wrap; min-height: 282px; }
.term .p { color: var(--brand) } .term .ok { color: var(--live) } .term .w { color: var(--brand-gold) } .term .d { color: var(--fg-3) }
.term .caret { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: var(--brand); animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.dhead { display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-2); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dstat { margin-left: auto; display: flex; gap: 9px; }
.add { color: var(--live) } .del { color: var(--err) }
.dbody { margin-top: 8px; font-family: var(--mono); font-size: 11px; }
.dl { display: flex; gap: 12px; padding: 2px 8px; }
.dl i { width: 22px; text-align: right; color: var(--fg-3); font-style: normal; flex-shrink: 0; }
.dl code { color: var(--fg-2); white-space: pre; }
.dl.add { background: color-mix(in srgb, var(--live) 12%, transparent); box-shadow: inset 2px 0 0 var(--live) }
.dl.del { background: color-mix(in srgb, var(--err) 12%, transparent); box-shadow: inset 2px 0 0 var(--err) }
.dl.hunk { background: color-mix(in srgb, var(--git) 10%, transparent) } .dl.hunk code { color: var(--git) }

.files { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 14px; }
.tree { font-family: var(--mono); font-size: 11px; }
.tr { display: flex; align-items: center; gap: 6px; padding: 3px 7px; color: var(--fg-2); }
.tr.d { color: var(--fg); font-weight: 500 } .tr.d::before { content: "▾"; font-size: 8px; color: var(--fg-3) }
.tr.i1 { padding-left: 17px } .tr.i2 { padding-left: 28px }
.tr.on { background: var(--panel-2); color: var(--fg); box-shadow: inset 2px 0 0 var(--brand) }
.tr u { margin-left: auto; text-decoration: none; font-size: 9.5px; color: var(--brand-gold) } .tr u.a { color: var(--live) }
.code { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.8 }
.code span { display: flex; gap: 12px }
.code i { font-style: normal; color: var(--fg-3); width: 12px; text-align: right; flex-shrink: 0 }
.code code { color: var(--fg-2); white-space: pre } .code b { font-weight: 400 }
.kw { color: #FF6B9D } .fn { color: #FFB86C } .ty { color: #5FD9E0 } .nu { color: #FFAE2E } .cm { color: var(--fg-3) }
[data-theme="light"] .kw { color: #A81450 } [data-theme="light"] .fn { color: #8E3D10 }
[data-theme="light"] .ty { color: #0A6068 } [data-theme="light"] .nu { color: #7F4400 }

.try {
  display: flex; gap: 0; margin-top: 14px;
  border: 1px solid var(--border-strong); background: var(--panel);
}
.try-l {
  display: grid; place-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--fg-3);
  border-right: 1px solid var(--border);
}
.try input {
  flex: 1; min-width: 0; height: 46px; padding: 0 13px;
  background: transparent; border: 0; outline: none; color: var(--fg); font-size: 14px;
}
.try input::placeholder { color: var(--fg-3) }
.try .btn-hard { align-self: center; margin: 0 7px; box-shadow: 2px 2px 0 var(--brand-fg) }

/* ── ticker ───────────────────────────────────────────────────────────── */

.ticker {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--panel); overflow: hidden; margin-top: 26px;
}
.ticker-move {
  display: flex; align-items: center; gap: 26px; padding: 11px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--fg-3);
  white-space: nowrap; width: max-content;
  animation: slide 46s linear infinite;
}
.ticker:hover .ticker-move { animation-play-state: paused }
.ticker-move b { color: var(--brand); font-size: 8px }
@keyframes slide { to { transform: translateX(-50%) } }

/* ── sections ─────────────────────────────────────────────────────────── */

.sec { max-width: var(--page); margin: 0 auto; padding: clamp(56px, 8vw, 124px) var(--gut) }
.sec.tight { padding-top: clamp(24px, 3vw, 44px) }
.sec-head { display: flex; gap: clamp(16px, 2.4vw, 30px); align-items: flex-start; margin-bottom: clamp(30px, 4.6vw, 58px) }
.sec-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--brand);
  border: 1px solid var(--brand); padding: 5px 9px; flex-shrink: 0;
}
.sec-head h2 { font-size: clamp(30px, 4.1vw, 50px) }
.sec-head p { margin: 16px 0 0; color: var(--fg-2); font-size: 16px; max-width: 46em }

/* ── 01 · the board ───────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(14px, 2vw, 26px); align-items: start }
.board-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px) }

.tile {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 15px; border: 1px solid var(--border); background: var(--panel);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s ease;
}
.tile:hover { transform: translate(-3px, -3px); box-shadow: var(--hard); border-color: var(--border-strong) }
.tile.on { border-color: var(--brand); box-shadow: var(--hard-a); transform: translate(-3px, -3px) }
.t-top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--fg-3) }
.t-top u { margin-left: auto; text-decoration: none }
.pip { width: 7px; height: 7px; background: var(--border-strong) }
.pip.live { background: var(--live); animation: blip 2s steps(1) infinite }
.pip.live.x { background: var(--codex) } .pip.wait { background: var(--wait) }
.tile b { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2 }
.t-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.t-bars { display: block; height: 3px; background: var(--panel-3) }
.t-bars i { display: block; height: 100%; background: var(--live) }
.t-bars i.x { background: var(--codex) } .t-bars i.w { background: var(--wait) } .t-bars i.d { background: var(--border-strong) }
.t-foot { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; color: var(--fg-3) }
.t-foot em { font-style: normal }

.board-view { border: 1px solid var(--border-strong); background: var(--bg-2); box-shadow: var(--hard); min-height: 330px }
.bv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px }
.bv-dot { width: 8px; height: 8px; background: var(--live); animation: blip 2s steps(1) infinite }
.bv-branch { margin-left: auto; font-size: 10px; color: var(--fg-3) }
.bv-body { margin: 0; padding: 14px; font-size: 11.5px; line-height: 1.8; color: var(--fg-2); white-space: pre-wrap }

/* ── 02 · cards ───────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border) }
.card {
  position: relative; padding: clamp(18px, 2.2vw, 30px); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--panel); transition: background .2s ease;
}
.card:nth-child(3n) { border-right: 0 }
.card:nth-last-child(-n+3) { border-bottom: 0 }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 var(--a); transition: box-shadow .2s ease }
.card:hover { background: var(--panel-2) }
.card:hover::after { box-shadow: inset 0 -3px 0 var(--a) }
.c-n { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 10px; color: var(--fg-3) }
.card h3 { font-family: var(--display); font-weight: 700; font-size: 17.5px; letter-spacing: .02em; margin: 20px 0 10px }
.card p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.68 }

.c-art { height: 128px; border: 1px solid var(--border); background: var(--bg-2); padding: 12px; position: relative; overflow: hidden }

/* card art — each one built for its own claim */
.art-term { font-family: var(--mono); font-size: 10px; line-height: 1.9; color: var(--fg-2) }
.art-term .al { display: block; opacity: 0; animation: alin 6.5s linear infinite }
.art-term .al:nth-child(2) { animation-delay: .9s } .art-term .al:nth-child(3) { animation-delay: 1.8s } .art-term .al:nth-child(4) { animation-delay: 2.7s }
.art-term i { font-style: normal; color: var(--a) } .art-term .d { color: var(--fg-3) } .art-term .ok { color: var(--live) }
@keyframes alin { 0% { opacity: 0 } 8%, 88% { opacity: 1 } 97%, 100% { opacity: 0 } }
.cur { display: inline-block; width: 6px; height: 10px; background: var(--a); animation: blink 1s steps(1) infinite }

.art-tree { position: absolute; inset: 0; width: 100%; height: 100% }
.art-tree path { fill: none; stroke: var(--claude); stroke-width: 1.4; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 3.2s var(--ease) infinite }
.art-tree path.x { stroke: var(--codex); animation-delay: .25s } .art-tree path.d { stroke: var(--border-strong); animation-delay: .5s }
@keyframes draw { 0% { stroke-dashoffset: 300 } 40%, 85% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0 } }
.art-tree .node { fill: var(--bg-2); stroke: var(--border-strong); stroke-width: 1.4 }
.art-tree .node.c { stroke: var(--claude) } .art-tree .node.m { stroke: var(--codex) }
.tw { position: absolute; font-family: var(--mono); font-size: 9px; padding: 2px 6px; border: 1px solid var(--border); background: var(--panel); color: var(--fg-2) }
.tw.main { left: 8px; top: 46%; color: var(--fg) }
.tw.t1 { right: 8px; top: 12% } .tw.t2 { right: 8px; top: 46% } .tw.t3 { right: 8px; top: 78% }

.art-diff { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 10px }
.ad { display: flex; gap: 8px; padding: 3px 7px; color: var(--fg-3) } .ad i { font-style: normal; width: 7px }
.ad.add { background: color-mix(in srgb, var(--live) 13%, transparent); color: var(--live); box-shadow: inset 2px 0 0 var(--live) }
.ad.del { background: color-mix(in srgb, var(--err) 13%, transparent); color: var(--err); box-shadow: inset 2px 0 0 var(--err) }

.art-tray { display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100% }
.menubar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; height: 17px; padding: 0 8px; background: var(--panel-3) }
.menubar b { font-family: var(--display); font-size: 11px; font-style: italic; color: var(--fg) }
.menubar i { width: 12px; height: 4px; background: var(--border-strong) }
.pop { width: 88%; border: 1px solid var(--border-strong); background: var(--panel); box-shadow: 4px 4px 0 var(--panel-3); font-size: 9.5px; animation: pop .6s var(--ease) both }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) } }
.pr { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: var(--fg-2) }
.pr u { width: 2px; height: 11px; text-decoration: none } .pr em { margin-left: auto; font-style: normal; color: var(--live) }
.pf { display: block; padding: 5px 8px; background: var(--brand); color: var(--brand-fg); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-align: center }

.art-pal { display: flex; flex-direction: column; gap: 4px; font-size: 10px }
.pi { display: flex; align-items: center; padding: 7px 9px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); margin-bottom: 3px }
.pi u { margin-left: auto; text-decoration: none; font-family: var(--mono); font-size: 8.5px; color: var(--fg-3); border: 1px solid var(--border); padding: 1px 5px }
.pl { padding: 5px 9px; color: var(--fg-3) }
.pl.on { background: color-mix(in srgb, var(--a) 16%, transparent); color: var(--fg); box-shadow: inset 2px 0 0 var(--a) }

.art-theme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100% }
.half { display: flex; flex-direction: column; gap: 7px; padding: 10px }
.half.dk { background: #101218; border: 1px solid #262A34 } .half.lt { background: #FBF8F5; border: 1px solid #D5C9BD }
.half u { height: 8px; width: 56%; background: var(--brand); text-decoration: none }
.half i { height: 6px; display: block }
.half.dk i { background: #262A34 } .half.dk i.s { background: #171A21; width: 64% }
.half.lt i { background: #D5C9BD } .half.lt i.s { background: #EDE6DF; width: 64% }

/* ── 03 · steps ───────────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border) }
.step {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 280px; gap: clamp(18px, 2.6vw, 34px); align-items: center;
  padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--border);
  transition: background .2s ease;
}
.step:hover { background: var(--panel) }
.st-n { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--brand); line-height: 1 }
.step h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .03em; margin-bottom: 7px }
.step p { margin: 0; color: var(--fg-2); font-size: 15px; max-width: 44em }
.st-art { justify-self: end; width: 100% }

.picker { border: 1px solid var(--border); background: var(--panel); font-family: var(--mono); font-size: 11px }
.pk-row { display: flex; padding: 7px 10px; color: var(--fg-3); border-bottom: 1px solid var(--border) }
.pk-row:last-child { border-bottom: 0 }
.pk-row u { margin-left: auto; text-decoration: none; color: var(--git) }
.pk-row.on { background: var(--panel-2); color: var(--fg); box-shadow: inset 2px 0 0 var(--brand) }

.composer { border: 1px solid var(--claude); background: var(--panel); padding: 11px 12px; font-size: 13px }
.cm-caret { display: inline-block; width: 2px; height: 14px; vertical-align: -3px; background: var(--claude); animation: blink 1s steps(1) infinite }
.cm-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px }
.cm-foot u { text-decoration: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--fg-3); border: 1px solid var(--border); padding: 2px 6px }
.cm-foot em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--brand) }

.gauge { border: 1px solid var(--border); background: var(--panel); padding: 12px }
.g-bar { display: flex; height: 10px; background: var(--panel-3) }
.g-bar i { display: block; height: 100% } .g-bar i.add { background: var(--live) } .g-bar i.del { background: var(--err) }
.g-foot { display: flex; gap: 12px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--fg-3) }
.g-foot em { font-style: normal }

/* ── creed ────────────────────────────────────────────────────────────── */

.creed { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); border: 1px solid var(--border); background: var(--panel); padding: clamp(22px, 3vw, 42px) }
.creed-h { display: flex; gap: 18px; align-items: flex-start }
.creed-h h2 { font-size: clamp(26px, 3vw, 36px) }
.creed-list { list-style: none; margin: 0; padding: 0 }
.creed-list li { padding: 13px 0 13px 26px; border-bottom: 1px solid var(--border); color: var(--fg-2); font-size: 15.5px; position: relative }
.creed-list li:last-child { border-bottom: 0 }
.creed-list li::before { content: "✕"; position: absolute; left: 0; top: 13px; color: var(--err); font-size: 12px }
.creed-list b { color: var(--fg); font-weight: 600 }

/* ── faq ──────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--border) }
.q { border-bottom: 1px solid var(--border) }
.q summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  padding: 20px 4px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .01em;
  transition: color .16s ease;
}
.q summary::-webkit-details-marker { display: none }
.q summary:hover { color: var(--brand) }
.q summary i { margin-left: auto; width: 15px; height: 15px; position: relative; flex-shrink: 0 }
.q summary i::before, .q summary i::after {
  content: ""; position: absolute; background: var(--brand); transition: transform .22s var(--ease);
  left: 0; top: 7px; width: 15px; height: 1.5px;
}
.q summary i::after { transform: rotate(90deg) }
.q[open] summary i::after { transform: rotate(0) }
.q[open] summary { color: var(--brand) }
.q p { margin: 0 0 22px; padding-right: 60px; color: var(--fg-2); font-size: 15.5px; animation: rise .3s var(--ease) both }
.q code { font-family: var(--mono); font-size: 13px; background: var(--panel-2); border: 1px solid var(--border); padding: 1px 5px }

/* ── final ────────────────────────────────────────────────────────────── */

.final { border-top: 1px solid var(--border); background: var(--bg-2); position: relative; overflow: hidden }
.final::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(45% 50% at 30% 0%, var(--brand-glow), transparent 70%);
  pointer-events: none;
}
.final-inner { max-width: var(--page); margin: 0 auto; padding: clamp(52px, 7vw, 100px) var(--gut) clamp(58px, 8vw, 110px); position: relative }
.final h2 { font-size: clamp(42px, 7vw, 92px); margin: 20px 0 0 }
.final h2 .hl { color: var(--brand) }
.final-lede { margin: 22px 0 30px; color: var(--fg-2); font-size: 17px; max-width: 34em }

.shell { border: 1px solid var(--border-strong); background: var(--panel); box-shadow: var(--hard); max-width: 700px }
.sh-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--fg-3) }
.copy { margin-left: auto; border: 1px solid var(--border); background: var(--panel-2); color: var(--fg-2); padding: 3px 10px; font-size: 10px; letter-spacing: .1em; transition: color .16s ease, border-color .16s ease }
.copy:hover { color: var(--fg); border-color: var(--brand) }
.copy.done { color: var(--live); border-color: var(--live) }
.sh-body { margin: 0; padding: 16px 14px; font-size: 12.5px; line-height: 1.95; color: var(--fg-2); overflow-x: auto }
.sh-body .p { color: var(--brand) } .sh-body .c { color: var(--fg-3) } .sh-body .ok { color: var(--live) }

.final-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px }
.final-note { font-size: 11px; letter-spacing: .08em; color: var(--fg-3) }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--border); background: var(--bg) }
.foot-grid { max-width: var(--page); margin: 0 auto; padding: clamp(34px, 4vw, 56px) var(--gut); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 42px) }
.foot-brand p { margin: 14px 0 0; color: var(--fg-3); font-size: 13.5px; max-width: 26em }
.foot-brand .wordmark { display: inline-block; margin-top: 10px }
.foot-col { display: flex; flex-direction: column; gap: 9px }
.fh { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--fg-3); margin-bottom: 4px }
.foot-col a { font-size: 14px; color: var(--fg-2); transition: color .16s ease }
.foot-col a:hover { color: var(--brand) }
.foot-bar {
  max-width: var(--page); margin: 0 auto; padding: 16px var(--gut); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 10.5px; letter-spacing: .1em; color: var(--fg-3);
}

/* ── reveal ───────────────────────────────────────────────────────────── */

[data-r] { opacity: 0; transform: translateY(20px) }
[data-r].in { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  [data-r], h1 .w { opacity: 1 !important; transform: none !important }
}

/* ── responsive ───────────────────────────────────────────────────────────
   Three real layouts, not one layout squeezed: wide (two columns and a rail),
   tablet (single column, art kept), phone (single column, art dropped where it
   would only be decoration, and every control at least 44px tall).
   ─────────────────────────────────────────────────────────────────────── */

/* laptops: the nav labels lose their index numbers before they wrap */
@media (max-width: 1180px) {
  .bar-nav a i { display: none }
  .bar-nav a { padding: 8px 10px }
  .step { grid-template-columns: 52px minmax(0, 1fr) 230px }
}

/* tablet / small laptop */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr }
  .hero-left { max-width: 40em }
  .board { grid-template-columns: 1fr }
  .board-view { min-height: 260px }
  .cards { grid-template-columns: 1fr 1fr }
  .card:nth-child(3n) { border-right: 1px solid var(--border) }
  .card:nth-child(2n) { border-right: 0 }
  .card:nth-last-child(-n+3) { border-bottom: 1px solid var(--border) }
  .card:nth-last-child(-n+2) { border-bottom: 0 }
  .bar-nav { display: none }
  .creed { grid-template-columns: 1fr; gap: 24px }
  .creed-h { align-items: center }
  .step { grid-template-columns: 52px minmax(0, 1fr) }
  .st-art { display: none }
  .get { grid-template-columns: 1fr }
  .get-card { border-right: 0; border-bottom: 1px solid var(--border) }
  .get-card:last-child { border-bottom: 0 }
  .foot-grid { grid-template-columns: 1fr 1fr }
  .foot-brand { grid-column: 1 / -1 }
}

/* phone */
@media (max-width: 720px) {
  :root { --gut: 18px }

  /* the header keeps only what a thumb needs */
  .bar { height: 58px; gap: 10px }
  .stars { display: none }
  .tag-sq { display: none }
  .wordmark { font-size: 17px }
  .sq-btn, .btn-hard { height: 40px }
  .btn-hard { padding: 0 14px; font-size: 12px }

  h1.display { font-size: clamp(31px, 9.4vw, 44px) }
  .lede { font-size: 15.5px }
  .kicker { font-size: 9.5px; letter-spacing: .12em; padding: 6px 10px }

  /* full-width targets beat two cramped buttons on one row */
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px }
  .cta-row .btn-hard, .cta-row .btn-wire { width: 100%; height: 50px; font-size: 14px }
  .dl-line { font-size: 10px; line-height: 1.6 }

  .proof { grid-template-columns: 1fr 1fr }
  .proof > div:nth-child(2n) { border-right: 0 }
  .proof > div:nth-child(-n+2) { border-bottom: 1px solid var(--border) }
  .proof dt { font-size: 23px }

  /* the mock window drops its rail and keeps the pane readable */
  .win-body { grid-template-columns: 1fr; min-height: 0 }
  .win-rail { display: none }
  .win-tabs { overflow-x: auto; scrollbar-width: none }
  .win-tabs::-webkit-scrollbar { display: none }
  .wt { padding: 12px 14px }
  .pane { padding: 12px }
  .term { font-size: 10.5px; min-height: 210px }
  .dl code, .dbody { font-size: 10px }
  .files { grid-template-columns: 1fr }
  .tree { display: none }

  .try { flex-wrap: wrap }
  .try-l { display: none }
  .try input { width: 100%; flex: 1 0 100%; height: 48px }
  .try .btn-hard { width: calc(100% - 14px); margin: 0 7px 7px; height: 42px }

  .ticker-move { font-size: 10px; gap: 18px }

  .sec-head { flex-direction: column; gap: 14px }
  .sec-head h2 { font-size: clamp(25px, 7.4vw, 34px) }
  .sec-head p { font-size: 15px }

  .board-tiles { grid-template-columns: 1fr }
  .tile b { font-size: 15px }
  .bv-body { font-size: 10.5px }

  .cards { grid-template-columns: 1fr }
  .card { border-right: 0 !important; border-bottom: 1px solid var(--border) !important }
  .card:last-child { border-bottom: 0 !important }
  .c-art { height: 116px }

  .steps { border-top: 0 }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 22px 0 }
  .st-n { font-size: 22px }
  .step h3 { font-size: 17px }
  .step p { font-size: 14.5px }

  .creed-h { flex-direction: column; gap: 12px }
  .creed-list li { font-size: 14.5px; padding-left: 22px }

  .q summary { font-size: 16.5px; padding: 17px 2px; gap: 12px }
  .q p { font-size: 14.5px; padding-right: 0 }

  .final h2 { font-size: clamp(34px, 11vw, 58px) }
  .final-lede { font-size: 15.5px }
  .final-cta { flex-direction: column; align-items: stretch }
  .final-cta .btn-hard { width: 100% }
  .final-note { text-align: center; line-height: 1.7 }

  .sh-body { font-size: 11px; padding: 13px 11px }
  .install { font-size: 14px; padding-left: 17px }
  /* a long command must wrap here, not push the page sideways */
  .cmd { flex-direction: column; align-items: stretch }
  .cmd code { white-space: pre-wrap; overflow-wrap: anywhere }
  .cmd .copy { border-left: 0; border-top: 1px solid var(--border); padding: 8px 12px }

  .foot-grid { grid-template-columns: 1fr; gap: 26px }
  .foot-bar { flex-direction: column; gap: 8px; text-align: center; line-height: 1.7 }

  /* the ambient grid is noise at this size */
  .grid-overlay { background-size: 56px 56px; opacity: .32 }
}

@media (max-width: 380px) {
  h1.display { font-size: 29px }
  .proof { grid-template-columns: 1fr }
  .proof > div { border-right: 0; border-bottom: 1px solid var(--border) }
  .proof > div:last-child { border-bottom: 0 }
}

/* coarse pointers get real targets and no hover-only affordances */
@media (pointer: coarse) {
  .tile, .srow, .wt, .q summary, .copy, .foot-col a { min-height: 44px }
  .copy { padding: 10px 14px }
  .tile:hover, .btn-hard:hover, .btn-wire:hover, .stars:hover, .sq-btn:hover { transform: none }
}

/* ── get it: two honest paths, download or source ─────────────────────── */

.dl-line { margin-top: 14px; font-size: 11px; letter-spacing: .04em; color: var(--fg-3) }

.get { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-strong); background: var(--panel); box-shadow: var(--hard); margin-bottom: 6px }
.get-card { padding: clamp(20px, 2.6vw, 34px); border-right: 1px solid var(--border) }
.get-card:last-child { border-right: 0; background: var(--bg-2) }
.get-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--fg-3);
}
.get-h b { color: var(--brand); border: 1px solid var(--brand); padding: 2px 6px; font-weight: 400 }
.btn-hard.full { width: 100%; }

.install { margin: 18px 0 0; padding: 0 0 0 19px; color: var(--fg-2); font-size: 14px; line-height: 1.6 }
.install li { margin-bottom: 11px }
.install li::marker { font-family: var(--mono); font-size: 11px; color: var(--brand) }
.install b { color: var(--fg); font-weight: 600 }
.cmd { display: flex; align-items: stretch; margin-top: 8px; border: 1px solid var(--border); background: var(--panel-2) }
.cmd code { flex: 1; min-width: 0; padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); overflow-x: auto; white-space: nowrap }
.cmd .copy { margin: 0; border: 0; border-left: 1px solid var(--border); padding: 0 12px }

.sha { display: block; margin-top: 18px; font-size: 10.5px; color: var(--fg-3); letter-spacing: .04em }
.sha a { color: var(--fg-2); border-bottom: 1px solid var(--border-strong) }
.sha a:hover { color: var(--brand); border-color: var(--brand) }

.get-note { margin: 16px 0 0; font-size: 13.5px; color: var(--fg-3); line-height: 1.6 }
.get-note code { font-family: var(--mono); font-size: 12px; color: var(--fg-2) }
.get .shell { max-width: none; box-shadow: none }


/* ── architecture chooser ─────────────────────────────────────────────── */

.arch { display: inline-flex; margin-top: 16px; border: 1px solid var(--border); background: var(--panel) }
.arch-b {
  padding: 8px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--fg-3); border-right: 1px solid var(--border);
  transition: color .16s ease, background .16s ease;
}
.arch-b:last-child { border-right: 0 }
.arch-b:hover { color: var(--fg-2) }
.arch-b.on { color: var(--brand-fg); background: var(--brand) }
.dl-line { margin-top: 10px }

.dl-pair { display: grid; gap: 10px }
.dl-pair .btn-wire { height: 46px; font-size: 13px }
.dl-pair em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  opacity: .7; margin-left: 2px;
}
.btn-wire.full { width: 100% }