:root{--unit: clamp(8px, .5rem + .25vw, 10px);--unit-2x: clamp(16px, 1rem + 1vw, 24px);--unit-4x: clamp(32px, 2rem + 2vw, 48px);--unit-8x: clamp(64px, 4rem + 4vw, 96px);--unit-16x: clamp(128px, 8rem + 8vw, 192px);--ink: oklch(20% .005 285);--paper: oklch(87% .001 85);--accent-spark-dark: oklch(75% .12 55);--accent-spark-light: oklch(60% .16 55);--accent-signal-dark: oklch(70% .1 150);--accent-signal-light: oklch(55% .12 150);--grey-900: var(--ink);--grey-800: color-mix(in oklch, var(--ink) 80%, var(--paper));--grey-700: color-mix(in oklch, var(--ink) 70%, var(--paper));--grey-500: color-mix(in oklch, var(--ink) 50%, var(--paper));--grey-300: color-mix(in oklch, var(--ink) 30%, var(--paper));--grey-200: color-mix(in oklch, var(--ink) 20%, var(--paper));--grey-100: var(--paper);--fg: var(--paper);--bg: var(--ink);--surface: var(--grey-800);--border: var(--grey-500);--hover: var(--grey-700);--spark: var(--accent-spark-dark);--spark-hover: oklch(80% .13 55);--signal: var(--accent-signal-dark);--text-sm: clamp(14px, .875rem + .1vw, 15px);--text-base: clamp(16px, 1rem + .25vw, 18px);--text-lg: clamp(20px, 1.25rem + .5vw, 24px);--text-xl: clamp(24px, 1.5rem + 1vw, 30px);--text-2xl: clamp(32px, 2rem + 2vw, 40px);--line-height: 1.7;--weight-normal: 400;--weight-medium: 500;--weight-bold: 800;--font-sans: "InterVariable", sans-serif;--font-body: "InterVariable", sans-serif;--font-mono: "LilexWeb", monospace;--max-width: 70ch;--page-margin: clamp(var(--unit-4x), 1rem + 1vw, var(--unit-4x));--transition-fast: 16ms;--transition-base: ease-out;--border-radius-sm: 1px;--border-width: 1px}@media (prefers-color-scheme: light){:root:not([data-theme]){--fg: var(--grey-900);--bg: var(--grey-100);--surface: var(--paper);--border: var(--grey-300);--hover: var(--grey-200);--spark: var(--accent-spark-light);--signal: var(--accent-signal-light)}}[data-theme=dark]{color-scheme:dark;--fg: var(--paper);--bg: var(--ink);--surface: var(--grey-800);--border: var(--grey-500);--hover: var(--grey-700);--spark: var(--accent-spark-dark);--signal: var(--accent-signal-dark)}[data-theme=light]{color-scheme:light;--fg: var(--grey-900);--bg: var(--grey-100);--surface: var(--paper);--border: var(--grey-300);--hover: var(--grey-200);--spark: var(--accent-spark-light);--signal: var(--accent-signal-light)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:var(--text-base);line-height:var(--line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-synthesis:none;font-feature-settings:"liga" 1,"calt" 1,"dlig" 1,"tnum" 1,"frac" 1,"case" 1,"zero" 1,"ss01" 0,"ss02" 1,"ss03" 1,"ss04" 1,"cv08" 1,"cv05" 1,"cv06" 1}body{font-family:var(--font-body);font-weight:var(--weight-normal);text-wrap-style:pretty;color:var(--fg);background:var(--bg);min-height:100svh}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:1.2;margin-bottom:var(--unit-2x);letter-spacing:.025em;text-wrap:balance}h1{font-size:var(--text-2xl);margin-bottom:var(--unit-4x)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4,h5{font-size:var(--text-base);font-weight:var(--weight-medium)}h6{font-size:var(--text-sm);font-weight:var(--weight-medium)}p{margin-bottom:var(--unit-2x)}.lead{font-size:var(--text-lg);opacity:.9;text-wrap:balance;margin:var(--unit-2x) 0}a{color:var(--spark);text-decoration:none;transition:color var(--transition-fast) var(--transition-base),filter var(--transition-fast) var(--transition-base)}a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--spark-hover)}a:active{color:var(--spark-hover);transform:translateY(1px)}button,.btn{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--weight-medium);padding:var(--unit) var(--unit-2x);border:var(--border-width) solid var(--border);background:transparent;color:var(--fg);cursor:pointer;letter-spacing:.05em;transition:transform var(--transition-fast) ease-out,background-color var(--transition-fast) ease-out,color var(--transition-fast) ease-out,border-color var(--transition-fast) ease-out}:is(button,.btn):hover{border-color:var(--spark);color:var(--spark);background-color:color-mix(in oklch,var(--spark) 10%,transparent)}:is(button,.btn):active{transform:translateY(1px) translate(1px)}:is(button,.btn):disabled{opacity:.5;cursor:not-allowed}.button-group{display:flex}.button-group .btn{margin-left:-1px;border-radius:0}.button-group .btn:hover{z-index:2}.button-group .btn:first-child{margin-left:0;border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm)}.button-group .btn:last-child{border-radius:0 var(--border-radius-sm) var(--border-radius-sm) 0}.grid-2-cols{display:grid;gap:var(--unit);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}.grid-2-cols>*{margin-right:var(--unit)}code,pre,kbd,samp,.font-mono{font-family:var(--font-mono);font-size:var(--text-sm)}pre{overflow-x:auto;padding:var(--unit-2x);margin:var(--unit-2x) 0;border-left:2px solid var(--signal);background:var(--surface)}pre code{padding:0;background:transparent;border-radius:0}:not(pre)>code{padding:.2em .4em;background:color-mix(in oklch,var(--signal) 8%,var(--surface));border-radius:var(--border-radius-sm)}.base-layout{display:flex;flex-direction:column;min-height:100svh}.page-content{flex-grow:1;display:grid;gap:var(--unit-4x);padding-top:var(--unit-4x)}.base-wrapper{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--page-margin)}.navbar{display:flex;justify-content:space-between;align-items:baseline;padding:var(--unit-2x) 0}.navbar nav ul:has(li+li){gap:var(--unit-2x)}.nav-container{display:flex;justify-content:center;gap:var(--unit-2x)}.nav-btn{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg);text-decoration:none;letter-spacing:.05em;transition:color var(--transition-fast) var(--transition-base);padding:clamp(6px,.375rem + .1vw,8px) clamp(.25rem,2vw,1rem);border:none;background:transparent;line-height:normal}.nav-btn:hover{color:var(--spark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.nav-btn.active{color:var(--spark)}.site-title{font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-lg);letter-spacing:-.01em;min-width:8rem;color:var(--fg);text-decoration:none;transition:transform var(--transition-fast) ease-out}.site-title:hover{text-decoration:none}nav ul{list-style:none;display:flex;justify-content:center;gap:var(--unit-2x);margin:0;padding:0}.tab-nav{display:flex;border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--unit-4x)}.tab-nav .btn{border:var(--border-width) solid transparent;border-bottom:none;border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0;margin-bottom:calc(-1 * var(--border-width));background:transparent;color:var(--grey-500)}.tab-nav .btn:not(.active):hover{background:var(--hover);color:var(--fg)}.tab-nav .btn.active{color:var(--spark);background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg)}footer{text-align:right;padding:var(--unit-4x) 0;margin-top:var(--unit-8x);font-size:var(--text-sm);opacity:.7}label{display:block;margin-bottom:var(--unit);font-weight:var(--weight-bold)}label:has(+input:invalid){color:#ff5d5a;color:oklch(70% .25 25)}input,textarea,select{font-family:inherit;font-size:var(--text-base);padding:var(--unit);border:var(--border-width) solid var(--border);background:var(--bg);color:var(--fg);width:100%;max-width:var(--max-width);border-radius:var(--border-radius-sm);transition:outline-offset var(--transition-fast) ease-out}:is(input,textarea,select):focus{outline:var(--border-width) solid var(--spark);outline-offset:2px}.text-right{text-align:right}table{width:100%;border-collapse:collapse;margin:var(--unit-4x) 0}table th,table td{padding:var(--unit) var(--unit-2x);text-align:left;border:var(--border-width) solid var(--border)}table th{font-weight:var(--weight-bold);background:var(--surface)}ul>li+li{margin-top:var(--unit)}blockquote{padding-left:var(--unit-2x);border-left:2px solid var(--signal);margin:var(--unit-4x) 0;font-style:italic;opacity:.9}hr{border:none;border-top:var(--border-width) solid var(--border);margin:0}.card-container{container-type:inline-size;container-name:card-host}@container card-host (max-width: 400px){.card-title{font-size:var(--text-lg)}}@keyframes reveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.reveal-on-scroll{animation:reveal linear both;animation-timeline:view();animation-range:entry 25% cover 40%}:focus-visible{outline:2px solid var(--spark);outline-offset:2px;border-radius:var(--border-radius-sm)}.media-grid{column-count:2;column-gap:var(--unit-2x)}.media-section{break-inside:avoid;margin-bottom:var(--unit-4x);vertical-align:top}.media-section h4{margin-top:0;font-weight:700;font-size:var(--text-lg);letter-spacing:+.05em}@media (max-width: 600px){.media-grid{column-count:1}}.media-grid>div{break-inside:avoid;margin-top:var(--unit-2x)}.media-grid>div:first-child{margin-top:0}.media-grid dt{font-family:var(--font-sans);font-weight:var(--weight-medium)}.media-grid dd{font-size:var(--text-sm);opacity:.9;margin-left:var(--unit-2x);font-style:italic}@media print{body{font-size:12pt;color:#000;background:#fff}a{text-decoration:underline}.navbar,.footer{display:none}}.flow{--flow-space: var(--unit-8x)}.flow-tight{--flow-space: var(--unit-4x)}.flow>*+*{margin-top:var(--flow-space)}.blog-list ul{list-style:none;padding:0;margin:0}.blog-list li{padding:var(--unit-4x) 0;border-bottom:var(--border-width) solid var(--border)}.blog-list li:first-child{padding-top:var(--unit-2x)}.blog-list li:last-child{border-bottom:none;padding-bottom:0}.blog-list li>a{text-decoration:none;color:inherit}.blog-list li>a strong{color:var(--fg);transition:color var(--transition-fast) var(--transition-base);font-size:var(--text-lg);font-weight:var(--weight-bold);line-height:1.3}.blog-list li>a:hover strong{color:var(--spark)}.blog-list .post-date{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--grey-500);display:block;margin-top:var(--unit)}.blog-list .post-description{margin-top:var(--unit-2x);margin-bottom:0;opacity:.9}.blog-list .post-tags{margin-top:var(--unit-2x)}.back-to-blog{margin-bottom:var(--unit-2x);font-family:var(--font-mono);font-size:var(--text-sm)}.view-all{font-family:var(--font-mono);font-size:var(--text-sm)}.blog-post .back-to-blog{text-align:left;margin-bottom:var(--unit-4x)}.blog-post-header{margin-bottom:var(--unit-8x);text-align:center;border-bottom:var(--border-width) solid var(--border);padding-bottom:var(--unit-4x)}.blog-post-header h1{font-size:clamp(32px,2rem + 3vw,52px);text-wrap:balance;margin-bottom:var(--unit-4x)}.post-meta{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--grey-500);display:flex;flex-direction:column;align-items:center;gap:var(--unit-2x)}.post-meta .post-tags{justify-content:center}.blog-post-content{padding-top:var(--unit-4x)}.blog-post-content>h2{margin-top:var(--unit-8x)}.blog-post-content>h3{margin-top:var(--unit-4x)}.blog-post-content img{max-width:100%;height:auto;margin:var(--unit-4x) auto;display:block;border-radius:var(--border-radius-sm)}.blog-post-content>*:first-child{margin-top:0!important}.post-tags{display:flex;flex-wrap:wrap;gap:var(--unit)}.tag{font-family:var(--font-mono);font-size:clamp(11px,.7rem + .1vw,12px);padding:.25em .75em;background:var(--surface);color:var(--fg);opacity:.7;border:var(--border-width) solid var(--border);border-radius:var(--border-radius-sm);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.post-navigation{display:flex;justify-content:space-between;gap:var(--unit-4x);margin-top:var(--unit-8x);padding-top:var(--unit-4x);border-top:var(--border-width) solid var(--border)}.post-navigation .nav-link{flex-basis:50%;max-width:50%;text-decoration:none}.post-navigation .nav-link .label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--grey-500);margin-bottom:var(--unit);display:block}.post-navigation .nav-link .title{color:var(--fg);font-weight:var(--weight-medium);transition:color var(--transition-fast) var(--transition-base);font-size:var(--text-sm)}.post-navigation .nav-link:hover .title{color:var(--spark)}.post-navigation .nav-link:hover{text-decoration:none}.newer-post{text-align:left}.older-post{text-align:right}.post-navigation .newer-post .title:before{content:"←";padding-right:.5em}.post-navigation .older-post .title:after{content:"→";padding-left:.5em}