:root{
  --bg:#ffffff;--bg-soft:#f7f6f3;--text:#37352f;--muted:var(--text);--line:#e9e9e7;--link:#1929c4;
  --peach:#fbecdd;--blue:#e7f3f8;--pink:#f9e8ef;--yellow:#fbf3db;--green:#e8f1ec;--gray:#f1f1ef;--quote:#d44c47;
  --chip:#e9e5f2;--chip-t:#4b3c63;--shadow:0 1px 2px rgba(15,15,15,.06);--marker:#38222c;--arrow:#b83d80;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --spring:ease-out;--soft:ease-out;
  --top:56px;--cover-h:125px;--side:280px;--toc:220px;--measure:760px;--shell:1340px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#191919;--bg-soft:#202020;--text:#e6e6e4;--muted:var(--text);--line:#2f2f2f;--link:#7fb8e6;
  --peach:#3a2a1f;--blue:#1c2c37;--pink:#38222c;--yellow:#3a321d;--green:#1f2f27;--gray:#252525;--quote:#e06c66;
  --chip:#2f2a3a;--chip-t:#d6cdea;--shadow:none;--marker:#f3cfdc;--arrow:#f08cc0;color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#191919;--bg-soft:#202020;--text:#e6e6e4;--muted:var(--text);--line:#2f2f2f;--link:#7fb8e6;
  --peach:#3a2a1f;--blue:#1c2c37;--pink:#38222c;--yellow:#3a321d;--green:#1f2f27;--gray:#252525;--quote:#e06c66;
  --chip:#2f2a3a;--chip-t:#d6cdea;--shadow:none;--marker:#f3cfdc;--arrow:#f08cc0;color-scheme:dark;}
@supports (transition-timing-function:linear(0, 1)){:root{
  --spring:linear(0, 0.042, 0.145, 0.282, 0.432, 0.579, 0.712, 0.825, 0.916, 0.985, 1.033, 1.063, 1.079, 1.084, 1.08, 1.072, 1.06, 1.048, 1.035, 1.024, 1.015, 1.007, 1.001, 0.997, 0.995, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 1);  /* damped spring, ~8% overshoot */
  --soft:linear(0, 0.029, 0.099, 0.189, 0.285, 0.381, 0.471, 0.552, 0.624, 0.687, 0.741, 0.787, 0.825, 0.857, 0.884, 0.906, 0.924, 0.939, 0.951, 0.96, 0.968, 0.975, 0.98, 0.984, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.997, 1);}}  /* critically damped spring, no overshoot */
*{box-sizing:border-box;--ch-sel:var(--ch-sel-l);--ch-hov:var(--ch-hov-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) *{--ch-sel:var(--ch-sel-d);--ch-hov:var(--ch-hov-d)}}
:root[data-theme="dark"] *{--ch-sel:var(--ch-sel-d);--ch-hov:var(--ch-hov-d)}
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}@view-transition{navigation:auto}}
.top{view-transition-name:top}.sidebar{view-transition-name:sidebar}
body>.cover{view-transition-name:cover}.cover .cv-1{view-transition-name:cv-ch}.cover .cv-2{view-transition-name:cv-sub}
/* page content: the old page leaves quickly, the new one fades in; chrome and banner stay put */
::view-transition-group(sidebar),::view-transition-new(sidebar){animation:none}::view-transition-old(sidebar){animation:none;opacity:0}
::view-transition-old(root){animation:.12s ease-out both bb-fade-out}
::view-transition-new(root){animation:.22s ease-out .06s both bb-fade-in}
@keyframes bb-fade-out{to{opacity:0}}@keyframes bb-fade-in{from{opacity:0}}
/* banner: chapter line shrinks upward, subcategory line grows in under it (and the reverse) */
::view-transition-group(cv-ch),::view-transition-group(cv-sub){animation-duration:.55s;animation-timing-function:var(--soft)}
::view-transition-old(cv-ch),::view-transition-new(cv-ch),::view-transition-old(cv-sub),::view-transition-new(cv-sub){animation-duration:.55s;height:100%}
::view-transition-new(cv-sub):only-child{animation:.55s var(--spring) both bb-sub-in}
::view-transition-old(cv-sub):only-child{animation:.3s ease-out both bb-sub-out}
@keyframes bb-sub-in{from{opacity:0;transform:translateY(60%) scale(.55)}}
@keyframes bb-sub-out{to{opacity:0;transform:translateY(60%) scale(.55)}}
.preload *{transition:none!important}
/* anchors clear the sticky header and banner; set on targets (not as scroll-padding) so typing in the header search never scrolls the page */
[id]{scroll-margin-top:calc(var(--top) + var(--cover-h,0px) + 16px)}
.search input{scroll-margin:0}
body{margin:0;background:var(--bg);color:var(--text);font:500 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.mono,code,kbd{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:8px 12px;border-radius:6px;z-index:100}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
/* targets that only scripts focus (a heading after an in-page link, main after the skip link) are not controls: no ring */
[tabindex="-1"]:focus{outline:none}

/* top bar */
.top{position:sticky;top:0;z-index:30;height:var(--top);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* header content sits on the same 1440px grid as the page: menu button over the sidebar, theme button over the toc */
.top-in{height:100%;max-width:var(--shell);margin:0 auto;display:flex;align-items:center;gap:16px;padding:0 20px}
.brand{color:var(--text);font-weight:650;letter-spacing:-.01em;white-space:nowrap}.brand:hover{text-decoration:none}
.brand-m{display:none;flex:none;place-items:center;width:36px;height:36px;border-radius:8px;color:var(--text)}.brand-m .hm-mark{width:24px}
.search{position:relative;margin-left:auto;width:min(420px,45vw)}
.search input{width:100%;height:36px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);border-radius:8px;padding:0 36px 0 34px;font:inherit;font-size:14px}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus,.search input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--text) 35%,var(--bg));box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent)}
.search input::placeholder{color:var(--ph,#6b6b6b);opacity:1}  /* the one grey text on the site */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .search input{--ph:#9b9b99}}:root[data-theme="dark"] .search input{--ph:#9b9b99}
.search-ic{position:absolute;left:10px;top:9px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.search-ic.pop{animation:bb-pop .55s var(--spring)}
@keyframes bb-pop{35%{transform:scale(1.3)}}
/* "/" focuses search from anywhere; the hint is plain text and hides while typing */
.search kbd{position:absolute;right:12px;top:8px;font-size:13px;color:var(--ph,#6b6b6b);line-height:20px;pointer-events:none;transition:opacity .2s var(--soft)}
.search:focus-within kbd,.search.has-val kbd{opacity:0}
/* clear button in the "/" slot, only while the field has text; the look is .r-x, the hit area is the field height */
.search-x{position:absolute;z-index:0;top:0;right:0;width:36px;height:36px;display:none;padding:0;border:0;background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer}
.search.has-val .search-x{display:block}
.search-x::before{content:"";position:absolute;z-index:-1;inset:5px;border-radius:6px}
.search-x:hover::before{background:var(--bg)}
.results{position:absolute;top:42px;left:0;right:0;max-height:70vh;overflow:auto;overscroll-behavior:contain;margin:0;padding:8px;list-style:none;display:grid;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.results li a{display:block;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);line-height:1.35}
.results li a:hover,.results li[aria-selected="true"] a{background:var(--ch-hov,var(--bg));border-color:var(--ch-sel,var(--line));text-decoration:none}
.results .r-id{font-family:var(--mono);font-size:12px;color:var(--muted);margin-right:8px}
.results .r-t{font-weight:650}.results .r-b{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.results mark{background:var(--ch-sel,var(--yellow));color:inherit;border-radius:3px;padding:0 1px}
.results .r-empty{padding:10px;color:var(--muted)}
/* a link inside a sentence row is a text link, not a result card */
.results .r-empty a,.results .r-empty a:hover{display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--link)}.results .r-empty a:hover{text-decoration:underline}
/* the suggestion has no chapter tint, so its hover and selection show on the border */
.results .r-fix a:hover,.results .r-fix[aria-selected="true"] a{border-color:var(--link)}
.results[hidden]{display:none}
.results{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
.results.is-scrolling{scrollbar-color:color-mix(in srgb,var(--text) 40%,transparent) transparent}
.results::-webkit-scrollbar{width:8px}.results::-webkit-scrollbar-track{background:transparent}.results::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
.results.is-scrolling::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 40%,transparent)}
.results li{position:relative}
.results .r-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 0;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.results .r-q{display:block;margin-top:4px;font-size:12px;font-family:var(--mono)}
.results .r-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer}
.results .r-x:hover{background:var(--bg-soft)}
.results .r-hist a{padding-right:38px}
.results .r-clear{font:inherit;font-size:12px;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;justify-self:start}
.results .r-clear:hover{background:var(--bg)}
.theme-btn,.menu-btn{flex:none;width:36px;height:36px;border:0;background:transparent;color:var(--text);border-radius:8px;cursor:pointer;font-size:16px}
.theme-btn span{display:inline-block}.theme-btn .moon{display:none}
.theme-btn.turn span{animation:bb-turn .6s var(--spring)}
@keyframes bb-turn{from{transform:rotate(-120deg) scale(.5);opacity:0}}
:root[data-theme="dark"] .theme-btn .sun{display:none}:root[data-theme="dark"] .theme-btn .moon{display:inline-block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:inline-block}}
.menu-btn{display:grid;place-items:center;padding:0}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ic-panel .col{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:left center;transition:transform .5s var(--spring),opacity .3s var(--soft)}
.ic-burger{display:none}.ic-burger path{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--spring),opacity .2s var(--soft)}
/* shown: filled column; hidden: empty column that slides out on hover as a preview */
.side-hidden .ic-panel .col{transform:scaleX(0);opacity:0}
.side-hidden .menu-btn:hover .ic-panel .col{transform:none;opacity:1}

/* shell */
.shell{--side-w:var(--side);display:grid;grid-template-columns:var(--side-w) minmax(0,1fr) var(--toc);max-width:var(--shell);margin:0 auto;overflow-x:clip;transition:grid-template-columns .45s var(--soft)}
.sidebar{width:var(--side);transition:transform .45s var(--soft),opacity .3s var(--soft),visibility 0s}
@media (min-width:861px){.side-hidden .shell{--side-w:0px}.side-hidden .sidebar{transform:translateX(-100%);opacity:0;visibility:hidden;transition:transform .45s var(--soft),opacity .3s var(--soft),visibility 0s .45s}}
.sidebar{position:sticky;top:calc(var(--top) + var(--cover-h));height:calc(100vh - var(--top) - var(--cover-h));overflow:auto;scrollbar-gutter:stable;padding:36px 12px 40px 20px;font-size:14px;scrollbar-width:thin;scrollbar-color:transparent transparent}
.sidebar.is-scrolling{scrollbar-color:color-mix(in srgb,var(--text) 40%,transparent) transparent}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
.sidebar.is-scrolling::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 40%,transparent)}
.nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.nav-home{display:block;flex:1;padding:6px 8px;border-radius:6px;color:var(--text);font-weight:600}
.nav-toggle{flex:none;display:grid;text-align:center;font:inherit;font-size:12px;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer}
.nav-toggle:hover{background:var(--bg-soft)}
.nav-toggle>span{grid-area:1/1}
.nav-toggle[data-state="collapse"] .l-e,.nav-toggle[data-state="expand"] .l-c{visibility:hidden}
.nav-toggle,.nav-home,.nav-ch-h,.nav-ch li a{transition:background-color .35s var(--soft)}
.nav-home.is-cur,a.nav-home:hover{background:var(--bg-soft);text-decoration:none}
.nav-home.is-cur{cursor:default}
.nav-ch-h{display:flex;align-items:stretch;cursor:pointer;border-radius:6px;font-weight:600}
.nav-ch-t{flex:1;min-width:0;display:flex;gap:6px;align-items:center;padding:6px 0 6px 8px;color:var(--text);border-radius:6px;line-height:1.3}
.nav-ch-n{flex:none;align-self:flex-start}.nav-ch-l{flex:1;min-width:0}.nav-ch-t:hover{text-decoration:none}
.nav-ch-h:has(.nav-ch-t[aria-current]){background:var(--ch-sel)}
.nav-ch-t[aria-current]{font-weight:700}
/* the chevron is the toggle: a button, a 34px strip at the row's end, separate from the title link */
.chev{appearance:none;border:0;margin:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;flex:none;width:34px;display:grid;place-items:center;border-radius:6px;transition:background-color .35s var(--soft)}
.chev::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(-1px) rotate(-45deg);transition:transform .6s var(--spring)}
.chev[aria-expanded="true"]::before{transform:translateY(-1px) rotate(45deg)}
.nav-ch-h:has(a) .chev:hover{background:var(--ch-sel)}
:root{interpolate-size:allow-keywords}
.nav-ch-c{block-size:0;overflow:hidden;transition:block-size .45s var(--soft),content-visibility .45s allow-discrete}
.nav-ch-c:not([hidden]){block-size:auto}
.nav-ch-h:hover,.nav-ch li a:hover{background:var(--ch-hov);color:var(--text);text-decoration:none}
.nav-ch ul{list-style:none;margin:2px 0 8px;padding:0 0 0 16px}
.nav-ch li a,.nav-ch .nav-cur{display:flex;gap:8px;padding:4px 8px;border-radius:6px;color:var(--muted);line-height:1.4}
.nav-ch .nav-cur{cursor:default;background:var(--ch-sel);color:var(--text);font-weight:700}
/* the page's sections under the current item: shown only where "On this page" is hidden (see responsive) */
.nav-sec{display:none;list-style:none;margin:2px 0 4px;padding:0 0 0 12px;font-size:13px}
.nav-ch .nav-sec a.is-active{background:var(--ch-sel);color:var(--text);font-weight:700}
.nav-ch .num{font-family:var(--mono);font-size:12px;min-width:2.4em;color:var(--text);padding-top:1px}
.main{--pad:clamp(16px,3vw,40px);min-width:0;padding:28px var(--pad) 80px}
.main>*{max-width:var(--measure);margin-left:max(0px,calc((100% - var(--measure)) / 2));margin-right:auto;transition:max-width .45s var(--soft),margin-left .45s var(--soft)}
@media (min-width:861px){.side-hidden{--measure:900px}.side-hidden .main>*{margin-left:max(0px,calc(100% - var(--measure)))}}
.toc{position:sticky;top:calc(var(--top) + var(--cover-h));height:calc(100vh - var(--top) - var(--cover-h));overflow:auto;padding:44px 16px 28px;font-size:13px}
.toc-h{margin:0 0 8px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:4px 12px;color:var(--muted);margin-left:-1px;border-left:2px solid transparent}
.toc a{border-radius:0 6px 6px 0;transition:background-color .35s var(--soft)}
.toc a:hover{color:var(--text);text-decoration:none;background:var(--ch-hov,var(--bg-soft))}
.toc:not([style]) a:hover{background:var(--bg-soft)}
.toc a.is-active{color:var(--text);border-left-color:var(--text);font-weight:700}

