:root{
  --bg:#ffffff;--bg-soft:#f7f6f3;--text:#37352f;--muted:var(--text);--line:#e9e9e7;--link:var(--book);
  --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);--ch-live:var(--ch-live-l);--ch-deep:var(--ch-deep-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) *{--ch-sel:var(--ch-sel-d);--ch-hov:var(--ch-hov-d);--ch-live:var(--ch-live-d);--ch-deep:var(--ch-deep-d)}}
:root[data-theme="dark"] *{--ch-sel:var(--ch-sel-d);--ch-hov:var(--ch-hov-d);--ch-live:var(--ch-live-d);--ch-deep:var(--ch-deep-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}
/* every hover look sits in @media (hover:hover): on touch it would stay on the element last tapped */
@media (hover:hover){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)}
/* a line that is not drawn and stands after the page (a status line at the body's end) takes no room there: left where the flow puts it, with a paragraph's margin over it,
   it made the document 17px longer than the page, and at the scroll's end those 17px pushed the menu and "On this page" up from under the banner */
body>.sr{top:0;margin: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}
/* the menu's current item takes the focus when the menu is opened from the keyboard: it shows the ring a link would */
.sidebar [aria-current]:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* top bar */
.top{position:sticky;top:0;z-index:30;height:var(--top);background:var(--bg);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}@media (hover:hover){.brand:hover{text-decoration:none}}
.brand-m{display:none;place-items:center;width:36px;height:36px}.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:var(--home-line);box-shadow:0 0 0 3px var(--home-sel)}
.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}
/* 1.6667 units of the 20 grid are 1.5px at 18px */
.search-ic svg{fill:none;stroke:currentColor;stroke-width:1.6667;stroke-linecap:round;stroke-linejoin:round}
.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;place-items:center;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer}
.search.has-val .search-x{display:grid}
/* one cross for both buttons, sized to their 26px square; 1.875 units of the 20 grid are 1.5px at 16px */
.search-x svg,.results .r-x svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round}
.search-x::before{content:"";position:absolute;z-index:-1;inset:5px;border-radius:6px}
/* pointed at or focused: the chevron's live step in the Contents blue, one step denser than selected, edged one step denser still,
   on every page: the field is one shell component and carries no chapter. A Recent tile's button takes the same step in the tile's chapter */
@media (hover:hover){.search-x:hover::before{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep)}}
/* the focus ring goes around the 26px square, inside the field */
.search-x:focus-visible{outline:none}.search-x:focus-visible::before{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep);outline:2px solid var(--link);outline-offset:2px}
.results{position:absolute;top:42px;left:0;right:0;max-height:min(70vh,calc(100vh - var(--top) - var(--consent-h,0px) - 4px));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}
/* a Recent tile keeps its hover tint while the pointer or the focus is on its own button */
@media (hover:hover){.results li a:hover,.results li:has(.r-x:hover) a{background:var(--ch-hov,var(--bg));border-color:var(--ch-sel,var(--line));text-decoration:none}}
.results li[aria-selected="true"] a,.results li:has(.r-x:focus-visible) 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{display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--link)}
@media (hover:hover){.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 and the "Show all" row have no chapter tint, so their hover and selection show on the border */
@media (hover:hover){.results .r-fix a:hover,.results .r-more a:hover{border-color:var(--link)}}
.results .r-fix[aria-selected="true"] a,.results .r-more[aria-selected="true"] a{border-color:var(--link)}
/* one line of text makes the row 43.594 high; a finger gets 44 */
.results .r-fix a,.results .r-more a{min-height:44px}
.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;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text);cursor:pointer}
@media (hover:hover){.results .r-x:hover{background:var(--ch-live,var(--bg-soft));box-shadow:inset 0 0 0 1px var(--ch-deep,var(--line))}}
.results .r-x:focus-visible{background:var(--ch-live,var(--bg-soft));box-shadow:inset 0 0 0 1px var(--ch-deep,var(--line))}
/* what a removal would take is edged in brick before the click: the tile whose button is pointed at or focused, every tile for
   "Clear history". 2px with no reflow: the tile's own 1px border recoloured and 1px of inset shadow */
@media (hover:hover){.results li:has(.r-x:hover) a,.results:has(.r-clear:hover) .r-hist a{border-color:var(--brick);box-shadow:inset 0 0 0 1px var(--brick)}}
.results li:has(.r-x:focus-visible) a,.results:has(.r-clear:focus-visible) .r-hist a{border-color:var(--brick);box-shadow:inset 0 0 0 1px var(--brick)}
.results .r-hist a{padding-right:38px}
/* a Recent entry on its way out: clipped to its shrinking height and out of the pointer's reach; it keeps the brick edge, the tile's
   tint and the button's step it had at the click (.r-brick, .r-tint) until it is gone */
.results .r-out{overflow:hidden;pointer-events:none}
.results .r-brick a{border-color:var(--brick);box-shadow:inset 0 0 0 1px var(--brick)}
.results .r-tint a{background:var(--ch-hov,var(--bg))}
.results .r-tint .r-x{background:var(--ch-live,var(--bg-soft));box-shadow:inset 0 0 0 1px var(--ch-deep,var(--line))}
/* the Recent heading counts its entries, "Recent • N", with the directive chip's drawn dot and gap */
.results .r-n{display:inline-flex;align-items:center;gap:6px}
/* read, not shown: the comma that stands for the dot, so the heading reads "Recent, N" */
.results .r-sr,.foot .r-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:pre}
/* "Clear history" ends the Recent heading's row, its right edge on the tiles' right edge (it takes back the row's 4px padding).
   Pointed at or focused it fills with brick under white text, the colour of the edge every entry takes with it; no reflow */
.results .r-clear{font:inherit;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 10px;margin-right:-4px;cursor:pointer}
@media (hover:hover){.results .r-clear:hover{background:var(--brick-fill);border-color:var(--brick-fill);color:#fff}}
.results .r-clear:focus-visible{background:var(--brick-fill);border-color:var(--brick-fill);color:#fff}
.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.turn span{animation:bb-turn .6s var(--spring)}
@keyframes bb-turn{from{transform:rotate(-120deg) scale(.5);opacity:0}}
/* --dk: the theme (0 light, 1 dark); --m: what the icon draws (0 sun, 1 moon) */
.theme-btn{--dk:0;--m:var(--dk)}
:root[data-theme="dark"] .theme-btn{--dk:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn{--dk:1}}
/* hover previews the click: the icon turns into the other theme's; after a click, not until the pointer has left */
@media (hover:hover){.theme-btn:hover:not(.pv-off){--m:calc(1 - var(--dk))}}
/* sun to moon in .5s: rays draw in, the disc grows, the cutting circle arrives, the exact moon takes over; moon to sun in .45s, in reverse */
.th-rays,.th-disc,.th-cut{transform-box:view-box;transform-origin:10px 10px}
.th-rays{opacity:calc(1 - var(--m));transform:scale(calc(1 - .6*var(--m)));transition:transform .25s var(--spring) calc((1 - var(--m))*.2s),opacity .2s var(--soft) calc((1 - var(--m))*.2s)}
.th-disc{vector-effect:non-scaling-stroke;opacity:calc(1 - var(--m));transform:scale(calc(1 + 1.4167*var(--m)));transition:transform .3s var(--soft) calc((1 - var(--m))*.1s),opacity 0s calc(var(--m)*.5s)}
.th-cut{opacity:calc(1 - var(--m));transform:translate(calc((1 - var(--m))*12px),calc((1 - var(--m))*-12px));transition:transform calc(.3s + var(--m)*.1s) var(--soft) calc(var(--m)*.1s),opacity 0s calc(var(--m)*.5s)}
.th-cf{fill:var(--bg);stroke:none}
.th-moon{opacity:var(--m);transition:opacity 0s calc(var(--m)*.5s)}
/* a click swaps the icon at once, under the turn */
.theme-btn.turn .ic-theme *{transition:none}
.theme-btn,.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;stroke-linejoin:round}
.theme-btn svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin: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}
/* hover previews the click: the column leaves a shown panel's icon and returns to a hidden one's; after a click, not until the pointer has left */
@media (hover:hover){.side-hidden .menu-btn:hover:not(.pv-off) .ic-panel .col{transform:none;opacity:1}
  :root:not(.side-hidden) .menu-btn:hover:not(.pv-off) .ic-panel .col{transform:scaleX(0);opacity:0}}
/* tooltip of an icon-only control: one element, placed by script under the control (above it with .up: in the footer and in the consent bar); the shadow is the results list's */
.tip{position:fixed;left:0;top:0;z-index:60;width:max-content;max-width:min(320px,calc(100vw - 16px));padding:5px 9px;border:1px solid var(--text);border-radius:6px;background:var(--text);color:#fff;
  font-size:12px;font-weight:500;line-height:1.35;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.94);
  transition:opacity .15s var(--soft),transform .15s var(--soft),visibility 0s .15s}
