/* ============ Fonts (self-hosted Geist) ============ */
@font-face{ font-family:"Geist"; src:url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist Mono"; src:url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

/* ============ Tokens (dark, lime) ============ */
:root{
  --washi:#0a0b0c;
  --washi-2:#0f1113;
  --washi-3:#14171b;
  --sumi:#eef1f0;
  --sumi-soft:#c4c9c6;
  --muted:#969d9a;
  --line:#1c2025;
  --hair:#15181c;
  --line2:#282e33;
  --shu:#a3e635;        /* lime accent */
  --shu-deep:#c4f24f;   /* brighter lime for glow/hover */
  --shu-ink:#0a0d05;    /* text on lime */
  --shu-glow:rgba(163,230,53,.22);
  --ai:#7f9cff;         /* json keys / secondary token */
  --ok:#a3e635;         /* valid == lime */
  --err:#ff6b5c;        /* error red */
  --card:#0f1113;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mincho:var(--sans);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--washi); color:var(--sumi);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
code, pre{ font-family:var(--mono); }
h1, h2, h3, p{ margin-top:0; }
::selection{ background:var(--shu-glow); color:#fff; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:50; background:var(--shu); color:var(--shu-ink); padding:10px 16px; font-size:14px; border-radius:7px; }
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; border-radius:2px; }

/* Subtle katagami stencil grain */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ============ Header ============ */
.site-header{
  align-items:center; display:flex; justify-content:space-between;
  height:64px; padding:0 clamp(20px, 5vw, 72px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--washi) 78%, transparent);
  backdrop-filter:saturate(1.1) blur(10px);
}
.brand{ align-items:center; display:inline-flex; gap:10px; font-weight:650; letter-spacing:-0.02em; }
.brand-mark{ width:24px; height:24px; flex:none; display:block; }
.brand-name{ font-size:16px; }
.site-header nav{ display:flex; gap:24px; margin-left:auto; margin-right:26px; }
.site-header nav a, .github-link{ color:var(--muted); font-size:14px; transition:color 160ms var(--ease-out); }
.site-header nav a{ position:relative; padding:4px 0; }
.github-link{ border:1px solid var(--line2); color:var(--sumi); padding:7px 13px; border-radius:7px; font-size:13px; font-weight:500; transition:color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.github-link span{ color:var(--muted); }
@media (hover:hover) and (pointer:fine){
  .site-header nav a:hover{ color:var(--sumi); }
  .github-link:hover{ background:var(--washi-2); border-color:var(--shu); }
}
.site-header nav a:active{ transform:translateY(1px); }
.button:active, .github-link:active, .chip:active, .doc-card:active{ transform:scale(0.97); }

/* ============ Hero (centered) ============ */
.hero{
  position:relative; overflow:hidden; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(60px, 9vw, 116px) clamp(20px, 6vw, 72px) clamp(52px, 7vw, 88px);
  border-bottom:1px solid var(--line);
}
.hero__pattern{
  position:absolute; inset:0; z-index:0; color:rgba(163,230,53,.15); pointer-events:none;
  -webkit-mask-image:radial-gradient(175% 160% at 0% 0%, #000 0%, rgba(0,0,0,.52) 44%, transparent 94%);
  mask-image:radial-gradient(175% 160% at 0% 0%, #000 0%, rgba(0,0,0,.52) 44%, transparent 94%);
}
.hero > *:not(.hero__pattern){ position:relative; z-index:1; }
.hero h1{
  font-family:var(--sans); font-weight:700; font-size:clamp(36px, 5.6vw, 68px);
  letter-spacing:-0.04em; line-height:1.02; margin:0; max-width:16ch; text-wrap:balance;
}
.hero h1 em{ color:var(--shu); font-style:normal; }
.hero__lede{ color:var(--sumi-soft); font-size:clamp(16px, 2vw, 19px); line-height:1.6; margin:22px auto 26px; max-width:56ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.button{
  align-items:center; display:inline-flex; gap:9px; justify-content:center;
  font-size:15px; font-weight:550; min-height:46px; padding:0 20px; border-radius:8px;
  transition:transform 150ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.button--primary{ background:var(--shu); color:var(--shu-ink); box-shadow:0 8px 26px var(--shu-glow); }
.button span{ display:inline-block; transition:transform 200ms var(--ease-out); }
.button--primary span{ font-size:17px; }
.button--ghost{ border:1px solid var(--line2); color:var(--sumi); background:rgba(255,255,255,.015); }
@media (hover:hover) and (pointer:fine){
  .button--primary:hover{ background:var(--shu-deep); transform:translateY(-1px); box-shadow:0 12px 34px var(--shu-glow); }
  .button:hover span{ transform:translateX(3px); }
  .button--ghost:hover{ background:var(--washi-2); border-color:var(--shu); }
}

/* ============ Animated pipeline ============ */
.flow{ width:100%; max-width:1060px; margin:clamp(44px, 6vw, 76px) auto 0; text-align:left; }
.flow__chips{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.chip{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--washi-2); border:1px solid var(--line2); border-radius:999px;
  padding:6px 14px; cursor:pointer; transition:color 150ms, border-color 150ms, background-color 150ms, transform 150ms var(--ease-out);
}
.chip:hover{ color:var(--sumi); }
.chip.is-on{ color:var(--shu-ink); background:var(--shu); border-color:var(--shu); }
.chip[data-run="invalid"].is-on{ background:var(--err); border-color:var(--err); color:#fff; }

.flow__grid{ display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:stretch; gap:0; }
.fp{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-family:var(--mono); box-shadow:0 18px 44px rgba(0,0,0,.4); transition:border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.fp__bar{ display:flex; align-items:center; gap:7px; padding:10px 13px; border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); letter-spacing:.02em; }
.fp__bar .dot{ width:7px; height:7px; border-radius:50%; background:var(--line2); }
.fp__bar b{ margin-left:auto; color:var(--sumi-soft); font-weight:500; }
.fp__body{ flex:1; padding:15px 15px; font-size:12.5px; line-height:1.95; position:relative; }
.fp--gate .fp__body{ display:flex; flex-direction:column; justify-content:center; }

/* request panel */
.jl{ white-space:nowrap; color:var(--sumi-soft); }
.jl .k{ color:var(--ai); } .jl .s{ color:var(--sumi); }
.val-invalid{ display:none; color:var(--err); }
.flow[data-mode="invalid"] .val-valid{ display:none; }
.flow[data-mode="invalid"] .val-invalid{ display:inline; }
.fp--req.is-active{ border-color:var(--shu); box-shadow:0 0 0 1px var(--shu-glow), 0 18px 44px rgba(0,0,0,.4); }

/* gate panel */
.chk{ display:flex; align-items:center; gap:10px; padding:5px 0; color:var(--muted); position:relative; }
.chk span{ color:var(--sumi-soft); }
.chk .mk{ margin-left:auto; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line2); flex:none; position:relative; transition:border-color 200ms, background-color 200ms; }
.chk.checking .mk{ border-color:var(--shu); }
.chk.ok .mk{ border-color:var(--shu); background:var(--shu); }
.chk.ok .mk::after{ content:""; position:absolute; left:4.5px; top:2px; width:4px; height:8px; border:solid var(--shu-ink); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.chk.no .mk{ border-color:var(--err); background:var(--err); }
.chk.no .mk::after{ content:"×"; position:absolute; inset:-2px 0 0; text-align:center; color:#fff; font-size:13px; line-height:16px; }
.chk.no span{ color:var(--err); }
.scan{ position:absolute; left:12px; right:12px; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--shu), transparent); opacity:0; }
.flow.is-validating .scan{ animation:scan 1.1s var(--ease-out); }
.fp--gate.valid{ border-color:var(--shu); box-shadow:0 0 0 1px var(--shu-glow), 0 18px 44px rgba(0,0,0,.4); }
.fp--gate.invalid{ border-color:var(--err); box-shadow:0 0 0 1px rgba(255,107,92,.25), 0 18px 44px rgba(0,0,0,.4); }

/* connectors */
.conn{ position:relative; height:2px; background:var(--line); align-self:center; }
.conn::after{ content:""; position:absolute; right:-1px; top:-3px; border:4px solid transparent; border-left-color:var(--line); }
.conn .pulse{ position:absolute; top:50%; left:0; width:8px; height:8px; border-radius:50%; background:var(--shu); box-shadow:0 0 10px var(--shu); transform:translate(-50%,-50%); opacity:0; }
.flow.is-sending .conn--1 .pulse{ animation:travel .72s var(--ease-out); }
.flow.is-handoff .conn--2 .pulse{ animation:travel .72s var(--ease-out); }
.flow[data-mode="invalid"].is-handoff .conn--2 .pulse{ background:var(--err); box-shadow:0 0 10px var(--err); }

/* result panel */
.fp--out{ position:relative; min-height:172px; }
.out{ position:absolute; inset:0; padding:15px; opacity:0; transition:opacity 260ms var(--ease-out); pointer-events:none; }
.flow.show-pdf .out--pdf{ opacity:1; }
.flow.show-err .out--err{ opacity:1; }
.pdfpage{ background:#fff; border-radius:6px; padding:14px 13px; height:100%; display:flex; flex-direction:column; gap:7px; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.pdfpage .ph{ font-family:var(--sans); font-weight:700; font-size:12px; color:#1a1a1a; letter-spacing:.04em; }
.pl{ height:6px; border-radius:3px; background:#e7e7e7; transform-origin:left; transform:scaleX(0); }
.pl.w1{ width:40%; } .pl.w2{ width:82%; } .pl.w3{ width:70%; } .pl.w4{ width:88%; } .pl.total{ height:9px; width:54%; background:#a3c53a; margin-top:auto; }
.flow.is-rendering .pl, .flow.done-ok .pl{ animation:draw .5s var(--ease-out) forwards; }
.flow.is-rendering .pl:nth-child(2), .flow.done-ok .pl:nth-child(2){ animation-delay:.05s; }
.flow.is-rendering .pl:nth-child(3), .flow.done-ok .pl:nth-child(3){ animation-delay:.15s; }
.flow.is-rendering .pl:nth-child(4), .flow.done-ok .pl:nth-child(4){ animation-delay:.25s; }
.flow.is-rendering .pl:nth-child(5), .flow.done-ok .pl:nth-child(5){ animation-delay:.35s; }
.flow.is-rendering .pl:nth-child(6), .flow.done-ok .pl:nth-child(6){ animation-delay:.45s; }
.badge{ position:absolute; top:22px; right:22px; font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:5px; opacity:0; }
.badge.ok{ color:var(--shu-ink); background:var(--shu); }
.flow.done-ok .badge.ok{ animation:pop .4s var(--ease-out) .5s forwards; }
.out--err{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; }
.errcard{ width:100%; }
.errcode{ font-family:var(--mono); font-size:34px; font-weight:700; color:var(--err); letter-spacing:-0.03em; line-height:1; }
.errmsg{ font-family:var(--mono); font-size:12.5px; color:var(--sumi-soft); }
.errmsg b{ color:var(--err); font-weight:500; }
.errhint{ font-size:12px; color:var(--muted); }
.flow.show-err .errcard{ animation:shake .5s var(--ease-out); }

@keyframes travel{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes scan{ 0%{ top:0; opacity:0; } 12%{ opacity:.9; } 100%{ top:100%; opacity:0; } }
@keyframes pop{ 0%{ transform:scale(.6); opacity:0; } 62%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@keyframes draw{ 0%{ transform:scaleX(0); opacity:.4; } 100%{ transform:scaleX(1); opacity:1; } }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 22%{ transform:translateX(-6px); } 44%{ transform:translateX(6px); } 66%{ transform:translateX(-4px); } 84%{ transform:translateX(3px); } }

@media (max-width:760px){
  .flow__grid{ grid-template-columns:1fr; gap:0; }
  .conn{ width:2px; height:34px; justify-self:center; background:var(--line); }
  .conn::after{ right:auto; top:auto; bottom:-1px; left:-3px; border-left-color:transparent; border-top-color:var(--line); }
  .flow.is-sending .conn--1 .pulse, .flow.is-handoff .conn--2 .pulse{ animation:travelv .72s var(--ease-out); }
  .fp--out{ min-height:150px; }
}
@keyframes travelv{ 0%{ top:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; } }

/* ============ Feature row ============ */
.feature-strip{ display:grid; grid-template-columns:repeat(3, 1fr); border-bottom:1px solid var(--line); }
.feature-strip > div{ position:relative; padding:46px clamp(22px, 3vw, 48px); border-left:1px solid var(--line); transition:background-color 220ms var(--ease-out); }
.feature-strip > div::before{ content:""; position:absolute; left:-1px; top:-1px; width:34px; height:2px; background:var(--shu); transition:width 240ms var(--ease-out); }
.feature-strip > div:first-child{ border-left:0; }
.feature-strip > div:first-child::before{ left:0; }
@media (hover:hover) and (pointer:fine){
  .feature-strip > div:hover{ background:var(--washi-2); }
  .feature-strip > div:hover::before{ width:56px; }
}
.feature-kicker{ display:inline-block; color:var(--shu); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.feature-strip h2{ font-size:21px; font-weight:650; letter-spacing:-0.02em; margin:14px 0 10px; line-height:1.2; }
.feature-strip p{ color:var(--sumi-soft); font-size:14.5px; margin:0; max-width:34ch; line-height:1.65; }

/* ============ Sections ============ */
.section{ margin:0 auto; max-width:1200px; padding:clamp(64px, 8vw, 116px) clamp(20px, 7vw, 88px); }
.split-section{ display:grid; gap:clamp(32px, 7vw, 104px); grid-template-columns:1fr 1fr; }
.split-section h2, .section-heading h2, .setup-panel h2{
  font-family:var(--sans); font-weight:700; font-size:clamp(28px, 3.2vw, 44px);
  letter-spacing:-0.03em; line-height:1.12; margin:0;
}
.steps{ border-top:1px solid var(--line); }
.steps > div{ align-items:flex-start; border-bottom:1px solid var(--line); display:grid; gap:22px; grid-template-columns:34px 1fr; padding:22px 0; }
.steps span{ color:var(--shu); font-family:var(--mono); font-size:13px; font-weight:600; padding-top:2px; }
.steps p{ color:var(--sumi-soft); margin:0; }
.steps strong{ color:var(--sumi); font-weight:650; }
.architecture-preview{ border-top:1px solid var(--line); }
.arch-cta{ display:flex; justify-content:center; margin-top:clamp(34px, 5vw, 56px); }
.section-heading{ align-items:end; display:flex; justify-content:space-between; margin-bottom:48px; gap:24px; }
.section-heading h2{ max-width:20ch; }
.section-heading a{ color:var(--shu); font-size:14px; font-weight:500; white-space:nowrap; }
.section-heading a span{ display:inline-block; transition:transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .section-heading a:hover span{ transform:translateX(3px); } }

/* ============ Setup panel ============ */
.setup-panel{ background:var(--washi-2); border:1px solid var(--line); color:var(--sumi); border-radius:12px; display:grid; gap:48px; grid-template-columns:0.85fr 1.15fr; margin:0 auto clamp(64px, 8vw, 112px); max-width:1100px; padding:clamp(38px, 5vw, 68px); }
.setup-panel .eyebrow{ color:var(--shu); }
.setup-panel h2{ color:var(--sumi); }
.setup-panel > div > p:not(.eyebrow){ color:var(--muted); max-width:42ch; }
.setup-panel .button{ margin-top:24px; }
.eyebrow{ color:var(--shu); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; margin:0 0 18px; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--shu); }
.terminal{ align-self:center; background:#08090b; border:1px solid var(--line2); border-radius:8px; box-shadow:0 18px 44px rgba(0,0,0,.5); color:#cdd6d2; font-family:var(--mono); font-size:13px; line-height:2; overflow:auto; padding:0 20px 20px; }
.terminal__bar{ display:flex; gap:6px; padding:14px 0 16px; }
.terminal__bar span{ background:#3a4142; border-radius:50%; height:8px; width:8px; }
.terminal__bar span:first-child{ background:#ff5f56; }
.terminal__bar span:nth-child(2){ background:#ffbd2e; }
.terminal__bar span:nth-child(3){ background:#27c93f; }
.terminal i{ color:var(--shu); font-style:normal; }
.terminal strong{ color:#8fd36b; font-weight:400; }

/* ============ Architecture diagrams ============ */
.arch-fig{ margin:34px 0; }
.arch-fig svg{ width:100%; height:auto; display:block; }
.arch-fig__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
/* Below this width the diagram would scale its labels down to an unreadable size, so it scrolls instead. */
.arch-fig__scroll svg{ min-width:660px; }
.arch-fig figcaption{ color:var(--muted); font-family:var(--mono); font-size:12px; margin-top:12px; text-align:center; }

/* ============ Sequential step flows ============ */
.flowfig{ margin:30px 0; }
.flowsteps{ list-style:none; margin:0; padding:0; }
.flowstep{ position:relative; display:grid; grid-template-columns:26px minmax(0, 1fr); gap:0 16px; padding-bottom:24px; }
.flowstep:last-child{ padding-bottom:0; }
.flowstep::before{ content:""; position:absolute; left:12px; top:30px; bottom:2px; width:1px; background:var(--line2); }
.flowstep:last-child::before{ display:none; }
.flowstep__n{
  align-items:center; display:flex; justify-content:center;
  width:26px; height:26px; border-radius:7px; flex:none;
  background:var(--washi-3); border:1px solid var(--line2); color:var(--shu);
  font-family:var(--mono); font-size:12px; font-weight:700; line-height:1;
}
.flowstep__body{ min-width:0; padding-top:1px; }
.prose .flowstep__t{ color:var(--sumi); font-size:15.5px; font-weight:650; letter-spacing:-0.01em; line-height:1.65; margin:0; }
.prose .flowstep__d{ color:var(--sumi-soft); font-size:14.5px; line-height:1.6; margin:5px 0 0; }
.prose .flowstep__m{
  color:var(--muted); font-family:var(--mono); font-size:11.5px; line-height:1.55;
  margin:8px 0 0; overflow-wrap:anywhere;
}
.flowstep--accent .flowstep__n{ background:var(--shu); border-color:var(--shu); color:var(--shu-ink); }
.flowfig figcaption{ color:var(--muted); font-family:var(--mono); font-size:12px; line-height:1.7; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.arch-box{ fill:var(--card); stroke:var(--line2); stroke-width:1.4; }
.arch-box--accent{ fill:color-mix(in srgb, var(--shu) 8%, var(--card)); stroke:var(--shu); stroke-width:1.8; }
.arch-node{ fill:var(--shu); }
.arch-box--ink{ fill:var(--washi-3); stroke:var(--line2); }
.arch-label{ fill:var(--sumi); font-family:var(--sans); font-size:15px; font-weight:600; }
.arch-label--ink{ fill:var(--sumi); }
.arch-sub{ fill:var(--muted); font-family:var(--mono); font-size:11px; }
.arch-sub--ink{ fill:var(--muted); }
.arch-flow{ stroke:var(--line2); stroke-width:1.4; fill:none; }
.arch-flow--accent{ stroke:var(--shu); stroke-width:1.6; }
.arch-arrow{ fill:var(--line2); }
.arch-arrow--accent{ fill:var(--shu); }
.arch-note{ fill:var(--muted); font-family:var(--mono); font-size:11px; }
.arch-num{ fill:var(--shu); font-family:var(--mono); font-size:12px; font-weight:700; }

/* ============ Benchmark ============ */
.bench{ border-top:1px solid var(--line); }
.bench-row{ align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; padding:20px 0; }
.bench-row span{ color:var(--sumi-soft); font-size:15px; }
.bench-row b{ font-family:var(--mono); font-size:clamp(20px, 2.4vw, 30px); font-weight:550; font-variant-numeric:tabular-nums; }
.bench-row--head span{ color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.bench-row--head b{ display:none; }
.bench-row--win span{ color:var(--sumi); font-weight:650; }
.bench-row--win b{ color:var(--shu); }
.bench-note{ color:var(--muted); font-family:var(--mono); font-size:12px; line-height:1.7; margin:20px 0 0; max-width:78ch; }

/* ============ Docs ============ */
.doc-shell{ display:grid; grid-template-columns:210px minmax(0, 760px); margin:0 auto; max-width:1120px; padding:64px 24px 120px; }
.doc-rail{ border-right:1px solid var(--line); font-size:14px; padding-right:24px; position:sticky; top:92px; align-self:start; }
.rail-title{ display:block; font-weight:650; margin-bottom:18px; }
.doc-rail nav{ display:flex; flex-direction:column; gap:9px; }
.doc-rail nav a{ color:var(--muted); transition:color 140ms var(--ease-out); }
.doc-rail nav a[aria-current="page"]{ color:var(--shu); font-weight:550; }
@media (hover:hover) and (pointer:fine){ .doc-rail nav a:hover{ color:var(--sumi); } }
.prose{ padding-left:clamp(32px, 7vw, 96px); }
.prose h1, .list-shell h1{ font-family:var(--sans); font-weight:700; font-size:clamp(34px, 4.2vw, 52px); letter-spacing:-0.03em; line-height:1.08; margin-bottom:18px; }
.lede{ color:var(--sumi-soft); font-size:19px; line-height:1.6; }
.prose h2{ font-family:var(--sans); font-weight:650; font-size:26px; letter-spacing:-0.02em; margin:52px 0 14px; padding-top:20px; border-top:1px solid var(--line); }
.prose h3{ font-size:19px; font-weight:650; margin:32px 0 9px; }
.prose p, .prose li{ color:var(--sumi-soft); }
.prose a{ color:var(--shu); text-decoration:underline; text-underline-offset:2px; }
.prose pre{ background:#08090b; border:1px solid var(--line); border-radius:8px; font-size:13px; line-height:1.65; margin:22px 0; overflow:auto; padding:18px; }
.prose pre code{ color:var(--sumi); }
.prose :not(pre) > code{ background:var(--washi-2); border:1px solid var(--line); border-radius:5px; color:var(--shu); font-size:0.86em; padding:1px 5px; }
/* On-this-page contents */
.page-toc{ background:var(--washi-2); border:1px solid var(--line); border-radius:10px; margin:34px 0 8px; padding:18px 22px 20px; }
.page-toc__label{ color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; margin:0 0 12px; text-transform:uppercase; }
.page-toc ul{ columns:2; column-gap:32px; list-style:none; margin:0; padding:0; }
.page-toc li{ break-inside:avoid; margin:0 0 8px; }
.prose .page-toc a{ color:var(--sumi-soft); font-size:14px; text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .prose .page-toc a:hover{ color:var(--shu); } }
@media (max-width:620px){ .page-toc ul{ columns:1; } }

/* Copy-to-clipboard on code blocks */
.code-wrap{ position:relative; }
.code-wrap pre{ padding-right:74px; }
.copy-btn{
  position:absolute; top:10px; right:10px; z-index:1;
  background:var(--washi-3); border:1px solid var(--line2); border-radius:6px; color:var(--muted);
  cursor:pointer; font-family:var(--mono); font-size:11px; line-height:1; padding:6px 9px;
  opacity:0; transition:opacity 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.code-wrap:hover .copy-btn, .copy-btn:focus-visible{ opacity:1; }
.copy-btn:hover{ color:var(--sumi); border-color:var(--shu); }
.copy-btn.is-done{ color:var(--shu-ink); background:var(--shu); border-color:var(--shu); opacity:1; }
@media (hover:none){ .copy-btn{ opacity:1; } }

/* Anchor links on docs headings */
.prose h2, .prose h3{ position:relative; scroll-margin-top:88px; }
.head-anchor{ color:var(--shu); font-weight:400; opacity:0; padding-left:9px; text-decoration:none; transition:opacity 140ms var(--ease-out); }
.prose h2:hover .head-anchor, .prose h3:hover .head-anchor, .head-anchor:focus-visible{ opacity:1; }

/* Callouts */
.callout{ background:var(--washi-2); border:1px solid var(--line); border-left:2px solid var(--shu); border-radius:0 8px 8px 0; margin:24px 0; padding:15px 18px; }
.callout p{ font-size:14.5px; margin:0; }
.callout p + p{ margin-top:9px; }
.callout__label{ color:var(--shu); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.callout--warn{ border-left-color:var(--err); }
.callout--warn .callout__label{ color:var(--err); }

/* Previous / next page navigation */
.doc-foot{ border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:64px; padding-top:26px; }
.prose .doc-foot a, .prose .doc-meta a{ text-decoration:none; }
.doc-foot a{ border:1px solid var(--line2); border-radius:9px; display:block; flex:1 1 0; max-width:calc(50% - 7px); min-width:200px; padding:14px 18px; transition:border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.doc-foot a:last-child{ margin-left:auto; text-align:right; }
.doc-foot span{ color:var(--muted); display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin-bottom:5px; text-transform:uppercase; }
.doc-foot b{ color:var(--sumi); font-size:15px; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .doc-foot a:hover{ background:var(--washi-2); border-color:var(--shu); } }
@media (max-width:560px){ .doc-foot a{ max-width:100%; width:100%; text-align:left; } .doc-foot a:last-child{ text-align:left; } }

.doc-meta{ border-top:1px solid var(--line); display:flex; gap:20px; margin-top:26px; padding-top:20px; }
.doc-meta a{ color:var(--muted); font-size:13px; text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .doc-meta a:hover{ color:var(--shu); } }

.table-wrap{ margin:25px 0; overflow-x:auto; overscroll-behavior-x:contain; }
.table-wrap table{ margin:0; min-width:440px; }
.prose table{ border-collapse:collapse; font-size:14px; margin:25px 0; width:100%; }
.prose th{ background:var(--washi-2); color:var(--sumi); text-align:left; font-weight:650; }
.prose td, .prose th{ border:1px solid var(--line); padding:10px; vertical-align:top; }
.prose td{ color:var(--sumi-soft); }
.list-shell{ margin:0 auto; max-width:1100px; padding:84px 24px 120px; }
.list-shell h1{ font-family:var(--sans); font-weight:700; font-size:clamp(36px, 4.6vw, 56px); letter-spacing:-0.03em; }
.list-shell .lede{ max-width:64ch; }
.doc-grid{ display:grid; gap:14px; grid-template-columns:repeat(2, 1fr); margin-top:52px; }
.doc-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; min-height:190px; padding:26px; position:relative; transition:border-color 160ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
.doc-card h2{ font-family:var(--sans); font-weight:650; font-size:22px; letter-spacing:-0.02em; margin:0 0 6px; }
.doc-card p{ color:var(--muted); font-size:14px; margin:0; }
.doc-card__arrow{ color:var(--shu); font-size:18px; position:absolute; right:22px; top:20px; transition:transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .doc-card:hover{ border-color:var(--shu); box-shadow:0 14px 34px rgba(0,0,0,.4); transform:translateY(-2px); }
  .doc-card:hover .doc-card__arrow{ transform:translate(3px, -3px); }
}

/* ============ Footer (big) ============ */
.site-footer{ border-top:1px solid var(--line); background:var(--washi); overflow:hidden; position:relative; }
.footer-inner{ max-width:1280px; margin:0 auto; padding:clamp(72px, 10vw, 128px) clamp(20px, 6vw, 72px) 36px; }
.footer-cta{ border-bottom:1px solid var(--line); padding-bottom:clamp(48px, 6vw, 76px); margin-bottom:clamp(48px, 6vw, 76px); }
.footer-cta h2{ font-family:var(--sans); font-weight:700; font-size:clamp(30px, 4.6vw, 54px); letter-spacing:-0.03em; line-height:1.06; margin:0 0 28px; max-width:18ch; text-wrap:balance; }
.footer-cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.footer-top{ display:grid; grid-template-columns:1.15fr 2fr; gap:clamp(40px, 7vw, 100px); }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:36ch; }
.footer-brand .brand{ font-size:19px; }
.footer-brand .brand-mark{ width:28px; height:28px; }
.footer-tagline{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
.footer-nav{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.footer-col h4{ color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 3px; }
.footer-col a{ color:var(--sumi-soft); font-size:14.5px; transition:color 140ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .footer-col a:hover{ color:var(--shu); } }
.footer-word{
  font-family:var(--sans); font-weight:800; font-size:clamp(60px, 17.5vw, 250px);
  letter-spacing:-0.05em; line-height:.82; text-align:center; user-select:none; white-space:nowrap;
  margin:clamp(56px, 9vw, 108px) 0 0;
  background:linear-gradient(180deg, #5c656f 0%, #2c313a 54%, var(--washi) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px 28px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:clamp(28px, 4vw, 44px); padding-top:26px; }
.footer-bottom p{ color:var(--muted); font-size:13px; margin:0; }
.footer-bottom a{ color:var(--sumi-soft); font-size:13px; transition:color 140ms var(--ease-out); }
.footer-bottom p a{ color:var(--shu); }
.footer-bottom__links{ display:flex; gap:22px; }
.footer-bottom__links a:last-child{ color:var(--shu); }
@media (hover:hover) and (pointer:fine){ .footer-bottom a:hover{ color:var(--shu); } }

/* ============ Reveal ============ */
[data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:60ms; }
[data-reveal][data-delay="2"]{ transition-delay:120ms; }
[data-reveal][data-delay="3"]{ transition-delay:180ms; }

/* ============ Responsive ============ */
@media (max-width:860px){
  .site-header{ height:60px; }
  .site-header nav{ display:none; }
  .github-link{ margin-left:auto; }
  .feature-strip{ grid-template-columns:1fr; }
  .feature-strip > div{ border-left:0; border-top:1px solid var(--line); }
  .feature-strip > div:first-child{ border-top:0; }
  .split-section, .setup-panel{ grid-template-columns:1fr; }
  .section-heading{ align-items:flex-start; flex-direction:column; }
  .doc-shell{ display:block; padding-top:40px; }
  .doc-rail{ border-bottom:1px solid var(--line); border-right:0; display:flex; gap:18px; margin-bottom:40px; overflow:auto; padding:0 0 16px; position:static; }
  .doc-rail nav{ flex-direction:row; gap:16px; white-space:nowrap; }
  .rail-title{ margin:0; }
  .prose{ padding-left:0; }
  .doc-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:44px; }
  .footer-nav{ grid-template-columns:repeat(2, 1fr); gap:28px 24px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
}

@media (prefers-reduced-transparency:reduce){
  .site-header{ background:var(--washi); backdrop-filter:none; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .pl{ transform:scaleX(1); opacity:1; }
  .badge.ok{ opacity:1; }
}