/* covers */
/* full-width band under the top bar; its content stays within the 1440px layout */
.cover{position:sticky;top:var(--top);z-index:25;height:var(--cover-h);overflow:hidden;background:var(--ch-dark)}
.cover-in{position:relative;height:100%;max-width:var(--shell);margin:0 auto;padding:0 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover-css{background:linear-gradient(color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent),color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent)),var(--ch-dark)}
.cv-1{color:var(--ch-light);font-size:15px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;line-height:1}
.cover-ch .cv-1{margin:0;font-size:24px;letter-spacing:.08em;line-height:1;text-transform:uppercase}
.cv-2{margin:0;color:var(--ch-accent);font-size:30px;font-weight:600;letter-spacing:-.005em;line-height:1}
.cv-n{font-family:var(--mono);font-weight:500}.cv-c{display:none}
.cover-home{background:#1829c4}
/* the 1500x260 Notion composition, scaled by .8 to fit the 1500x200 banner */
.hm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hm-mark{width:49px;overflow:visible;stroke-width:1.25}
.hm-t{color:#fff;font-size:21px;font-weight:500;letter-spacing:.08em;line-height:1;text-transform:uppercase}
/* prev/next arrows at the banner's edges */
/* the link is a tall 80px strip (easy to hit); the visible 40px circle sits 30px from the edge */
/* each arrow's hit area runs from the banner edge to the text column; the 40px circle sits 30px from the edge */
.cv-arr{position:absolute;top:0;bottom:0;z-index:1;display:block;width:max(80px,calc((100% - var(--measure)) / 2));color:var(--ch-accent);opacity:.6;
  transition:opacity .3s var(--soft),background-color .3s var(--soft)}
.cv-arr::before{content:"";position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;transition:background-color .3s var(--soft)}
.cv-arr svg{position:absolute;top:50%;margin-top:-11px}
.cv-prev::before{left:20px}.cv-prev svg{left:29px}.cv-next::before{right:20px}.cv-next svg{right:29px}
/* hover: a soft glow around the arrow (no hard edge), plus the lit circle */
.cv-arr{--glow:color-mix(in srgb,var(--ch-accent) 16%,transparent)}.cover-home .cv-arr{--glow:rgba(255,255,255,.13)}
.cv-arr::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--soft)}
.cv-prev::after{background:radial-gradient(ellipse 260px 110px at 40px 50%,var(--glow),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.cv-next::after{background:radial-gradient(ellipse 260px 110px at calc(100% - 40px) 50%,var(--glow),transparent);-webkit-mask-image:linear-gradient(270deg,transparent,#000 48px);mask-image:linear-gradient(270deg,transparent,#000 48px)}
.cv-arr:hover::after{opacity:1}
.cv-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-prev{left:10px}.cv-next{right:10px}
.cover:hover .cv-arr,.cv-arr:focus-visible{opacity:1}
@media (hover:none){.cv-arr{opacity:1}}
.cv-arr:hover,.cv-arr:focus-visible{text-decoration:none;outline-offset:-4px}
.cv-arr:focus-visible{outline-color:var(--ch-accent)}.cover-home .cv-arr:focus-visible{outline-color:#fff}
.cv-arr:hover::before,.cv-arr:focus-visible::before{background:color-mix(in srgb,var(--ch-accent) 16%,transparent)}
.cover-home .cv-arr{color:#fff}.cover-home .cv-arr:hover::before,.cover-home .cv-arr:focus-visible::before{background:rgba(255,255,255,.14)}

/* page head */
.page-head{position:relative;margin-top:-6px}
.crumbs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 0}
.crumbs{font-size:13px;color:var(--muted);margin:0}
.crumb-cur{color:var(--ph,#6b6b6b)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .crumb-cur{--ph:#9b9b99}}:root[data-theme="dark"] .crumb-cur{--ph:#9b9b99}
.cnav{display:flex;flex:none;height:20px;align-items:center}
.cn{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--text)}
.cn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
a.cn{transition:background-color .25s var(--soft)}a.cn:hover{background:var(--ch-hov);text-decoration:none}
.cn.is-off{opacity:.25}.crumbs .sep{margin:0 6px;color:var(--arrow);font-size:.85em}.crumbs a{color:var(--muted)}
h1,.lede{font-size:clamp(28px,4.2vw,40px);line-height:1.15;letter-spacing:-.02em;margin:40px 0 18px;font-weight:700}
h2{font-size:22px;line-height:1.3;margin:36px 0 12px;letter-spacing:-.01em;font-weight:650;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
h2 .em{font-size:20px}h2 .arrow{color:var(--arrow);font-weight:500}h2 .to{font-weight:650}
section>h2{margin-top:36px}
/* landing cue: the heading a click in "On this page" lands on twitches from the centre of its text;
   with reduced motion a ring flashes round its text instead and fades outward
   (app.js adds .cue once the scroll stops and sets --cue-x, the text box --cue-bx/-by/-bw/-bh, and the colours --cue-l, --cue-d) */
:root{--cue-scale:1.03;--cue-dip:.99;--cue-dur:.3s;--cue-r:12px;--cue-ring-w:3px;--cue-ring-gap:6px;--cue-ring-spread:8px;--cue-ring-dur:.9s;--cue-c:var(--cue-l,var(--link))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cue-c:var(--cue-d,var(--link))}}
:root[data-theme="dark"]{--cue-c:var(--cue-d,var(--link))}
.cue{transform-origin:var(--cue-x,50%) center;animation:bb-cue-twitch var(--cue-dur) ease-in-out}
@keyframes bb-cue-twitch{40%{transform:scale(var(--cue-scale))}75%{transform:scale(var(--cue-dip))}}
/* of .9s: full by 60ms, held to 210ms, then fading while the gap grows by the spread */
@keyframes bb-cue-ring{0%{opacity:0}6.67%{opacity:1}23.33%{opacity:1;inset:calc(var(--cue-by) - var(--cue-ring-gap)) auto auto calc(var(--cue-bx) - var(--cue-ring-gap));width:calc(var(--cue-bw) + 2 * var(--cue-ring-gap));height:calc(var(--cue-bh) + 2 * var(--cue-ring-gap));animation-timing-function:ease-out}
  100%{opacity:0;inset:calc(var(--cue-by) - var(--cue-ring-gap) - var(--cue-ring-spread)) auto auto calc(var(--cue-bx) - var(--cue-ring-gap) - var(--cue-ring-spread));width:calc(var(--cue-bw) + 2 * (var(--cue-ring-gap) + var(--cue-ring-spread)));height:calc(var(--cue-bh) + 2 * (var(--cue-ring-gap) + var(--cue-ring-spread)))}}
@media (prefers-reduced-motion:reduce){
  .cue{position:relative}
  .cue::before{content:"";position:absolute;box-sizing:border-box;inset:calc(var(--cue-by) - var(--cue-ring-gap)) auto auto calc(var(--cue-bx) - var(--cue-ring-gap));width:calc(var(--cue-bw) + 2 * var(--cue-ring-gap));height:calc(var(--cue-bh) + 2 * var(--cue-ring-gap));
    border:var(--cue-ring-w) solid var(--cue-c);border-radius:var(--cue-r);pointer-events:none;opacity:0;animation:bb-cue-ring var(--cue-ring-dur) linear!important}
}

/* blocks */
.q{margin:4px;padding:2px 0 2px 10px;border-left:3px solid var(--quote)}
.q p{margin:0}
.call{border-radius:12px;padding:16px 20px 16px 20px}
.call.has-em{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start}
.call-em{font-size:24px;line-height:25.6px}
.call p{margin:0}.call.lines p+p{margin-top:2px}
.call ol,.call ul{margin:0;padding-left:22px}.call li+li{margin-top:6px}
.call ol li::marker{font-family:var(--mono);font-size:.9em;color:var(--marker);font-weight:600}
.c-peach{background:var(--peach)}.c-blue{background:var(--blue)}.c-pink{background:var(--pink)}
.c-yellow{background:var(--yellow)}.c-green{background:var(--green)}
h3.fa{font-size:15px;margin:16px 0 8px;font-weight:650}
.dirs{display:grid;gap:12px}
.dir{background:#f7f9fb;border-radius:12px;padding:10px 20px 20px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dir:not(.repealed){background:#22282b}}
:root[data-theme="dark"] .dir:not(.repealed){background:#22282b}
.dir:target{box-shadow:0 0 0 2px var(--ring,var(--ch-dark))}
.dir:not(.repealed){cursor:default}
/* hover: the active card comes forward, the others step back (repealed cards stay put) */
/* the "UX directives" heading stays under the banner while its cards scroll */
#directives{--bleed:var(--pad,16px);--fade:rgba(15,23,42,.06);position:sticky;top:calc(var(--top) + var(--cover-h));z-index:5;background:var(--bg);margin:24px calc(-1 * var(--bleed)) 0;padding:12px var(--bleed)}
/* shadow: a soft strip below the heading only, fading out toward both ends */
#directives::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;pointer-events:none;opacity:0;transition:opacity .3s var(--soft);
  background:linear-gradient(var(--fade),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
#directives.is-stuck::after{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #directives{--fade:rgba(0,0,0,.30)}}
:root[data-theme="dark"] #directives{--fade:rgba(0,0,0,.30)}
.dh-mark{display:block;height:0}
/* --dh-h is the measured height of the sticky heading (it wraps on narrow screens) */
.dir{scroll-margin-top:calc(var(--top) + var(--cover-h,0px) + var(--dh-h,56px) + 16px)}
.dir{--dir-shadow:0 12px 28px -10px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.06);transition:transform .5s var(--spring),box-shadow .35s var(--soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dir{--dir-shadow:0 12px 28px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)}}
:root[data-theme="dark"] .dir{--dir-shadow:0 12px 28px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4)}
@media (hover:hover){
  .dirs:has(.dir:not(.repealed):hover) .dir:not(.repealed):not(:hover){transform:scale(.985)}
  .dir:not(.repealed):hover{transform:scale(1.015);box-shadow:var(--dir-shadow);position:relative;z-index:1}
  .dir:target:not(.repealed):hover{box-shadow:0 0 0 2px var(--ring,var(--ch-dark)),var(--dir-shadow)}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dir:target{--ring:var(--ch-accent)}}
:root[data-theme="dark"] .dir:target{--ring:var(--ch-accent)}
.dir-meta{display:flex;align-items:center;gap:2px;font-size:11px}
.chip{background:var(--ch-sel);color:var(--text);padding:1px 6px;border-radius:4px;font-family:var(--mono);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px}
.chip .bul{flex:none;width:3px;height:3px;border-radius:50%;background:currentColor}  /* drawn, so its size does not depend on the font */
.chip.rep{background:transparent;border:1px solid var(--line);color:var(--muted)}
.dir-title{font-size:16px;margin:0;font-weight:650}
.dir-body{margin:0}
.dir.repealed{background:transparent;border:1px dashed var(--line)}
.dir.repealed .dir-body{color:var(--muted);margin:0}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px;padding-top:8px}
.pg{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:10px;color:var(--text);transition:background-color .35s var(--soft),transform .6s var(--spring)}
.pg:not(.empty):hover{text-decoration:none;background:var(--ch-hov);transform:translateY(-4px) scale(1.02)}
.pg.next{text-align:right;align-items:flex-end}
.pg-dir{font-size:12px;color:var(--muted)}
.pg-ar{display:inline-block;transition:transform .5s var(--spring)}
.pg.prev:hover .pg-ar{transform:translateX(-4px)}.pg.next:hover .pg-ar{transform:translateX(4px)}
.pg-t{display:flex;gap:8px;align-items:center;font-weight:600}

/* home */
.hero{padding:16px 0 8px}
.hero-k{margin:0;color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:clamp(32px,5.4vw,52px);margin:28px 0 6px}
.hero-s{font-size:19px;color:var(--muted);margin:0 0 16px}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font-size:14px;color:var(--muted)}
.hero-stats b{color:var(--text);font-family:var(--mono)}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ch-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:6px;row-gap:12px;min-height:170px;padding:16px;border-radius:12px;
  background:linear-gradient(color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent),color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent)),var(--ch-dark);color:var(--ch-light)}
.ch-card{transition:transform .5s var(--spring),box-shadow .35s var(--soft)}
.ch-card:hover{text-decoration:none}
@media (hover:hover){
  .ch-card:hover{transform:scale(1.03);box-shadow:0 14px 30px -10px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.08);position:relative;z-index:1}
}
.ch-card-t{color:var(--ch-accent);font-weight:650;font-size:18px;line-height:1.15}
.ch-card-d{font-size:13px;line-height:1.3}
.ch-card-c{font-size:12px;font-family:var(--mono)}
.prose h2{margin-top:44px}.prose h2+*{margin-top:0}
.prose blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:3px solid var(--quote)}
.prose blockquote p{margin:8px 0}
.prose ul,.prose ol{padding-left:22px}.prose ol li::marker{font-weight:700}.prose li+li{margin-top:6px}

