@charset "UTF-8";@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--spacing: .25rem;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-body);--default-mono-font-family: var(--font-code);--color-paper: #ecebe7;--color-ink: #14161d;--color-muted: #55565a;--color-line: rgb(20 22 29 / .14);--color-accent: #1b2a6b;--font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, sans-serif;--font-body: "iA Writer Quattro", "iA Writer Quattro Fallback", ui-monospace, monospace;--font-mono: "iA Writer Quattro", "iA Writer Quattro Fallback", ui-monospace, monospace;--font-code: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;--text-2xs: clamp(.6875rem, .6667rem + .0926vw, .75rem);--text-2xs--line-height: 1.4;--text-xs: clamp(.75rem, .7292rem + .0926vw, .8125rem);--text-xs--line-height: 1.4;--text-sm: clamp(.875rem, .8542rem + .0926vw, .9375rem);--text-sm--line-height: 1.5;--text-base: clamp(1.0625rem, 1.0208rem + .1852vw, 1.1875rem);--text-base--line-height: 1.65;--text-lg: clamp(1.25rem, 1.1667rem + .3704vw, 1.5rem);--text-lg--line-height: 1.5;--text-xl: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem);--text-xl--line-height: 1.15;--text-2xl: clamp(2rem, 1.5rem + 2.2222vw, 3.5rem);--text-2xl--line-height: 1.05;--text-3xl: clamp(2.5rem, 1.5rem + 4.4444vw, 5.5rem);--text-3xl--line-height: 1;--text-display: clamp(3.25rem, 1.3333rem + 8.5185vw, 9rem);--text-display--line-height: .9;--tracking-display: -.035em;--tracking-tight: -.015em;--tracking-mono: .02em;--tracking-label: .04em;--spacing-gutter: clamp(1rem, .3333rem + 2.963vw, 3rem);--spacing-section: clamp(6rem, 4rem + 8.8889vw, 12rem);--spacing-margin: clamp(8rem, 4rem + 8vw, 13rem);--spacing-header: 5rem;--container-shell: 90rem;--container-prose: 44rem;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgb(23 22 20 / .06);--shadow-md: 0 8px 30px rgb(23 22 20 / .08);--shadow-lg: 0 20px 60px rgb(23 22 20 / .12);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .18s;--duration-base: .45s;--duration-slow: .9s}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.visible{visibility:visible}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.min-h-screen{min-height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-col{flex-direction:column}.font-display{font-family:var(--font-display)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.blur{--tw-blur: blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}}html[data-theme=dark]{color-scheme:dark;--color-paper: #0e0e0c;--color-ink: #e9e6de;--color-muted: #9c978c;--color-line: rgb(233 230 222 / .17);--color-accent: #788bdf;--shadow-sm: 0 2px 8px rgb(0 0 0 / .5);--shadow-md: 0 8px 30px rgb(0 0 0 / .55);--shadow-lg: 0 20px 60px rgb(0 0 0 / .65)}@font-face{font-family:Bricolage Grotesque;src:url(/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}@font-face{font-family:iA Writer Quattro;src:url(/fonts/ia-writer-quattro.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:iA Writer Quattro;src:url(/fonts/ia-writer-quattro-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:iA Writer Quattro;src:url(/fonts/ia-writer-quattro-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 500;font-display:swap}@font-face{font-family:Bricolage Grotesque Fallback;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:96.29%;ascent-override:96.59%;descent-override:28.04%;line-gap-override:0%}@font-face{font-family:iA Writer Quattro Fallback;src:local("Courier New"),local("CourierNewPSMT");size-adjust:89.45%;ascent-override:114.59%;descent-override:30.74%;line-gap-override:0%}@font-face{font-family:JetBrains Mono Fallback;src:local("Courier New"),local("CourierNewPSMT");size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-blur{syntax: "*"; inherits: false;}@property --tw-brightness{syntax: "*"; inherits: false;}@property --tw-contrast{syntax: "*"; inherits: false;}@property --tw-grayscale{syntax: "*"; inherits: false;}@property --tw-hue-rotate{syntax: "*"; inherits: false;}@property --tw-invert{syntax: "*"; inherits: false;}@property --tw-opacity{syntax: "*"; inherits: false;}@property --tw-saturate{syntax: "*"; inherits: false;}@property --tw-sepia{syntax: "*"; inherits: false;}@property --tw-drop-shadow{syntax: "*"; inherits: false;}@property --tw-drop-shadow-color{syntax: "*"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: "*"; inherits: false;}@property --tw-backdrop-blur{syntax: "*"; inherits: false;}@property --tw-backdrop-brightness{syntax: "*"; inherits: false;}@property --tw-backdrop-contrast{syntax: "*"; inherits: false;}@property --tw-backdrop-grayscale{syntax: "*"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: "*"; inherits: false;}@property --tw-backdrop-invert{syntax: "*"; inherits: false;}@property --tw-backdrop-opacity{syntax: "*"; inherits: false;}@property --tw-backdrop-saturate{syntax: "*"; inherits: false;}@property --tw-backdrop-sepia{syntax: "*"; inherits: false;}@property --tw-ease{syntax: "*"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-ease: initial}}}html{background-color:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:100%;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100%;background-color:var(--color-paper);overflow-x:clip}h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:var(--tracking-display);text-wrap:balance}img{max-width:100%;height:auto;display:block}button{cursor:pointer}a{color:inherit;text-decoration:none}::selection{background:var(--color-accent);color:var(--color-paper)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-xs)}[tabindex="-1"]:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100%;left:var(--spacing-gutter);z-index:10000;padding:10px 18px;background:var(--color-ink);color:var(--color-paper);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono)}.skip-link:focus-visible{top:16px}.shell{width:100%;max-width:var(--container-shell);margin-inline:auto;padding-inline:var(--spacing-gutter)}.section{padding-block:var(--spacing-section);border-top:1px solid var(--color-line)}.section__grid{display:grid;row-gap:calc(var(--spacing) * 10)}@media(min-width:64rem){.section__grid{grid-template-columns:var(--spacing-margin) minmax(0,1fr);column-gap:var(--spacing-gutter)}}.desktop-only{display:flex!important}.mobile-only{display:none!important}@media(max-width:767px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}.section-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--color-muted)}.text-link{display:inline-flex;align-items:baseline;gap:.35em;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono);text-transform:lowercase;color:var(--color-ink);background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size var(--duration-base) var(--ease-out),color var(--duration-fast) var(--ease-out)}.text-link:hover,.text-link:focus-visible{background-size:100% 1px;color:var(--color-accent)}.text-link--accent{color:var(--color-accent)}.js .reveal{opacity:0;transform:translateY(1.5rem);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);transition-delay:calc(var(--reveal-index, 0) * 90ms)}.js .reveal.is-visible,.js .reveal:focus-within{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--duration-base);animation-timing-function:var(--ease-in-out)}::view-transition-group(project-cover){animation-duration:var(--duration-slow);animation-timing-function:var(--ease-in-out)}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}.mk path{fill:none;stroke:var(--color-accent);stroke-linecap:round;stroke-linejoin:round}.has-mark{position:relative}.mark__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.mark__svg path{stroke-width:2px}.note{--hw: .42px;display:inline-block;vertical-align:middle;line-height:0;margin-inline:.4em;pointer-events:none}.note__svg{width:calc(var(--vw) * var(--hw));height:calc(var(--vh) * var(--hw));overflow:visible}.note--down{display:block;margin:0 0 .25rem}@media(max-width:47.99rem){.note{--hw: .3px}}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){html:not([data-ink=paused]) .mk{view-timeline:--mk block}html:not([data-ink=paused]) .mk path{stroke-dasharray:1 1;animation:mk-write linear both;animation-timeline:--mk;animation-range:cover calc(18% + var(--a, 0) * 24%) cover calc(18% + var(--b, 1) * 24%)}}}@supports not (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){html.js:not([data-ink=paused]) .mk path{stroke-dasharray:1 1;stroke-dashoffset:1}html.js:not([data-ink=paused]) .mk.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset calc((var(--b, 1) - var(--a, 0)) * 1.6s) linear calc(var(--a, 0) * 1.6s)}}}@media(prefers-reduced-motion:no-preference){html.js:not([data-ink=paused]) .mk--timed{view-timeline:none}html.js:not([data-ink=paused]) .mk--timed path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:none}html.js:not([data-ink=paused]) .mk--timed.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset calc((var(--b, 1) - var(--a, 0)) * var(--mk-time, 2.4s)) linear calc(var(--a, 0) * var(--mk-time, 2.4s))}}@keyframes mk-write{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@supports (animation-timeline: view()){.post__progress{animation:read-progress linear both;animation-timeline:--article;animation-range:contain 0% contain 100%}}@keyframes read-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease-in-out)}.gravity-layer{position:fixed;inset:0;z-index:9990;cursor:grab;touch-action:none}.gravity-layer:active{cursor:grabbing}.gravity-undo{position:fixed;z-index:9991;left:50%;top:calc(var(--spacing-header) + 1rem);transform:translate(-50%);padding:.55rem 1rem;border:1px solid var(--color-line);border-radius:var(--radius-full);background:var(--color-paper);font-size:var(--text-xs);white-space:nowrap}.how-anchor{position:relative}.how-pin{position:absolute;z-index:96;top:.5rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--radius-full);background:var(--print-ink, var(--color-accent));color:var(--color-paper);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;box-shadow:0 0 0 3px var(--color-paper);cursor:pointer;animation:how-pin 1.8s var(--ease-in-out) infinite}.how-pin--tr{right:.5rem}.how-pin--tl{left:.5rem}[data-ink=paused] .how-pin{animation:none}@media(prefers-reduced-motion:reduce){.how-pin{animation:none}}@keyframes how-pin{0%,to{box-shadow:0 0 0 3px var(--color-paper),0 0 0 3px color-mix(in srgb,var(--color-accent) 40%,transparent)}50%{box-shadow:0 0 0 3px var(--color-paper),0 0 0 10px color-mix(in srgb,var(--color-accent) 0%,transparent)}}.how-panel__code .tk-k{color:var(--color-accent)}.how-panel__code .tk-f,.how-panel__code .tk-p{font-weight:500}.how-panel__code .tk-s{color:var(--color-ink);font-style:italic}.how-panel__code .tk-n{color:var(--color-accent)}.how-panel__code .tk-c{color:var(--color-muted);font-style:italic}
