/* stzsite -- one stylesheet, written to the Zui constitution (v3.11) and to the
   Harobanda site's reading of it. Rewritten 2026-10-01 after the author's
   reading; the rules it answers are named where they bind.

   Rule 3 and 5   the Compass artifacts' style (the author, 2026-10-16): their paper, teal accent, serif titles;
                  a resting tint under the page head and a resting shadow under cards, never used as emphasis
   Rule 107       ONE reading size (21px, raised on the author's word); titles and the hero are the only others
   Rule 105       every text pair below is measured by tools/build.py
   Rule 112, 17   nothing moves: no smooth scroll, no transition, no hover motion
   Rule 110, 13   the bars stick and hold their own space; nothing floats over text
   Rule 115       the path shows every page of a section; current by colour and weight
   Rule 14, 95    no block scrolls sideways; a diagram has a phone drawing instead
*/

/* contrast: #1B211F | #F1F3F1 | 7 | reading ink on paper, light */
/* contrast: #3E4744 | #F1F3F1 | 7 | secondary ink on paper, light */
/* contrast: #1B6B72 | #F1F3F1 | 4.5 | link and selection on paper, light */
/* contrast: #1B6B72 | #FBFCFB | 4.5 | link on panel, light */
/* contrast: #0E4E54 | #DEE7E6 | 4.5 | eyebrow on the tinted top of the page head, light */
/* contrast: #1B211F | #DEE7E6 | 7 | reading ink on the tinted top of the page head, light */
/* contrast: #1B211F | #F2F4F2 | 7 | an area's name on a tinted column of the grid, light */
/* contrast: #F1F3F1 | #1B6B72 | 4.5 | the Start button, light */
/* contrast: #1B211F | #FBFCFB | 7 | reading ink on panel, light */
/* contrast: #23664A | #E4F1EA | 4.5 | Strong label, light */
/* contrast: #2F5A86 | #E4ECF4 | 4.5 | Solid label, light */
/* contrast: #7A4F0E | #F6ECD9 | 4.5 | Partial label, light */
/* contrast: #993A25 | #F6E3DD | 4.5 | Emerging label, light */
/* contrast: #EAEEEB | #121614 | 7 | reading ink on paper, dark */
/* contrast: #B7C1BC | #121614 | 7 | secondary ink on paper, dark */
/* contrast: #5FB6BC | #121614 | 4.5 | link and selection on paper, dark */
/* contrast: #5FB6BC | #1A201E | 4.5 | link on panel, dark */
/* contrast: #8FD3D8 | #192423 | 4.5 | eyebrow on the tinted top of the page head, dark */
/* contrast: #EAEEEB | #192423 | 7 | reading ink on the tinted top of the page head, dark */
/* contrast: #EAEEEB | #1F2624 | 7 | an area's name on a tinted column of the grid, dark */
/* contrast: #121614 | #5FB6BC | 4.5 | the Start button, dark */
/* contrast: #63B98C | #1B2F26 | 4.5 | Strong label, dark */
/* contrast: #7BA8D4 | #1B2733 | 4.5 | Solid label, dark */
/* contrast: #D6A559 | #302811 | 4.5 | Partial label, dark */
/* contrast: #DB8069 | #31201B | 4.5 | Emerging label, dark */
/* contrast: #FFFFFF | #6C6B5D | 4.5 | hero text over the brightest part of the photograph, panel 62% */
/* contrast: #FFFFFF | #0D0D0A | 4.5 | home menu over the photograph: a white letter against its own halo, 95% black at the letter's edge over the brightest pixel of the top band */

:root{
  --paper:#F1F3F1; --panel:#FBFCFB; --panel-2:#EAEEEB;
  --ink:#1B211F; --ink-2:#3E4744; --ink-3:#5E6864;
  --line:#D5DBD7; --line-2:#C3CAC6;
  --accent:#1B6B72; --accent-ink:#0E4E54;
  --head-tint:#DEE7E6; --col-tint:#F2F4F2;   /* written as hex, not color-mix(): a tool that reads color(srgb 0..1) as 0..255 sees black */
  --shadow:0 1px 2px rgba(27,33,31,.04),0 6px 18px rgba(27,33,31,.05);
  --strong:#23664A; --strong-bg:#E4F1EA;
  --solid:#2F5A86; --solid-bg:#E4ECF4;
  --partial:#7A4F0E; --partial-bg:#F6ECD9;
  --emerging:#993A25; --emerging-bg:#F6E3DD;
  --read:1.3125rem; --lh:1.7;
  --label:1.0625rem;      /* mono capitals, set to LOOK the reading size (Rule 107, optical parity) */
  --code:1.125rem;        /* monospace, the same optical allowance */
  --title:clamp(1.875rem,3.4vw,2.5rem);
  --hero:clamp(2.5rem,5.2vw,3.75rem);
  --maxw:1120px; --measure:68ch; --gutter:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121614; --panel:#1A201E; --panel-2:#232B28;
    --ink:#EAEEEB; --ink-2:#B7C1BC; --ink-3:#8A958F;
    --line:#2C3532; --line-2:#3A443F; --accent:#5FB6BC; --accent-ink:#8FD3D8; --head-tint:#192423; --col-tint:#1F2624;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
    --strong:#63B98C; --strong-bg:#1B2F26; --solid:#7BA8D4; --solid-bg:#1B2733;
    --partial:#D6A559; --partial-bg:#302811; --emerging:#DB8069; --emerging-bg:#31201B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121614; --panel:#1A201E; --panel-2:#232B28;
  --ink:#EAEEEB; --ink-2:#B7C1BC; --ink-3:#8A958F;
  --line:#2C3532; --line-2:#3A443F; --accent:#5FB6BC; --accent-ink:#8FD3D8; --head-tint:#192423; --col-tint:#1F2624;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
  --strong:#63B98C; --strong-bg:#1B2F26; --solid:#7BA8D4; --solid-bg:#1B2733;
  --partial:#D6A559; --partial-bg:#302811; --emerging:#DB8069; --emerging-bg:#31201B;
  color-scheme:dark;
}

/* ---- nothing moves (Rules 1, 17, 112) ----------------------------------- */
*,*::before,*::after{box-sizing:border-box;transition:none!important;animation:none!important;scroll-behavior:auto!important}

html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--read);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;text-underline-offset:.18em;overflow-x:hidden}
main{flex:1 0 auto}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
code,pre,kbd{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
@media (max-width:760px){:root{--gutter:16px}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--panel);color:var(--accent);padding:10px 14px;border:2px solid var(--accent);border-radius:8px;z-index:100}
.skip:focus{left:12px}
.mono{font-family:"IBM Plex Mono",monospace}
[data-lang-only]{display:none}

