/* Alcuin site styles. Shared by index.html and try.html.
   Fonts: IBM Plex Serif + IBM Plex Mono (SIL OFL), self-hosted, Latin subset. No third-party requests. */
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-serif-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
/* Layout concept: a manuscript read by candlelight. Night by default (App Night ground, ivory ink),
   parchment by day. The hero is a doorway in the shape of the Alcuin arch, lit from within, where the review plays out.
   Chapters follow the brand's own sequence (Browse, Query, Review, Apply) and end in a colophon:
   the record of how this copy was made, which for software is build provenance.
   The page owns its mode: dark unless the visitor picks day with the toggle (data-mode on <html>). */
:root{
  color-scheme:dark;
  --bg:#0B1528; --surface:#101D33; --surface-2:#0D182C; --ink:#ECEFF4; --ink-2:#A7B2C3; --rule:#24324B; --rule-strong:#3A4A66;
  --star:#8DB3DD; --butter:#F2CF7E; --prod:#F0A0A0;
  --cta-bg:#FCFBF8; --cta-ink:#041D32; --cta-hover:#E3E7EE;
  --band:#030812; --trust-top:color-mix(in oklab,#8DB3DD 70%,transparent); --trust-glow:rgb(141 179 221/.10); --band-ink:#FCFBF8; --band-ink-2:#B9C4D3; --band-link:#A9C6E8; --band-rule:rgba(252,251,248,.14);
  --syn-k:#B4B0E0; --syn-s:#A9CDB0; --syn-n:#E6B8A2; --syn-t:#DCC7A1; --syn-c:#8C9AB2;
  --staged-bg:color-mix(in oklab,#F2CF7E 22%,#101D33); --shadow:0 24px 50px -30px rgba(0,0,0,.7);
  --serif:"IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.125rem; --t-lg:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --t-xl:clamp(2rem,1.4rem + 2.6vw,3.5rem); --t-hero:clamp(3.25rem,1.6rem + 7vw,8rem);
  --section:clamp(64px,7vw,96px); --r:8px; --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#F1EFE9; --surface:#FCFBF8; --surface-2:#F1EFE9; --ink:#041D32; --ink-2:#4A5566; --rule:#D6D1C4; --rule-strong:#9AA3AF;
  --star:#336791; --prod:#A83434;
  --cta-bg:#041D32; --cta-ink:#FCFBF8; --cta-hover:#0B2D4C;
  --band:#041D32; --trust-top:var(--rule); --trust-glow:transparent; --band-rule:rgba(252,251,248,.16);
  --syn-k:#4B3F99; --syn-s:#2F6B4F; --syn-n:#9A4A2A; --syn-t:#7A5A1E; --syn-c:#6B7586;
  --staged-bg:color-mix(in oklab,#F2CF7E 55%,#FCFBF8); --shadow:0 18px 40px -30px rgba(4,29,50,.4);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
table{color:inherit;font-size:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation:none!important}}
body{background:var(--bg);color:var(--ink);font:400 var(--t-md)/1.65 var(--serif);-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--star);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--star);outline-offset:3px;border-radius:3px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
code,pre,kbd{font-family:var(--mono)}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--cta-bg);color:var(--cta-ink);padding:8px 12px;border-radius:var(--r);z-index:50}
.skip:focus{left:16px}
.label{font:500 var(--t-xs)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 1rem/1 var(--serif);text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:background-color .18s,color .18s,transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink);border-color:var(--cta-bg)}
.btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.btn svg{width:18px;height:18px}

/* header
   At rest (top of the page): logo, Try the review, Docs, Source, mode.
   Reading (the hero's Download has scrolled under the bar): the bar slims, Download opens out beside the mode switch,
   and Try the review turns into a running head naming the current chapter. Both share one cell pinned to its right
   edge, so the arrow stays put as chapter names change. Without script the bar stays at rest. */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;transition:min-height .25s var(--ease)}