/* chapter tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:6px;row-gap:12px;min-height:170px;padding:16px;border-radius:12px;color:var(--ch-light);
  background:linear-gradient(color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent),color-mix(in srgb,var(--ch-mid) calc(var(--ch-mid-op)*100%),transparent)),var(--ch-dark)}
.tile{transition:transform .5s var(--spring),box-shadow .35s var(--soft)}
.tile:hover{text-decoration:none}
/* hover: like directive cards, the active tile comes forward, the others step back */
@media (hover:hover){
  .tile:hover{transform:scale(1.03);box-shadow:0 14px 30px -10px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.08);position:relative;z-index:1}
}
.tile-t{color:var(--ch-accent);font-weight:650;font-size:18px;line-height:1.15}
/* hanging number: everything else lines up with the title text */
.card-n{grid-column:1;grid-row:1;color:var(--ch-accent);font-weight:650;font-size:18px;line-height:1.15}
.tile>:not(.card-n),.ch-card>:not(.card-n){grid-column:2}
.card-foot{align-self:end}
.tile-count,.ch-card-c{transition:color .3s var(--soft)}
.tile:hover .tile-count,.ch-card:hover .ch-card-c{color:var(--ch-accent)}
.tile-gov{font-size:14px;line-height:1.3;font-weight:500}.tile-ask{font-size:13px;line-height:1.3}
.tile-count{font-size:12px;font-family:var(--mono)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.go{display:grid;color:var(--ch-accent);transition:transform .5s var(--spring)}
.go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .go,.ch-card:hover .go{transform:translateX(5px)}

/* responsive */
@media (max-width:1180px){body.has-toc .shell{grid-template-columns:var(--side-w) minmax(0,1fr)}.toc{display:none}.nav-sec{display:block}}
@media (max-width:860px){
  .shell,body.has-toc .shell{grid-template-columns:minmax(0,1fr)}
  :root{--cover-h:88px;--cover-full:88px}
  /* condensed banner: once the page is scrolled the banner is one 40px line with the page's own name.
     --cover-h is the condensed height (the sticky heading and anchors clear that); the banner keeps its full
     88px in the flow (height + margin), so the text under it does not move when it changes state */
  :root.cvc{--cover-h:40px}
  .cover{height:var(--cover-full);transition:height .18s ease,margin-bottom .18s ease}
  .cover.is-min{height:var(--cover-h);margin-bottom:calc(var(--cover-full) - var(--cover-h))}
  .cover.is-min .cover-in{padding:0 16px}
  .cover.is-min .cv-arr,.cover.is-min .hm-mark,.cover:not(.cover-ch).is-min .cv-1{display:none}
  .cover.is-min .cv-1,.cover.is-min .cv-2,.cover.is-min .hm-t{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .cover.is-min .cv-2{font-size:17px}.cover-ch.is-min .cv-1{font-size:13px}.cover.is-min .hm-t{font-size:12px}
  .cover.is-min .hm{padding:0 16px}
  /* "2. Discoverability" reads "2.2 Discoverability": the chapter number appears, the dot after the subcategory number takes no room */
  .cover.is-min .cv-c{display:inline}.cover.is-min .cv-d{font-size:0}
  /* the sticky heading is just "UX directives": the banner above it names the subcategory; the name stays for screen readers */
  #directives .arrow{display:none}#directives .to{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cover-in{gap:8px;padding:0 52px}.cv-1{font-size:11px}.cv-2{font-size:21px}.cover-ch .cv-1{font-size:17px}
  .hm{gap:8px}.hm-mark{width:34px}.hm-t{font-size:14px}.cv-arr{width:52px}.cv-prev::before{left:6px}.cv-prev svg{left:15px}.cv-next::before{right:6px}.cv-next svg{right:15px}.cv-prev{left:0}.cv-next{right:0}
  .sidebar{position:fixed;left:0;top:var(--top);bottom:0;width:min(86vw,320px);height:auto;background:var(--bg);z-index:40;transform:translateX(-102%);visibility:hidden;overscroll-behavior:contain;transition:transform .2s ease,visibility 0s .2s}
  body.nav-open .sidebar{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
  body.nav-open{overflow:hidden}
  .ic-panel{display:none}.ic-burger{display:block}
  body.nav-open .ic-burger .l1{transform:translateY(4px) rotate(45deg)}
  body.nav-open .ic-burger .l2{opacity:0}
  body.nav-open .ic-burger .l3{transform:translateY(-4px) rotate(-45deg)}
  .scrim{position:fixed;inset:var(--top) 0 0 0;background:rgba(0,0,0,.35);z-index:35}
  .top-in{padding:0 16px;gap:10px}
  .brand-t{display:inline-block;max-width:34vw;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  .search{width:auto;flex:1}.search kbd{display:none}
  /* touch targets: the field and its clear button are 44px tall; the hover square of the button stays 26px */
  .search input{height:44px;padding:0 10px 0 32px}.search.has-val input{padding-right:44px}
  .search-ic{top:13px}
  .search-x{width:44px;height:44px}.search-x::before{inset:9px}
  /* the list leaves the field's column: under the header, the screen's width less 16px gutters, as tall as the screen allows.
     Fixed resolves against the header (its backdrop-filter makes it the containing block) or the viewport: the same box, the header sticks at 0 */
  .results{position:fixed;top:calc(var(--top) + 6px);left:16px;right:16px;max-height:calc(100vh - var(--top) - 22px);max-height:calc(100dvh - var(--top) - 22px)}
  .main{padding:16px 16px 64px}
  .pager{grid-template-columns:1fr}
  .pg.next{text-align:left;align-items:flex-start}
}
/* phones: the field gets the title's room; the emblem stands in for it as the home link */
@media (max-width:520px){.brand{display:none}.brand-m{display:grid}.top-in{gap:8px}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.top,.sidebar,.toc,.pager,.scrim{display:none!important}.shell{display:block}.main{padding:0}}
/* search result tints */
.rc1{--ch-sel-l:#ffd5fd;--ch-hov-l:#fee9fd;--ch-sel-d:#4b2a4b;--ch-hov-d:#372137}.rc2{--ch-sel-l:#bdefb8;--ch-hov-l:#d2f9cf;--ch-sel-d:#1c3d1a;--ch-hov-d:#182d16}.rc3{--ch-sel-l:#93f2f1;--ch-hov-l:#b5fcfb;--ch-sel-d:#033d3d;--ch-hov-d:#012e2e}.rc4{--ch-sel-l:#ffdcb7;--ch-hov-l:#ffecd9;--ch-sel-d:#4e2f04;--ch-hov-d:#39240a}.rc5{--ch-sel-l:#f6f063;--ch-hov-l:#fcf997;--ch-sel-d:#3a3701;--ch-hov-d:#2b2a08}.rc6{--ch-sel-l:#feddab;--ch-hov-l:#ffedd2;--ch-sel-d:#4a3102;--ch-hov-d:#372508}.rc7{--ch-sel-l:#ffdcb5;--ch-hov-l:#ffecd8;--ch-sel-d:#4d2f03;--ch-hov-d:#39240a}.rc8{--ch-sel-l:#aff1c4;--ch-hov-l:#c9fbd8;--ch-sel-d:#0e3e23;--ch-hov-d:#102e1c}.rc9{--ch-sel-l:#95f2e9;--ch-hov-l:#b6fcf5;--ch-sel-d:#013d39;--ch-hov-d:#022e2b}