.tip.up{transform:translateY(4px) scale(.94)}
/* beside a chapter chevron, so the chevron below stays free: to its right (.at-r), to its left (.at-l) when the right has no room */
.tip.at-r{transform:translateX(-4px) scale(.94)}.tip.at-l{transform:translateX(4px) scale(.94)}
.tip.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--soft),transform .4s var(--spring),visibility 0s}
/* the gap to the control belongs to the tooltip, so the pointer can cross it */
.tip::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}.tip.up::before{top:auto;bottom:-7px}
.tip.at-r::before,.tip.at-l::before{top:0;bottom:0;width:7px;height:auto}.tip.at-r::before{left:-7px;right:auto}.tip.at-l::before{left:auto;right:-7px}
:root[data-theme="dark"] .tip{background:#2f2f2f;color:var(--text);border-color:#474747}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tip{background:#2f2f2f;color:var(--text);border-color:#474747}}
/* touch: a long press on an icon-only control shows its tooltip, so the browser's own callout and text selection are off on these controls */
@media (hover:none){.menu-btn,.theme-btn,.brand,.search-x,.r-x,.cv-arr,a.cn,.chev,.foot a,.foot-b,.consent-x,.sch-btn[target]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}

/* 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) - var(--consent-h,0px));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}
@media (hover:hover){.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{background:var(--home-sel);text-decoration:none}
@media (hover:hover){a.nav-home:hover{background:var(--home-hov);text-decoration:none}}
.nav-home.is-cur{cursor:default}
/* the row after the chapters: "Skill for Claude", under a rule. The Contents row's box, its tints and its current look; no button beside it, so it is as wide as the menu */
/* it is the one way to the page, so it does not scroll away with the chapters: it stands at the menu's lower edge (sticky) on the menu's ground, its rule over it,
   and takes its place under the last chapter when the list is scrolled to its end */
/* a sticky box stops at the menu's padding (40px at its foot), and the chapters would show in that strip under the row: the row is let down by those 40px,
   to the menu's very edge, and keeps 16px of its own under the pill */
/* on the skill's own page the row is the current item and its sections follow it (where "On this page" is hidden): there it stands in the flow, as a current subcategory does,
   and the menu is scrolled to it on arrival */
.nav-x:has(.is-cur){position:static;padding-bottom:0}
.nav-x{display:flex;position:sticky;bottom:-40px;z-index:1;margin:8px 0 6px;padding:8px 0 16px;border-top:1px solid var(--line);background:var(--bg)}
.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}
/* every chapter number takes the room of the widest ("4.", 14px at 600): the titles start on one vertical, and so do the subcategory numbers under them */
.sidebar{--nav-n:13.42px}
/* the subcategory names keep the column they had under a 16px indent and an 8px gap: what the indent gained, the gap after the number gives back */
.sidebar{--nav-g:calc(8px - (var(--nav-n) + 6px - 16px))}
.nav-ch-n{flex:none;align-self:flex-start;width:var(--nav-n)}.nav-ch-l{flex:1;min-width:0}@media (hover:hover){.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)}
/* the glyph is the text colour, a little lighter at rest; the button's states are its block's background alone */
.chev svg{display:block;width:15.6px;height:15.6px;fill:none;stroke:currentColor;stroke-width:1.5385;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .6s var(--spring),opacity .35s var(--soft)}
.chev[aria-expanded="true"] svg{transform:rotate(90deg)}
@media (hover:hover){
  /* neighbour: pointer or keyboard focus on the title next to it (a link to another chapter) */
  .nav-ch-h:has(a.nav-ch-t:hover) .chev,.nav-ch-h:has(a.nav-ch-t:focus-visible) .chev{background:var(--ch-sel)}
  /* live: pointer or focus on the chevron itself; pointer on the current chapter's row, where the title folds the list too */
  .chev:hover,.chev:focus-visible,.nav-ch[data-here] .nav-ch-h:hover .chev{background:var(--ch-live)}
  .chev:hover svg,.chev:focus-visible svg,.nav-ch[data-here] .nav-ch-h:hover .chev svg{opacity:1}
}
/* no hover to announce it, so the toggle is drawn as a button, the way "Expand all" is. The strip, as tall as the row,
   is still what is pressed; what is seen is a box inside it (::after): the border, radius and height of .nav-toggle
   (12px text at line height 1.6, 3px padding, 1px border), its right edge under that button's. It sits at the title's
   first line (6px padding, 14px text at 1.3), so boxes of rows one under another keep a gap, and so does the glyph.
   The box's fill (--chev-bg) at rest: grey when folded, the chapter's hover tint when open; the current chapter's,
   its selected tint when open and grey when folded, as every folded row; pressed: one step denser. A coloured box has a coloured edge
   (--chev-bd): the chapter's tint one step denser than the fill; the grey edge belongs to the grey box alone */
@media (hover:none){
  .chev{padding:calc(6px + 14px * 1.3 / 2 - 7.8px) 0 0 6px;place-items:start center;position:relative;--chev-bg:var(--line);--chev-bd:var(--line)}
  .chev::after{content:"";box-sizing:border-box;position:absolute;right:0;top:calc(6px + 14px * 1.3 / 2 - (12px * 1.6 + 8px) / 2);width:28px;height:calc(12px * 1.6 + 8px);border:1px solid var(--chev-bd);border-radius:6px;background:var(--chev-bg);transition:background-color .35s var(--soft),border-color .35s var(--soft)}
  .chev svg{position:relative;z-index:1}
  /* a finger's target: a chapter row is at least 44px high, its title and box as they are, in the middle of it (a two-line row
     is higher already). The title link and the button take taps over the row's whole height, the button over 44px of width:
     its own 34px and 10px of the menu's 12px padding to its right. Nothing drawn moves but the one-line rows apart */
  .nav-ch-h{min-height:44px;flex-wrap:wrap;align-content:center}
  a.nav-ch-t{position:relative}
  a.nav-ch-t::before,.chev::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
  .chev::before{right:-10px}
  .chev:focus-visible{outline:none}.chev:focus-visible::after{outline:2px solid var(--link);outline-offset:2px}
  .chev[aria-expanded="true"]{--chev-bg:var(--ch-hov);--chev-bd:var(--ch-sel)}
  .nav-ch[data-here] .chev[aria-expanded="true"]{--chev-bg:var(--ch-sel);--chev-bd:var(--ch-live)}
  .chev:active,.nav-ch[data-here] .chev:active,.nav-ch[data-here] .nav-ch-h:active .chev{--chev-bg:var(--ch-live);--chev-bd:var(--ch-deep)}
  .chev:active svg,.nav-ch[data-here] .nav-ch-h:active .chev svg{opacity:1}
}
: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}
/* the hover fills only where there is a hover: on touch they would stay on the row last tapped */
@media (hover:hover){.nav-ch li a:hover{background:var(--ch-hov);color:var(--text);text-decoration:none}.nav-ch-h:hover{background:var(--ch-hov)}}
.nav-ch ul{list-style:none;margin:2px 0 8px;padding:0 0 0 calc(var(--nav-n) + 6px)}
.nav-ch li a,.nav-ch .nav-cur{display:flex;gap:var(--nav-g);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)
   their text starts in a column the menu already has. Under a subcategory: the subcategory names' column,
   past the number (.num: 2.4em of 12px) and the gap after it */
