@layer reset{html,body{max-width:100%;margin:0;padding:0;overflow-x:clip}figure{margin-inline:0}}@layer base{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--paper:var(--lightningcss-light,oklch(97% 0 0))var(--lightningcss-dark,oklch(20.5% 0 0));--ink:var(--lightningcss-light,oklch(37.1% 0 0))var(--lightningcss-dark,oklch(92.2% 0 0));--accent:var(--lightningcss-light,oklch(0% 0 0))var(--lightningcss-dark,oklch(100% 0 0));--accent-wash:var(--lightningcss-light,oklch(from var(--paper) calc(l - .06) c h))var(--lightningcss-dark,oklch(from var(--paper) calc(l + .08) c h));--muted:color-mix(in oklch, var(--ink) 60%, var(--paper));--rule:color-mix(in oklch, var(--ink) 13%, var(--paper));--tint:color-mix(in oklch, var(--ink) 7%, var(--paper));--highlight:color-mix(in oklch, var(--ink) 22%, var(--paper));--line:1px solid var(--ink);--hard-shadow:none;--cut:14px;--photo-filter:url(#digital-stipple) grayscale(100%) contrast(50%);--font-serif:"Source Serif 4", Georgia, "Times New Roman", serif;--font-sans:"Archivo", ui-sans-serif, system-ui, sans-serif;--font-display:"Archivo", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--nav-width:140px;--measure:40rem;--gutter:2rem;--rail:11rem;--ease:cubic-bezier(.2, .8, .2, 1);--color-background:var(--paper);interpolate-size:allow-keywords;accent-color:var(--accent);scrollbar-color:var(--rule) transparent;line-height:1.55}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root:has(select[name=theme] option[value=light]:checked){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root:has(select[name=theme] option[value=dark]:checked){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root:has(select[name=theme] option[value=sepia]:checked){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:oklch(92% .012 95);--ink:oklch(20% .01 80)}:root:has(select[name=size] option[value=s]:checked){font-size:87.5%}:root:has(select[name=size] option[value=l]:checked){font-size:112.5%}:root:has(select[name=size] option[value=xl]:checked){font-size:125%}@media (prefers-contrast:more){:root{--muted:color-mix(in oklch, var(--ink) 85%, var(--paper));--rule:color-mix(in oklch, var(--ink) 45%, var(--paper))}}body{font-family:var(--font-serif);font-optical-sizing:auto;font-size:clamp(1.125rem,1.025rem + .4vi,1.375rem);font-size:--fluid(1.125, 1.375);color:var(--ink);background-color:var(--paper);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:color-mix(in oklch, var(--accent) 55%, transparent);text-decoration-color:color-mix(in oklch, var(--accent) 55%, transparent);text-underline-offset:.2em;transition:text-decoration-color .3s}a:hover{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{background:var(--highlight);color:var(--accent)}::target-text{background:var(--highlight);color:var(--accent)}.visually-hidden,.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}img{filter:var(--photo-filter)}.label{font-family:var(--font-sans);color:var(--ink);font-size:.8125rem;font-weight:700}main p,main li{text-wrap:pretty;-webkit-hyphens:manual;hyphens:manual;hanging-punctuation:first allow-end last;font-variant-numeric:oldstyle-nums proportional-nums;line-height:1.6}main p{margin-block:0 .85lh}h1,h2,h3{text-wrap:balance;text-box:trim-both cap alphabetic;font-variant-numeric:lining-nums}.chapter__title{border-block-start:8px solid var(--ink);font-family:var(--font-display);font-size:clamp(1.25rem,1.35rem + 3.6vi,3.5rem);font-size:--fluid(1.25, 3.5);letter-spacing:-.035em;gap:.35em;margin-block:4rlh 1.5rlh;padding-block-start:1.25rem;font-weight:850;font-stretch:125%;line-height:.92;display:grid}.chapter__num{letter-spacing:0;color:var(--accent);font-size:.5em;font-weight:900}.section__title{font-family:var(--font-display);letter-spacing:-.02em;margin-block:2rlh .75rlh;font-size:1.5rem;font-weight:800;font-stretch:112%;line-height:1.1}#intro .lede:first-letter,p.drop__cap:first-letter{initial-letter:3;font-family:var(--font-display);color:var(--accent);margin-inline-end:.1em;font-weight:900;font-stretch:125%}@supports not (initial-letter:3){#intro .lede:first-letter,p.drop__cap:first-letter{float:left;padding-block-start:.08em;font-size:4.1em;line-height:.8}}.ornament{border:0;border-block-start:8px solid var(--ink);width:4rem;margin-block:2.5rlh}main ol:not([class]),main ul:not([class]){margin-block:0 1lh;padding-inline-start:1.25em}main :not(pre)>code{font-family:var(--font-mono);font-variant-ligatures:none;-webkit-hyphens:none;hyphens:none;background:var(--tint);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:0;padding:.1em .3em;font-size:.85em}main a>code{-webkit-text-decoration:inherit;text-decoration:inherit}main ol:not([class]) ::marker{font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--accent);font-size:.75em}:root{--color-foreground:var(--ink)}}@layer layout{.page{grid-template-columns:[full-start nav-start] var(--nav-width) [nav-end wide-start] 1fr calc(var(--gutter) + var(--rail)) [main-start] minmax(0, var(--measure)) [main-end] var(--gutter) [rail-start] var(--rail) [rail-end] 1fr [wide-end] var(--nav-width) [full-end];timeline-scope:--ch-1, --ch-2, --ch-3, --ch-4, --ch-5, --ch-6, --ch-7, --ch-8, --ch-9;display:grid}header{grid-area:1/full}nav{z-index:3;grid-area:2/nav}main,.chapter,.detour,.endmatter{grid-template-columns:subgrid;grid-column:full;align-content:start;display:grid}main{grid-row:2}:is(main,.chapter,.detour,.endmatter)>*{grid-column:main}:is(main,.chapter,.detour,.endmatter)>:is(.chapter,.endmatter){grid-column:full}:is(main,.chapter,.detour,.endmatter)>.wide{grid-column:wide}:is(main,.chapter,.detour,.endmatter)>.full{grid-column:full}:is(main,.chapter,.detour,.endmatter)>.rail{grid-column:rail}.chapter{scroll-margin-top:2rem}.chapter:first-of-type{view-timeline-name:--ch-1}.chapter:nth-of-type(2){view-timeline-name:--ch-2}.chapter:nth-of-type(3){view-timeline-name:--ch-3}.chapter:nth-of-type(4){view-timeline-name:--ch-4}.chapter:nth-of-type(5){view-timeline-name:--ch-5}.chapter:nth-of-type(6){view-timeline-name:--ch-6}.chapter:nth-of-type(7){view-timeline-name:--ch-7}.chapter:nth-of-type(8){view-timeline-name:--ch-8}.chapter:nth-of-type(9){view-timeline-name:--ch-9}@media (width<72rem){.page{grid-template-columns:[full-start nav-start] var(--nav-width) [nav-end wide-start] 1fr [main-start rail-start] minmax(0, var(--measure)) [main-end rail-end] 1fr [wide-end] var(--nav-width) [full-end]}}@media (width<56rem){.page{--nav-width:0px;grid-template-columns:[full-start nav-start nav-end]1.25rem[wide-start main-start rail-start]minmax(0,1fr)[main-end rail-end wide-end]1.25rem[full-end]}nav{display:none}}}@layer components{@keyframes progress-grow{0%{scale:0 1}}.progress{z-index:10;background:var(--accent);transform-origin:0;height:2px;position:fixed;inset:0 0 auto;scale:0 1}@supports (animation-timeline:scroll()){.progress{animation:linear both progress-grow;animation-timeline:scroll(root);scale:1}}.topbar{z-index:9;font-family:var(--font-sans);color:#fff;mix-blend-mode:difference;pointer-events:none;transition:translate .4s var(--ease);justify-content:space-between;align-items:center;gap:1.5rem;padding:.9rem clamp(1.25rem,4vw,2.5rem);font-size:.8125rem;font-weight:500;display:flex;position:fixed;inset:0 0 auto;translate:0 -100%}.topbar a{color:inherit;text-decoration:none}.topbar a:hover{text-underline-offset:.2em;text-decoration:underline}.topbar :focus-visible{outline-color:#fff}.topbar__links{letter-spacing:.08em;gap:1.25rem;margin:0;padding:0;list-style:none;display:flex}@container scroll-state(scrolled:top){.topbar{pointer-events:auto;translate:0}}.topbar:focus-within{pointer-events:auto;translate:0}@media (width<40rem){.topbar__title{display:none}}@media (prefers-reduced-motion:reduce){.topbar{transition:none}}@media print{.topbar{display:none}}.support{vertical-align:.12em;font-family:var(--font-sans);text-indent:0;white-space:nowrap;-webkit-hyphens:none;hyphens:none;border:var(--line);cursor:help;border-radius:0;gap:2px;margin-inline:.3em .1em;padding:2px;font-size:.6875rem;font-style:normal;font-weight:600;line-height:1;display:inline-flex;position:relative}.support>span{border-radius:0;place-items:center;block-size:1.4em;inline-size:1.4em;display:grid}.support:after{content:attr(data-tip);z-index:6;white-space:pre;color:var(--paper);background:var(--ink);box-shadow:var(--hard-shadow);opacity:0;pointer-events:none;border-radius:0;padding:.5rem .7rem;font-size:.75rem;font-weight:500;line-height:1.5;transition:opacity .15s,translate .15s;position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 4px}.support:hover:after{opacity:1;translate:-50%}.support-tail{white-space:nowrap}.support--key{cursor:auto}.support--key:after{content:none}[data-support=yes]{color:var(--paper);background:var(--ink)}[data-support=partial]{color:var(--ink);background:linear-gradient(135deg, var(--paper) 50%, var(--rule) 50%);outline:1px solid var(--ink);outline-offset:-1px}[data-support=no]{color:color-mix(in oklch, var(--muted) 70%, var(--paper));text-decoration:line-through}@media (prefers-reduced-motion:reduce){.support:after{transition:none}}@media print{.support:after{display:none}}@keyframes read{to{--read:100%}}nav{scroll-target-group:auto;color:#fff;mix-blend-mode:difference;width:100%;height:100vh;position:sticky;top:0;container-type:scroll-state}nav .nav__inner{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}nav ol{opacity:0;padding:0;padding-inline:1rem;list-style-type:none;transition:opacity .6s}nav ol li{height:1rem;margin-block:.5rem;display:block;position:relative}nav a{color:inherit;opacity:.55;interest-delay-start:.1s;align-items:center;height:100%;text-decoration:none;transition:opacity .3s;display:flex}:is(nav a:hover,nav a:target-current){opacity:1}nav a:target-current{color:rgb(from var(--paper) calc(r - 30 * sign(r - 30)) calc(g - 90 * sign(g - 90)) calc(b - 210 * sign(b - 210)))}nav a:before{content:"";height:2px;width:calc(var(--nav-width) / 3);background:linear-gradient(to right, currentColor var(--read), color-mix(in srgb, currentColor 35%, transparent) 0);transform-origin:0;transition:scale .3s var(--ease);border-radius:0;animation:linear both read;animation-range:contain;display:block;scale:.6 1}nav a:hover:before{scale:1}nav a:target-current:before{scale:1}nav li:first-child a:before{animation-timeline:--ch-1}nav li:nth-child(2) a:before{animation-timeline:--ch-2}nav li:nth-child(3) a:before{animation-timeline:--ch-3}nav li:nth-child(4) a:before{animation-timeline:--ch-4}nav li:nth-child(5) a:before{animation-timeline:--ch-5}nav li:nth-child(6) a:before{animation-timeline:--ch-6}nav li:nth-child(7) a:before{animation-timeline:--ch-7}nav li:nth-child(8) a:before{animation-timeline:--ch-8}nav li:nth-child(9) a:before{animation-timeline:--ch-9}@container scroll-state(stuck:top){nav ol{opacity:1}}@supports not (container-type:scroll-state){nav ol{opacity:1}}.tip{font-family:var(--font-sans);background:var(--ink);color:contrast-color(var(--ink));box-shadow:var(--hard-shadow);opacity:0;transition:opacity .15s ease, scale .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;border:none;border-radius:0;margin:0;padding:.4em .9em;font-size:.8125rem;line-height:1.45;inset:auto;scale:.9}.tip:popover-open{opacity:1;scale:1}@starting-style{.tip:popover-open{opacity:0;scale:.9}}@media (prefers-reduced-motion:reduce){.tip{transition:none;scale:1}}nav .nav__tip{position-area:right;position-try-fallbacks:flip-inline;transform-origin:0;white-space:nowrap;margin-inline-start:.75rem}.term__tip{position-area:block-start;position-try-fallbacks:flip-block;transform-origin:bottom;text-wrap:pretty;width:max-content;max-width:min(18rem,90vw);margin-block:.5rem}.term__tip strong{font-weight:600;display:block}.term{font:inherit;color:inherit;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-underline-offset:.22em;interest-delay-start:.2s;background:0 0;border:0;padding:0;text-decoration-thickness:1.5px}@keyframes scatter{0%{transform:none}}@keyframes title-rise{0%{transform:translateY(100vh)}}header{background-color:var(--color-background);view-timeline-name:--header-scroll;view-timeline-axis:block;width:100%;height:300vh;margin-block-end:4rem;overflow-x:clip}header .header__inner{width:100%;height:100vh;position:sticky;top:0;overflow:hidden}header .header__bg{z-index:1;width:100%;height:100%;position:absolute;inset:0}header .header__bg img{object-fit:cover;width:100%;height:100%}header .header__text{z-index:3;font-family:var(--font-display);letter-spacing:-.035em;text-wrap:balance;text-align:center;color:oklch(97% 0 0);justify-content:center;align-items:center;font-size:clamp(2.5rem,1rem + 4.5vw,5.5rem);font-weight:850;font-stretch:125%;animation:ease-out both title-rise;animation-timeline:--header-scroll;animation-range:contain 80%;display:flex;position:absolute;inset:0 4%}header .header__text h1{font-weight:inherit;text-shadow:0 .02em .5em oklch(0% 0 0/.5);text-box:none;line-height:.92}header .header__text h1 small{font-family:var(--font-serif);letter-spacing:0;margin-block-start:.45em;font-size:.4em;font-style:italic;font-weight:400;display:block}header .header__wrap{z-index:2;width:100%;height:100%;position:relative}header .header__wrap .mirror{--i:calc(sibling-index() - 1);--rev:calc(sibling-count() - sibling-index());--twist:20deg;--step:.85;z-index:var(--rev);transform:scale(pow(var(--step), var(--i))) rotate(calc(var(--i) * var(--twist)));animation:ease-in-out both scatter;animation-timeline:--header-scroll;animation-range:contain calc(var(--rev) * 3%) contain calc(40% + var(--rev) * 3%);margin:0;position:absolute;inset:0}header .header__wrap .mirror img{object-fit:cover;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#0000 40%,#000 100%);mask-image:radial-gradient(closest-side,#0000 40%,#000 100%)}header .header__wrap .mirror:last-child img{-webkit-mask-image:none;mask-image:none}@supports not (animation-timeline:view()){header{height:100vh}header .header__wrap .mirror,header .header__text{animation:none}}@supports not (z-index:sibling-index()){header .header__wrap .mirror:first-child{--i:0;--rev:11}header .header__wrap .mirror:nth-child(2){--i:1;--rev:10}header .header__wrap .mirror:nth-child(3){--i:2;--rev:9}header .header__wrap .mirror:nth-child(4){--i:3;--rev:8}header .header__wrap .mirror:nth-child(5){--i:4;--rev:7}header .header__wrap .mirror:nth-child(6){--i:5;--rev:6}header .header__wrap .mirror:nth-child(7){--i:6;--rev:5}header .header__wrap .mirror:nth-child(8){--i:7;--rev:4}header .header__wrap .mirror:nth-child(9){--i:8;--rev:3}header .header__wrap .mirror:nth-child(10){--i:9;--rev:2}header .header__wrap .mirror:nth-child(11){--i:10;--rev:1}header .header__wrap .mirror:nth-child(12){--i:11;--rev:0}}@media (prefers-reduced-motion:reduce){header .header__wrap .mirror,header .header__text{animation:none}}.opener{margin-block:4rem 1rem}.opener__kicker{color:var(--accent);margin:0 0 1.5rem}.opener__dek{font-size:clamp(1.375rem,1.175rem + .8vi,1.875rem);font-size:--fluid(1.375, 1.875);text-wrap:balance;color:color-mix(in oklch, var(--ink) 85%, var(--paper));margin:0 0 2rem;font-style:italic;font-weight:300;line-height:1.3}.byline{border-block:1px solid var(--rule);align-items:center;gap:1rem;padding-block:1rem;display:flex}.byline__text{font-family:var(--font-sans);color:var(--muted);font-variant-numeric:lining-nums;flex:1;margin:0;font-size:.8125rem}.byline__text a{color:var(--ink);font-weight:500}.settings__toggle{width:2.25rem;height:2.25rem;font-family:var(--font-serif);color:var(--ink);border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:0;place-items:center;padding:0;font-size:.9375rem;transition:background-color .3s;display:grid}.settings__toggle:hover{background:var(--tint)}.settings{position-area:block-end span-inline-start;position-try-fallbacks:flip-block;min-width:15rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule);box-shadow:var(--hard-shadow);opacity:0;transition:opacity .25s ease, translate .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete;border-radius:0;gap:.75rem;margin:0;margin-block-start:.5rem;padding:1.25rem;inset:auto;translate:0 -.5rem}.settings:popover-open{opacity:1;display:grid;translate:0}@starting-style{.settings:popover-open{opacity:0;translate:0 -.5rem}}.settings .label{margin:0 0 .25rem}.settings__field{font-family:var(--font-sans);justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem;display:flex}:is(.settings,.palette) select{font:inherit;color:inherit}@supports (appearance:base-select){:is(.settings,.palette) select{appearance:base-select}:is(.settings,.palette) ::picker(select){appearance:base-select}:is(.settings,.palette) select{background:var(--tint);border:1px solid var(--rule);cursor:pointer;border-radius:0;min-width:7.5rem;padding:.35em .75em}:is(.settings,.palette) select::picker-icon{color:var(--muted);transition:rotate .25s var(--ease)}:is(.settings,.palette) select:open::picker-icon{rotate:180deg}:is(.settings,.palette) ::picker(select){color:var(--ink);background:var(--paper);border:1px solid var(--rule);box-shadow:var(--hard-shadow);opacity:0;transition:opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete;border-radius:0;margin-block:.25rem;padding:.25rem}:is(.settings,.palette) select:open::picker(select){opacity:1}@starting-style{:is(.settings,.palette) select:open::picker(select){opacity:0}}:is(.settings,.palette) option{border-radius:0;padding:.4em .75em}:is(.settings,.palette) option:hover,:is(.settings,.palette) option:focus-visible{background:var(--tint)}:is(.settings,.palette) option:checked{font-weight:600}:is(.settings,.palette) option::checkmark{color:var(--accent)}}main{counter-reset:note}.note-ref{counter-increment:note;anchor-name:--note;vertical-align:super;padding:0 .1em;line-height:0;text-decoration:none}.note-ref:after{content:counter(note);font-family:var(--font-sans);color:var(--accent);font-size:.6rem;font-weight:600}.sidenote{border-inline-start:1px solid var(--rule);font-family:var(--font-sans);text-wrap:pretty;color:var(--muted);margin:-.25lh 0 1.5rem;padding-inline-start:.9rem;scroll-margin-block:30vh;font-size:.8125rem;line-height:1.5;display:block}.sidenote:before{content:counter(note) "  ";color:var(--accent);font-weight:600}.sidenote:target{color:var(--ink);border-inline-start-color:var(--ink)}@media (width>=72rem){@supports (anchor-scope:--a){.noted{anchor-scope:--note, --para}.noted>p{anchor-name:--para}.sidenote{position-anchor:--note;top:anchor(--note top);left:calc(anchor(--para right) + var(--gutter));width:var(--rail);border:0;margin:0;padding:0;font-size:.75rem;position:absolute}.note-ref{pointer-events:none}}}.callout{border-block-start:4px solid var(--ink);font-family:var(--font-sans);text-wrap:pretty;color:var(--muted);flex-direction:column;order:1;align-self:start;gap:.6rem;margin-block-end:1.5rem;padding-block-start:.75rem;font-size:.8125rem;line-height:1.5;display:flex}.callout>*{margin:0}.callout .support{margin-inline:0}@media (width>=72rem){.callout{order:0;grid-row-end:span 2;font-size:.75rem}}.callout__key{gap:.35rem;padding:0;list-style:none;display:grid}.callout__key>li{align-items:center;gap:.5rem;display:flex}@scope(.pullquote){:scope{border-block:1px solid var(--rule);quotes:"“" "”";margin-block:2.5rlh;padding-block:2rem;container-type:inline-size}blockquote p{text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;margin:0;font-size:clamp(1.5rem,5.5cqi,2.25rem);font-style:italic;font-weight:300;line-height:1.25}blockquote p:before{content:open-quote;color:var(--accent);margin-inline-start:-.45em}blockquote p:after{content:close-quote;color:var(--accent)}.pullquote__by{margin-inline:1.5rlh;display:block}figcaption{font-family:var(--font-sans);color:var(--muted);margin-block-start:1.5rem;font-size:.8125rem}.pullquote__name{color:var(--ink);font-weight:600;display:block}}:root{--page-paper:var(--paper);--page-ink:var(--ink)}.palette option[value=page]{--paper:var(--page-paper);--ink:var(--page-ink)}.palette option[value=sepia]{--paper:oklch(92% .012 95);--ink:oklch(20% .01 80)}.palette:has(option[value=sepia]:checked){--paper:oklch(92% .012 95);--ink:oklch(20% .01 80)}.palette option[value=slate]{--paper:oklch(95% .015 250);--ink:oklch(30% .05 255)}.palette:has(option[value=slate]:checked){--paper:oklch(95% .015 250);--ink:oklch(30% .05 255)}.palette option[value=moss]{--paper:oklch(94% .025 135);--ink:oklch(32% .05 150)}.palette:has(option[value=moss]:checked){--paper:oklch(94% .025 135);--ink:oklch(32% .05 150)}.palette option[value=ember]{--paper:oklch(22% .03 40);--ink:oklch(90% .05 70)}.palette:has(option[value=ember]:checked){--paper:oklch(22% .03 40);--ink:oklch(90% .05 70)}.palette{--muted:color-mix(in oklch, var(--ink) 60%, var(--paper));--rule:color-mix(in oklch, var(--ink) 13%, var(--paper));--tint:color-mix(in oklch, var(--ink) 7%, var(--paper));--accent:var(--ink);color:var(--ink);background:var(--paper);border:var(--line);gap:1.25rem;margin-block:2rlh;padding:1.5rem;transition:color .3s,background-color .3s;display:grid}.palette figcaption{font-family:var(--font-sans);color:var(--muted);font-size:.8125rem}.palette__field{font-family:var(--font-sans);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;font-size:.875rem;display:flex}.palette select{min-width:10rem}.palette selectedcontent,.palette option{align-items:center;gap:.6em;display:flex}.palette__chip{background:linear-gradient(90deg, var(--paper) 50%, var(--ink) 50%);border:1px solid var(--ink);flex:none;block-size:1.1em;inline-size:1.1em}.palette__swatches{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.palette__swatches li{gap:.4rem;font-size:.75rem;display:grid}.palette__swatches li:before{content:"";background:var(--swatch);border:1px solid var(--rule);block-size:3rem;transition:background-color .3s}.palette__name{color:var(--ink);font-weight:600;display:block}@media (prefers-reduced-motion:reduce){.palette,.palette__swatches li:before{transition:none}}@keyframes count-up{0%{--num:0}to{--num:var(--to)}}.stat{border-block-start:2px solid var(--ink);grid-template-columns:auto 1fr;align-items:end;gap:1rem 2.5rem;margin-block:2rlh;padding-block:2rem;display:grid}.stat__value{font-size:clamp(5rem,3rem + 8vi,10rem);font-size:--fluid(5, 10);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;text-box:trim-both cap alphabetic;margin:0;font-weight:300;line-height:.8}.stat__unit{color:var(--accent);vertical-align:top;font-size:.5em}.stat__caption{max-width:24ch;font-family:var(--font-sans);color:var(--muted);text-wrap:pretty;font-size:.875rem;line-height:1.45}@supports (animation-timeline:view()) and (width:attr(x type(<length>))){.stat__num{--to:attr(data-value type(<integer>), 0);counter-reset:n var(--num);animation:cubic-bezier(.1,.6,.2,1) both count-up;animation-timeline:view();animation-range:entry 40% cover 50%}.stat__num:after{content:counter(n) / ""}.stat__static{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}}@media (width<40rem){.stat{grid-template-columns:1fr}}@keyframes bar-grow{0%{scale:0 1}}.bars{margin-block:2rlh}.bars__caption{gap:.4rem;margin-block-end:1.25rem;display:grid}.bars__note{font-family:var(--font-sans);color:var(--muted);font-size:.75rem}.bars__list{font-family:var(--font-sans);font-variant-numeric:tabular-nums;grid-template-columns:max-content 1fr max-content;gap:.45rem .75rem;margin:0;padding:0;font-size:.8125rem;list-style:none;display:grid}.bars__list li{--value:attr(data-value type(<number>), 0);--i:sibling-index();grid-column:1/-1;grid-template-columns:subgrid;align-items:center;line-height:1;display:grid}.bars__list li:before{content:"";height:1.25rem;width:calc(var(--value) * 1%);background:color-mix(in oklch, var(--ink) 18%, var(--paper));transform-origin:0;border-radius:0;grid-area:1/2}.bars__list li:last-child:before{background:var(--accent)}.bars__label{color:var(--muted);grid-area:1/1}.bars__value{text-align:end;grid-area:1/3;font-weight:500}@supports (animation-timeline:view()){.bars__list li:before{animation:bar-grow var(--ease) both;animation-timeline:view();animation-range:entry calc(30% + var(--i) * 8%) cover calc(40% + var(--i) * 4%)}}@media (prefers-reduced-motion:reduce){.bars__list li:before,.stat__num{animation:none}.stat__num{counter-reset:n var(--to)}}.figure{--span:attr(data-span type(<custom-ident>), main);grid-column:if(style(--span: full): full; style(--span: wide): wide; else: main);margin-block:2rlh}@supports not (color:if(else: red)){.figure[data-span=wide]{grid-column:wide}.figure[data-span=full]{grid-column:full}}.figure img{width:100%;height:auto}.figure__caption{font-family:var(--font-sans);color:var(--muted);text-wrap:pretty;margin-block-start:.75rem;font-size:.8125rem;line-height:1.5}.credit{letter-spacing:.04em;margin-block-start:.25rem;font-size:.6875rem;display:block}@media (width>=72rem){.figure[data-span=wide]{grid-template-columns:subgrid;align-items:end;display:grid}.figure[data-span=wide] img{grid-area:1/wide-start/auto/main-end}.figure[data-span=wide] .figure__caption{border-block-start:1px solid var(--rule);grid-area:1/rail;margin:0;padding-block-start:.75rem}}@keyframes drift{0%{translate:0 -16.5%}to{translate:0}}.figure--parallax .figure__frame{view-timeline:--frame;height:min(95vh,64vw);overflow:hidden}.figure--parallax img{object-fit:cover;height:120%;translate:0 -8%}.figure--parallax .figure__caption{max-width:var(--measure);margin-inline:auto;padding-inline:1.25rem}@supports (animation-timeline:view()){.figure--parallax img{animation:linear both drift;animation-timeline:--frame}}:root:has(select[name=theme] option[value=dark]:checked) main img:not(.lightbox *){filter:var(--photo-filter) brightness(.88)}@media (prefers-color-scheme:dark){:root:has(select[name=theme] option[value=system]:checked) main img:not(.lightbox *){filter:var(--photo-filter) brightness(.88)}}.mosaic{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@media (width>=48rem){.mosaic{grid-template-columns:repeat(4,1fr)}}.mosaic{margin-block:2rlh}.mosaic figure{margin:0}.mosaic .mosaic__open img{object-fit:cover;border-radius:0;width:100%;height:100%}@supports (grid-template-rows:masonry){.mosaic{grid-template-rows:masonry}.mosaic .mosaic__open img{height:auto}}@supports (display:grid-lanes){.mosaic{display:grid-lanes}.mosaic .mosaic__open img{height:auto}}.mosaic__open{cursor:zoom-in;background:0 0;border:0;border-radius:0;width:100%;height:100%;padding:0;display:block;overflow:hidden}.mosaic__open img{transition:scale .6s var(--ease);display:block}.mosaic__open:hover img{scale:1.03}.mosaic__open:focus-visible{outline-offset:3px}.lightbox{--duration:.45s;color:#fff;opacity:0;width:100vw;max-width:none;height:100dvh;max-height:none;transition:opacity var(--duration) var(--ease), scale var(--duration) var(--ease), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete;background:oklch(12% 0 0);border:0;margin:0;padding:0;inset:0;overflow:hidden;scale:1.03}.lightbox[open]{opacity:1;scale:1}@starting-style{.lightbox[open]{opacity:0;scale:1.03}}.lightbox::backdrop{background:oklch(12% 0 0)}.lightbox__stage{cursor:zoom-out;background:0 0;border:0;padding:0;position:absolute;inset:0}.lightbox__fill,.lightbox__img{width:100%;height:100%;position:absolute;inset:0}.lightbox__fill{object-fit:cover;filter:var(--photo-filter) blur(40px) brightness(.55);scale:1.15}.lightbox__img{object-fit:contain}.lightbox__caption{font-family:var(--font-sans);color:oklch(100% 0 0/.8);pointer-events:none;background:linear-gradient(#0000,oklch(0% 0 0/.65));margin:0;padding:4rem clamp(1.25rem,4vw,3rem) 1.5rem;font-size:.875rem;line-height:1.5;position:absolute;inset:auto 0 0}.lightbox__caption strong{font-family:var(--font-serif);color:#fff;font-size:1.375rem;font-weight:400;display:block}.lightbox__caption a{color:#fff;pointer-events:auto}.lightbox__close{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;width:2.75rem;height:2.75rem;transition:rotate .4s var(--ease);background:oklch(0% 0 0/.35);border:1px solid oklch(100% 0 0/.25);border-radius:0;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:grid;position:absolute;top:1.25rem;right:1.25rem}.lightbox__close:hover{rotate:90deg}.lightbox__close:focus-visible{outline-color:#fff}html:has(.lightbox[open]){scrollbar-gutter:stable;overflow:hidden}@media (prefers-reduced-motion:reduce){.figure--parallax img{animation:none;translate:none}.lightbox{transition-duration:10ms;scale:1}.mosaic__open img{transition:none}}.grid-demo{grid-template-columns:subgrid;row-gap:.5rem;margin:2rlh 0;display:grid}.grid-demo__area{min-width:0;font-family:var(--font-sans);border:var(--line);flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.2;display:flex}.grid-demo__area strong{font-family:var(--font-display);font-size:1.25rem;font-weight:800;font-stretch:125%}.grid-demo__area code{font-family:var(--font-mono);color:var(--muted);font-size:.75rem}.grid-demo__area[data-area=full]{border-inline:0;grid-column:full}.grid-demo__area[data-area=wide]{grid-column:wide}.grid-demo__area[data-area=main]{background:var(--tint);grid-column:main}.grid-demo__area[data-area=rail]{grid-column:rail}.grid-demo__area[data-area=nav]{grid-column:nav}.grid-demo__caption{grid-column:main}@media (width<56rem){.grid-demo__area[data-area=nav]{display:none}}.wrap{display:flow-root;container-type:inline-size}.wrap__photo{float:left;float:inline-start;aspect-ratio:1;object-fit:cover;clip-path:circle(50%);shape-outside:circle(50%) border-box;shape-margin:1.25rem;inline-size:40%;filter:var(--photo-filter);margin-block:.25lh .5lh;margin-inline-end:1.25rem}@container (width<24rem){.wrap__photo{float:none;inline-size:min(100%,14rem);margin-block-end:1lh;margin-inline:auto;display:block}}.detour{background:var(--tint);border-block:var(--line);margin-block:2rlh;padding-block:.5rlh 2rlh}.detour>.detour__label{color:var(--muted);margin-block:1.5rlh 0}.detour>.detour__label+.section__title{margin-block-start:.25rlh}grid-builder{gap:1.25rem;margin-block:2rlh;display:grid}.grid-builder__form{font-family:var(--font-sans);grid-template-columns:minmax(0,1fr) 8rem;gap:1rem;display:grid}@media (width<40rem){.grid-builder__form{grid-template-columns:minmax(0,1fr)}}.grid-builder__field{gap:.4rem;min-inline-size:0;display:grid}.grid-builder__field>.label{font-family:var(--font-mono);font-weight:500}.grid-builder__field input{box-sizing:border-box;inline-size:100%;font-family:var(--font-mono);color:var(--ink);background:var(--paper);border:var(--line);border-radius:0;padding:.6rem .75rem;font-size:.8125rem}.grid-builder__field input[aria-invalid]{-webkit-text-decoration:wavy underline var(--muted);text-decoration:wavy underline var(--muted);border-style:dashed}.grid-builder__presets{border:0;flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:.5rem;margin:0;padding:0;display:flex}.grid-builder__presets>legend{float:left;margin-inline-end:.25rem}:is(.grid-builder__presets button,.grid-builder__copy){font-family:var(--font-sans);color:var(--ink);border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:0;padding:.35rem .7rem;font-size:.8125rem;transition:background-color .3s}:is(.grid-builder__presets button,.grid-builder__copy):hover{background:var(--tint)}.grid-builder__status{color:var(--muted);grid-column:1/-1;margin:0;font-size:.8125rem}.grid-builder__status:empty{display:none}.grid-builder__preview{background:repeating-linear-gradient(-45deg, var(--rule) 0 1px, transparent 0 6px);border:1px solid var(--rule);min-block-size:7rem;display:grid;overflow-x:auto}.grid-builder__cell{min-inline-size:0;font-family:var(--font-sans);background:var(--paper);outline:1px solid var(--ink);outline-offset:-1px;flex-direction:column;gap:.25rem;padding:.5rem;font-size:.75rem;line-height:1.3;display:flex;overflow:hidden;container-type:inline-size}.grid-builder__lines{font-family:var(--font-mono);color:var(--muted);overflow-wrap:anywhere;font-size:.6875rem}.grid-builder__size{color:var(--ink);overflow-wrap:anywhere;background:0 0;padding:0;font-size:.8125rem}.grid-builder__px{font-variant-numeric:tabular-nums;color:var(--muted);margin-block-start:auto}@container (width<5rem){:is(.grid-builder__lines,.grid-builder__size){display:none}}@container (width<2.5rem){.grid-builder__px{display:none}}grid-builder .grid-builder__output{margin:0}.grid-builder__copy{border-color:var(--ink);margin-inline-start:auto}.grid-builder__copy:disabled{opacity:.4;cursor:not-allowed}grid-builder:not(:defined) :is(.grid-builder__form,.grid-builder__copy){display:none}@keyframes frame-in{0%{opacity:0}}.essay{--frame:300dvh;--overlap:100dvh;--card-at:100dvh;isolation:isolate;background:oklch(15% 0 0);grid-column:full;margin-block:3rlh}.essay__frame{height:var(--frame);view-timeline-name:--frame;margin:0;position:relative}.essay__frame+.essay__frame{margin-block-start:calc(-1 * var(--overlap))}.essay__frame:last-child{height:calc(var(--card-at) + 100dvh)}.essay__pin{z-index:1;height:100dvh;position:sticky;top:0;overflow:hidden}.essay__img{object-fit:cover;width:100%;height:100%}.essay__caption{z-index:2;pointer-events:none;position:absolute;inset:0}.essay__card{top:var(--card-at);max-width:min(24rem,100% - 2.5rem);color:var(--ink);background:color-mix(in oklch, var(--paper) 78%, transparent);-webkit-backdrop-filter:blur(18px)saturate(1.3);backdrop-filter:blur(18px)saturate(1.3);border:1px solid color-mix(in oklch, var(--paper) 40%, transparent);box-shadow:var(--hard-shadow);pointer-events:auto;border-radius:0;padding:1.5rem 1.75rem;position:absolute;left:clamp(1.25rem,8vw,8rem);translate:0 -50%}.essay__card p{font-family:var(--font-sans);margin:0;font-size:.9375rem;line-height:1.55}.essay__card .label{color:var(--accent);margin-block-end:.75rem}.essay__frame:nth-child(2n) .essay__card{left:auto;right:clamp(1.25rem,8vw,8rem)}@supports (animation-timeline:view()){.essay{--overlap:200dvh;--card-at:125dvh}.essay__frame:not(:first-child) .essay__img{animation:linear both frame-in;animation-timeline:--frame;animation-range:cover 100dvh cover 150dvh}}.compare{--band:color-mix(in oklch, var(--accent) 7%, var(--paper));--hover:color-mix(in oklch, var(--ink) 4%, var(--paper));margin-block:2rlh}@keyframes edge-fade{0%,92%{--fade-end:3rem}to{--fade-end:0px}}.compare__scroll{-webkit-mask-image:linear-gradient(to right, black calc(100% - var(--fade-end)), transparent);mask-image:linear-gradient(to right, black calc(100% - var(--fade-end)), transparent)}.compare__scroll:focus-visible{outline-offset:6px}@supports (animation-timeline:scroll()){.compare__scroll{animation:linear both edge-fade;animation-timeline:scroll(self inline)}}.compare__table{border-collapse:separate;border-spacing:0;width:100%;min-width:44rem;font-family:var(--font-sans);font-variant-numeric:tabular-nums lining-nums;font-size:.875rem;line-height:1.3}.compare__caption{font-family:var(--font-sans);padding-block-end:1.5rem}.compare__title{color:var(--ink);font-size:1.125rem;font-weight:600;line-height:1.2;display:block}.compare__sub{color:var(--muted);margin-block-start:.35rem;font-size:.8125rem;display:block}.compare__table :is(th,td){text-align:end;vertical-align:top;border-block-end:1px solid var(--rule);padding:.85rem 1rem;transition:background-color .2s}.compare__table thead :is(th,td){z-index:2;background-color:var(--paper);position:sticky;top:0}.compare__table thead th{color:var(--ink);vertical-align:bottom;border-block-end-color:var(--ink);font-weight:600}.compare__table thead th span{color:var(--muted);margin-block-start:.2rem;font-size:.75rem;font-style:italic;font-weight:400;display:block}.compare__table thead td{border-block-end-color:var(--ink)}.compare__table tbody th[scope=row]{text-align:start;color:var(--ink);min-width:13rem;font-weight:500}.compare__table tbody th[scope=row] span{color:var(--muted);margin-block-start:.15rem;font-size:.75rem;font-weight:400;display:block}.compare__table tbody th[scope=row] sup{margin-inline-start:.15em;font-size:.65em}.compare__table tbody th[scope=row] sup a{color:var(--accent);text-decoration:none}.compare__group :is(th,td){border-block-end:0;padding-block:1.75rem .5rem}.compare__group th{text-align:start;letter-spacing:.12em;color:var(--accent);font-size:.6875rem;font-weight:600}tbody:first-of-type .compare__group :is(th,td){padding-block-start:1rem}.compare__table td small{color:var(--muted);margin-inline:.1em;font-size:.75em}.compare__table :is(thead,tbody) :is(th,td):nth-child(2){background-color:var(--band);color:var(--ink);font-weight:600}.compare__table tbody:last-of-type tr:last-child td:nth-child(2){border-block-end-color:#0000}@supports (corner-shape:bevel){.compare__table thead th:nth-child(2),.compare__table tbody:last-of-type tr:last-child td:nth-child(2){corner-shape:bevel;border-radius:var(--cut) var(--cut) 0 0}.compare__table tbody:last-of-type tr:last-child td:nth-child(2){border-radius:0 0 var(--cut) var(--cut)}}.compare__table tbody tr:not(.compare__group):hover>*{background-color:var(--hover)}.compare__table tbody tr:not(.compare__group):hover>:nth-child(2){background-color:color-mix(in oklch, var(--accent) 12%, var(--paper))}:is(.compare__table:has(tbody td:nth-child(3):hover) :is(td,th):nth-child(3),.compare__table:has(tbody td:nth-child(4):hover) :is(td,th):nth-child(4),.compare__table:has(tbody td:nth-child(5):hover) :is(td,th):nth-child(5),.compare__table:has(tbody td:nth-child(6):hover) :is(td,th):nth-child(6)){background-color:var(--hover)}.compare__table:has(tbody td:nth-child(2):hover) :is(thead,tbody) :is(td,th):nth-child(2){background-color:color-mix(in oklch, var(--accent) 12%, var(--paper))}.compare__table tfoot td{text-align:start;border:0;padding:1rem 0 0}.compare__notes{color:var(--muted);margin:0;padding:0;font-size:.75rem;line-height:1.5;list-style:inside lower-alpha}.compare__notes li{text-wrap:pretty}.compare__notes li:target{color:var(--ink);background:var(--accent-wash)}.compare__notes ::marker{color:var(--accent);font-weight:600}@media (width<64rem){.compare__scroll{overscroll-behavior-x:contain;max-block-size:80dvh;overflow:auto}.compare__table thead td{z-index:3;left:0}.compare__table tbody th[scope=row],.compare__group th{z-index:1;background-color:var(--paper);position:sticky;left:0}.compare__table tbody th[scope=row]{min-width:10rem}.compare__notes{max-width:calc(100vw - 2.5rem);position:sticky;left:0}}@media (prefers-reduced-motion:reduce){.compare__table :is(th,td){transition:none}}.code{--tok-at:var(--lightningcss-light,oklch(50% .17 350))var(--lightningcss-dark,oklch(78% .12 350));--tok-selector:var(--lightningcss-light,oklch(47% .13 255))var(--lightningcss-dark,oklch(79% .09 255));--tok-pseudo:var(--lightningcss-light,oklch(50% .1 200))var(--lightningcss-dark,oklch(80% .08 200));--tok-var:var(--lightningcss-light,oklch(48% .15 300))var(--lightningcss-dark,oklch(79% .1 300));--tok-fn:var(--lightningcss-light,oklch(52% .13 50))var(--lightningcss-dark,oklch(80% .1 60));--tok-num:var(--lightningcss-light,oklch(50% .12 150))var(--lightningcss-dark,oklch(80% .1 150));--tok-string:var(--lightningcss-light,oklch(52% .1 110))var(--lightningcss-dark,oklch(82% .09 110));--code-bg:color-mix(in oklch, var(--ink) 3.5%, var(--paper));--mark-bg:color-mix(in oklch, var(--ink) 8%, var(--code-bg));--gutter:3.25rem;border:var(--line);background-color:var(--code-bg);border-radius:0;margin-block:2rlh;position:relative;overflow:clip}.code__bar{border-block-end:var(--line);font-family:var(--font-sans);align-items:center;gap:.75rem;padding:.7rem 1rem .7rem 1.25rem;font-size:.8125rem;display:flex}.code__lang{font-family:var(--font-serif);border:var(--line);padding:.2rem .55rem;font-weight:400;position:absolute;inset-block-start:-1px;inset-inline-end:-1px}.code__file{font-family:var(--font-mono);color:var(--ink);font-weight:500}.code__pre{overscroll-behavior-x:contain;font-family:var(--font-mono);font-variant-ligatures:none;tab-size:2;color:var(--ink);-webkit-mask-image:linear-gradient(to right, black calc(100% - var(--code-fade)), transparent);mask-image:linear-gradient(to right, black calc(100% - var(--code-fade)), transparent);margin:0;padding-block:1.1rem;font-size:.8125rem;line-height:1.75;overflow-x:auto}.code__pre:focus-visible{outline-offset:-4px;border-radius:0}@keyframes code-fade{0%,90%{--code-fade:2.5rem}to{--code-fade:0px}}@supports (animation-timeline:scroll()){.code__pre{animation:linear both code-fade;animation-timeline:scroll(self inline)}}.code__pre code{min-inline-size:max-content;font:inherit;counter-reset:line;display:block}.line{padding-inline:var(--gutter) 1.5rem;background-color:var(--code-bg);transition:opacity .3s;display:block}.line:before{content:counter(line);counter-increment:line;box-sizing:border-box;inline-size:var(--gutter);text-align:end;font-variant-numeric:tabular-nums;color:color-mix(in oklch, var(--muted) 65%, var(--code-bg));background-color:inherit;-webkit-user-select:none;user-select:none;margin-inline-start:calc(var(--gutter) * -1);padding-inline-end:1.25rem;display:inline-block;position:sticky;left:0}.line--mark{background-color:var(--mark-bg)}.line--mark:before{color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.code__pre:has(.line--mark):not(:hover,:focus-visible) .line:not(.line--mark){opacity:.5}.tok-comment{font-family:var(--font-serif);color:var(--muted);font-size:1.1em;font-style:italic}.tok-at,.tok-important{color:var(--tok-at);font-weight:500}:is(.tok-tag,.tok-class){color:var(--tok-selector)}:is(.tok-pseudo,.tok-attr){color:var(--tok-pseudo)}.tok-nest{color:var(--tok-at);font-weight:500}.tok-prop{color:var(--ink)}.tok-var{color:var(--tok-var)}.tok-fn{color:var(--tok-fn)}.tok-num{color:var(--tok-num)}.tok-unit{color:color-mix(in oklch, var(--tok-num) 70%, var(--code-bg))}.tok-string{color:var(--tok-string)}.tok-keyword{color:color-mix(in oklch, var(--ink) 80%, var(--code-bg))}.tok-punct{color:var(--muted)}.tok-swatch{vertical-align:-.08em;background:var(--swatch);block-size:.8em;inline-size:.8em;box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--ink) 22%, transparent);border-radius:0;margin-inline-end:.35em;display:inline-block}.code__caption{border-block-start:1px solid var(--rule);font-family:var(--font-sans);color:var(--muted);text-wrap:pretty;padding:.85rem 1.25rem 1rem;font-size:.8125rem;line-height:1.5}@media (prefers-reduced-motion:reduce){.line{transition:none}}.carousel{anchor-name:--carousel;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;scroll-marker-group:after;gap:1rem;margin:2rlh 0 0;padding:0;list-style:none;display:flex;overflow:auto hidden}.carousel::-webkit-scrollbar{display:none}.carousel img{aspect-ratio:3/2;object-fit:cover;pointer-events:none;border-radius:0;width:100%;height:auto;max-height:80vh}.carousel>li{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 100%;container-type:scroll-state}.carousel figure{margin:0}.carousel figcaption{font-family:var(--font-sans);color:var(--muted);opacity:.35;transition:opacity .5s ease, translate .5s var(--ease);margin-block-start:.75rem;font-size:.8125rem;translate:0 .25rem}@container scroll-state(snapped:x){.carousel figcaption{opacity:1;translate:0}}@supports not (container-type:scroll-state){.carousel figcaption{opacity:1;translate:0}}.carousel::scroll-button(*){position-anchor:--carousel;top:calc(anchor(center) - 1.5rem);width:2.75rem;height:2.75rem;font-family:var(--font-sans);color:var(--ink);background:color-mix(in oklch, var(--paper) 80%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid color-mix(in oklch, var(--ink) 10%, transparent);cursor:pointer;border-radius:0;place-items:center;font-size:1rem;transition:opacity .3s,background-color .3s;display:grid;position:absolute}.carousel::scroll-button(*):hover{background:var(--paper)}.carousel::scroll-button(*):disabled{opacity:0;cursor:default}.carousel::scroll-button(left){content:"←" / "Previous slide";left:calc(anchor(left) + 1rem)}.carousel::scroll-button(right){content:"→" / "Next slide";right:calc(anchor(right) + 1rem)}.carousel::scroll-marker-group{justify-content:center;gap:.5rem;margin-block:1rem 2rlh;display:flex}.carousel>li::scroll-marker{content:"";background:var(--rule);cursor:pointer;border-radius:0;width:8px;height:8px;transition:background-color .3s,scale .3s}.carousel>li::scroll-marker:target-current{background:var(--ink);scale:1.25}:is(main,.chapter)>.carousel::scroll-marker-group{grid-column:main}.accordion{border-block-start:1px solid var(--rule);margin-block:1.5rlh}.accordion details{border-block-end:1px solid var(--rule)}.accordion details summary{font-family:var(--font-sans);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.1rem;font-size:.9375rem;font-weight:500;list-style:none;display:flex}.accordion details summary::-webkit-details-marker{display:none}.accordion details summary:after{content:"+";color:var(--accent);transition:rotate .4s var(--ease);font-size:1.25rem;font-weight:300;line-height:1}.accordion details::details-content{block-size:0;transition:block-size .5s var(--ease), content-visibility .5s allow-discrete;overflow:clip}.accordion details:is(:open,[open])::details-content{block-size:auto}.accordion details:is(:open,[open]) summary:after{rotate:45deg}.accordion__body{padding-block-end:1.25rem}.accordion__body p:last-child{margin-block-end:0}@media (prefers-reduced-motion:reduce){.accordion details::details-content{transition:none}}.modal-trigger{font:inherit;letter-spacing:.04em;color:var(--color-foreground);cursor:pointer;background:0 0;border:1px solid;border-radius:0;justify-self:start;align-items:center;gap:.75em;margin-block:1rem 3rem;padding:.9em 1.6em;font-size:.8em;transition:background-color .4s,color .4s;display:inline-flex}.modal-trigger span{transition:translate .4s}.modal-trigger:hover{background:var(--color-foreground);color:var(--color-background)}.modal-trigger:hover span{translate:.25em}.modal-trigger:focus-visible,.modal__close:focus-visible{outline-offset:4px}.modal{--ease:cubic-bezier(.2, .8, .2, 1);--duration:.6s;width:80vw;max-width:none;height:80dvh;max-height:none;color:var(--color-foreground);background:var(--paper);box-shadow:var(--hard-shadow);opacity:0;transition:opacity var(--duration) var(--ease), translate var(--duration) var(--ease), scale var(--duration) var(--ease), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete;border:none;border-radius:0;padding:0;overflow:hidden;translate:0 2rem;scale:.98}.modal[open]{opacity:1;translate:0;scale:1}@starting-style{.modal[open]{opacity:0;translate:0 2rem;scale:.98}}.modal::backdrop{-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:background-color var(--duration) var(--ease), backdrop-filter var(--duration) var(--ease), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete;background:#14141400}.modal[open]::backdrop{-webkit-backdrop-filter:blur(16px)saturate(1.2);backdrop-filter:blur(16px)saturate(1.2);background:#14141440}@starting-style{.modal[open]::backdrop{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#14141400}}html:has(.modal[open]){scrollbar-gutter:stable;overflow:hidden}.modal__layout{grid-template-columns:1fr 1fr;height:100%;display:grid}.modal__media{margin:0;overflow:hidden}.modal__media img{object-fit:cover;width:100%;height:100%;display:block}.modal__body{flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem);display:flex;overflow-y:auto}.modal__eyebrow{letter-spacing:.2em;color:var(--accent);margin:0 0 1.5rem;font-size:.6em}.modal__title{letter-spacing:-.01em;margin:0 0 2rem;font-size:clamp(1.8rem,3.5vw,3.2rem);line-height:1.05}.modal__body p{max-width:34ch;margin:0 0 1.2em;font-size:.85em;line-height:1.5}.modal__close{width:2.75rem;height:2.75rem;color:var(--color-foreground);background:color-mix(in oklch, var(--paper) 80%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--rule);cursor:pointer;transition:rotate .4s var(--ease), background-color .4s ease;border-radius:0;place-items:center;padding:0;font-size:1.4rem;line-height:1;display:grid;position:absolute;top:1.25rem;right:1.25rem}.modal__close:hover{background:var(--paper);rotate:90deg}@media (width<=800px){.modal{width:92vw;height:88dvh}.modal__layout{grid-template-rows:40% 1fr;grid-template-columns:1fr}.modal__body{justify-content:start}}@media (prefers-reduced-motion:reduce){.modal,.modal::backdrop{transition-duration:10ms;translate:0;scale:1}}.endmatter{margin-block:4rlh 6rem}.author{border-block-start:1px solid var(--rule);grid-template-columns:auto 1fr;align-items:start;gap:1.25rem;margin-block-end:3rem;padding-block-start:3rem;display:grid}.author p{color:var(--muted);margin:0;font-size:.9375rem;line-height:1.55}.author strong{color:var(--ink);font-weight:600}.author .author__initials{width:3.25rem;height:3.25rem;font-family:var(--font-sans);letter-spacing:.05em;color:var(--accent);background:var(--accent-wash);border-radius:0;place-items:center;font-size:.875rem;font-weight:500;display:grid}.newsletter{background:var(--tint);font-family:var(--font-sans);border-radius:0;gap:1.25rem;margin-block-end:4rem;padding:clamp(1.5rem,4vw,2.5rem);display:grid}.newsletter__title{font-family:var(--font-serif);margin:0;font-size:1.5rem}.newsletter__text{color:var(--muted);margin:-.5rem 0 0;font-size:.875rem}.field{justify-items:start;gap:.4rem;display:grid}.field label{font-size:.8125rem;font-weight:500}.field :is(input,textarea){box-sizing:border-box;field-sizing:content;min-inline-size:18rem;max-inline-size:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:0;padding:.65em .85em;font-size:.9375rem;transition:border-color .2s}.field :is(input,textarea):focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);outline:none}.field :is(input,textarea)::placeholder{color:color-mix(in oklch, var(--muted) 70%, transparent)}.field textarea{resize:none;min-block-size:2lh;inline-size:100%}.field input:user-invalid{border-color:var(--accent)}.field__optional{color:var(--muted);font-weight:400}.field__hint{color:var(--accent);margin:0;font-size:.75rem;display:none}.field:has(:user-invalid) .field__hint{display:block}.check{align-items:center;gap:.6rem;font-size:.875rem;display:flex}.check input{width:1.05rem;height:1.05rem;margin:0}.newsletter__submit{font:inherit;color:var(--paper);background:var(--ink);cursor:pointer;border:0;border-radius:0;justify-self:start;padding:.75em 1.5em;font-size:.875rem;font-weight:500;transition:background-color .3s}.newsletter__submit:hover{background:var(--accent)}.newsletter:has(:invalid) .newsletter__submit{opacity:.55}:root{container-type:scroll-state}.to-top{z-index:5;width:2.75rem;height:2.75rem;font-family:var(--font-sans);color:var(--ink);background:color-mix(in oklch, var(--paper) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--rule);opacity:0;pointer-events:none;transition:opacity .4s ease, translate .4s var(--ease);border-radius:0;place-items:center;text-decoration:none;display:grid;position:fixed;bottom:1.5rem;right:1.5rem;translate:0 .5rem}@container scroll-state(scrollable:top){.to-top{opacity:1;pointer-events:auto;translate:0}}@supports not (container-type:scroll-state){.to-top{opacity:1;pointer-events:auto;translate:0}}}@layer utilities{@media print{@page{size:A4;margin:2cm 2.2cm;@top-center{content:"Modern CSS Without JavaScript";font:italic 9pt "Source Serif 4",Georgia,serif;color:#777}@bottom-right{content:counter(page) " / " counter(pages);font:8pt Inter,sans-serif;color:#777}}@page:first{@top-center{content:none}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:10pt}body{color:#000;background:#fff}nav,.progress,.to-top,.settings__toggle,.modal-trigger,.newsletter,.header__bg,.header__wrap{display:none!important}.carousel::scroll-marker-group{display:none!important}.carousel::scroll-button(*){display:none!important}.page{display:block}header,.header__inner{height:auto;margin:0;position:static;overflow:visible}.header__text{color:#000;text-align:start;justify-content:start;font-size:32pt;animation:none;position:static}main,.chapter,.endmatter{display:block}main a[href^=http]:after{content:" (" attr(href) ")";color:#555;font-size:.8em}.essay{background:0 0}.essay__frame,.essay__frame:last-child{height:auto;margin:0 0 1em}.essay__pin,.essay__caption,.essay__card{height:auto;position:static;translate:none}.essay__card{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:0;max-width:none;padding:.5em 0}.carousel{display:block;overflow:visible}.figure--parallax img{height:auto;translate:none}.figure--parallax .figure__frame{height:auto}.compare__scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}.compare__table{min-width:0}.code__pre{white-space:pre-wrap;overflow-wrap:anywhere;-webkit-mask-image:none;mask-image:none}.code__pre code{min-inline-size:0}.code .line{opacity:1!important}details::details-content{content-visibility:visible;block-size:auto}figure,table,blockquote,.stat{break-inside:avoid}h2{break-after:avoid}p{orphans:3;widows:3}.stat__num{counter-reset:n var(--to)}*{transition:none!important;animation:none!important}}}@property --i{syntax:"<integer>";inherits:true;initial-value:0}@function --fluid(--min <number>, --max <number>) returns <length>{result: clamp(calc(var(--min) * 1rem), calc((var(--min) - (var(--max) - var(--min)) * .4) * 1rem + (var(--max) - var(--min)) * 1.6vi), calc(var(--max) * 1rem));}@property --read{syntax:"<percentage>";inherits:false;initial-value:0%}@property --num{syntax:"<integer>";inherits:false;initial-value:0}@property --fade-end{syntax:"<length>";inherits:false;initial-value:0}@property --code-fade{syntax:"<length>";inherits:false;initial-value:0}