.brand{display:inline-flex;color:var(--ink);padding:6px 0;flex:none}
.lockup{height:28px;width:auto;display:block;transition:height .25s var(--ease)}
.head-r{display:flex;align-items:center;gap:20px;min-width:0}
.nav{display:flex;align-items:center;gap:24px;font:400 var(--t-sm)/1 var(--serif)}
.nav>a{display:none;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;padding:10px 0}
.nav>a:hover{color:var(--ink)}
.nav .ext{width:11px;height:11px;opacity:.7}
.swap{position:relative;display:grid;justify-items:end;align-items:center}
.swap>.try,.swap>.run{grid-area:1/1;transition:opacity .25s,transform .25s var(--ease),visibility 0s}
.try{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;white-space:nowrap;padding:10px 0}
.try .arrow{color:var(--butter)}
:root[data-mode="light"] .try .arrow{color:var(--star)}
.try .short{display:none}
.run{display:inline-flex;align-items:center;gap:10px;margin-right:-12px;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  font:400 var(--t-sm)/1 var(--serif);font-variant:small-caps;letter-spacing:.06em;transition:background-color .18s,color .18s}
.run:hover,.run[aria-expanded="true"]{background:var(--surface);color:var(--ink)}
.run i{font:500 var(--t-xs)/1 var(--mono);font-style:normal;font-variant:normal;letter-spacing:0;color:var(--butter)}
:root[data-mode="light"] .run i{color:var(--star)}
.run i:empty{display:none}
.run svg{width:10px;height:10px;opacity:.6;transition:transform .2s}
.run[aria-expanded="true"] svg{transform:rotate(180deg)}
.swap>.run{opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s,background-color .18s,color .18s}
.reading .swap>.run{opacity:1;transform:none;visibility:visible;transition:opacity .25s,transform .25s var(--ease),visibility 0s,background-color .18s,color .18s}
.reading .swap>.try{opacity:0;transform:translateY(4px);visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
.toc{position:absolute;right:-12px;top:calc(100% + 14px);width:min(280px,calc(100vw - 32px));display:grid;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow)}
.toc a{display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;padding:9px 10px;border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:var(--t-sm)}
.toc a:hover{background:var(--surface-2);color:var(--ink)}
.toc a i{font:500 var(--t-xs)/1 var(--mono);font-style:normal;opacity:.7}
.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"] i{color:var(--butter);opacity:1}
:root[data-mode="light"] .toc a[aria-current="true"] i{color:var(--star)}
.toc hr{border:0;border-top:1px solid var(--rule);margin:4px 6px}
.head-dl{display:none;grid-template-columns:0fr;margin-left:-20px;opacity:0;visibility:hidden;transition:grid-template-columns .3s var(--ease),margin-left .3s var(--ease),opacity .25s,visibility 0s .3s}
.head-dl>span{overflow:hidden;min-width:0;padding:3px}
.head .btn{min-height:40px;padding:0 18px;font-size:var(--t-sm);white-space:nowrap}
.head .btn svg{width:16px;height:16px}
.reading .head-dl{grid-template-columns:1fr;margin-left:0;opacity:1;visibility:visible;transition:grid-template-columns .3s var(--ease),margin-left .3s var(--ease),opacity .25s .05s,visibility 0s}
.reading .wrap{min-height:56px}
.reading .lockup{height:24px}
.head-dl.always{grid-template-columns:1fr;margin-left:0;opacity:1;visibility:visible}
/* phone: Try it as a small pill, no Docs, Source or Download in the bar */
@media (max-width:719px){
  .try{border:1.5px solid var(--rule-strong);border-radius:999px;padding:9px 14px;font-weight:600}
  .try .long{display:none}.try .short{display:inline}
  .run{margin-right:-8px;padding:8px}
  .toc{right:-8px}
}
@media (min-width:720px){.nav>a{display:inline-flex}.head-dl{display:grid}}
section[id]{scroll-margin-top:64px}
:is(.try,.run,.toc a,.nav>a):focus-visible{outline:2px solid var(--star);outline-offset:3px;border-radius:6px}
.mode{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .18s,border-color .18s}
.mode:hover{background:var(--surface);border-color:var(--ink-2)}
.mode svg{width:18px;height:18px}
.mode .sun{display:none}
:root[data-mode="dark"] .mode .sun,:root:not([data-mode]) .mode .sun{display:block}
:root[data-mode="dark"] .mode .moon,:root:not([data-mode]) .mode .moon{display:none}

