/* fernworks.dev — Understory & Paper.
 * The design language lives in site/DESIGN.md (served at /design.md); the
 * build fails when this file and that one disagree. Documents on paper:
 * opaque surfaces, one hairline, one tinted shadow, mono for anything that
 * lives in a file. Structural tokens are theme-independent; the two dark
 * blocks are asserted byte-equivalent by the build. */

/* ---------- tokens: light ---------- */
:root {
  --bg: #e9efe7;
  --s1: #fdfefc;
  --s2: #f2f6f0;
  --ink-1: #131f18;
  --ink-2: #2a382f;
  --ink-3: #4c5c52;
  --ink-4: #5d6d64;
  --line: #c9d3c5;
  --line-2: #78877d;
  --accent: #0f7a43;
  --accent-deep: #0a3d24;
  --accent-press: #0b6236;
  --accent-tint: rgba(15, 122, 67, 0.09);
  --danger: #a3231c;
  --danger-tint: rgba(163, 35, 28, 0.09);
  --amber: #8a5a10;
  --amber-tint: rgba(176, 122, 32, 0.12);
  --fern-deep: #06301c;
  --fern-tip: #0f7a43;
  --fern-op: 0.85;
  --grain-op: 0.05;
  --e1: 0 1px 2px rgba(22, 42, 30, 0.08);
  --e2: 0 2px 6px rgba(22, 42, 30, 0.07), 0 12px 32px -18px rgba(22, 42, 30, 0.28);
}

/* ---------- tokens: structure (theme-independent) ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --hero-pad: clamp(48px, 14vh, 128px);
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;
  --fs-0: 12px;
  --fs-1: 13px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 21px;
  --fs-5: 28px;
  --fs-d: clamp(34px, 4.6vw, 52px);
  --font-sans: "Geist", "GeistFB", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --e-enter: cubic-bezier(0.2, 0.7, 0.3, 1);
  --e-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --e-move: cubic-bezier(0.645, 0.045, 0.355, 1);
  --e-far: cubic-bezier(0.19, 1, 0.22, 1);
  --e-pop: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --t-0: 80ms;
  --t-1: 120ms;
  --t-2: 180ms;
  --t-3: 300ms;
  --t-4: 520ms;
  --rail: 880px;
  --rail-wide: 1240px;
  --gutter: 24px;
  --topbar-h: 56px;
  --z-raised: 1;
  --z-nav: 30;
  --z-grain: 40;
}

/* ---------- tokens: dark (system) — keep identical to the block below ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f0c;
    --s1: #101711;
    --s2: #151d16;
    --ink-1: #f2f6f2;
    --ink-2: #ccd7ce;
    --ink-3: #a6b8ab;
    --ink-4: #93a398;
    --line: rgba(255, 255, 255, 0.11);
    --line-2: rgba(255, 255, 255, 0.34);
    --accent: #46d389;
    --accent-deep: #0f7a43;
    --accent-press: #5fe39b;
    --accent-tint: rgba(70, 211, 137, 0.12);
    --danger: #f0857b;
    --danger-tint: rgba(240, 133, 123, 0.13);
    --amber: #e0a94f;
    --amber-tint: rgba(224, 169, 79, 0.14);
    --fern-deep: #0d3a23;
    --fern-tip: #46d389;
    --fern-op: 0.6;
    --grain-op: 0.08;
    --e1: 0 1px 2px rgba(0, 0, 0, 0.55);
    --e2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 36px -18px rgba(0, 0, 0, 0.75);
  }
}

/* ---------- tokens: dark (pinned) — keep identical to the block above ---------- */
:root[data-theme="dark"] {
  --bg: #0a0f0c;
  --s1: #101711;
  --s2: #151d16;
  --ink-1: #f2f6f2;
  --ink-2: #ccd7ce;
  --ink-3: #a6b8ab;
  --ink-4: #93a398;
  --line: rgba(255, 255, 255, 0.11);
  --line-2: rgba(255, 255, 255, 0.34);
  --accent: #46d389;
  --accent-deep: #0f7a43;
  --accent-press: #5fe39b;
  --accent-tint: rgba(70, 211, 137, 0.12);
  --danger: #f0857b;
  --danger-tint: rgba(240, 133, 123, 0.13);
  --amber: #e0a94f;
  --amber-tint: rgba(224, 169, 79, 0.14);
  --fern-deep: #0d3a23;
  --fern-tip: #46d389;
  --fern-op: 0.6;
  --grain-op: 0.08;
  --e1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --e2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 36px -18px rgba(0, 0, 0, 0.75);
}

