/* Umbris v6 visual proposal. Square edges, rules for structure, one shared frame. */
@font-face{font-family:Umbris;src:url("fonts/Umbris-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Umbris;src:url("fonts/Umbris-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Umbris Mono";src:url("fonts/UmbrisMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --page:#eee8f7;--surface:#f8f5fc;--ink:#1f1829;--muted:#564d63;--link:#4a2f75;
  --rule:#c6bad6;--rule-strong:#2c2238;--accent:#7d5ce0;--accent-ink:#5b3fb8;--focus:#5c3d82;
  --tint:#e3d9f3;
  --header:#46306e;--plate:#3d2963;--header-ink:#fff;--header-muted:#ddd0f2;--header-rule:#ffffff24;--header-control:#2c1d48;--header-focus:#fff;
  --feature:#46306e;--code-bg:#1f1829;--code-head:#2c2238;--code-ink:#ece6f6;--code-muted:#c9bfe0;
  --tip:#2a6448;--warn:#7f5200;
  /* Type scale. 1rem = base body size; nothing below --fs-2xs. */
  --fs-2xs:.84rem;--fs-xs:.9rem;--fs-sm:.95rem;--fs-md:1.1rem;--fs-lg:1.3rem;--fs-xl:1.6rem;--fs-h2:1.9rem;--fs-h1:clamp(2.4rem,4vw,3.6rem);
  --frame:1440px;--gutter:2.5rem;--bar:64px;
  font-family:Figtree,Arial,sans-serif;color:var(--ink);background:var(--page);
  font-size:clamp(17px,.45vw + 11px,21px);
  scroll-padding-top:calc(var(--bar) + 1.2rem)
}
/* Dark: deepest indigo on the bookends (bar, plates, footer), a lighter purple body. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#211a31;--surface:#2a2140;--ink:#f3eefa;--muted:#c6bcd8;--link:#cfbdff;
  --rule:#4a3d63;--rule-strong:#9a8cbf;--accent:#a98bff;--accent-ink:#b9a0ff;--focus:#f0bfff;
  --tint:#30264a;
  --header:#130e2c;--plate:#1b1440;--header-ink:#fff;--header-muted:#d6cbef;--header-rule:#ffffff1c;--header-control:#0b0820;--header-focus:#f0bfff;
  --feature:#130e2c;--code-bg:#130e2c;--code-head:#1b1440;--code-ink:#ece6f6;--code-muted:#c9bfe0;
  --tip:#86d6ad;--warn:#f2c46b
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#211a31;--surface:#2a2140;--ink:#f3eefa;--muted:#c6bcd8;--link:#cfbdff;
  --rule:#4a3d63;--rule-strong:#9a8cbf;--accent:#a98bff;--accent-ink:#b9a0ff;--focus:#f0bfff;
  --tint:#30264a;
  --header:#130e2c;--plate:#1b1440;--header-ink:#fff;--header-muted:#d6cbef;--header-rule:#ffffff1c;--header-control:#0b0820;--header-focus:#f0bfff;
  --feature:#130e2c;--code-bg:#130e2c;--code-head:#1b1440;--code-ink:#ece6f6;--code-muted:#c9bfe0;
  --tip:#86d6ad;--warn:#f2c46b
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--header)}
body{margin:0;font-size:1rem;line-height:1.6;overflow-wrap:break-word;background:var(--page);min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
.footer{margin-top:auto}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:fixed;top:-6rem;left:1rem;z-index:20;padding:.6rem 1rem;background:var(--surface);color:var(--ink)}
.skip:focus{top:.5rem}
.frame{width:min(calc(100% - var(--gutter)),var(--frame));margin:0 auto}
.mono{font-family:"Umbris Mono",ui-monospace,monospace}
h1,h2,h3,.standfirst,.plate-intro,.btn,.wordmark{font-family:Umbris,Arial,sans-serif}
h1,h2,h3{line-height:1.2}
h3{font-size:var(--fs-md);margin:0}
.tag{display:inline-block;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);line-height:1.5;padding:.05rem .5rem;border:1px solid var(--rule-strong);color:var(--ink);white-space:nowrap}

/* Masthead: one row. Nav left, mark centred, switch right. */
.masthead{position:sticky;top:0;z-index:10;background:var(--header);color:var(--header-ink);border-bottom:1px solid var(--header-rule)}
.masthead a:focus-visible,.masthead button:focus-visible,.masthead summary:focus-visible{outline-color:var(--header-focus)}
.bar{height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.mainnav{display:flex;gap:.2rem;margin-left:-.8rem}
.mainnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;color:var(--header-ink);text-decoration:none;font-size:1.02rem}
.mainnav a:hover{text-decoration:underline;text-underline-offset:.3em}
.mainnav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}
.wordmark{display:flex;align-items:center;justify-content:center;width:150px;height:48px}
.wordmark img{display:block;width:138px;height:auto}
.bar-end{display:flex;justify-content:flex-end}
.theme-switch{border:0;background:transparent;color:var(--header-ink);font:inherit;display:inline-flex;gap:.55rem;align-items:center;min-height:44px;padding:0;cursor:pointer}
.switch-label{font-size:var(--fs-2xs);color:var(--header-muted)}
.switch-track{width:48px;height:26px;border:2px solid var(--header-ink);border-radius:2px;display:inline-flex;align-items:center;padding:2px;background:var(--header-control)}
.switch-thumb{width:18px;height:18px;background:var(--header-ink);transition:transform .15s ease}
.theme-switch[aria-checked="true"] .switch-thumb{transform:translateX(22px)}
.mobile-menu{display:none}

/* Plates: full-bleed, flat square grid at reduced contrast. Home and inner pages share it. */
.plate,.page-plate{position:relative;background:var(--plate);color:var(--header-ink);border-bottom:4px solid var(--accent);overflow:hidden}
.plate::before,.page-plate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--header-rule) 1px,transparent 1px),linear-gradient(90deg,var(--header-rule) 1px,transparent 1px);
  background-size:40px 40px;background-position:center top;opacity:.7}
.plate .frame,.page-plate .frame{position:relative}
.plate-title{margin:0;display:flex;justify-content:center;padding:3.4rem 0 .7rem}
.hero-mark{display:block;width:min(560px,74vw);height:auto}

/* Home plate: a night sky instead of the grid. A few uneven stars, one eclipse
   off to the right (it echoes the mark's disc), and two rare meteors. */
/* The sky is a real 3D scene: the plate holds the perspective, the pointer and the
   scroll position tilt the sky back, and each layer sits at its own depth so they part
   against each other. Each layer's scale undoes its depth, so sizes stay as drawn. */
.plate{perspective:1100px;--tx:0;--ty:0;--sy:0}
.plate::before{background-image:none}
.sky{position:absolute;inset:-10%;pointer-events:none;transform-style:preserve-3d;
  transform:rotateX(calc(var(--ty) * -4deg + var(--sy) * 24deg))}
.stars{position:absolute;inset:0}
.sky-sun{position:absolute;inset:0;pointer-events:none}
/* Three star layers, told apart the way a sky is: the far one is a dense dim dust
   (positions scattered once by a seeded script; tiling read as a dot grid) with a faint band of haze, the
   middle one is ordinary stars, the near one is a few big bright ones with halos.
   Each also slides by its own amount, so near stars sweep and far dust barely moves. */