/* hero */
.hero{padding-block:clamp(40px,6vw,96px) clamp(56px,7vw,112px)}
.hero .wrap{display:grid;gap:clamp(48px,5vw,64px);align-items:center}
@media (min-width:1000px){.hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.hero-copy{display:grid;gap:28px;min-width:0}
.hero h1{font-weight:700;font-size:var(--t-hero);line-height:.9;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--star)}
.lede{font-size:var(--t-lg);line-height:1.45;color:var(--ink-2);max-width:34ch}
.lede strong{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.small{font:400 var(--t-xs)/1.5 var(--mono);color:var(--ink-2)}

/* the doorway: candlelight spills from the arch; inside, the review plays out */
:root{--candle:246 215 154;--glow-a:.30;--pool-a:.20;--mote-a:.75}
:root[data-mode="light"]{--candle:214 160 64;--glow-a:.22;--pool-a:.16;--mote-a:.5}
.hero{overflow-x:clip}
.doorway{margin:0;display:grid;justify-items:center;gap:26px;min-width:0}
.door{position:relative;display:block;width:min(100% - 40px,460px);aspect-ratio:10/11;margin-top:26px;container-type:inline-size;color:inherit;text-decoration:none;border-radius:50% 50% 0 0 / 46% 46% 0 0;--px:0;--py:0}
.door:focus-visible{outline:2px solid var(--star);outline-offset:20px}
.door .glow{position:absolute;inset:-22% -30% -6%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 58%,rgb(var(--candle)/var(--glow-a)),rgb(var(--candle)/calc(var(--glow-a)*.35)) 50%,transparent 78%);
  transition:opacity .4s;opacity:.85}
.door:hover .glow,.door:focus-visible .glow{opacity:1}
.door .pool{position:absolute;left:-45%;right:-45%;top:100%;height:110px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 48% 70% at 50% 0,rgb(var(--candle)/var(--pool-a)),transparent 72%)}
.door canvas{position:absolute;inset:-12% -20% -10%;width:140%;height:122%;z-index:3;pointer-events:none}
.door svg.frame{position:absolute;overflow:visible;pointer-events:none;z-index:2}
.door .inner{inset:0;width:100%;height:100%}
.door .outer{inset:-14px -14px 0 -14px;width:calc(100% + 28px);height:calc(100% + 14px)}
.door .inner path{fill:none;stroke:rgb(var(--candle)/.55);stroke-width:1.5}
.door .outer path{fill:none;stroke:var(--rule-strong);stroke-width:1}
.door .keystone{position:absolute;left:50%;top:-14px;width:30px;height:46px;transform:translate(-50%,-50%);color:var(--star);z-index:4;filter:drop-shadow(0 0 10px rgb(var(--candle)/.35))}
.door .keystone path{fill:currentColor;stroke:var(--bg);stroke-width:5;paint-order:stroke}
.door .step{position:absolute;left:-34px;right:-34px;bottom:-1px;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgb(var(--candle)/.6),transparent)}