/* ---------- fonts ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/geist-var.28258d06.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/geist-mono-var.5bc6413e.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
@font-face {
  font-family: "GeistFB";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  font-weight: 100 900;
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-6);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: 1.55;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: var(--grain-op);
  mix-blend-mode: soft-light;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,
h2,
h3 {
  color: var(--ink-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: var(--fs-d);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.2;
}
h3 {
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.3;
}
p {
  margin: 0;
  max-width: 68ch;
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition:
    color var(--t-1) var(--e-move),
    text-decoration-color var(--t-1) var(--e-move);
}
a:hover {
  color: var(--accent-press);
  text-decoration-color: currentColor;
}
::selection {
  background: var(--accent-tint);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
code,
pre,
.mono {
  font-family: var(--font-mono);
}
code {
  font-size: var(--fs-1);
  background: var(--accent-tint);
  color: var(--ink-1);
  border-radius: var(--r-1);
  padding: 0 var(--sp-1);
}
code.cmd {
  color: var(--accent-press);
  white-space: nowrap;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: var(--z-nav);
  inset-inline-start: -100vw;
  top: var(--sp-3);
  background: var(--s1);
  color: var(--ink-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-2);
  box-shadow: var(--e2);
}
.skip:focus {
  inset-inline-start: var(--sp-3);
}
dfn {
  font-style: normal;
}
dfn > a,
a.def {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
}
dfn > a:hover,
a.def:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* ---------- topbar: a path, not a bar ---------- */
.topbar {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar .in {
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.topbar a,
.topbar .cur {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-1);
  text-decoration: none;
  color: var(--ink-3);
  transition: color var(--t-1) var(--e-move);
}
.topbar a:hover {
  color: var(--ink-1);
}
.topbar .cur {
  color: var(--ink-1);
  font-weight: 600;
}
.topbar .brand svg {
  width: var(--sp-4);
  height: var(--sp-4);
  margin-inline-end: var(--sp-2);
  color: var(--accent);
  flex: none;
}
.topbar .sep {
  color: var(--line-2);
  padding: 0 var(--sp-1);
  user-select: none;
}

/* ---------- home stage ---------- */
.stage {
  position: relative;
  min-height: calc(100svh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#fern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--fern-op);
  pointer-events: none;
}
.stage .panel {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--hero-pad) var(--gutter) var(--sp-8);
}
.stage .dek {
  margin-top: var(--sp-4);
  font-size: var(--fs-3);
  color: var(--ink-3);
  max-width: 54ch;
}
.tile {
  display: block;
  margin-top: var(--sp-6);
  max-width: 460px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e1);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--ink-2);
  transition:
    transform var(--t-2) var(--e-enter),
    border-color var(--t-2) var(--e-enter),
    box-shadow var(--t-2) var(--e-enter);
}
.tile:active {
  transform: scale(0.98);
  transition-duration: var(--t-0);
  transition-timing-function: var(--e-exit);
}
.tile b {
  display: block;
  color: var(--ink-1);
  font-size: var(--fs-3);
  font-weight: 600;
}
.tile span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.tile small {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--accent);
}
.houserule {
  margin-top: var(--sp-6);
  font-size: var(--fs-1);
  color: var(--ink-4);
  max-width: 48ch;
}

/* ---------- product page shell ---------- */
.page {
  display: block;
}
.page > section {
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) 0;
}
.page > section:last-of-type {
  padding-bottom: var(--sp-9);
}
.page .sub {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-3);
}

