/* RATCHET site stylesheet. Generated by parts/style.mjs; edit that file, not this one. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Geist"; src: url("/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #07090b;
  --panel: #0e1215;
  --panel-2: #151a1f;
  --rule: #252c34;
  --fg: #f2f5f3;
  --fg-soft: #9aa5ae;
  --fg-faint: #5d6872;
  --accent: #27f07e;
  --accent-ink: #04140a;
  --accent-dim: #0d3d24;
  --spx: #86a0d6;
  --spx-dim: #1b2742;
  --ok: #27f07e;
  --warn: #ffb44a;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 18px;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
code, pre, kbd { font-family: var(--mono); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* ------------------------------------------------------------------ header */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(7, 9, 11, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.site-head__in { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 800; font-size: 16px; letter-spacing: 0.16em; padding-block: 12px; }
.brand svg { width: 28px; height: 28px; }
.brand:hover .mark { transform: rotate(36deg); }
.mark { transition: transform 0.4s cubic-bezier(.5,0,.2,1); transform-origin: 50% 50%; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); border: 1px solid rgba(255, 180, 74, 0.35); background: rgba(255, 180, 74, 0.07); padding: 7px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: blink 2.4s ease-in-out infinite; }
.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a { font: 500 12px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-soft); text-decoration: none; padding: 10px 11px; border-radius: 8px; white-space: nowrap; }
.site-nav a:hover { color: var(--fg); background: var(--panel-2); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav .s { display: none; }
@media (max-width: 1023px) {
  .pill { margin-left: auto; }
  .site-nav { flex-basis: 100%; margin-left: 0; justify-content: space-between; padding-bottom: 8px; }
  .site-nav a { padding: 9px 8px; }
}
/* every route stays on screen: below 600px the labels shorten, and the row never scrolls */
@media (max-width: 599px) {
  .site-nav { gap: 0; }
  .site-nav .l { display: none; }
  .site-nav .s { display: inline; }
  .site-nav a { font-size: 11px; letter-spacing: 0.04em; padding: 9px 6px; }
}

/* ------------------------------------------------------------------ openings */
.opening { margin: 0; max-width: 1240px; margin-inline: auto; padding: 18px var(--gutter) 0; }
.opening__svg { width: 100%; height: auto; max-height: 64vh; margin-inline: auto; }
.opening__cap { margin-top: 10px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--fg-soft); text-transform: uppercase; }

/* ------------------------------------------------------------------ type */
.h1 { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.h1 em, .hero h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem); }
.one { color: var(--fg-soft); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); max-width: 60ch; margin-top: 10px; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; }
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.fig--accent { color: var(--accent); }
.fig--spx { color: var(--spx); }
.fig--big { font-weight: 600; letter-spacing: -0.04em; }
code { font-size: 0.92em; color: var(--fg); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 6px; }

.page-head { padding-block: 22px 8px; }
.page-head .one { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px; font-weight: 650; font-size: 16px; text-decoration: none; transition: transform 0.15s, background 0.15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(39, 240, 126, 0.4), 0 10px 40px -12px rgba(39, 240, 126, 0.55); }
.btn--primary:hover { background: #5cf7a0; }
.btn--ghost { color: var(--fg); border: 1px solid var(--rule); background: var(--panel); }
.btn--ghost:hover { border-color: var(--fg-soft); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ hero (/) */
/* The opening is main's first child on every route. On the home route main is a grid at desktop
   widths, so the drawing can sit to the right of the headline without being wrapped. */
.is-home > .opening { padding-top: 6px; }
.is-home > .opening .opening__svg { max-height: min(340px, 42svh); }
.hero__copy { max-width: 1240px; margin-inline: auto; padding: 4px var(--gutter) 30px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--rule); background: var(--panel); padding: 7px 10px; border-radius: 999px; margin-bottom: 12px; }
.tag i { font-style: normal; color: var(--accent); }
.hero__copy h1 em { display: block; font-style: normal; color: var(--accent); }
.hero__copy h1 { font-size: clamp(2.45rem, 1.2rem + 4.6vw, 5rem); line-height: 0.95; letter-spacing: -0.05em; }
.hero__copy .one { margin-top: 12px; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem); color: var(--fg-soft); }
.hero__copy .one b { color: var(--fg); font-weight: 600; }
.hero__copy .btns { margin-top: 18px; }
.hero__copy .status { margin-top: 18px; }
@media (max-width: 599px) {
  .hero__copy .btns .btn { min-height: 48px; padding: 0 16px; }
}
@media (min-width: 960px) {
  .is-home { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, 500px) [mid] minmax(0, 676px) [content-end] minmax(var(--gutter), 1fr) [full-end]; align-content: start; }
  .is-home > * { grid-column: full-start / full-end; min-width: 0; }
  .is-home > .opening { grid-column: mid / content-end; grid-row: 1; padding: 20px 0 20px 24px; margin: 0; max-width: none; align-self: center; }
  .is-home > .opening .opening__svg { max-height: min(calc(100svh - 110px), 760px); }
  .is-home > .hero__copy { grid-column: content-start / mid; grid-row: 1; align-self: center; padding: 20px 0; margin: 0; max-width: none; }
  .is-home > .hero__copy + * { grid-row: 2; }
}
.status { margin-top: 18px; }
@media (min-width: 960px) {
  .hero { grid-template-columns: 1fr 1.08fr; align-items: center; gap: 40px; min-height: min(calc(100svh - 61px), 820px); padding-block: 20px; }
  .hero .opening { order: 2; padding: 0; }
  .hero .opening__svg { max-height: 70vh; }
}
.status { display: flex; align-items: flex-start; gap: 10px; font: 500 13px/1.45 var(--mono); color: var(--fg-soft); border: 1px dashed rgba(255, 180, 74, 0.45); border-radius: 12px; padding: 11px 14px; max-width: 520px; }
.status strong { color: var(--warn); font-weight: 600; }
.status .ico { color: var(--warn); margin-top: 1px; }

