:root {
  --text: #f2ece2;
  --text-2: rgba(242, 236, 226, 0.66);
  --text-3: rgba(242, 236, 226, 0.44);
  --hairline: rgba(255, 236, 210, 0.16);
  --ink: #2a2116;
  --max: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
  margin: 0;
  background: #0d0d0e;
  color: var(--text);
  font: 400 16px/1.55 Geist, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Clipped here, not on body: iOS Safari still pans sideways when the overflow is only on the viewport. */
main { overflow-x: clip; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
code { font: 500 0.92em "Geist Mono", ui-monospace, monospace; color: var(--text); }

/* Lighter frost for glass that sits on the sunlit sky. */
.glass-light {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 8px 30px rgba(60, 40, 10, 0.12);
}

/* Below the hero the page sits on the same painting, blurred and dimmed, so every glass frame has colour to frost. */
.backdrop {
  position: fixed;
  inset: -80px;
  z-index: -1;
  background: url(assets/mountain.webp) center bottom / cover;
  filter: blur(70px) brightness(0.42) saturate(1.3);
}

.nav {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(720px, calc(100% - 32px));
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  transform: translateX(-50%);
  color: var(--ink);
}
.brand { display: flex; align-items: center; gap: 9px; font: 400 24px/1 "Instrument Serif", serif; }
.brand img { border-radius: 6px; }
.nav nav { display: flex; gap: 22px; margin-right: auto; font-size: 15px; color: rgba(42, 33, 22, 0.72); }
.nav nav a:hover { color: var(--ink); }

.hero {
  position: relative;
  padding: 196px 24px 0;
  isolation: isolate;
  text-align: center;
  color: var(--ink);
}
/* The painting's sky was mirrored upward in the asset so the headline sits on sky, not on the peak. Masked rather than faded to a colour, so the forest melts into the blurred backdrop below. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #25230b url(assets/mountain.webp) center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}

.hero-copy { max-width: 860px; margin: 0 auto; }
h1 {
  margin: 0;
  font: 400 clamp(44px, 7.4vw, 104px)/0.98 "Instrument Serif", serif;
  letter-spacing: -0.02em;
}
h1 em { font-style: italic; }
/* The lede's last line reaches the peak at most widths, so a sky-coloured halo keeps it legible there. */
.lede { margin: 22px auto 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); text-shadow: 0 0 14px rgba(250, 232, 200, 0.7); }
.hero .btn { margin-top: 36px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  font-weight: 500;
  font-size: 16px;
  transition: transform 160ms ease, filter 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:hover { filter: brightness(1.06); }
.btn svg { width: 17px; height: 17px; fill: currentColor; margin-top: -2px; }
.btn.primary {
  color: #fff;
  background: linear-gradient(180deg, #f59a4a, #e8742a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(160, 70, 10, 0.35), 0 8px 24px rgba(200, 90, 20, 0.35);
}
.btn.small { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 15px; }
.fine { margin: 16px 0 0; font-size: 13px; color: var(--text-3); }

/* Light frame around the window, like a device bezel of frosted glass. */
.bezel {
  width: min(1180px, 100%);
  margin: 88px auto 0;
  padding: 10px;
  border-radius: 24px;
}

/* The capture keeps the app's own alpha (the window paints #171717 at 85%), so blurring the wallpaper behind it reproduces the macOS glass. */
.window {
  position: relative;
  margin: 0;
  border-radius: 14px;
  container-type: inline-size;
  overflow: hidden;
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(20, 15, 5, 0.45);
}
.window img { width: 100%; height: auto; }
/* GPUI renders the content only; macOS draws the traffic lights. Positions are in points of the 1440pt capture. */
.lights { position: absolute; top: calc(14 / 1440 * 100cqw); left: calc(14 / 1440 * 100cqw); display: flex; gap: calc(8 / 1440 * 100cqw); }
.lights i { width: calc(12 / 1440 * 100cqw); height: calc(12 / 1440 * 100cqw); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

/* The hero window is live (app.js): laid out at 1440×900pt like the app, then scaled to the frame. Sizes and colours follow the desktop theme's dark tokens. */
.window.live { aspect-ratio: 1440 / 900; }
.window.live > img { display: none; }
.live .lights { z-index: 1; }
.app {
  --t1: #ebebeb; --tb: #bcbcbc; --t2: #a1a1a1; --t3: #818181; --t4: #6c6c6c;
  --f2: #ebebeb14; --f3: #ebebeb1a; --f4: #ebebeb1f;
  --sep: #ebebeb14; --sep2: #ebebeb24; --hair: #ebebeb12;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 1440px;
  height: 900px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  background: #171717d9;
  color: var(--t1);
  text-align: left;
  font: 400 14px/1.2 -apple-system, BlinkMacSystemFont, Geist, sans-serif;
}
.app button { display: flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.app svg { flex: none; }
.app .ib { position: relative; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--t3); }
.app .ib:hover { background: var(--f3); }

.app .side { display: flex; flex-direction: column; flex: none; width: 272px; padding: 0 8px 10px; border-right: 0.5px solid var(--sep); }
.side-head { display: flex; justify-content: flex-end; align-items: center; height: 42px; }
.side .badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ffb224; color: #fff; font: 700 10px/16px -apple-system, sans-serif; }
.app .field { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 4px 6px; padding: 0 12px; border-radius: 10px; background: #ebebeb0d; box-shadow: 0 0 0 0.5px var(--hair); color: var(--t3); font-size: 13.5px; }
.field span { flex: 1; color: var(--t2); }
.app .field kbd { padding: 0; background: none; font: 11.5px -apple-system, sans-serif; }
.side .label { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 4px 6px; color: var(--t3); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.side .label .ib { width: 22px; height: 22px; border-radius: 6px; }
.app .row { display: flex; align-items: center; gap: 7px; width: 100%; height: 28px; margin-bottom: 1px; padding: 0 6px; border-radius: 8px; color: var(--t2); font-size: 13px; }
.app .row:hover { background: var(--f2); }
.app .row.on { background: var(--f4); color: var(--t1); }
.row .name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .glyph { display: grid; place-items: center; width: 20px; flex: none; color: var(--t4); }
.app .proj { color: var(--t1); }
.app .wt { padding-left: 16px; color: var(--tb); }
.row.on .glyph { color: var(--t2); }
.slot { position: relative; width: 20px; height: 20px; flex: none; }
.tile { position: relative; display: grid; place-items: center; height: 100%; border-radius: 5px; background: #ebebeb1a; box-shadow: inset 0 0 0 0.5px var(--sep2); font-size: 12px; transition: opacity 120ms; }
.chev { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--t4); transition: opacity 120ms; }
.proj:hover .tile { opacity: 0; }
.proj:hover .chev { opacity: 1; }
.tile .alert { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #ffb224; box-shadow: 0 0 0 2px #232323; }
.tile .busy { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #232323; }
.busy .spin { transform: scale(0.85); }

.need { width: 7px; height: 7px; border-radius: 50%; background: #ffb224; }
/* The app's working mark is a braille spinner drawn as text at 1.6× its box, not an SVG. */
.spin { display: grid; place-items: center; width: 11px; height: 11px; color: #f76b15; font: 17.6px/11px Menlo, monospace; }
.spin::before { content: "⠋"; animation: braille 1s infinite; }
@keyframes braille {
  10% { content: "⠙"; } 20% { content: "⠹"; } 30% { content: "⠸"; } 40% { content: "⠼"; }
  50% { content: "⠴"; } 60% { content: "⠦"; } 70% { content: "⠧"; } 80% { content: "⠇"; } 90% { content: "⠏"; }
}
.app .ok { color: #30a46c; }
.app .fail { color: #e5484d; }
.app .pr { color: #3dd68c; }
.app .merged { color: #a371f7; }
.app .claude { color: #d97757; }

.pane { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bar { display: flex; align-items: center; gap: 6px; flex: none; height: 42px; padding: 0 10px; }
.bar > .ib { color: var(--t2); }
.tabs:empty { display: none; }
.tab { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 10px; border-radius: 7px; background: #ebebeb1a; box-shadow: 0 1px 2px #0000001f, 0 0 0 0.5px var(--sep2); font-size: 12.5px; font-weight: 600; }
.tab .glyph { display: grid; place-items: center; width: 13px; }
.groups { display: flex; gap: 8px; margin-left: auto; }
.group { display: flex; align-items: center; height: 32px; padding: 0 1px; border-radius: 16px; background: #2a2a2acc; box-shadow: 0 0 0 0.5px var(--hair), inset 0 1px #ffffff0f, 0 6px 20px #0000000f; }
.app .group button { justify-content: center; width: 34px; height: 30px; border-radius: 15px; }
.app .group button:hover { background: var(--f3); }
.body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; }

.home { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0 40px 70px; }
.home .title { font-size: 21px; line-height: 25px; font-weight: 600; }
.home .branch { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--t3); font-size: 13px; }
.composer { width: 100%; max-width: 600px; margin-top: 20px; border-radius: 14px; background: #ebebeb1a; box-shadow: 0 0 0 0.5px var(--sep2), 0 1px 2px #0000000a, 0 10px 30px #0000001f; }
.composer textarea { display: block; width: 100%; height: 60px; padding: 14px 16px 0; border: 0; outline: 0; resize: none; background: none; color: var(--t1); font: inherit; font-size: 15px; line-height: 23px; }
.composer textarea::placeholder { color: var(--t3); }
.foot { display: flex; align-items: center; gap: 2px; padding: 4px 10px 10px; font-size: 13px; }
.app .chip { gap: 7px; height: 30px; padding: 0 8px 0 10px; border-radius: 8px; background: var(--f2); font-weight: 500; }
.app .chip:hover { background: var(--f3); }
.chip b { font-weight: 600; }
.chip > svg { color: var(--t2); }
.chip > svg:last-child { color: var(--t4); }
.foot .sp { flex: 1; }
.app kbd { padding: 1px 6px; border-radius: 5px; background: var(--f4); color: var(--t2); font: 11px/16px "Geist Mono", ui-monospace, monospace; }
.foot kbd { margin-right: 8px; }
.app .send { justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--t1); color: #171717; box-shadow: inset 0 1px #ffffff2e, 0 4px 12px #0000002e; transition: opacity 120ms; }
.empty .send { opacity: 0.25; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 600px; margin-top: 14px; }
.app .pill { height: 30px; padding: 0 12px; border-radius: 15px; box-shadow: 0 0 0 0.5px var(--sep2); color: var(--t2); font-size: 12.5px; }
.app .pill:hover { background: #ebebeb1a; color: var(--t1); }
.or { display: flex; align-items: center; gap: 4px; margin-top: 22px; color: var(--t3); font-size: 12.5px; }
.app .link { gap: 6px; height: 26px; padding: 0 8px; border-radius: 7px; color: var(--t2); }
.app .link:hover { background: var(--f2); color: var(--t1); }

.term { min-height: 100%; padding: 16px 20px 24px; border-top: 0.5px solid var(--sep); font: 13px/17px "Geist Mono", ui-monospace, monospace; }
.term .l { display: flex; gap: 8px; margin-top: 10px; white-space: pre-wrap; }
.term .l i { font-style: normal; flex: none; }
.term .l b { font-weight: 600; }
.term .you { margin: 0 0 14px; padding: 7px 10px; border-radius: 6px; background: var(--f2); color: var(--t2); }
.term .out { margin-top: 3px; padding-left: 18px; color: var(--t3); }
.term .err { color: #ff9592; }
.term .think { color: #f76b15; }
.think em { font-style: normal; color: var(--t4); }
.ask { margin-top: 16px; padding: 12px 14px; border: 1px solid #ffb22466; border-radius: 8px; }
.ask-h { color: #ffca16; font-weight: 600; }
.ask-cmd { margin-top: 10px; padding-left: 2ch; }
.ask-d { padding-left: 2ch; color: var(--t3); }
.ask-q { margin: 14px 0 6px; }
.app .ask button { width: 100%; padding: 1px 0; color: var(--t2); }
.ask button::before { content: "❯ "; white-space: pre; visibility: hidden; color: #ffca16; }
.app .ask button:hover, .ask:not(:hover) button:first-of-type { color: var(--t1); }
.ask button:hover::before, .ask:not(:hover) button:first-of-type::before { visibility: visible; }
.input { margin-top: 18px; padding: 8px 10px; border: 1px solid var(--sep2); border-radius: 8px; color: var(--t3); }
.caret { display: inline-block; width: 7px; height: 15px; vertical-align: -3px; background: var(--t2); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.panel { display: flex; flex-direction: column; flex: none; width: 334px; border-left: 0.5px solid var(--sep); }
.panel .head { display: flex; align-items: center; flex: none; height: 42px; padding: 0 12px 0 18px; border-bottom: 0.5px solid var(--sep); font-size: 16px; font-weight: 700; }
.head .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.head .ib { color: var(--t2); }
.head .stat { font: 500 11.5px "Geist Mono", ui-monospace, monospace; }
.app .add { color: #3dd68c; font-weight: 500; }
.app .del { color: #e5484d; font-weight: 500; }
.app .find { height: 36px; margin: 8px 8px 0; border-radius: 12px; }
.panel .list { padding: 8px; overflow: auto; }
.app .tr { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; margin-bottom: 1px; padding: 0 10px 0 calc(8px + var(--d, 0) * 16px); border-radius: 8px; color: var(--t1); font-size: 13.5px; font-weight: 450; cursor: default; }
.app button.tr { cursor: pointer; }
.app .tr:hover { background: var(--f2); }
.tr .cv { display: grid; place-items: center; width: 12px; flex: none; color: var(--t4); }
.tr .n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr small { margin-left: 4px; color: var(--t4); font-size: 12px; }
.tr .git { font: 700 11px "Geist Mono", ui-monospace, monospace; }
.app .tr.M { color: #ffca16; }
.app .tr.A { color: #3dd68c; }
.row .from { flex: none; font-size: 11px; }

.rail { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 44px; padding-top: 5px; border-left: 0.5px solid var(--sep); }
.app .rail button { position: relative; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--t2); }
.app .rail button:hover { background: var(--f2); }
.app .rail .on { background: var(--f3); color: var(--t1); }
.rail .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ffb224; }
.rail .count { position: absolute; top: 19px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--t1); color: #171717; box-shadow: 0 0 0 2px #171717; font: 700 10px/16px -apple-system, sans-serif; }

.features { max-width: var(--max); margin: 0 auto; padding: 180px 24px 0; }
h2 { margin: 0; font: 400 clamp(44px, 5.6vw, 76px)/1 "Instrument Serif", serif; letter-spacing: -0.015em; text-wrap: balance; }
h2 em { font-style: italic; }
.intro { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.intro p { margin: 0; max-width: 400px; font-size: 17px; color: var(--text-2); }

.eyebrow { font: 500 12px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }

/* The frame runs past the viewport edge (main clips it), so the window reads as continuing off the page. */
.chapter {
  --bleed: calc(max(0px, (100vw - var(--max)) / 2) + 24px + 120px);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
  margin-top: 170px;
}
.chapter.flip { grid-template-columns: 7fr 5fr; }
.flip .chapter-copy { order: 2; }
.chapter .bezel { width: calc(100% + var(--bleed)); margin: 0; }
.flip .bezel { margin-left: calc(-1 * var(--bleed)); }
.chapter-copy { max-width: 420px; }
.chapter h3 { margin: 26px 0 0; font: 400 clamp(34px, 3.4vw, 48px)/1.04 "Instrument Serif", serif; letter-spacing: -0.01em; }
.chapter p { margin: 18px 0 0; font-size: 17px; color: var(--text-2); }

.also { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 200px; border-top: 0.5px solid var(--hairline); }
.also article { padding: 28px 36px 4px; border-left: 0.5px solid var(--hairline); }
.also article:first-child { padding-left: 0; border-left: 0; }
.also h3 { margin: 48px 0 0; font: 400 28px/1.1 "Instrument Serif", serif; }
.also p { margin: 12px 0 0; max-width: 320px; font-size: 15px; color: var(--text-2); }

.closing { max-width: var(--max); margin: 0 auto; padding: 200px 24px 120px; }
.closing .bezel { width: 100%; margin: 0; }
/* The painting again, unblurred, so the page ends where it began. */
.canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 24px 320px;
  border-radius: 14px;
  text-align: center;
  color: var(--ink);
  background: url(assets/mountain.webp) center 6% / cover;
}
.canvas .btn { margin-top: 36px; }
.canvas .fine { color: rgba(42, 33, 22, 0.62); }

.footer {
  display: flex;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 40px;
  border-top: 0.5px solid var(--hairline);
  font-size: 14px;
  color: var(--text-3);
}
.footer nav { display: flex; gap: 22px; }
.footer a:hover { color: var(--text); }

@media (max-width: 1100px) {
  .also { grid-template-columns: 1fr; margin-top: 140px; border-top: 0; }
  .also article, .also article:first-child { padding: 24px 0 8px; border-left: 0; border-top: 0.5px solid var(--hairline); }
  .also h3 { margin-top: 20px; }
}

@media (max-width: 820px) {
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: 136px; }
  .hero::after { background-size: cover; }
  .bezel { margin-top: 52px; padding: 6px; border-radius: 16px; }
  /* The whole 1440pt window is unreadable under 560px, so on phones it runs off the right edge instead. */
  .hero .bezel { width: max(100%, 560px); }
  .chapter .bezel { width: max(100% + var(--bleed), 560px); }
  .window { border-radius: 11px; }
  .window.live { aspect-ratio: auto; }
  .window.live > img { display: block; }
  .app { display: none; }
  .features { padding-top: 96px; }
  .intro, .chapter, .chapter.flip { grid-template-columns: 1fr; gap: 28px; }
  .chapter { margin-top: 96px; }
  .flip .chapter-copy { order: 0; }
  .flip .bezel { margin-left: 0; }
  .also { margin-top: 96px; }
  .closing { padding: 96px 16px 64px; }
  .canvas { padding: 56px 20px 300px; border-radius: 11px; background-position: 0% 0; }
}

/* Scroll-driven, so the static rules above are the finished state: browsers without scroll timelines show them as is. */
@keyframes fill { from { background-position: 100% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .intro h2 { view-timeline-name: --intro; }
    /* On an inline box the gradient runs along the lines laid end to end, so the fill sweeps in reading order. */
    .fill {
      color: transparent;
      background: linear-gradient(90deg, var(--text) 47%, rgba(242, 236, 226, 0.2) 53%) 0 0 / 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: fill linear both;
      animation-timeline: --intro;
      animation-range: entry 60% cover 50%;
    }
    .chapter-copy, .chapter .bezel, .also article {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }
    .also article:nth-child(2) { animation-range: entry 25% entry 95%; }
    .also article:nth-child(3) { animation-range: entry 40% cover 25%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .spin::before, .caret { animation: none; }
}