/* hero */
.hero {
  padding-top: var(--sp-9);
}
.hero .dek {
  margin-top: var(--sp-5);
  font-size: var(--fs-4);
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 46ch;
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.install {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--ink-1);
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--e1);
  transition:
    transform var(--t-0) var(--e-exit),
    border-color var(--t-1) var(--e-move),
    box-shadow var(--t-2) var(--e-enter);
}
.install:active {
  transform: scale(0.97);
}
.install .prompt {
  color: var(--accent);
}
.install .cp {
  display: inline-flex;
  color: var(--ink-4);
  transition:
    color var(--t-1) var(--e-move),
    transform var(--t-1) var(--e-pop);
}
.install .cp svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.install.ok .cp {
  color: var(--accent);
  transform: scale(1.15);
}
a.cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--s1);
  text-decoration: none;
  font-size: var(--fs-2);
  font-weight: 500;
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-5);
  transition:
    background-color var(--t-1) var(--e-move),
    transform var(--t-0) var(--e-exit);
}
a.cta:hover {
  background: var(--accent-press);
  color: var(--s1);
}
a.cta:active {
  transform: scale(0.97);
}
.gloss-line {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--ink-4);
}

/* proof line (unboxed) */
.proofline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-5);
}
.proofline b {
  display: block;
  color: var(--ink-1);
  font-size: var(--fs-5);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.proofline span {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-1);
  color: var(--ink-4);
  max-width: 24ch;
}
.statcap {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--ink-3);
}

/* ---------- the initiative on disk ---------- */
.disk {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  align-items: start;
}
.tree {
  position: sticky;
  top: var(--sp-5);
}
.tree pre {
  margin: 0;
  font-size: var(--fs-0);
  line-height: 1.7;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  overflow-x: auto;
}
.tree .dim {
  color: var(--ink-4);
}
.flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.art .stagelab {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--accent);
}
.sheet-doc {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e1);
  padding: var(--sp-5);
  min-width: 0;
}
.sheet-doc .fm {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-3);
}
.sheet-doc .fm b {
  color: var(--ink-2);
  font-weight: 500;
}
.sheet-doc pre {
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--ink-2);
  overflow-x: auto;
}
.sheet-doc pre .dim {
  color: var(--ink-4);
}
.sheet-doc pre .acc {
  color: var(--accent);
}
.art .gloss {
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 60ch;
}

/* ---------- terminal, undressed ---------- */
.demo-term {
  margin: var(--sp-6) 0 0;
}
.term {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.termhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.termctl {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: var(--sp-1) var(--sp-3);
  transition:
    color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move);
}
.termctl:hover {
  color: var(--ink-1);
}
.termctl[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.term .body {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.7;
  max-height: min(56vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) 0 var(--sp-4);
  transition: opacity var(--t-2) var(--e-exit);
}
.term .body.out-fade {
  opacity: 0;
}
.term .ln {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink-3);
}
.term .ln .sig {
  color: var(--accent);
}
.term .ln.user {
  color: var(--ink-1);
}
.term .ln.agent {
  color: var(--ink-2);
}
.term .ln.cmd {
  color: var(--ink-1);
}
.term .ln.path {
  color: var(--accent-press);
}
.term .ln.out .ok {
  color: var(--accent);
  font-weight: 600;
  background: none;
  padding: 0;
}
.term .caret {
  display: inline-block;
  width: var(--sp-2);
  background: var(--accent);
  color: transparent;
}
.term .caret.idle {
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.termcap {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-3);
  transition: opacity var(--t-3) var(--e-enter);
}

/* ---------- proof quotes, rulings, start ---------- */
.proofq {
  margin: var(--sp-6) 0 0;
  background: none;
  border-radius: 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--line-2);
}
.proofq b {
  display: block;
  color: var(--ink-1);
  font-weight: 600;
}
.proofq p {
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.honesty {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.rulingrow {
  display: grid;
  grid-template-columns: var(--sp-8) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  max-width: 68ch;
}
.rulingrow:first-of-type {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.rulingrow .rid {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--accent);
}
.rulingrow .rid a {
  color: inherit;
  text-decoration: none;
}
.rulingrow .rid a:hover {
  text-decoration: underline;
}
.rulingrow p {
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.rulingrow .alt {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-1);
  color: var(--ink-4);
}
.rulingrow:target {
  background: var(--accent-tint);
}
.morerulings {
  margin-top: var(--sp-5);
}
.docslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-2);
}

