@layer reset{*,:before,:after{box-sizing:border-box}:where(body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,pre){margin:0}:where(ul,ol){padding:0}:where(table){border-collapse:collapse;border-spacing:0}:where(img,picture,video,canvas,svg){block-size:auto;max-inline-size:100%;display:block}:where(input,button,textarea,select){font:inherit}}@layer base{body{background:var(--bg);color:var(--fg);line-height:1.45;font-family:var(--text-font);text-rendering:optimizelegibility;font-variant-ligatures:common-ligatures;hanging-punctuation:first last;scrollbar-gutter:stable;--aside-width:calc(var(--width) - var(--text-width));--aside-gap:1rem;--aside-reach:calc(var(--aside-width) + var(--aside-gap));grid-template-columns:[frame-start gutter-left-start] minmax(var(--frame-pad), 1fr) [gutter-left-end mirror-start] minmax(0, var(--aside-reach)) [mirror-end content-start] var(--text-width) [content-end aside-gap-start] var(--aside-gap) [aside-gap-end aside-start] var(--aside-width) [aside-end gutter-right-start] minmax(var(--frame-pad), 1fr) [gutter-right-end frame-end];align-content:start;display:grid}@media (width<=62.5rem){body{--aside-width:0px;--aside-gap:0px;--aside-reach:0px;grid-template-columns:[frame-start gutter-left-start] minmax(var(--frame-pad), 1fr) [gutter-left-end mirror-start] 0 [mirror-end content-start] minmax(0, var(--text-width)) [content-end aside-gap-start] 0 [aside-gap-end aside-start] 0 [aside-end gutter-right-start] minmax(var(--frame-pad), 1fr) [gutter-right-end frame-end]}}body>header,body>footer{grid-column:content}body>main{grid-column:frame;grid-template-columns:subgrid;display:grid}main>section{grid-column:content}main>article{grid-column:frame;grid-template-columns:subgrid;align-items:start;gap:0;display:grid}main>article>header{display:contents}main>article>*,main>article>header>:not(aside):not(.article-toc){grid-column:content}main>article>:not(header){max-inline-size:var(--text-width)}h1{padding-block:.8rem .5rem;font-size:1.3rem;font-weight:500;line-height:1}h2{padding-block-start:.5rem;font-size:1.2rem;font-weight:500}h3{padding-block-start:.75rem;font-size:1.1rem;font-weight:600}h4{margin-block-start:.8rem;font-size:1rem;font-weight:600}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}p{text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}article p,footer p,aside p,pre,blockquote,article>ul{margin-block-start:.9rem}article header p{margin-block-start:0}a:where(:link,:visited){color:var(--fg);text-underline-offset:.1rem;text-decoration:underline 2px;text-decoration-color:var(--fg-light)}a:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}a:after{vertical-align:super;font-size:.6rem}a[href*="//"]:after{content:" ↗"}a[href^=http\:]:after{content:" !"}a:where([href$=\.pdf],[href$=\.zip],[href$=\.gz]):after{content:" ↓"}sup{vertical-align:super;font-size:.8rem;line-height:0}blockquote{quotes:none;border-inline-start:4px solid var(--q-border);border-radius:4px;padding-inline-start:.5rem}picture,img{margin-inline:auto;block-size:auto;max-inline-size:calc(100% - .5rem);margin-top:1rem;padding:1rem 0;display:block}@media (prefers-color-scheme:dark){img[src*=svg]{filter:invert()hue-rotate(90deg)}}figure img{margin-inline:auto}figcaption{text-align:center;max-inline-size:60ch;color:var(--fg-figcaption);margin-block-start:1rem;margin-inline:auto;font-size:.9rem}video{margin-block-start:1rem}hr{border:none;border-top:1px solid var(--fg-light);max-inline-size:var(--width);margin-block:16px}main ul li{margin-inline-start:1rem;list-style-type:"–  "}article ul ul{margin:0}article ol{max-inline-size:calc(var(--text-width) - 2rem);padding-inline-start:2rem}code{font-family:var(--mono-font);background-color:var(--bg-code);color:var(--fg-code);font-size:90%}pre{color:var(--fg-code);background-color:var(--bg-code);font-family:var(--mono-font);white-space:pre-wrap;tab-size:4;padding:.5rem 0 .5rem .5rem;font-size:.95rem;overflow-x:auto}pre code{background:0 0}kbd{font-family:var(--mono-font);background-color:var(--bg-code);color:var(--fg-code);border:1px solid var(--fg-light);border-radius:4px;padding:.1rem .35rem;font-size:90%}:focus-visible{outline:2px solid var(--link-hover);outline-offset:2px}}@layer theme{:root{color-scheme:light dark;--width:60rem;--text-width:40rem;--frame-pad:1rem;--bp-page:62.5rem;--bp-narrow:48rem;--mono-font:ui-monospace, Menlo, Consolas, monospace;--text-font:-apple-system, system-ui, Input, Helvetica, sans-serif;--bg:light-dark(#fff,#181818);--fg:light-dark(#000000f2,#eee);--fg-faint:light-dark(#777,#bbb);--fg-light:light-dark(#bfbfbf,#595959);--fg-code:light-dark(#000,#ddd);--bg-code:light-dark(#f0f0f0,#282828);--link-hover:light-dark(#005aff,#62b3ff);--fg-figcaption:var(--fg-faint);--q-border:var(--fg-light)}}@layer components{.mascot{--width:200px;--color:var(--fg-light);--hover-color:var(--link-hover);--eye-color:white;--pupil-color:black;width:var(--width);height:var(--width);background-color:var(--color);transform-style:preserve-3d;transform:translateZ(calc(var(--width) * .25)) perspective(calc(var(--width))) rotateX(var(--y-angle,0deg)) rotateY(var(--x-angle,0deg));will-change:transform;background-image:url(/favicon.ico);background-position:50% 65%;background-repeat:no-repeat;background-size:170%;grid-template-columns:1fr 1fr;place-items:center;display:grid;&:hover{background-color:var(--hover-color)}&>.eye{width:calc(var(--width) * .25);height:calc(var(--width) * .25);background-color:var(--eye-color);transform:rotate(var(--eye-angle,0deg));border-radius:50%;&>.pupil{width:calc(var(--width) * .08);height:calc(var(--width) * .08);background-color:var(--pupil-color);top:calc(50% - (var(--width) * .04));border-radius:50%;position:relative}}}body>header{justify-content:space-between;align-items:center;margin-block:2.5rem;display:flex;& nav ul{padding:0}& nav li{margin-inline-end:2rem;display:inline-block;&:last-child{margin-inline-end:0}}& nav a:link{text-decoration:none}}body>footer{max-inline-size:500px;padding-block:25px;font-size:.825rem;& p{text-wrap:pretty;margin-block-end:7px}& nav *{display:inline-block}& nav a{padding-inline:1px}& svg{padding-inline-start:3px;position:relative;top:3px}}@media (width<=48rem){body>footer{text-align:center;margin-inline:auto}}}