.nav-sec{display:none;list-style:none;margin:2px 0 4px;padding:0 0 0 calc(2.4 * 12px + var(--nav-g));font-size:13px}
.nav-ch .nav-sec a.is-active{background:var(--ch-sel);color:var(--text);font-weight:700}
/* under a chapter row: the same column, reached without the subcategory list's own indent. It folds with the chapter:
   it is the first thing in the folded element, and its 4px and the list's 2px, which would merge there, stay 6px */
.nav-ch-c>.nav-sec{margin-bottom:6px;padding-left:calc(var(--nav-n) + 6px + 2.4 * 12px + var(--nav-g))}
/* under "Contents" (home page) the list is outside every chapter: the same items in the colours of "Contents" itself,
   their text where the chapters' titles start. An unseen "1." as wide as the chapter numbers are (.nav-ch-n in .nav-ch-h)
   and the row's 6px gap stand before each item */
.sidebar>.nav-sec{margin:-4px 0 6px;padding-left:0}
.sidebar>.nav-sec li{display:flex}
.sidebar>.nav-sec li::before{content:"1.";flex:none;width:var(--nav-n);visibility:hidden;font-size:14px;font-weight:600;line-height:1;margin-right:6px}
.sidebar>.nav-sec a{flex:1;min-width:0}
.sidebar>.nav-sec a{display:flex;padding:4px 8px;border-radius:6px;color:var(--muted);line-height:1.4;transition:background-color .35s var(--soft)}
@media (hover:hover){.sidebar>.nav-sec a:hover{background:var(--home-hov);color:var(--text);text-decoration:none}}
.sidebar>.nav-sec a.is-active{background:var(--home-sel);color:var(--text);text-decoration:none}
.sidebar>.nav-sec a.is-active{font-weight:700}
@media (hover:none){
  /* one geometry for every filled shape in the menu, taken from the chevron's box (above): 1.5px clear of its row's top and bottom
     (the box in a one-line row), 6px corners, and the box's right edge. Rows keep their height and text its place:
     what a shape gives up in padding it takes back as margin */
  .nav-ch li a,.nav-ch .nav-cur,.sidebar>.nav-sec a{margin-block:1.5px;padding-block:2.5px}
  .nav-ch li{display:flow-root}  /* the margins stay inside the row: rows do not move closer */
  /* under the current subcategory: the list's 2px and the pill's 1.5px would merge into 2px; its 4px below goes to the row,
     where it merges with what follows as it did */
  .nav-ch .nav-cur+.nav-sec{margin:3.5px 0 0}.nav-ch li:has(>.nav-sec){margin-bottom:4px}
  /* a title and the button beside it are two objects: the title's fill stops 3px short of the button.
     The current chapter's fill moves from the row to its title; the title's text keeps its width */
  .nav-ch-h:has(.nav-ch-t[aria-current]){background:none}
  .nav-ch-t[aria-current],.nav-ch[data-here] .nav-ch-h:has(.chev[aria-expanded="false"]) .nav-ch-t{background:var(--ch-sel);margin:1.5px -3px 1.5px 0;padding:4.5px 3px 4.5px 8px}
  /* (the second selector: a subcategory's chapter, folded. The current item is out of sight, so its chapter's title carries the mark) */
  /* "Contents" and "Expand all" are such a pair too: the pill is as tall as that button, level with it, and stops 3px short of it */
  /* the skill's row has no button to stand level with: a pill as tall as a chapter's (41px) in a row of 44px */
  .nav-x .nav-home{margin:1.5px 0;padding:9.3px 8px}
  .nav-home{margin:calc((14px * 1.6 + 12px - 12px * 1.6 - 8px) / 2) -5px calc((14px * 1.6 + 12px - 12px * 1.6 - 8px) / 2) 0;padding:calc((12px * 1.6 + 8px - 14px * 1.6) / 2) 13px calc((12px * 1.6 + 8px - 14px * 1.6) / 2) 8px}
}
.nav-ch .num{font-family:var(--mono);font-size:12px;min-width:2.4em;color:var(--text);padding-top:1px}
@media (hover:hover){.nav-ch li a:hover .num{font-weight:700}}.nav-ch li a:focus-visible .num{font-weight:700}
.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) - var(--consent-h,0px));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)}
@media (hover:hover){.toc a:hover{color:var(--text);text-decoration:none;background:var(--ch-hov,var(--bg-soft))}.toc:not([style]) a:hover{background:var(--home-hov)}}
.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}
/* the band is the book's one blue (--book, written by the build; --blue is the blue callout's ground): the light page's links and the skill page's first button are the same token.
   It was #1829c4, one step of red from the links' #1929c4; the dark page's links keep their own, lighter blue */
