@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2")}

/* The view from inside stays warm and dark in both themes; the page around it follows the theme. */

/* The workroom (the lab) stays dark in both themes; the page around it follows the theme. */
:root{
  --bg:#f5efe6;--bg-2:#ebe2d4;--ink:#1d1812;--ink-2:#4d4336;--rule:#d8ccba;--rule-2:#8c7c66;
  --link:#8a3b18;--accent:#a8481f;--bar-bg:rgba(245,239,230,.9);--focus-ring:#1f5fae;
  --room:#17130f;--room-2:#231c15;--r-ink:#f4ecdf;--r-ink-2:#d6c8b2;--r-rule:rgba(244,236,223,.2);
  --beam:#5a4633;--cord:#efe6d6;--sack:#c9a877;--sack-edge:#8a6d45;--plumb:rgba(244,236,223,.35);--focus:#ffcf7a;
  --ground:#6d5a47;--ground-deep:#2a221b;--brick:#c06a3e;--basalt:#6a7178;--mortar:#f0d9c4;--load:#9c8a74;
  color-scheme:light;
}
:root[data-theme="dark"]{--bg:#12100d;--bg-2:#1b1814;--ink:#f1eadf;--ink-2:#cfc3b1;--rule:#342e26;--rule-2:#8c7c66;--link:#f0b48c;--accent:#f0a070;--bar-bg:rgba(18,16,13,.88);--focus-ring:#ffcf7a;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12100d;--bg-2:#1b1814;--ink:#f1eadf;--ink-2:#cfc3b1;--rule:#342e26;--rule-2:#8c7c66;--link:#f0b48c;--accent:#f0a070;--bar-bg:rgba(18,16,13,.88);--focus-ring:#ffcf7a;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1875rem/1.62 "Newsreader",Georgia,serif;font-optical-sizing:auto}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--bg);color:var(--ink);padding:.5rem .8rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
section[id],header[id]{scroll-margin-top:3.2rem}

.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.9rem;min-height:2.75rem;padding:0 1rem;background:var(--bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-size:.9rem}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .home{font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto}
.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;color:var(--ink-2)}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1 1 0}
.langnav{display:flex;align-items:center;gap:.35rem;flex:none}
.chip .short{display:none}
@media (max-width:560px){.chip .long{display:none}.chip .short{display:inline}}
.chip{display:inline-flex;align-items:center;min-height:2.75rem;border:1px solid var(--rule-2);border-radius:99px;padding:0 .6rem;font-size:.82rem;white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.6rem;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:50%}
.icon-btn svg[hidden]{display:none}
@media (max-width:760px){.topnav{display:none}.topbar{gap:.5rem}}
@media (max-width:560px){.topbar{padding:0 .6rem}.chip{font-size:.74rem;padding:0 .55rem;min-height:2.75rem}.icon-btn{margin-right:0}}

.rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.55rem}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;text-decoration:none;color:var(--ink-2);font-size:.8rem;min-height:24px}
.rail a span{opacity:0;transform:translateX(6px);transition:opacity .2s,transform .2s;background:var(--bg-2);color:var(--ink);padding:.1rem .5rem;border-radius:4px;white-space:nowrap}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--rule-2);flex:none;transition:background .2s,transform .2s}
.rail a.past i{background:var(--rule-2)}
.rail a.on i{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}
@media (max-width:1100px){.rail{display:none}}

main{max-width:46rem;margin:0 auto;padding:0 16px}
.hero{padding:2.6rem 0 1.2rem}
.hero h1{font-weight:320;font-size:clamp(2.3rem,7vw,4.4rem);line-height:1.02;letter-spacing:-.018em;margin:0 0 1rem;text-wrap:balance}
.deck{font-size:clamp(1.1rem,2.3vw,1.35rem);line-height:1.5;color:var(--ink-2);margin:0;max-width:38rem}