/* ------------------------------------------------------------------ sections */
.band { padding-block: clamp(40px, 7vw, 88px); border-top: 1px solid var(--rule); }
.band__head { margin-bottom: clamp(20px, 3vw, 34px); }
.band--tight { padding-block: clamp(28px, 5vw, 56px); }

/* the numbers (/): one big, two stacked */
.nums { display: grid; gap: 12px; }
.nums > div { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden; }
.nums__big { background: linear-gradient(160deg, #0f2a1b, var(--panel) 60%) !important; border-color: rgba(39, 240, 126, 0.35) !important; }
.nums__big > .fig { display: block; font-size: clamp(4.4rem, 3rem + 8vw, 10rem); line-height: 0.9; color: var(--accent); }
.nums__k { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 14px; }
.nums h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-top: 14px; }
.nums p.sub { color: var(--fg-soft); margin-top: 6px; }
.nums__hold, .nums__up { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: center; }
.nums__hold .fig { display: block; font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem); line-height: 0.9; color: var(--fg); }
.nums__hold .pic, .nums__up .pic { border-radius: 12px; }
.nums__up h3 { margin-top: 0; }
.nums__up h3 em { font-style: normal; color: var(--accent); }
@media (min-width: 760px) {
  .nums { grid-template-columns: 1.35fr 1fr; }
  .nums__big { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
  .nums__up, .nums__hold { grid-template-columns: minmax(0, 1fr) 180px; }
}

/* the thesis strip (/) */
.thesis { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 599px) { .thesis { grid-template-columns: 1fr; } }
.thesis figure { margin: 0; }
.thesis figcaption { margin-top: 8px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--spx); }
.pic { width: 100%; border-radius: 16px; border: 1px solid var(--rule); background: var(--panel-2); }

/* the visual index (/) */
.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.idx li { border-bottom: 1px solid var(--rule); }
.idx a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 0; text-decoration: none; }
.idx a .pic { grid-column: 1 / -1; }
.idx .pic { border-radius: 10px; }
.idx__to { display: block; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 6px; }
.idx__what { display: block; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.7rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.idx .ico { width: 22px; height: 22px; color: var(--fg-soft); transition: transform 0.2s, color 0.2s; }
.idx a:hover .ico { color: var(--accent); transform: translateX(4px); }
.idx a:hover .idx__what { color: var(--accent); }
@media (min-width: 760px) { .idx a { grid-template-columns: 270px minmax(0, 1fr) auto; gap: 28px; padding: 18px 0; } .idx a .pic { grid-column: auto; } }

/* ------------------------------------------------------------------ /how-it-works */
.splitbar svg { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; align-items: flex-end; }
.legend > div { display: grid; grid-template-columns: 14px auto; column-gap: 10px; align-items: center; }
.legend > div::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--fg-faint); grid-row: 1 / span 2; }
.legend .fig { display: block; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1; }
.legend span.k { display: block; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-soft); margin-top: 6px; }
.legend .lg-res::before { background: var(--accent); }
.legend .lg-res .fig { color: var(--accent); font-size: clamp(3rem, 2rem + 5vw, 5.4rem); }
.legend .lg-hold::before { background: var(--fg-soft); }

.grad { width: 100%; height: auto; margin-top: 14px; }
.grad text { font: 600 22px var(--mono); fill: var(--fg-soft); letter-spacing: 0.04em; }
.grad .k-n { font-size: 30px; fill: var(--fg); }
.grad .k-n--accent { fill: var(--accent); }
@media (max-width: 599px) { .grad text { font-size: 30px; } .grad .k-n { font-size: 36px; } }

.media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.media > *, .qa article > *, .nums > div > *, .ledger__row > *, .sim > *, .live > * { min-width: 0; }
.media .pic { max-width: 440px; }
.solo .pic { max-width: 560px; }
@media (min-width: 760px) { .media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; } .media--flip .pic { order: 2; } }
.media p.big { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; letter-spacing: -0.01em; }
.media p.big code { font-size: 0.8em; }
.fine { color: var(--fg-soft); font-size: 0.95rem; margin-top: 14px; max-width: 64ch; }