.cover-home{background:var(--book)}
/* the 1500x260 Notion composition, scaled by .8 to fit the 1500x200 banner */
/* the emblem and its caption are one box, as large as the two and centred in the banner */
.hm{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:100%;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hm-mark{width:49px;overflow:visible;stroke-width:1.25;transition:transform .5s var(--spring)}
.hm-t{color:#fff;font-size:21px;font-weight:500;letter-spacing:.08em;line-height:1;text-transform:uppercase;transition:opacity .3s var(--soft) .15s,transform .5s var(--spring) .15s}
/* the emblem's quote: .hm.is-q and keyboard focus swap the caption for it and the mark grows upward; a pointer on the mark shows it, the mark and the quote keep it (script).
   Everything that arrives moves on the mark's spring (.5s): the mark grows as a card lifts under the pointer, the quote rises --hm-rise into place,
   its two lines as one block; the caption gives way upward and comes back down the same way. What leaves goes in .3s on the soft curve, and what
   arrives starts .15s later, so the two texts are never half-shown over each other */
.hm{--hm-rise:14px}
.hm-q{position:absolute;left:50%;top:56px;width:max-content;max-width:calc(100vw - 32px);transform:translate(-50%,var(--hm-rise));color:#fff;font-size:18px;font-weight:500;line-height:1.3;
  text-align:center;opacity:0;pointer-events:none;transition:opacity .3s var(--soft),transform .3s var(--soft)}
/* the quote is text to read and copy, not a control: it can be selected while it shows, and neither it nor the mark changes the cursor;
   whichever of the two texts is not showing cannot be selected or pressed, so a drag over the one that shows never picks up the other */
.hm .hm-mark,.hm-q{cursor:default}.hm-q{-webkit-user-select:none;user-select:none}
.hm-a{display:block;font-size:.75em;color:rgba(255,255,255,.75)}
.hm:is(.is-q,:focus-visible) .hm-mark{transform:translateY(-8px) scale(1.2)}.hm:is(.is-q,:focus-visible) .hm-t{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transform:translateY(calc(var(--hm-rise)*-.7));transition:opacity .3s var(--soft),transform .3s var(--soft)}
.hm:is(.is-q,:focus-visible) .hm-q{opacity:1;pointer-events:auto;-webkit-user-select:text;user-select:text;transform:translate(-50%,0);transition:opacity .3s var(--soft) .15s,transform .5s var(--spring) .15s}
/* its focus ring is the banner arrows' white one, drawn around the grown mark and the quote */
.hm:focus-visible{outline:none}.hm:focus-visible::after{content:"";position:absolute;inset:-15px 28px;outline:2px solid #fff;border-radius:4px;pointer-events:none}
/* 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:-14.3px}
.cv-prev::before{left:20px}.cv-prev svg{left:25.7px}.cv-next::before{right:20px}.cv-next svg{right:25.7px}
/* 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)}
@media (hover:hover){.cv-arr:hover::after{opacity:1}}
.cv-arr svg{width:28.6px;height:28.6px;fill:none;stroke:currentColor;stroke-width:1.8881;stroke-linecap:round;stroke-linejoin:round}
.cv-prev{left:10px}.cv-next{right:10px}
@media (hover:hover){.cover:hover .cv-arr{opacity:1}}
.cv-arr:focus-visible{opacity:1}
@media (hover:none){.cv-arr{opacity:1}}
@media (hover:hover){.cv-arr:hover{text-decoration:none;outline-offset:-4px}}
.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}
@media (hover:hover){.cv-arr:hover::before{background:color-mix(in srgb,var(--ch-accent) 16%,transparent)}}
.cv-arr:focus-visible::before{background:color-mix(in srgb,var(--ch-accent) 16%,transparent)}
.cover-home .cv-arr{color:#fff}@media (hover:hover){.cover-home .cv-arr:hover::before{background:rgba(255,255,255,.14)}}
.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}
/* footer: one quiet line under a hairline, in the main column on the text measure. It is .shell's second row, so the side columns span both rows
   and stay stuck to the page's end (the first row is 1fr: on a page shorter than the sidebar it takes the spare height, not the footer's);
   the space above the hairline is .main's bottom padding. Grey as the search placeholder (--ph) */
.shell{grid-template-rows:1fr auto}.sidebar{grid-column:1;grid-row:1/span 2}.toc{grid-column:3;grid-row:1/span 2}
.foot{grid-column:2;grid-row:2;min-width:0;padding:0 clamp(16px,3vw,40px) 40px;color:var(--ph,#6b6b6b)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{--ph:#9b9b99}}:root[data-theme="dark"] .foot{--ph:#9b9b99}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px;max-width:var(--measure);margin:0 auto 0 max(0px,calc((100% - var(--measure)) / 2));padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;transition:max-width .45s var(--soft),margin-left .45s var(--soft)}
@media (min-width:861px){.side-hidden .foot-in{margin-left:max(0px,calc(100% - var(--measure)))}}
.foot-g{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}  /* a group that stands alone on its line starts at the left edge */
.foot-i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}  /* the dot and its link: one item of the row, the same 6px between them */
.foot a{color:inherit}
/* the author's name stands in a line of text, not in a .foot-i: a box of the line's height, as the other links are (16.5px; 44.5px with the touch padding) */
.foot-a{display:inline-block}
/* a sign before its word, inside the link: 12px, 4px from the word, so its ink stands 4.75px off, as the pager's arrow from "Previous" (4.72px) */
.foot-il{display:inline-flex;align-items:center;gap:4px}
.foot-ic{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--soft)}
/* the link pointed at or focused: its sign takes a colour of its own, as LinkedIn's sign does in the portfolio's footer. Feedback's is lilac, Sponsor's pink
   (GitHub Primer): #8250df and #bf3989 on the light page, the lighter #a371f7 and #db61a2 on the dark one. The word keeps the footer's grey */
.foot-fb{--in:#8250df}.foot-sp{--in:#bf3989}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot-fb{--in:#a371f7}:root:not([data-theme="light"]) .foot-sp{--in:#db61a2}}
:root[data-theme="dark"] .foot-fb{--in:#a371f7}:root[data-theme="dark"] .foot-sp{--in:#db61a2}
@media (hover:hover){.foot-il:hover .foot-ic{stroke:var(--in)}}
.foot-il:focus-visible .foot-ic{stroke:var(--in)}
/* the consent button: a button that reads as the group's links do; under the pointer it is underlined as they are. Its sign is the footer's grey while
   analytics is off and Google Analytics' orange while it is on (--ga, build_site.py: GA_LINE); pointed at or focused it is orange either way, by the links' own rule (--in) */
.foot-b{--in:var(--ga);appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
@media (hover:hover){.foot-b:hover{text-decoration:underline}}
.foot-b[data-ga="on"] .foot-ic{stroke:var(--ga)}
.foot-bl{display:inline-grid}.foot-bl>span{grid-area:1/1}
.foot-b[data-ga="on"] [data-s="off"],.foot-b:not([data-ga="on"]) [data-s="on"]{visibility:hidden}
html:not(.js) .foot-js{display:none}
.cn{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--text)}
.cn svg{width:18.2px;height:18.2px;fill:none;stroke:currentColor;stroke-width:2.6374;stroke-linecap:round;stroke-linejoin:round}
a.cn{transition:background-color .25s var(--soft)}@media (hover:hover){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}
/* arrows inside a line of text, in the card arrow's line: separator 14.3px at 2px, heading arrow 28.6px at 2.25px, pager 13.8px at 1.75px.
   Side margins trim the empty sides of the 24 grid; vertical-align keeps each arrow's centre where the glyph's was;
   the heading arrow is as tall as its line, so its vertical margins take 4px off each end and the line keeps its height */
.crumbs .sep svg,h2 .arrow svg,.pg-ar svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.crumbs .sep svg{width:14.3px;height:14.3px;margin:0 -3.4905px;vertical-align:-3.315px;stroke-width:3.3566}
h2 .arrow svg{width:28.6px;height:28.6px;margin:-4px -1.4755px;vertical-align:-2.53px;stroke-width:1.8881}
.pg-ar svg{width:13.8px;height:13.8px;margin:0 -.5635px;vertical-align:-2.665px;stroke-width:3.0435}.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}
/* 16px between the sticky heading and the first card: the room a landing leaves under the stuck heading (.dir's scroll-margin-top), so the first card lands like the rest */
.dirs{display:grid;gap:12px;margin-top:16px}
.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 */
section>h2.dh{--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 */
section>h2.dh::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)}
section>h2.dh.is-stuck::after{opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) section>h2.dh{--fade:rgba(0,0,0,.30)}}
:root[data-theme="dark"] section>h2.dh{--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,.r-head .bul,.foot .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 */
/* one row at every width. The texts stand on the text column's edges: each half's box reaches past its outer edge by its own side padding (--pg-x), as the menu rows do */
.pager{--pg-x:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:48px;padding-top:8px}
.pg{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px var(--pg-x);border-radius:10px;color:var(--text);transition:background-color .35s var(--soft),transform .6s var(--spring)}
@media (hover:hover){.pg:not(.empty):hover{text-decoration:none;background:var(--ch-hov);transform:translateY(-4px) scale(1.02)}}
.pg.prev{margin-left:calc(-1*var(--pg-x))}
.pg.next{margin-right:calc(-1*var(--pg-x));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)}
@media (hover:hover){.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)}
@media (hover:hover){
  .ch-card:hover{text-decoration:none}
  .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}

/* a link that leaves the site is followed by the site's one mark (ICON_EXT), the portfolio's (alehhaiko.com at c9cdbcf, style.css and tools/build.py), rule for rule:
   10px, beside the link, not in it, so it is neither underlined nor pressed, in the colour of the text it stands in. The link pointed at or focused, the mark grows
   a fifth and steps 1px up and right, on the spring of the card arrows; with reduced motion it stays as it is. Here it follows the external links of the book's
   text (the Contents page's front matter, the skill's page): not a button, not a link in a scheme, not the footer's links, which have their own signs */
.ext-w{white-space:nowrap}.ext-w>a{white-space:normal}
.ext{display:inline-block;flex:none;width:10px;height:10px;margin-left:4px;vertical-align:.02em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:transform .5s var(--spring)}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){a:hover+.ext{transform:translate(1px,-1px) scale(1.2)}}
  a:focus-visible+.ext{transform:translate(1px,-1px) scale(1.2)}
}
/* the skill's page (.sk). Words set as code in a line of text stand on the soft ground */
.sk :not(pre)>code{font-size:.9em;padding:1px 4px;border-radius:4px;background:var(--bg-soft)}
.sk a code{color:inherit}
/* text to copy: a command or a prompt. A box on the soft ground, the cards' corners; long lines wrap, so nothing scrolls sideways at any width.
   The button is the header's clear button: a 26px square that takes the Contents tints under the pointer; it stands at the box's top right and the text keeps clear of it.
   It is shown with script alone (.js); copied, its sign is a tick for 2s */
