/* The landing page. The palette and faces are the window's (app/src/renderer/styles/tokens.css). */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/plex-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/plex-sans-500.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(fonts/plex-sans-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400.woff2) format('woff2'); }

:root {
  --surface: #F1EFEA;
  --panel: #FAF9F6;
  --ink: #22252A;
  --muted: #646970;
  --hairline: #DAD6CE;
  --grid: #E4E1DA;
  --accent: #1D46B8;
  --accent-wash: #E3E9F8;
  --user-mark: #CF3F2C;
  --agent-mark: #288156;
  --ok: #1B5B3C;
  --fail: #9B2B1D;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --measure: 66ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1A1C1F; --panel: #222529; --ink: #E9E7E2; --muted: #9A9FA6; --hairline: #33373C; --grid: #26292D;
    --accent: #7C9BF7; --accent-wash: #252F4A; --user-mark: #E8674F; --agent-mark: #4FB384; --ok: #6CC79A; --fail: #F08A78;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #1A1C1F; --panel: #222529; --ink: #E9E7E2; --muted: #9A9FA6; --hairline: #33373C; --grid: #26292D;
  --accent: #7C9BF7; --accent-wash: #252F4A; --user-mark: #E8674F; --agent-mark: #4FB384; --ok: #6CC79A; --fail: #F08A78;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 400 17px/1.55 var(--font-ui); overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible, .button:focus-visible, video:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.015em; }
h3 { font-size: 18px; font-weight: 500; }
p, li { max-width: var(--measure); }
code, pre, .num, .ref { font-family: var(--font-mono); font-size: 0.92em; }
.ref { color: var(--accent); }

.skip { position: absolute; left: 16px; top: -48px; background: var(--panel); padding: 8px 12px; z-index: 2; }
.skip:focus { top: 8px; }

.top, main > section, .foot { padding-inline: max(16px, calc((100vw - 1160px) / 2)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 20px; }
.top nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; justify-content: end; }
.top nav a { color: var(--ink); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--accent); }

main > section { padding-block: clamp(56px, 9vw, 112px); }
main > section + section { border-top: 1px solid var(--hairline); }
.section-lede { color: var(--muted); margin: 14px 0 0; font-size: 18px; }