.tbl { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); overflow: hidden; }
.tbl caption { caption-side: top; text-align: left; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); padding: 14px 16px 8px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tbl th, .tbl td { text-align: left; padding: 11px 16px; border-top: 1px solid var(--rule); white-space: nowrap; }
.tbl tbody th, .tbl thead th { white-space: normal; }
.tbl td.wrap { white-space: normal; }
@media (max-width: 599px) { .tbl th, .tbl td { padding: 10px 10px; } .tbl caption { padding-inline: 10px; } }
.tbl thead th { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); border-top: 0; }
.tbl tbody th { font-weight: 500; }
.tbl td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl thead th:not(:first-child) { text-align: right; }
.scroll-x:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ /the-ratchet */
.ledger { display: grid; gap: 10px; }
.ledger__row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 14px; }
.ledger__row .exbar { width: 64px; height: auto; }
.ledger__k { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.ledger__line { margin-top: 6px; font-size: 1rem; }
.ledger__per { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.ledger__per .fig { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: var(--fg); }
.ledger__per small { font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-soft); }
.ledger__row.is-up .ledger__per .fig { color: var(--accent); }
.ledger__row.is-flat .ledger__per .fig { color: var(--fg); }
.unit { margin-top: 12px; font: 500 13px/1.5 var(--mono); color: var(--fg-soft); }
@media (min-width: 900px) {
  .ledger__row { grid-template-columns: 80px 1fr 240px; padding: 18px 22px; }
  .ledger__row .exbar { width: 80px; }
  .ledger__per { grid-column: auto; border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; gap: 4px; }
}
.formula { margin-top: 14px; font: 500 clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem)/1.5 var(--mono); color: var(--fg); background: var(--panel-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 16px; }
.formula span { color: var(--fg-soft); }

.sim { display: grid; gap: 16px; }
.sim__panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; }
.sim__chart { width: 100%; height: auto; }
.sim__controls { display: grid; gap: 14px; margin-bottom: 14px; }
.sim__controls label { display: grid; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.sim__controls output { color: var(--fg); font-size: 15px; font-variant-numeric: tabular-nums; }
.sim__controls .row { display: flex; justify-content: space-between; align-items: baseline; }
.sim input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }
.sim__end { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
.sim__end small { font: 500 12px/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-soft); }
.sim__end .fig { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--accent); }
.sim__nojs { font: 500 12px/1.4 var(--mono); color: var(--fg-soft); margin-bottom: 8px; }
.sim__unit { font: 500 12px/1.4 var(--mono); color: var(--fg-soft); margin-top: 8px; }
.sim.is-live .sim__nojs { display: none; }
@media (min-width: 900px) { .sim { grid-template-columns: 1.2fr 1fr; align-items: start; } }

/* ------------------------------------------------------------------ /reserve */
.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); padding: 10px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); }
.chips li .ico { color: var(--accent); }
.chips li.is-out { border-color: rgba(39, 240, 126, 0.5); color: var(--accent); }

.diagram { width: 100%; height: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }

.live { background: var(--panel); border: 1px dashed rgba(255, 180, 74, 0.5); border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); display: grid; gap: 20px; }
.live__empty { display: grid; gap: 14px; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.live__empty .pic { border-radius: 12px; }
.live__empty b { display: block; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; }
.live__empty span { display: block; color: var(--fg-soft); margin-top: 6px; }
.live dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.live dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.live dt { font: 500 12px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-soft); }
.live dd { margin: 0; font-family: var(--mono); }
.empty { font: 500 13px/1.3 var(--mono); color: var(--warn); }
.addr { word-break: break-all; white-space: normal; }
@media (min-width: 760px) { .live { grid-template-columns: 1fr 1.1fr; align-items: center; } .live__empty { grid-template-columns: 140px 1fr; } }

/* ------------------------------------------------------------------ /verify */
.bigformula { font: 600 clamp(1.3rem, 0.9rem + 2.2vw, 2.6rem)/1.2 var(--mono); letter-spacing: -0.02em; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px); }
.bigformula b { color: var(--accent); font-weight: 600; }
.bigformula i { font-style: normal; color: var(--fg-soft); }
.cmds { display: grid; gap: 10px; }
@media (min-width: 900px) { .cmds { grid-template-columns: 1fr 1fr; } }
.cmd { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 12px; min-width: 0; }
.cmd__label { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 10px; }
.cmd__label b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--rule); color: var(--fg); font-weight: 600; }
.cmd__label b.is-r { color: var(--accent); border-color: rgba(39, 240, 126, 0.5); }
.cmd__row { display: flex; gap: 8px; align-items: stretch; }
.cmd pre { flex: 1; min-width: 0; margin: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; }
.cmd pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.5; white-space: pre; color: var(--fg); }
.cmd pre code i { font-style: normal; color: var(--accent); }
.cmd__copy { flex: none; font: 600 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 10px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--fg); padding: 0 12px; cursor: pointer; }
.cmd__copy:hover { border-color: var(--accent); }
.cmd__copy.is-done { background: var(--accent); color: var(--accent-ink); }
.views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.views code { font-size: 14px; padding: 7px 10px; border-radius: 8px; }