.code{position:relative;margin:8px 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.code pre{margin:0;padding:12px 16px;font:500 13px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.js .code pre{padding-right:48px}
.code code{font:inherit}
.code-l{margin:16px 0 0}
.code-copy{display:none;position:absolute;top:8px;right:8px;width:30px;height:30px;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text);cursor:pointer;transition:background-color .2s var(--soft)}
.js .code-copy{display:grid}
.code-copy svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* copied: the whole box takes, at once, the ground and the edge of the parts of the ID figure at rest (--ch-hov and --ch-deep of the figure's chapter, whose variables the box carries)
   and keeps them while the tick shows (2s, app.js); then ground and edge go back over .6s. No colour of its own */
.code{transition:background-color .6s var(--soft),border-color .6s var(--soft)}.code.is-ok{background:var(--ch-hov);border-color:var(--ch-deep);transition:none}
.code-copy .ic-ok,.code-copy.is-ok .ic-cp{visibility:hidden}.code-copy.is-ok .ic-ok{visibility:visible}
@media (hover:hover){.code-copy:hover{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep)}}
.code-copy:focus-visible{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep)}
@media (hover:none){.code-copy::after{content:"";position:absolute;inset:-7px}}  /* a finger's target: 44px */
/* a scheme: a figure in a hairline box, its name in the "On this page" heading's small capitals */
/* its edge is #dadada on the light page, a step darker than the book's hairline, and the book's own line on the dark one */
.sch{--sch-line:#dadada;margin:24px 0 8px;padding:20px;border:1px solid var(--sch-line);border-radius:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sch{--sch-line:var(--line)}}
:root[data-theme="dark"] .sch{--sch-line:var(--line)}
/* a line under the name that ties the figure to the text before it */
.sch-c{margin:-8px 0 16px;font-size:14px}
/* the lead's two links are the schemes' button at the text's size; the first is filled with the text's colour */
.sk-cta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.sk-cta .sch-btn{font-size:inherit;padding:8px 16px}
/* Install skill: the emblem band's blue under a white word. Pointed at, it takes the next step of its own blue: darker on the light page (--book-deep, solved by the build),
   and on the dark page the dark theme's link blue under a word in the page's colour (--book-light). A filled button goes darker under the pointer on the light page
   and lighter on the dark one, never the other way */
.sk-cta .sch-btn.is-fill{background:var(--book);border-color:var(--book);color:#fff}
/* (a.sch-btn: one step over the schemes' own rule for a filled button under the pointer, which comes later and would make this one black) */
@media (hover:hover){.sk-cta a.sch-btn.is-fill:hover{background:var(--book-deep);border-color:var(--book-deep)}}
@media (hover:hover){@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk-cta .sch-btn.is-fill:hover{background:var(--book-light);border-color:var(--book-light);color:var(--bg)}}
:root[data-theme="dark"] .sk-cta .sch-btn.is-fill:hover{background:var(--book-light);border-color:var(--book-light);color:var(--bg)}}
a.sch-btn,a.sch-btn:hover{text-decoration:none}
/* a button that leaves the site (GitHub) has the external link's mark after its word, inside it, in the word's colour: the portfolio's drawing and its move,
   here while the whole button is pointed at or focused; with reduced motion it stays as it is */
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){.sch-btn:hover .ext{transform:translate(1px,-1px) scale(1.2)}}
  .sch-btn:focus-visible .ext{transform:translate(1px,-1px) scale(1.2)}
}
.sch-btn.is-fill{background:var(--text);color:var(--bg)}
/* a button filled with the text's colour (Next) goes to the end of its own side under the pointer: black on the light page, white on the dark one (--fill-h) */
:root{--fill-h:#000}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fill-h:#fff}}
:root[data-theme="dark"]{--fill-h:#fff}
@media (hover:hover){.sch-btn.is-fill:not([aria-disabled="true"]):hover{background:var(--fill-h);border-color:var(--fill-h)}}
.sch-t{margin:0 0 16px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sch-n{margin:14px 0 0;font-size:13px}
/* scheme 1. One grid: three rows of names, an 8px row, the ID. A name starts where its part's line ends (6px after the arrow), so the leftmost part has the top row, the names read in the ID's order and no line crosses a name.
   Lines: the text's colour at 1.5px; the elbow is its row's first line (24px), the upright runs from under it to the ID. They take no pointer: the parts and the names do */
.id-g{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 8px auto;row-gap:4px}
.id-l{grid-column:1;justify-self:start;margin:0;padding:0 6px;border-radius:6px;font-size:14px;line-height:24px;transition:background-color .2s var(--soft)}
.id-l[data-p="ch"]{grid-row:1;margin-left:44px}.id-l[data-p="sub"]{grid-row:2;margin-left:94px}.id-l[data-p="dir"]{grid-row:3;margin-left:192px}
.id-c{grid-column:1;width:200px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:opacity .2s var(--soft)}
.id-e{height:24px;align-self:start}.id-v{height:auto;align-self:stretch;margin-top:24px;min-height:0}
.id-e[data-p="ch"]{grid-row:1}.id-e[data-p="sub"]{grid-row:2}.id-e[data-p="dir"]{grid-row:3}
.id-v[data-p="ch"]{grid-row:1/5}.id-v[data-p="sub"]{grid-row:2/5}.id-v[data-p="dir"]{grid-row:3/5}
.id-n{grid-row:5;grid-column:1;display:flex;gap:6px;margin:0;font:600 48px/64px var(--mono)}
.id-p{width:44px;text-align:center;border-radius:8px;background:var(--ch-hov);transition:background-color .2s var(--soft)}
.id-p[data-p="dir"]{width:72px}.id-s{width:28px;text-align:center}
.sch-id .dir{margin-top:16px}
/* with script a part is a button. The lit part: the chapter's selected tint under the part and under its name, its line at 2.5px; the other parts' lines step back.
   The pressed part alone has a 2px edge of the text's colour, so pressing and releasing each show, under the pointer too. The ring of the keyboard's focus stands outside that edge */
/* what can be pressed has an edge the static form has not: 1px, the chapter's deepest tint */
.js .id-p{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 0 0 1px var(--ch-deep)}
.id-p.on{background:var(--ch-sel)}
.js .id-p[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--text)}
.id-l.on{background:var(--ch-sel)}
.id-c.on{stroke-width:2.5}
.sch-id.has-on .id-c:not(.on){opacity:.3}
/* scheme 2. A step: its number in a ring, its name beside it, under the name the fragment in a box on the soft ground, the file it comes from over it in small type.
   Under the ring a line runs down to the next step's ring and ends in an arrowhead */
.st-list{list-style:none;margin:0;padding:0}
.st-i{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px}
.st-num,.st-dot{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--text);border-radius:50%;font:600 13px/1 var(--mono)}
.st-hd{grid-column:2;min-width:0}
.st-h{margin:0;padding:2px 0;font-weight:650;line-height:24px}.st-n{display:none}
.st-b{grid-column:2;min-width:0;padding:6px 0 18px}.st-i:last-child .st-b{padding-bottom:0}
.st-dn{grid-column:1;grid-row:2;position:relative;margin:4px 0}
.st-lv,.st-la,.st-fk{fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-dn .st-lv{position:absolute;left:8px;top:0;width:12px;height:100%}.st-dn .st-la{position:absolute;left:8px;bottom:0;width:12px;height:8px}
.st-f{padding:10px 14px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);font-size:14px;line-height:1.5}
.st-f p{margin:0}.st-f .st-src{margin-bottom:4px;font:600 11px/1.5 var(--mono)}
.st-ul{margin:0;padding:0;list-style:none}.st-ul li+li{margin-top:6px}
.st-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}.st-dl dt{font-weight:650}.st-dl dd{margin:0}
/* the fork under the finding: the stem leaves the box's middle and each branch ends over the middle of its outcome. Two columns of one half each (the gap is inside them),
   so the branches' ends, a quarter and three quarters across, are the columns' middles at any width. An outcome is the book's tinted block: who audited, then what was found, in bold */
