@layer reset,base,layout,components,transitions;@layer reset{*,*:before,*:after{box-sizing:border-box}body{margin:0}img,picture,video,svg{display:block;max-inline-size:100%;block-size:auto}}@layer base{:root{color-scheme:light dark;--text: light-dark(oklch(.14 .005 250), oklch(.94 .005 220));--text-muted: light-dark(oklch(.44 .01 250), oklch(.58 .01 220));--bg: light-dark(oklch(.985 .003 80), oklch(.13 .01 260));--bg-subtle: light-dark(oklch(.95 .005 80), oklch(.18 .01 260));--bg-code: light-dark(oklch(.18 .015 260), oklch(.22 .012 96));--text-code: light-dark(oklch(.88 .005 220), oklch(.82 .005 220));--accent: light-dark(oklch(.52 .14 200), oklch(.74 .11 195));--accent-hover: light-dark(oklch(.44 .16 200), oklch(.82 .09 195));--border: light-dark(oklch(0 0 0 / .08), oklch(1 0 0 / .06));--font-display: "Zilla Slab", "Rockwell", Georgia, serif;--font-body: "Instrument Sans", system-ui, sans-serif;--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--measure: 65ch;--space-2xs: .25rem;--space-xs: .5rem;--space-s: .75rem;--space-m: 1rem;--space-l: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}::selection{background:color-mix(in oklch,var(--accent) 25%,transparent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3{font-family:var(--font-display);font-weight:700;text-wrap:balance}h1{font-size:clamp(2rem,1.5rem + 2.5cqi,3rem);line-height:1.05;letter-spacing:-.03em}h2{font-size:1.5rem;line-height:1.15;letter-spacing:-.02em}h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}p{text-wrap:pretty}a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--accent) 30%,transparent);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .15s ease,text-decoration-color .15s ease;&:hover{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}}time{color:var(--text-muted);font-size:.8125rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-subtle);padding:.15em .35em;border-radius:.25em}pre{background:var(--bg-code);color:var(--text-code);padding:var(--space-l);border-radius:.5rem;overflow-x:auto;font-size:.8125rem;line-height:1.6;& code{background:none;padding:0;color:inherit;font-size:inherit}}blockquote{border-inline-start:4px solid var(--accent);margin-inline:0;padding-inline-start:var(--space-l);color:var(--text-muted);font-style:italic}hr{border:none;border-block-start:1px solid var(--border);margin-block:var(--space-2xl)}table{border-collapse:collapse;inline-size:100%;font-size:.875rem;font-variant-numeric:tabular-nums}th,td{text-align:start;padding:var(--space-xs) var(--space-s);border-block-end:1px solid var(--border)}th{font-weight:600;font-size:.8125rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}}@layer layout{body{max-inline-size:var(--measure);margin-inline:auto;padding-inline:var(--space-m);padding-block:var(--space-l) var(--space-4xl)}body>header{margin-block-end:var(--space-3xl)}body>footer{margin-block-start:var(--space-4xl);padding-block-start:var(--space-l);border-block-start:1px solid var(--border);color:var(--text-muted);font-size:.8125rem;letter-spacing:.01em}}@layer components{.logo{display:none;inline-size:1.5em;block-size:1.5em;flex-shrink:0;transition:rotate .4s cubic-bezier(.2,0,0,1);@media(min-width:52rem){display:block;margin-inline-start:calc(-1.5em - var(--space-xs))}}nav[aria-label=Main]{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-l);align-items:center;& a{text-decoration:none;color:var(--text-muted);font-size:.875rem;letter-spacing:.02em;transition:color .15s ease;&:first-child{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--text);margin-inline-end:auto}&:first-child:hover .logo{rotate:90deg}&[aria-current=page]{color:var(--text)}&:hover{color:var(--text)}}}section[aria-label]>h2{font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-block-end:var(--space-l)}section[aria-label]>article{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--space-2xs) var(--space-l);padding-block:var(--space-s);padding-inline:var(--space-xs);margin-block-end:var(--space-2xs);border-radius:.375rem;transition:background .15s ease,padding-inline-start .15s ease;&:hover{background:var(--bg-subtle);padding-inline-start:var(--space-s)}& h2{font-family:var(--font-body);font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:normal;margin:0;>a:after{content:"";position:absolute;inset:0}&:has(small){font-size:1rem;font-weight:400}& small{font-weight:400;color:var(--text-muted);&:after{content:" \2192";color:var(--accent)}}}& time{font-size:.75rem;white-space:nowrap}& p{grid-column:1 / -1;font-size:.9375rem;color:var(--text-muted);margin:0;& a{position:relative}&:has(>a[aria-label^=Permalink]){display:none}}}main>article{>header{margin-block-end:var(--space-3xl);& h1{margin-block-end:var(--space-xs)}}& figure{margin-inline:0;margin-block:var(--space-xl);& img{inline-size:100%;block-size:auto;border-radius:.375rem}>a{display:block;text-decoration:none;border-radius:.375rem;transition:opacity .15s ease;&:hover{opacity:.9}}& figcaption{font-size:.8125rem;color:var(--text-muted);margin-block-start:var(--space-xs);letter-spacing:.01em}}& figure.terminal{text-align:center;& img{inline-size:auto;max-inline-size:100%}}>:is(p,ul,ol,blockquote,figure,pre,.highlight,h2,h3)+:is(p,ul,ol,blockquote,figure,pre,.highlight,h2,h3){margin-block-start:var(--space-l)}.highlight{>pre{margin:0}}}nav[aria-label="Related articles"]{margin-block-start:var(--space-3xl);padding-block-start:var(--space-l);border-block-start:1px solid var(--border);& h2{font-size:.75rem;font-family:var(--font-body);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}}}@layer transitions{@view-transition{navigation:auto}html{view-transition-name:none}main{view-transition-name:main}::view-transition-old(main){animation:.15s ease both fade-out}::view-transition-new(main){animation:.2s ease both fade-in}@keyframes fade-out{to{opacity:0;translate:0 -.5rem}}@keyframes fade-in{0%{opacity:0;translate:0 .5rem}}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}}}