/* Hero: the words on the left, the part being rebuilt on the right. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(24px, 5vw, 64px); }
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); letter-spacing: -0.025em; max-width: 14ch; }
.lede { font-size: clamp(18px, 1.8vw, 21px); margin: 22px 0 0; max-width: 34ch; }
.note { color: var(--muted); font-size: 15px; margin-top: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-block; padding: 11px 18px; border-radius: 6px; border: 1px solid var(--hairline);
  background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 500;
  transition: border-color 160ms, transform 160ms;
}
.button:hover { border-color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.button.primary:hover { transform: translateY(-1px); }
.button.big { padding: 14px 24px; font-size: 18px; }
.gh-button { display: inline-flex; align-items: center; gap: 10px; border-color: var(--ink); border-width: 2px; padding: 12px 22px; }
.gh-button:hover { border-color: var(--accent); transform: translateY(-1px); }
.gh { flex: none; width: 18px; height: 18px; }
.nav-gh { display: inline-flex; align-items: center; gap: 6px; }
.top nav a.nav-cta { background: var(--accent); color: var(--panel); padding: 6px 14px; border-radius: 6px; font-weight: 500; }
.top nav a.nav-cta:hover { color: var(--panel); opacity: .9; }

.bench { margin: 0; background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 12px 16px; }
#part { width: 100%; aspect-ratio: 400 / 340; }
#part .grid line { stroke: var(--grid); stroke-width: 1; }
#part .edges path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
#part .edges path.face { fill: var(--accent-wash); stroke: none; opacity: 0.7; }
#part .edges path.hole { stroke: var(--accent); }
#part.drawing .edges path:not(.face) { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.6s cubic-bezier(.6,.1,.3,1) forwards; animation-delay: var(--delay, 0s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
#part .dim-line { stroke: var(--agent-mark); stroke-width: 1.4; }
#part .dim-text { fill: var(--agent-mark); font: 13px var(--font-mono); }
#part .pin-stem { stroke: var(--user-mark); stroke-width: 2; }
#part .pin-head { fill: var(--user-mark); }
#part .pin-ref { fill: var(--panel); font: 9px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
#part .pin, #part .dim { transition: opacity 400ms; }
#part:not(.marked) .pin, #part:not(.marked) .dim { opacity: 0; }
.bench figcaption { display: grid; gap: 4px; padding: 10px 6px 0; font-size: 14px; color: var(--muted); }
.verdict { font-weight: 500; color: var(--fail); transition: color 300ms; }
.verdict.pass { color: var(--ok); }

/* The loop. */
.loop-body { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: clamp(24px, 6vw, 80px); align-items: center; margin-top: 40px; }
#ring { width: 100%; }
.ring-track { fill: none; stroke: var(--hairline); stroke-width: 2; }
.ring-trail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 160px 160px; }
.ring-dot { fill: var(--accent); }
.ring-nodes circle { fill: var(--panel); stroke: var(--hairline); stroke-width: 2; transition: stroke 300ms, fill 300ms; }
.ring-nodes text { fill: var(--muted); font: 14px var(--font-mono); text-anchor: middle; dominant-baseline: central; transition: fill 300ms; }
.ring-nodes g.on circle { stroke: var(--accent); fill: var(--accent-wash); }
.ring-nodes g.on text { fill: var(--accent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 52px; border-radius: 8px; border-left: 2px solid transparent; transition: background 300ms, border-color 300ms; }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 15px; font: 15px var(--font-mono); color: var(--muted); }
.steps li p { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.steps li.on { background: var(--panel); border-left-color: var(--accent); }
.steps li.on::before { color: var(--accent); }

/* Pictures. */
.recording video { width: 100%; margin-top: 36px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--panel); }
.wide img { margin-top: 36px; border-radius: 10px; border: 1px solid var(--hairline); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.shots figure { margin: 0; }
.shots img { border-radius: 8px; border: 1px solid var(--hairline); aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; width: 100%; }
.shots figcaption { font-size: 15px; color: var(--muted); margin-top: 10px; }

.fit-cols, .run-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.run-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit-cols ul, .run-cols ul { padding-left: 1.1em; margin: 12px 0 0; }
.fit-cols li, .run-cols li { margin-bottom: 6px; }
.fit-cols > div { border-top: 2px solid var(--hairline); padding-top: 14px; }
.fit-cols > div:first-child { border-top-color: var(--agent-mark); }
.fit-cols > div:last-child { border-top-color: var(--user-mark); }
.aside { color: var(--muted); font-size: 16px; margin-top: 24px; }
pre { background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; padding: 16px; overflow-x: auto; margin: 12px 0 0; line-height: 1.6; }

.join h2 { font-size: clamp(32px, 5vw, 52px); }
.join-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.join-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; padding: clamp(20px, 3vw, 32px); }
.join-card p, .join-card ul { margin: 12px 0 0; }
.join-card ul { padding-left: 1.1em; }
.join-card li { margin-bottom: 6px; }
.join-card .actions { margin-top: 20px; }
.cmd { position: relative; }
.cmd pre { padding-right: 84px; }
.copy[hidden] { display: none !important; }
.copy { position: absolute; top: 20px; right: 10px; font: 500 14px var(--font-ui); padding: 5px 12px; border-radius: 6px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); cursor: pointer; }
.copy:hover { border-color: var(--accent); }
.copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 32px 48px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 15px; }
.foot p { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Sections rise a little as they come into view; with script off, or motion reduced, they are simply there. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.js .reveal.seen { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero, .loop-body { grid-template-columns: minmax(0, 1fr); }
  #ring { max-width: 280px; }
  .shots, .fit-cols, .run-cols, .join-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .brand span { display: none; }
  .cmd pre { padding-right: 16px; }
  .copy { position: static; display: block; margin: 12px 0 0 auto; }
  .actions .button { width: 100%; text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  #part.drawing .edges path { stroke-dashoffset: 0; }
}