.st-fork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.st-fk{grid-column:1/3;width:100%;height:28px}
.st-out{position:relative;margin:6px 4px 0;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.4}
.st-out strong{display:block;font-size:14px}
.st-out .st-la{position:absolute;left:50%;top:-10px;width:12px;height:8px;margin-left:-6px}
/* with script: the figure's head holds its name at the left and Previous and Next at the right; under it the rail, five rings in a row joined by arrows.
   A ring is a button to its step: the step shown is filled with the text's colour, the steps before it keep the dark edge, what is ahead has a grey edge and a grey arrow
   (its number keeps the text's colour). Under the pointer and under the keyboard's focus a ring that is not the shown step's grows on the cards' spring. Next is filled, Previous outlined;
   one with nowhere to go has a ring-ahead's grey edge and takes no hover. The step's own ring and its line down are not drawn: the rail has them.
   The step's name and "Step N of 5" share a baseline over the fragment's card */
.sch-st{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.sch-st>*{grid-column:1/-1}.sch-st>.sch-t{grid-column:1;padding-right:12px}
.st-ctl{grid-column:2;grid-row:1;display:flex;gap:8px;margin-bottom:16px}.st-ctl[hidden],.st-rail[hidden]{display:none}
.st-rail{display:flex;align-items:center;list-style:none;margin:8px 0 22px;padding:0}
.st-rail>li{flex:none}
button.st-dot{appearance:none;position:relative;padding:0;background:transparent;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--spring)}
/* a ring that is not the step shown: under the pointer and the focus it grows, and its edge and its number go to --fill-h (black on the light page), with no fill.
   The ring of the step shown leads nowhere: no growth, no change, the plain cursor */
@media (hover:hover){button.st-dot:not(.is-cur):hover{transform:scale(1.2);border-color:var(--fill-h);color:var(--fill-h)}}
button.st-dot:not(.is-cur):focus-visible{transform:scale(1.2);border-color:var(--fill-h);color:var(--fill-h)}
button.st-dot:focus-visible{border-radius:50%}
button.st-dot.is-cur{cursor:default}
.st-dot.is-cur{background:var(--text);color:var(--bg)}
.st-rail>.st-ln{flex:1;position:relative;height:12px;min-width:16px;transition:opacity .2s var(--soft)}
.st-ln .st-lv{position:absolute;left:6px;top:0;width:calc(100% - 12px);height:12px}.st-ln .st-la{position:absolute;right:5px;top:0;width:8px;height:12px}
.st-dot:not(.is-cur):not(.is-done){border-color:color-mix(in srgb,var(--text) 35%,transparent)}.st-ln:not(.is-done){opacity:.35}
/* a finger's target: 44px round a ring of 28px */
@media (hover:none){button.st-dot::after{content:"";position:absolute;inset:-8px}}
/* five rings with their arrows need 204px; in a narrower figure the arrows go and the rings stand apart */
@media (max-width:300px){.st-rail>.st-ln{display:none}.st-rail{justify-content:space-between}}
/* the schemes' buttons are small: 13px text in a box of 28.8px (the menu's "Collapse all" is 12px in 27.2px); a finger gets 44px */
.sch-btn{appearance:none;margin:0;padding:3px 10px;border:1px solid var(--text);border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--soft)}
@media (hover:hover){.sch-btn:not([aria-disabled="true"]):not([aria-checked="true"]):not(.is-fill):hover{background:var(--home-hov)}}
/* a button with nowhere to go: no fill, the edge of a ring that is ahead (the text's colour at 35%), its word in --muted; the plain cursor, and nothing under the pointer or a press */
.sch-btn[aria-disabled="true"],.sch-btn.is-fill[aria-disabled="true"]{background:transparent;border-color:color-mix(in srgb,var(--text) 35%,transparent);color:var(--muted);cursor:default}
@media (hover:none){.sch-btn{min-height:44px}}
/* a step that is not shown is folded as the menu's lists are (hidden="until-found"): it takes no room, and find-in-page still reaches its text and opens it (app.js) */
.sch-st.is-js .st-i{display:block}
.sch-st.is-js .st-num,.sch-st.is-js .st-dn{display:none}
.sch-st.is-js .st-b{padding-bottom:0}
.sch-st.is-js .st-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.sch-st.is-js .st-n{display:block;flex:none;margin:0;font-size:14px}
.sch-st.is-js .st-b{padding-top:0}
/* a box whose content changes takes its new height over the time and on the curve of the menu's fold (.nav-ch-c: .45s, --soft); app.js sets the two heights (skGrow) */
.sk-h{overflow:hidden;transition:height .45s var(--soft)}
/* a step arrives from the side it lies on: 12px and a fade (not with reduced motion) */
.st-i.in{animation:bb-st-in .35s var(--soft)}
@keyframes bb-st-in{from{opacity:0;transform:translateX(calc(var(--st-d,1) * 12px))}}
/* scheme 3. The roles are the schemes' button in a row that wraps; the chosen one is filled with the text's colour, as the rail's shown step is.
   Under them three names in the table's small capitals, each over a box with the chosen role's answer. The names stand still: the gaps are the same for every role,
   and a box whose answer is longer or shorter takes its height as a step's card does (.sk-h) */