/* ---------- footer + theme control ---------- */
.foot {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--line);
}
.stage ~ .foot {
  margin-top: 0;
}
.foot .in {
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--ink-4);
}
.themectl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.themectl button {
  color: var(--ink-4);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-1);
  transition: color var(--t-1) var(--e-move);
}
.themectl button:hover {
  color: var(--ink-1);
}
.themectl button[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- docs layout ---------- */
.layout {
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter) var(--sp-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
nav.side .eyebrow {
  margin-bottom: var(--sp-2);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.sidenav summary {
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink-1);
  padding: var(--sp-2) 0;
}
.sidenav a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  border-radius: var(--r-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
  text-decoration: none;
  transition:
    color var(--t-1) var(--e-move),
    background-color var(--t-1) var(--e-move);
}
.sidenav a:hover {
  color: var(--ink-1);
}
.sidenav a.active {
  color: var(--accent-press);
  font-weight: 500;
  background: var(--accent-tint);
}
main.doc {
  min-width: 0;
}
main.doc h1 {
  font-size: var(--fs-5);
  margin-bottom: var(--sp-4);
}
main.doc h2 {
  font-size: var(--fs-4);
  margin: var(--sp-7) 0 var(--sp-3);
}
main.doc h3 {
  margin: var(--sp-5) 0 var(--sp-2);
}
main.doc p {
  margin: var(--sp-3) 0;
}
main.doc ul,
main.doc ol {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-5);
}
main.doc li {
  margin: var(--sp-2) 0;
}
a.hash {
  margin-left: var(--sp-2);
  color: var(--ink-4);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--t-1) var(--e-move);
}
h2:hover a.hash,
h3:hover a.hash,
a.hash:focus-visible {
  opacity: 1;
}
pre {
  position: relative;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--ink-2);
  margin: var(--sp-4) 0;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
pre .cmt {
  color: var(--ink-4);
}
.copybtn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-2);
  color: var(--ink-3);
  background: var(--s1);
  border: 1px solid var(--line);
  transition:
    color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move),
    transform var(--t-1) var(--e-pop);
}
.copybtn:hover {
  color: var(--ink-1);
  border-color: var(--line-2);
}
.copybtn:active {
  transform: scale(0.94);
}
.copybtn.ok {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.copybtn svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.tablewrap {
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-2);
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
td {
  vertical-align: top;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
table.ref .c-code {
  width: var(--sp-9);
}
table.ref td:nth-child(2) {
  min-width: 26ch;
}
a.code {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-decoration: none;
}
tr:target {
  background: var(--accent-tint);
}
.chip {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  line-height: 1;
}
.chip.warn {
  background: var(--amber-tint);
  color: var(--amber);
}
.chip.err {
  background: var(--danger-tint);
  color: var(--danger);
}
blockquote {
  margin: var(--sp-4) 0;
  background: var(--s2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-1);
  padding: var(--sp-4) var(--sp-5);
}
blockquote.warn {
  border-left-color: var(--amber);
}
blockquote .label {
  font-weight: 600;
  color: var(--ink-1);
  font-size: var(--fs-2);
  margin-bottom: var(--sp-1);
}
blockquote p {
  margin: 0;
  font-size: var(--fs-2);
}
.pagenav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2);
}
.pagenav a {
  text-decoration: none;
  font-weight: 500;
}
.pagenav a:hover {
  text-decoration: underline;
}
.pagenav .next {
  margin-left: auto;
}
aside.toc {
  display: none;
}
aside.toc nav a {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--t-1) var(--e-move);
}
aside.toc nav a:hover {
  color: var(--ink-1);
}
aside.toc nav a.on {
  color: var(--accent-press);
  font-weight: 500;
}

