/* Facilio Helpdesk — Product Guide, in the Dispatcher launch film's style:
   flush solid tiles in the Atom palette, Inter Tight throughout, orange accent words,
   big numbers and flat two-tone geometric patterns. No serif, no green. */
:root {
  --orange: #FF6700; --peach: #FFB48A; --accent: #0024D6;
  --pink: #ED2780; --rose: #F8A6CB;
  --blue: #0024D6; --sky: #8494FF;
  --cyan: #34C0CE; --ice: #B4EAF0;
  --navy: #0B1640; --indigo: #23357E;
  --ink: #111216; --grey: #9AA0AD;
  --paper: #F3F1EC; --white: #FFFFFF;
  --body: #3A3E48;
  --muted: #6B7080;
  --rule: rgba(17, 18, 22, .12);
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --header: 64px;
  --max: 1440px;
  --pad: 32px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header) + 24px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--body); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.cols { display: none; }
h1 em, h2 em, h3 em, .bt-t em { font-style: normal; color: var(--accent); }
.label { font: 600 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* tone tiles */
.tone-orange { background: var(--accent); color: #fff; } .tone-orange em { color: var(--ink) !important; }
.tone-pink { background: var(--pink); color: #fff; } .tone-pink em { color: var(--ink) !important; }
.tone-blue { background: var(--blue); color: #fff; }
.tone-cyan { background: var(--cyan); color: var(--ink); } .tone-cyan em { color: var(--navy) !important; }
.tone-navy { background: var(--navy); color: #fff; }
.tone-ink { background: var(--ink); color: #fff; }
.tone-white { background: #fff; color: var(--ink); } .tone-white em { color: var(--blue) !important; }

/* ── top bar ────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30; height: var(--header); display: grid; grid-template-columns: 1fr minmax(240px, 420px) 1fr; align-items: center; gap: 20px;
  padding: 0 var(--pad); background: var(--ink); color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; white-space: nowrap; }
.brand img { height: 15px; width: auto; filter: brightness(0) invert(1); }
/* Logo links to the Facilio Docs home, the title to the guide's overview */
.brand a { display: flex; align-items: center; color: inherit; text-decoration: none; }
.brand span { font-weight: 600; font-size: 15px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); }
.brand em { font-style: normal; color: var(--accent); }
.search { position: relative; display: flex; align-items: center; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); padding: 0 8px 0 14px; gap: 8px; }
.search:focus-within { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px var(--accent); }
.search svg { width: 16px; height: 16px; color: rgba(255, 255, 255, .6); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 14px var(--sans); color: #fff; }
.search input::placeholder { color: rgba(255, 255, 255, .55); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { font: 600 11px var(--sans); color: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; padding: 1px 6px; }
.search .results { position: absolute; top: 46px; left: 0; right: 0; display: none; max-height: 60vh; overflow: auto; background: #fff; color: var(--ink); border-radius: 12px; padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.search .results.open { display: block; }
.search .results a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.search .results a:hover { background: var(--paper); }
.search .results small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.search .results .none { padding: 12px; color: var(--muted); font-size: 14px; }
.top .right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.pos { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.chapters-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }
.chapters-btn svg { width: 16px; height: 16px; }
.chapters-btn:hover { background: #1A3BE8; }

/* chapters overlay */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(17, 18, 22, .5); padding: 12px; }
.ov-in { max-width: var(--max); margin: 0 auto; background: var(--ink); color: #fff; padding: 28px var(--pad) 36px; max-height: calc(100vh - 24px); overflow: auto; }
.ov-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.ov-head .label { color: rgba(255, 255, 255, .6); }
.ov-head button { border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.ov-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.ov-list a { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 18px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
.ov-list a .n { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ov-list a .t { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.ov-list a .g { grid-column: 2; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); margin-top: 6px; }
.ov-list a:hover .t, .ov-list a.on .t { color: var(--accent); }

/* ── overview ───────────────────────────────────────── */
.landing { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.intro { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: end; padding: 56px 0 32px; }
.intro h1 { margin: 12px 0 0; font: 600 clamp(44px, 5.8vw, 88px)/.98 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.intro p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 520px; }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 0; overflow: hidden; }
.bt { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 0; overflow: hidden; text-decoration: none; isolation: isolate;
  opacity: 0; animation: btin .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.bt:nth-child(2) { animation-delay: .04s; } .bt:nth-child(3) { animation-delay: .08s; } .bt:nth-child(4) { animation-delay: .12s; } .bt:nth-child(5) { animation-delay: .16s; }
.bt:nth-child(6) { animation-delay: .2s; } .bt:nth-child(7) { animation-delay: .24s; } .bt:nth-child(8) { animation-delay: .28s; } .bt:nth-child(9) { animation-delay: .32s; }
.bt:nth-child(10) { animation-delay: .36s; } .bt:nth-child(11) { animation-delay: .4s; } .bt:nth-child(12) { animation-delay: .44s; } .bt:nth-child(n+13) { animation-delay: .48s; }
@keyframes btin { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.bt-l { grid-column: span 2; grid-row: span 2; }
.bt-w { grid-column: span 2; }
.bt-t { grid-row: span 2; }
.bt-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bt-no { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .7; }
.bt-go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .2s, transform .25s; }
.tone-cyan .bt-go, .tone-white .bt-go { background: rgba(17, 18, 22, .08); }
.bt-go svg { width: 16px; height: 16px; }
.bt:hover .bt-go { background: #fff; color: var(--ink); transform: rotate(-45deg); }
.bt .bt-t { grid-row: auto; margin-top: 10px; font: 600 32px/1.02 var(--sans); letter-spacing: -.04em; }
.bt-l .bt-t { font-size: 52px; }
.bt-d { margin-top: 8px; font-size: 14.5px; line-height: 1.45; opacity: .85; max-width: 440px; }

/* screenshot crops inside tiles */
.bt-img { position: relative; flex: 1; min-height: 0; margin-top: 18px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.bt:hover .bt-img { transform: translateY(-6px); }
.bt-img img { width: 100%; height: auto; }
/* white-page crops: a white "screen" panel that runs off the bottom edge, so the crop's white margins blend in */
.bt-img.panel { background: #fff; border-radius: 10px 10px 0 0; padding: 12px 12px 0; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .22); }
.bt-w .bt-img.panel { margin-left: 18%; margin-right: -24px; border-radius: 10px 0 0 0; padding-right: 0; }
.bt-s .bt-img.panel { margin-right: -24px; border-radius: 10px 0 0 0; padding-right: 0; }
.tone-white .bt-img.panel { box-shadow: 0 0 0 1px var(--rule), 0 18px 44px rgba(17, 18, 22, .12); }
/* dark cards and phones: cut exactly to their edge, with the product's own corner radius */
.bt-img.bare { overflow: visible; }
.bt-img.bare img { border-radius: 14px 14px 0 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.bt-l .bt-img.card { margin-left: 6%; margin-right: 0; }
.bt-img.phone { padding: 0 9%; }
.bt-img.phone img { border-radius: 40px 40px 0 0; }
.bt-s .bt-img.card { margin-right: -24px; }
.bt-s .bt-img.card img { border-radius: 14px 0 0 0; }

.bt-pat { padding: 0; }
.bt-pat svg, .bt-fill svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bt-fill { position: relative; flex: 1; margin: 18px -24px 0; opacity: .9; }
.bt-atom { justify-content: flex-start; padding-bottom: 22px; }
.bt-atom .bt-no { color: var(--accent); opacity: 1; font-size: 20px; }
.bt-atom .bt-t { font-size: 44px; }
.bt-atom .bt-d { max-width: 62%; }
.bt-spark { position: absolute; right: 28px; bottom: 26px; width: 120px; height: 120px; }
.bt-spark svg { width: 100%; height: 100%; fill: var(--accent); stroke: none; }

.sec-head { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: end; padding: 88px 0 24px; }
.sec-head h2 { margin: 0; font: 600 clamp(40px, 5vw, 72px)/1 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.sec-head p { margin: 0; color: var(--muted); max-width: 460px; }
.sec-head p b { color: var(--ink); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.how-step { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: 26px 26px 0; overflow: hidden; }
.hs-n { font: 700 88px/1 var(--sans); letter-spacing: -.05em; }
.how-step h3 { margin: 18px 0 8px; font: 600 26px/1.05 var(--sans); letter-spacing: -.035em; }
.how-step p { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .88; }
.hs-pat { position: relative; display: block; margin: auto -26px 0; height: 120px; }
.hs-pat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.index-prose { max-width: 980px; padding: 24px 0 40px; }
.prose.index-prose h2 .sec { display: none; }

/* ── chapter page ───────────────────────────────────── */
.page { display: grid; grid-template-columns: 264px minmax(0, 1fr); max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.rail { border-right: 1px solid var(--rule); }
.rail-in { position: sticky; top: var(--header); max-height: calc(100vh - var(--header)); overflow: auto; padding: 32px 24px 40px 0; scrollbar-width: thin; }
.rail .ch { display: grid; grid-template-columns: 32px 1fr; padding: 9px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.rail .ch .n { font-size: 12px; font-weight: 700; line-height: 1.9; color: var(--grey); font-variant-numeric: tabular-nums; }
.rail .ch:hover { color: var(--ink); }
.rail .ch.on { color: var(--ink); font-weight: 700; border-bottom-color: transparent; }
.rail .ch.on .n { color: var(--accent); }
.rail .toc { padding: 2px 0 12px 32px; border-bottom: 1px solid var(--rule); }
.rail .toc a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--rule); text-decoration: none; font-size: 13px; line-height: 1.4; color: var(--muted); }
.rail .toc a:hover { color: var(--ink); }
.rail .toc a.on { color: var(--ink); border-left-color: var(--accent); }

.doc { min-width: 0; padding: 0 0 80px 48px; }
.chead { position: relative; display: grid; grid-template-columns: 1fr 260px; margin: 32px 0 8px; overflow: hidden; }
.chead > :not(.chpat) { grid-column: 1; padding-left: 40px; padding-right: 32px; }
.chead .meta { display: flex; gap: 16px; padding-top: 36px; }
.chead .meta .label { color: inherit; opacity: .75; }
.chead h1 { margin: 16px 0 14px; font: 600 clamp(48px, 5.6vw, 84px)/.98 var(--sans); letter-spacing: -.045em; }
.chead .lede { margin: 0 0 24px; font-size: 18px; line-height: 1.5; max-width: 640px; opacity: .92; }
.chpat { grid-column: 2; grid-row: 1 / span 5; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.chpat i { position: relative; display: block; min-height: 110px; }
.chpat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chead .where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 32px 0 40px; padding: 18px 0 32px; border-top: 1px solid rgba(255, 255, 255, .25); }
.tone-cyan .where, .tone-white .where { border-top-color: rgba(17, 18, 22, .2); }
.where .label { color: inherit; opacity: .75; margin-right: 4px; }
.where .crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 6px; background: rgba(255, 255, 255, .18); }
.tone-cyan .where .crumb { background: rgba(255, 255, 255, .45); }
.where .crumb i { font-style: normal; opacity: .6; }
.chead .mark { display: none; }

/* prose */
.prose { max-width: 780px; }
.prose h2 { margin: 72px 0 16px; padding-top: 18px; border-top: 2px solid var(--ink); font: 600 36px/1.08 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.prose h2 .sec { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.prose h3 { margin: 36px 0 8px; font: 600 19px/1.3 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; color: inherit; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 36, 214, .3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--blue); }
.prose ul { padding-left: 18px; margin: 0 0 20px; }
.prose ul li { margin: 6px 0; }
.prose ul li::marker { color: var(--accent); }
.prose code { font: 600 .86em var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.table-wrap { overflow-x: auto; margin: 8px 0 28px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 16px 10px 0; border-bottom: 2px solid var(--ink); }
.prose td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
ol.steps { list-style: none; margin: 8px 0 28px; padding: 0; border-top: 1px solid var(--rule); }
ol.steps > li { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
ol.steps .stepn { font-size: 13px; font-weight: 700; line-height: 1.9; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
ol.steps .stepn b { font-weight: 500; color: var(--grey); }
ol.steps > li > div > p:last-child, ol.steps > li > div > ul:last-child { margin-bottom: 0; }
.callout { position: relative; margin: 8px 0 28px; padding: 18px 22px; background: var(--navy); color: #fff; font-size: 15px; border-left: 6px solid var(--cyan); }
.callout .label { display: block; margin-bottom: 6px; color: var(--cyan); }
.callout strong { color: #fff; }
.callout code { color: #fff; background: rgba(255, 255, 255, .12); border-color: transparent; }
.callout a { color: var(--ice); }
.callout.note { background: var(--ink); border-left-color: var(--accent); }
.callout.note .label { color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }
figure.shot { margin: 20px 0 40px; }
figure.shot .frame { overflow: hidden; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--rule), 0 22px 50px rgba(17, 18, 22, .1); cursor: zoom-in; }
figure.shot .chrome { display: flex; gap: 6px; padding: 10px 12px; background: var(--ink); }
figure.shot .chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
figure.shot .chrome i:first-child { background: var(--accent); }
figure.shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
figure.shot figcaption { display: flex; gap: 14px; margin-top: 12px; font-size: 14px; color: var(--muted); }
figure.shot figcaption .fig { flex: none; font-size: 12px; font-weight: 700; line-height: 1.75; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
figure.shot figcaption b, figure.shot figcaption strong { color: var(--ink); font-weight: 600; }
figure.shot figcaption em { font-style: italic; color: inherit; }
.prose figure.wide { margin-right: -180px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 88px; max-width: 960px; }
.pager a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 70px 24px 24px; text-decoration: none; color: #fff; background: var(--ink); }
.pager a.prev { background: var(--navy); }
.pager a.next { grid-column: 2; background: var(--accent); }
.pager .label { color: inherit; opacity: .7; }
.pager .t { font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.pager .ar { position: absolute; right: 22px; bottom: 26px; width: 32px; height: 32px; transition: transform .2s; }
.pager .ar svg { width: 100%; height: 100%; }
.pager a.next:hover .ar { transform: translateX(4px); }
.pager a.prev:hover .ar { transform: translateX(-4px); }
.foot { display: flex; align-items: center; gap: 14px; max-width: var(--max); margin: 0 auto; padding: 28px var(--pad) 40px; border-top: 1px solid var(--rule); font-size: 12px; font-weight: 500; color: var(--muted); }
.foot img { height: 12px; }
.foot .sp { flex: 1; }
.lb { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 3vw; background: rgba(17, 18, 22, .88); cursor: zoom-out; }
.lb img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }

/* ── responsive ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .bt { animation: none; opacity: 1; } html { scroll-behavior: auto; } }
@media (max-width: 1360px) { .prose figure.wide { margin-right: 0; } .prose { max-width: 820px; } }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .page { grid-template-columns: 1fr; }
  .rail { display: none; }
  .doc { padding-left: 0; }
  .chead { grid-template-columns: 1fr 180px; }
  .ov-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --pad: 16px; --header: 58px; }
  .top { grid-template-columns: auto 1fr auto; gap: 10px; }
  .brand span, .pos, .search kbd, .chapters-btn span { display: none; }
  .chapters-btn { padding: 0 11px; }
  .intro, .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .intro { padding: 36px 0 24px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .bt-l, .bt-w { grid-column: span 1; }
  .bt-l { grid-row: span 1; }
  .bt-l .bt-t, .bt-atom .bt-t { font-size: 38px; }
  .bt-w .bt-img.panel { margin-left: 0; }
  .bt-pat { display: none; }
  .bt-atom .bt-d { max-width: 100%; }
  .bt-spark { display: none; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step { min-height: 340px; }
  .chead { grid-template-columns: 1fr; }
  .chpat { grid-column: 1; grid-row: auto; grid-template-columns: repeat(4, 1fr); grid-template-rows: 70px; order: -1; }
  .chpat i { min-height: 70px; }
  .chead > :not(.chpat) { padding-left: 20px; padding-right: 20px; }
  .chead .where { margin: 0 20px; padding-left: 0; padding-right: 0; }
  .prose h2 { font-size: 30px; }
  ol.steps > li { grid-template-columns: 1fr; gap: 2px; }
  .ov-list { grid-template-columns: 1fr; }
  .ov-list a .t { font-size: 26px; }
  .pager { grid-template-columns: 1fr; }
  .pager a.next { grid-column: 1; }
  .foot { flex-wrap: wrap; }
  .foot .sp { display: none; }
}

/* ══ light layer: same film palette and type, but airy — tints instead of solid blocks, gaps, soft corners ══ */
:root { --t-orange: #FFF0E6; --t-pink: #FDEBF3; --t-blue: #ECEFFF; --t-cyan: #E4F5F7; --t-navy: #EDEFF6; --t-ink: #F1F1EF; --cyan-dk: #12838F; }
.top { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); color: var(--ink); border-bottom: 1px solid var(--rule); }
.brand { color: var(--ink); }
.brand img { filter: none; }
.brand span { border-left-color: var(--rule); }
.search { background: var(--paper); }
.search:focus-within { background: #fff; }
.search svg, .search kbd { color: var(--muted); }
.search kbd { border-color: var(--rule); }
.search input { color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.pos { color: var(--muted); }
.ov-in { background: #fff; color: var(--ink); border-radius: 20px; }
.ov-head { border-bottom-color: var(--rule); }
.ov-head .label { color: var(--muted); }
.ov-head button { color: var(--ink); }
.ov-list a { color: var(--ink); border-bottom-color: var(--rule); }
.ov-list a .g { color: var(--muted); }

.tone-orange, .tone-pink, .tone-blue, .tone-cyan, .tone-navy, .tone-ink, .tone-white { color: var(--ink); }
.tone-orange { background: var(--t-orange); } .tone-pink { background: var(--t-pink); } .tone-blue { background: var(--t-blue); }
.tone-cyan { background: var(--t-cyan); } .tone-navy { background: var(--t-navy); } .tone-ink { background: var(--t-ink); } .tone-white { background: #fff; }
.tone-orange em { color: var(--accent) !important; } .tone-pink em { color: var(--pink) !important; } .tone-blue em, .tone-navy em { color: var(--blue) !important; }
.tone-cyan em { color: var(--cyan-dk) !important; } .tone-ink em { color: var(--accent) !important; }

/* bento */
.bento { gap: 14px; grid-auto-rows: 300px; overflow: visible; }
.bt { border-radius: 20px; padding: 24px 26px 0; }
.bt-no { opacity: 1; font-size: 14px; }
.tone-orange .bt-no { color: var(--accent); } .tone-pink .bt-no { color: var(--pink); } .tone-blue .bt-no, .tone-navy .bt-no { color: var(--blue); } .tone-cyan .bt-no { color: var(--cyan-dk); }
.bt-go, .tone-cyan .bt-go, .tone-white .bt-go { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 18, 22, .08); }
.bt:hover .bt-go { background: var(--ink); color: #fff; }
.bt .bt-t { font-size: 28px; letter-spacing: -.035em; }
.bt-l .bt-t { font-size: 44px; }
.bt-d { color: var(--body); opacity: 1; font-size: 14px; }
.bt-img.panel { box-shadow: 0 1px 2px rgba(17, 18, 22, .06), 0 12px 32px rgba(17, 18, 22, .08); }
.bt-img.bare img { box-shadow: 0 12px 32px rgba(17, 18, 22, .16); }
.bt-w .bt-img.panel, .bt-s .bt-img.panel, .bt-s .bt-img.card { margin-right: -26px; }
.bt-fill { margin: 18px -26px 0; opacity: .5; }
.bt-atom { background: #fff; border: 1px solid var(--rule); }
.bt-atom .bt-t { font-size: 38px; }
.bt-spark { width: 96px; height: 96px; right: 32px; bottom: 30px; }

/* how it works */
.how-steps { gap: 14px; }
.how-step { border-radius: 20px; min-height: 340px; }
.hs-n { font-size: 64px; }
.tone-orange .hs-n { color: var(--accent); } .tone-pink .hs-n { color: var(--pink); } .tone-blue .hs-n { color: var(--blue); } .tone-cyan .hs-n { color: var(--cyan-dk); }
.how-step h3 { font-size: 22px; }
.how-step p { color: var(--body); opacity: 1; }
.hs-pat { height: 84px; opacity: .55; }

/* chapter header: tinted card, small rounded pattern swatches */
.chead { border-radius: 24px; grid-template-columns: 1fr 200px; }
.chead h1 { font-size: clamp(44px, 5vw, 72px); }
.chead .lede { color: var(--body); opacity: 1; font-size: 17px; }
.chead .meta .label { opacity: 1; color: var(--muted); }
.chpat { gap: 8px; padding: 28px 28px 28px 0; align-content: start; }
.chpat i { min-height: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.chead .where { border-top-color: rgba(17, 18, 22, .1) !important; }
.where .crumb, .tone-cyan .where .crumb { background: #fff; box-shadow: 0 1px 2px rgba(17, 18, 22, .06); }
.where .label { color: var(--muted); opacity: 1; }

/* reading elements */
.prose h2 { border-top: 1px solid var(--rule); font-size: 32px; }
.callout { background: var(--t-cyan); color: var(--ink); border-left: 4px solid var(--cyan); border-radius: 0 12px 12px 0; }
.callout .label { color: var(--cyan-dk); }
.callout strong { color: var(--ink); }
.callout code { color: var(--ink); background: #fff; border-color: var(--rule); }
.callout a { color: var(--blue); }
.callout.note { background: var(--t-orange); border-left-color: var(--accent); }
.callout.note .label { color: var(--accent); }
figure.shot .frame { border-radius: 12px; box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(17, 18, 22, .07); }
figure.shot .chrome { background: #F6F5F1; border-bottom: 1px solid var(--rule); }
figure.shot .chrome i { background: #DAD7CF; }
.pager { gap: 14px; }
.pager a, .pager a.prev { background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 0 0 1px var(--rule); }
.pager a.next { background: var(--t-orange); box-shadow: none; }
.pager .label { color: var(--muted); opacity: 1; }
.pager .ar { color: var(--accent); }
@media (max-width: 760px) {
  .bento { grid-auto-rows: 300px; }
  .chpat { padding: 16px 16px 0; grid-template-columns: repeat(4, 56px); grid-template-rows: 56px; gap: 8px; }
  .chpat i { aspect-ratio: auto; }
}
.intro h1 { font-size: clamp(40px, 4.8vw, 70px); }
.chpat { grid-template-rows: auto auto; }
.chpat i { box-shadow: 0 1px 2px rgba(17, 18, 22, .06); }
.bt-fill, .hs-pat { opacity: 1; }

/* ══ feature explorer (overview): stronger tints, deep same-hue ink, drawings instead of screenshots ══ */
.tone-orange { --tint: #FFE1CC; --deep: #B84600; --mid: #FF6700; }
.tone-pink   { --tint: #FBD3E4; --deep: #A8104F; --mid: #ED2780; }
.tone-blue   { --tint: #D9DFFF; --deep: #0024D6; --mid: #6E80FF; }
.tone-cyan   { --tint: #C8ECF0; --deep: #0A6873; --mid: #34C0CE; }
.tone-navy   { --tint: #DDE1F0; --deep: #0B1640; --mid: #23357E; }
.tone-orange, .tone-pink, .tone-blue, .tone-cyan, .tone-navy { background: var(--tint); }

.explorer { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ftgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 196px; grid-auto-flow: dense; gap: 16px; }
.ft { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; border-radius: 20px; text-decoration: none; color: var(--deep); overflow: hidden;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; opacity: 0; animation: btin .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.ft:nth-child(2) { animation-delay: .04s; } .ft:nth-child(3) { animation-delay: .08s; } .ft:nth-child(4) { animation-delay: .12s; } .ft:nth-child(5) { animation-delay: .16s; } .ft:nth-child(6) { animation-delay: .2s; }
.ft:nth-child(7) { animation-delay: .24s; } .ft:nth-child(8) { animation-delay: .28s; } .ft:nth-child(9) { animation-delay: .32s; } .ft:nth-child(10) { animation-delay: .36s; } .ft:nth-child(11) { animation-delay: .4s; }
.ft-l { grid-column: span 2; grid-row: span 2; }
.ft-w { grid-column: span 2; }
.ft-no { position: absolute; top: 16px; left: 20px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-go { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .7); transition: background .2s, color .2s, transform .25s; }
.ft-go svg { width: 15px; height: 15px; }
.ft-art { position: absolute; left: 50%; top: 44%; width: 104px; height: 104px; transform: translate(-50%, -50%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.ft-l .ft-art { width: 210px; height: 210px; top: 46%; }
.ft-w .ft-art { width: 112px; height: 112px; left: 68%; top: 50%; }
.ft-art svg { width: 100%; height: 100%; }
.ft-art .ac { fill: var(--mid); stroke: none; }
.ft-foot { position: relative; display: flex; flex-direction: column; }
.ft-t { font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.ft-l .ft-t { font-size: 36px; letter-spacing: -.04em; }
.ft-w .ft-t { font-size: 26px; }
.ft-d { display: none; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--body); }
.ft-l .ft-d, .ft-w .ft-d { display: block; max-width: 300px; }
.ft-w .ft-d { max-width: 52%; }
.ft:hover, .ft.on { box-shadow: inset 0 0 0 2px var(--deep); }
.ft:hover .ft-art, .ft.on .ft-art { transform: translate(-50%, -50%) scale(1.06) rotate(-3deg); }
.ft.on .ft-go, .ft:hover .ft-go { background: var(--deep); color: #fff; transform: rotate(-45deg); }

.detail { position: sticky; top: calc(var(--header) + 20px); min-height: calc(196px * 3 + 32px); padding: 28px 28px 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.dt { background: none !important; color: var(--ink); animation: dtin .35s ease; }
@keyframes dtin { from { opacity: 0; transform: translateY(8px); } }
.dt-head { display: flex; align-items: center; gap: 10px; }
.dt-no { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--tint); color: var(--deep); font-size: 13px; font-weight: 700; }
.dt-t { margin: 16px 0 8px; font-size: 38px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--deep); }
.dt-lede { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--body); }
.dt-l { margin: 18px 0 8px; }
.dt-secs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dt-secs a { display: grid; grid-template-columns: 26px 1fr; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 14px; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; font-weight: 500; }
.dt-secs a span { color: var(--deep); font-weight: 700; }
.dt-secs a:hover { color: var(--deep); }
.dt-where { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-where .crumb { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--tint); color: var(--deep); font-size: 13px; font-weight: 600; }
.dt-where .crumb i { font-style: normal; opacity: .6; }
.dt-open { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 11px 16px; border-radius: 12px; background: var(--deep); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.dt-open svg { width: 16px; height: 16px; transition: transform .2s; }
.dt-open:hover svg { transform: translateX(3px); }

/* chapter headers & how-it-works use the same hue pairing */
.chead h1 { color: var(--deep); }
.chead h1 em { color: var(--mid) !important; }
.hs-n { color: var(--deep) !important; }

@media (prefers-reduced-motion: reduce) { .ft { animation: none; opacity: 1; } }
@media (max-width: 1100px) {
  .explorer { grid-template-columns: 1fr; }
  .detail { display: none; }
  .ft-d { display: block; }
}
@media (max-width: 760px) {
  .ftgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 12px; }
  .ft-l { grid-row: span 2; }
  .ft-art { width: 70px; height: 70px; top: 38%; }
  .ft-l .ft-art { width: 150px; height: 150px; }
  .ft-w .ft-art { left: 72%; }
  .ft-d { font-size: 12.5px; }
  .ft-s .ft-d { display: none; }
}

/* flat film-style feature visuals */
.ft-art { width: 150px; height: 112px; top: 43%; }
.ft-l .ft-art { width: 290px; height: 218px; top: 42%; }
.ft-w .ft-art { width: 200px; height: 150px; left: 70%; top: 50%; }
.ft-art .m { fill: var(--mid); } .ft-art .d { fill: var(--deep); } .ft-art .l { fill: var(--mid); opacity: .32; } .ft-art .w { fill: #fff; } .ft-art .t { fill: var(--tint); }
.ft-art .sm { stroke: var(--mid); } .ft-art .sd { stroke: var(--deep); } .ft-art .sl { stroke: var(--mid); opacity: .32; } .ft-art .sw { stroke: #fff; }
.ft-art .sd2 { stroke: var(--deep); stroke-width: 2.5; }
.ft-art .dt-q { font: 700 26px var(--sans); fill: var(--deep); }
.ft:hover .ft-art, .ft.on .ft-art { transform: translate(-50%, -50%) scale(1.05); }
@media (max-width: 760px) {
  .ft-art { width: 112px; height: 84px; top: 40%; }
  .ft-l .ft-art { width: 240px; height: 180px; }
  .ft-w .ft-art { width: 130px; height: 98px; left: 74%; }
}

/* ══ feature cards (overview): Fraîche-style staggered grid of split cards ══ */
.cards-sec { padding: 24px 0 8px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 64px; }
.card { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 18, 22, .05);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; opacity: 0; animation: btin .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.card:nth-child(3n+2) { margin-top: -64px; margin-bottom: 64px; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(n+4) { animation-delay: .18s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17, 18, 22, .1); }
.cv { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.card.dark .cv { background: var(--deep); }
.cv .deco { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--deep); stroke-width: 1; opacity: .22; }
.card.dark .cv .deco { stroke: var(--tint); opacity: .45; }
.ca { position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ca svg { display: block; width: 100%; height: auto; }
.card:hover .ca { transform: translate(-50%, -50%) scale(1.06); }
/* light panel: drawing in mid/deep on the tint */
.ca .m { fill: var(--mid); } .ca .d { fill: var(--deep); } .ca .l { fill: var(--mid); opacity: .32; } .ca .w { fill: #fff; } .ca .t { fill: var(--tint); }
.ca .sm { stroke: var(--mid); } .ca .sd { stroke: var(--deep); } .ca .sl { stroke: var(--mid); opacity: .32; } .ca .sw { stroke: #fff; } .ca .sd2 { stroke: var(--deep); stroke-width: 2.5; }
.ca .dt-q { font: 700 26px var(--sans); fill: var(--deep); }
.ca .hw { font: 700 15px var(--sans); fill: #fff; }
/* dark panel: inverted — light shapes on the deep colour */
.dark .ca .m { fill: var(--tint); } .dark .ca .d { fill: #fff; } .dark .ca .l { fill: var(--tint); opacity: .35; } .dark .ca .w { fill: var(--deep); } .dark .ca .t { fill: var(--deep); }
.dark .ca .sm { stroke: var(--tint); } .dark .ca .sd { stroke: #fff; } .dark .ca .sl { stroke: var(--tint); opacity: .35; } .dark .ca .sw { stroke: var(--deep); } .dark .ca .sd2 { stroke: #fff; }
.dark .ca .dt-q { fill: #fff; }
.card[data-k="ask-atom"] .ca .w { fill: #fff; }
.cb { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 20px; }
.pill { align-self: flex-start; padding: 3px 10px; border: 1px solid rgba(17, 18, 22, .35); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); }
.ct { margin-top: 16px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.cd { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.cm { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.cn { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--deep); }
.go svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .go svg { transform: translateX(4px); }
.nextrow { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 24px; padding: 28px 0 8px; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.nextrow em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--muted); }
.nextrow span { display: inline-flex; align-items: center; gap: 12px; font-size: 32px; font-weight: 600; letter-spacing: -.035em; }
.nextrow svg { width: 26px; height: 26px; color: var(--accent); transition: transform .2s; }
.nextrow:hover svg { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; } }
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); padding-top: 0; }
  .card:nth-child(3n+2) { margin: 0; }
}
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .ct { font-size: 24px; }
  .nextrow span { font-size: 24px; }
}
.how-step { border-radius: 0; }
/* how it works: a flat drawing per step */
.how-step { min-height: 0; padding-bottom: 26px; }
.hs-art { display: block; margin: 28px auto 0; width: 100%; max-width: 300px; }
.hs-art svg { display: block; width: 100%; height: auto; }
.hs-art .m { fill: var(--mid); } .hs-art .d { fill: var(--deep); } .hs-art .l { fill: var(--mid); opacity: .32; } .hs-art .w { fill: #fff; } .hs-art .t { fill: var(--tint); }
.hs-art .sm { stroke: var(--mid); } .hs-art .sd { stroke: var(--deep); } .hs-art .sl { stroke: var(--mid); opacity: .32; } .hs-art .sw { stroke: #fff; }
.how-step { display: flex; flex-direction: column; }
.how-step .hs-art { margin-top: auto; padding-top: 28px; }
/* overview header */
.intro { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; padding: 64px 0 40px; border-bottom: 1px solid var(--rule); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--rule); font-size: 13px; font-weight: 600; color: var(--ink); }
.badge img { width: 22px; height: 22px; }
.badge i { width: 4px; height: 4px; border-radius: 50%; background: var(--grey); }
.badge i + * , .badge { white-space: nowrap; }
.intro h1 { margin: 22px 0 0; font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -.05em; max-width: 9ch; }
.intro-r p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 520px; }
.facts { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 24px 0 0; padding: 0; }
.facts li { padding: 0 20px; border-left: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); }
.intro-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.intro-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.intro-cta:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) { .intro { grid-template-columns: 1fr; gap: 28px; } .intro h1 { max-width: none; } }
.intro h1 { margin-top: 0; }

/* ══ chapter pages, simplified: centred reading column, hairlines only ══ */
.doc { padding: 0 0 96px 0; }
.chead, .prose, .pager { margin-left: auto !important; margin-right: auto !important; }
.prose, .pager { max-width: 760px; }
.chead { max-width: 1000px; display: grid; grid-template-columns: 1fr 240px; align-items: center; margin-top: 40px; margin-bottom: 24px; padding: 0; }
.chead > :not(.chart) { grid-column: 1; }
.chead .meta { padding-top: 40px; }
.chead h1 { font-size: clamp(42px, 4.6vw, 64px); margin: 14px 0 12px; }
.chead .lede { font-size: 17px; max-width: 560px; }
.chead .where { margin: 0 32px 0 40px; padding: 16px 0 36px; border-top: 0 !important; }
.chart { grid-column: 2; grid-row: 1 / span 5; align-self: center; padding: 24px 36px 24px 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .m { fill: var(--mid); } .chart .d { fill: var(--deep); } .chart .l { fill: var(--mid); opacity: .32; } .chart .w { fill: #fff; } .chart .t { fill: var(--tint); }
.chart .sm { stroke: var(--mid); } .chart .sd { stroke: var(--deep); } .chart .sl { stroke: var(--mid); opacity: .32; } .chart .sw { stroke: #fff; } .chart .sd2 { stroke: var(--deep); stroke-width: 2.5; }
.chart .dt-q { font: 700 26px var(--sans); fill: var(--deep); }
.chpat { display: none; }

/* headings and rules */
.prose h2 { border-top: 0; padding-top: 0; margin-top: 64px; font-size: 30px; }
.prose h2 .sec { margin-bottom: 6px; font-size: 12px; }
.prose th { border-bottom: 1px solid var(--rule); color: var(--muted); }
.prose td { border-bottom: 1px solid rgba(17, 18, 22, .06); }
.prose table { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule); }
.prose th, .prose td { padding-left: 18px; padding-right: 18px; }
.prose tr:last-child td { border-bottom: 0; }

/* steps: small numbered badges, no row lines */
ol.steps { border-top: 0; margin: 12px 0 28px; }
ol.steps > li { grid-template-columns: 30px 1fr; gap: 14px; padding: 8px 0; border-bottom: 0; }
ol.steps .stepn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1; margin-top: 1px; }

/* sidebar: plain list, current chapter as a soft pill */
.rail { border-right: 0; }
.rail .ch { border-bottom: 0; padding: 7px 10px; border-radius: 8px; }
.rail .ch:hover { background: rgba(17, 18, 22, .04); }
.rail .ch.on { background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.rail .toc { border-bottom: 0; padding: 6px 0 10px 40px; }
.rail .toc a { border-left-width: 1px; }
.rail .toc a.on { border-left: 2px solid var(--accent); }

/* figures and pager lighter */
.prose figure.wide { margin-left: -120px; margin-right: -120px; }
figure.shot .frame { box-shadow: 0 0 0 1px var(--rule), 0 10px 30px rgba(17, 18, 22, .06); }
.pager { margin-top: 72px; }
@media (max-width: 1360px) { .prose figure.wide { margin-left: 0; margin-right: 0; } }
@media (max-width: 760px) {
  .chead { grid-template-columns: 1fr; }
  .chart { grid-column: 1; grid-row: auto; order: -1; padding: 24px 20px 0; max-width: 200px; }
  .chead .meta { padding-top: 12px; }
  .chead .where { margin: 0 20px; }
  ol.steps > li { grid-template-columns: 30px 1fr; gap: 12px; }
}
.chead > .chart { grid-column: 2; grid-row: 1 / span 5; padding: 28px 40px 28px 0; }
@media (max-width: 760px) { .chead > .chart { grid-column: 1; grid-row: auto; padding: 24px 20px 0; max-width: 180px; } }
.intro h1 em { color: var(--blue); }
/* step shots: cropped dialogs at natural size, no window chrome */
figure.shot.step { margin: 14px 0 28px; }
figure.shot.step .frame { width: min(100%, var(--w)); border-radius: 12px; }
figure.shot.step .chrome { display: none; }
figure.shot.step img { aspect-ratio: auto; }
figure.shot.step.full .frame { width: 100%; }
/* "In this chapter, how to" task list */
.tasks { max-width: 760px; margin: 8px auto 0; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.tasks .label { display: block; margin-bottom: 10px; }
.tasks div { display: flex; flex-wrap: wrap; gap: 8px; }
.tasks a { padding: 6px 12px; border-radius: 999px; background: var(--tint, var(--paper)); color: var(--deep, var(--ink)); font-size: 14px; font-weight: 600; text-decoration: none; }
.tasks a:hover { box-shadow: inset 0 0 0 1.5px var(--deep, var(--ink)); }
.prose h3[id^="how-to"] { margin-top: 44px; font-size: 21px; }
.tasks.tasks { background: #fff; }
/* hero: big soft panel, centred headline with icon-marked, dash-underlined key words */
.hero2 { margin: 28px 0 8px; padding: clamp(64px, 11vw, 150px) 24px; border-radius: 28px; background: #FBFAF7; box-shadow: 0 0 0 1px rgba(17, 18, 22, .05); text-align: center; }
.hero2 .label { display: block; margin-bottom: 18px; color: var(--ink); letter-spacing: .12em; }
.hero2 h1 { max-width: 15ch; margin: 0 auto; font: 600 clamp(38px, 5.4vw, 76px)/1.08 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.kw { white-space: nowrap; text-decoration: underline dashed; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.kw svg { display: inline-block; width: .62em; height: .62em; margin: 0 .14em 0 0; vertical-align: .02em; }
.kw-o { color: var(--ink); text-decoration-color: var(--accent); } .kw-o svg { color: var(--accent); }
.kw-p { color: var(--ink); text-decoration-color: var(--pink); } .kw-p svg { color: var(--pink); }
.kw-b { color: var(--ink); text-decoration-color: var(--blue); } .kw-b svg { color: var(--blue); }
.hero2 p { max-width: 560px; margin: 26px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.cards-sec { padding-top: 40px; }
@media (max-width: 760px) { .hero2 { padding: 56px 18px; border-radius: 20px; } .kw { white-space: normal; } }
@media (max-width: 760px) { .kw { white-space: nowrap; } .hero2 h1 { font-size: 34px; max-width: none; } }
/* left-aligned header with icon-marked key words */
.intro h1.kwh { max-width: 13ch; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.06; letter-spacing: -.045em; }
.intro h1.kwh .kw { color: var(--ink); }
@media (max-width: 760px) { .intro h1.kwh { font-size: 36px; max-width: none; } }
.intro h1.kwh { max-width: 18ch; font-size: clamp(38px, 4.2vw, 60px); } .intro { grid-template-columns: 1.5fr 1fr; }
.kw .kw-mark { display: inline-block; width: .66em; height: .66em; margin: 0 .14em 0 0; vertical-align: .0em; }

/* ══ chapter page v2: chapters | reading column | on this page ══ */
.page2 { display: grid; grid-template-columns: 236px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.page2 .rail { border-right: 0; }
.page2 .rail-in { padding-top: 36px; }
.doc2 { min-width: 0; padding: 32px 0 96px 24px; }

.chead2 { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; padding: 36px 40px; border-radius: 24px; background: var(--tint); }
.chead2 .meta { display: flex; align-items: center; gap: 12px; }
.chead2 .ch-no { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: #fff; color: var(--deep); font-size: 13px; font-weight: 700; }
.chead2 .label { color: var(--deep); opacity: .75; }
.chead2 h1 { margin: 14px 0 10px; font: 600 clamp(40px, 4.2vw, 58px)/1 var(--sans); letter-spacing: -.045em; color: var(--deep); }
.chead2 h1 em { font-style: normal; color: var(--mid); }
.chead2 .lede { margin: 0; max-width: 600px; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.chead2 .where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.chead2 .where .label { margin-right: 4px; }
.chead2 .where .crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.chead2 .where .crumb i { font-style: normal; opacity: .5; }
.ch-art svg { display: block; width: 100%; height: auto; }
.ch-art .m { fill: var(--mid); } .ch-art .d { fill: var(--deep); } .ch-art .l { fill: var(--mid); opacity: .32; } .ch-art .w { fill: #fff; } .ch-art .t { fill: var(--tint); }
.ch-art .sm { stroke: var(--mid); } .ch-art .sd { stroke: var(--deep); } .ch-art .sl { stroke: var(--mid); opacity: .32; } .ch-art .sw { stroke: #fff; } .ch-art .sd2 { stroke: var(--deep); stroke-width: 2.5; }
.ch-art .dt-q { font: 700 26px var(--sans); fill: var(--deep); }

.body2 { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; margin-top: 24px; }
.body2 .prose { max-width: 760px; margin: 0; }
.body2 .prose > h2:first-child { margin-top: 24px; }
.otp { position: relative; }
.otp-in { position: sticky; top: calc(var(--header) + 28px); padding-top: 24px; max-height: calc(100vh - var(--header) - 40px); overflow: auto; }
.otp .label { display: block; margin-bottom: 10px; }
.otp .otp-l { margin-top: 26px; }
.otp .toc a, .otp-tasks a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--rule); text-decoration: none; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.otp .toc a:hover, .otp-tasks a:hover { color: var(--ink); }
.otp .toc a.on { color: var(--deep); border-left-color: var(--deep); font-weight: 600; }
.otp-tasks a { border-left-color: transparent; padding-left: 0; }
.otp-tasks a::before { content: '→ '; color: var(--mid); }

/* screenshots: no window chrome; the shot sits on a soft panel in the chapter's colour */
figure.shot .frame { padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--tint, #E6E2D7) 70%, #fff); box-shadow: none; }
figure.shot .frame img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(17, 18, 22, .06), 0 12px 28px rgba(17, 18, 22, .1); }
figure.shot.step .frame { width: 100%; }
figure.shot figcaption { padding: 0 4px; }
.prose figure.wide { margin-left: 0; margin-right: 0; }
.prose h2 .sec { color: var(--deep, var(--accent)); }
ol.steps .stepn { background: var(--deep, var(--ink)); }
.prose ul li::marker { color: var(--mid, var(--accent)); }
.callout { background: color-mix(in srgb, var(--tint, #E4F5F7) 60%, #fff); border-left-color: var(--deep, var(--cyan)); }
.callout .label { color: var(--deep, var(--cyan-dk)); }
.pager { max-width: none; }
.pager a.next { background: var(--tint, var(--t-orange)); }
.pager .ar { color: var(--deep, var(--accent)); }

@media (max-width: 1240px) { .body2 { grid-template-columns: minmax(0, 1fr); } .otp { display: none; } .body2 .prose { margin: 0 auto; } }
@media (max-width: 1100px) { .page2 { grid-template-columns: 1fr; } .page2 .rail { display: none; } .doc2 { padding-left: 0; } }
@media (max-width: 760px) {
  .chead2 { grid-template-columns: 1fr; padding: 24px 20px; }
  .ch-art { order: -1; max-width: 150px; }
  figure.shot .frame { padding: 8px; border-radius: 12px; }
}

/* chapter banner v3: text left, a deep-colour art panel right, quick stats */
.chead2 { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.chead2 .ch-text { padding: 40px 44px 34px; }
.chead2 h1 { font-size: clamp(44px, 4.6vw, 64px); margin: 16px 0 12px; }
.chead2 .where { margin-top: 22px; }
.ch-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--deep) 14%, transparent); }
.ch-stats span { padding: 0 18px; border-left: 1px solid color-mix(in srgb, var(--deep) 14%, transparent); font-size: 13px; color: color-mix(in srgb, var(--deep) 75%, #fff); }
.ch-stats span:first-child { padding-left: 0; border-left: 0; }
.ch-stats b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--deep); }
.ch-art.dark { position: relative; display: grid; place-items: center; min-height: 260px; background: var(--deep); }
.ch-art.dark .deco { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--tint); stroke-width: 1; opacity: .3; }
.ch-art.dark .ca { position: relative; width: 70%; max-width: 280px; }
.ch-art.dark .ca svg { display: block; width: 100%; height: auto; }
.ch-art.dark .m { fill: var(--tint); } .ch-art.dark .d { fill: #fff; } .ch-art.dark .l { fill: var(--tint); opacity: .35; } .ch-art.dark .w { fill: var(--deep); } .ch-art.dark .t { fill: var(--deep); }
.ch-art.dark .sm { stroke: var(--tint); } .ch-art.dark .sd { stroke: #fff; } .ch-art.dark .sl { stroke: var(--tint); opacity: .35; } .ch-art.dark .sw { stroke: var(--deep); } .ch-art.dark .sd2 { stroke: #fff; }
.ch-art.dark .dt-q { fill: #fff; }
@media (max-width: 760px) {
  .chead2 { grid-template-columns: 1fr; }
  .chead2 .ch-text { padding: 26px 22px; }
  .ch-art.dark { order: -1; min-height: 170px; max-width: none; }
  .ch-art.dark .ca { width: 46%; }
}
.ch-art.dark .ca { left: auto; top: auto; transform: none; } .ch-art.dark { padding: 28px; }
/* compact banner */
.chead2 { grid-template-columns: minmax(0, 1fr) minmax(200px, 28%); border-radius: 20px; }
.chead2 .ch-text { padding: 26px 32px 22px; }
.chead2 h1 { font-size: clamp(34px, 3.4vw, 46px); margin: 10px 0 8px; }
.chead2 .lede { font-size: 15.5px; line-height: 1.5; max-width: 640px; }
.chead2 .where { margin-top: 14px; }
.chead2 .where .crumb { padding: 3px 10px; font-size: 13px; }
.ch-stats { margin-top: 16px; padding-top: 12px; }
.ch-stats b { font-size: 18px; }
.ch-stats span { font-size: 12.5px; }
.ch-art.dark { min-height: 0; padding: 18px; }
.ch-art.dark .ca { width: 62%; max-width: 200px; }
@media (max-width: 760px) { .ch-art.dark { min-height: 130px; } .ch-art.dark .ca { width: 40%; } }
/* sidebar back link */
.rail .back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 14px 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rule); text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.rail .back svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s; }
.rail .back:hover svg { transform: translateX(-3px); }
.rail .back + .ch { margin-top: 2px; }
/* even more compact banner: stats ride in the meta row */
.chead2 .ch-text { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; padding: 20px 28px 20px; }
.chead2 .meta { grid-column: 1 / -1; }
.chead2 h1 { grid-column: 1 / -1; font-size: clamp(30px, 2.9vw, 40px); margin: 8px 0 6px; }
.chead2 .lede { grid-column: 1 / -1; font-size: 15px; }
.chead2 .where { grid-column: 1; margin-top: 12px; }
.ch-stats { grid-column: 2; align-self: end; justify-self: end; margin: 12px 0 0; padding: 0; border-top: 0; }
.ch-stats span { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 12px; }
.ch-stats b { display: inline; font-size: 15px; }
.chead2 { grid-template-columns: minmax(0, 1fr) minmax(170px, 22%); }
.ch-art.dark { padding: 14px; }
.ch-art.dark .ca { width: 60%; max-width: 160px; }
@media (max-width: 900px) { .chead2 .ch-text { grid-template-columns: 1fr; } .ch-stats { grid-column: 1; justify-self: start; } .ch-stats span:first-child { padding-left: 0; } }
.chead2 .meta { grid-column: 1; grid-row: 1; }
.ch-stats { grid-column: 2; grid-row: 1; align-self: center; margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.chead2 .where { grid-column: 1 / -1; }
@media (max-width: 900px) { .ch-stats { grid-column: 1; grid-row: auto; margin-top: 10px; } }
.chead2 h1 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; margin: 8px 0 6px; }


/* ══ motion: page transitions + sliding hover pills ══ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.top { view-transition-name: topbar; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
.page2 .rail { view-transition-name: rail; }
::view-transition-old(rail), ::view-transition-new(rail) { animation: none; }
/* first paint (and browsers without view transitions): content rises in */
.doc2, .landing { animation: page-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }

.has-pill { position: relative; }
.pill-hl { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(11, 22, 64, .06);
  transition: transform .32s cubic-bezier(.3, .8, .25, 1), width .32s cubic-bezier(.3, .8, .25, 1), height .32s cubic-bezier(.3, .8, .25, 1), opacity .2s; }
.has-pill > :not(.pill-hl) { position: relative; z-index: 1; }
.rail-in.has-pill .ch, .rail-in.has-pill .ch.on, .rail-in.has-pill .ch:hover { background: transparent; box-shadow: none; transition: color .2s; }
.rail-in.has-pill .ch { padding-left: 10px; border-radius: 10px; }
.rail-in.has-pill .ch:hover { color: var(--ink); }
.rail-in.has-pill .back { box-shadow: 0 0 0 1px var(--rule); }
.otp .toc.has-pill .pill-hl { border-radius: 8px; background: color-mix(in srgb, var(--tint, #E6E9FF) 70%, #fff); box-shadow: none; }
.otp .toc.has-pill a { border-left-color: transparent; padding-left: 12px; transition: color .2s; }
.otp .toc.has-pill { border-left: 2px solid var(--rule); padding-left: 4px; }
.top .right.has-pill .pill-hl { display: none; }
/* small motion on interactive bits */
.ov-list a { transition: transform .2s; } .ov-list a:hover { transform: translateX(4px); }
.card, .feat { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .doc2, .landing { animation: none; }
  .pill-hl { transition: none; }
}

/* ══ detail pages: neutral white surfaces on the paper background; colour only in small accents ══ */
.callout, .callout.note { position: relative; background: #fff; border: 0; border-left: 0; border-radius: 14px; padding: 16px 20px 16px 58px; box-shadow: 0 0 0 1px var(--rule), 0 6px 18px rgba(17, 18, 22, .04); color: var(--body); }
.callout::before { content: 'i'; position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 13px/1 Georgia, serif; font-style: italic; color: #fff; background: var(--deep, var(--accent)); }
.callout.note::before { content: '!'; font: 700 13px/1 var(--sans); font-style: normal; background: #E8590C; }
.callout .label { color: var(--deep, var(--accent)); opacity: 1; margin-bottom: 4px; }
.callout.note .label { color: #C2410C; }
.callout strong { color: var(--ink); }
.callout code { background: var(--paper); border-color: var(--rule); color: var(--ink); }
figure.shot .frame { padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 10px 30px rgba(17, 18, 22, .06); }
figure.shot .frame img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(17, 18, 22, .05); }
.otp .toc.has-pill .pill-hl { background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 4px 12px rgba(17, 18, 22, .05); }
.otp .toc a.on { color: var(--ink); font-weight: 600; }
.pager a.next { background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.prose table { box-shadow: 0 0 0 1px var(--rule), 0 6px 18px rgba(17, 18, 22, .04); }
figure.shot figcaption .fig { color: var(--deep, var(--accent)); }

/* ══ lighter detail pages: no boxes or shadows, hairlines only ══ */
.callout, .callout.note { background: transparent; box-shadow: none; border-radius: 0; padding: 2px 0 2px 40px; margin: 20px 0 28px; }
.callout::before { left: 0; top: 2px; width: 22px; height: 22px; font-size: 12px; }
.callout .label { margin-bottom: 2px; }
figure.shot .frame { padding: 0; background: transparent; border-radius: 12px; box-shadow: none; }
figure.shot .frame img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(17, 18, 22, .08); }
.prose table { background: transparent; box-shadow: none; border-radius: 0; }
.prose th, .prose td { padding-left: 0; }
.prose th { border-bottom: 1px solid rgba(17, 18, 22, .14); }
.otp .toc.has-pill .pill-hl { background: rgba(17, 18, 22, .045); box-shadow: none; }
.pager a, .pager a.prev, .pager a.next { background: transparent; box-shadow: none; border-top: 1px solid var(--rule); border-radius: 0; padding-left: 0; }
.pager a.next { padding-left: 24px; }
.rail-in.has-pill .pill-hl { background: rgba(17, 18, 22, .045); box-shadow: none; }
.rail .back { box-shadow: none !important; background: transparent; padding-left: 10px; }
.rail .back:hover { background: rgba(17, 18, 22, .045); }

/* ── Chapter pages: white page, soft tinted containers ── */
body.chapter { background: #FFFFFF; }
body.chapter .callout, body.chapter .callout.note { background: color-mix(in srgb, var(--tint) 45%, #fff); border-radius: 14px; padding: 16px 20px 16px 56px; margin: 20px 0 28px; }
body.chapter .callout::before { left: 18px; top: 17px; }
body.chapter .callout code { background: #fff; }
body.chapter figure.shot .frame { padding: 14px; background: color-mix(in srgb, var(--tint) 40%, #fff); border-radius: 18px; }
body.chapter figure.shot .frame img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(17,18,22,.06), 0 6px 18px -10px rgba(17,18,22,.18); }
body.chapter .rail-in.has-pill .pill-hl, body.chapter .otp .toc.has-pill .pill-hl { background: color-mix(in srgb, var(--tint) 55%, #fff); }

/* ── One colour for all page chrome: blue everywhere (banner keeps its chapter tone) ── */
.page2 .rail, .page2 .body2, .page2 .pager { --tint: #D9DFFF; --deep: #0024D6; --mid: #6E80FF; }
body.chapter .rail-in.has-pill .pill-hl, body.chapter .otp .toc.has-pill .pill-hl { background: #EDF0FF; }
body.chapter .rail .ch.on, body.chapter .otp .toc a.on { color: #0024D6; }
body.chapter .rail .ch.on .n { color: #0024D6; }

/* ── Rail: line the Back link up with the top of the chapter banner ── */
.page2 .rail-in { position: sticky; top: var(--header); padding-top: 24px; }

/* ── Selected nav: subtle grey pill, dark text ── */
body.chapter .rail-in.has-pill .pill-hl, body.chapter .otp .toc.has-pill .pill-hl { background: #F1F2F4; }
body.chapter .rail .ch.on, body.chapter .otp .toc a.on { color: var(--ink); }
.kw.kw-after svg, .kw.kw-after .kw-mark { margin: 0 0 0 .14em; }

/* ── Smoother page changes ──
   The whole page cross-fades (no sliding, so no background gaps), the header and sidebar
   stay put instead of morphing, and only the new content rises in, once. */
::view-transition-old(root) { animation: vt-fade-out .18s ease-out both; }
::view-transition-new(root) { animation: vt-fade-in .3s ease-out both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
::view-transition-group(topbar), ::view-transition-group(rail) { animation: none; }
::view-transition-old(topbar), ::view-transition-new(topbar),
::view-transition-old(rail), ::view-transition-new(rail) { animation-duration: .2s; }
.doc2, .landing { animation: page-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
/* intro reveals play once per visit; coming back (e.g. via Back) only cross-fades */
.seen .card, .seen .bt, .seen .ft { animation: none; opacity: 1; }
.seen .landing { animation: none; }
/* hand-off instead of overlap: old page clears first, then the new one fades in (no doubled text) */
::view-transition-old(root) { animation: vt-fade-out .12s ease-in both; }
::view-transition-new(root) { animation: vt-fade-in .26s ease-out .08s both; }
::view-transition-old(rail):only-child, ::view-transition-old(topbar):only-child { animation: vt-fade-out .12s ease-in both; }
::view-transition-new(rail):only-child { animation: vt-fade-in .26s ease-out .08s both; }

/* ── Simple banner: faint tint, plain eyebrow, small icon on the right ── */
.chead2 { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 18px; background: color-mix(in srgb, var(--tint) 32%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 70%, #fff); }
.chead2 .ch-text { padding: 22px 28px; }
.chead2 .ch-no { min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; font-size: 12px; letter-spacing: .08em; }
.chead2 .meta { gap: 8px; }
.chead2 .meta .label { font-size: 12px; }
.chead2 h1 { color: var(--ink); }
.ch-stats span { color: var(--muted); border-left-color: var(--rule); }
.ch-stats b { color: var(--ink); }
.ch-art.lite { display: grid; place-items: center; padding: 0 32px 0 8px; background: none; }
.ch-art.lite .ca { display: block; width: 104px; }
.ch-art.lite .ca svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .ch-art.lite { display: none; } }
.chead2 { grid-template-columns: minmax(0, 1fr); }
/* keep the solid colour visual on the right */
.chead2 { grid-template-columns: minmax(0, 1fr) minmax(170px, 22%); align-items: stretch; overflow: hidden; box-shadow: none; }
.chead2 .ch-text { align-self: center; }
@media (max-width: 900px) { .chead2 { grid-template-columns: 1fr; } }

/* ── Page changes, v3 (from frame-by-frame recording) ──
   Header and sidebar swap instantly and never fade; the content area does one short overlapping fade.
   No gap, no double highlight, no second entrance animation on top. */
::view-transition-old(root) { animation: vt-fade-out .16s ease-out both; }
::view-transition-new(root) { animation: vt-fade-in .24s ease-out both; }
::view-transition-old(topbar), ::view-transition-old(rail) { display: none; }
::view-transition-new(topbar), ::view-transition-new(rail) { animation: none; }
::view-transition-group(topbar), ::view-transition-group(rail) { animation: none; }
@supports (view-transition-name: none) { .doc2, .landing { animation: none; } }

/* in-place page swap: only the content area fades up; header and sidebar never move */
.swap-in { animation: swap-in .26s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .swap-in { animation: none; } }
.prose h2, .prose h3, .prose [id] { scroll-margin-top: 88px; }

/* UI labels (buttons to click): rounded grey badge, no border */
.prose code, .callout code, body.chapter .callout code, figcaption code {
  background: rgba(17, 18, 22, .06); border: 0; border-radius: 999px; padding: 2px 10px; color: var(--ink); font-weight: 600;
}

/* hero keyword icons: sized to the cap height of the headline so they sit level with the words */
.intro h1.kwh .kw svg, .intro h1.kwh .kw .kw-mark { width: .78em; height: .78em; vertical-align: -.04em; margin-right: .16em; }
.intro h1.kwh .kw.kw-after svg, .intro h1.kwh .kw.kw-after .kw-mark { margin: 0 0 0 .16em; }
.intro h1.kwh .kw svg, .intro h1.kwh .kw .kw-mark { width: .9em; height: .9em; vertical-align: -.1em; }
.intro h1.kwh .kw.kw-after svg { width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.intro h1.kwh .kw-o svg { color: #FF6700; }
.brand span { display: inline-flex; align-items: center; gap: 8px; }
.brand .bmark { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--accent); }
.brand .bmark svg { width: 20px; height: 20px; display: block; }
.brand span b { font-weight: inherit; }

/* ── Chapters panel: backdrop fades, panel drops in from the button, chapters cascade ── */
.overlay:not([hidden]) { animation: ov-bg .3s ease both; }
.overlay:not([hidden]) .ov-in { transform-origin: top right; animation: ov-in .46s cubic-bezier(.2, .85, .25, 1) both; }
.overlay:not([hidden]) .ov-head, .overlay:not([hidden]) .ov-list a { animation: ov-item .5s cubic-bezier(.2, .85, .25, 1) backwards; }
.overlay:not([hidden]) .ov-head { animation-delay: .06s; }
.overlay:not([hidden]) .ov-list a:nth-child(1) { animation-delay: 0.108s; }
.overlay:not([hidden]) .ov-list a:nth-child(2) { animation-delay: 0.136s; }
.overlay:not([hidden]) .ov-list a:nth-child(3) { animation-delay: 0.164s; }
.overlay:not([hidden]) .ov-list a:nth-child(4) { animation-delay: 0.192s; }
.overlay:not([hidden]) .ov-list a:nth-child(5) { animation-delay: 0.220s; }
.overlay:not([hidden]) .ov-list a:nth-child(6) { animation-delay: 0.248s; }
.overlay:not([hidden]) .ov-list a:nth-child(7) { animation-delay: 0.276s; }
.overlay:not([hidden]) .ov-list a:nth-child(8) { animation-delay: 0.304s; }
.overlay:not([hidden]) .ov-list a:nth-child(9) { animation-delay: 0.332s; }
.overlay:not([hidden]) .ov-list a:nth-child(10) { animation-delay: 0.360s; }
.overlay:not([hidden]) .ov-list a:nth-child(11) { animation-delay: 0.388s; }
.overlay:not([hidden]) .ov-list a:nth-child(12) { animation-delay: 0.416s; }
.overlay.closing { animation: ov-bg-out .22s ease both; }
.overlay.closing .ov-in { animation: ov-out .2s cubic-bezier(.4, 0, 1, 1) both; }
.overlay.closing .ov-list a, .overlay.closing .ov-head { animation: none; }
@keyframes ov-bg { from { background: rgba(17, 18, 22, 0); } }
@keyframes ov-bg-out { to { background: rgba(17, 18, 22, 0); } }
@keyframes ov-in { from { opacity: 0; transform: translateY(-16px) scale(.975); } }
@keyframes ov-out { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes ov-item { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .overlay:not([hidden]) .ov-list a, .overlay:not([hidden]) .ov-head { animation: none; } }

/* ══ Ask AI: a plain panel docked on the right; the page shifts left to make room ══ */
:root { --ga-w: 560px; }
body { transition: margin-right .34s cubic-bezier(.2, .85, .25, 1); }
html.ga-docked body { margin-right: var(--ga-w); }
html.ga-instant body, html.ga-instant .ga-panel { transition: none !important; animation: none !important; }
html.ga-docked .body2 { grid-template-columns: minmax(0, 1fr); }
html.ga-docked .otp { display: none; }
html.ga-docked .top .pos { display: none; }

.ga-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 35; width: var(--ga-w); display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--rule); font-family: var(--sans);
  animation: ga-in .34s cubic-bezier(.2, .85, .25, 1) both; }
.ga-panel.closing { animation: ga-out .28s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes ga-in { from { transform: translateX(100%); } }
@keyframes ga-out { to { transform: translateX(100%); } }

.ga-head { display: flex; align-items: center; gap: 4px; height: var(--header); padding: 0 12px 0 20px; border-bottom: 1px solid var(--rule); }
.ga-ttl { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.ga-ttl svg { width: 18px; height: 18px; color: var(--accent); }
.ga-ttl b { font-weight: 600; }
.ga-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ga-ic:hover { background: #F1F2F4; color: var(--ink); }
.ga-ic svg { width: 18px; height: 18px; }

.ga-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
.ga-note { margin: 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ga-sugs { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ga-sugs span { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.ga-sugs button { border: 0; background: none; padding: 7px 0; font: 14.5px/1.4 var(--sans); color: var(--ink); text-align: left; cursor: pointer; }
.ga-sugs button:hover { color: var(--accent); }

.ga-msg { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.ga-msg p { margin: 0 0 8px; } .ga-msg p:last-child { margin-bottom: 0; }
.ga-msg ol, .ga-msg ul { margin: 2px 0 8px; padding-left: 20px; } .ga-msg li { margin: 3px 0; }
.ga-msg b { color: var(--ink); font-weight: 600; }
.ga-msg code { font: 600 .9em var(--sans); background: rgba(17, 18, 22, .06); border-radius: 999px; padding: 1px 8px; color: var(--ink); }
.ga-msg a { color: var(--accent); }
.ga-u { align-self: flex-end; max-width: 85%; padding: 8px 14px; border-radius: 14px; background: #F1F2F4; color: var(--ink); }
.ga-cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; padding: 0 4px; border-radius: 5px; background: #F1F2F4; color: var(--muted) !important; font-size: 10.5px; font-weight: 600; text-decoration: none; vertical-align: 1px; }
.ga-cite:hover { background: var(--accent); color: #fff !important; }
.ga-srcs { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.ga-srcs .h { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ga-srcs a { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; text-decoration: none; transition: background .15s; }
.ga-srcs a:hover { background: #F4F5F7; }
.ga-srcs a i { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #F1F2F4; color: var(--muted); font: 600 10.5px var(--sans); font-style: normal; }
.ga-srcs a .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.ga-srcs a .c { flex: none; margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ga-srcs a:hover i { background: var(--accent); color: #fff; }
.ga-srcs a:hover .t { color: var(--accent); }
.ga-err p { color: #B42318; }
.ga-link { border: 0; background: none; padding: 0; font: 600 13.5px var(--sans); color: var(--accent); cursor: pointer; }
.ga-thinking { color: var(--muted); }
.ga-thinking span { animation: ga-dot 1.2s infinite; } .ga-thinking span:nth-child(2) { animation-delay: .2s; } .ga-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes ga-dot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.ga-form { position: relative; margin: 0 16px 16px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ga-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 36, 214, .08); }
.ga-form textarea { display: block; width: 100%; box-sizing: border-box; resize: none; border: 0; outline: 0; background: none; padding: 12px 48px 12px 14px; font: 14.5px/1.45 var(--sans); color: var(--ink); }
.ga-send { position: absolute; right: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; }
.ga-send:disabled { background: #E6E7EA; color: #9A9EA8; cursor: default; }
.ga-send svg { width: 16px; height: 16px; }

/* opener: icon button to the right of Chapters */
.ga-top { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ga-top svg { width: 20px; height: 20px; }
.ga-top:hover { border-color: var(--accent); color: var(--accent); }
.ga-top[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.top .pos { white-space: nowrap; }

@media (max-width: 1100px) { html.ga-docked body { margin-right: 0; } .ga-panel { box-shadow: -20px 0 60px -20px rgba(11, 22, 64, .3); } }
@media (max-width: 760px) { .ga-panel { width: 100vw; border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ga-panel { animation: none; } body { transition: none; } }
/* resize handle on the panel's left edge */
.ga-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; z-index: 3; cursor: col-resize; touch-action: none; outline: 0; }
.ga-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.ga-resize:hover::after, .ga-resize:focus-visible::after, html.ga-resizing .ga-resize::after { opacity: 1; }
html.ga-resizing, html.ga-resizing * { cursor: col-resize !important; user-select: none !important; }
html.ga-resizing body { transition: none !important; }
@media (max-width: 1100px) { .ga-resize { display: none; } }
/* panel open: the panel has its own close, so the header opener steps aside; header and banner stay on one line */
html.ga-docked .ga-top { display: none; }
html.ga-docked .top { grid-template-columns: auto minmax(160px, 1fr) auto; }
.chead2 .meta, .chead2 .meta .label { white-space: nowrap; }
/* panel open (narrower page): banner stacks its stats under the label so nothing runs under the artwork */
.chead2 .ch-text { min-width: 0; }
html.ga-docked .chead2 .ch-text { grid-template-columns: minmax(0, 1fr); }
html.ga-docked .ch-stats { grid-column: 1; grid-row: auto; justify-self: start; margin: 10px 0 0; order: 5; }
html.ga-docked .ch-stats span:first-child { padding-left: 0; }
.ga-panel { box-sizing: border-box; max-width: 100vw; }
.ga-panel *, .ga-panel *::before, .ga-panel *::after { box-sizing: border-box; }
/* disclaimer sits under the input */
.ga-form { margin-bottom: 8px; }
.ga-panel > .ga-note { margin: 0 16px 12px; font-size: 11.5px; line-height: 1.4; text-align: center; color: var(--muted); }

/* ══ Theme switcher + dark mode ══
   html[data-mode] is resolved before first paint (light / dark / system → OS). */
.theme-sw { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; padding: 3px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.theme-sw button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.theme-sw button svg { width: 17px; height: 17px; }
.theme-sw button:hover { color: var(--ink); }
.theme-sw button[aria-checked="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 18, 22, .12), 0 0 0 1px var(--rule); }
html.ga-docked .theme-sw { display: none; }
@media (max-width: 900px) { .theme-sw { display: none; } }
html.theme-anim body, html.theme-anim body * { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; }

html[data-mode="dark"] {
  color-scheme: dark;
  --paper: #0D0F13; --white: #161920;
  --ink: #EDEFF3; --body: #C2C6CE; --muted: #8C92A0; --grey: #5C6370;
  --rule: rgba(255, 255, 255, .1);
  --accent: #5C78FF; --blue: #5C78FF;
}
html[data-mode="dark"] body, html[data-mode="dark"] body.chapter { background: var(--paper); color: var(--body); }
html[data-mode="dark"] .top { background: rgba(13, 15, 19, .86); border-bottom-color: var(--rule); }
html[data-mode="dark"] .brand img { filter: brightness(0) invert(1); }
html[data-mode="dark"] .search { background: var(--white); }
html[data-mode="dark"] .search input { color: var(--ink); }
html[data-mode="dark"] .search .results { background: var(--white); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6), 0 0 0 1px var(--rule); }
html[data-mode="dark"] .search .results a:hover { background: rgba(255, 255, 255, .06); }
/* chapter chrome uses the brighter blue */
html[data-mode="dark"] .page2 .rail, html[data-mode="dark"] .page2 .body2, html[data-mode="dark"] .page2 .pager { --tint: #1E2850; --deep: #8EA2FF; --mid: #6E86FF; }
html[data-mode="dark"] .rail-in.has-pill .pill-hl, html[data-mode="dark"] .otp .toc.has-pill .pill-hl { background: rgba(255, 255, 255, .07); }
/* banner: a deep tint of the chapter colour */
html[data-mode="dark"] .chead2 { background: color-mix(in srgb, var(--mid) 14%, #14171D); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-mode="dark"] .chead2 .label, html[data-mode="dark"] .chead2 .ch-no, html[data-mode="dark"] .chead2 .where .label { color: color-mix(in srgb, var(--mid) 70%, #fff); }
html[data-mode="dark"] .chead2 .where .crumb { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: none; }
html[data-mode="dark"] .ch-stats b { color: var(--ink); }
/* prose */
html[data-mode="dark"] .prose code, html[data-mode="dark"] .callout code, html[data-mode="dark"] figcaption code { background: rgba(255, 255, 255, .1); color: var(--ink); }
html[data-mode="dark"] body.chapter .callout, html[data-mode="dark"] body.chapter .callout.note { background: color-mix(in srgb, var(--mid) 12%, #14171D); }
html[data-mode="dark"] body.chapter figure.shot .frame { background: color-mix(in srgb, var(--mid) 10%, #14171D); }
html[data-mode="dark"] figure.shot .frame img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -12px rgba(0, 0, 0, .6); }
html[data-mode="dark"] .prose a { color: #9DB0FF; }
/* overview */
html[data-mode="dark"] .card { background: var(--white); box-shadow: 0 0 0 1px var(--rule); }
html[data-mode="dark"] .card .pill { border-color: var(--rule); color: var(--body); }
html[data-mode="dark"] .card .go { color: #9DB0FF; }
html[data-mode="dark"] .kw-b, html[data-mode="dark"] .kw-o { text-decoration-color: var(--accent); }
/* chapters menu, lightbox, footer */
html[data-mode="dark"] .ov-in { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--rule); }
html[data-mode="dark"] .overlay { background: rgba(0, 0, 0, .6); }
html[data-mode="dark"] .foot img { filter: brightness(0) invert(1); opacity: .8; }
/* Ask AI panel */
html[data-mode="dark"] .ga-panel { background: var(--white); }
html[data-mode="dark"] .ga-form { background: var(--paper); }
html[data-mode="dark"] .ga-u, html[data-mode="dark"] .ga-cite, html[data-mode="dark"] .ga-srcs a i { background: rgba(255, 255, 255, .08); }
html[data-mode="dark"] .ga-srcs a:hover, html[data-mode="dark"] .ga-ic:hover { background: rgba(255, 255, 255, .06); }
html[data-mode="dark"] .ga-send { background: var(--ink); color: var(--paper); }
html[data-mode="dark"] .ga-send:disabled { background: rgba(255, 255, 255, .08); color: var(--muted); }
html[data-mode="dark"] .ga-top { background: var(--white); }
html[data-mode="dark"] .ga-msg code { background: rgba(255, 255, 255, .1); }
html[data-mode="dark"] .ga-msg a { color: #9DB0FF; }

/* header controls: rounded pills */
.top .search { border-radius: 999px; }
.top .search .results { border-radius: 18px; }
.top .chapters-btn { border-radius: 999px; padding-left: 16px; padding-right: 18px; }
.theme-sw, .theme-sw button { border-radius: 999px; }
.ga-top { width: auto; gap: 7px; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; font: 600 14.5px var(--sans); }
.ga-top svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .ga-top span { display: none; } .ga-top { padding: 0 11px; } }
/* dark leftovers from the scan */
html[data-mode="dark"] body.chapter .rail .ch.on .n, html[data-mode="dark"] .rail .ch.on .n { color: #8EA2FF; }
html[data-mode="dark"] .how-step h3 { color: #111216; }
html[data-mode="dark"] .how-step p { color: #3A3E48; }
.ga-top { display: inline-flex; align-items: center; justify-content: center; }

/* ── Chapter banner: more air, and the overview cards' outlined badge for the group and the location ── */
.chead2 .ch-text { padding: 34px 40px 32px; }
.chead2 .meta { gap: 12px; }
.chead2 .meta .label { display: inline-flex; align-items: center; padding: 4px 13px; border: 1px solid rgba(17, 18, 22, .3); border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; }
.chead2 .ch-no { font-size: 13px; letter-spacing: .04em; }
.chead2 h1 { margin: 20px 0 12px; }
.chead2 .lede { line-height: 1.6; }
.chead2 .where { margin-top: 26px; gap: 8px; }
.chead2 .where .label { margin-right: 6px; }
.chead2 .where .crumb { padding: 4px 13px; border: 1px solid rgba(17, 18, 22, .3); border-radius: 999px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
html.ga-docked .ch-stats { margin-top: 18px; }
html[data-mode="dark"] .chead2 .meta .label, html[data-mode="dark"] .chead2 .where .crumb { border-color: rgba(255, 255, 255, .22); background: transparent; color: var(--ink); }
.ga-top svg { width: 20px; height: 20px; }
/* header right: one even gap between controls, and a hairline divider before Ask AI */
.top .right { gap: 12px; }
.theme-sw { margin-right: 0; }
.ga-top { position: relative; margin-left: 13px; }
.ga-top::before { content: ""; position: absolute; left: -13px; top: 50%; width: 1px; height: 24px; transform: translateY(-50%); background: var(--rule); pointer-events: none; }
.ga-ttl svg { width: 20px; height: 20px; }

.card .go svg { transition: translate .3s cubic-bezier(.2, .8, .2, 1); }
.card:hover .go svg { translate: 4px 0; }
@media (prefers-reduced-motion: reduce) { .card:hover .cv .ca svg, .card:hover .cv .deco { transform: none; } .card:hover .cv .ca svg > * { animation: none; } }

/* ── Overview cards: every illustration animates its own story on hover ──
   Parts move with the individual translate/rotate/scale properties, which stack on their own SVG
   transforms. Default pivot is the part's own centre; view-box pivots are set where a part turns
   around something else (the sun, the gauge hub, the radar centre). */
.card .ca svg > * { transform-box: fill-box; transform-origin: center; }
.card .ca svg > g, .card .ca svg > path, .card .ca svg > circle, .card .ca svg > rect, .card .ca svg > line, .card .ca svg > text { animation-fill-mode: both; }
@keyframes k-rise { from { translate: 0 12px; opacity: .2; } }
@keyframes k-ray { 0% { scale: .2; opacity: 0; } 70% { scale: 1.15; opacity: 1; } 100% { scale: 1; } }
@keyframes k-twinkle { 0% { scale: 1; rotate: 0deg; } 50% { scale: 1.45; rotate: 45deg; } 100% { scale: 1; rotate: 90deg; } }
@keyframes k-shimmer { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
@keyframes k-spin-half { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes k-pulse { 0%, 100% { scale: 1; } 45% { scale: 1.22; } }
@keyframes k-needle { 0% { rotate: 0deg; } 35% { rotate: -75deg; } 70% { rotate: 18deg; } 100% { rotate: 0deg; } }
@keyframes k-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes k-grow-y { 0% { scale: 1 .25; } 70% { scale: 1 1.08; } 100% { scale: 1 1; } }
@keyframes k-grow-x { from { scale: 0 1; } }
@keyframes k-bounce { 0%, 100% { translate: 0 0; } 40% { translate: 0 -9px; } 70% { translate: 0 2px; } }
@keyframes k-fan-1 { 50% { translate: -4px -7px; rotate: -7deg; } 100% { translate: -2px -4px; rotate: -4deg; } }
@keyframes k-fan-2 { 50% { translate: -2px -4px; rotate: -3deg; } 100% { translate: -1px -2px; rotate: -2deg; } }
@keyframes k-pop { 0% { scale: 1; } 40% { scale: 1.28; } 70% { scale: .94; } 100% { scale: 1; } }
@keyframes k-ripple { 0% { scale: 1; opacity: 1; } 60% { scale: 1.16; opacity: .35; } 100% { scale: 1; opacity: 1; } }
@keyframes k-orbit { 0% { rotate: 0deg; } 60% { rotate: 24deg; } 100% { rotate: 0deg; } }
@keyframes k-sweep { to { rotate: 360deg; } }
@keyframes k-march { to { stroke-dashoffset: -32; } }
@keyframes k-blink { 0%, 100% { opacity: 1; scale: 1; } 25% { opacity: .2; } 50% { opacity: 1; scale: 1.2; } 75% { opacity: .4; } }
@keyframes k-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -22deg; } 60% { rotate: 14deg; } }
@keyframes k-slide-a { 50% { translate: -24px 0; } }
@keyframes k-fill-a { 50% { scale: .67 1; } }
@keyframes k-slide-b { 50% { translate: 34px 0; } }
@keyframes k-fill-b { 50% { scale: 1.85 1; } }
@keyframes k-slide-c { 50% { translate: -40px 0; } }
@keyframes k-fill-c { 50% { scale: .57 1; } }
@keyframes k-quarter { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes k-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -16deg; } 55% { rotate: 12deg; } 80% { rotate: -5deg; } }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(1) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 165ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(2) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 210ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(3) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 255ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(4) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 300ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(5) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 345ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(6) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 390ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(7) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 435ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(8) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 480ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(9) { transform-box: view-box; transform-origin: 80px 88px; animation: k-ray .5s cubic-bezier(.3,.8,.3,1.2) 525ms both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(10) { animation: k-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(11) { animation: k-rise .6s cubic-bezier(.2,.8,.2,1) both, k-twinkle .7s ease .55s; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(13) { animation: k-shimmer 1.2s ease-in-out .2s; }
.card[data-k="getting-started"]:hover .ca svg > :nth-child(14) { animation: k-shimmer 1.2s ease-in-out .35s reverse; }
.card[data-k="ask-atom"]:hover .ca svg > :nth-child(1) { transform-box: view-box; transform-origin: 80px 60px; animation: k-spin-half .9s cubic-bezier(.4,0,.2,1); }
.card[data-k="ask-atom"]:hover .ca svg > :nth-child(2) { animation: k-pulse .7s ease .25s, k-twinkle .9s ease; }
.card[data-k="ask-atom"]:hover .ca svg > :nth-child(3) { animation: k-twinkle .7s ease .1s; }
.card[data-k="ask-atom"]:hover .ca svg > :nth-child(4) { animation: k-twinkle .7s ease .35s; }
.card[data-k="home"]:hover .ca svg > :nth-child(2) { stroke-dasharray: 120; animation: k-draw .9s cubic-bezier(.3,.7,.2,1); }
.card[data-k="home"]:hover .ca svg > :nth-child(3) { transform-box: view-box; transform-origin: 56px 84px; animation: k-needle 1.1s cubic-bezier(.4,.1,.2,1); }
.card[data-k="home"]:hover .ca svg > :nth-child(5) { transform-origin: 50% 100%; animation: k-grow-y .6s cubic-bezier(.3,.8,.3,1.1) 150ms; }
.card[data-k="home"]:hover .ca svg > :nth-child(6) { transform-origin: 50% 100%; animation: k-grow-y .6s cubic-bezier(.3,.8,.3,1.1) 240ms; }
.card[data-k="home"]:hover .ca svg > :nth-child(7) { transform-origin: 50% 100%; animation: k-grow-y .6s cubic-bezier(.3,.8,.3,1.1) 330ms; }
.card[data-k="home"]:hover .ca svg > :nth-child(8) { transform-origin: 50% 100%; animation: k-grow-y .6s cubic-bezier(.3,.8,.3,1.1) 420ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(1) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 0ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(2) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 0ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(3) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 140ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(4) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 140ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(5) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 280ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(6) { animation: k-bounce .55s cubic-bezier(.3,.7,.3,1) 280ms; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(8) { animation: k-twinkle .7s ease .45s; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(9) { transform-origin: 0% 50%; animation: k-grow-x .5s ease .5s; }
.card[data-k="inbox"]:hover .ca svg > :nth-child(10) { transform-origin: 0% 50%; animation: k-grow-x .45s ease .75s; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(1) { translate: -3px -6px; rotate: -5deg; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(2) { translate: -1px -3px; rotate: -2.5deg; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(6) { transform-origin: 50% 100%; animation: k-grow-y .5s cubic-bezier(.3,.8,.3,1.1) 120ms; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(7) { transform-origin: 50% 100%; animation: k-grow-y .5s cubic-bezier(.3,.8,.3,1.1) 200ms; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(8) { transform-origin: 50% 100%; animation: k-grow-y .5s cubic-bezier(.3,.8,.3,1.1) 280ms; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(9) { transform-origin: 0% 50%; animation: k-grow-x .45s ease .2s; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(10) { transform-origin: 0% 50%; animation: k-grow-x .4s ease .35s; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(11) { animation: k-pop .5s ease .5s; }
.card[data-k="tickets"]:hover .ca svg > :nth-child(12) { animation: k-pop .5s ease .5s; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(1) { animation: k-pop .45s ease 0ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(2) { animation: k-pop .45s ease 0ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(3) { animation: k-pop .45s ease 70ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(4) { animation: k-pop .45s ease 70ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(5) { animation: k-pop .45s ease 140ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(6) { animation: k-pop .45s ease 140ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(7) { animation: k-pop .45s ease 210ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(8) { animation: k-pop .45s ease 210ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(9) { animation: k-pop .45s ease 280ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(10) { animation: k-pop .45s ease 280ms; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(11) { animation: k-ripple .8s ease .3s; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(12) { animation: k-pop .5s ease .35s; }
.card[data-k="contacts"]:hover .ca svg > :nth-child(13) { animation: k-pop .5s ease .35s; }
.card[data-k="technicians"]:hover .ca svg > :nth-child(2) { animation: k-blink .7s ease; }
.card[data-k="technicians"]:hover .ca svg > :nth-child(3) { animation: k-ripple .8s ease .15s; }
.card[data-k="technicians"]:hover .ca svg > :nth-child(5) { stroke-dasharray: 60; animation: k-draw .5s ease .25s; }
.card[data-k="technicians"]:hover .ca svg > :nth-child(7) { animation: k-wiggle .7s ease .3s; }
.card[data-k="technicians"]:hover .ca svg > :nth-child(9) { transform-origin: 0% 50%; animation: k-grow-x .7s cubic-bezier(.3,.8,.2,1) .2s; }
.card[data-k="intake"]:hover .ca svg > :nth-child(1) { animation: k-ripple 1s ease .1s; }
.card[data-k="intake"]:hover .ca svg > :nth-child(2) { animation: k-ripple 1s ease; }
.card[data-k="intake"]:hover .ca svg > :nth-child(4) { animation: k-twinkle .8s ease .2s; }
.card[data-k="intake"]:hover .ca svg > :nth-child(5) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 0ms; }
.card[data-k="intake"]:hover .ca svg > :nth-child(6) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 0ms; }
.card[data-k="intake"]:hover .ca svg > :nth-child(7) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 80ms; }
.card[data-k="intake"]:hover .ca svg > :nth-child(8) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 80ms; }
.card[data-k="intake"]:hover .ca svg > :nth-child(9) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 160ms; }
.card[data-k="intake"]:hover .ca svg > :nth-child(10) { transform-box: view-box; transform-origin: 80px 60px; animation: k-orbit 1s cubic-bezier(.4,.1,.2,1) 160ms; }
.card[data-k="dispatcher"]:hover .ca svg > :nth-child(3) { transform-box: view-box; transform-origin: 52px 66px; animation: k-sweep 1.6s linear infinite; }
.card[data-k="dispatcher"]:hover .ca svg > :nth-child(4) { animation: k-march .8s linear infinite; }
.card[data-k="dispatcher"]:hover .ca svg > :nth-child(8) { animation: k-pulse .8s ease .2s; }
.card[data-k="dispatcher"]:hover .ca svg > :nth-child(10) { animation: k-bounce .6s cubic-bezier(.3,.7,.3,1); }
.card[data-k="dispatcher"]:hover .ca svg > :nth-child(11) { animation: k-bounce .6s cubic-bezier(.3,.7,.3,1); }
.card[data-k="settings"]:hover .ca svg > :nth-child(2) { transform-origin: 0% 50%; animation: k-fill-a 1.1s ease-in-out; }
.card[data-k="settings"]:hover .ca svg > :nth-child(3) { animation: k-slide-a 1.1s ease-in-out; }
.card[data-k="settings"]:hover .ca svg > :nth-child(5) { transform-origin: 0% 50%; animation: k-fill-b 1.1s ease-in-out .12s; }
.card[data-k="settings"]:hover .ca svg > :nth-child(6) { animation: k-slide-b 1.1s ease-in-out .12s; }
.card[data-k="settings"]:hover .ca svg > :nth-child(8) { transform-origin: 0% 50%; animation: k-fill-c 1.1s ease-in-out .24s; }
.card[data-k="settings"]:hover .ca svg > :nth-child(9) { animation: k-slide-c 1.1s ease-in-out .24s; }
.card[data-k="faq"]:hover .ca svg > :nth-child(1) { transform-box: view-box; transform-origin: 80px 60px; animation: k-quarter .8s cubic-bezier(.5,0,.2,1); }
.card[data-k="faq"]:hover .ca svg > :nth-child(2) { transform-box: view-box; transform-origin: 80px 60px; animation: k-quarter .8s cubic-bezier(.5,0,.2,1); }
.card[data-k="faq"]:hover .ca svg > :nth-child(3) { transform-box: view-box; transform-origin: 80px 60px; animation: k-quarter .8s cubic-bezier(.5,0,.2,1); }
.card[data-k="faq"]:hover .ca svg > :nth-child(4) { transform-box: view-box; transform-origin: 80px 60px; animation: k-quarter .8s cubic-bezier(.5,0,.2,1); }
.card[data-k="faq"]:hover .ca svg > :nth-child(6) { animation: k-wobble .8s ease .3s; }
/* Coordinator: the job moves down the track, each stage lights up in turn and its rule is written out,
   the stage in hand nudges forward while its wait clock turns, the done tick draws in, and Atom's badge twinkles. */
@keyframes k-nudge { 50% { translate: 6px 0; } }
@keyframes k-tick { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(1) { animation: k-march .8s linear infinite; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(3) { transform-origin: 0% 50%; animation: k-grow-x .45s ease .1s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(4) { transform-origin: 0% 50%; animation: k-grow-x .4s ease .18s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(5) { animation: k-nudge .8s cubic-bezier(.3,.7,.3,1) .25s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(6) { transform-origin: 0% 50%; animation: k-nudge .8s cubic-bezier(.3,.7,.3,1) .25s, k-grow-x .45s ease .3s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(7) { transform-origin: 0% 50%; animation: k-nudge .8s cubic-bezier(.3,.7,.3,1) .25s, k-grow-x .4s ease .38s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(9) { transform-origin: 0% 50%; animation: k-grow-x .45s ease .5s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(10) { transform-origin: 0% 50%; animation: k-grow-x .4s ease .58s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(11) { animation: k-pop .45s ease 0ms; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(12) { animation: k-pop .45s ease 0ms; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(13) { animation: k-pop .45s ease .2s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(14) { animation: k-pop .45s ease .2s, k-wiggle .6s ease .45s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(15) { animation: k-pop .45s ease .4s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(16) { stroke-dasharray: 44; animation: k-tick .45s ease .5s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(18) { transform-box: view-box; transform-origin: 38px 49px; animation: k-sweep .9s cubic-bezier(.4,.1,.2,1) .25s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(19) { animation: k-pulse .7s ease .3s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(20) { animation: k-twinkle .8s ease .3s; }
.card[data-k="coordinator"]:hover .ca svg > :nth-child(21) { animation: k-twinkle .7s ease .6s; }
/* its rule cards are white on a light panel; on a dark panel (the chapter header) they turn to a soft glass */
.dark .ca .cw, .ch-art.dark .cw { fill: #fff; opacity: .14; }
.dark .ca .ck, .ch-art.dark .ck { fill: var(--tint); } .dark .ca .ckh, .ch-art.dark .ckh { stroke: var(--deep); }
@media (prefers-reduced-motion: reduce) { .card:hover .ca svg > * { animation: none !important; } }
.card[data-k="tickets"] .ca svg > :nth-child(-n+2) { transition: translate .5s cubic-bezier(.3,.8,.3,1.2), rotate .5s cubic-bezier(.3,.8,.3,1.2); }
/* empty panel: a faint pattern of shapes and the Helpdesk / Dispatcher marks, fading out above the suggestions */
.ga-body { position: relative; }
.ga-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .055; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .9) 45%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .9) 45%, transparent 82%); }
html[data-mode="dark"] .ga-pattern { opacity: .085; }
.ga-sugs { position: relative; }
/* UI-label badges: a little more height so the text doesn't feel squeezed */
.prose code, .callout code, body.chapter .callout code, figcaption code, .ga-msg code { padding: 3px 11px 4px; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ga-pattern { color: var(--ink); opacity: .06; }
html[data-mode="dark"] .ga-pattern { opacity: .07; }
/* dark mode: the accent word in chapter titles is lifted towards white so every tone (navy included) stays readable */
html[data-mode="dark"] .chead2 h1 em { color: color-mix(in srgb, var(--mid) 55%, #fff); }
html[data-mode="dark"] .page2[style*="--mid:#23357E"] .chead2 h1 em { color: #8EA2FF; }

/* @zoom: a close-up of one widget, centred on a soft stage so readers can match it to the screen */
figure.shot.zoom { margin: 16px 0 28px; }
figure.shot.zoom .frame { display: grid; place-items: center; padding: 28px; border-radius: 18px; background: color-mix(in srgb, var(--tint, #D9DFFF) 45%, #fff); }
figure.shot.zoom .frame img { width: min(100%, var(--w)); height: auto; aspect-ratio: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(17, 18, 22, .06), 0 14px 36px -16px rgba(11, 22, 64, .35); }
html[data-mode="dark"] figure.shot.zoom .frame { background: color-mix(in srgb, var(--mid, #6E86FF) 12%, #14171D); }
@media (max-width: 760px) { figure.shot.zoom .frame { padding: 14px; } }

/* Coming-soon card: shown, but quiet and not clickable */
.card.soon { cursor: default; pointer-events: none; }
.card.soon .cv { filter: grayscale(.85); opacity: .55; }
.card.soon .ct, .card.soon .cd { opacity: .55; }
.card.soon .pill { border-style: dashed; color: var(--muted); }
.card.soon .cn { font-style: normal; color: var(--muted); }
html[data-mode="dark"] .card.soon .cv { opacity: .45; }

/* ══ Tablet and phone ══ */
@media (max-width: 1100px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .top .pos { display: none; }
  .top .right { gap: 10px; }
}
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr !important; gap: 18px; }
  .intro-r p { max-width: 640px; }
}
@media (max-width: 760px) {
  :root { --header: 108px; }
  /* header: brand + icon buttons on the first row, search on its own row underneath */
  .top { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 54px 44px; height: auto; row-gap: 0; padding-top: 2px; padding-bottom: 10px; }
  .top .brand { min-width: 0; }
  .brand span { display: inline-flex !important; font-size: 14px; padding-left: 10px; }
  .brand img { height: 13px; }
  .top .search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
  .top .right { gap: 8px; }
  .chapters-btn { padding: 0 11px; height: 38px; }
  .chapters-btn span { display: none; }
  .ga-top { width: 38px; height: 38px; padding: 0; margin-left: 9px; }
  .ga-top span { display: none; }
  .ga-top::before { left: -9px; height: 20px; }
  /* overview */
  .intro { padding-top: 28px; }
  .intro h1.kwh { font-size: clamp(30px, 9vw, 38px); }
  /* chapter pages */
  .chead2 .ch-text { padding: 22px 20px 20px; }
  .chead2 .ch-stats { flex-wrap: wrap; row-gap: 6px; }
  .prose h2 { font-size: 26px; }
  .prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose ol.steps li { grid-template-columns: 30px minmax(0, 1fr); }
  figure.shot { margin-left: 0; margin-right: 0; }
  .pager { grid-template-columns: 1fr; }
  /* panels */
  .ov-in { padding: 20px 16px 28px; border-radius: 16px; }
  .ga-panel { width: 100vw !important; }
}
/* tablet: banner keeps its artwork as a narrow panel on the right */
@media (min-width: 761px) and (max-width: 1100px) {
  .chead2 { grid-template-columns: minmax(0, 1fr) 200px !important; }
  .ch-art.dark { order: 0; min-height: 0; }
  .ch-art.dark .ca { width: 70%; }
}
/* phone: artwork becomes a short strip above the text */
@media (max-width: 760px) {
  .ch-art.dark { min-height: 120px; max-height: 140px; }
  .ch-art.dark .ca { width: 34%; max-width: 130px; }
}
/* never let wide content (tables, code) stretch the page: columns may shrink, wide blocks scroll inside themselves */
.page2, .body2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1101px) { .page2 { grid-template-columns: 236px minmax(0, 1fr); } }
@media (min-width: 1241px) { .body2 { grid-template-columns: minmax(0, 1fr) 220px; } html.ga-docked .body2 { grid-template-columns: minmax(0, 1fr); } }
.doc2, .prose, .body2 > * { min-width: 0; }
.prose .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 760px) { .prose .table-wrap table { min-width: 560px; } .prose .table-wrap::after { content: ""; } }
/* centred text column: fill the grid cell (capped at 760px) instead of shrink-wrapping to its widest table */
.body2 .prose { width: 100%; margin: 0; justify-self: center; }
@media (min-width: 1241px) { .body2 .prose { justify-self: start; } html.ga-docked .body2 .prose { justify-self: center; } }
.card[data-k="feedback"]:hover .ca svg > :nth-child(3) { animation: k-pop .45s ease 0ms; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(4) { animation: k-pop .45s ease 90ms; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(5) { animation: k-pop .45s ease 180ms; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(6) { animation: k-pop .45s ease 270ms; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(7) { animation: k-pop .45s ease 360ms; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(n+9) { animation: k-bounce .6s cubic-bezier(.3,.7,.3,1) .45s; }
.card[data-k="feedback"]:hover .ca svg > :nth-child(8) { transform-origin: 0% 50%; animation: k-grow-x .5s ease .2s; }
/* Feedback art inside the dark chapter banner: white bubble, chapter-coloured stars */
.ch-art.dark svg:has(rect.w[width="108"]) rect.w, .ch-art.dark svg:has(rect.w[width="108"]) path.w { fill: #fff; }
.ch-art.dark svg:has(rect.w[width="108"]) path.m { fill: var(--mid); }
.ch-art.dark svg:has(rect.w[width="108"]) path.l, .ch-art.dark svg:has(rect.w[width="108"]) rect.l { fill: var(--mid); opacity: .3; }
.ch-art.dark svg:has(rect.w[width="108"]) circle.d { fill: var(--tint); }
.ch-art.dark svg:has(rect.w[width="108"]) circle.w { fill: var(--deep); }
.ch-art.dark svg:has(rect.w[width="108"]) path.sw { stroke: var(--deep); }
/* Download .md button in the chapter banner */
.chead2 .dl-md { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 7px 14px 7px 11px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 1px var(--rule); transition: box-shadow .15s, color .15s; }
.chead2 .dl-md svg { width: 16px; height: 16px; }
.chead2 .dl-md:hover { color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
html[data-mode="dark"] .chead2 .dl-md { background: rgba(255, 255, 255, .06); }

/* ══ Metrics (owner only) ══ */
.mx-link { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); }
.mx-link svg { width: 17px; height: 17px; }
.mx-link:hover { color: var(--accent); }
@media (max-width: 1100px) { .mx-link span { display: none; } .mx-link { padding: 0 10px; } }
html.ga-docked .mx-link { display: none; }
.mx-page { max-width: 1180px; margin: 0 auto; padding: 40px var(--pad) 80px; }
.mx-head .label { color: var(--accent); }
.mx-head h1 { margin: 10px 0 6px; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.035em; color: var(--ink); }
.mx-head p { margin: 0 0 28px; color: var(--muted); }
.mx-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mx-card { padding: 18px 18px 16px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.mx-card b { display: block; font-size: 30px; letter-spacing: -.03em; color: var(--ink); }
.mx-card span { font-size: 13px; color: var(--muted); }
.mx-sec { margin-top: 28px; }
.mx-sec h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.mx-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 8px; align-items: end; height: 150px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.mx-day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.mx-day i { width: 100%; max-width: 28px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.mx-day span { font-size: 11px; color: var(--muted); }
.mx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; }
.mx-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.mx-bar .t { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-bar .b { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.mx-bar .b i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.mx-bar .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-table-wrap { overflow-x: auto; }
.mx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mx-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.mx-table td { padding: 10px; border-bottom: 1px solid var(--rule); color: var(--body); }
.mx-table td em { font-style: normal; color: var(--muted); }
.mx-note, .mx-foot { color: var(--muted); font-size: 13.5px; }
.mx-foot { margin-top: 28px; }
@media (max-width: 900px) { .mx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mx-two { grid-template-columns: 1fr; } }
.mx-link { width: 38px; padding: 0; justify-content: center; }
.mx-link span { display: none; }
.ga-top, .ga-top span, .chapters-btn span { white-space: nowrap; }
/* Download .md sits at the right end of the banner's top row */
.ch-stats { align-items: center; }
.ch-stats .dl-md { grid-column: auto; margin: 0 0 0 16px; padding: 6px 13px 6px 10px; font-size: 13px; border-left: 0; }
.ch-stats .dl-md span { display: inline; padding: 0; border: 0; font-size: inherit; color: inherit; }
.ch-stats .dl-md svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .ch-stats { flex-wrap: wrap; row-gap: 12px; } .ch-stats .dl-md { margin-left: 0; order: 5; } .ch-stats .dl-md::before { content: none; } }
@media (max-width: 760px) { .ch-stats .dl-md { flex-basis: 100%; justify-content: center; margin-top: 8px; padding: 11px 16px; font-size: 14px; } }
/* Download .md: outlined in the chapter colour, icon in a tinted circle (stands out without being a primary button) */
.chead2 .dl-md, .ch-stats .dl-md { gap: 8px; padding: 4px 14px 4px 4px; background: #fff; color: var(--deep, var(--accent)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--deep, var(--accent)) 55%, transparent); font-weight: 600; }
.chead2 .dl-md svg { box-sizing: content-box; width: 14px; height: 14px; padding: 6px; border-radius: 50%; background: color-mix(in srgb, var(--mid, var(--accent)) 16%, #fff); color: var(--deep, var(--accent)); transition: background .15s, color .15s; }
.chead2 .dl-md:hover { box-shadow: inset 0 0 0 1.5px var(--deep, var(--accent)); color: var(--deep, var(--accent)); }
.chead2 .dl-md:hover svg { background: var(--deep, var(--accent)); color: #fff; }
html[data-mode="dark"] .chead2 .dl-md { background: rgba(255, 255, 255, .04); color: color-mix(in srgb, var(--mid) 55%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mid) 60%, transparent); }
html[data-mode="dark"] .chead2 .dl-md svg { background: color-mix(in srgb, var(--mid) 30%, transparent); color: #fff; }
@media (max-width: 760px) { .ch-stats .dl-md { padding: 6px 16px 6px 6px; } }
/* Navy chapters in dark mode: navy outline vanishes on the dark banner — use the lifted periwinkle instead */
html[data-mode="dark"] .page2[style*="--mid:#23357E"] .chead2 .dl-md { color: #A9B8FF; box-shadow: inset 0 0 0 1.5px rgba(142, 162, 255, .7); }
html[data-mode="dark"] .page2[style*="--mid:#23357E"] .chead2 .dl-md svg { background: rgba(142, 162, 255, .22); }
html[data-mode="dark"] .page2[style*="--mid:#23357E"] .chead2 .dl-md:hover { box-shadow: inset 0 0 0 1.5px #8EA2FF; }
html[data-mode="dark"] .page2[style*="--mid:#23357E"] .chead2 .dl-md:hover svg { background: #8EA2FF; color: #0B1640; }

/* ── Chapter pages: warm grey page, white cards (matches the features site) ── */
body.chapter { --paper-warm: #F4F4F2; background: var(--paper-warm); }
body.chapter .top { background: color-mix(in srgb, #F4F4F2 86%, transparent); }
body.chapter .chead2 { background: #FFFFFF; box-shadow: none; border-radius: 16px; }
body.chapter .body2 .prose > .sec-card { background: #FFFFFF; border-radius: 16px; padding: 8px 40px 40px; margin-top: 14px; scroll-margin-top: calc(var(--header) + 16px); }
body.chapter .body2 .prose > .sec-card:first-child { margin-top: 0; }
body.chapter .body2 .prose > .sec-card > h2:first-child { margin-top: 32px; }
body.chapter .body2 .prose > .sec-card > :last-child { margin-bottom: 0; }
body.chapter .body2 { margin-top: 14px; }
body.chapter .body2 .prose figure.wide { margin-left: 0; margin-right: 0; }
body.chapter figure.shot .frame { background: #F4F4F2; }
body.chapter .callout, body.chapter .callout.note { background: color-mix(in srgb, var(--tint) 40%, #F4F4F2); }
body.chapter .rail-in.has-pill .pill-hl, body.chapter .otp .toc.has-pill .pill-hl { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(17, 18, 22, .06); }
body.chapter .pager a { background: #FFFFFF; border-color: transparent; }
html[data-mode="dark"] body.chapter { background: #1C1E23; }
html[data-mode="dark"] body.chapter .top { background: color-mix(in srgb, #1C1E23 86%, transparent); }
html[data-mode="dark"] body.chapter .chead2, html[data-mode="dark"] body.chapter .body2 .prose > .sec-card, html[data-mode="dark"] body.chapter .pager a { background: #25282F; }
html[data-mode="dark"] body.chapter figure.shot .frame { background: #1C1E23; }
html[data-mode="dark"] body.chapter .callout, html[data-mode="dark"] body.chapter .callout.note { background: color-mix(in srgb, var(--mid) 12%, #1C1E23); }
html[data-mode="dark"] body.chapter .rail-in.has-pill .pill-hl, html[data-mode="dark"] body.chapter .otp .toc.has-pill .pill-hl { background: #25282F; box-shadow: none; }
@media (max-width: 760px) { body.chapter .body2 .prose > .sec-card { padding: 4px 18px 24px; border-radius: 14px; } body.chapter .body2 .prose > .sec-card > h2:first-child { margin-top: 22px; } }
body.chapter .body2 .prose { max-width: none; width: 100%; margin: 0; justify-self: stretch; }
body.chapter .pager { margin-top: 14px; gap: 14px; }
body.chapter .pager a { padding: 22px 26px; border: 0; border-radius: 16px; transition: box-shadow .2s, transform .2s; }
body.chapter .pager a:hover { box-shadow: 0 0 0 1px rgba(17, 18, 22, .08), 0 10px 26px rgba(17, 18, 22, .07); transform: translateY(-1px); }
html[data-mode="dark"] body.chapter .pager a:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .3); }
/* Rail/TOC pills: draw the hairline inside the box so the scrolling rail doesn't clip its left edge */
body.chapter .rail-in.has-pill .pill-hl, body.chapter .otp .toc.has-pill .pill-hl { box-shadow: inset 0 0 0 1px rgba(17, 18, 22, .07); }
html[data-mode="dark"] body.chapter .rail-in.has-pill .pill-hl, html[data-mode="dark"] body.chapter .otp .toc.has-pill .pill-hl { box-shadow: none; }
body.chapter .rail .back, body.chapter .rail-in.has-pill .back { box-shadow: inset 0 0 0 1px rgba(17, 18, 22, .07); }
html[data-mode="dark"] body.chapter .rail .back, html[data-mode="dark"] body.chapter .rail-in.has-pill .back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ── Home page: same warm grey page + white cards as the chapter pages ── */
body.home { background: #F4F4F2; }
body.home .top { background: color-mix(in srgb, #F4F4F2 86%, transparent); }
body.home .card { background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: none; }
body.home .card:hover { box-shadow: 0 0 0 1px rgba(17, 18, 22, .06), 0 18px 40px rgba(17, 18, 22, .09); }
html[data-mode="dark"] body.home { background: #1C1E23; }
html[data-mode="dark"] body.home .top { background: color-mix(in srgb, #1C1E23 86%, transparent); }
html[data-mode="dark"] body.home .card { background: #25282F; }
html[data-mode="dark"] body.home .card:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px rgba(0, 0, 0, .35); }
/* Ask Atom: the chat keeps its own scroll — it never hands off to the page behind it */
.ga-panel, .ga-body, .ga-form textarea { overscroll-behavior: contain; }
@media (max-width: 760px) { html.ga-docked, html.ga-docked body { overflow: hidden; } }
/* Search on the warm grey header: a white field with a hairline, like the other header controls */
body.chapter .top .search, body.home .top .search { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(17, 18, 22, .1); }
body.chapter .top .search:focus-within, body.home .top .search:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(0, 36, 214, .1); }
html[data-mode="dark"] body.chapter .top .search, html[data-mode="dark"] body.home .top .search { background: #25282F; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-mode="dark"] body.chapter .top .search:focus-within, html[data-mode="dark"] body.home .top .search:focus-within { box-shadow: inset 0 0 0 1px #8EA2FF, 0 0 0 3px rgba(142, 162, 255, .15); }

/* Work Coordination: the product name is longer than "Helpdesk", so on phones its keyword may wrap instead of overflowing */
@media (max-width: 760px) { .intro h1.kwh .kw-b { white-space: normal; } }