/* ---- the bars: the main menu and the section's path, both sticky ------- */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);min-height:64px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;min-height:44px}
.brand img{display:block;height:28px;width:auto}
.brand .wm-dark{display:none}
:root[data-theme="dark"] .brand .wm-light{display:none}
:root[data-theme="dark"] .brand .wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .wm-light{display:none}:root:not([data-theme="light"]) .brand .wm-dark{display:block}}
.nav{display:flex;gap:4px 16px;align-items:center;margin-left:auto}
.nav a{font-size:1.1875rem;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;position:relative}
.nav a[aria-current]{color:var(--accent);font-weight:600}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);border-radius:2px}
.tools{display:flex;align-items:center;gap:14px;flex:none}
.tools a{font-size:1.1875rem;font-weight:500;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.tools a.gh svg{display:block;width:24px;height:24px;fill:currentColor}
.tools a.present svg{display:block;width:26px;height:26px}
.tools a.lang{font-family:"IBM Plex Mono",monospace;font-size:var(--label);color:var(--accent);border:1px solid var(--line-2);border-radius:8px;padding:0 12px;min-height:40px}
.path{border-top:1px solid var(--line);background:var(--panel)}
.path-in{max-width:var(--maxw);margin:0 auto;padding:4px var(--gutter);display:flex;flex-wrap:wrap;gap:0 28px}
.path a{font-size:1.1875rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.path a[aria-current]{color:var(--accent);font-weight:700}
.crumbs{border-top:1px solid var(--line);background:var(--paper)}
.crumbs-in{max-width:var(--maxw);margin:0 auto;padding:2px var(--gutter);display:flex;flex-wrap:wrap;list-style:none}
.crumbs li{display:inline-flex;align-items:center;min-height:44px;font-size:1.1875rem;color:var(--ink);font-weight:700}
.crumbs li+li::before{content:"";display:inline-block;width:.5em;height:.5em;margin:0 .9em 0 .5em;border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2);transform:rotate(45deg)}
.crumbs a{color:var(--ink-2);font-weight:500;text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
/* below the width where the six entries and the tools fit on one line, the menu
   becomes its own scrollable row (Rule 27), and so does the path: both stay visible */
@media (max-width:1300px){
  .topbar{flex-wrap:wrap;gap:0 16px;padding-top:6px}
  .tools{margin-left:auto}
  .nav{order:3;flex:1 0 100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;gap:0 22px;scrollbar-width:thin;padding-bottom:2px}
}
@media (max-width:760px){
  .crumbs li{min-height:40px}
  .brand img{height:22px}
  .tools a.present{display:none}
  .tools{gap:10px}
  .topbar{min-height:52px}
}

/* ---- the page ------------------------------------------------------------- */
.page-head{padding:48px 0 32px;border-bottom:1px solid var(--line)}
.eyebrow,.kicker{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.page-head h1{font-family:"Fraunces",Georgia,serif;font-size:var(--hero);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin-top:16px;max-width:24ch}
.page-head h1 i{font-weight:500}
.page-head .lede{margin-top:20px;max-width:var(--measure);color:var(--ink)}
.page-body{padding-block:16px 64px}
.page-body h2{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin-top:56px;max-width:32ch}
.page-body h2:first-child{margin-top:32px}
.page-body h3,.page-body h4{font-size:var(--read);font-weight:600;line-height:1.4;margin-top:32px}
.page-body p,.page-body ul,.page-body ol{max-width:var(--measure)}
.page-body h2+p,.page-body h3+p,.page-body h2+.kicker{margin-top:16px}
.page-body p+p{margin-top:16px}
.page-body ul,.page-body ol{padding-left:1.3em;margin:16px 0 0}
.page-body li+li{margin-top:8px}
.page-body blockquote{margin:32px 0 0;padding:16px 24px;border-left:4px solid var(--ink-2);background:var(--panel);border-radius:0 12px 12px 0;font-family:"Fraunces",Georgia,serif;font-size:var(--read);line-height:1.55;max-width:var(--measure)}
.page-body table{border-collapse:collapse}
.page-body code{font-size:.9em;background:var(--panel-2);padding:1px 6px;border-radius:5px}
.proof,.ran{color:var(--ink-2);margin-top:16px;max-width:var(--measure)}
.proof code,.ran code{background:none;padding:0}
.stage{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}

/* a differentiator, named: told apart by shape and weight, not by colour */
.way{display:block;max-width:var(--measure)!important;margin-top:24px!important;background:var(--panel);border-left:4px solid var(--ink);border-radius:0 12px 12px 0;padding:16px 20px;color:var(--ink)}
.way span{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}

/* code: never sideways (Rules 14, 114); code above its output, one axis (Rule 8) */
pre{margin:16px 0 0;font-size:var(--code);line-height:1.6;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;max-width:920px}
.run{margin-top:24px;max-width:920px}
.run>div+div{margin-top:8px}
.run .lbl{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.run pre{margin-top:6px}
.run .out pre{border-left:4px solid var(--ink-3)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;max-width:none}
@media (max-width:980px){.vs{grid-template-columns:1fr}}
.vs>.side{min-width:0}
.vs .lbl{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.vs .stz .lbl{color:var(--accent)}
.vs pre{max-width:none}
.vs pre.o{border-left:4px solid var(--ink-3);min-height:3.2em}

/* figures: read-only indicators (Rule 119), the number at the title voice */
.figures{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:24px}
.figure{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.figure b{display:block;font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.1;color:var(--ink)}
.figure span{display:block;color:var(--ink-2);margin-top:8px}
.figure a{display:inline-block;margin-top:8px}

/* cards: read-only (Rule 119); several in a row only where they are short */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;margin-top:24px}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.card h3{margin-top:0}
.card p{color:var(--ink-2);margin-top:8px;max-width:none}
.card .stage{margin-top:4px}
.card .proof{margin-top:12px}
.card ul{margin-top:8px}
.cards.principles{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:0 40px}
@media (max-width:520px){.cards.principles{grid-template-columns:1fr}}
.cards.principles .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0}

/* rows (the Harobanda pattern): two columns that become one on a phone */
.rows{margin-top:24px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line);display:flex;flex-direction:column;gap:1px}
.rows .row{background:var(--panel);display:grid;grid-template-columns:.9fr 1.6fr;gap:8px 32px;padding:16px 20px}
@media (max-width:820px){.rows .row{grid-template-columns:1fr}}
.rows .who{font-weight:600}
.rows .what{color:var(--ink-2)}

/* figures and diagrams: a picture fits and never stretches its text (Harobanda) */
figure{margin:32px 0 0}
figure img{display:block;border-radius:12px;border:1px solid var(--line)}
figcaption{color:var(--ink-2);margin-top:12px;max-width:var(--measure)}
figure.diagram img{background:#F5EFE1}
figure.diagram .wide-only{max-width:860px;width:100%}
figure.diagram .narrow-only{display:none}
@media (max-width:700px){figure.diagram .wide-only{display:none}figure.diagram .narrow-only{display:block;max-width:360px;width:100%}}

/* pair: the same chapter in two languages */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media (max-width:860px){.pair{grid-template-columns:1fr}}
.pair>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;min-width:0}
.pair h4{margin:0}
.pair p{margin-top:8px;color:var(--ink-2)}
.pair pre{max-width:none}

/* a door to a main page: a link, and it looks like one (Rule 16) */
.door{display:block;margin-top:24px;max-width:var(--measure);background:var(--panel);border:2px solid var(--accent);border-radius:12px;padding:20px 24px;text-decoration:none;color:var(--ink)}
.door .who{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.door .what{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.2;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;margin-top:4px}
.door .how{color:var(--ink-2);margin-top:8px}
.door-section{margin-top:56px}
.door-section h3{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.15;margin-top:8px}

/* the areas, by theme, each picture titled beneath it (Wolfram's core areas) */
.theme{margin-top:48px}
.theme:first-child{margin-top:24px}
.theme h2{margin-top:0!important}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px 20px;margin-top:20px}
@media (max-width:560px){.tiles{grid-template-columns:1fr 1fr;gap:24px 12px}}
.tile{min-width:0}
.tile a.pic{display:block}
.tile img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#FBF7F0;border:1px solid var(--line);border-radius:10px}
.tile .nopic{aspect-ratio:16/10;border:1px dashed var(--line-2);border-radius:10px;padding:14px;color:var(--ink-2);display:flex;align-items:center}
.tile .name{display:block;margin-top:10px;font-weight:600;line-height:1.35}
.tile .what{display:block;color:var(--ink-2);margin-top:4px;line-height:1.5}

/* the documentation's scope, one tile per area, one quiet colour per theme */
.scope{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:20px}
.scope a{display:flex;align-items:center;min-height:64px;padding:12px 18px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2)}
.scope a small{display:block;font-weight:400;color:var(--ink-2)}
.scope a[data-t="core"]{border-left:6px solid #3E6E9E}
.scope a[data-t="intelligence"]{border-left:6px solid #2E7D5B}
.scope a[data-t="visual"]{border-left:6px solid #B77A24}
.scope a[data-t="systems"]{border-left:6px solid #5E6864}
.scope a[data-t="io"]{border-left:6px solid #7030A0}
.scope a[data-t="cross"]{border-left:6px solid #B4462F}

/* the Atlas: ratings as numbers in a table (Rules 11, 117, 128) */
.tw{margin-top:20px}
table.ratings{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--panel);border:1px solid var(--line);border-radius:12px}
table.ratings th,table.ratings td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.ratings thead th{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.04em;color:var(--ink-2);background:var(--panel-2)}
table.ratings th.n,table.ratings td.n{text-align:right;font-variant-numeric:tabular-nums;width:9%}
table.ratings td.n{font-family:"IBM Plex Mono",monospace;font-size:var(--read)}
table.ratings td .line{display:block;color:var(--ink-2);margin-top:4px}
table.ratings td .peers{display:block;color:var(--ink-2);margin-top:4px}
table.ratings .short{display:none}
@media (max-width:760px){
  table.ratings th,table.ratings td{padding:10px 6px}
  table.ratings th.n,table.ratings td.n{width:13%}
  table.ratings .full{display:none} table.ratings .short{display:inline}
  table.ratings td .peers{display:none}
}
.tally-line{margin-top:20px;font-family:"IBM Plex Mono",monospace}

/* the coverage matrix: a grid at every width (Rule 129) */
table.cov{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:20px;background:var(--panel);border:1px solid var(--line)}
table.cov th,table.cov td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.cov thead th{font-weight:600;background:var(--panel-2)}
table.cov thead th small{display:block;font-weight:400;color:var(--ink-2)}
table.cov thead th:first-child,table.cov tbody th[scope=row]{width:30%}
table.cov tr.cg th{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
table.cov tbody th[scope=row]{font-weight:600}
table.cov tbody th[scope=row] small,table.cov tr.dn small{display:block;font-weight:400;color:var(--ink-2)}
table.cov tr.dn{display:none}
table.cov tr.ct td b{font-family:"Fraunces",Georgia,serif;font-size:var(--title)}
table.cov tr.ct td small{display:block;color:var(--ink-2)}
.cv{font-weight:600}
.cv.deep{color:var(--strong)} .cv.solid{color:var(--solid)} .cv.partial{color:var(--partial)} .cv.none{color:var(--emerging)}
@media (max-width:760px){
  .covwrap{margin-inline:-8px}
  table.cov th,table.cov td{padding:8px 4px}
  table.cov thead th:first-child,table.cov tbody th[scope=row],table.cov tr.ct th{display:none}
  table.cov tr.dn{display:table-row}
  table.cov tr.dn th{padding-top:14px;border-bottom:0}
  table.cov tr.cg th{padding-top:18px}
  table.cov thead th{font-size:1rem}
}

/* the lanes of an area, and the reference tables */
.lanes{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.lane{display:grid;grid-template-columns:minmax(180px,1fr) 130px 2.2fr;gap:8px 20px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:start}
.lane:last-child{border-bottom:0}
.lane .ln{font-weight:600;min-width:0;overflow-wrap:anywhere}
.lane .lt{color:var(--ink-2);min-width:0}
.lane .lt small{display:block;font-size:inherit;color:var(--ink-2);margin-top:6px}
@media (max-width:760px){.lane{grid-template-columns:1fr auto}.lane .lt{grid-column:1/-1}}
.chip{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap}
.chip.strong{color:var(--strong);background:var(--strong-bg)} .chip.solid{color:var(--solid);background:var(--solid-bg)}
.chip.partial{color:var(--partial);background:var(--partial-bg)} .chip.emerging{color:var(--emerging);background:var(--emerging-bg)}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media (max-width:820px){.sg{grid-template-columns:1fr}}
.sg>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.sg h4{margin:0}
.sg ul{margin:8px 0 0;padding-left:1.2em;color:var(--ink-2)}
.area-hero img{max-height:70vh;width:auto;object-fit:contain;background:#FBF7F0}
.counts-line{margin-top:20px;font-family:"IBM Plex Mono",monospace}
.note{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ink-2);border-radius:0 12px 12px 0;padding:16px 20px;max-width:var(--measure)}
.mono-title{font-family:"IBM Plex Mono",monospace!important;letter-spacing:0!important}
.flt{width:100%;max-width:520px;font:inherit;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);color:var(--ink);margin-top:20px;min-height:48px}
.rtable .lane{grid-template-columns:minmax(200px,1.2fr) 140px 3fr}
.rtable .rhead{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rtable .ln a{font-weight:600}
.rrow[hidden]{display:none}
.page-body h2 small{display:block;font-family:"IBM Plex Sans",sans-serif;font-size:var(--read);font-weight:400;color:var(--ink-2);margin-top:4px}
.azrow{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;max-width:none!important}
.azrow .chip{text-decoration:none;min-width:40px;text-align:center;padding:6px 10px}
.fchip{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;padding:0 8px;border-radius:999px;margin-right:6px;white-space:nowrap;background:var(--panel-2);color:var(--ink-2)}
@media (max-width:760px){.rtable .lane{grid-template-columns:1fr auto}.rtable .lane .lt{grid-column:1/-1}}

/* principles as definitions */
dl.terms{margin:24px 0 0;max-width:var(--measure)}
dl.terms dt{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.2;margin-top:32px}
dl.terms dt:first-child{margin-top:0}
dl.terms dd{margin:8px 0 0}

/* ---- the home page ---------------------------------------------------- */
.hero{position:relative;height:calc(100svh - 65px);min-height:520px;overflow:hidden;background:#15110D}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;border:0;border-radius:0}
.hero-panel{position:absolute;left:max(var(--gutter),4vw);bottom:40px;width:min(600px,calc(100% - 2*var(--gutter)));background:rgba(18,20,19,.62);color:#fff;border-radius:14px;padding:24px 28px}
.hero-panel h1{font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,3.4vw,2.75rem);font-weight:600;line-height:1.1;letter-spacing:-.01em;color:#fff}
.hero-panel .second{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.5rem;margin-top:10px;color:#fff}
.down{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:18px;border:2px solid #fff;border-radius:50%;color:#fff;text-decoration:none;font-size:1.5rem;line-height:1}
@media (max-width:760px){
  .hero{height:auto;min-height:0;background:var(--paper)}
  .hero-img{position:static;display:block;width:100%;height:58svh;min-height:320px}
  .hero-panel{position:static;width:auto;background:none;color:var(--ink);padding:24px var(--gutter) 8px;border-radius:0}
  .hero-panel h1,.hero-panel .second{color:var(--ink)}
  .down{border-color:var(--accent);color:var(--accent)}
}
.home-section{padding-block:56px 8px}
.home-section .lede{margin-top:16px;max-width:var(--measure)}
.home-section h2{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.15;margin-top:8px;max-width:32ch}
.home-section .wrap>.kicker{display:block}
html[data-lang="fr"] [data-lang="en"],html[data-lang="en"] [data-lang="fr"]{display:none!important}

/* ---- the footer: a site map (Wolfram's footer, Rule 108's tree in full) ---- */
.foot{margin-top:64px;border-top:1px solid var(--line);background:var(--panel);padding-block:40px 32px}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px 32px}
.map h3{font-size:var(--read);font-weight:600;margin:0}
.map ul{list-style:none;margin:8px 0 0;padding:0}
.map li a{display:inline-flex;align-items:center;min-height:40px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.map li a:hover{text-decoration:underline}
.foot-bottom{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start;justify-content:space-between}
.foot-bottom p{max-width:var(--measure);color:var(--ink-2)}
.foot-bottom p+p{margin-top:12px}
.foot-mark img{height:24px;width:auto;display:block}
.foot-mark .wm-dark{display:none}
:root[data-theme="dark"] .foot-mark .wm-light{display:none}
:root[data-theme="dark"] .foot-mark .wm-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot-mark .wm-light{display:none}:root:not([data-theme="light"]) .foot-mark .wm-dark{display:block}}
.themes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.themes button{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:8px;padding:8px 14px;min-height:44px;cursor:pointer}
.themes button[aria-pressed="true"]{border:2px solid var(--accent);color:var(--accent);font-weight:600}

/* ---- the tour (boardroom mode, Rules 65-66) ---------------------------- */
.tour-mode .top{position:fixed;left:0;right:0;top:0;visibility:hidden}
.tour-mode.show-chrome .top,.tour-mode .top:focus-within{visibility:visible}
.tour-mode .foot{display:none}
.deck{display:block}
.scene{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(20px,4vw,56px) clamp(16px,6vw,96px) 16px;position:relative;border-bottom:1px solid var(--line)}
.scene-inner{align-self:center;max-width:1180px;width:100%;margin:0 auto}
.scene h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(2.5rem,6vw,5.5rem);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin-top:8px}
.scene .eyebrow{font-size:clamp(1rem,1.4vw,1.25rem)}
.scene p,.scene li{font-size:clamp(1.25rem,2.2vw,1.875rem);line-height:1.45;color:var(--ink-2);max-width:none}
.scene p+p{margin-top:.6em}
.scene b,.scene strong{color:var(--ink)}
.scene pre{font-size:clamp(1rem,1.5vw,1.375rem);max-width:none}
.scene .run{max-width:none}
.scene .figures{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.scene .figure b{font-size:clamp(2.5rem,5vw,4.5rem)}
.scene .figure span{font-size:clamp(1.0625rem,1.5vw,1.375rem)}
.scene .pair p,.scene .pair h4{font-size:clamp(1.0625rem,1.5vw,1.25rem)}
.scene figure.diagram .wide-only{max-width:min(1100px,100%)}
.scene .tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 12px}
.scene .tile .name{font-size:clamp(1rem,1.2vw,1.125rem)}
.scene-image{padding:0;grid-template-rows:1fr;color:#fff}
.scene-image .scene-inner{position:relative;max-width:none;min-height:100svh;display:flex;align-items:flex-end}
.scene-image img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;border:0;border-radius:0}
.scene-image .caption{position:relative;z-index:2;margin:0 0 9vh 4vw;max-width:min(640px,92vw);background:rgba(18,20,19,.62);border-radius:14px;padding:22px 26px}
.scene-image .caption p,.scene-image .caption b,.scene-image .caption .eyebrow{color:#fff}
.scene-image .scene-foot,.scene-image .scene-foot a{color:#fff}
.scene-image .scene-foot{position:absolute;bottom:8px;right:16px;background:rgba(18,20,19,.78);border-radius:8px;padding:2px 12px}
.scene-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink-2);padding-top:10px;font-size:1rem}
.scene-page{font-family:"IBM Plex Mono",monospace}
.notes{display:none;position:fixed;right:16px;bottom:24px;max-width:min(460px,calc(100vw - 32px));max-height:55vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-left:4px solid var(--ink-2);border-radius:12px;padding:16px 20px;z-index:40}
.notes p,.notes li{font-size:var(--read);line-height:1.55;color:var(--ink)}
.show-notes .scene.current .notes{display:block}
.progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:var(--line);z-index:45}
.progress .bar{height:100%;width:0;background:var(--accent)}
.deck-help{position:fixed;left:16px;bottom:10px;font-size:1rem;color:var(--ink-2);z-index:45;background:var(--paper);padding:2px 8px;border-radius:6px}
@media (max-width:760px){.notes{left:16px;right:16px;max-width:none}.deck-help{display:none}}

/* the offline check page keeps its own small table */
.twrap table{border-collapse:collapse;width:100%}
.twrap th,.twrap td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.theme h3{font-family:"Fraunces",Georgia,serif;font-size:var(--title);font-weight:600;line-height:1.15;margin:0}
.home-section .theme{margin-top:40px}

/* phones: the brand row scrolls away; the main menu and the path stay pinned */
.brandrow{display:none}
@media (max-width:760px){
  .brandrow{display:flex;align-items:center;gap:12px;padding:6px var(--gutter);min-height:56px;background:var(--paper)}
  .brandrow .tools{margin-left:auto}
  .top .brand,.top .tools{display:none}
  .topbar{padding-top:0;min-height:0}
  .nav{order:0;flex:1 0 100%}
  .nav a,.path a{min-height:44px}
}
.nav,.path-in{scrollbar-width:none}
.nav::-webkit-scrollbar,.path-in::-webkit-scrollbar{display:none}
@media (max-width:760px){
  table.cov thead th:first-child,table.cov tbody th[scope=row],table.cov tr.ct th{display:table-cell;width:0;padding:0;border:0;font-size:0;overflow:hidden}
  table.cov thead th small{display:none}
  table.cov thead th,table.cov td{font-size:1rem;padding:8px 3px}
  table.cov tr.ct td b{font-size:1.25rem}
  table.cov tr.ct td small{display:none}
}
.tour-mode .brandrow{display:none!important}
/* a long table keeps its column names in view, under the pinned menus (Rule 13: sticky context) */
table.cov thead th,table.ratings thead th{position:sticky;top:var(--pin,0px);z-index:5}
@media (max-width:760px){
  table.ratings td .line{display:none}
  table.ratings th.n,table.ratings td.n{width:40px;padding-inline:2px}
}
.map li a{color:var(--accent)}
@media (max-width:760px){.map{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
.lane .ln{overflow-wrap:break-word}
@media (max-width:760px){.rtable .lane{grid-template-columns:1fr}.rtable .lane .lt{grid-column:auto}.rtable .rhead .lr,.rtable .rhead .lt{display:none}}
.scene .tile .what{display:none}
.page-body ul+p,.page-body ol+p{margin-top:16px}
@media (min-width:1200px){.scene .tiles{grid-template-columns:repeat(7,minmax(0,1fr))}}
.scene .tiles{column-gap:20px}

/* ---- the home page, by the author's word (2026-10-01 evening) ---------------
   The photograph starts at the top of the browser and the menu floats over it as
   text alone, no bar (a deliberate exception to Rule 110, on the home page only).
   No single colour reads over this photograph: its top runs from a dark wall to a
   cream turban and a pale sky, so white or dark text alone falls to about 1:1
   somewhere (measured). Each letter is white and carries its own dark halo, so it
   always stands on a dark edge. Once the reader has scrolled past the photograph
   the menu becomes the ordinary bar again, instantly. */
.home-body .hero{z-index:0}
.home-body .brandrow{position:relative;z-index:51}
.home-body.over-hero .top{background:rgba(12,14,13,.30);border-bottom-color:transparent}
.home-body.over-hero .brandrow{background:rgba(12,14,13,.30)}
.home-body.over-hero .nav a,.home-body.over-hero .tools a{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6)}
.home-body.over-hero .nav a[aria-current]::after{background:#fff;box-shadow:0 0 3px rgba(0,0,0,.85)}
.home-body.over-hero .tools a.lang{border-color:transparent}
.home-body.over-hero .tools a.gh svg,.home-body.over-hero .tools a.present svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(0,0,0,.7))}
.home-body.over-hero .brand .wm-dark{display:none!important}
.home-body.over-hero .brand .wm-light{display:block!important;filter:brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(0,0,0,.7))}
.home-body .hero{height:100svh}
@media (max-width:760px){.home-body .hero{height:auto}}

/* the scroll arrow nudges downward, gently, so a reader who thinks the page ends
   here knows it goes on (the author's word; the one motion on the site), and it
   stays still for a reader whose system asks for reduced motion */
.down span{display:inline-block;animation:nudge 2.6s ease-in-out infinite!important}
@keyframes nudge{0%,55%,100%{transform:translateY(0)}27%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.down span{animation:none!important}}
.page-body code,.proof code,.ran code,figcaption code{overflow-wrap:anywhere}
/* a long file name or identifier breaks where it must rather than widening the page */
body{overflow-wrap:break-word}
.page-body a,.lane .lt,.sg li,blockquote{overflow-wrap:anywhere}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}
.cards.principles{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}
.cards>*,.figures>*,.tiles>*,.scope>*,.map>*{min-width:0}

/* the functional map: every area at once, one colour per theme (Wolfram's complete scope) */
.fmap{margin-top:24px}
.fkeys{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px}
.fk{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.fk::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--tc)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px}
.ft{display:flex;align-items:center;min-height:64px;padding:10px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--tc);color:var(--ink);font-weight:600;line-height:1.3;text-decoration:underline;text-decoration-color:var(--line-2);min-width:0}
[data-t="core"]{--tc:#3E6E9E} [data-t="intelligence"]{--tc:#2E7D5B} [data-t="visual"]{--tc:#B77A24}
[data-t="systems"]{--tc:#5E6864} [data-t="io"]{--tc:#7030A0} [data-t="cross"]{--tc:#B4462F}
.fmap+.theme{margin-top:48px}
@media (max-width:560px){.fgrid{grid-template-columns:1fr 1fr;gap:8px}.ft{padding:10px 12px;min-height:56px}}

.sg li+li{margin-top:10px}
.sg a.src{white-space:nowrap}

/* a guide page: functions grouped by what they do, each with its own explanation */
ul.fnlist{list-style:none;padding-left:0;max-width:var(--measure)}
ul.fnlist li{padding:8px 0;border-bottom:1px solid var(--line)}
ul.fnlist li a.mono{font-weight:600;margin-right:6px}
ul.fnlist .in{color:var(--ink-2);white-space:nowrap}
.page-head .thesis{margin-top:20px;max-width:var(--measure)}

/* narration pages: each code block, then what the run did with it */
.narration .nblock{margin:24px 0 32px;max-width:920px}
.narration .lbl{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.narration .out pre{border-left:4px solid var(--ink-3)}
.narration .ran{font-weight:600;margin-top:8px}
.nv-kept{color:var(--strong)}
.nv-differs{color:var(--partial)}
.nv-raised,.nv-unprinted{color:var(--emerging)}
.ran[class*="nv-"]{font-weight:600}
.howto-list li{margin-top:8px}
.howto-notes{margin-top:32px}
.proof-page .lede-verdict{font-size:var(--read);max-width:var(--measure);margin-top:0}
.proofcell{border-top:1px solid var(--line);padding:20px 0}
.proofcell p{margin:0;max-width:none}
.proofcell .cell-h{margin-bottom:8px;font-weight:600}
.proofcell .run{margin-top:0}
.ask-rows{margin-top:24px;max-width:1120px}
.ask-row{border-top:1px solid var(--line);padding:16px 0}
.page-body .ask-row p{margin:0;max-width:none}
.page-body .ask-row .ask-q{font-weight:600;margin:0 0 4px}
.ask-row .ask-q .mono{font-weight:400;color:var(--ink-2);margin-left:8px}
.g-same{color:var(--strong)} .g-verb{color:var(--solid)} .g-other{color:var(--emerging)}
/* the learner's ladder: one row per rung, its name on the left */
.ladder{margin-top:24px;max-width:1120px}
.rung{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 32px;border-top:1px solid var(--line);padding:24px 0}
.rung-id b{display:block;font-family:"IBM Plex Mono",monospace;font-size:2rem;line-height:1.1;color:var(--accent)}
.rung-id span{display:block;font-weight:600;margin-top:4px}
.page-body .rung-body p{margin:8px 0 0;max-width:var(--measure)}
.page-body .rung-body p:first-child{margin-top:0}
.page-body .rung-body ul{margin-top:4px}
@media (max-width:760px){.rung{grid-template-columns:1fr;gap:8px 0}.rung-id b,.rung-id span{display:inline;margin-right:12px}}
.narration .ran-out{border-left:4px solid var(--ink-3);margin-top:8px}
ol.narr .ran{display:inline;margin:0}
.narration hr{border:0;border-top:1px solid var(--line);margin:40px 0;max-width:920px}
.narration img{max-width:920px;width:100%;height:auto;border-radius:10px}

/* ---- the second submenu: the pages of this level, a column on the left -----
   three menu levels and never more: the main menu, the section's path, this bar */
.l2wrap{display:grid;grid-template-columns:clamp(272px,18vw,336px) minmax(0,1fr);max-width:1680px;width:100%;min-width:0;margin:0 auto}
/* with the bar, the page takes the width the screen offers (the author, 2026-10-02): the bar stays under a fifth of it
   and quiet (Zui 8), the page gets the rest (Zui 6); prose keeps its measure, code, tables and figures widen */
.has-l2 main .wrap{max-width:1280px;margin:0;padding-left:48px;padding-right:var(--gutter)}
.has-l2 pre,.has-l2 .run,.has-l2 .narration .nblock,.has-l2 .narration hr,.has-l2 .narration img{max-width:1120px}
.level2{position:sticky;top:var(--pin,120px);align-self:start;max-height:calc(100vh - var(--pin,120px));overflow-y:auto;border-right:1px solid var(--line);padding:32px 16px 40px calc(var(--gutter) - 13px);scrollbar-width:thin}
.level2 ul{list-style:none;margin:0;padding:0}
.level2 .l2-group+.l2-group{margin-top:22px}
.level2 .l2-h{font-size:1.1875rem;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 6px 13px}
.level2 a{display:block;font-size:1.1875rem;line-height:1.35;color:var(--ink-2);text-decoration:none;padding:7px 10px;border-left:3px solid transparent;border-radius:0 8px 8px 0}
.level2 a:hover{color:var(--accent);background:var(--panel)}
.level2 a[aria-current]{color:var(--accent);font-weight:700;background:var(--panel);border-left-color:var(--accent)}
/* narrower than the column and the page together: the rail leaves the side. With the script it folds into the
   "Where you are" line under the menu; without it, it stands above the page as the same vertical list. Never a row
   that scrolls sideways (Zui 27, 120) */
@media (max-width:1100px){
  .l2wrap{display:block}
  .has-l2 main .wrap{padding-left:var(--gutter)}
  .level2{position:static;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding:10px var(--gutter) 14px calc(var(--gutter) - 13px)}
  .has-l2 main > .crumbs .crumbs-in{padding-left:var(--gutter)}
}

/* the extensions of a method, yes or no: the tick is drawn here, so a row carries almost no extra markup */
.exts{font-family:"IBM Plex Mono",monospace;font-size:var(--label)}
.exts i{font-style:normal;margin-right:14px;white-space:nowrap}
.exts i.y{font-weight:700;color:var(--accent)}
.exts i.y::before{content:"\2713\00a0"}
.exts i.n{text-decoration:line-through;color:var(--ink-2)}
.exts i.n.txt{text-decoration:none}   /* the word "no" is never struck: a strike would negate it */
.exts.none{font-family:inherit;color:var(--ink-2)}
.ext-line{display:block;margin-top:8px}
@media (min-width:761px){
  .rtable .lane.lane2{grid-template-columns:minmax(200px,1.2fr) 3fr}
  .rtable .lane.lane3{grid-template-columns:minmax(150px,.45fr) minmax(230px,1fr) 3fr}
  .rtable .lane.lane3e{grid-template-columns:minmax(150px,.45fr) minmax(110px,.6fr) 3fr}
  .rtable .lane.lane4{grid-template-columns:minmax(150px,.6fr) minmax(200px,1fr) minmax(230px,1.2fr) 1.6fr}
}
/* the letters of an extension, highlighted in a name: bold, accent and underlined, so colour is never the only cue */
mark.ext{background:none;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.ext-ex{margin-top:12px}
.ext-ex .lbl{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.06em;color:var(--ink-2);margin-top:8px}
.ext-ex pre{margin:4px 0 0;max-width:none}
.ext-ex pre.ext-out{border-left:4px solid var(--ink-3)}
/* the example of a row of a reference table: the code, then #--> and what the run printed, and where it comes from */
pre.rx{margin:10px 0 0;max-width:none}
.rx-src{display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:var(--label);color:var(--ink-2)}

/* a link that leaves the site: an arrow in the link's own colour after its words, drawn by a mask (no image, no glyph the font may lack) */
.xarr{display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.05em;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* an address that jumps to a heading must not hide it under the pinned header */
[id]{scroll-margin-top:calc(var(--pin,120px) + 12px)}
/* the discipline: its seven steps and fourteen rules, each with its sample on its own line; the way callout points at the page */
.way span a{color:inherit;text-decoration:underline}
ol.rules li,ol.steps li{margin:14px 0;max-width:var(--measure)}
ol.rules code,ol.steps code{display:block;margin-top:6px;overflow-x:auto}

/* the home: one call to action, two doors; the audience rows are links */
.hero-panel .cta{margin:18px 0 6px}
.hero-panel .cta a{display:inline-block;padding:10px 22px;margin-right:12px;border-radius:999px;background:#fff;color:#111;font-weight:600;text-decoration:none}
.hero-panel .cta a:hover,.hero-panel .cta a:focus{background:#e9e4f2}
.rows .who a{color:inherit;text-decoration:underline}

/* the glossary */
dl.glossary{max-width:var(--measure)}
dl.glossary dt{font-family:"Fraunces",serif;font-size:1.5rem;font-weight:600;margin-top:28px}
dl.glossary dd{margin:6px 0 0}

/* class pages: folded composed examples, and the way to a letter or a section */
details.rxd{margin:8px 0 0}
details.rxd summary{cursor:pointer;display:list-item}
nav.jump p{margin:6px 0;max-width:none;line-height:2}
nav.jump a{margin-right:10px}

/* the depth page */
table.depth{border-collapse:collapse;width:100%;max-width:640px}
table.depth th,table.depth td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
table.depth .n{text-align:right;font-variant-numeric:tabular-nums}

/* the estate's products as a table (rule 119: records with the same fields) */
table.products{border-collapse:collapse;width:100%}
table.products th,table.products td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.products thead th{font-family:"IBM Plex Mono",monospace;font-size:var(--label);color:var(--ink-2)}
table.products td:nth-child(2){white-space:nowrap}
table.products p{margin:0 0 6px}

/* the first picture says what it is: no provenance is recorded for it, and the page says so (4.6) */
.hero{position:relative}

/* the declared languages: the second cell is prose, the fourth is a link */
table.declared td:nth-child(2){white-space:normal}
table.declared td:nth-child(3){white-space:normal;min-width:7em}
table.declared td:nth-child(4){min-width:9em}
table.declared th:first-child{white-space:nowrap}
/* eight menu entries and the search word, in the longer French labels, between 1300 and 1480 px */
@media (min-width:1301px) and (max-width:1480px){.nav{gap:4px 12px}.nav a,.tools a{font-size:1.0625rem}}

/* the phone's one pinned row: the path and the trail fold into a line that scrolls away */
details.where{background:var(--panel);border-bottom:1px solid var(--line)}
details.where summary{display:flex;align-items:center;min-height:44px;padding:0 var(--gutter);cursor:pointer;font-size:1.0625rem;font-weight:600;color:var(--ink)}
details.where nav.path,details.where nav.crumbs{border-top:1px solid var(--line)}

/* the gallery: a picture, what made it, and a person's verdict */
figure.gal{margin:36px 0;max-width:920px}
figure.gal img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
figure.gal figcaption{margin-top:8px;font-size:1.0625rem}
figure.gal figcaption p{margin:4px 0}

/* Rules 105 and 107: a list of choices reads at the reading floor, not at the browser's own 13px */
select,select option{font-size:1rem}
/* on a phone the credit follows the arrow in the flow instead of lying over it */

/* a call to action on a page or on the home page's own sections: the hero's pills, in the page's own colours */
.cta a{display:inline-block;padding:10px 22px;margin:0 12px 8px 0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none}
.cta a:hover,.cta a:focus{background:var(--accent)}
.hero-panel .cta a{background:#fff;color:#111}
.hero-panel .cta a:hover,.hero-panel .cta a:focus{background:#e9e4f2}

/* the rail (Zui 115, 120): the section's pages, the current page's family nested under it, a generated list under its head.
   Depth is shown by indentation and a rule, never by a smaller type (Zui 107) */
.level2 .rail-1 > li + li{margin-top:2px}
.level2 .rail-2{list-style:none;margin:4px 0 8px 14px;padding:0 0 0 2px;border-left:1px solid var(--line)}
.level2 .rail-gen{margin:6px 0 8px 14px;padding-left:2px;border-left:1px solid var(--line)}
.level2 .rail-gen .l2-group + .l2-group{margin-top:12px}
.level2 a[aria-current=location]{color:var(--ink);font-weight:700;background:none;border-left-color:var(--line-2)}
/* the trail opens the page itself, above its title, and scrolls away with it (Zui 108, 13) */
main > .crumbs{border-top:0;background:none}
.has-l2 main > .crumbs .crumbs-in{max-width:1280px;margin:0;padding:18px var(--gutter) 0 48px}
details.where nav.level2{border-top:1px solid var(--line);border-bottom:0}
/* on a narrow screen the trail starts at the page's own gutter */
@media (max-width:1100px){.has-l2 main > .crumbs .crumbs-in{padding-left:var(--gutter)}}

/* the author's four levels (2026-10-16): the menu, the level-2 bar fixed under it, the left bar, the right bar */
/* Start reads as a menu word like the others (the author, 2026-10-16): it is neither the active page nor the most important entry */
.tools a.cta-start{position:relative}
.tools a.cta-start[aria-current]{color:var(--accent);font-weight:600}
.tools a.cta-start[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);border-radius:2px}
.path a[aria-current=location]{color:var(--accent);font-weight:700}
.level2 .l2-h a{color:var(--ink);text-decoration:none;font-weight:700;display:block;padding:7px 10px;border-left:3px solid transparent}
.level2 .l2-h a[aria-current=page]{color:var(--accent);background:var(--panel);border-left-color:var(--accent)}
.level2 .l2-h{margin:0 0 6px 0}
.l2wrap.with-l4{grid-template-columns:clamp(240px,16vw,300px) minmax(0,1fr) clamp(220px,15vw,290px)}
.level4{position:sticky;top:var(--pin,120px);align-self:start;max-height:calc(100vh - var(--pin,120px));overflow-y:auto;border-left:1px solid var(--line);padding:32px calc(var(--gutter) - 13px) 40px 16px;scrollbar-width:thin}
.level4 ul{list-style:none;margin:0;padding:0}
.level4 a{display:block;font-size:1.1875rem;line-height:1.35;color:var(--ink-2);text-decoration:none;padding:7px 10px;border-left:3px solid transparent;border-radius:0 8px 8px 0}
.level4 a:hover{color:var(--accent);background:var(--panel)}
.level4 a[aria-current]{color:var(--accent);font-weight:700;background:var(--panel);border-left-color:var(--accent)}
@media (max-width:1300px){.l2wrap.with-l4{grid-template-columns:clamp(240px,18vw,300px) minmax(0,1fr)}.level4{display:none}}
/* on a phone the brand row holds the wordmark, the search, Start and the language: the search keeps its icon, its word goes */
@media (max-width:760px){.tools .sw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tools{gap:8px}}
@media (max-width:760px){.tools a.lang{padding:0 8px}.tools{gap:6px}.brandrow{gap:8px}}
@media (max-width:760px){.brandrow .brand img{height:19px}}

/* the 28 areas, one framed grid (the author, 2026-10-16): a column per theme, a cell per area, subtle grey rules
   between them, and the rows aligned across the columns (subgrid), so the grid reads as one table */
.domains{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto repeat(var(--n,6),auto);
  margin:28px 0 8px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);
  width:min(1500px,calc(100vw - 2*var(--gutter)));margin-left:calc((100% - min(1500px,calc(100vw - 2*var(--gutter))))/2)}
.has-l2 .domains{width:100%;margin-left:0}
.dcol{min-width:0;grid-row:1 / -1;display:grid;grid-template-rows:subgrid;border-left:1px solid var(--line-2)}
/* a column is one theme: the strong lines run DOWN between themes, none across them (the author, 2026-10-16), and every other column
   sits on a faint tint, so the eye reads a theme top to bottom */
.dcol:nth-child(even){background:var(--col-tint)}
.dcol:first-child{border-left:0}
.dband,.page-body .dband{margin:0;padding:14px 16px 12px;background:var(--panel-2);border-top:4px solid var(--line-2);border-bottom:1px solid var(--line-2);
  font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);hyphens:auto}
.dcol[data-t="core"] .dband{border-top-color:#3E6E9E}
.dcol[data-t="intelligence"] .dband{border-top-color:#2E7D5B}
.dcol[data-t="visual"] .dband{border-top-color:#B77A24}
.dcol[data-t="systems"] .dband{border-top-color:#5E6864}
.dcol[data-t="io"] .dband{border-top-color:#1B6B72}
.dcol[data-t="cross"] .dband{border-top-color:#B4462F}
.page-body .dtiles,.dtiles{list-style:none;margin:0;padding:0;max-width:none;grid-row:2 / -1;display:grid;grid-template-rows:subgrid}
.page-body .dtiles li,.dtiles li{margin:0;padding:0;min-width:0}
.dtile{display:flex;flex-direction:column;gap:10px;height:100%;padding:14px 16px 16px;text-decoration:none;color:var(--ink)}
.dtile:hover .dpic{border-color:var(--accent)}
.dtile:hover .dname{color:var(--accent);text-decoration:underline}
.dpic{display:block;aspect-ratio:7/4;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#FBF7F0}
.dpic img{display:block;width:100%;height:100%;object-fit:cover}
.dname{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.1875rem;line-height:1.25;hyphens:auto}
/* three columns: the themes wrap onto two rows of the frame, each column on its own */
@media (max-width:1300px){
  .domains{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
  .dcol{grid-row:auto;display:block}
  .dcol:nth-child(3n+1){border-left:0}
  .dcol:nth-child(n+4){border-top:1px solid var(--line-2)}
  .page-body .dtiles,.dtiles{display:block}
}
/* a phone: one theme under the other, two areas a row */
@media (max-width:760px){
  .domains{grid-template-columns:1fr;width:100%;margin-left:0}
  .dcol{border-left:0}
  .dcol+.dcol{border-top:1px solid var(--line-2)}
  .page-body .dtiles,.dtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-body .dtiles li:nth-child(odd),.dtiles li:nth-child(odd){border-right:1px solid var(--line)}
  .dtile{padding:12px}
}

/* the home page keeps only the hooks (the author, 2026-10-16): three sentences that each lead to their page, the areas, the book */
.hooks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hook{display:block;padding:22px 24px;border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:12px;background:var(--panel);text-decoration:none;color:var(--ink)}
.hook:hover{border-color:var(--accent)}
.hook .hk{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;line-height:1.2;color:var(--ink)}
.hook .ht{display:block;margin-top:10px;font-size:1.1875rem;line-height:1.5;color:var(--ink-2)}
.hooks-section{padding-block:48px 0}
.book-line{max-width:var(--measure)}
.home-def{margin:0 0 28px}
@media (max-width:1000px){.hooks{grid-template-columns:1fr}}

/* the Compass artifacts' style (the author, 2026-10-16): the page head on a resting teal tint, the eyebrow in the accent's
   ink, cards on the panel with a 14 px corner and a resting shadow, as on the Softanza Atlas board */
.page-head{background:linear-gradient(180deg,var(--head-tint),var(--paper))}
.eyebrow,.kicker{color:var(--accent-ink);letter-spacing:.14em}
.card,.figure,.pair>div,.sg>div,.hook,.rows,.lanes,table.ratings,.door,.ft{border-radius:14px;box-shadow:var(--shadow)}
.hook{border-top:1px solid var(--line)}
.hook:hover{border-color:var(--accent)}

/* the hero's arrow: small, on the right of the panel (the author, 2026-10-16) */
.hero-panel .down,.down{display:flex;width:36px;height:36px;margin:12px 0 0 auto;border-width:1.5px;font-size:1.125rem}

/* the book page shows the book's cover (the author, 2026-10-16), copied from the house's published reader */
.page-body figure.book-cover{float:right;width:min(300px,40%);margin:8px 0 20px 32px}
.page-body figure.book-cover img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
@media (max-width:760px){.page-body figure.book-cover{float:none;width:min(260px,70%);margin:16px 0}}

/* a door per reader on the home page (the author, 2026-10-16): six cards, each leading to the page that reads the site from that reader's place */
.readers-section{padding-block:48px 0}
.readers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.reader{display:block;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.reader:hover{border-color:var(--accent)}
.reader:hover .rk{color:var(--accent);text-decoration:underline}
.reader .rk{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.375rem;font-weight:600;line-height:1.2}
.reader .rt{display:block;margin-top:8px;font-size:1.1875rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:1000px){.readers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.readers{grid-template-columns:1fr}}
ul.readings{list-style:none;padding-left:0}
ul.readings li{margin-top:10px}

/* the story page of an area (the author, 2026-10-19): the Compass's rating bar, its lanes as cards, its tiers,
   the design documents, the articles with their abstracts; tools/build_area_story.py */
.rate{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:18px}
.ratebar{display:flex;height:16px;border-radius:8px;overflow:hidden;flex:1 1 280px;max-width:560px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ratebar span{display:block}
.rlegend{display:flex;flex-wrap:wrap;gap:6px 16px}
.rlegend .rk{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;color:var(--ink-2)}
.rlegend .dot{width:12px;height:12px;border-radius:3px;flex:none}
.lcs{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.lc{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.lc-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.lc-n{font-size:var(--label);font-weight:600;color:var(--ink-2);width:28px;flex:none}
.lc-t{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;line-height:1.2;flex:1 1 auto;min-width:200px}
.lc-b{display:grid;grid-template-columns:1.6fr 1fr}
.lc-b>div{padding:16px 20px;min-width:0}
.lc-b>div+div{border-left:1px solid var(--line)}
.lc-b h4{margin:0 0 8px;font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lc-b h4+p+h4{margin-top:14px}
.lc-b p{margin:0;font-size:1.1875rem;line-height:1.55;color:var(--ink)}
.lc-b .owed h4{color:var(--partial)}
.lc-b code{font-size:1.0625rem;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.peers{display:flex;flex-wrap:wrap;gap:6px}
.peer{font-size:1.0625rem;font-weight:500;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);padding:3px 9px;border-radius:7px;line-height:1.3}
.tier{margin-top:28px}
.tier h3{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;margin:0 0 14px}
.gaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.gap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;border-top:4px solid var(--line-2)}
.tier.tA .gap{border-top-color:var(--emerging)}
.tier.tB .gap{border-top-color:var(--partial)}
.tier.tC .gap{border-top-color:var(--solid)}
.gap-t{font-family:"Fraunces",Georgia,serif;font-size:1.375rem;font-weight:600;line-height:1.2}
.gap p{margin:0;font-size:1.1875rem;line-height:1.55;color:var(--ink);flex:1}
.gap code{font-size:1.0625rem;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.ve{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;padding:3px 9px;border-radius:7px}
.tag.v{color:var(--strong);background:var(--strong-bg)}
.tag.e{color:var(--ink-2);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;margin-top:20px}
.doc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.doc h3{font-family:"Fraunces",Georgia,serif;font-size:1.375rem;font-weight:600;line-height:1.2;margin:0}
.doc p{margin:0;font-size:1.1875rem;line-height:1.55}
.doc .dmeta{font-size:var(--label);color:var(--ink-2)}
.doc .olabel{font-family:"IBM Plex Mono",monospace;font-size:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.doc ul.outline,.page-body .doc ul.outline{margin:0;padding-left:0;list-style:none;font-size:1.0625rem;line-height:1.45;color:var(--ink-2);max-width:none}
.page-body .doc ul.outline li{margin-top:2px;padding-left:1em;text-indent:-1em}
.page-body .doc ul.outline li::before{content:"\2013\00a0"}
.page-body .doc ul.outline li.more::before{content:""}
.doc .proof{margin-top:auto;font-size:1.0625rem;overflow-wrap:anywhere}
.page-body .docs,.page-body .gaps,.page-body .lcs{max-width:none}
ul.narr.arts li .abs{display:block;color:var(--ink-2);font-size:1.1875rem;line-height:1.5;margin-top:2px}
.treasures{margin:8px 0 28px;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
.treasures h2{margin-top:0;font-size:1.5rem}
.treasures h3{font-size:1.25rem;margin-top:16px}
.page-body .treasures ul{margin-top:8px}
@media (max-width:900px){.lc-b{grid-template-columns:1fr}.lc-b>div+div{border-left:0;border-top:1px solid var(--line)}}