.stars-far{transform:translate3d(calc(var(--tx) * -6px),calc(var(--ty) * -3px),-1000px) scale(1.909);opacity:.9;background-image:
  radial-gradient(circle at 35.0% 66.2%,rgba(255,255,255,0.63) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 40.1% 35.7%,rgba(255,255,255,0.37) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 45.3% 78.6%,rgba(255,255,255,0.43) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 17.0% 34.5%,rgba(255,255,255,0.60) 0 0.55px,#0000 1.15px),
  radial-gradient(circle at 8.5% 31.9%,rgba(255,255,255,0.46) 0 0.75px,#0000 1.35px),
  radial-gradient(circle at 45.4% 13.6%,rgba(255,236,220,0.52) 0 0.71px,#0000 1.31px),
  radial-gradient(circle at 18.0% 60.2%,rgba(255,255,255,0.62) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 88.0% 60.7%,rgba(255,255,255,0.57) 0 0.76px,#0000 1.36px),
  radial-gradient(circle at 21.0% 53.8%,rgba(255,255,255,0.34) 0 0.59px,#0000 1.19px),
  radial-gradient(circle at 48.5% 72.8%,rgba(255,255,255,0.31) 0 0.55px,#0000 1.15px),
  radial-gradient(circle at 8.2% 15.3%,rgba(255,255,255,0.59) 0 0.64px,#0000 1.24px),
  radial-gradient(circle at 55.0% 58.9%,rgba(255,255,255,0.42) 0 0.59px,#0000 1.19px),
  radial-gradient(circle at 81.8% 26.9%,rgba(255,255,255,0.69) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 15.1% 63.7%,rgba(255,255,255,0.32) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 85.8% 87.8%,rgba(255,255,255,0.51) 0 0.77px,#0000 1.37px),
  radial-gradient(circle at 82.8% 3.7%,rgba(255,255,255,0.39) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 77.2% 71.8%,rgba(255,255,255,0.40) 0 0.65px,#0000 1.25px),
  radial-gradient(circle at 93.1% 90.4%,rgba(255,255,255,0.69) 0 0.74px,#0000 1.34px),
  radial-gradient(circle at 40.0% 10.8%,rgba(255,255,255,0.36) 0 0.79px,#0000 1.39px),
  radial-gradient(circle at 76.4% 78.1%,rgba(255,255,255,0.67) 0 0.70px,#0000 1.30px),
  radial-gradient(circle at 3.9% 60.3%,rgba(255,255,255,0.62) 0 0.66px,#0000 1.26px),
  radial-gradient(circle at 37.8% 50.5%,rgba(255,255,255,0.60) 0 0.49px,#0000 1.09px),
  radial-gradient(circle at 19.4% 95.2%,rgba(255,236,220,0.59) 0 0.62px,#0000 1.22px),
  radial-gradient(circle at 74.6% 98.0%,rgba(255,236,220,0.32) 0 0.78px,#0000 1.38px),
  radial-gradient(circle at 99.4% 11.9%,rgba(255,255,255,0.59) 0 0.72px,#0000 1.32px),
  radial-gradient(circle at 66.7% 75.6%,rgba(255,255,255,0.43) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 1.0% 45.6%,rgba(255,255,255,0.40) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 70.4% 76.1%,rgba(255,255,255,0.43) 0 0.48px,#0000 1.08px),
  radial-gradient(circle at 21.3% 26.4%,rgba(233,220,255,0.52) 0 0.78px,#0000 1.38px),
  radial-gradient(circle at 75.4% 61.2%,rgba(255,255,255,0.51) 0 0.59px,#0000 1.19px),
  radial-gradient(circle at 30.6% 37.0%,rgba(255,255,255,0.30) 0 0.61px,#0000 1.21px),
  radial-gradient(circle at 50.3% 60.4%,rgba(255,255,255,0.56) 0 0.78px,#0000 1.38px),
  radial-gradient(circle at 66.9% 62.3%,rgba(233,220,255,0.59) 0 0.71px,#0000 1.31px),
  radial-gradient(circle at 64.8% 3.9%,rgba(255,255,255,0.32) 0 0.74px,#0000 1.34px),
  radial-gradient(circle at 1.0% 96.6%,rgba(255,236,220,0.57) 0 0.58px,#0000 1.18px),
  radial-gradient(circle at 38.2% 8.9%,rgba(255,255,255,0.33) 0 0.78px,#0000 1.38px),
  radial-gradient(circle at 44.2% 47.5%,rgba(255,255,255,0.33) 0 0.50px,#0000 1.10px),
  radial-gradient(circle at 57.4% 21.5%,rgba(255,255,255,0.67) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 92.9% 76.8%,rgba(255,255,255,0.59) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 19.6% 17.5%,rgba(255,255,255,0.45) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 20.8% 56.1%,rgba(255,255,255,0.69) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 27.0% 54.0%,rgba(255,255,255,0.40) 0 0.53px,#0000 1.13px),
  radial-gradient(circle at 86.2% 79.3%,rgba(255,236,220,0.48) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 80.3% 63.8%,rgba(255,255,255,0.41) 0 0.64px,#0000 1.24px),
  radial-gradient(circle at 86.9% 18.1%,rgba(233,220,255,0.62) 0 0.62px,#0000 1.22px),
  radial-gradient(circle at 96.8% 45.2%,rgba(255,255,255,0.33) 0 0.72px,#0000 1.32px),
  radial-gradient(circle at 45.8% 60.7%,rgba(255,236,220,0.64) 0 0.60px,#0000 1.20px),
  radial-gradient(circle at 52.5% 80.7%,rgba(233,220,255,0.48) 0 0.56px,#0000 1.16px),
  radial-gradient(circle at 68.7% 19.9%,rgba(255,255,255,0.42) 0 0.60px,#0000 1.20px),
  radial-gradient(circle at 58.6% 87.0%,rgba(255,255,255,0.64) 0 0.53px,#0000 1.13px),
  radial-gradient(circle at 95.7% 52.1%,rgba(255,255,255,0.57) 0 0.56px,#0000 1.16px),
  radial-gradient(circle at 32.1% 37.8%,rgba(255,255,255,0.45) 0 0.61px,#0000 1.21px),
  radial-gradient(circle at 16.7% 47.3%,rgba(255,236,220,0.55) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 80.3% 56.4%,rgba(255,255,255,0.43) 0 0.51px,#0000 1.11px),
  radial-gradient(circle at 4.8% 56.2%,rgba(255,255,255,0.47) 0 0.61px,#0000 1.21px),
  radial-gradient(circle at 70.9% 89.1%,rgba(255,255,255,0.39) 0 0.75px,#0000 1.35px),
  radial-gradient(circle at 27.7% 67.4%,rgba(255,255,255,0.31) 0 0.60px,#0000 1.20px),
  radial-gradient(circle at 81.0% 11.4%,rgba(255,255,255,0.35) 0 0.53px,#0000 1.13px),
  radial-gradient(circle at 36.5% 37.0%,rgba(255,255,255,0.34) 0 0.50px,#0000 1.10px),
  radial-gradient(circle at 59.2% 44.2%,rgba(255,255,255,0.46) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 2.3% 6.4%,rgba(233,220,255,0.40) 0 0.58px,#0000 1.18px),
  radial-gradient(circle at 13.8% 11.6%,rgba(255,255,255,0.50) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 18.1% 75.2%,rgba(255,255,255,0.35) 0 0.49px,#0000 1.09px),
  radial-gradient(circle at 34.5% 56.8%,rgba(255,255,255,0.61) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 21.8% 1.0%,rgba(255,255,255,0.41) 0 0.75px,#0000 1.35px),
  radial-gradient(circle at 28.5% 95.8%,rgba(255,255,255,0.41) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 1.6% 72.2%,rgba(255,236,220,0.35) 0 0.66px,#0000 1.26px),
  radial-gradient(circle at 39.6% 48.6%,rgba(255,236,220,0.47) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 44.1% 89.9%,rgba(255,255,255,0.67) 0 0.66px,#0000 1.26px),
  radial-gradient(circle at 52.2% 73.4%,rgba(233,220,255,0.66) 0 0.49px,#0000 1.09px),
  radial-gradient(circle at 63.7% 19.9%,rgba(255,255,255,0.58) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 9.3% 93.8%,rgba(255,255,255,0.56) 0 0.79px,#0000 1.39px),
  radial-gradient(circle at 56.5% 41.0%,rgba(255,255,255,0.33) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 84.6% 86.2%,rgba(255,255,255,0.33) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 15.7% 18.5%,rgba(255,255,255,0.36) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 36.0% 0.7%,rgba(233,220,255,0.42) 0 0.77px,#0000 1.37px),
  radial-gradient(circle at 30.0% 55.6%,rgba(255,255,255,0.35) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 74.6% 29.9%,rgba(255,255,255,0.44) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 0.9% 0.9%,rgba(255,236,220,0.35) 0 0.70px,#0000 1.30px),
  radial-gradient(circle at 37.1% 62.7%,rgba(233,220,255,0.57) 0 0.64px,#0000 1.24px),
  radial-gradient(circle at 1.8% 53.8%,rgba(255,255,255,0.62) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 69.5% 55.9%,rgba(255,255,255,0.62) 0 0.70px,#0000 1.30px),
  radial-gradient(circle at 81.4% 8.1%,rgba(255,255,255,0.50) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 13.2% 52.9%,rgba(255,255,255,0.54) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 27.2% 68.2%,rgba(255,255,255,0.45) 0 0.66px,#0000 1.26px),
  radial-gradient(circle at 46.6% 42.6%,rgba(233,220,255,0.36) 0 0.69px,#0000 1.29px),
  radial-gradient(circle at 37.3% 53.1%,rgba(255,255,255,0.66) 0 0.77px,#0000 1.37px),
  radial-gradient(circle at 81.6% 62.1%,rgba(255,255,255,0.69) 0 0.69px,#0000 1.29px),
  radial-gradient(circle at 2.7% 47.8%,rgba(255,255,255,0.66) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 89.5% 78.6%,rgba(255,255,255,0.59) 0 0.79px,#0000 1.39px),
  radial-gradient(circle at 55.9% 68.4%,rgba(255,255,255,0.54) 0 0.68px,#0000 1.28px),
  radial-gradient(circle at 4.4% 92.9%,rgba(255,255,255,0.51) 0 0.52px,#0000 1.12px),
  radial-gradient(circle at 90.1% 75.8%,rgba(255,255,255,0.55) 0 0.65px,#0000 1.25px),
  radial-gradient(circle at 58.1% 65.0%,rgba(255,255,255,0.63) 0 0.58px,#0000 1.18px),
  radial-gradient(circle at 28.0% 23.2%,rgba(255,255,255,0.69) 0 0.72px,#0000 1.32px),
  radial-gradient(circle at 27.8% 93.7%,rgba(255,255,255,0.57) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 26.0% 97.5%,rgba(255,255,255,0.68) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 23.2% 7.6%,rgba(255,255,255,0.46) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 87.0% 7.5%,rgba(255,255,255,0.62) 0 0.53px,#0000 1.13px),
  radial-gradient(circle at 37.1% 84.3%,rgba(255,255,255,0.31) 0 0.72px,#0000 1.32px),
  radial-gradient(circle at 76.2% 74.6%,rgba(233,220,255,0.64) 0 0.77px,#0000 1.37px),
  radial-gradient(circle at 34.3% 70.2%,rgba(233,220,255,0.48) 0 0.76px,#0000 1.36px),
  radial-gradient(circle at 61.0% 34.6%,rgba(255,255,255,0.37) 0 0.68px,#0000 1.28px),
  radial-gradient(circle at 75.4% 92.1%,rgba(255,255,255,0.52) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 87.4% 9.2%,rgba(255,255,255,0.63) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 74.4% 7.3%,rgba(255,255,255,0.32) 0 0.56px,#0000 1.16px),
  radial-gradient(circle at 58.7% 46.6%,rgba(255,255,255,0.46) 0 0.73px,#0000 1.33px),
  radial-gradient(circle at 97.8% 45.1%,rgba(255,255,255,0.41) 0 0.48px,#0000 1.08px),
  radial-gradient(circle at 52.5% 35.2%,rgba(255,255,255,0.50) 0 0.62px,#0000 1.22px),
  radial-gradient(circle at 85.7% 45.7%,rgba(255,255,255,0.51) 0 0.65px,#0000 1.25px),
  radial-gradient(circle at 91.4% 32.3%,rgba(255,255,255,0.35) 0 0.71px,#0000 1.31px),
  radial-gradient(circle at 24.6% 67.8%,rgba(255,255,255,0.57) 0 0.57px,#0000 1.17px),
  radial-gradient(circle at 13.1% 50.7%,rgba(255,255,255,0.67) 0 0.56px,#0000 1.16px),
  radial-gradient(circle at 41.7% 96.5%,rgba(255,255,255,0.68) 0 0.70px,#0000 1.30px),
  radial-gradient(circle at 53.9% 31.5%,rgba(255,236,220,0.35) 0 0.59px,#0000 1.19px),
  radial-gradient(circle at 9.7% 74.9%,rgba(255,255,255,0.65) 0 0.74px,#0000 1.34px),
  radial-gradient(circle at 71.9% 58.1%,rgba(233,220,255,0.45) 0 0.76px,#0000 1.36px),
  radial-gradient(circle at 57.1% 79.5%,rgba(233,220,255,0.58) 0 0.66px,#0000 1.26px),
  radial-gradient(circle at 27.8% 82.4%,rgba(255,255,255,0.32) 0 0.74px,#0000 1.34px),
  radial-gradient(circle at 31.4% 7.6%,rgba(255,255,255,0.51) 0 0.71px,#0000 1.31px),
  radial-gradient(circle at 69.5% 95.9%,rgba(233,220,255,0.59) 0 0.52px,#0000 1.12px),
  radial-gradient(circle at 63.9% 90.2%,rgba(255,255,255,0.46) 0 0.69px,#0000 1.29px),
  radial-gradient(circle at 80.0% 44.7%,rgba(255,255,255,0.54) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 32.8% 78.7%,rgba(255,255,255,0.32) 0 0.75px,#0000 1.35px),
  radial-gradient(circle at 38.8% 65.8%,rgba(255,255,255,0.61) 0 0.64px,#0000 1.24px),
  radial-gradient(circle at 14.7% 91.6%,rgba(255,255,255,0.69) 0 0.71px,#0000 1.31px),
  radial-gradient(circle at 44.6% 96.5%,rgba(233,220,255,0.69) 0 0.50px,#0000 1.10px),
  radial-gradient(circle at 59.3% 67.5%,rgba(255,255,255,0.48) 0 0.55px,#0000 1.15px),
  radial-gradient(circle at 27.8% 72.5%,rgba(233,220,255,0.69) 0 0.76px,#0000 1.36px),
  radial-gradient(circle at 57.1% 28.6%,rgba(255,255,255,0.45) 0 0.48px,#0000 1.08px),
  radial-gradient(circle at 16.6% 31.2%,rgba(233,220,255,0.31) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 85.3% 33.9%,rgba(255,255,255,0.56) 0 0.75px,#0000 1.35px),
  radial-gradient(circle at 20.9% 9.1%,rgba(255,255,255,0.59) 0 0.51px,#0000 1.11px),
  radial-gradient(circle at 58.1% 83.7%,rgba(255,236,220,0.63) 0 0.52px,#0000 1.12px),
  radial-gradient(circle at 73.2% 16.6%,rgba(255,255,255,0.35) 0 0.65px,#0000 1.25px),
  radial-gradient(circle at 77.8% 61.9%,rgba(255,255,255,0.42) 0 0.48px,#0000 1.08px),
  radial-gradient(circle at 25.3% 82.7%,rgba(255,255,255,0.35) 0 0.63px,#0000 1.23px),
  radial-gradient(circle at 73.3% 97.7%,rgba(255,255,255,0.42) 0 0.47px,#0000 1.07px),
  radial-gradient(circle at 61.5% 89.9%,rgba(255,255,255,0.32) 0 0.47px,#0000 1.07px),
  radial-gradient(circle at 77.0% 57.3%,rgba(255,255,255,0.42) 0 0.61px,#0000 1.21px),
  radial-gradient(circle at 86.2% 9.4%,rgba(255,255,255,0.64) 0 0.60px,#0000 1.20px),
  radial-gradient(circle at 84.6% 73.0%,rgba(255,255,255,0.48) 0 0.53px,#0000 1.13px),
  radial-gradient(circle at 89.4% 3.6%,rgba(255,255,255,0.65) 0 0.52px,#0000 1.12px),
  radial-gradient(circle at 65.2% 84.7%,rgba(255,255,255,0.34) 0 0.51px,#0000 1.11px),
  radial-gradient(circle at 54.1% 2.6%,rgba(255,255,255,0.55) 0 0.67px,#0000 1.27px),
  radial-gradient(circle at 97.7% 43.3%,rgba(255,255,255,0.52) 0 0.52px,#0000 1.12px),
  radial-gradient(circle at 89.3% 35.5%,rgba(255,255,255,0.66) 0 0.51px,#0000 1.11px),
  radial-gradient(circle at 18.3% 68.9%,rgba(255,255,255,0.41) 0 0.46px,#0000 1.06px),
  radial-gradient(circle at 4.9% 4.9%,rgba(255,255,255,0.54) 0 0.54px,#0000 1.14px),
  radial-gradient(circle at 95.3% 20.9%,rgba(255,255,255,0.61) 0 0.62px,#0000 1.22px),
  radial-gradient(ellipse 60% 22% at 40% 55%,#8f72e81c,#0000 70%),
  radial-gradient(ellipse 35% 14% at 70% 40%,#c9a8ff12,#0000 70%)}
.stars-mid{transform:translate3d(calc(var(--tx) * -45px),calc(var(--ty) * -18px),-350px) scale(1.318);background-image:
  radial-gradient(circle at 7% 22%,#fff9 0 1px,#0000 1.6px),radial-gradient(circle at 14% 71%,#fff6 0 1px,#0000 1.5px),
  radial-gradient(circle at 21% 38%,#fffc 0 1.3px,#0000 2px),radial-gradient(circle at 29% 86%,#fff5 0 1px,#0000 1.5px),
  radial-gradient(circle at 33% 12%,#fff7 0 1px,#0000 1.5px),radial-gradient(circle at 41% 58%,#fff4 0 .8px,#0000 1.4px),
  radial-gradient(circle at 57% 9%,#fff8 0 1px,#0000 1.6px),radial-gradient(circle at 63% 77%,#fff5 0 1px,#0000 1.5px),
  radial-gradient(circle at 69% 27%,#fffb 0 1.2px,#0000 2px),radial-gradient(circle at 92% 14%,#fff7 0 1px,#0000 1.6px),
  radial-gradient(circle at 96% 63%,#fff5 0 1px,#0000 1.5px),radial-gradient(circle at 3% 52%,#fff6 0 1px,#0000 1.5px)}
.stars-near{transform:translate3d(calc(var(--tx) * -100px),calc(var(--ty) * -40px),420px) scale(.618);background-image:
  radial-gradient(circle at 11% 44%,#fff 0 2.2px,#fff5 3.4px,#cbb6ff22 9px,#0000 16px),
  radial-gradient(circle at 37% 76%,#fff 0 1.9px,#fff4 3px,#0000 10px),
  radial-gradient(circle at 48% 16%,#fff 0 2.4px,#ffe9d655 3.6px,#ffe9d61c 10px,#0000 18px),
  radial-gradient(circle at 79% 84%,#fffe 0 1.8px,#fff3 3px,#0000 9px),
  radial-gradient(circle at 26% 9%,#fffd 0 1.7px,#0000 3px),
  radial-gradient(circle at 63% 31%,#e2d6ff 0 1.6px,#cbb6ff33 4px,#0000 11px)}
/* A few mid stars breathe out of step, so the dots read as stars, not specks. */
.twinkle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px #fff8;transform:translate3d(calc(var(--tx) * -45px),calc(var(--ty) * -18px),-350px) scale(1.318);animation:twinkle 4.3s ease-in-out infinite}
.twinkle:nth-of-type(2){animation-duration:6.1s;animation-delay:-2s}
.twinkle:nth-of-type(3){animation-duration:5.2s;animation-delay:-3.7s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.eclipse{position:absolute;--d:clamp(460px,46vw,900px);width:var(--d);aspect-ratio:1;right:calc(var(--d) * -.5);top:50%;transform:translateY(-50%) translate(calc(var(--tx) * -14px),calc(var(--ty) * -8px));
  --moon:color-mix(in srgb,var(--plate) 78%,#05030c);
  }
/* The sun, its diamond-ring bead and two prominences, under the moon. The box is
   oversized so the bead's glow is never clipped at a box edge. */
.sun{position:absolute;inset:-10%;background:
  radial-gradient(circle at 10.2% 38.3%,#fff 0 3px,#fff4e8b0 7px,#fff4e826 22px,#0000 46px),
  radial-gradient(circle at 13.75% 70.8%,#ff8fb8 0 2px,#ff8fb860 4px,#0000 7px),
  radial-gradient(circle at 20.8% 20.4%,#ff9ec2b0 0 1.5px,#0000 4px),
  radial-gradient(closest-side,#fff7f0 83.2%,#0000 83.5%)}
.eclipse::before,.eclipse::after{content:"";position:absolute;border-radius:50%}
/* Corona streamers: uneven on purpose, longer along one axis like the real thing. */
.eclipse::before{inset:-58%;opacity:.55;
  background:conic-gradient(from 12deg,#0000 0deg,#fff3ea40 9deg,#0000 22deg,#e6d9ff26 40deg,#0000 58deg,#fff3ea55 74deg,#0000 83deg,#0000 120deg,#e6d9ff30 141deg,#0000 160deg,#fff3ea22 196deg,#0000 214deg,#fff3ea4a 252deg,#e6d9ff20 262deg,#0000 279deg,#e6d9ff22 318deg,#0000 336deg);
  -webkit-mask:radial-gradient(closest-side,#0000 38%,#000 40%,#0006 62%,#0000 100%);mask:radial-gradient(closest-side,#0000 38%,#000 40%,#0006 62%,#0000 100%)}
.eclipse::after{inset:0;background:var(--moon);transform:translate(calc(var(--mx,0) * 1px),calc(var(--my,0) * 1px));
  box-shadow:0 0 0 1px #fff6ee90,0 0 10px 1px #fff1e670,0 0 40px 8px #d9c8ff30,0 0 140px 50px #a98bff18}
.meteor{position:absolute;left:9%;top:17%;width:240px;height:2px;opacity:0;transform-origin:right center;
  background:linear-gradient(90deg,#0000,#cbb6ff66 45%,#fffc 85%,#fff);filter:drop-shadow(0 0 3px #e2d6ffaa)}
.meteor::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #fffc,0 0 22px 6px #cbb6ff66}
@media(max-width:700px){.eclipse{--d:340px;top:8%;transform:translateY(-30%)}.meteor{width:140px}}
/* Meteors are spawned by preview.js at a random place, angle, length and depth (--z),
   then streak and burn out: the trail collapses into the head instead of fading. */
.meteor.spark{animation:meteor-once .7s linear forwards}
@keyframes meteor-once{
  0%{opacity:0;transform:translateZ(var(--z,0px)) rotate(var(--tilt,17deg)) translateX(0) scaleX(.3)}
  10%{opacity:1}
  78%{opacity:1;transform:translateZ(var(--z,0px)) rotate(var(--tilt,17deg)) translateX(380px) scaleX(1)}
  100%{opacity:0;transform:translateZ(var(--z,0px)) rotate(var(--tilt,17deg)) translateX(460px) scaleX(0)}}
@media(prefers-reduced-motion:reduce){.meteor{display:none}.twinkle{animation:none;opacity:.7}}

/* Inner-page plate: big title with real presence. */
.page-plate .frame{padding:3.8rem 0 3.4rem}
.page-plate.plate-tall .frame{padding-bottom:5.6rem}
.crumbs{margin:0 0 1.6rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--header-muted)}
.crumbs a{color:var(--header-ink)}
.plate-label{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-xs);color:var(--header-muted)}
.plate-label .tag{color:#fff;border-color:#c9b6ff;background:#ffffff10}
.plate-label .tag-solid{background:var(--accent);border-color:var(--accent);color:#120c26}
.page-plate h1{text-wrap:balance;margin:0;font-size:var(--fs-h1);line-height:1.06;max-width:20ch;letter-spacing:-.005em}
.page-plate h1::before{content:"";display:block;width:3.2rem;height:6px;background:var(--accent);margin-bottom:1.3rem}
.page-plate .dek{margin:1.1rem 0 0;max-width:52ch;color:var(--header-muted);font-size:var(--fs-lg);line-height:1.45}
.plate-meta{display:flex;flex-wrap:wrap;gap:.4rem 0;margin:2rem 0 0;padding:.85rem 0 0;border-top:1px solid var(--header-rule);font-family:"Umbris Mono",monospace;font-size:var(--fs-xs);color:var(--header-muted);list-style:none}
.plate-meta li+li::before{content:"/";margin:0 .9em;opacity:.5}
.plate-meta strong{color:#fff;font-weight:400}
.page-plate .cta{justify-content:flex-start;padding:2rem 0 0}
.progress{display:inline-flex;gap:4px;vertical-align:middle}
.progress i{width:14px;height:14px;border:1px solid #c9b6ff}
.progress i.on{background:var(--accent);border-color:var(--accent)}

/* Section heads and generic sections */
.section{padding:3.6rem 0 0}
.section:last-child{padding-bottom:4.4rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;border-top:2px solid var(--rule-strong);padding-top:.8rem;margin-bottom:1.6rem}
.section-head h2{margin:0;font-size:var(--fs-h2);font-weight:700}
.section-head .n,.section-head a{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.section-head a{color:var(--link)}
.section-lede{max-width:60ch;color:var(--muted);margin:-.6rem 0 1.8rem;font-size:var(--fs-md)}
.standfirst{font-size:1.38rem;line-height:1.48;margin:0 0 1rem;max-width:40ch}

/* Feed (home recent writing) */
.feed .entry{padding:1rem 0 1.05rem;border-bottom:1px solid var(--rule)}
.entry-meta{margin:0 0 .3rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.feed h3{font-size:var(--fs-lg)}
.feed h3 a{text-decoration:none}
.feed h3 a:hover{text-decoration:underline}
.feed .entry p:last-child{margin:.4rem 0 0;color:var(--muted)}

/* Home: one-line intro in the plate, then three pillars. */
.plate-intro{margin:0 auto;padding:.5rem 0 1.8rem;text-align:center;font-size:clamp(1.2rem,2vw,1.55rem);color:var(--header-ink);max-width:36ch;line-height:1.4}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:-1px;align-items:stretch}
.pillar{display:flex;flex-direction:column;padding:2.4rem 2.2rem 2.2rem;border-left:1px solid var(--rule)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar:last-child{padding-right:0}
.pillar-kind{margin:0 0 .6rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);display:flex;gap:.7rem;align-items:baseline}
.pillar-kind .state{padding:.05rem .45rem;border:1px solid var(--accent);color:var(--ink)}
.pillar h2{margin:0 0 .7rem;font-size:var(--fs-h2);font-weight:700}
.pillar h2 a{color:var(--ink);text-decoration:none}
.pillar h2 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.pillar>p{margin:0;color:var(--muted)}
.pillar ul{margin:1.2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.pillar li{padding:.55rem 0;border-bottom:1px solid var(--rule)}
.pillar ul.plain li{color:var(--ink)}
.pillar .pillar-go{margin-top:auto;padding-top:1.3rem;font-weight:700}
.pillar-go a::after,.go::after{content:" \2192"}
.pillar-feature{background:var(--feature);color:var(--header-ink);margin:-2.8rem 0 0;padding:2.8rem 2.4rem 2.6rem!important;border-left:0;border-top:4px solid var(--accent);box-shadow:0 18px 40px -24px #0a061899;position:relative;z-index:1}
.pillar-feature+.pillar{border-left:0}
/* Side pillars read as their own panels flanking the feature, not page background. */
/* Padding, not margin: a collapsing margin exposed a dark strip under the plate. */
.pillars{gap:1.1rem;margin-top:0;padding-top:2.2rem}
.pillars>.pillar:not(.pillar-feature){background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--rule);padding:2rem!important;align-self:start;min-height:calc(100% - 1.6rem)}
.pillar-feature{margin-top:-5rem}
@media(max-width:980px){.pillars>.pillar:not(.pillar-feature){border:1px solid var(--rule);border-top:3px solid var(--rule);padding:1.6rem!important}}
.pillar-feature .pillar-kind{color:var(--header-muted)}
.pillar-feature .state{color:#fff;border-color:#c9b6ff}
.pillar-feature h2 a{color:#fff}
.pillar-feature>p{color:var(--header-muted)}
.pillar-feature ul{border-top-color:var(--header-rule)}
.pillar-feature li{border-bottom-color:var(--header-rule)}
.pillar-feature ul.plain li{color:#fff}
.pillar-feature a{color:#fff}
/* Pillar rows: Umbris Mono index register (owner pick 2026-10-10). */
.pillar li,.pillar li a{font-family:"Umbris Mono",monospace;font-size:var(--fs-xs);letter-spacing:.01em;line-height:1.55}
.pillar li a{text-decoration:none}
.pillar li a:hover{text-decoration:underline}
.pillar li a::after{content:"  \2192";opacity:.6}

.band-surface{background:var(--surface);border-bottom:1px solid var(--rule)}
.band-tint{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.principles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2.2rem;padding:3.6rem 0;border-bottom:1px solid var(--rule)}
.band-tint .principles,.band-surface .principles{border-bottom:0}
.principles-head{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:1.15;grid-column:1;grid-row:1/span 4}
.principles h3{font-size:var(--fs-lg);font-weight:700;margin:0 0 .45rem}
.principles p{margin:0;color:var(--muted)}
.notice-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin:2.4rem 0 0;padding:.9rem 1.2rem;background:var(--tint);border-left:5px solid var(--accent)}
.notice-line h2{margin:0;font-size:var(--fs-md)}
.notice-line p{margin:0;color:var(--muted)}
.recent{margin:2.8rem 0 4rem}
.recent .feed{display:grid;grid-template-columns:1fr}
.recent .feed .entry{padding-top:.9rem;border-bottom:0;border-top:2px solid var(--rule)}
.recent .section-head{margin-bottom:1rem}

/* Calls to action: square, high contrast. */
.cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin:0;padding:0 0 4.8rem}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 1.6rem;font-size:1.02rem;font-weight:700;text-decoration:none;border:2px solid var(--header-ink)}
.btn-solid{background:var(--header-ink);color:var(--plate)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-line{color:var(--header-ink)}
.btn-line:hover{background:#ffffff1a}
.btn-ink{border-color:var(--ink);color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--page)}

/* Rail: 2018 sidebar modules with a title strip, square corners. */
.rail{display:grid;gap:1.4rem;align-content:start}
.module{border:1px solid var(--rule);background:var(--surface)}
.module h2{margin:0;padding:.55rem .9rem;background:var(--header);color:var(--header-ink);font-size:var(--fs-sm);font-weight:700;display:flex;justify-content:space-between;align-items:baseline}
.module h2 .n{font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-2xs);color:var(--header-muted)}
.module ul,.module ol{list-style:none;margin:0;padding:0}
.module li{padding:.6rem .9rem;border-top:1px solid var(--rule)}
.module li:first-child{border-top:0}
.module li span{display:block;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);line-height:1.45;margin-top:.15rem}
.sticky{position:sticky;top:calc(var(--bar) + 1.4rem)}
.toc ol{counter-reset:toc}
.toc li{counter-increment:toc;padding:0;border-top:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:2rem 1fr;padding:.55rem .9rem .55rem .7rem;text-decoration:none;color:var(--ink);font-size:var(--fs-sm);line-height:1.35;border-left:4px solid transparent}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);padding-top:.12rem}
.toc a:hover{background:var(--tint)}
.toc a[aria-current="true"]{border-left-color:var(--accent);background:var(--tint);font-weight:700}
.toc a[aria-current="true"]::before{color:var(--accent-ink)}
.track-list li{display:grid;grid-template-columns:2.2rem 1fr;font-size:var(--fs-sm)}
.track-list li b{font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-2xs);color:var(--muted);padding-top:.15rem}
.track-list li.here{background:var(--tint);box-shadow:inset 4px 0 0 var(--accent);font-weight:700}
.track-list li.later{color:var(--muted)}

/* ---------- Reading template (post + lesson) ---------- */
.reading{display:grid;grid-template-columns:minmax(0,44rem) 18rem;gap:4.5rem;justify-content:center}
.page-plate .reading>div{grid-column:1}
.reading-body{padding:3.2rem 0 4.6rem;align-items:start}
.prose{font-size:var(--fs-md);line-height:1.7;max-width:68ch;counter-reset:sec;min-width:0}
.prose>*{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose .lead{font-size:1.3rem;line-height:1.55;font-weight:500;color:var(--ink);margin-bottom:1.4em;padding-bottom:1.2em;border-bottom:1px solid var(--rule)}
.prose h2{counter-increment:sec;position:relative;font-size:var(--fs-h2);font-weight:700;margin:3.2rem 0 1rem;padding-top:1rem;border-top:2px solid var(--rule-strong)}
.prose h2::before{content:none;display:block;font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-2xs);color:var(--accent-ink);margin:.2rem 0 .5rem;letter-spacing:.06em}
.prose.steps h2::before{content:"Step " counter(sec)}
.prose h3{font-size:var(--fs-lg);font-weight:700;margin:2.2rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1.3em;padding:0;list-style:none}
.prose li{position:relative;padding-left:1.8rem;margin:.4em 0}
.prose ul>li::before{content:"";position:absolute;left:.25rem;top:.62em;width:.45rem;height:.45rem;background:var(--accent)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li);position:absolute;left:0;top:.2em;min-width:1.25rem;height:1.25rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);line-height:1.25rem;text-align:center;border:1px solid var(--rule-strong);color:var(--ink)}
.prose blockquote{margin:2rem 0;padding:1.1rem 1.4rem;border-left:6px solid var(--accent);background:var(--tint);font-family:Umbris,Arial,sans-serif;font-size:var(--fs-lg);line-height:1.45}
.prose blockquote p{margin:0}
.prose blockquote footer{margin-top:.7rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.prose code{font-family:"Umbris Mono",monospace;font-size:.9em;padding:.05em .35em;background:var(--tint);border:1px solid var(--rule)}
.prose sup a{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);text-decoration:none;padding:0 .15em;border:1px solid var(--rule);margin-left:.1em}
.prose hr{border:0;border-top:1px solid var(--rule);margin:3rem 0;position:relative;overflow:visible}
.prose hr::after{content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;background:var(--accent);transform:translateX(-50%) rotate(0)}

.code{margin:1.8rem 0;background:var(--code-bg);color:var(--code-ink);border-top:3px solid var(--accent)}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:.3rem .4rem .3rem 1rem;background:var(--code-head);font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--code-muted)}
.copy{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);min-height:36px;padding:0 .9rem;background:transparent;color:var(--code-ink);border:1px solid #ffffff40;cursor:pointer}
.copy:hover{background:#ffffff14}
.copy[data-done]{border-color:var(--accent);color:#fff;background:#ffffff14}
.code pre{margin:0;padding:1.1rem 1.2rem 1.25rem;overflow-x:auto;font-family:"Umbris Mono",monospace;font-size:.9rem;line-height:1.65}
.code pre code{background:none;border:0;padding:0;font-size:inherit}
.code .c{color:#a99cc4}.code .k{color:#d5c4ff}

.table-wrap{margin:1.8rem 0;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.5}
.prose caption{caption-side:bottom;text-align:left;padding-top:.6rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.prose th{text-align:left;font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.5rem .9rem .5rem 0;border-bottom:2px solid var(--rule-strong)}
.prose td{vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule)}
.prose td:first-child{font-weight:700}

.figure{margin:2rem 0;border:1px solid var(--rule);background:var(--surface)}
.figure figcaption{padding:.65rem 1rem;border-top:1px solid var(--rule);font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:2.4rem 1.6rem;background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 2.4rem;background-position:0 .6rem}
.diagram div{position:relative;padding:1rem 1rem 1.1rem;background:var(--page);border:2px solid var(--rule-strong);border-top:8px solid var(--accent)}
.diagram div+div::before{content:"";position:absolute;right:100%;top:50%;width:calc(2rem + 2px);height:3px;background:var(--accent)}
.diagram b{display:block;font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-sm);color:var(--ink)}
.diagram span{display:block;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);margin-top:.3rem}

.callout{--c:var(--accent-ink);margin:1.9rem 0;padding:1rem 1.3rem 1.05rem;border-left:5px solid var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface));font-size:var(--fs-sm)}
.callout-tip{--c:var(--tip)}.callout-warn{--c:var(--warn)}
.callout-label{margin:0 0 .3rem!important;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.callout p:last-child{margin-bottom:0}

.footnotes{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--muted)}
.footnotes h2{all:unset;display:block;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);margin-bottom:.6rem}
.footnotes h2::before,.footnotes h2::after{display:none}
.footnotes ol>li::before{border-color:var(--rule)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.2rem}
.pager a,.pager span.off{display:block;padding:1rem 1.2rem 1.1rem;border:2px solid var(--rule-strong);text-decoration:none;color:var(--ink);font-family:Umbris,Arial,sans-serif;font-size:var(--fs-md);font-weight:700;line-height:1.3}
.pager a:hover{border-color:var(--accent);background:var(--tint)}
.pager small{display:block;font-family:"Umbris Mono",monospace;font-weight:400;font-size:var(--fs-2xs);color:var(--muted);margin-bottom:.35rem}
.pager .next{text-align:right;grid-column:2}
.pager span.off{border-style:dashed;border-color:var(--rule);color:var(--muted)}

/* Lesson-only components */
.objectives{margin:0 0 2.4rem;border:2px solid var(--rule-strong);background:var(--surface)}
.objectives .box-head,.exercise .box-head{margin:0!important;display:flex;justify-content:space-between;gap:1rem;padding:.55rem 1.1rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
.objectives .box-head{background:var(--rule-strong);color:var(--page)}
.prose .objectives ul{margin:0;padding:.8rem 1.1rem 1rem}
.prose .objectives li::before{width:.8rem;height:.8rem;top:.42em;left:0;background:transparent;border:2px solid var(--accent)}
.exercise{margin:2.6rem 0;background:var(--feature);color:var(--header-ink);border-top:4px solid var(--accent)}
.exercise .box-head{background:#ffffff10;color:var(--header-muted)}
.exercise-body{padding:1.2rem 1.4rem 1.4rem}
.exercise h3{border-left:0;padding:0;margin:0 0 .7rem;color:#fff}
.exercise a{color:#fff}
.prose .exercise ol>li::before{border-color:#c9b6ff;color:#fff}
.exercise details{margin-top:1rem;border:1px solid var(--header-rule)}
.exercise summary{cursor:pointer;padding:.6rem .9rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:#fff}
.exercise details p{padding:0 .9rem .8rem;margin:0;color:var(--header-muted)}

/* ---------- About ---------- */
.statement{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:2.4rem;padding:3.6rem 0}
.statement .label{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);padding-top:.9rem;border-top:0}
.statement p.big{margin:0;font-family:Umbris,Arial,sans-serif;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.25;max-width:30ch}
.statement p.small{margin:1.1rem 0 0;color:var(--muted);max-width:60ch}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cols3>div{padding:1.8rem 2rem 2rem;border-left:1px solid var(--rule)}
.cols3>div:first-child{border-left:0;padding-left:0}
.cols3 .idx{display:none;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--accent-ink);margin-bottom:.8rem}
.cols3 h3{font-size:var(--fs-xl);margin:0 0 .5rem}
.cols3 p{margin:0;color:var(--muted)}
.dest{display:grid;gap:1rem}
.dest-row{display:grid;grid-template-columns:9rem minmax(0,1fr) auto 3rem;align-items:center;gap:1.6rem;padding:1.4rem 1.6rem;border:2px solid var(--rule-strong);background:var(--surface)}
.dest-row .kind{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.dest-row h3{font-size:var(--fs-h2);margin:0}
.dest-row p{margin:.2rem 0 0;color:var(--muted)}
.dest-row .tag{border-style:dashed;color:var(--muted)}
.dest-row .arrow{font-family:"Umbris Mono",monospace;font-size:var(--fs-xl);color:var(--rule);text-align:right}
.steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:st}
.steps-list li{counter-increment:st;padding:0 1.6rem 0 0;position:relative}
.steps-list li::before{content:counter(st,decimal-leading-zero);display:block;font-family:"Umbris Mono",monospace;font-size:2.6rem;line-height:1;color:var(--accent-ink);padding-bottom:.8rem;margin-bottom:1rem;border-bottom:3px solid var(--rule-strong)}
.steps-list h3{font-size:var(--fs-lg);margin:0 0 .4rem}
.steps-list p{margin:0;color:var(--muted)}
.placeholder-note{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted);margin:1.4rem 0 0}

/* ---------- Blog ---------- */
.featured{position:relative;z-index:1;margin-top:-3.2rem;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--feature);color:var(--header-ink);border-top:4px solid var(--accent);box-shadow:0 18px 40px -24px #0a061899}
.featured-main{padding:2.6rem 2.8rem 2.6rem}
.featured .kicker{display:flex;gap:.8rem;align-items:center;margin:0 0 1rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--header-muted)}
.featured .tag{color:#fff;border-color:#c9b6ff}
.featured h2{margin:0;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.1;max-width:22ch}
.featured h2 a{color:#fff;text-decoration:none}
.featured h2 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.featured-main>p{margin:1rem 0 0;color:var(--header-muted);font-size:var(--fs-md);max-width:52ch}
.featured .go{display:inline-block;margin-top:1.6rem;color:#fff;font-weight:700}
.featured-side{margin:0;padding:2.6rem 2.4rem;border-left:1px solid var(--header-rule)}
.featured-side div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--header-rule);font-family:"Umbris Mono",monospace;font-size:var(--fs-xs)}
.featured-side dt{color:var(--header-muted)}
.featured-side dd{margin:0;color:#fff}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;padding:2.6rem 0 0}
.toolbar .lbl{font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:0}
.chip{font-family:"Umbris Mono",monospace;font-size:var(--fs-xs);min-height:44px;padding:0 1.1rem;background:var(--surface);color:var(--ink);border:2px solid var(--rule-strong);margin-left:-2px;cursor:pointer}
.chip:first-child{margin-left:0}
.chip:hover{background:var(--tint)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--page);box-shadow:inset 0 -4px 0 var(--accent);position:relative;z-index:1}
.chip .ct{opacity:.7;margin-left:.4rem}
.toolbar .count{margin-left:auto;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2.4rem;padding:1.6rem 0 4.4rem}
.post-card{padding:1.3rem 0 1.8rem;border-top:2px solid var(--rule-strong)}
.post-card:hover{border-top-color:var(--accent)}
.post-card .entry-meta{display:flex;gap:.8rem;align-items:center;margin-bottom:.7rem}
.post-card h3{font-size:var(--fs-xl);line-height:1.2}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.post-card p{margin:.6rem 0 0;color:var(--muted)}
.empty{grid-column:1/-1;color:var(--muted);font-family:"Umbris Mono",monospace;font-size:var(--fs-xs)}
[hidden]{display:none!important}

/* ---------- Learn ---------- */
.roadmap{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;padding-top:2.2rem}
.roadmap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent) 0 33.3%,var(--rule-strong) 33.3%)}
.track{position:relative;padding:1.8rem 1.8rem 2rem;border:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column}
.track::before{content:"";position:absolute;top:calc(-2.2rem - 7px);left:-1px;width:18px;height:18px;background:var(--page);border:4px solid var(--rule-strong)}
.track-feature{background:var(--feature);color:var(--header-ink);border-color:var(--feature)}
.track-feature::before{background:var(--accent);border-color:var(--accent)}
.track-num{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .8rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--muted)}
.track-feature .track-num{color:var(--header-muted)}
.track-feature .tag{color:#fff;border-color:#c9b6ff}
.track-num .tag{display:none}
.track h3{font-size:var(--fs-h2);margin:0 0 .6rem}
.track>p{margin:0;color:var(--muted)}
.track-feature>p{color:var(--header-muted)}
.track ol{list-style:none;margin:1.3rem 0 0;padding:0;border-top:1px solid var(--rule);counter-reset:ls}
.track-feature ol{border-top-color:var(--header-rule)}
.track ol li{counter-increment:ls;display:grid;grid-template-columns:2.6rem 1fr;padding:.55rem 0;border-bottom:1px solid var(--rule);font-family:"Umbris Mono",monospace;font-size:var(--fs-xs);line-height:1.5}
.track-feature ol li{border-bottom-color:var(--header-rule)}
.track ol li::before{content:attr(data-n);color:var(--muted)}
.track-feature ol li::before{color:var(--header-muted)}
.track ol li a{color:#fff;font-weight:400}
.track ol li em{font-style:normal;color:var(--accent-ink);margin-left:.4em}
.track-feature ol li em{color:#c9b6ff}
.track .track-go{margin:auto 0 0;padding-top:1.3rem;font-weight:700}
.track-feature .track-go a{color:#fff}
.format{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:3rem;padding:3.6rem 0}
.format h2{margin:0 0 .8rem;font-size:var(--fs-h2)}
.format p{margin:0 0 1.2rem;color:var(--muted);max-width:52ch}
.format ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--rule-strong)}
.format li{padding:1rem 1.2rem 1.1rem 0;border-bottom:1px solid var(--rule)}
.format li b{display:block;font-family:Umbris,Arial,sans-serif;font-size:var(--fs-lg)}
.format li span{color:var(--muted);font-size:var(--fs-sm)}

/* Footer: a bookend in the header colour, entirely Umbris. */
.footer{background:var(--header);color:var(--header-muted);border-top:4px solid var(--accent);font-size:.98rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:2.8rem 0 2.2rem}
.footer h2{margin:0 0 .7rem;font-size:1rem;font-weight:700;color:var(--header-ink);letter-spacing:.04em}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:.2rem 0}
.footer a{color:var(--header-ink)}
.footer .brand img{width:132px;height:auto;display:block;margin-bottom:.8rem}
.footer .brand p{margin:0;max-width:30ch}
.footer-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0 1.2rem;border-top:1px solid var(--header-rule);font-size:.92rem}
.masthead,.masthead *,.footer,.footer *{font-family:Umbris,Arial,sans-serif}

/* Home logo motion: a fixed clone travels from the plate into the bar. */
.dock-mark{position:fixed;top:0;left:0;z-index:11;display:block;line-height:0;will-change:transform,width}
.dock-mark img{display:block;width:100%;height:auto}
.home-logo-motion .masthead .wordmark img,.home-logo-motion .hero-mark{visibility:hidden}

@media(max-width:1180px){
  .reading{grid-template-columns:minmax(0,1fr) 16rem;gap:3rem}
  .steps-list{grid-template-columns:1fr 1fr;row-gap:2rem}
}
@media(max-width:980px){
  .principles{grid-template-columns:1fr}
  .principles-head{grid-column:1/-1;grid-row:auto}
  .pillar-feature{margin:0 calc(var(--gutter) / -2)!important;padding:2rem calc(var(--gutter) / 2)!important}
  .pillars{grid-template-columns:1fr}
  .pillar,.pillar:first-child,.pillar:last-child{padding:1.8rem 0;border-left:0;border-top:1px solid var(--rule)}
  .pillar:first-child{border-top:0}
  .recent .feed{grid-template-columns:1fr}
  .recent .feed .entry{padding:1rem 0}
  .reading{grid-template-columns:minmax(0,1fr)}
  .reading-body .rail{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .sticky{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .statement{grid-template-columns:1fr;gap:1.2rem}
  .cols3,.roadmap,.post-grid{grid-template-columns:1fr}
  .cols3>div,.cols3>div:first-child{padding:1.4rem 0;border-left:0;border-top:1px solid var(--rule)}
  .cols3>div:first-child{border-top:0}
  .featured{grid-template-columns:1fr}
  .featured-side{border-left:0;border-top:1px solid var(--header-rule);padding:1.2rem 2.8rem 2rem}
  .roadmap::before{display:none}
  .track::before{display:none}
  .format{grid-template-columns:1fr;gap:1.6rem}
}
@media(max-width:700px){
  :root{--gutter:2rem;--bar:56px;font-size:17px}
  .principles{grid-template-columns:1fr;gap:1.2rem;padding:2.4rem 0}
  .cta{padding-bottom:3rem}
  .btn{flex:1 1 100%;justify-content:center}
  .plate-intro{padding-bottom:2.2rem}
  .mainnav{display:none}
  .mobile-menu{display:block;position:relative}
  .mobile-menu summary{list-style:none;min-height:44px;display:flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--header-ink);font-size:1rem}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::before{content:"";width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
  .mobile-menu nav{position:absolute;top:calc(100% + 5px);left:-1rem;display:grid;min-width:180px;background:var(--header);border:1px solid var(--header-rule);border-top:3px solid var(--accent);box-shadow:0 8px 20px #0005}
  .mobile-menu nav a{min-height:46px;display:flex;align-items:center;padding:0 1rem;color:var(--header-ink);text-decoration:none;border-top:1px solid var(--header-rule)}
  .mobile-menu nav a:first-child{border-top:0}
  .mobile-menu nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
  .wordmark{width:100px;height:40px}.wordmark img{width:94px}
  .switch-label{display:none}
  .plate-title{padding:2.2rem 0 .4rem}
  .page-plate .frame{padding:2.4rem 0 2.4rem}
  .page-plate.plate-tall .frame{padding-bottom:4.2rem}
  .crumbs{margin-bottom:1.1rem}
  .footer-grid{grid-template-columns:1fr;gap:1.4rem}
  .dest-row{grid-template-columns:1fr auto;gap:.6rem 1rem;padding:1.1rem 1.1rem}
  .dest-row .kind{grid-column:1/-1}
  .dest-row>div{grid-column:1/-1}
  .dest-row .arrow{display:none}
  .dest-row .tag{white-space:normal;grid-column:1/-1;justify-self:start}
  .diagram{grid-template-columns:1fr;gap:1.2rem;padding:1.4rem 1rem}
  .diagram div+div::before{right:auto;left:1.2rem;top:auto;bottom:100%;width:3px;height:calc(1.2rem + 2px)}
  .steps-list{grid-template-columns:1fr}
  .featured-main{padding:1.8rem 1.4rem}
  .featured-side{padding:1rem 1.4rem 1.6rem}
  .featured{margin-left:calc(var(--gutter) / -2);margin-right:calc(var(--gutter) / -2)}
  .toolbar .count{margin-left:0;width:100%}
  .format ol{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .prose .lead{font-size:1.18rem}
  .code pre{font-size:.84rem}
}

/* Eased, user-triggered theme change. */
.user-theme-change *,.user-theme-change *::before{transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,transform .15s ease!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .switch-thumb{transition:none}
  .user-theme-change *,.user-theme-change *::before{transition:none!important}
}