/* ------------------------------------------------------------------ /faq */
.qa { display: grid; gap: 12px; }
.qa article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; }
.qa article .pic { border-radius: 12px; }
.qa h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); letter-spacing: -0.02em; }
.qa p { color: var(--fg-soft); margin-top: 8px; }
.qa p strong { color: var(--fg); font-weight: 600; display: block; font-size: 1.08rem; }
.qa .wide { grid-column: 1 / -1; min-width: 0; }
.qa article.is-key { border-color: rgba(39, 240, 126, 0.4); }
.qa details { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.qa summary { cursor: pointer; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.qa summary:hover { color: var(--accent); }
.qa details[open] summary { color: var(--fg); }
.qa details .tbl { margin-top: 10px; }
.bars { width: 100%; height: auto; }
.bars text { font: 600 22px var(--mono); fill: var(--fg-soft); }
.bars .k-n { font-size: 28px; fill: var(--fg); }
.bars .k-n--accent { fill: var(--accent); }
@media (max-width: 599px) { .bars text { font-size: 28px; } .bars .k-n { font-size: 34px; } }
.qa code { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .qa { grid-template-columns: 1fr 1fr; }
  .qa article { padding: 20px; }
  .qa article.span { grid-column: 1 / -1; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
}
@media (min-width: 1200px) {
  .qa article { grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
}

/* ------------------------------------------------------------------ read on + footer */
.next { display: grid; gap: 10px; padding-block: 36px 56px; }
.next a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--rule); background: var(--panel); text-decoration: none; }
.next a:first-child { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.next a:first-child .next__to { color: var(--accent-ink); }
.next__to { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.next__what { font-weight: 650; font-size: 1.15rem; letter-spacing: -0.01em; }
@media (min-width: 760px) { .next { grid-template-columns: 1.4fr 1fr; } }

.site-foot { border-top: 1px solid var(--rule); background: var(--panel); }
.foot { padding-block: 34px 44px; display: grid; gap: 18px; }
.foot__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.16em; }
.foot__brand svg { width: 24px; height: 24px; }
.foot__brand span { font: 500 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--fg-soft); margin-left: 6px; }
.foot__status { display: block; font: 500 13px/1.5 var(--mono); color: var(--fg-soft); }
.foot__status strong { color: var(--warn); font-weight: 600; }
.foot__fine { color: var(--fg-soft); font-size: 0.9rem; max-width: 72ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot nav a { font: 500 12px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-soft); text-decoration: none; padding: 6px 0; }
.foot nav a:hover { color: var(--accent); }

/* ================================================================== the drawings */
.opening svg text, .diagram text { user-select: none; }
.k-grid path { stroke: var(--rule); stroke-width: 1; opacity: 0.45; fill: none; }
.k-gridline { stroke: var(--rule); stroke-width: 1; fill: none; }
.k-surface { stroke: var(--fg-faint); stroke-width: 2; stroke-dasharray: 2 8; fill: none; }
.k-cap { font: 600 24px var(--mono); letter-spacing: 0.08em; fill: var(--fg); }
.k-cap--soft { fill: var(--fg-soft); }
.k-cap--accent { fill: var(--accent); }
.k-cap--spx { fill: var(--spx); }
.k-cap--lg { font-size: 34px; }
.k-code { font: 500 22px var(--mono); fill: var(--fg-soft); }
.k-num { font: 700 44px var(--mono); fill: var(--accent); letter-spacing: -0.03em; }
.k-formula { font: 600 40px var(--mono); fill: var(--fg); }
.k-keyt { font: 700 24px var(--mono); fill: var(--fg); }
.k-wheel { fill: var(--accent); fill-rule: evenodd; }
.k-wheel--mini { fill: var(--fg-soft); }
.k-wheel-depth { fill: var(--accent-dim); fill-rule: evenodd; }
.k-axle { fill: var(--fg-faint); }
.k-bracket { fill: none; stroke: var(--fg-faint); stroke-width: 22; stroke-linecap: round; }
.k-frame { fill: var(--rule); stroke: var(--fg-soft); stroke-width: 3; stroke-linejoin: round; }
.k-pawl { fill: var(--fg); stroke: var(--bg); stroke-width: 3; stroke-linejoin: round; }
.k-pin { fill: var(--bg); }
.k-spring { fill: none; stroke: var(--fg-soft); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-fwd { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.k-back { fill: none; stroke: var(--fg-faint); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 13; }
.k-stop { fill: none; stroke: var(--fg-soft); stroke-width: 7; stroke-linecap: round; }
.asm--sm .k-bracket { stroke-width: 9; }
.asm--sm .k-frame { stroke-width: 2; }
.asm--sm .k-spring, .asm--sm .k-pawl { stroke-width: 2.5; }
.k-gauge { fill: var(--panel); stroke: var(--fg-soft); stroke-width: 3; }
.k-card { fill: var(--panel-2); stroke: var(--accent); stroke-width: 4; }
.v-body { fill: var(--panel); stroke: var(--fg-soft); stroke-width: 8; }
.v-door { fill: var(--panel-2); stroke: var(--rule); stroke-width: 3; }
.v-interior { fill: var(--bg); stroke: var(--rule); stroke-width: 3; }
.v-edge { fill: var(--rule); }
.v-metal { fill: var(--fg-faint); }
.v-slot { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.v-dial { fill: none; stroke: var(--fg); stroke-width: 6; }
.v-spoke { fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: round; }
.v-knob { fill: var(--fg); }
.v-hub { fill: var(--accent); }
.v-window { fill: var(--bg); stroke: var(--rule); stroke-width: 2; }
.v-hatch { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }
.vault--sm .v-body { stroke-width: 5; }
.vault--sm .v-dial { stroke-width: 4; }
.vault--sm .v-spoke { stroke-width: 3; }
.k-tile { fill: var(--spx); opacity: 0.45; }
.k-tile--up { fill: var(--accent); }
.k-spxline { fill: none; stroke: var(--spx); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-spxline--sm { stroke-width: 4; }
.k-spxline--area { fill: var(--spx-dim); stroke: none; opacity: 0.8; }
.k-dot-accent { fill: var(--accent); }
.k-dot-spx { fill: var(--spx); }
.k-drip { fill: var(--accent); }
.k-node { fill: var(--panel-2); stroke: var(--fg-soft); stroke-width: 3; }
.k-node--spx { stroke: var(--spx); fill: var(--spx-dim); }
.k-node--accent { stroke: var(--accent); fill: var(--accent-dim); }
.k-holder { fill: var(--panel-2); stroke: var(--fg-soft); stroke-width: 3; }
.k-glyph, .k-glyph-up { fill: none; stroke: var(--fg-soft); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-glyph-up { stroke: var(--accent); }
.k-pipe { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-pipe--main { stroke: var(--rule); stroke-width: 14; }
.k-pipe--flap { stroke: var(--rule); stroke-width: 4; }
.k-pipe--res { stroke: var(--accent-dim); stroke-width: 16; }
.k-pipe--hold { stroke: var(--rule); stroke-width: 9; }
.k-pipe--back { stroke: var(--accent-dim); stroke-width: 10; }
.k-dots { fill: none; stroke: var(--fg); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 26; }
.k-dots--dark { stroke: var(--accent); stroke-width: 7; }
.k-dots--thin { stroke: var(--fg-soft); stroke-width: 3; }
.k-track { fill: var(--panel-2); stroke: var(--rule); stroke-width: 1; }
.k-fill-soft { fill: var(--rule); }
.k-fill-accent { fill: var(--accent); }
.k-fill-spx { fill: var(--spx); opacity: 0.85; }
.k-zoom { fill: none; stroke: var(--fg-faint); stroke-width: 1.5; stroke-dasharray: 4 6; }
.k-seg--flap { fill: var(--fg-faint); }
.k-seg--res { fill: var(--accent); }
.k-seg--hold { fill: var(--fg-soft); }
.k-sheen { fill: rgba(255, 255, 255, 0.35); }
.k-axis { fill: none; stroke: var(--fg-faint); stroke-width: 2; }
.k-stepline { fill: none; stroke: var(--accent-dim); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.sim .k-stepline { stroke: var(--accent); stroke-width: 4; }
.k-stepline--live { stroke: var(--accent); }
.k-simdots circle { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.k-loop { fill: none; stroke: var(--rule); stroke-width: 3; stroke-dasharray: 4 10; }
.k-drop { fill: var(--spx); }
.k-arrow { fill: none; stroke: var(--spx); stroke-width: 4; stroke-linecap: round; }
.k-arrow--accent { stroke: var(--accent-dim); stroke-width: 8; }
.k-key { fill: var(--panel-2); stroke: var(--rule); stroke-width: 2; }
.k-bar--accent { fill: var(--accent); }
.k-bar--fg { fill: var(--fg); }
.k-bar--soft { fill: var(--fg-soft); }
.k-feed { fill: none; stroke: var(--fg-faint); stroke-width: 2; }
.k-scan { fill: rgba(39, 240, 126, 0.07); stroke: rgba(39, 240, 126, 0.4); stroke-width: 1.5; }
.k-fracline { stroke: var(--fg); stroke-width: 3; }
.k-tick { fill: none; stroke: var(--accent-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.k-road { fill: none; stroke: var(--rule); stroke-width: 10; stroke-linecap: round; }
.k-comet { fill: none; stroke: var(--fg); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 6 200; stroke-dashoffset: 6; }
.k-comet--accent { stroke: var(--accent); }
.k-price { fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.k-coin { fill: var(--spx-dim); stroke: var(--spx); stroke-width: 3; }
.k-bar-g { fill: var(--rule); }
.k-bar-g--accent { fill: var(--accent); }
.k-fill-soft-2 { fill: var(--fg-soft); }

/* on a phone the plates render at about 0.37 scale, so their labels grow to stay 12px or more */
@media (max-width: 599px) {
  .k-cap { font-size: 32px; }
  .k-cap--lg { font-size: 40px; }
  .k-code { font-size: 30px; }
  .k-keyt { font-size: 32px; }
  .diagram .k-cap { font-size: 30px; }
}

/* pivots */
.o-hero-gear { transform-box: view-box; transform-origin: 400px 262px; }
.o-hero-depth { transform-box: view-box; transform-origin: 406.6px 271.2px; }
.o-hero-pawl { transform-box: view-box; transform-origin: 243.3px 60.7px; }
.o-big-gear { transform-box: view-box; transform-origin: 250px 314px; }
.o-big-depth { transform-box: view-box; transform-origin: 257.6px 324.6px; }
.o-big-pawl { transform-box: view-box; transform-origin: 69.5px 82.2px; }
.o-loop { transform-box: view-box; transform-origin: 480px 180px; }
.o-faq-gear { transform-box: view-box; transform-origin: 132px 300px; }
.o-faq-depth { transform-box: view-box; transform-origin: 134.5px 303.5px; }
.o-faq-pawl { transform-box: view-box; transform-origin: 73.1px 224.4px; }

/* ---- arrival: about 1.2s, staggered */
.t1 { animation-delay: 0.05s !important; }
.t2 { animation-delay: 0.2s !important; }
.t3 { animation-delay: 0.35s !important; }
.t4 { animation-delay: 0.5s !important; }
.t5 { animation-delay: 0.65s !important; }
.t6 { animation-delay: 0.8s !important; }
.t7 { animation-delay: 0.95s !important; }
.t8 { animation-delay: 1.05s !important; }
.a-fade { animation: a-fade 0.7s ease-out both; }
.a-rise { animation: a-rise 0.8s cubic-bezier(.2,.7,.2,1) both; }
.a-drop { animation: a-drop 0.8s cubic-bezier(.2,.7,.2,1) both; }
.a-pop { animation: a-pop 0.6s cubic-bezier(.2,.9,.3,1.25) both; transform-box: fill-box; transform-origin: center; }
.a-draw { animation: a-draw 1.1s cubic-bezier(.6,0,.2,1) both; }
.a-grow { animation: a-grow 0.8s cubic-bezier(.3,.8,.2,1) both; transform-box: fill-box; transform-origin: left center; }
.a-growy { animation: a-growy 0.9s cubic-bezier(.3,.8,.2,1) both; transform-box: fill-box; transform-origin: center bottom; }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes a-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
@keyframes a-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes a-draw { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
@keyframes a-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes a-growy { from { transform: scaleY(0); } to { transform: none; } }

/* ---- the loops: calm, and only once the arrival has settled */
@keyframes step-12 {
  0.000% { transform: rotate(0.000deg); animation-timing-function: ease-out; }
  1.000% { transform: rotate(-1.200deg); animation-timing-function: ease-in; }
  2.000% { transform: rotate(0.000deg); }
  4.167% { transform: rotate(0.000deg); animation-timing-function: linear; }
  7.083% { transform: rotate(30.000deg); }
  8.333% { transform: rotate(30.000deg); animation-timing-function: ease-out; }
  9.333% { transform: rotate(28.800deg); animation-timing-function: ease-in; }
  10.333% { transform: rotate(30.000deg); }
  12.500% { transform: rotate(30.000deg); animation-timing-function: linear; }
  15.417% { transform: rotate(60.000deg); }
  16.667% { transform: rotate(60.000deg); animation-timing-function: ease-out; }
  17.667% { transform: rotate(58.800deg); animation-timing-function: ease-in; }
  18.667% { transform: rotate(60.000deg); }
  20.833% { transform: rotate(60.000deg); animation-timing-function: linear; }
  23.750% { transform: rotate(90.000deg); }
  25.000% { transform: rotate(90.000deg); animation-timing-function: ease-out; }
  26.000% { transform: rotate(88.800deg); animation-timing-function: ease-in; }
  27.000% { transform: rotate(90.000deg); }
  29.167% { transform: rotate(90.000deg); animation-timing-function: linear; }
  32.083% { transform: rotate(120.000deg); }
  33.333% { transform: rotate(120.000deg); animation-timing-function: ease-out; }
  34.333% { transform: rotate(118.800deg); animation-timing-function: ease-in; }
  35.333% { transform: rotate(120.000deg); }
  37.500% { transform: rotate(120.000deg); animation-timing-function: linear; }
  40.417% { transform: rotate(150.000deg); }
  41.667% { transform: rotate(150.000deg); animation-timing-function: ease-out; }
  42.667% { transform: rotate(148.800deg); animation-timing-function: ease-in; }
  43.667% { transform: rotate(150.000deg); }
  45.833% { transform: rotate(150.000deg); animation-timing-function: linear; }
  48.750% { transform: rotate(180.000deg); }
  50.000% { transform: rotate(180.000deg); animation-timing-function: ease-out; }
  51.000% { transform: rotate(178.800deg); animation-timing-function: ease-in; }
  52.000% { transform: rotate(180.000deg); }
  54.167% { transform: rotate(180.000deg); animation-timing-function: linear; }
  57.083% { transform: rotate(210.000deg); }
  58.333% { transform: rotate(210.000deg); animation-timing-function: ease-out; }
  59.333% { transform: rotate(208.800deg); animation-timing-function: ease-in; }
  60.333% { transform: rotate(210.000deg); }
  62.500% { transform: rotate(210.000deg); animation-timing-function: linear; }
  65.417% { transform: rotate(240.000deg); }
  66.667% { transform: rotate(240.000deg); animation-timing-function: ease-out; }
  67.667% { transform: rotate(238.800deg); animation-timing-function: ease-in; }
  68.667% { transform: rotate(240.000deg); }
  70.833% { transform: rotate(240.000deg); animation-timing-function: linear; }
  73.750% { transform: rotate(270.000deg); }
  75.000% { transform: rotate(270.000deg); animation-timing-function: ease-out; }
  76.000% { transform: rotate(268.800deg); animation-timing-function: ease-in; }
  77.000% { transform: rotate(270.000deg); }
  79.167% { transform: rotate(270.000deg); animation-timing-function: linear; }
  82.083% { transform: rotate(300.000deg); }
  83.333% { transform: rotate(300.000deg); animation-timing-function: ease-out; }
  84.333% { transform: rotate(298.800deg); animation-timing-function: ease-in; }
  85.333% { transform: rotate(300.000deg); }
  87.500% { transform: rotate(300.000deg); animation-timing-function: linear; }
  90.417% { transform: rotate(330.000deg); }
  91.667% { transform: rotate(330.000deg); animation-timing-function: ease-out; }
  92.667% { transform: rotate(328.800deg); animation-timing-function: ease-in; }
  93.667% { transform: rotate(330.000deg); }
  95.833% { transform: rotate(330.000deg); animation-timing-function: linear; }
  98.750% { transform: rotate(360.000deg); }
  100% { transform: rotate(360deg); }
}
.l-step-12 { animation: step-12 18s linear 1.3s infinite; }

@keyframes step-10 {
  0.000% { transform: rotate(0.000deg); animation-timing-function: ease-out; }
  1.200% { transform: rotate(-1.200deg); animation-timing-function: ease-in; }
  2.400% { transform: rotate(0.000deg); }
  5.000% { transform: rotate(0.000deg); animation-timing-function: linear; }
  8.500% { transform: rotate(36.000deg); }
  10.000% { transform: rotate(36.000deg); animation-timing-function: ease-out; }
  11.200% { transform: rotate(34.800deg); animation-timing-function: ease-in; }
  12.400% { transform: rotate(36.000deg); }
  15.000% { transform: rotate(36.000deg); animation-timing-function: linear; }
  18.500% { transform: rotate(72.000deg); }
  20.000% { transform: rotate(72.000deg); animation-timing-function: ease-out; }
  21.200% { transform: rotate(70.800deg); animation-timing-function: ease-in; }
  22.400% { transform: rotate(72.000deg); }
  25.000% { transform: rotate(72.000deg); animation-timing-function: linear; }
  28.500% { transform: rotate(108.000deg); }
  30.000% { transform: rotate(108.000deg); animation-timing-function: ease-out; }
  31.200% { transform: rotate(106.800deg); animation-timing-function: ease-in; }
  32.400% { transform: rotate(108.000deg); }
  35.000% { transform: rotate(108.000deg); animation-timing-function: linear; }
  38.500% { transform: rotate(144.000deg); }
  40.000% { transform: rotate(144.000deg); animation-timing-function: ease-out; }
  41.200% { transform: rotate(142.800deg); animation-timing-function: ease-in; }
  42.400% { transform: rotate(144.000deg); }
  45.000% { transform: rotate(144.000deg); animation-timing-function: linear; }
  48.500% { transform: rotate(180.000deg); }
  50.000% { transform: rotate(180.000deg); animation-timing-function: ease-out; }
  51.200% { transform: rotate(178.800deg); animation-timing-function: ease-in; }
  52.400% { transform: rotate(180.000deg); }
  55.000% { transform: rotate(180.000deg); animation-timing-function: linear; }
  58.500% { transform: rotate(216.000deg); }
  60.000% { transform: rotate(216.000deg); animation-timing-function: ease-out; }
  61.200% { transform: rotate(214.800deg); animation-timing-function: ease-in; }
  62.400% { transform: rotate(216.000deg); }
  65.000% { transform: rotate(216.000deg); animation-timing-function: linear; }
  68.500% { transform: rotate(252.000deg); }
  70.000% { transform: rotate(252.000deg); animation-timing-function: ease-out; }
  71.200% { transform: rotate(250.800deg); animation-timing-function: ease-in; }
  72.400% { transform: rotate(252.000deg); }
  75.000% { transform: rotate(252.000deg); animation-timing-function: linear; }
  78.500% { transform: rotate(288.000deg); }
  80.000% { transform: rotate(288.000deg); animation-timing-function: ease-out; }
  81.200% { transform: rotate(286.800deg); animation-timing-function: ease-in; }
  82.400% { transform: rotate(288.000deg); }
  85.000% { transform: rotate(288.000deg); animation-timing-function: linear; }
  88.500% { transform: rotate(324.000deg); }
  90.000% { transform: rotate(324.000deg); animation-timing-function: ease-out; }
  91.200% { transform: rotate(322.800deg); animation-timing-function: ease-in; }
  92.400% { transform: rotate(324.000deg); }
  95.000% { transform: rotate(324.000deg); animation-timing-function: linear; }
  98.500% { transform: rotate(360.000deg); }
  100% { transform: rotate(360deg); }
}
.l-step-10 { animation: step-10 15s linear 1.3s infinite; }

@keyframes pawl-12 {
  0%, 61.55% { transform: rotate(0deg); animation-timing-function: linear; }
  79.05%, 83.25% { transform: rotate(-16deg); animation-timing-function: ease-in; }
  84.75%, 100% { transform: rotate(0deg); }
}
.l-pawl-12 { animation: pawl-12 1.5s linear 1.3s infinite; }
@keyframes spring-12 {
  0%, 61.55% { transform: scaleY(1); animation-timing-function: linear; }
  79.05%, 83.25% { transform: scaleY(0.62); animation-timing-function: ease-in; }
  84.75%, 100% { transform: scaleY(1); }
}
.l-spring-12 { transform-box: fill-box; transform-origin: center top; animation: spring-12 1.5s linear 1.3s infinite; }

@keyframes pawl-10 {
  0%, 61.55% { transform: rotate(0deg); animation-timing-function: linear; }
  79.05%, 83.25% { transform: rotate(-16deg); animation-timing-function: ease-in; }
  84.75%, 100% { transform: rotate(0deg); }
}
.l-pawl-10 { animation: pawl-10 1.5s linear 1.3s infinite; }
@keyframes spring-10 {
  0%, 61.55% { transform: scaleY(1); animation-timing-function: linear; }
  79.05%, 83.25% { transform: scaleY(0.62); animation-timing-function: ease-in; }
  84.75%, 100% { transform: scaleY(1); }
}
.l-spring-10 { transform-box: fill-box; transform-origin: center top; animation: spring-10 1.5s linear 1.3s infinite; }

.l-bob { animation: l-bob 4.5s ease-in-out 1.3s infinite; }
@keyframes l-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.l-drip { opacity: 0; animation: l-drip 1.8s ease-in 1.3s infinite; }
.l-drip--2 { animation-delay: 1.9s; }
.l-drip--3 { animation-delay: 2.5s; }
@keyframes l-drip { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(58px); } }
.l-pulse { animation: l-pulse 2.4s ease-in-out 1.3s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes l-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
.l-pulse-soft { animation: l-pulse-soft 2.6s ease-in-out 1.3s infinite; }
@keyframes l-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.l-tile-0, .l-tile-1, .l-tile-2, .l-tile-3 { animation: l-tile 3.6s ease-in-out 1.3s infinite; }
.l-tile-1 { animation-delay: 2.2s; }
.l-tile-2 { animation-delay: 3.1s; }
.l-tile-3 { animation-delay: 4s; }
@keyframes l-tile { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }
.l-flow { animation: l-flow 0.9s linear 1.3s infinite; }
.l-flow--slow { animation-duration: 1.3s; }
.l-flow--back { animation-duration: 1.6s; }
@keyframes l-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -26; } }
.l-sheen { opacity: 0; transform-box: view-box; animation: l-sheen 3.2s ease-in-out 1.7000000000000002s infinite; }
@keyframes l-sheen { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(510px); } }
.l-reveal { animation: l-reveal 18s steps(12, end) 1.3s infinite; }
@keyframes l-reveal { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
.l-coin { animation: l-coin 3s cubic-bezier(.5,0,.8,.6) 1.3s infinite; }
@keyframes l-coin { 0% { opacity: 0; transform: translateY(-80px); } 15% { opacity: 1; } 45%, 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
.l-scan { animation: l-scan 5s ease-in-out 1.3s infinite; }
@keyframes l-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 80% { transform: translateY(300px); opacity: 1; } 100% { transform: translateY(300px); opacity: 0; } }
.l-comet { animation: l-comet 3.2s cubic-bezier(.45,0,.55,1) 1.3s infinite; }
.l-comet--2 { animation-delay: 2.9000000000000004s; }
@keyframes l-comet { 0% { stroke-dashoffset: 6; } 60%, 100% { stroke-dashoffset: -100; } }
.l-drift { animation: l-drift 9s linear 1.3s infinite; }
@keyframes l-drift { from { transform: translateX(0); } to { transform: translateX(-280px); } }
.l-orbit { animation: l-orbit 10s linear 1.3s infinite; }
@keyframes l-orbit { to { transform: rotate(360deg); } }
.l-fillup { transform-box: fill-box; transform-origin: center bottom; animation: l-fillup 4s ease-in-out 1.3s infinite; }
@keyframes l-fillup { 0% { transform: scaleY(0.82); } 60%, 100% { transform: scaleY(1); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- reduced motion: every drawing is a complete still frame */
@media (prefers-reduced-motion: reduce) {
  .opening *, .diagram *, .splitbar *, .exbar *, .grad *, .bars *, .pill::before { animation: none !important; }
  .l-drip, .k-scan, .k-comet, .l-sheen, .l-coin { display: none; }
  .mark, .btn, .idx .ico { transition: none; }
  html { scroll-behavior: auto; }
}