/* ---------- diagrams ---------- */
figure.band {
  margin: var(--sp-6) 0;
}
figure.band figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.gl-dia {
  width: 100%;
  height: auto;
  display: block;
}
.gl-dia text {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  fill: var(--ink-2);
}
.gl-dia text.mono,
.gl-dia .chip-text {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.gl-dia .gloss {
  font-size: var(--fs-1);
  fill: var(--ink-3);
}
.gl-dia .dim {
  fill: var(--ink-4);
}
.gl-dia .stn-label {
  font-weight: 600;
  fill: var(--ink-1);
  text-anchor: middle;
}
.gl-dia .rail {
  stroke: var(--line-2);
  stroke-width: 2;
  fill: none;
}
.gl-dia .refline {
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  fill: none;
}
.gl-dia .rework {
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  fill: none;
}
.gl-dia .arrow {
  fill: var(--ink-4);
}
.gl-dia .stn-dot {
  fill: var(--s1);
  stroke: var(--accent);
  stroke-width: 2;
}
.gl-dia .stn-core {
  fill: var(--accent);
}
.gl-dia .gate {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.gl-dia .chipr {
  fill: var(--accent-tint);
}
.gl-dia .chip-text {
  fill: var(--accent-press);
  text-anchor: middle;
}
.gl-dia .sheet {
  fill: var(--s1);
  stroke: var(--line);
}
.gl-dia .anchor {
  fill: var(--accent);
}
.railv {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  counter-reset: stn;
}
.railv > li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
  border-left: 1px solid var(--line-2);
  counter-increment: stn;
}
.railv > li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-1) * -1);
  top: var(--sp-4);
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--s1);
  border: 2px solid var(--accent);
}
.railv > li.gate::before {
  background: var(--accent);
}
.railv b {
  color: var(--ink-1);
  font-weight: 600;
  margin-right: var(--sp-2);
}
.railv span {
  display: block;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.railv li.noteli {
  border-left-style: dashed;
  font-size: var(--fs-1);
  color: var(--ink-4);
}
.railv li.noteli::before {
  display: none;
}
.railv-fallback {
  display: block;
}
.gl-dia.wide + .railv-fallback,
.gl-dia.wide + ol.railv {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .disk {
    grid-template-columns: minmax(0, 1fr);
  }
  .tree {
    position: static;
  }
  .gl-dia.wide {
    display: none;
  }
  .gl-dia.wide + .railv-fallback,
  .gl-dia.wide + ol.railv {
    display: block;
  }
}
@media (max-width: 640px) {
  .stage .panel {
    padding-top: var(--sp-7);
  }
  .page > section {
    padding-top: var(--sp-7);
  }
  .hero {
    padding-top: var(--sp-7);
  }
}
@media (min-width: 861px) {
  .art {
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: var(--sp-5);
  }
  .art .stagelab {
    grid-column: 1 / -1;
  }
  .sidenav summary {
    display: none;
  }
}
@media (min-width: 1180px) {
  .layout {
    max-width: var(--rail-wide);
    grid-template-columns: 200px minmax(0, 1fr) 200px;
  }
  aside.toc {
    display: block;
  }
  aside.toc > div,
  nav.side > details {
    position: sticky;
    top: var(--sp-5);
  }
  .layout main.doc {
    padding: 0 var(--sp-6);
  }
}

/* ---------- hover gating ---------- */
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translateY(calc(var(--sp-1) * -0.5));
    border-color: var(--line-2);
    box-shadow: var(--e2);
  }
  .install:hover {
    border-color: var(--accent);
  }
}

/* ---------- entrance (home hero) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise-1,
  .rise-2,
  .rise-3 {
    opacity: 0;
    transform: translateY(var(--sp-2));
    animation: rise var(--t-3) var(--e-enter) forwards;
  }
  .rise-2 {
    animation-delay: 100ms;
  }
  .rise-3 {
    animation-delay: 200ms;
  }
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- theme flip ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  z-index: var(--z-raised);
}

/* ---------- reduced motion: fades stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity !important;
  }
}