@font-face{font-family:Libron;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Libron-Regular.woff2) format("woff2")}
@font-face{font-family:Libron;font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/Libron-Italic.woff2) format("woff2")}
@font-face{font-family:Libron;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Libron-Bold.woff2) format("woff2")}
@font-face{font-family:Libron;font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/Libron-BoldItalic.woff2) format("woff2")}
:root{--bg:#f2e8d2;--ink:#3a2e21;--muted:#6b5b46;--rule:#dccfb3;--accent:#8a4210;--code:#e9dcc0;--like:#b3302a;--soft:#ecd0b4;--fn-good:#5d7f4a;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg:#14161b;--ink:#e7e8ec;--muted:#9a9fad;--rule:#2a2d36;--accent:#8fb0ff;--code:#1d2028;--like:#ff7d92;--soft:#3a2229;--fn-good:#7fb894;color-scheme:dark}}
:root[data-theme=dark]{--bg:#14161b;--ink:#e7e8ec;--muted:#9a9fad;--rule:#2a2d36;--accent:#8fb0ff;--code:#1d2028;--like:#ff7d92;--soft:#3a2229;--fn-good:#7fb894;color-scheme:dark}
:root[data-theme=light]{--bg:#fafaf8;--ink:#1a1c22;--muted:#5f6470;--rule:#e3e4e0;--accent:#1f5fd6;--code:#f0f0ec;--like:#c4304d;--soft:#f6dde2;--fn-good:#4f8a64;color-scheme:light}
:root[data-theme=sepia]{--bg:#f2e8d2;--ink:#3a2e21;--muted:#6b5b46;--rule:#dccfb3;--accent:#8a4210;--code:#e9dcc0;--like:#b3302a;--soft:#ecd0b4;--fn-good:#5d7f4a;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;font:18px/1.7 Libron,Georgia,serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-underline-offset:3px}a:hover{color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bar,header,main,footer{width:100%;max-width:44rem;margin:0 auto;padding:1.5rem}
.bar{max-width:none;padding-top:.75rem;padding-bottom:0;display:flex;justify-content:flex-end}
.bar+header{padding-top:.5rem}
header{padding-top:1.5rem;padding-bottom:2rem;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.4rem}
header a.brand{display:inline-flex;align-items:center;gap:.75rem;font:700 30px/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
header h1.site{margin:0;display:flex}
.logo{display:block;flex:none}
.logo-custom{display:block;flex:none;width:156px;height:52px;object-fit:contain;object-position:left center}
@media(max-width:30rem){.logo-custom{width:120px;height:40px}}
main{padding-top:2.5rem;padding-bottom:4rem}
footer{border-top:1px solid var(--rule)}
.meta{font:13px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted)}
h1,h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.ribbon{position:fixed;top:0;right:0;z-index:5;width:8.5rem;height:8.5rem;overflow:hidden;pointer-events:none}
.ribbon span{position:absolute;top:1.9rem;right:-3.1rem;width:11rem;padding:.3rem 0;transform:rotate(45deg);background:#c0282d;color:#fff;text-align:center;font:700 13px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.35)}
body:has(.ribbon) .bar{padding-right:4.75rem}
@media(max-width:30rem){.ribbon{width:6.5rem;height:6.5rem}.ribbon span{top:1.4rem;right:-2.9rem;width:9rem;padding:.2rem 0;font-size:11px}body:has(.ribbon) .bar{padding-right:3.5rem}}
article h1{font-size:44px;line-height:1.1;letter-spacing:-.025em;margin:0 0 .75rem}
article .meta{margin-bottom:2rem}
.fm{margin:0 0 2rem;border:1px solid var(--rule);border-radius:6px;background:var(--code);font-size:16px;line-height:1.55}
.fm-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem .9rem;border-bottom:1px solid var(--rule);font:12px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fm-actions{display:flex;gap:.9rem;text-transform:none;letter-spacing:0}
.fm-actions a{color:var(--muted)}.fm-actions a:hover,.fm-actions button:hover{color:var(--ink)}
.fm-actions button{padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fm dl{margin:0;padding:.4rem .9rem}.fm dl dl{padding:0 0 0 .8rem;border-left:2px solid var(--rule)}
.fm dl>div{display:grid;grid-template-columns:9rem 1fr;gap:.2rem 1rem;padding:.45rem 0}
.fm dl>div+div{border-top:1px solid var(--rule)}
.fm dt{font:13px/1.9 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);overflow-wrap:anywhere}
.fm dd{margin:0;min-width:0;white-space:pre-line;overflow-wrap:anywhere}
.fm ul{margin:0;padding:0;list-style:none}.fm-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.fm-chips li{padding:0 .55rem;border:1px solid var(--rule);border-radius:999px;font:13px/1.7 "IBM Plex Mono",ui-monospace,monospace}
.fm-list li+li{margin-top:.3rem}.fm-empty{color:var(--muted)}
.fm pre{margin:0;border-radius:0 0 6px 6px;white-space:pre-wrap}
@media(max-width:30rem){.fm dl>div{grid-template-columns:1fr}}
pre{overflow:auto;padding:1rem;background:var(--code);border-radius:6px}code{font:.9em "IBM Plex Mono",ui-monospace,monospace}img{max-width:100%;height:auto}
article p{margin-bottom:1.6em}article p:has(+ul),article p:has(+ol){margin-bottom:1em}article :is(ul,ol)+p{margin-top:1.6em}
figure{margin:2rem 0;text-align:center}figure img{display:block;margin:0 auto;border-radius:4px}
figcaption{display:block;max-width:34rem;margin:.6rem auto 0;font:italic 14px/1.5 Libron,Georgia,serif;color:var(--muted);text-wrap:balance}
figcaption em,figcaption i{font-style:normal}
ul.posts{list-style:none;padding:0;margin:0}ul.posts li{padding:1.75rem 0;border-bottom:1px solid var(--rule)}
ul.posts :is(h2,h3){margin:0 0 .4rem;font-size:28px}ul.posts :is(h2,h3) a{color:var(--ink);text-decoration:none}ul.posts :is(h2,h3) a:hover{color:var(--accent);text-decoration:underline}
main>section+section{margin-top:3.5rem}h2.sect{margin:0;font-size:22px}h2.sect+ul.posts li:first-child,p.sect-desc+ul.posts li:first-child{padding-top:1.25rem}
p.sect-desc{margin:.35rem 0 0;color:var(--muted);font-size:16px}
ul.posts p{margin:.4rem 0 0}
.themes{display:none;position:relative;font:12px/1 "IBM Plex Mono",ui-monospace,monospace}
:root[data-theme] .themes{display:block}
.themes button{display:flex;align-items:center;border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer}
.themes .theme-toggle{justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;opacity:.7}
.themes .theme-toggle:hover,.themes .theme-toggle[aria-expanded=true]{opacity:1;background:var(--code)}
.themes i{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px currentColor}
.theme-toggle i{background:linear-gradient(135deg,var(--bg) 50%,var(--ink) 50%)}
.theme-menu{position:absolute;top:100%;right:0;z-index:6;min-width:8.5rem;margin-top:4px;padding:4px;border:1px solid var(--rule);border-radius:10px;background:var(--bg);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.theme-menu[hidden]{display:none}
.theme-menu button{gap:10px;width:100%;min-height:36px;padding:0 10px;border-radius:7px;text-align:left}
.theme-menu button:hover{background:var(--code);color:var(--ink)}
.theme-menu button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.react{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:-1.25rem 0 1.75rem;font:13px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted)}
.react[hidden]{display:flex;visibility:hidden}
.badge{--c:var(--accent);display:inline-flex;align-items:stretch;min-height:28px;padding:0;border:1px solid var(--c);border-radius:6px;overflow:hidden;background:transparent;color:var(--ink);font:inherit}
.badge .bl{display:flex;align-items:center;gap:.35rem;padding:0 .6rem;background:var(--c);color:var(--bg)}
.badge .br{display:flex;align-items:center;gap:.3em;padding:0 .6rem}
.badge svg{width:15px;height:15px;flex:none}
.badge .ck{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.badge[hidden]{display:none}
.badge{position:relative}.badge .bl,.badge .br{position:relative}
.react.gl{pointer-events:none}
.react.gl .badge{animation:jit .18s steps(2) infinite;text-shadow:1.5px 0 #ff2d6f,-1.5px 0 #19e6ff}
.react.gl .bl::after,.react.gl .br::after{content:"";position:absolute;left:0;right:0;height:3px;background:currentColor;opacity:.3;animation:scan .5s linear infinite}
.react.snap .badge{animation:snap .25s ease-out}
@keyframes jit{0%{transform:translate(0,0) skewX(0)}25%{transform:translate(-2px,1px) skewX(-6deg)}50%{transform:translate(2px,-1px) skewX(4deg)}75%{transform:translate(-1px,0) skewX(0)}100%{transform:translate(1px,1px)}}
@keyframes scan{from{top:-3px}to{top:100%}}
@keyframes snap{0%{transform:translateX(3px);text-shadow:3px 0 #ff2d6f,-3px 0 #19e6ff}100%{transform:none;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.react.gl .badge,.react.snap .badge{animation:none;text-shadow:none}.react.gl .bl::after,.react.gl .br::after{display:none}}
.like{--c:var(--like);position:relative;cursor:pointer}.like::after{content:"";position:absolute;inset:-8px -2px}
.like .bl{background:var(--soft);color:var(--like)}
.like:not([aria-pressed=true]):hover .bl{background:var(--like);color:var(--bg)}
.like[aria-pressed=true] .bl{background:var(--like);color:var(--bg)}
.like:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.heart{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.like[aria-pressed=true] .heart{fill:currentColor}
.mark .heart{fill:var(--like);stroke:var(--like)}
.mark{display:inline-flex;margin-right:.45rem;vertical-align:-2px}.mark .heart{width:14px;height:14px}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.25rem;padding:.6rem 1rem;border-top:1px solid var(--rule);background:var(--bg);color:var(--muted);font:12px/1.5 "IBM Plex Mono",ui-monospace,monospace}
.cookie[hidden]{display:none}.cookie p{margin:0}
.cookie-actions{display:flex;gap:.5rem}
.cbtn{min-height:32px;padding:0 .9rem;border:1px solid var(--rule);border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.cbtn.primary{border-color:var(--ink);background:var(--ink);color:var(--bg)}
@media(max-width:30rem){article h1{font-size:34px}}
.flow{position:relative;--amber:#b7791f}
.flow-toggle{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.flow-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;margin:0 0 2.25rem;padding:.55rem .85rem;border:1px solid var(--rule);border-radius:6px;font:13px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted)}
.flow-score b{margin-left:.25rem;color:var(--ink);font-size:17px}
.flow-parts{display:flex;flex-wrap:wrap;gap:.3rem .9rem}@media(max-width:30rem){.flow-parts{gap:.3rem .7rem}.flow-parts .fn-bar{width:2.2rem}}
.flow-part{white-space:nowrap}
.flow-label{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;cursor:pointer;user-select:none}
.flow-check{flex:none;width:13px;height:13px;border:1px solid currentColor;border-radius:3px}
.flow-toggle:checked~.flow-summary .flow-check{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--bg)}
.flow-toggle:focus-visible~.flow-summary .flow-check{outline:2px solid var(--accent);outline-offset:3px}
.flow-toggle:not(:checked)~.fn{display:none}
.fn{display:block;margin:.3rem 0 1.1rem;font:13px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--muted)}
.fn-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem}
.fn-dot{flex:none;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--c,var(--muted))}
.fn-label{color:var(--ink)}
/* A score as a hairline: a 3px track, its fill a temperature gradient over the whole track (red at 0, green at 100). */
.fn-bar{position:relative;display:inline-block;width:3rem;height:3px;margin-left:.45rem;border-radius:2px;background:var(--rule);vertical-align:middle;overflow:hidden}
.fn-aspects .fn-bar{width:2.5rem}
.fn-line>.fn-bar{align-self:center}
.fn-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*100%);border-radius:2px;background:linear-gradient(90deg,var(--like) 10%,#c8902c 45%,var(--fn-good) 72%);background-size:calc(100%/var(--v)) 100%}
.fn-more>summary{list-style:none;cursor:pointer}.fn-more>summary::-webkit-details-marker{display:none}
.fn-more>summary:hover,.fn-fix summary:hover{color:var(--ink)}
.fn-count{margin-left:auto;text-decoration:underline dotted;text-underline-offset:3px}
.fn-fix{margin-top:.2rem}
.fn-fix summary{display:inline-block;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.fn-hint,.fn-feedback{margin-top:.15rem}
.fn-aspects{margin:.3rem 0 0;padding:0;list-style:none}
.fn-aspects li{position:relative;margin-top:.3rem;padding-left:1.1rem}
.fn-mark{position:absolute;left:0}
.fn-aspects li[data-verdict=met] .fn-mark{color:var(--muted)}
.fn-aspects li[data-verdict=partly] .fn-mark{color:var(--amber)}
.fn-aspects li[data-verdict=unmet] .fn-mark{color:var(--like)}
.fn[data-verdict=smooth]{--c:var(--muted);opacity:.6}
.fn[data-verdict=uneven],.fn[data-verdict=partly]{--c:var(--amber)}
.fn[data-verdict=abrupt],.fn[data-verdict=unmet]{--c:var(--like)}
@media(min-width:72rem){.flow-ready .fn{position:absolute;left:calc(100% + 1.25rem);width:13rem;margin:0}.flow-ready .fn:not([data-verdict=smooth]){padding:.5rem .7rem;border:1px solid var(--rule);border-left:3px solid var(--c,var(--rule));border-radius:4px;background:var(--code)}}

:root{--hl-str:color-mix(in srgb,var(--fn-good) 80%,var(--ink));--hl-num:color-mix(in srgb,var(--like) 70%,var(--ink))}
.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag{color:var(--accent)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute{color:var(--hl-str)}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-deletion{color:var(--hl-num)}
.hljs-title,.hljs-section,.hljs-built_in,.hljs-type,.hljs-name,.hljs-selector-id,.hljs-selector-class{font-weight:700}
.hljs-meta,.hljs-variable,.hljs-template-variable{color:var(--muted)}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
.codefig{margin:1.6rem 0;text-align:left}
.codefig pre{margin:0;border-radius:0 0 6px 6px}
.codefig .code-title{max-width:none;margin:0;padding:.35rem 1rem;border-radius:6px 6px 0 0;background:var(--rule);color:var(--muted);font:13px/1.6 "IBM Plex Mono",ui-monospace,monospace;text-align:left}
pre.code .ln{display:block;margin:0 -1rem;padding:0 1rem}
pre.numbers{counter-reset:ln}
pre.numbers .ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:2.2em;margin-right:1em;text-align:right;color:var(--muted);user-select:none}
pre.has-hl .ln{opacity:.55}
pre.has-hl .ln.hl{opacity:1;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.math-display{margin:1.6rem 0;overflow-x:auto;text-align:center}
math{font-size:1.1em}
.math-error{color:var(--like)}
.box{margin:2rem 0;padding:.9rem 1.2rem;border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:6px;background:var(--code);font-size:17px;line-height:1.6}
.box>:last-child{margin-bottom:0}
article p.box-title{margin:0 0 .35rem;font:700 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.callout-warning{border-left-color:var(--like)}.callout-tip{border-left-color:var(--fn-good)}.callout-key{background:var(--soft);font-weight:700}
.box ul,.box ol{margin:.3rem 0}
details.more{margin:1.6rem 0;padding:0 1rem;border:1px solid var(--rule);border-radius:6px}
.more summary{padding:.7rem 0;cursor:pointer;font:700 16px/1.4 "Bricolage Grotesque",system-ui,sans-serif}
.more[open] summary{margin-bottom:.8rem;border-bottom:1px solid var(--rule)}
.more>:last-child{margin-bottom:1rem}
.timeline ul{margin:2rem 0;padding:0 0 0 1.4rem;list-style:none;border-left:2px solid var(--rule)}
.timeline li{position:relative;padding-bottom:1.1rem}
.timeline li::before{content:"";position:absolute;left:calc(-1.4rem - 6px);top:.65em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.compare{margin:2rem 0}
.compare img{display:block;width:100%;height:auto;border-radius:4px}
.compare .cmp-a{margin-bottom:.6rem}
.compare.on{--pos:50%;position:relative;display:grid}
.compare.on>*{grid-area:1/1;margin:0}
.compare.on .cmp-b{clip-path:inset(0 0 0 var(--pos))}
.compare.on::after{content:"";grid-area:1/1;justify-self:start;margin-left:var(--pos);width:2px;background:var(--bg);box-shadow:0 0 0 1px var(--ink);pointer-events:none}
.cmp-range{grid-area:1/1;align-self:end;z-index:2;width:100%;margin:0;accent-color:var(--accent)}
.def{border-bottom:1px dotted var(--accent);font-style:normal;cursor:help;position:relative}
.def:is(:hover,:focus)::after{content:attr(data-def);position:absolute;z-index:4;left:50%;top:100%;transform:translateX(-50%);width:max-content;max-width:min(18rem,calc(100vw - 3rem));margin-top:.35rem;padding:.4rem .7rem;border-radius:6px;background:var(--ink);color:var(--bg);font:14px/1.45 Libron,Georgia,serif;text-align:left}
article{counter-reset:sn}
.sn-n::before{counter-increment:sn;content:counter(sn);color:var(--accent);font-weight:700}
.sn-text{display:block;margin:.5rem 0 .9rem 1rem;padding-left:.8rem;border-left:2px solid var(--rule);color:var(--muted);font-size:15px;line-height:1.45}
.sn-text::before{content:counter(sn) " ";color:var(--accent);font-weight:700}
@media(min-width:76rem){.sn-text{float:right;clear:right;width:13rem;margin:0 -15.5rem 1rem 0;padding:0 0 0 .7rem}}
.walk{margin:2rem 0}
.walk-subject{min-width:0}
.walk-frame{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.walk-frame img{display:block;max-width:100%;height:auto;border-radius:4px}
.walk .codefig,.walk pre{margin:0}
.pin{position:absolute;z-index:1;width:1.7rem;height:1.7rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);color:var(--bg);font:700 13px/1.7rem "IBM Plex Mono",ui-monospace,monospace;text-align:center;user-select:none;transition:scale .15s}
.pin-box{position:absolute;border:2px solid var(--accent);border-radius:4px;background:color-mix(in srgb,var(--accent) 12%,transparent);opacity:.4;pointer-events:none;transition:opacity .15s}
.walk pre .ln{position:relative;padding-left:3rem}
.walk pre .ln[data-notes]{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.walk .ln .pin{left:1.1rem;top:.85em;width:1.4rem;height:1.4rem;font-size:12px;line-height:1.4rem}
.walk-notes{display:grid;gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none;counter-reset:n}
.walk-notes li{position:relative;padding:.6rem .8rem .6rem 3rem;border:1px solid var(--rule);border-radius:6px;font-size:16px;line-height:1.55;counter-increment:n;transition:border-color .15s,background .15s}
.walk-notes li::before{content:counter(n);position:absolute;left:.8rem;top:.6rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--bg);font:700 13px/1.7rem "IBM Plex Mono",ui-monospace,monospace;text-align:center}
.walk-notes li:is(:hover,:focus-within){border-color:var(--accent);background:var(--code);outline:none}
@media(min-width:56rem){.walk{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem;align-items:start}.walk-notes{margin:0}}
.walk:has(li[data-n="1"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="1"]{scale:1.25;opacity:1}.walk:has(li[data-n="1"]:is(:hover,:focus-within)) .ln[data-notes~="1"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="2"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="2"]{scale:1.25;opacity:1}.walk:has(li[data-n="2"]:is(:hover,:focus-within)) .ln[data-notes~="2"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="3"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="3"]{scale:1.25;opacity:1}.walk:has(li[data-n="3"]:is(:hover,:focus-within)) .ln[data-notes~="3"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="4"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="4"]{scale:1.25;opacity:1}.walk:has(li[data-n="4"]:is(:hover,:focus-within)) .ln[data-notes~="4"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="5"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="5"]{scale:1.25;opacity:1}.walk:has(li[data-n="5"]:is(:hover,:focus-within)) .ln[data-notes~="5"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="6"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="6"]{scale:1.25;opacity:1}.walk:has(li[data-n="6"]:is(:hover,:focus-within)) .ln[data-notes~="6"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="7"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="7"]{scale:1.25;opacity:1}.walk:has(li[data-n="7"]:is(:hover,:focus-within)) .ln[data-notes~="7"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="8"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="8"]{scale:1.25;opacity:1}.walk:has(li[data-n="8"]:is(:hover,:focus-within)) .ln[data-notes~="8"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="9"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="9"]{scale:1.25;opacity:1}.walk:has(li[data-n="9"]:is(:hover,:focus-within)) .ln[data-notes~="9"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="10"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="10"]{scale:1.25;opacity:1}.walk:has(li[data-n="10"]:is(:hover,:focus-within)) .ln[data-notes~="10"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="11"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="11"]{scale:1.25;opacity:1}.walk:has(li[data-n="11"]:is(:hover,:focus-within)) .ln[data-notes~="11"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.walk:has(li[data-n="12"]:is(:hover,:focus-within)) :is(.pin,.pin-box)[data-n="12"]{scale:1.25;opacity:1}.walk:has(li[data-n="12"]:is(:hover,:focus-within)) .ln[data-notes~="12"]{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.scrolly{--w:min(72rem,calc(100vw - 3rem));width:var(--w);margin:2.5rem calc(50% - var(--w) / 2)}
.sc-visual{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;height:42vh;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--rule)}
.sc-media{display:flex;justify-content:center;width:100%;max-height:100%}
.sc-media img{width:auto;max-width:100%;max-height:42vh;border-radius:4px;transform-origin:center;transform:translate(var(--px,0%),var(--py,0%)) scale(var(--zoom,1));transition:transform .6s ease}
.sc-media[data-kind=code]{overflow:auto}
.sc-media[data-kind=code] pre{width:100%;max-height:100%;margin:0;overflow:auto}
.sc-media table{margin:0 auto;font-size:15px}
.sc-media tr{transition:background .3s}
.sc-media tr.hl{background:var(--soft)}
.sc-step{display:flex;flex-direction:column;justify-content:center;min-height:55vh;padding:1rem 0}
.sc-step>:last-child{margin-bottom:0}
.scrolly.on .sc-step{opacity:.4;transition:opacity .3s}
.scrolly.on .sc-step.is-active{opacity:1}
@media(min-width:56rem){
.sc-group{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem}
.scrolly[data-side=left] .sc-group{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.scrolly[data-side=left] .sc-visual{order:2}
.sc-visual{top:10vh;align-self:start;height:80vh;border:0}
.sc-media img{max-height:80vh}
.scrolly[data-side=center] .sc-group{grid-template-columns:minmax(0,1fr)}
.scrolly[data-side=center] .sc-visual{grid-area:1/1}
.scrolly[data-side=center] .sc-steps{grid-area:1/1;z-index:3;pointer-events:none}
.scrolly[data-side=center] .sc-step>*{max-width:28rem;margin-left:auto;margin-right:auto;padding:.8rem 1.1rem;border:1px solid var(--rule);border-radius:6px;background:var(--bg);pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.sc-media img,.sc-media tr,.scrolly.on .sc-step,.pin,.pin-box{transition:none}}


.fm-wrap{position:relative}.fm-wrap>.fm{margin-bottom:1rem}
.ev{--amber:#b7791f;position:relative;margin:0 0 2rem;border:1px solid var(--rule);border-radius:6px;background:var(--code);color:var(--muted);font:13px/1.5 "IBM Plex Mono",ui-monospace,monospace}
.ev-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;white-space:nowrap;padding:.4rem .9rem;border-bottom:1px solid var(--rule);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.ev-body{padding:.8rem .9rem .9rem}
.ev-top{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.8rem;cursor:pointer;user-select:none}
.ev-score{display:flex;align-items:baseline;gap:.35rem}
.ev-score b{font:700 44px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.ev-word{display:flex;align-items:baseline;gap:.5rem;color:var(--ink)}
.ev-chev{flex:none;align-self:center;width:8px;height:8px;margin:0 .2rem 0 auto;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.ev-toggle:checked~.ev-body .ev-chev{transform:translateY(2px) rotate(-135deg)}
.ev-toggle{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.ev-toggle:focus-visible~.ev-body .ev-top{outline:2px solid var(--accent);outline-offset:3px}
.ev-dot{flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--c)}
.ev[data-verdict=met]{--c:var(--fn-good)}.ev[data-verdict=partly]{--c:var(--amber)}.ev[data-verdict=unmet]{--c:var(--like)}
/* One tick for each aspect, colored by its verdict: the whole evaluation at a glance. */
.ev-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin:.8rem 0 .4rem}
@media(max-width:71.99rem){.ev-toggle:not(:checked)~.ev-body .ev-more{display:none}}
.ev-strip i{height:7px;border-radius:2px;background:var(--c)}
.ev i[data-verdict=met]{--c:var(--fn-good)}.ev i[data-verdict=partly]{--c:var(--amber)}.ev i[data-verdict=unmet]{--c:var(--like)}
.ev-h{margin:1rem 0 .1rem;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.ev ul{margin:0;padding:0;list-style:none}
.ev li{position:relative;margin-top:.45rem;padding-left:1.1rem;color:var(--ink)}
.ev-mark{position:absolute;left:0}
.ev li[data-verdict=partly] .ev-mark{color:var(--amber)}.ev li[data-verdict=unmet] .ev-mark{color:var(--like)}.ev li[data-verdict=met] .ev-mark{color:var(--muted)}
.ev .fn-bar{display:block;width:100%;margin:.3rem 0 0}
.ev details{margin-top:.2rem;color:var(--muted)}
.ev summary{display:inline-block;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.ev summary:hover{color:var(--ink)}
.ev-fix>div{margin-top:.15rem}
.ev-all{margin-top:.9rem}
.ev-note{margin:.9rem 0 0;font-size:12px;line-height:1.5}
@media(min-width:72rem){.fm-wrap>.fm{margin-bottom:2rem}.ev{position:absolute;top:0;left:calc(100% + 1.25rem);width:13rem;margin:0}.ev-top{display:block;cursor:default;user-select:auto}.ev-chev{display:none}.ev-word{margin-top:.3rem}}