.sch-rl{margin-top:12px}
.rl-g{display:flex;flex-wrap:wrap;gap:8px}
/* a choice changes its ground and its text at once: a ground that faded under a text that had already changed would hide the word for the fade's length */
.sch-btn[role="radio"]{transition:none}
/* Previous and Next too: when one becomes available or unavailable its ground, edge and word change together */
.st-ctl .sch-btn{transition:none}
/* Install: its edge fades with its fill */
.sk-cta .sch-btn{transition:background-color .35s var(--soft),border-color .35s var(--soft)}
/* on the dark page its word changes with its ground (white on the blue, dark on the light blue), so there the two change at once: a fade under a word already changed drops it to 1.8:1 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sk-cta .sch-btn.is-fill{transition:none}}
:root[data-theme="dark"] .sk-cta .sch-btn.is-fill{transition:none}
.sch-btn[aria-checked="true"]{background:var(--text);color:var(--bg);cursor:default}
.rl-o{margin-top:4px;font-size:14px;line-height:1.5}
.rl-o p{margin:0}.rl-o .rl-k{margin:14px 0 2px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rl-o ul{list-style:none;margin:0;padding:0}.rl-o li+li{margin-top:2px}
/* a finger's targets: the links of a list stand in rows of 44px, and a row's link takes taps over the whole row */
@media (hover:none){.rl-o li{position:relative;padding:11.5px 0}.rl-o li+li{margin-top:0}.rl-o li a::after{content:"";position:absolute;inset:0}}
/* a table: rules under the rows, the column heads in the "On this page" heading's small capitals. Under 640px a row is a block: the role, then each cell under its column's name */
.tbl{margin:12px 0 18px}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tbl th,.tbl td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl thead th{padding-top:0;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tbl tbody th{font-weight:650;width:24%}.tbl td:nth-child(2){width:30%}
@media (max-width:640px){
  .tbl table,.tbl tbody,.tbl tr,.tbl tbody th,.tbl td{display:block;width:auto}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tbody tr{padding:12px 0;border-bottom:1px solid var(--line)}.tbl tbody tr:first-child{padding-top:0}
  .tbl tbody th,.tbl td,.tbl td:nth-child(2){padding:0;border:0;width:auto}
  .tbl td{margin-top:6px}
  .tbl td::before{content:attr(data-l);display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
}

/* 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)}
/* hover: like directive cards, the active tile comes forward, the others step back */
@media (hover:hover){
  .tile:hover{text-decoration:none}
  .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)}
@media (hover:hover){.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)}
/* 20.7px at 1.75px in the footer row's 18px: the arrow stands out 1.35px above and below, inside the card's 16px padding */
.go svg{width:20.7px;height:20.7px;margin:-1.35px 0;fill:none;stroke:currentColor;stroke-width:2.029;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tile:hover .go,.ch-card:hover .go{transform:translateX(5px)}}

/* the consent banner: a bar at the window's bottom, the header's mirror: the page's ground and a hairline over it, the window wide, and its content
   between the header's own edges: the text starts where the header's title does (the bar's 20px, the menu button's 36px, the 16px after it), the last
   control ends where the theme button does. Up to 860px wide the bar's content starts and ends at the window's 16px.
   Not a dialog: nothing is dimmed, the page under it works, and the body keeps the bar's height free under the footer (--consent-h, app.js).
   It comes and goes at once, without motion; across a page change it stays in place (a view-transition group of its own).
   Shown by script alone: without it nothing is counted and the bar stays hidden.
   Under the menu's scrim (35), so an open drawer dims it with the page. In the page's source it follows the skip link, so the keyboard reaches its buttons before the header's */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:32;background:var(--bg);border-top:1px solid var(--line);font-size:14px;view-transition-name:consent}
.consent[hidden]{display:none}
.consent-sh{max-width:var(--shell);margin:0 auto;padding:0 20px}
.consent-pad{min-width:0;padding:12px 0 12px 52px;container-type:inline-size}
.consent-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.consent-t{flex:1 1 100%}.consent-t p{margin:0}
/* room of 660px and over holds the text and the buttons in one row, the buttons (and the cross after them) at its end; narrower, the buttons stand under the text.
   The text takes all the room up to the buttons and wraps only when it does not fit */
@container (min-width:660px){.consent-in{flex-wrap:nowrap;justify-content:flex-start}.consent-t{flex:1 1 320px}.consent-in .consent-b{margin-left:auto}}
/* the state has its own line under the description; the words that carry it are bold */
.consent-t .consent-s{margin-top:6px}
.consent-s strong{font-weight:700}
.consent-b{flex:none;display:flex;gap:8px;margin:0}
/* a column too narrow for both buttons in a row (the widest pair is "Analytics allowed", 8px, "Decline analytics"): they stand one under the other, the column wide */
@container (max-width:306px){.consent-b{flex:1 1 100%;flex-direction:column}}
/* both answers are one button, the text button of "Clear history" at the bar's size: no fill, a 1px rule, 6px corners, weight 600. The rule is the text's colour,
   so the button's edge is seen on the page; under the pointer it takes the Contents item's hover tint */
.consent-btn{appearance:none;margin:0;padding:6px 12px;border:1px solid var(--text);border-radius:6px;background:transparent;color:var(--text);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--soft)}
@media (hover:hover){.consent-btn:not([aria-disabled="true"]):hover{background:var(--home-hov)}}
/* the answer that holds is a fact, not an offer: the same box without its rule, filled with the Contents item's selected tint, the text's colour at weight 700; nothing under the pointer */
.consent-btn[aria-disabled="true"]{border-color:transparent;background:var(--home-sel);font-weight:700;cursor:not-allowed}
/* a finger's target: 44px high */
@media (hover:none){.consent-btn{min-height:44px}}
/* brought back from the footer, with an answer given, the bar can be closed without a new one: the search field's cross, in the column's
   top right corner. Its box is 36px and the drawn cross 16px, so the box stands 10px out of the content's edge and 8px over its top: the cross ends on that
   edge, on the text's first line, and the text beside it keeps clear of the box (--x-in, the box's part inside the column). So it stands while the buttons
   are under the text. A finger's target is 44px, 4px beyond the box on every side */
.consent{--x-in:26px}
.consent-x{position:absolute;z-index:0;top:-8px;right:-10px;width:36px;height:36px;display:grid;place-items:center;margin:0;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer}
.consent-x[hidden]{display:none}
.consent-x svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round}
.consent-x::before{content:"";position:absolute;z-index:-1;inset:5px;border-radius:6px}
@media (hover:hover){.consent-x:hover::before{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep)}}
.consent-x:focus-visible{outline:none}.consent-x:focus-visible::before{background:var(--home-live);box-shadow:inset 0 0 0 1px var(--home-deep);outline:2px solid var(--link);outline-offset:2px}
@media (hover:none){.consent{--x-in:30px}.consent-x::after{content:"";position:absolute;inset:-4px}}
.consent.can-close .consent-t{padding-right:var(--x-in)}
/* beside the text the cross is the row's last item: after the buttons, 24px from them (the row's gap), on the middle of their height */
@container (min-width:660px){.consent-x{position:relative;top:auto;right:auto;flex:none}.consent.can-close .consent-t{padding-right:0}}
/* the bar's words can be selected, the buttons' too; a drag that leaves a selection in a button is not a press (app.js) */
.consent,.consent-btn{-webkit-user-select:text;user-select:text}
.consent-x{-webkit-user-select:none;user-select:none}
body{padding-bottom:var(--consent-h,0px)}
/* nothing stands under the shown bar: the menu and the "On this page" list end at its top (their heights above), the search results end 8px over it
   (16px on a narrow screen, as over the window's edge), and what the keyboard focuses is scrolled clear of it */
html{scroll-padding-bottom:var(--consent-h,0px)}