/* the room inside the arch: the app's own navy colorway, lit from within */
.scene{position:absolute;inset:0;z-index:1;overflow:hidden;background:#0B1B36;color:#E7EBF2;font:400 2.75cqw/1.35 var(--mono);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110V50A50 50 0 0 1 100 50V110Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110V50A50 50 0 0 1 100 50V110Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 30%,rgb(246 215 154/.13),transparent 70%),linear-gradient(to bottom,transparent 70%,rgb(4 12 26/.55))}
.scene-in{position:absolute;inset:0;padding:27% 9% 0;display:grid;align-content:start;gap:.9em}
.s-bar{display:flex;align-items:center;gap:.6em;font:600 1.05em/1 system-ui,-apple-system,"Segoe UI",sans-serif;color:#E7EBF2}
.s-bar i{width:.55em;height:.55em;border-radius:50%;background:#A9CDB0}
.s-bar span{color:#7A88A0;font-weight:400}
.s-bar b{margin-left:auto;font:600 .95em/1 var(--mono);color:#E7EBF2;border-bottom:2px solid #9DBFE6;padding-bottom:.45em}
.s-grid{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.s-grid th{font-weight:500;color:#93A0B5;text-align:left;padding:.45em .6em;border-bottom:1px solid #24324B}
.s-grid td{padding:0 .6em;height:2.25em;border-bottom:1px solid #1B2A44;white-space:nowrap}
.s-grid .num{text-align:right}
.s-grid .id{color:#9DBFE6}
.s-grid .st{position:relative}
.s-grid .new{display:none}
.scene.edited .target .old,.scene.applied .target .old{display:none}
.scene.edited .target .new,.scene.applied .target .new{display:inline}
.scene.edited .target td{background:rgb(242 207 126/.07)}
.scene.edited .target .st{background:rgb(242 207 126/.22);box-shadow:inset 0 0 0 1px #F2CF7E;color:#FFF3D6}
.scene.applied .target td{animation:settle 1.6s var(--ease)}
@keyframes settle{from{background:rgb(169 205 176/.35)}to{background:transparent}}
.s-pending{display:flex;align-items:center;gap:.6em;padding:.6em .8em;border:1px solid rgb(242 207 126/.45);background:rgb(242 207 126/.1);border-radius:.4em;color:#FBE6B6;font:500 1em/1 system-ui,-apple-system,sans-serif;
  opacity:0;transform:translateY(.6em);transition:opacity .35s,transform .35s var(--ease)}
.s-pending::before{content:"";width:.6em;height:.6em;border-radius:2px;background:#F2CF7E}
.s-pending b{margin-left:auto;background:#fff;color:#0B1B36;border-radius:.35em;padding:.4em .8em;font-weight:600}
.scene.pending .s-pending{opacity:1;transform:none}
.s-review{position:absolute;left:6%;right:6%;bottom:0;padding:1em 1.1em 1.2em;background:#081429;border:1px solid #24324B;border-bottom:0;border-radius:.6em .6em 0 0;box-shadow:0 -1.5em 3em rgb(0 0 0/.45);
  transform:translateY(105%);transition:transform .55s var(--ease)}
.scene.review .s-review{transform:none}
.s-rh{display:flex;justify-content:space-between;gap:1em;font:600 .95em/1 system-ui,-apple-system,sans-serif;color:#E7EBF2;padding-bottom:.8em;border-bottom:1px solid #24324B;margin-bottom:.8em}
.s-rh span{color:#93A0B5;font-weight:400}
.s-review pre{margin:0;font:inherit;line-height:1.7;color:#E7EBF2}
.s-review pre span.l{display:block;opacity:0;transform:translateX(-.4em);transition:opacity .3s,transform .3s var(--ease)}
.scene.review .s-review pre span.l{opacity:1;transform:none}
.scene.review .s-review pre span.l:nth-child(2){transition-delay:.35s}
.scene.review .s-review pre span.l:nth-child(3){transition-delay:.7s}
.scene.review .s-review pre span.l:nth-child(4){transition-delay:1.05s}
.scene.review .s-review pre span.l:nth-child(5){transition-delay:1.4s}
.s-review .k{color:#B4B0E0}.s-review .s{color:#A9CDB0}.s-review .n{color:#E6B8A2}.s-review .t{color:#DCC7A1}
.s-apply{display:flex;justify-content:flex-end;gap:.6em;margin-top:.9em;font:600 .95em/1 system-ui,-apple-system,sans-serif}
.s-apply span{border:1px solid #24324B;border-radius:.35em;padding:.45em .8em;color:#E7EBF2;font-weight:500}
.s-apply b{background:#fff;color:#0B1B36;border-radius:.35em;padding:.45em .9em;transition:transform .15s,box-shadow .2s}
.scene.press .s-apply b{transform:scale(.94);box-shadow:0 0 0 .35em rgb(255 255 255/.18)}
.s-toast{position:absolute;left:50%;bottom:7%;transform:translate(-50%,.6em);opacity:0;white-space:nowrap;padding:.55em .9em;border-radius:999px;background:rgb(169 205 176/.14);border:1px solid rgb(169 205 176/.5);color:#CFE6D4;font:500 .95em/1 system-ui,-apple-system,sans-serif;transition:opacity .35s,transform .35s var(--ease)}
.scene.applied .s-toast{opacity:1;transform:translate(-50%,0)}

.doorway figcaption{display:grid;gap:6px;justify-items:center;text-align:center}
.doorway .enter{font:600 var(--t-md)/1.3 var(--serif);color:var(--ink);text-decoration:none;display:inline-flex;gap:.5em;align-items:center}
.doorway .enter span{color:var(--star);transition:transform .25s var(--ease)}
.doorway .enter:hover span,.door:hover ~ figcaption .enter span{transform:translateX(4px)}
.doorway .note{font:400 var(--t-xs)/1.5 var(--mono);color:var(--ink-2)}
@media (prefers-reduced-motion: no-preference){
  .door .glow{animation:flicker 7s ease-in-out infinite}
  @keyframes flicker{0%,100%{opacity:.85}18%{opacity:.95}22%{opacity:.8}47%{opacity:1}53%{opacity:.88}78%{opacity:.96}}
  .door .keystone{animation:twinkle 5s ease-in-out infinite}
  @keyframes twinkle{0%,100%{filter:drop-shadow(0 0 8px rgb(var(--candle)/.25))}50%{filter:drop-shadow(0 0 16px rgb(var(--candle)/.55))}}
}

/* proof row: the four facts a developer checks first, each with its reason */
.proof{border-block:1px solid var(--rule)}
.proof-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.proof-row li{display:grid;gap:4px;align-content:start;padding:16px 0;border-top:1px solid var(--rule)}
.proof-row li:nth-child(-n+2){border-top:0}
.proof-row b{font:600 var(--t-sm)/1.3 var(--serif)}
.proof-row span{font-size:var(--t-xs);line-height:1.5;color:var(--ink-2)}
.proof-row a{font-size:var(--t-xs);text-decoration:none;justify-self:start}
.proof-row a:hover{text-decoration:underline}
@media (min-width:560px){
  .proof-row{column-gap:28px}
  .proof-row li{padding-block:18px}
  .proof-row b{font-size:var(--t-md)}
  .proof-row :is(span,a){font-size:var(--t-sm)}
}
@media (min-width:1000px){
  .proof-row{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}
  .proof-row li{border-top:0;border-left:1px solid var(--rule);padding:26px 28px}
  .proof-row li:first-child{border-left:0;padding-left:0}
}
/* chapters */
.chapter{padding-block:var(--section)}
.chapter + .chapter{border-top:1px solid var(--rule)}
.ch-head{display:grid;grid-template-columns:clamp(56px,9vw,128px) minmax(0,1fr);gap:0 clamp(16px,3vw,40px);align-items:start;margin-bottom:clamp(36px,5vw,56px)}
.ch-head>div{min-width:0}
.numeral{font:700 clamp(2.75rem,1.8rem + 4vw,5.25rem)/.8 var(--serif);color:var(--star);letter-spacing:-.02em;padding-top:2px;border-right:1px solid var(--rule);padding-right:clamp(12px,2vw,28px);text-align:right;height:100%}
.ch-head h2{font-weight:700;font-size:var(--t-xl);line-height:1.04;letter-spacing:-.028em;max-width:20ch}
.ch-head .label{display:block;margin-bottom:12px}
.ch-head p{margin-top:16px;color:var(--ink-2);max-width:58ch}


.folio{display:grid;gap:32px}
.folio{align-items:start}
@media (min-width:1000px){.folio{grid-template-columns:minmax(0,1fr) 300px;gap:48px}}
.folio>*{min-width:0}
.plate{margin:0;display:grid;gap:10px}
/* the crop starts at the grid's row numbers and runs to the window's right edge (x 318, y 40, 962 x 440 of 1280 x 800: the grid header to row 11, the whole row panel) */
.crop{position:relative;overflow:hidden;aspect-ratio:962/440;max-width:100%;border-radius:6px;box-shadow:0 0 0 1px var(--rule-strong),var(--shadow);background:#0B1B36}
.crop img{display:block;width:133.06%;max-width:none;height:auto;margin-left:-33.06%;margin-top:-4.158%}
.whole{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid #3A4A66;background:rgb(11 21 40/.88);color:#ECEFF4;font:500 var(--t-xs)/1 var(--mono);cursor:pointer;backdrop-filter:blur(4px);transition:border-color .18s,background-color .18s}
.whole:hover{border-color:#A7B2C3;background:rgb(11 21 40/.96)}
.whole svg{width:12px;height:12px}
@media (max-width:599px){.whole{right:8px;bottom:8px;min-height:28px;padding:0 10px;font-size:11px;gap:6px}}
.whole:focus-visible{outline:2px solid #8DB3DD;outline-offset:3px}
.plate figcaption{font:400 var(--t-xs)/1.5 var(--mono);color:var(--ink-2)}
.shot-dlg{padding:0;border:0;background:transparent;max-width:min(1280px,94vw);overflow:visible}
.shot-dlg::backdrop{background:rgb(2 8 18/.82)}
.shot-dlg img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px #3A4A66}
.shot-dlg form{display:flex;justify-content:flex-end;margin-top:12px}
.shot-dlg .btn{min-height:40px;color:#ECEFF4;border-color:#ECEFF4;background:transparent}
.shot-dlg .btn:hover{background:rgb(255 255 255/.08)}
/* notes in a row under a wide picture; they aren't a sequence, so no numbers */
.notes{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0;display:grid;gap:22px 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.notes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.notes li{display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--t-sm);line-height:1.55}
.notes b{font-weight:600}
.notes span{color:var(--ink-2)}
.page{background:var(--surface);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);overflow:hidden}
.page-head{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--rule);font:500 var(--t-xs)/1.3 var(--mono);color:var(--ink-2)}
.page pre{margin:0;padding:20px;overflow-x:auto;font:400 clamp(12.5px,.75rem + .2vw,14px)/1.75 var(--mono);color:var(--ink)}
.page .k{color:var(--syn-k)} .page .s{color:var(--syn-s)} .page .n{color:var(--syn-n)} .page .t{color:var(--syn-t)} .page .c{color:var(--syn-c)}
.page .err{text-decoration:underline wavy var(--prod);text-underline-offset:4px;text-decoration-thickness:1.5px}
.errbox{border-top:1px solid var(--rule);padding:14px 20px;font:400 13px/1.6 var(--mono);color:var(--prod);background:color-mix(in oklab,var(--prod) 6%,var(--surface))}
.errbox span{color:var(--ink-2)}
/* the wide editor: on wide screens the server's error sits just under the misspelled column, as in the app */
.editor{position:relative;--fs:clamp(12.5px,.75rem + .25vw,15px);--head:45px}
.editor pre{font-size:var(--fs);padding:22px 24px}
@media (min-width:860px){
  .editor pre{padding-bottom:40px}
  /* line 2, under "totl": the head bar, the pre's top padding, two lines, then 13 characters in */
  .editor .errbox{position:absolute;top:calc(var(--head) + 22px + 2 * 1.75 * var(--fs) + 6px);left:calc(24px + 13 * .6 * var(--fs) - 18px);max-width:min(440px,calc(100% - 140px));
    border:1px solid color-mix(in oklab,var(--prod) 55%,transparent);border-radius:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);padding:10px 14px}
  .editor .errbox::before{content:"";position:absolute;left:16px;top:-6px;width:10px;height:10px;background:inherit;border-left:inherit;border-top:inherit;transform:rotate(45deg)}
}
.staged{background:var(--staged-bg);box-shadow:0 0 0 1px #D9AE4C;border-radius:2px;padding:0 2px}
.page-foot{border-top:1px solid var(--rule);padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;font:400 var(--t-xs)/1.4 var(--mono);color:var(--ink-2)}
.fakebtn{display:inline-flex;gap:8px}
.fakebtn span{border:1px solid var(--rule-strong);border-radius:999px;padding:4px 12px;color:var(--ink)}
.fakebtn span.on{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-ink)}

.list{list-style:none;margin:0;padding:0;display:grid;gap:22px;align-content:start}
.list li{display:grid;gap:4px;padding-left:18px;border-left:2px solid var(--rule)}
.list li.go{border-left-color:var(--star)}
.list a.more{font:500 var(--t-sm)/1.4 var(--mono);text-decoration:none}
.list a.more:hover{text-decoration:underline}
.list b{font-weight:600}
.list span{color:var(--ink-2);font-size:var(--t-sm)}

/* Apply: the heading beside a short ladder of environments, each stricter than the one above */
.ladder{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--ink)}
.ladder li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ladder b{font:600 var(--t-md)/1.4 var(--serif)}
.ladder .ask{font-size:var(--t-sm);line-height:1.55}
.ladder .also{font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.ladder code{font-size:.9em}
.ladder .prod{border-bottom:0;border-radius:4px;margin-inline:-14px;padding-inline:14px;background:linear-gradient(to right,color-mix(in oklab,var(--prod) 8%,transparent),transparent)}
.ladder .prod b{color:var(--prod)}
@media (min-width:560px){
  .ladder li{grid-template-columns:150px minmax(0,1fr);column-gap:20px}
  .ladder .also{grid-column:2}
}
@media (min-width:1000px){
  .apply-side{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .apply .ch-head{grid-template-columns:72px minmax(0,1fr);gap:0 24px;margin-bottom:0}
  .apply .numeral{font-size:3.75rem;padding-right:20px}
  .apply .ch-head h2{font-size:clamp(2rem,1.5rem + 1.2vw,2.6rem);max-width:14ch}
  .apply .ch-head p{font-size:var(--t-sm)}
  .apply .aside{margin-top:16px}
}
.aside{margin-top:20px;font-size:var(--t-sm);color:var(--ink-2);max-width:70ch}

/* trust */
.trust{background:linear-gradient(to bottom,var(--trust-glow),transparent 180px),var(--band);color:var(--band-ink);padding-block:var(--section);border-top:1px solid var(--trust-top);border-bottom:1px solid var(--rule)}
.trust .label{color:var(--band-ink-2)}
.trust-head{display:grid;gap:16px;max-width:760px}
.trust h2{font-weight:700;font-size:var(--t-xl);line-height:1.04;letter-spacing:-.028em}
.trust .intro{color:var(--band-ink-2);max-width:56ch}
.trust-grid{display:grid;gap:40px;margin-top:clamp(36px,5vw,64px)}
@media (min-width:960px){.trust-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}}
.trust-grid>*{min-width:0}
.leave{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--band-rule)}
.leave li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--band-rule)}
.leave svg{width:20px;height:20px;margin-top:4px;color:var(--band-link)}
.leave p{font-size:var(--t-sm);line-height:1.6}
.leave b{font-weight:600;display:block;font-size:var(--t-md)}
.leave span{color:var(--band-ink-2)}
.trust a{color:var(--band-link)}
.trust :focus-visible{outline-color:var(--band-link)}
.trust .small{color:var(--band-ink-2);margin-top:12px}
.term{background:#020A14;border:1px solid var(--band-rule);border-radius:6px;overflow:hidden;font:400 13px/1.65 var(--mono)}
.term-row{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid rgba(252,251,248,.1)}
.term-row:last-child{border-bottom:0}
.term pre{margin:0;flex:1;min-width:0;overflow-x:auto;color:#E7EBF2}
.term .c{color:#8C9AB2}
.copy{flex:none;min-height:30px;min-width:60px;padding:0 10px;border-radius:999px;border:1px solid rgba(252,251,248,.25);background:transparent;color:#E7EBF2;font:500 12px/1 var(--mono);cursor:pointer}
.copy:hover{border-color:rgba(252,251,248,.5)}

/* download */
.get{padding-block:var(--section)}
.get .wrap{display:grid;gap:40px}
@media (min-width:960px){.get .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}}
.get h2{font-weight:700;font-size:var(--t-hero);line-height:.9;letter-spacing:-.035em}
.get h2 em{font-style:normal;color:var(--star)}
.platforms{display:grid;gap:0;border-top:1px solid var(--ink)}
.plat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
.plat h3{font-size:var(--t-lg);font-weight:700}
.plat p{grid-column:1;font:400 var(--t-xs)/1.5 var(--mono);color:var(--ink-2)}
.plat .btn{grid-row:1 / span 2;grid-column:2}
.plat.soon h3{color:var(--ink-2)}
@media (max-width:480px){.plat{grid-template-columns:1fr}.plat .btn{grid-row:auto;grid-column:1;justify-self:start;margin-top:8px}}

.faq{border-top:1px solid var(--rule);padding-block:var(--section)}
.faq .wrap{display:grid;gap:32px}
@media (min-width:900px){.faq .wrap{grid-template-columns:280px minmax(0,1fr)}}
.faq h2{font-size:var(--t-xl);font-weight:700;letter-spacing:-.028em;line-height:1}
details{border-bottom:1px solid var(--rule)}
details:first-child{border-top:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:600;font-size:var(--t-md)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.4rem/1 var(--mono);color:var(--star);transition:transform .18s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--ink-2);max-width:66ch;font-size:var(--t-sm)}

footer{background:var(--band);color:var(--band-ink-2);padding-block:56px 72px;font-size:var(--t-sm)}
footer .wrap{display:grid;gap:24px}
footer .brand{color:var(--band-ink)}
footer nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-family:var(--mono);font-size:var(--t-xs)}
footer nav a{color:var(--band-ink-2);padding:8px 0}
footer .name{font-style:italic;max-width:68ch;line-height:1.6}
footer .name .label{font-style:normal;color:var(--band-ink-2);margin-right:.6em}
footer :focus-visible{outline-color:var(--band-link)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}