.lab{margin:1.2rem -16px 2.4rem;background:radial-gradient(ellipse at 50% 0%,var(--room-2),var(--room) 70%);color:var(--r-ink);border-radius:0;padding:0 0 1rem}
@media (min-width:720px){.lab{margin:1.4rem -3rem 3rem;border-radius:16px}}
.canvas-wrap{position:relative}
#web{display:block;width:100%;aspect-ratio:4/3;max-height:min(62vh,34rem);touch-action:manipulation;cursor:pointer}
.lab.stone #web{cursor:default}
.status{margin:.5rem 0 0;padding:0 1rem;text-align:center;font-size:1rem;color:var(--r-ink);min-height:1.5em;text-shadow:0 1px 8px #000}
.hint{margin:.4rem 1rem .6rem;font-size:.95rem;color:var(--r-ink-2);text-align:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem .8rem;max-width:34rem}
@media (min-width:720px){.grid{grid-template-columns:repeat(4,1fr);max-width:none;margin:.5rem 1.2rem}}
.grid .btn{font-size:.9rem;padding:.4rem .6rem;line-height:1.2;text-align:center}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.5rem .8rem}
.btn{font:inherit;font-size:.98rem;display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.5rem 1.05rem;border-radius:99px;border:1px solid var(--r-rule);background:rgba(244,236,223,.08);color:var(--r-ink);cursor:pointer;transition:background .2s}
.btn:hover{background:rgba(244,236,223,.18)}
.btn.primary{background:#f4ecdf;color:#241a10;border-color:#f4ecdf;font-weight:560}
.btn.primary:hover{background:#fff}
.btn.ghost{background:none}
.lab .btn:focus-visible{outline-color:#ffcf7a}
.still{margin:0;padding:.5rem}
.still img{display:block;width:100%;height:auto;border-radius:8px}
html.live .still{display:none}
html:not(.live) .canvas-wrap,html:not(.js) .js-only,html:not(.live) .js-only{display:none}

.chapter{padding:1rem 0 1.4rem}
.chapter h2{font-weight:360;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;margin:1.6rem 0 1rem}
.chapter h2 a,.block h2 a{color:inherit;text-decoration:none}
.chapter h2 a:hover::after,.block h2 a:hover::after{content:" #";color:var(--accent);font-size:.6em}
.chapter p{margin:0 0 1.1rem}
.chapter i{font-style:italic}
.coda{font-size:1.3rem;line-height:1.55;border-left:3px solid var(--accent);padding-left:1rem}
.more{font-size:1rem}

figure.photo{margin:1.6rem -16px 1.6rem}
@media (min-width:720px){figure.photo{margin:1.8rem -3rem}}
figure.photo .frame{overflow:hidden;background:var(--room)}
@media (min-width:720px){figure.photo .frame{border-radius:12px}}
figure.photo img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
figure.photo.turned img{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){figure.photo img{transition:none}}
figure.photo figcaption{font-size:.9rem;color:var(--ink-2);margin:.5rem 16px 0;line-height:1.45}
@media (min-width:720px){figure.photo figcaption{margin:.5rem 0 0}}
figure.photo .credit{display:block;font-size:.8rem;margin-top:.2rem}
figure.flip .btn{margin:.7rem 16px 0;background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:560}
@media (min-width:720px){figure.flip .btn{margin-left:0}}

.block{border-top:1px solid var(--rule);padding:2rem 0 2rem;margin-top:2rem}
.block h2{font-weight:400;font-size:1.7rem;margin:0 0 1rem}
.method{color:var(--ink-2);font-size:1rem}
.srcs{padding-left:1.1rem;font-size:.93rem;color:var(--ink-2)}
.srcs li{margin:0 0 .45rem}
.srcs a{word-break:break-word}
.foot{max-width:46rem;margin:0 auto;color:var(--ink-2);padding:1.5rem 16px 3rem;border-top:1px solid var(--rule);font-size:.92rem}
.foot p{margin:.2rem 0}.foot a{color:var(--ink)}
body.nf{min-height:100vh;display:grid;place-items:center;text-align:center}
body.nf h1{font-weight:300;font-size:2.4rem}
#web{scroll-margin-top:3.2rem}