/* Plain and bright: white page, black type, centred headlines, pill buttons. Follows the system dark mode.
   Colour lives only in the soft panels behind the product, so the product is what you look at. */
:root {
  --bg: #ffffff;
  --text: #0d0d0d;
  --dim: #5d5d5d;
  --faint: #8f8f8f;
  --line: #e8e8e8;
  --soft: #f6f6f5;
  --soft-hover: #ececea;
  --line-strong: #d4d4d4;
  --dark-hover: #333;
  --on-dark: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --out: cubic-bezier(.16, 1, .3, 1);

  --t-bg: #1b1a21; --t-line: #2c2b34; --t-text: #e7e6ec; --t-dim: #8d8b98;
  --t-accent: #ff875f; --t-purple: #b793ff; --t-blue: #7fb2ff; --t-green: #7bd88f; --t-yellow: #f2c66d; --t-red: #f08a7e;
}

/* Dark: the same page inverted. The panels are overridden at the end of the file. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f11; --text: #f2f2f3; --dim: #a8a8ae; --faint: #75757c;
    --line: #26262b; --line-strong: #3a3a40; --soft: #18181b; --soft-hover: #202024;
    --dark-hover: #d6d6d9; --on-dark: #0f0f11;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--sans); color-scheme: light dark; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 30; background: var(--text); color: var(--on-dark); padding: 8px 12px; border-radius: 8px; }
.logo { width: 24px; height: 24px; flex: none; }
.logo .cursor { transition: opacity .2s; }
.mark:hover .logo .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Buttons: one dark primary, one light secondary (Von Restorff). Tall enough to hit easily (Fitts). */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 500; transition: background .2s, transform .15s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--text); color: var(--on-dark); }
.btn-dark:hover { background: var(--dark-hover); }
.btn-light { background: var(--soft); color: var(--text); }
.btn-light:hover { background: var(--soft-hover); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

/* Header: logo left, links centre, action right (Jakob's law). */
.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 24px; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.mark { display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-weight: 600; font-size: 18px; }
.mark-foot { display: inline-flex; align-items: center; gap: 8px; }
.mark-foot .logo { width: 18px; height: 18px; }
.top nav { display: flex; gap: 32px; font-size: 15px; color: var(--dim); }
.top nav a:hover { color: var(--text); }
.top .btn { justify-self: end; }

/* Hero */
.hero { text-align: center; padding: clamp(72px, 12vh, 136px) 24px 56px; }
.hero h1 { font-size: clamp(44px, 6.6vw, 88px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; max-width: 11em; margin-inline: auto; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--dim); max-width: 30em; margin: 24px auto 36px; }
.hero .install { margin-bottom: 20px; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Soft painted panels behind the product. */
.canvas { position: relative; border-radius: 28px; overflow: hidden; background:
  radial-gradient(60% 80% at 15% 20%, #ffd2bd 0%, transparent 60%),
  radial-gradient(55% 70% at 85% 25%, #d9ccff 0%, transparent 60%),
  radial-gradient(70% 70% at 60% 100%, #ffe7c7 0%, transparent 65%),
  #f4efe9; }
.canvas-0 { background: radial-gradient(70% 90% at 20% 10%, #cfe0ff 0%, transparent 60%), radial-gradient(60% 80% at 90% 90%, #d9ccff 0%, transparent 60%), #eef0f7; }
.canvas-1 { background: radial-gradient(70% 90% at 80% 10%, #ffd8c4 0%, transparent 60%), radial-gradient(60% 80% at 10% 90%, #d7f0dc 0%, transparent 60%), #f5f1ea; }

/* Showcase: the replay plays by itself; the chapters show where it is and let you jump. */
.showcase { width: min(1200px, 100% - 48px); margin: 0 auto; }
.showcase .canvas { padding: clamp(24px, 6vw, 88px) clamp(16px, 7vw, 120px); }
.term { margin: 0; border-radius: 14px; background: var(--t-bg); color: var(--t-text); font: 13.5px/1.75 var(--mono); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(40, 20, 60, .45); }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--t-line); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 10px; color: var(--t-dim); font-size: 12px; }
.term-body { padding: 20px 24px; height: 420px; overflow: hidden; }
.term-status { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-top: 1px solid var(--t-line); font-size: 12.5px; color: var(--t-dim); }
.term-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); }
.term[data-step="2"] .term-status .dot { background: var(--t-yellow); animation: pulse 1.4s ease-in-out infinite; }
.c-accent { color: var(--t-accent); } .c-purple { color: var(--t-purple); } .c-blue { color: var(--t-blue); }
.c-green { color: var(--t-green); } .c-yellow { color: var(--t-yellow); } .c-dim { color: var(--t-dim); }
.t-user { border-left: 2px solid var(--t-accent); padding-left: 12px; margin: 10px 0 14px; }
.t-out { padding-left: 20px; }
.t-text { margin: 14px 0 10px; max-width: 62ch; }
.t-ask { border: 1px solid var(--t-yellow); border-radius: 10px; padding: 12px 14px; margin: 4px 0 12px; transition: border-color .4s; }
.term[data-step="3"] .t-ask, .term[data-step="4"] .t-ask { border-color: var(--t-line); }
.term[data-step="4"] .t-ask .diff { text-decoration: line-through; opacity: .45; }
.ask-head { font-weight: 700; margin-bottom: 8px; }
.diff { padding: 0 8px; white-space: pre; overflow-x: auto; transition: opacity .4s; }
.diff.del { background: #3a1c1c; color: var(--t-red); }
.diff.add { background: #16301f; color: var(--t-green); }
.ask-keys { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; color: var(--t-dim); }
.ask-keys kbd { font: 700 12px var(--mono); color: #111; padding: 1px 7px; border-radius: 4px; margin-right: 6px; }
.k-y { background: var(--t-green); } .k-a { background: var(--t-purple); } .k-n { background: var(--t-red); }
.term[data-step="3"] .k-y { animation: press .45s var(--out); }
.js .term .t { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--out), transform .35s var(--out); transition-delay: calc(var(--i, 0) * 110ms); }
.js .term .t.in { opacity: 1; transform: none; }
@keyframes press { 40% { transform: scale(.8); box-shadow: 0 0 0 6px rgba(123, 216, 143, .3); } }
@keyframes pulse { 50% { opacity: .35; } }

.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.chapter { align-self: start; font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--faint); transition: color .3s; }
.chapter:hover, .chapter[aria-selected="true"] { color: var(--text); }
.chapter .bar { display: block; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.chapter .bar span { display: block; height: 100%; width: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; }
.chapter[aria-selected="true"] .bar span { animation: fill var(--dur, 4s) linear forwards; }
.chapter.past .bar span { transform: scaleX(1); }
.chapter strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.chapter-text { font-size: 14px; line-height: 1.45; color: var(--dim); }
.chapter:not([aria-selected="true"]) .chapter-text { color: var(--faint); }
@keyframes fill { to { transform: scaleX(1); } }

/* Sections */
.block { width: min(1200px, 100% - 48px); margin: 0 auto; padding-top: clamp(96px, 14vh, 160px); }
.block > h2 { text-align: center; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; margin-bottom: 48px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--soft); border-radius: 24px; padding: 32px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; transition: background .2s; }
.card:hover { background: var(--soft-hover); }
.card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.card p { color: var(--dim); font-size: 16px; }
.model-names { text-align: center; color: var(--faint); font-size: 15px; margin-top: 32px; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery figure { margin: 0; }
.gallery .canvas { padding: clamp(20px, 4vw, 48px); border-radius: 24px; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 20px 50px -24px rgba(0,0,0,.35); transition: transform .6s var(--out); }
.gallery figure:hover img { transform: scale(1.02); }
.gallery figcaption { margin-top: 14px; color: var(--dim); font-size: 15px; }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-size: 22px; line-height: 1; transition: transform .3s var(--out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--dim); padding-bottom: 22px; }
.faq-more { margin-top: 24px; font-weight: 500; }
.faq-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The last section repeats the install (serial position). */
.get { text-align: center; padding-bottom: 24px; }
.install { display: flex; align-items: stretch; width: min(640px, 100%); margin: 0 auto; padding: 6px; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: copy; transition: border-color .2s, box-shadow .2s; }
.install:hover { border-color: var(--line-strong); box-shadow: 0 6px 24px -12px rgba(0,0,0,.2); }
.cmd { flex: 1; align-self: center; padding: 6px 16px; font: 13px/1.5 var(--mono); color: var(--dim); overflow-wrap: break-word; }
.ps1 { color: var(--faint); }
.copy-state { display: grid; place-items: center; padding: 0 22px; border-radius: 999px; background: var(--text); color: var(--on-dark); font-size: 15px; font-weight: 500; transition: background .2s; }
.install.done .copy-state { background: #1f8a4c; }
.dls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 24px; font-size: 14px; color: var(--faint); }
.dls a:hover { color: var(--text); }
.dl.mine { color: var(--text); font-weight: 600; }

/* Docs: a sticky contents list beside one long page. */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; width: min(1120px, 100% - 48px); margin: 0 auto; padding-top: 48px; }
.toc { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 112px); overflow-y: auto; font-size: 14px; }
.toc-title { font-weight: 600; margin-bottom: 8px; }
.toc a { padding: 5px 12px; margin-left: -12px; border-radius: 8px; color: var(--dim); transition: background .2s, color .2s; }
.toc a:hover { color: var(--text); }
.toc a.on { background: var(--soft); color: var(--text); font-weight: 500; }
.top nav a[aria-current="page"] { color: var(--text); }
.doc { max-width: 760px; }
.doc-head h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.doc-head .lead { margin: 16px 0 0; }
.doc section { padding-top: 72px; }
.doc h2 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 16px; }
.doc h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 28px 0 8px; }
.doc h4 { font-size: 15px; font-weight: 600; color: var(--dim); margin: 16px 0 4px; }
.doc p, .doc ul, .doc ol, .doc table, .doc pre, .doc .install { margin: 0 0 16px; }
.doc .install { margin-inline: 0; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc li > ul { margin: 6px 0 0; }
.doc p a, .doc li a, .doc td a, .doc h3 a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.doc p a:hover, .doc li a:hover, .doc td a:hover { text-decoration-color: currentColor; }
.doc code, .doc kbd { font: 13.5px/1.4 var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--soft); white-space: nowrap; }
.doc kbd { border: 1px solid var(--line); border-bottom-width: 2px; }
.doc pre { padding: 18px 20px; border-radius: 14px; background: var(--t-bg); color: var(--t-text); overflow-x: auto; }
.doc pre code { padding: 0; background: none; color: inherit; white-space: pre; font-size: 13px; line-height: 1.7; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); }
.doc thead th { font-size: 13px; font-weight: 500; color: var(--faint); }
.doc tbody th, .doc tr > th[scope="row"] { font-weight: 600; white-space: nowrap; }
.doc td { color: var(--dim); }
.commands td .aka { display: block; margin-top: 4px; font-size: 13px; color: var(--faint); }
.commands .aka code { font-size: 12px; }
.toc-out { margin-top: 12px; color: var(--text) !important; font-weight: 500; }

/* Releases: version and date on the left, what changed on the right. */
.releases { width: min(960px, 100% - 48px); margin: 0 auto; padding-top: 48px; }
.releases .doc-head { margin-bottom: 40px; }
.releases .lead a, .rel-body a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.rel-meta { align-self: start; position: sticky; top: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rel-meta h2 { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.rel-meta time { font-size: 14px; color: var(--faint); }
.badge { margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--text); color: var(--on-dark); font-size: 12px; font-weight: 600; }
.rel-group { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.rel-body ul + .rel-group { margin-top: 24px; }
.rel-new { background: #e4f6e9; color: #1d6b37; }
.rel-improved { background: #e7efff; color: #2352a8; }
.rel-body ul { margin: 0; padding-left: 20px; }
.rel-body li { margin-bottom: 10px; color: var(--dim); }
.rel-body li > ul { margin-top: 8px; }
.rel-body li::marker { color: var(--faint); }
.rel-body code { font: 13.5px/1.4 var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--soft); color: var(--text); }
.rel-quiet { color: var(--faint); }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: min(1200px, 100% - 48px); margin: 120px auto 0; padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }

@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto auto; gap: 16px; }
  .top nav a:not([href="/docs"]) { display: none; }
  .chapters { grid-template-columns: 1fr 1fr; }
  .cards, .gallery { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .term { font-size: 11.5px; }
  .term-body { height: 360px; padding: 16px; }
  .install { border-radius: 20px; }
  .copy-state { border-radius: 14px; }
  /* The contents become a sideways strip that sticks under the header. */
  .docs { display: block; padding-top: 0; }
  .toc { top: 64px; z-index: 10; flex-direction: row; gap: 4px; max-height: none; overflow-x: auto; margin: 0 -24px; padding: 10px 24px; background: var(--bg); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .toc::-webkit-scrollbar { display: none; }
  .toc-title { display: none; }
  .toc a { flex: none; margin-left: 0; }
  .doc-head { padding-top: 40px; }
}

/* Phones: tighter gutters, the install bar stacks, the terminal grows to fit its wrapped lines. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .top { height: 56px; padding: 0 16px; }
  .hero { padding: 56px 16px 40px; }
  .hero h1 { font-size: clamp(36px, 11vw, 44px); }
  .lead { margin: 18px auto 28px; }
  .actions .btn { flex: 1 1 100%; }
  .showcase, .block, .foot { width: calc(100% - 32px); }
  .showcase .canvas { padding: 12px; border-radius: 20px; }
  .term { font-size: 11px; border-radius: 10px; }
  /* Hidden lines keep their space (opacity only), so auto height never jumps. */
  .term-body { height: auto; padding: 14px; }
  .diff { white-space: pre-wrap; }
  .term-status { padding: 8px 14px; }
  .chapters { gap: 20px 16px; margin-top: 20px; }
  .chapter-text { font-size: 13px; }
  .block { padding-top: 80px; }
  .block > h2 { margin-bottom: 32px; }
  .card { padding: 24px; border-radius: 20px; }
  .gallery .canvas { padding: 14px; border-radius: 18px; }
  .faq summary { font-size: 17px; padding: 18px 0; }
  .install { flex-direction: column; border-radius: 18px; }
  .cmd { padding: 8px 10px; font-size: 12px; }
  .copy-state { min-height: 44px; }
  .dls { gap: 12px 18px; }
  .dls a { padding: 6px 0; }
  .docs, .releases { width: calc(100% - 32px); }
  .releases { padding-top: 40px; }
  .rel { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .rel-meta { position: static; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .rel-meta h2 { font-size: 24px; }
  .badge { margin-top: 0; }
  .toc { top: 56px; margin: 0 -16px; padding: 8px 16px; }
  .doc section { padding-top: 56px; }
  .doc h2 { font-size: 26px; }
  /* Tables stack: the name above its description. */
  .doc table, .doc tbody, .doc tr, .doc th, .doc td { display: block; }
  .doc thead { display: none; }
  .doc tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc th, .doc td { padding: 0; border: 0; }
  .doc tr > th[scope="row"] { white-space: normal; margin-bottom: 4px; }
  .doc td + td { margin-top: 4px; font-size: 14px; color: var(--faint); }
  .doc code { white-space: normal; overflow-wrap: anywhere; }
  .foot { margin-top: 80px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chapter[aria-selected="true"] .bar span { transform: scaleX(1); }
}

/* Dark overrides for rules defined above; kept last so they win.
   The panels keep their hues but drop to dusk so they don't glare. */
@media (prefers-color-scheme: dark) {
  .canvas { background:
    radial-gradient(60% 80% at 15% 20%, #3b2419 0%, transparent 60%),
    radial-gradient(55% 70% at 85% 25%, #2a2340 0%, transparent 60%),
    radial-gradient(70% 70% at 60% 100%, #33291a 0%, transparent 65%),
    #17151a; }
  .canvas-0 { background: radial-gradient(70% 90% at 20% 10%, #1d2a44 0%, transparent 60%), radial-gradient(60% 80% at 90% 90%, #2a2340 0%, transparent 60%), #141620; }
  .canvas-1 { background: radial-gradient(70% 90% at 80% 10%, #3b2419 0%, transparent 60%), radial-gradient(60% 80% at 10% 90%, #1a3222 0%, transparent 60%), #17161a; }
  .term { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--t-line); }
  .install.done .copy-state { color: #fff; }
  .rel-new { background: #16301f; color: #7bd88f; }
  .rel-improved { background: #1a2640; color: #8ab4f8; }
  .logo > rect:first-child { stroke: #3a3a40; stroke-width: 2; }
}