/* 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.is-min .hm-q,.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 */
  section>h2.dh .arrow{display:none}section>h2.dh .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}
  /* the quote is as large as one line clear of the arrow allows: its width is 24.6 times its font size, and 75px keep it 8px from the chevron on both sides;
     the width is the banner's own (cqw), so a scrollbar that takes room does not push the line onto the chevron; the focus ring is as wide as that line */
  .hm{gap:8px;--hm-rise:10px}.hm-mark{width:34px}.hm-t{font-size:14px}.cover-home{container-type:inline-size;--hm-q:clamp(11px,calc((100vw - 75px)/24.6),13.34px)}@supports (width:1cqw){.cover-home{--hm-q:clamp(11px,calc((100cqw - 75px)/24.6),13.34px)}}
  .hm-q{top:36px;font-size:var(--hm-q)}.hm-a{font-size:10px}.hm:is(.is-q,:focus-visible) .hm-mark{transform:translateY(-7px) scale(1.15)}.cover.is-min .hm.is-q .hm-t{opacity:1;transform:none;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.hm:focus-visible::after{inset:-11px auto;left:50%;width:calc(24.6em + 6px);margin-left:calc(-12.3em - 3px);font-size:var(--hm-q)}.cv-arr{width:52px}.cv-prev::before{left:6px}.cv-prev svg{left:11.7px}.cv-next::before{right:6px}.cv-next svg{right:11.7px}.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 viewport: the header sticks at 0, so the list starts 6px under it */
  .results{position:fixed;top:calc(var(--top) + 6px);left:16px;right:16px;max-height:calc(100vh - var(--top) - var(--consent-h,0px) - 22px);max-height:calc(100dvh - var(--top) - var(--consent-h,0px) - 22px)}
  .main{padding:16px 16px 64px}
  .foot{grid-column:1;padding:0 16px 32px}
  .foot a,.foot-b{padding:14px 6px;margin:-14px -6px}  /* touch target: 44px tall, the line keeps its place */
  .foot-in{row-gap:28px}  /* the groups' lines stand 44.5px apart, so the touch targets of one line do not reach into the other's */
  .consent-sh{padding:0 16px}.consent-pad{padding:12px 0}
  .pager{--pg-x:12px}  /* the box stays 4px inside the 16px gutter, its hover lift too */
}
/* phones: the field gets the title's room; inside the same home link the emblem stands in for it, and the link is named by the emblem's hidden text.
   Touch target: the link takes taps 4px beyond its 36px box on every side, 44x44; the drawn emblem and the focus ring keep their size */
@media (max-width:520px){.brand{flex:none;border-radius:8px;position:relative}.brand::after{content:"";position:absolute;inset:-4px}.brand-t{display:none}.brand-m{display:grid}.top-in{gap:8px}}
/* the menu and theme buttons take taps the same way: 4px beyond their 36px boxes, 44x44. The menu button's area ends where the emblem's begins;
   the theme button's is 4px clear of the search field. The drawn icons, the boxes and the focus rings keep their size */
@media (max-width:520px){.menu-btn,.theme-btn{position:relative}.menu-btn::after,.theme-btn::after{content:"";position:absolute;inset:-4px}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  /* the skill's page: a ring of the rail takes its larger size at once, with no growth to watch (the rule above ends its transition); a box's height changes at once
     (app.js, skGrow), the copied box's ground comes and goes at once, and the mark of an external link moves only without this preference */
  /* the tooltip keeps its fade and loses its move */
  .tip,.tip.up,.tip.at-r,.tip.at-l{transform:none;transition:opacity .15s linear,visibility 0s .15s!important}.tip.on{transition:opacity .15s linear,visibility 0s!important}
  /* the banner's emblem does not grow and its texts do not move; caption and quote keep their fade */
  .hm:is(.is-q,:focus-visible) .hm-mark,.hm:is(.is-q,:focus-visible) .hm-t{transform:none}.hm .hm-q{transform:translateX(-50%)}
  .hm .hm-t,.hm .hm-q{transition:opacity .15s linear!important}
  /* the theme icon keeps a fade between sun and moon and loses the morph */
  .ic-theme .th-cut{display:none}.ic-theme .th-rays,.ic-theme .th-disc{transform:none}.ic-theme *{transition:opacity .15s linear!important}}
@media print{.top,.sidebar,.toc,.pager,.scrim,.consent{display:none!important}body{padding-bottom:0}.shell{display:block}.main{padding:0}
  /* the skill's page on paper is its form without script: every step, the roles' table, no controls */
  .st-ctl,.st-rail,.sch-rl,.code-copy{display:none!important}.sch-st .st-i[hidden],.tbl[hidden]{display:block!important;content-visibility:visible!important}.st-i+.st-i{margin-top:16px}}
/* search result tints */
.rc1{--ch-sel-l:#ffd5fd;--ch-hov-l:#fee9fd;--ch-sel-d:#4b2a4b;--ch-hov-d:#372137;--ch-live-l:#fec3fd;--ch-live-d:#5c305c;--ch-deep-l:#feb3fd;--ch-deep-d:#6b346b}.rc2{--ch-sel-l:#bdefb8;--ch-hov-l:#d2f9cf;--ch-sel-d:#1c3d1a;--ch-hov-d:#182d16;--ch-live-l:#a8e6a3;--ch-live-d:#1d491a;--ch-deep-l:#95de8f;--ch-deep-d:#1a5417}.rc3{--ch-sel-l:#93f2f1;--ch-hov-l:#b5fcfb;--ch-sel-d:#033d3d;--ch-hov-d:#012e2e;--ch-live-l:#6ee9e8;--ch-live-d:#014848;--ch-deep-l:#3ce2e1;--ch-deep-d:#055252}.rc4{--ch-sel-l:#ffdcb7;--ch-hov-l:#ffecd9;--ch-sel-d:#4e2f04;--ch-hov-d:#39240a;--ch-live-l:#ffce99;--ch-live-d:#5d3801;--ch-deep-l:#ffc17b;--ch-deep-d:#694003}.rc5{--ch-sel-l:#f6f063;--ch-hov-l:#fcf997;--ch-sel-d:#3a3701;--ch-hov-d:#2b2a08;--ch-live-l:#f0e710;--ch-live-d:#454202;--ch-deep-l:#e8df01;--ch-deep-d:#4e4b00}.rc6{--ch-sel-l:#feddab;--ch-hov-l:#ffedd2;--ch-sel-d:#4a3102;--ch-hov-d:#372508;--ch-live-l:#fad091;--ch-live-d:#583b01;--ch-deep-l:#f0c688;--ch-deep-d:#634301}.rc7{--ch-sel-l:#ffdcb5;--ch-hov-l:#ffecd8;--ch-sel-d:#4d2f03;--ch-hov-d:#39240a;--ch-live-l:#ffce94;--ch-live-d:#5c3902;--ch-deep-l:#fec176;--ch-deep-d:#684001}.rc8{--ch-sel-l:#aff1c4;--ch-hov-l:#c9fbd8;--ch-sel-d:#0e3e23;--ch-hov-d:#102e1c;--ch-live-l:#97e8b2;--ch-live-d:#014b27;--ch-deep-l:#7ee1a1;--ch-deep-d:#02552d}.rc9{--ch-sel-l:#95f2e9;--ch-hov-l:#b6fcf5;--ch-sel-d:#013d39;--ch-hov-d:#022e2b;--ch-live-l:#71eadf;--ch-live-d:#044944;--ch-deep-l:#42e2d6;--ch-deep-d:#03524d}
/* Contents tints, the brick edge, the consent button's orange */
:root{--book:#1929c4;--book-deep:#1202af;--book-light:#7fb8e6}:root{--home-sel:#cde4ff;--home-hov:#e5f0fe;--home-live:#b9d9ff;--home-deep:#a8d0ff;--home-line:#5f92cc;--brick:#da674b;--brick-fill:#c35338;--ga:#c88802}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--home-sel:#183759;--home-hov:#152a40;--home-live:#16426e;--home-deep:#174a7e;--home-line:#3b6da3;--brick:#be4e33;--brick-fill:#be4e33;--ga:#f9ab00}}:root[data-theme="dark"]{--home-sel:#183759;--home-hov:#152a40;--home-live:#16426e;--home-deep:#174a7e;--home-line:#3b6da3;--brick:#be4e33;--brick-fill:#be4e33;--ga:#f9ab00}