@layer base{:root{--color-white:oklch(92% 0 0);--color-black:oklch(27% 0 0);--color-yellow:oklch(95% .2 107);--color-purple:oklch(70% .16 297);color-scheme:light dark;--color-text:light-dark(var(--color-black),var(--color-white));--color-sheet:light-dark(var(--color-white),var(--color-black));--color-link:light-dark(var(--color-text),var(--color-purple));--color-accent:light-dark(var(--color-yellow),var(--color-purple));--size-base:1.25rem;--size-scale:2;--size-xxs:calc(var(--size-base)*pow(var(--size-scale),-3));--size-xs:calc(var(--size-base)*pow(var(--size-scale),-2));--size-sm:calc(var(--size-base)*pow(var(--size-scale),-1));--size-md:var(--size-base);--size-lg:calc(var(--size-base)*pow(var(--size-scale),1));--size-xl:calc(var(--size-base)*pow(var(--size-scale),2));--size-xxl:calc(var(--size-base)*pow(var(--size-scale),3));--size-flex:max(var(--size-xxl),21vmin);--font-main:name,system-ui,-apple-system,blinkmacsystemfont,avenir next,avenir,segoe ui,sans-serif;--font-mono:ui-monospace,menlo,monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace;--font-weight:350;--font-opsz:24;--font-spacing:0;--font-spacing-lg:.1ch;--font-base:clamp(1em,calc(.7em + .6vi),1.5em);--font-scale:1.333;--font-xs:max(12px,calc(var(--font-base)*pow(var(--font-scale),-2)));--font-sm:calc(var(--font-base)*pow(var(--font-scale),-1));--font-md:calc(var(--font-base)*pow(var(--font-scale),0));--font-lg:calc(var(--font-base)*pow(var(--font-scale),1));--font-xl:calc(var(--font-base)*pow(var(--font-scale),2));--font-xxl:calc(var(--font-base)*pow(var(--font-scale),3));--font-xxxl:calc(var(--font-base)*pow(var(--font-scale),4));--font-xxxxl:calc(var(--font-base)*pow(var(--font-scale),5));--font-poster:clamp(var(--font-xxxxl),15vi,810%);--leading-flush:.9;--leading-fluid:calc(.675rem + 1em);--measure-md:40ch;--measure-lg:70ch;--border-default:1px solid var(--color-text);--pattern-scale:10px 10px;--pattern-dots:radial-gradient(color-mix(in oklch,var(--color-text),transparent 50%)15%,var(--color-sheet)16%);--pattern-lines:linear-gradient(90deg,var(--color-sheet)95%,var(--color-text)50%);--pattern-lines-horizontal:linear-gradient(0deg,var(--color-sheet)95%,var(--color-text)50%);--pattern-lines-angled:linear-gradient(-45deg,var(--color-text)4.55%,var(--color-sheet)4.55%,var(--color-sheet)50%,var(--color-text)50%,var(--color-text)54.55%,var(--color-sheet)54.55%,var(--color-sheet)100%)}:root[ui-theme=light]{color-scheme:light}:root[ui-theme=dark]{color-scheme:dark}:root[ui-theme=verdant]{--color-forest:oklch(45% .06 165);--color-sage:oklch(85% .08 108);--color-text:var(--color-sage);--color-sheet:var(--color-forest);--color-link:var(--color-sage);--color-accent:var(--color-sage)}:root[ui-theme=blueberry]{--color-pink:oklch(73% .06 16);--color-blue:oklch(35% .03 216);--color-text:var(--color-pink);--color-sheet:var(--color-blue);--color-link:var(--color-pink);--color-accent:var(--color-pink)}:root[ui-theme=blueprint]{--color-blue:oklch(39% .1 286);--color-gray:oklch(80% .02 134);--color-text:var(--color-blue);--color-sheet:var(--color-gray);--color-link:var(--color-blue);--color-accent:var(--color-blue)}:root[ui-theme=clay]{--color-orange:oklch(90% .1 80);--color-gray:oklch(48% .02 107);--color-text:var(--color-orange);--color-sheet:var(--color-gray);--color-link:var(--color-orange);--color-accent:var(--color-orange)}:root[ui-theme=random]{--color-text:var(--color-random-text);--color-sheet:var(--color-random-sheet);--color-link:var(--color-random-text);--color-accent:var(--color-random-text)}@font-face{font-family:name;font-weight:5 1000;font-named-instance:"Regular";src:url(/assets/fonts/AT-NameSansVariable-Subset.woff2)format("woff2");font-display:swap}@font-face{font-family:name;font-weight:5 1000;font-style:italic;font-named-instance:"Italic";src:url(/assets/fonts/AT-NameSansVariable-Italic-Subset.woff2)format("woff2");font-display:swap}*,:before,:after{box-sizing:border-box;line-height:var(--leading-fluid);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;font-variation-settings:"wght" var(--font-weight),"opsz" var(--font-opsz);color:var(--color-text);margin:0;padding:0}::selection{color:var(--color-sheet);background-color:var(--color-text)}:focus-visible{outline:.2rem solid var(--color-accent);outline-offset:.2rem}html{background-color:var(--color-sheet)}body{column-gap:var(--size-md);font-family:var(--font-main);font-size:var(--font-base);font-weight:var(--font-weight);background-color:var(--color-sheet);grid-template-columns:[bleed-start]1fr[content-start]minmax(50vi,85ch)[content-end]1fr[bleed-end];align-items:start;display:grid;overflow-x:clip;:where(& main,&>header,&>footer){grid-template-columns:subgrid;grid-column:bleed;display:grid;&>*{grid-column:content}}&>header{-webkit-transform-style:preserve-3d;z-index:10;margin-block:clamp(var(--size-sm),4vi,var(--size-lg))var(--size-flex);position:relative}&>footer{margin-block:var(--size-flex)var(--size-lg);position:relative}}article{max-inline-size:var(--measure-lg);grid-column:content;&>*+*{margin-block-start:1lh}& aside{margin-block-start:2lh}}nav{font-size:var(--font-xs);padding-block:var(--size-md);text-transform:uppercase;view-transition-name:match-element;justify-content:space-between;align-items:center;display:flex;position:relative;header>&{-webkit-transform-style:preserve-3d;z-index:10;margin-block:clamp(var(--size-sm),4vi,var(--size-lg))0}&>ul{padding-inline:var(--size-sm);align-items:center;gap:var(--size-sm);letter-spacing:var(--font-spacing-lg);background-color:var(--color-sheet);border-radius:var(--size-lg);margin-inline-start:calc(var(--size-sm)*-1);display:flex;& li{-webkit-transform-style:flat}& a{padding-block:var(--size-xs);padding-inline:var(--size-sm);line-height:1;text-decoration:none;display:inline-block;&[aria-current=page]{--font-weight:400;color:var(--color-sheet);background-color:var(--color-accent);border-radius:var(--size-md);:where([ui-theme=system],[ui-theme=light]) &{color:light-dark(var(--color-text),var(--color-sheet))}}}}}@keyframes noise{0%{filter:url(#noise-frame-1)}33%{filter:url(#noise-frame-2)}66%{filter:url(#noise-frame-3)}to{filter:url(#noise-frame-1)}}@keyframes fade-in{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}@keyframes fade-up{0%{opacity:0}to{opacity:1}}img,embed,object,video{block-size:auto;max-inline-size:100%}svg{block-size:auto;inline-size:100%;-webkit-transform-style:initial;display:block;&[aria-hidden=true]{visibility:hidden;width:0;height:0}& g{-webkit-transform-style:initial}}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}h1{--font-weight:650;--font-opsz:72;line-height:var(--leading-flush);font-size:var(--font-poster);margin-block-start:0;article &{margin-block:var(--size-sm)var(--size-lg);font-size:var(--font-xxxl);line-height:var(--leading-fluid)}&>span{line-height:var(--leading-flush);display:inline-block;position:relative;&:before{content:"";background-color:var(--color-sheet);z-index:-1;block-size:50%;inline-size:100%;display:block;position:absolute;inset-block-start:60%}}}h2{--font-weight:600;--font-opsz:64;font-size:var(--font-xl)}h3{--font-weight:500;--font-opsz:56;font-size:var(--font-lg)}:where(h4,h5,h6){--font-weight:500;--font-opsz:48;font-size:var(--font-md)}:where(p,ul,ol,dl){text-wrap:pretty}p{hgroup>h1+&{--font-opsz:64;font-size:var(--font-xl);text-wrap:balance}&>:first-child:where(span){vertical-align:middle;background-color:var(--color-sheet);box-decoration-break:clone;padding:.25em .25em .25em 0}}ul{list-style-type:none}ol{list-style-type:decimal;list-style-position:inside}li{:where(article &,recent-notes &){position:relative;&+li{margin-block-start:.5lh}&:before{content:" ";background-color:var(--color-text);block-size:1px;inline-size:100%;display:block;position:absolute;inset-block-start:.75em;inset-inline-start:-103%}}}:where(b,strong){--font-weight:600}:where(i,em){font-style:italic}small{font-size:var(--font-sm)}:where(a,a:visited){color:var(--color-link);text-decoration-thickness:.1em;text-decoration-color:var(--color-accent);text-underline-offset:.1em;transition:font-variation-settings .2s,text-decoration-thickness .2s,font-weight .2s}@media (hover:hover){a:hover{animation:.3s step-start infinite noise}}hr{border:0;border-block-start:1px solid var(--color-text);z-index:1;inline-size:100%;margin-block:var(--size-lg)}pre{margin-inline:calc(var(--size-md)*-1);padding:var(--size-md);background:var(--pattern-dots);scrollbar-color:var(--color-text)var(--color-sheet);background-size:4px 4px;overflow:auto}code{padding-block:0;padding-inline:var(--size-xxs);color:var(--color-sheet);background-color:var(--color-text);border-radius:var(--size-xxs);font-size:90%;font-family:var(--font-mono);margin-inline-end:.1rem;pre &{box-shadow:none;color:var(--color-text);background-color:var(--color-sheet);padding-block:var(--size-xs);border:none;padding-inline:0;overflow:auto}}blockquote{--font-weight:300;quotes:"“" "”" "‘" "’";font-size:var(--font-lg);border-inline-start:1px solid var(--color-text);margin-inline-start:calc(var(--size-lg)*-1);padding-inline-start:var(--size-lg);font-style:italic;position:relative}time{--font-weight:400;font-size:var(--font-xs);background-color:var(--color-sheet);padding:var(--size-xs);letter-spacing:.5ch;text-transform:uppercase;display:inline-block}}@layer components{animate-on-scroll{display:contents}@media (prefers-reduced-motion:no-preference){html:not([ui-browser=safari]){& :where([ui-js] [animate-self],[ui-js] [animate-children]>*){opacity:0}& [animate-self=true]{animation:.2s ease-in-out forwards fade-in}}}:where(button,aside>a){--font-weight:600;padding-block:var(--size-sm);padding-inline:var(--size-lg);color:var(--color-link);background-color:var(--color-sheet);border:1px solid var(--color-link);text-transform:uppercase;font-weight:var(--font-weight);font-size:inherit;border-radius:.25em;align-items:center;gap:.375em;text-decoration:none;display:inline-flex;@media (hover:hover){&:hover{color:var(--color-sheet);background-color:var(--color-link);animation:.3s step-start infinite noise}}&[aria-current=true]{color:var(--color-sheet);background-color:var(--color-link)}}double-stack{column-gap:var(--size-lg);row-gap:var(--size-sm);grid-template-columns:repeat(auto-fit,minmax(30ch,1fr));display:grid}[aria-labelledby=logo-title]{place-items:center;block-size:2em;inline-size:2em;display:inline-flex;inset-block-start:0;& path{fill:var(--color-text);transform-origin:50% 100%;transition:transform .5s}& path:nth-child(2){opacity:1;transform:rotateX(180deg)}@media (hover:hover){&:hover path:first-child{transform:rotateY(180deg)}&:hover path:nth-child(2){transform:rotateX(0)}}}note-pad{border-block-start:var(--border-default);margin-block-start:var(--size-md);& li{padding-block:var(--size-lg);border-block-end:var(--border-default);text-wrap:balance}& a{--font-weight:600;font-size:var(--font-xxl);margin-block-end:var(--size-sm)}& p{margin-block:var(--size-sm)}}random-pattern{grid-column:bleed;:where(&[pattern-size=lg],&[pattern-size=md]){background:var(--pattern-dots);background-size:4px 4px;block-size:30em;max-inline-size:100%;position:absolute;inset-block-start:0;inset-inline:0;overflow:hidden;& div{border-radius:100em;block-size:40em;inline-size:40em;position:absolute}& [shape-type="1"]{border:.1rem solid var(--color-sheet);background-color:var(--color-sheet);filter:url(#noise1)}& [shape-type="2"]{background:var(--pattern-lines-horizontal);background-size:var(--pattern-scale)}& [shape-type="3"]{background:var(--pattern-dots);background-size:var(--pattern-scale)}& [shape-type="4"]{background:var(--pattern-lines);background-size:var(--pattern-scale)}}&[pattern-size=md]{block-size:18em}&[pattern-size=sm]{grid-column:bleed;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(10,1fr);gap:0;block-size:20em;max-inline-size:100%;display:grid;position:absolute;inset-block-start:0;inset-inline:0;overflow:clip;&:before{--font-weight:800;content:attr(data-title);z-index:-1;color:#0000;text-align:right;opacity:1;text-transform:uppercase;background-color:#0000;background-size:1rem;background-image:var(--pattern-dots);background-size:var(--pattern-scale);filter:url(#noise4);-webkit-background-clip:text;block-size:10em;inline-size:100%;font-size:10vi;line-height:.8;position:absolute;inset-block-start:calc(var(--size-lg)*-1);inset-inline-end:calc(var(--size-lg)*-1)}& div{border-radius:100em;grid-column:auto;block-size:10em;inline-size:10em}& [shape-type="1"]{--color-sheet:var(--color-accent);background:var(--pattern-lines-horizontal);background-size:var(--pattern-scale);aspect-ratio:1;border-block-end:none;border-radius:100em}& [shape-type="2"]{border:.1rem solid var(--color-text);filter:url(#noise1)}& [shape-type="3"]{filter:url(#noise3);border:.1rem solid var(--color-text)}& [shape-type="4"]{filter:url(#noise2);border:.1rem solid var(--color-text);background-size:1rem 1rem;border-block-end:none}}}recent-notes{&>hgroup{justify-content:space-between;align-items:center;gap:var(--size-sm);border-block-start:1px solid var(--color-text);margin-block:var(--size-xl)var(--size-md);padding-block:var(--size-sm);flex-wrap:wrap;display:flex;& h2{--font-weight:700;font-size:var(--font-sm);text-transform:uppercase;letter-spacing:var(--font-spacing-lg)}& a{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:var(--font-spacing-lg);text-decoration:none}}&>ul{--font-weight:600;font-size:var(--font-xl)}}theme-picker{& details{z-index:5;text-align:end;-webkit-transform-style:flat;position:relative}& summary{cursor:pointer;justify-content:flex-end;align-items:center;gap:var(--size-xs);text-align:end;line-height:0;text-decoration:none;display:flex;position:relative;@media (hover:hover){&:hover{animation:none;& span{opacity:1;transform:translate(0)}& i{animation:.3s step-start infinite noise}}}&::-webkit-details-marker{display:none}& span{color:var(--color-link);z-index:1;padding:0 var(--size-sm);text-transform:uppercase;letter-spacing:var(--font-spacing-lg);background-color:var(--color-sheet);opacity:0;transform:translateX(var(--size-md));pointer-events:none;border-radius:var(--size-xxs);-webkit-transform-style:initial;transition:all .2s;position:relative;:focus-visible &{opacity:1;transform:translate(0)}}& i{z-index:2;border:.25em solid var(--color-sheet);background-color:var(--color-sheet);border-radius:100%;block-size:2em;inline-size:2em;display:inline-block;position:relative;& svg{block-size:auto;inline-size:100%;transition:transform .2s;display:block;& :is(path,circle){stroke:var(--color-link);stroke-width:.5px;stroke-dasharray:40;stroke-dashoffset:0;transition:all .4s}& path:only-child,[open] :where(& path:nth-child(2),& path:nth-child(3)){stroke-dashoffset:40px}[open] & path:only-child{stroke-dashoffset:0}}}}& ul{position:absolute;inset-block-start:2em;inset-inline-end:.25em;[open] &{animation:.2s ease-in-out fade-up}& li{[open] &{margin-block-start:var(--size-xs);list-style-type:none;animation:.2s ease-in-out both fade-in;&:first-child{animation-delay:50ms}&:nth-child(2){animation-delay:.1s}&:nth-child(3){animation-delay:.15s}&:nth-child(4){animation-delay:.2s}&:nth-child(5){animation-delay:.25s}&:nth-child(6){animation-delay:.3s}&:nth-child(7){animation-delay:.35s}&:nth-child(8){animation-delay:.4s}&:nth-child(9){animation-delay:.45s}}}}& button{--font-weight:350;padding-block:var(--size-xs);padding-inline:var(--size-md);background-color:var(--color-sheet);border:0;border-inline-end:.2rem solid var(--color-link);border-radius:0;letter-spacing:var(--font-spacing-lg);border-start-start-radius:var(--size-xxs);border-end-start-radius:var(--size-xxs)}}.token{background-color:var(--color-sheet);border-radius:var(--size-xxs);padding-inline:var(--size-xxs);&.comment{opacity:.5}&.function{color:var(--color-sheet);background-color:var(--color-text)}&.punctuation{opacity:.5}&.selector,&.tag,&.attr-name,&.class-name{color:var(--color-link);font-weight:500}&.attr-value,&.property{color:var(--color-text);& .punctuation{opacity:.5;color:var(--color-text);background-color:#0000}}&.keyword{color:var(--color-link)}&.string{color:var(--color-text)}}work-timeline{grid-template-columns:subgrid;grid-column:bleed;display:grid;position:relative;overflow:hidden;&:before{content:"";background-color:var(--color-text);grid-column:2;block-size:100%;inline-size:1px;margin-inline-start:.75em;display:block;position:absolute}& :where(ol,ol>li){grid-template-columns:subgrid;grid-column:bleed;display:grid}& header{margin-block:var(--size-xxl)0;padding-block:var(--size-sm);background-color:var(--color-sheet);grid-column:content;&>h2{--font-weight:700;font-size:var(--font-xl);text-transform:uppercase;letter-spacing:var(--font-spacing-lg)}&>p{max-inline-size:var(--measure-lg)}&>small{margin-block-start:var(--size-xs)}}& figure{grid-column:bleed;margin-block-start:var(--size-lg);container-type:inline-size;&>ul{margin-inline:var(--size-sm);gap:var(--size-lg);flex-direction:column;display:flex;@container (inline-size>40em){margin-inline:calc(var(--size-lg)*-1);grid-template-columns:repeat(24,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(1em,5vi,2em);display:grid}@container (inline-size>70em){max-inline-size:70em;margin-inline:auto}}}}work-timeline figure li{flex-shrink:0;place-items:center;max-inline-size:100%;transition:scale .2s;display:grid;position:relative;scale:1;@supports (position-try-order:most-width){&:has(>button){&:hover{scale:1.01}}}&:not([card-featured]){@container (inline-size<40em){display:none!important}}&[card-size=half]{grid-area:span 6/span 12}&[card-size=third]{grid-area:span 3/span 8}&[card-size=primary]{grid-area:span 4/span 14}&[card-size=secondary]{grid-area:span 3/span 5}&[card-text]{place-items:initial;padding-block:var(--size-md);grid-area:span 2/5/auto/span 10;display:block;@container (inline-size<40em){display:none}}&[card-placeholder]{padding:var(--size-md);border:.1em dashed var(--color-text);background-color:var(--color-sheet);border-radius:var(--size-lg);filter:url(#noise3);place-items:center;min-block-size:20em;display:grid}& :where(img,video){object-fit:cover;display:block;overflow:hidden}&[card-type=iphone]{aspect-ratio:1000/2072;filter:drop-shadow(0 1em 1em #0000004d);& :where(img,video){aspect-ratio:9/19.5;border-radius:10%;block-size:97.5%}&:before{aspect-ratio:1000/2072;content:"";z-index:1;pointer-events:none;background-image:url(/assets/bezel-iphone.webp);background-repeat:no-repeat;background-size:contain;block-size:100%;display:block;position:absolute}}&[card-type=ipad]{aspect-ratio:2584/1864;filter:drop-shadow(0 1em 1em #0000004d);& :where(img,video){aspect-ratio:59/41;border-radius:1%;block-size:88.5%}&:before{aspect-ratio:2584/1864;content:"";z-index:1;pointer-events:none;background-image:url(/assets/bezel-ipad.webp);background-repeat:no-repeat;background-size:contain;block-size:100%;display:block;position:absolute}}&>button{opacity:0;z-index:5;position:absolute;inset:0;&:hover{cursor:pointer}@supports not (position-try-order:most-width){display:none}}&>dialog{position-area:center center;position-visibility:no-overflow;color:var(--color-text);background-color:color-mix(in oklch,var(--color-sheet),transparent 90%);backdrop-filter:blur(20px);border-radius:var(--size-xs);border:1px solid var(--color-text);padding-block:var(--size-xs);padding-inline:var(--size-sm);max-inline-size:var(--measure-md);text-wrap:pretty;box-shadow:var(--size-xs)var(--size-xs)var(--size-lg)#00000080;font-size:var(--font-xs);border:none;animation:.3s step-start noise;position:absolute;inset:auto;overflow:visible;&:focus-within a{outline:none}&:before{content:"";pointer-events:none;filter:url(#noise1);background-color:var(--color-sheet);display:block;position:absolute;inset:-1em}}}}