@font-face{font-family: 'Atkinson Hyperlegible Next';src: url(/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.18b2a1a39a.woff2) format('woff2');font-weight: 200 800;font-style: normal;font-display: swap}@font-face{font-family: 'Atkinson Hyperlegible Next';src: url(/assets/fonts/atkinson-hyperlegible-next-latin-wght-italic.4a5037bfaf.woff2) format('woff2');font-weight: 200 800;font-style: italic;font-display: swap}@font-face{font-family: 'Fira Code';src: url(/assets/fonts/fira-code-latin-wght-normal.771bf4b79a.woff2) format('woff2');font-weight: 300 700;font-style: normal;font-display: swap}:root{color-scheme: light dark;--paper: light-dark(oklch(97.2% 0.006 90),oklch(20% 0.006 270));--band: light-dark(oklch(94.4% 0.008 90),oklch(23.5% 0.008 270));--card: light-dark(oklch(99.5% 0.002 90),oklch(25.5% 0.008 270));--ink: light-dark(oklch(22% 0.012 270),oklch(93% 0.006 90));--ink-2: light-dark(oklch(42% 0.012 270),oklch(78% 0.008 90));--ink-3: light-dark(oklch(52% 0.01 270),oklch(68% 0.008 90));--rule: light-dark(oklch(87% 0.008 90),oklch(34% 0.008 270));--rule-2: light-dark(oklch(74% 0.01 90),oklch(46% 0.01 270));--accent: light-dark(oklch(47% 0.16 262),oklch(78% 0.12 262));--accent-2: light-dark(oklch(40% 0.17 262),oklch(86% 0.09 262));--on-accent: light-dark(#fff,oklch(20% 0.02 262));--focus: light-dark(oklch(47% 0.16 262),oklch(80% 0.13 262));--sans: 'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;--mono: 'Fira Code',ui-monospace,'SF Mono',Menlo,monospace;--step--1: clamp(0.84rem,0.82rem + 0.1vw,0.9rem);--step-0: clamp(1rem,0.96rem + 0.2vw,1.12rem);--step-1: clamp(1.2rem,1.1rem + 0.45vw,1.45rem);--step-2: clamp(1.5rem,1.3rem + 0.9vw,2.1rem);--step-4: clamp(2.6rem,1.6rem + 4.6vw,5.2rem);--space: clamp(1rem,0.8rem + 1vw,1.5rem);--section: clamp(3.5rem,2.5rem + 5vw,7rem);--radius: 10px;--width: 70rem;--header: 3.75rem}:root[data-theme='light']{color-scheme: light}:root[data-theme='dark']{color-scheme: dark}@view-transition{navigation: auto}*,*::before,*::after{box-sizing: border-box}html{-webkit-text-size-adjust: none;text-size-adjust: none;scroll-padding-top: calc(var(--header) + 1rem)}@media (prefers-reduced-motion: no-preference){html{scroll-behavior: smooth}}body{margin: 0;background: var(--paper);color: var(--ink);font: 400 var(--step-0) / 1.6 var(--sans);font-optical-sizing: auto;-webkit-font-smoothing: antialiased}h1,h2,h3,h4{margin: 0;line-height: 1.15;text-wrap: balance}p,li{text-wrap: pretty}p{margin: 0}img{display: block;max-width: 100%;height: auto}ul,ol{margin: 0;padding: 0}[role='list']{list-style: none}strong{font-weight: 700}.icon{width: 1em;height: 1em;flex: none;vertical-align: -0.125em}a{color: var(--accent);text-decoration-thickness: 1px;text-underline-offset: 0.2em}a:hover{color: var(--accent-2);text-decoration-thickness: 2px}:focus-visible{outline: 2px solid var(--focus);outline-offset: 3px;border-radius: 4px}main:focus{outline: none}.wrap{width: min(100% - 2 * var(--space),var(--width));margin-inline: auto}.visually-hidden{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap}.skip{position: absolute;left: var(--space);top: 0.5rem;z-index: 10;translate: 0 -200%;padding: 0.6rem 1rem;border-radius: var(--radius);background: var(--ink);color: var(--paper);font-weight: 700}.skip:focus{translate: 0 0}.top{position: sticky;top: 0;z-index: 5;height: var(--header);background: color-mix(in oklch,var(--paper) 82%,transparent);backdrop-filter: blur(12px) saturate(1.4);border-bottom: 1px solid color-mix(in oklch,var(--rule) 70%,transparent)}.top-inner{height: 100%;display: flex;align-items: center;gap: 1.5rem}.mark{display: grid;place-items: center;width: 2.5rem;height: 2.5rem;border-radius: 8px;background: var(--ink);color: var(--paper);text-decoration: none;font: 600 1rem/1 var(--mono);letter-spacing: -0.04em}.mark:hover{color: var(--paper);background: var(--accent)}.sections{display: flex;gap: 0.25rem;margin-inline-start: auto}.sections a{padding: 0.55rem 0.75rem;border-radius: 8px;color: var(--ink-2);text-decoration: none;font-size: var(--step--1);font-weight: 600}.sections a:hover{color: var(--ink);background: var(--band)}.sections a[aria-current]{color: var(--ink);background: var(--band)}.tools{display: flex;gap: 0.25rem;margin-inline-start: auto}.tool{display: grid;place-items: center;min-width: 2.75rem;height: 2.75rem;padding: 0 0.5rem;border: 1px solid transparent;border-radius: 8px;background: none;color: var(--ink-2);cursor: pointer;font: 600 var(--step--1)/1 var(--sans);text-decoration: none}.tool:hover{color: var(--ink);background: var(--band);border-color: var(--rule)}.tool .icon{width: 1.15rem;height: 1.15rem}@media (max-width: 52rem){.sections{display: none}}@media (min-width: 52.01rem){.sections + .tools{margin-inline-start: 0.5rem}}.eyebrow{font: 500 var(--step--1)/1.4 var(--mono);color: var(--ink-3);letter-spacing: -0.01em;margin-bottom: 1rem}.lead{max-width: 38rem;font-size: var(--step-1);line-height: 1.5;color: var(--ink-2)}.actions{display: flex;flex-wrap: wrap;gap: 0.75rem;margin-top: 1.5rem}.button{display: inline-flex;align-items: center;gap: 0.5rem;min-height: 2.9rem;padding: 0.7rem 1.2rem;border: 1px solid var(--accent);border-radius: 999px;background: var(--accent);color: var(--on-accent);font-weight: 700;text-decoration: none;line-height: 1.2}.button:hover{color: var(--on-accent);background: var(--accent-2);border-color: var(--accent-2)}.button.quiet{background: transparent;color: var(--ink);border-color: var(--rule-2)}.button.quiet:hover{color: var(--ink);border-color: var(--ink);background: var(--card)}:root{--pwls: light-dark(oklch(50% 0.16 262),oklch(76% 0.13 262));--wsw3: light-dark(oklch(52% 0.1 200),oklch(80% 0.1 200));--shell: light-dark(oklch(36% 0.008 260),oklch(88% 0.006 260));--shell-2: light-dark(oklch(29% 0.008 260),oklch(80% 0.008 260));--key: light-dark(oklch(21% 0.006 260),oklch(97% 0.003 260));--key-ink: light-dark(oklch(84% 0.006 260),oklch(38% 0.01 260));--key-edge: light-dark(oklch(12% 0.004 260),oklch(70% 0.006 260));--well: light-dark(oklch(26% 0.006 260),oklch(74% 0.006 260));--pad: light-dark(oklch(42% 0.008 260),oklch(82% 0.006 260));--pad-edge: light-dark(oklch(52% 0.008 260),oklch(68% 0.008 260));--scr: light-dark(#15171d,#f7f6f2);--scr-bar: light-dark(#23262e,#e6e3db);--scr-url: light-dark(#2d3039,#fbfaf7);--scr-ink: light-dark(#e7e8ec,#1f2130);--scr-dim: light-dark(#9ba0ad,#5a5d6b);--scr-tag: light-dark(#93aaff,#2f4db8)}.hero{position: relative;overflow-x: clip;--title-from: 1.06}@media (max-width: 40rem){.hero{--title-from: 1}}.stage{position: relative;display: grid;grid-template-rows: auto minmax(0,1fr);gap: clamp(0.5rem,2vh,1.5rem);padding-block: clamp(1rem,4vh,3rem) clamp(1rem,4vh,2.5rem)}.hero-title{text-align: center}.hero h1{font-size: min(clamp(2.7rem,1.2rem + 6.5vw,6.5rem),12svh);font-weight: 780;letter-spacing: -0.045em;line-height: 0.95}.hero h1 span{display: inline-block}.hero-foot{display: grid;justify-items: center;text-align: center;padding-block: clamp(1rem,4vh,3rem) 0}.cue{display: none;position: absolute;left: 50%;top: 9%;translate: -50% 0;z-index: 1;margin: 0;flex-direction: column;align-items: center;gap: 0.6rem;font: 500 var(--step--1)/1 var(--mono);color: var(--ink-2)}.mouse{width: 1.2rem;height: 1.9rem;border: 2px solid currentColor;border-radius: 1rem;position: relative}.mouse::after{content: '';position: absolute;left: 50%;top: 0.4rem;width: 3px;height: 0.45rem;margin-left: -1.5px;border-radius: 2px;background: currentColor;animation: wheel 1.6s ease-in-out infinite}@keyframes wheel{0%{opacity: 0;translate: 0 -2px}30%{opacity: 1}100%{opacity: 0;translate: 0 8px}}.hero-foot .actions{justify-content: center}.scene{position: relative;width: min(100%,72rem);height: clamp(20rem,62svh,38rem);margin-inline: auto;perspective: 2200px;perspective-origin: 50% 0%;container-type: size}.glow{position: absolute;inset: 0 12%;border-radius: 50%;background: radial-gradient(closest-side,color-mix(in oklch,var(--pwls) 22%,transparent),color-mix(in oklch,var(--wsw3) 10%,transparent) 55%,transparent);filter: blur(10px)}.device{--dw: min(38cqw,88cqh,30rem);position: absolute;left: 50%;top: 50%;width: var(--dw);height: calc(var(--dw) * 1.24);translate: -50% -50%;top: 62%;transform-style: preserve-3d;transform: rotateX(-12deg)}.lid,.deck{position: absolute;left: 0;width: 100%;transform-style: preserve-3d}.lid{bottom: 50%;aspect-ratio: 16 / 10.4;transform-origin: 50% 100%;transform: rotateX(8deg)}.deck{top: 50%;left: 0;width: 100%;height: calc(var(--dw) * 10.4 / 16);transform-origin: 50% 0;transform: rotateX(90deg);border-radius: 3px 3px 12px 12px;background: linear-gradient(var(--shell),var(--shell-2));box-shadow: 0 0 0 1px color-mix(in oklch,var(--ink) 12%,transparent)}.keys{position: absolute;inset: 7% 6% 42%;display: grid;grid-template-rows: repeat(5,1fr);gap: 3.5%;padding: 1.6%;border-radius: 4px;background: var(--well)}.key-row{display: flex;gap: 0.9%;min-height: 0}.kb-key{flex: 1 1 0;min-width: 0;display: grid;place-items: center;border-radius: 2px;overflow: hidden;background: var(--key);color: var(--key-ink);box-shadow: 0 1px 0 var(--key-edge);font: 700 calc(var(--dw) * 0.022)/1 var(--sans);white-space: nowrap}.kb-key i{font-style: normal;display: block;scale: 1 1.9}.kb-word{font-size: calc(var(--dw) * 0.015);font-weight: 600}.kb-key[data-w='1.2']{flex-grow: 1.2}.kb-key[data-w='1.3']{flex-grow: 1.3}.kb-key[data-w='1.4']{flex-grow: 1.4}.kb-key[data-w='1.6']{flex-grow: 1.6}.kb-key[data-w='1.7']{flex-grow: 1.7}.kb-key[data-w='1.9']{flex-grow: 1.9}.kb-key[data-w='2.2']{flex-grow: 2.2}.kb-key[data-w='5.6']{flex-grow: 5.6}.pad{position: absolute;left: 31%;right: 31%;bottom: 7%;height: 29%;border-radius: 6px;background: var(--pad);box-shadow: inset 0 0 0 1px var(--pad-edge),inset 0 2px 5px oklch(0% 0 0 / 0.12)}.lid-front,.lid-back{position: absolute;inset: 0;border-radius: 12px 12px 3px 3px;backface-visibility: hidden}.lid-front{background: #0e1016;padding: 3.2%;box-shadow: inset 0 0 0 2px var(--shell-2),0 30px 60px -30px oklch(15% 0.03 262 / 0.6)}.lid-back{transform: rotateX(180deg);display: grid;place-items: center;background: linear-gradient(160deg,var(--shell),var(--shell-2))}.lid-back span{font: 600 calc(var(--dw) * 0.09)/1 var(--mono);letter-spacing: -0.05em;color: light-dark(color-mix(in oklch,#fff 22%,var(--shell)),color-mix(in oklch,#000 22%,var(--shell)))}.screen{height: 100%;border-radius: 4px;overflow: hidden;background: var(--scr);display: grid;grid-template-rows: auto 1fr;font-size: calc(var(--dw) * 0.028)}.browser-bar{display: flex;align-items: center;gap: 0.45em;padding: 0.7em 0.9em;background: var(--scr-bar)}.browser-bar i{width: 0.8em;height: 0.8em;border-radius: 50%;background: #d6543f}.browser-bar i:nth-child(2){background: #e8b93a}.browser-bar i:nth-child(3){background: #3fae63}.browser-bar span{flex: 1;margin-inline: 0.8em 2.4em;padding: 0.25em 0.8em;border-radius: 99px;background: var(--scr-url);color: var(--scr-dim);font: 500 0.9em/1.2 var(--mono);text-align: center}.browser-page{display: grid;grid-template-columns: auto 1fr;align-items: center;gap: 1.2em;padding: 1.6em}.browser-page img{width: 5.2em;height: 5.2em;border-radius: 28%;object-fit: cover}.snippet{font: 500 1em/1.75 var(--mono);color: var(--scr-ink);white-space: pre}.snippet .tag{color: var(--scr-tag)}.snippet .com{color: var(--scr-dim)}.desk{position: absolute;inset: 0}.obj{position: absolute;width: var(--w);left: var(--x);top: var(--y);rotate: var(--r,0deg);filter: drop-shadow(0 10px 12px oklch(15% 0.02 262 / 0.22))}.obj svg{display: block;width: 100%;height: auto;overflow: visible}.obj-books{--w: 15%;--x: 4%;--y: 50%;--r: -4deg;--x0: 20vw;--y0: -4vh;--r0: 8deg}.obj-paper{--w: 9%;--x: 7%;--y: 4%;--r: -12deg;--x0: 20vw;--y0: 18vh;--r0: 20deg}.obj-lens{--w: 8%;--x: 18%;--y: 12%;--r: 14deg;--x0: 14vw;--y0: 12vh;--r0: -40deg}.obj-cap{--w: 12%;--x: 18%;--y: 72%;--r: -6deg;--x0: 12vw;--y0: -18vh;--r0: 20deg}.obj-pen{--w: 17%;--x: 26%;--y: 92%;--r: -8deg;--x0: 10vw;--y0: -28vh;--r0: 30deg}.obj-mug{--w: 10%;--x: 78%;--y: 58%;--r: 3deg;--x0: -14vw;--y0: -6vh;--r0: -10deg}.obj-note{--w: 9%;--x: 82%;--y: 8%;--r: 8deg;--x0: -16vw;--y0: 18vh;--r0: -30deg}.obj-board{--w: 14%;--x: 70%;--y: 20%;--r: -8deg;--x0: -8vw;--y0: 12vh;--r0: 15deg}.obj-pencil{--w: 16%;--x: 60%;--y: 90%;--r: 12deg;--x0: -2vw;--y0: -26vh;--r0: -30deg}@media (max-width: 40rem){.device{--dw: min(62cqw,88cqh)}.obj-books{--w: 22%;--x: -4%;--y: 60%}.obj-mug{--w: 15%;--x: 86%;--y: 62%}.obj-board{--w: 20%;--x: 76%;--y: 4%}.obj-note,.obj-lens,.obj-paper{--w: 13%}.obj-note{--x: 84%;--y: 32%}.obj-lens{--x: 2%;--y: 30%}.obj-paper{--x: 2%;--y: -2%}.obj-cap{--w: 17%;--x: 10%;--y: 88%}.obj-pen{--w: 24%;--x: 34%;--y: 96%}.obj-pencil{--w: 22%;--x: 66%;--y: 94%}}.statement{padding-block: clamp(4rem,12vw,10rem)}.statement p{max-width: 22ch;margin-inline: auto;text-align: center;font-size: clamp(2rem,1rem + 4.4vw,4.8rem);font-weight: 760;line-height: 1.08;letter-spacing: -0.035em;text-wrap: balance}.say{display: block}.w{display: inline-block}.key{background: linear-gradient(100deg,var(--pwls),var(--wsw3));-webkit-background-clip: text;background-clip: text;color: transparent}.band{background: var(--band);padding-block: var(--section);border-block: 1px solid var(--rule)}.block{padding-block: var(--section)}h2{font-size: var(--step-2);font-weight: 750;letter-spacing: -0.02em}h3{font-size: var(--step-1);font-weight: 700;letter-spacing: -0.01em}.intro{margin-top: 0.75rem;max-width: 40rem;color: var(--ink-2)}.note{font: 500 var(--step--1)/1.4 var(--mono);color: var(--ink-3);margin-top: 0.5rem}.more{margin-top: 1.5rem;font-weight: 600}.more a{display: inline-flex;align-items: center;gap: 0.4rem}.aside{margin-top: 2rem;padding-top: 1.25rem;border-top: 1px solid var(--rule);color: var(--ink-2);font-size: var(--step--1)}.split{display: grid;grid-template-columns: minmax(12rem,1fr) minmax(0,2.2fr);gap: 2rem clamp(2rem,6vw,6rem)}@media (max-width: 46rem){.split{grid-template-columns: minmax(0,1fr)}}.now{list-style: none;display: grid;gap: 1.1rem;counter-reset: now}.now li{position: relative;padding-inline-start: 2.75rem;font-size: var(--step-1);line-height: 1.45;color: var(--ink-2);counter-increment: now}.now li::before{content: counter(now,decimal-leading-zero);position: absolute;inset-inline-start: 0;top: 0.3em;font: 500 var(--step--1)/1 var(--mono);color: var(--ink-3)}.now strong{color: var(--ink);font-weight: 650}@property --n{syntax: '<integer>';inherits: false;initial-value: 0}.stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr));gap: 2rem var(--space);margin-top: clamp(3rem,8vw,6rem);padding-top: 2.5rem;border-top: 1px solid var(--rule)}.stat{display: grid;gap: 0.4rem;align-content: start}.num{--n: var(--to);counter-reset: n var(--n);font-size: clamp(2.8rem,1.6rem + 3.6vw,4.6rem);font-weight: 780;letter-spacing: -0.04em;line-height: 1;font-variant-numeric: tabular-nums}.num::after{content: counter(n);background: linear-gradient(100deg,var(--pwls),var(--wsw3));-webkit-background-clip: text;background-clip: text;color: transparent}.stat-label{color: var(--ink-2);font-size: var(--step--1);max-width: 18rem}.code{padding-block: var(--section)}.code-head{margin-bottom: 2rem}.code-hint{display: none}.repos{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,24rem),1fr));gap: var(--space);width: min(100% - 2 * var(--space),var(--width));margin-inline: auto}.repo{--code-bg: light-dark(oklch(98.5% 0.004 260),oklch(17% 0.01 265));position: relative;display: flex;flex-direction: column;overflow: hidden;border: 1px solid var(--rule);border-radius: 18px;background: var(--card);box-shadow: 0 1px 0 var(--rule),0 30px 60px -40px oklch(20% 0.05 262 / 0.35);transition: border-color 0.2s,translate 0.25s,box-shadow 0.25s}.repo[hidden]{display: none}.repo:hover,.repo:focus-within{border-color: var(--rule-2);box-shadow: 0 1px 0 var(--rule),0 34px 64px -34px oklch(20% 0.06 262 / 0.45)}@media (prefers-reduced-motion: no-preference){.repo:hover{translate: 0 -4px}}.repo-bar{display: flex;align-items: center;gap: 0.4rem;padding: 0.75rem 1rem 0;background: var(--code-bg)}.repo-bar i{width: 0.7rem;height: 0.7rem;border-radius: 50%;background: #d6543f}.repo-bar i:nth-child(2){background: #e8b93a}.repo-bar i:nth-child(3){background: #3fae63}.repo-bar span{margin-inline-start: auto;font: 500 0.75rem/1 var(--mono);color: var(--ink-3)}.repo-path{padding: 0.6rem 1.1rem 0.5rem;background: var(--code-bg);border-bottom: 1px solid var(--rule);font: 500 0.78rem/1.3 var(--mono);color: var(--ink-3);overflow-wrap: anywhere}.repo-path b{color: var(--ink);font-weight: 600}.repo-code{margin: 0;padding: 1rem 1.1rem;background: var(--code-bg);overflow: auto;flex: none;font: 450 0.76rem/1.65 var(--mono);color: var(--ink);tab-size: 4;mask-image: linear-gradient(90deg,#000 88%,transparent)}.repo-code .tk-kw{color: light-dark(oklch(45% 0.17 300),oklch(78% 0.13 300));font-weight: 600}.repo-code .tk-str{color: light-dark(oklch(48% 0.13 150),oklch(80% 0.13 150))}.repo-code .tk-com{color: var(--ink-3);font-style: italic}.repo-code .tk-num{color: light-dark(oklch(52% 0.15 45),oklch(80% 0.12 60))}.repo-code .tk-key{color: light-dark(oklch(47% 0.16 262),oklch(78% 0.12 262))}.repo-body{display: flex;flex-direction: column;gap: 0.6rem;padding: 1.2rem 1.25rem 1.35rem;flex: 1}.repo h3{font: 650 var(--step-0)/1.3 var(--mono);letter-spacing: -0.02em;overflow-wrap: anywhere}.repo h3 a{color: var(--ink);text-decoration: none}.repo h3 a::after{content: '';position: absolute;inset: 0;border-radius: 18px}.repo a:focus-visible{outline: none}.repo:has(a:focus-visible){outline: 2px solid var(--focus);outline-offset: 3px}.repo:hover h3 a{color: var(--accent)}.repo-body>p{color: var(--ink-2);font-size: var(--step--1)}.lang-bar{display: block;width: 100%;height: 6px;margin-top: auto;border-radius: 3px;overflow: hidden}.lang-legend{display: flex;flex-wrap: wrap;gap: 0.2rem 0.9rem;font-size: 0.78rem;color: var(--ink-2)}.lang-legend li{display: inline-flex;align-items: center;gap: 0.35rem}.lang-legend svg{width: 0.55rem;height: 0.55rem}.lang-legend span{color: var(--ink-3);font-variant-numeric: tabular-nums}.repo-more{justify-content: center;gap: 1rem;padding: 2rem;background: transparent;border-style: dashed;box-shadow: none}.repo-more p{color: var(--ink-2)}.more-num{font-size: clamp(3rem,2rem + 4vw,5rem);font-weight: 780;letter-spacing: -0.04em;line-height: 1;background: linear-gradient(100deg,var(--pwls),var(--wsw3));-webkit-background-clip: text;background-clip: text;color: transparent !important}.repo-more a{display: inline-flex;align-items: center;gap: 0.4rem;font-weight: 700}.repo-more a::after{content: '';position: absolute;inset: 0}.sites{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,20rem),1fr));gap: var(--space);margin-top: 2rem}.site{position: relative;display: flex;flex-direction: column;overflow: hidden;border: 1px solid var(--rule);border-radius: 18px;background: var(--card);box-shadow: 0 1px 0 var(--rule),0 30px 60px -40px oklch(20% 0.05 262 / 0.35);transition: border-color 0.2s,translate 0.25s,box-shadow 0.25s}.site:hover{border-color: var(--rule-2);box-shadow: 0 1px 0 var(--rule),0 34px 64px -34px oklch(20% 0.06 262 / 0.45)}@media (prefers-reduced-motion: no-preference){.site:hover{translate: 0 -4px}}.site-bar{display: flex;align-items: center;gap: 0.4rem;padding: 0.6rem 0.8rem;background: var(--band);border-bottom: 1px solid var(--rule)}.site-bar i{width: 0.65rem;height: 0.65rem;border-radius: 50%;background: #d6543f;flex: none}.site-bar i:nth-child(2){background: #e8b93a}.site-bar i:nth-child(3){background: #3fae63}.site-bar span{flex: 1;min-width: 0;margin-inline: 0.6rem 1.8rem;padding: 0.2rem 0.7rem;border-radius: 99px;background: var(--card);font: 500 0.72rem/1.3 var(--mono);color: var(--ink-3);text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.site picture{display: block;aspect-ratio: 8 / 5;overflow: hidden;border-bottom: 1px solid var(--rule)}.site img{width: 100%;height: 100%;object-fit: cover;object-position: top;transition: scale 0.5s}@media (prefers-reduced-motion: no-preference){.site:hover img{scale: 1.03}}.site-body{display: flex;flex-direction: column;gap: 0.55rem;padding: 1.1rem 1.25rem 1.3rem;flex: 1}.site h3{font-size: var(--step-0);font-weight: 750}.site h3 a{color: var(--ink);text-decoration: none}.site h3 a::after{content: '';position: absolute;inset: 0;border-radius: 18px}.site a:focus-visible{outline: none}.site:has(a:focus-visible){outline: 2px solid var(--focus);outline-offset: 3px}.site:hover h3 a{color: var(--accent)}.site-body>p:not(.chips){color: var(--ink-2);font-size: var(--step--1)}.site-body>.site-host{margin-top: auto;display: inline-flex;align-items: center;gap: 0.35rem;font: 500 0.78rem/1.3 var(--mono);color: var(--accent)}.site-more{grid-column: 1 / -1;flex-direction: row;flex-wrap: wrap;align-items: baseline;gap: 0.4rem 1rem;padding: 1.25rem 1.5rem;background: transparent;border-style: dashed;box-shadow: none}.site-more:hover{translate: none;border-color: var(--rule);box-shadow: none}.site-more h3{font-size: var(--step-1)}.site-more p{color: var(--ink-2);font-size: var(--step--1)}.research-grid{display: grid;grid-template-columns: minmax(0,0.8fr) minmax(0,1.6fr);gap: 2.5rem clamp(2rem,6vw,6rem)}.research-head{position: sticky;top: calc(var(--header) + 2rem);align-self: start}@media (max-width: 56rem){.research-grid{grid-template-columns: minmax(0,1fr)}.research-head{position: static}}.lab{display: inline-flex;margin-top: 1.25rem;padding: 0.45rem 0.8rem;border-radius: 999px;border: 1px solid var(--rule-2);font: 500 0.8rem/1.3 var(--mono);color: var(--ink-2)}.research-body>h3{font: 500 var(--step--1)/1 var(--mono);color: var(--ink-3);margin-bottom: 1.1rem}.research-body>h3:not(:first-child){margin-top: clamp(3rem,6vw,4.5rem)}.areas{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,14rem),1fr));gap: 0.75rem}.area{padding: 1.2rem 1.25rem 1.3rem;border: 1px solid var(--rule);border-radius: 16px;background: var(--card)}.area-icon{width: 2.4rem;height: 2.4rem;padding: 0.45rem;border-radius: 12px;color: var(--accent);background: color-mix(in oklch,var(--accent) 10%,transparent)}.area h4,.area h3{margin-top: 0.9rem;font-size: var(--step-0);font-weight: 700;letter-spacing: 0}.services{margin-top: 2rem;grid-template-columns: repeat(2,minmax(0,1fr))}@media (min-width: 64rem){.services{grid-template-columns: repeat(4,minmax(0,1fr))}}@media (max-width: 36rem){.services{grid-template-columns: minmax(0,1fr)}}.page-head{padding-block: clamp(3.5rem,10vw,7rem) var(--section)}.page-head h1{max-width: 20ch;font-size: var(--step-4);font-weight: 750;letter-spacing: -0.035em;line-height: 1}.page-head .lead{margin-top: 1.5rem}.block.split>.lead{font-size: var(--step-1)}.area p{margin-top: 0.3rem;font-size: var(--step--1);color: var(--ink-2)}.timeline{padding: 1.25rem 1.25rem 1rem;border: 1px solid var(--rule);border-radius: 16px;background: var(--card)}.timeline-axis{display: grid;grid-template-columns: repeat(5,1fr);font: 500 0.75rem/1 var(--mono);color: var(--ink-3);padding-bottom: 0.6rem;border-bottom: 1px solid var(--rule)}.timeline-axis span{padding-inline-start: 0.3rem;border-inline-start: 1px solid var(--rule)}.projects{display: grid}.project{padding-block: 1rem;border-bottom: 1px dashed var(--rule)}.project:last-child{border-bottom: 0}.project-head{display: flex;flex-wrap: wrap;align-items: center;gap: 0.35rem 0.7rem}.project h4{font-size: var(--step-0);font-weight: 750}.project-meta{font: 500 0.75rem/1.3 var(--mono);color: var(--ink-3)}.project>p{margin-top: 0.25rem;font-size: var(--step--1);color: var(--ink-2)}.track{display: block;width: 100%;height: 12px;margin-top: 0.7rem;overflow: visible}.track-bg{fill: var(--rule)}.track-bar{fill: var(--rule-2);transform-box: fill-box;transform-origin: 0 50%}.is-active .track-bar{fill: var(--pwls)}.track-today{stroke: var(--ink);stroke-width: 1.5;stroke-dasharray: 2 2;vector-effect: non-scaling-stroke}.timeline-note{display: flex;align-items: center;justify-content: flex-end;gap: 0.4rem;margin-top: 0.4rem;font: 500 0.72rem/1 var(--mono);color: var(--ink-3)}.timeline-note svg{width: 4px;height: 0.9rem;overflow: visible}.chip{display: inline-flex;align-items: center;padding: 0.2rem 0.55rem;border-radius: 999px;border: 1px solid var(--rule-2);font: 500 0.7rem/1.2 var(--mono);color: var(--ink-2)}.chip-on{border-color: transparent;color: var(--on-accent);background: var(--accent)}.chip-area{border-style: dashed}.pubs{display: grid;gap: 1.75rem}.pub-year{display: grid;grid-template-columns: 5rem minmax(0,1fr);gap: 1rem}@media (max-width: 36rem){.pub-year{grid-template-columns: minmax(0,1fr);gap: 0.25rem}}.year{font-size: var(--step-2);font-weight: 780;letter-spacing: -0.03em;line-height: 1;color: var(--ink-3);position: sticky;top: calc(var(--header) + 1.5rem);align-self: start}.pub-year ol{display: grid}.pub{display: grid;gap: 0.35rem;padding: 0.95rem 0;border-bottom: 1px solid var(--rule)}.pub:first-child{padding-top: 0.1rem}.chips{display: flex;flex-wrap: wrap;gap: 0.35rem}.pub a{color: var(--ink);font-weight: 650;text-decoration-color: var(--rule-2);line-height: 1.35}.pub a:hover{color: var(--accent);text-decoration-color: currentColor}.pub-venue{font-size: 0.8rem;color: var(--ink-3);overflow-wrap: anywhere}.contact{text-align: center;display: grid;justify-items: center}.contact .intro{margin-inline: auto}.email{margin-top: 1.5rem;font-size: clamp(1.4rem,0.4rem + 4.2vw,4.4rem);font-weight: 780;letter-spacing: -0.04em;line-height: 1.05;overflow-wrap: anywhere}.email a{color: var(--ink);text-decoration: none;background: linear-gradient(100deg,var(--pwls),var(--wsw3)) no-repeat 0 100% / 100% 0.08em;padding-bottom: 0.08em}.email a:hover{color: var(--accent)}.contact-side{display: grid;justify-items: center;gap: 1.25rem;margin-top: 3rem}address{font-style: normal;color: var(--ink-2);font-size: var(--step--1);line-height: 1.6}.profiles{display: flex;flex-wrap: wrap;justify-content: center;gap: 0.5rem}.profiles a{display: inline-flex;align-items: center;min-height: 2.75rem;padding: 0.5rem 0.9rem;border: 1px solid var(--rule-2);border-radius: 999px;color: var(--ink);text-decoration: none;font-size: var(--step--1);font-weight: 600}.profiles a:hover{border-color: var(--ink);background: var(--card)}.foot{border-top: 1px solid var(--rule);padding-block: 2rem 2.5rem;font-size: var(--step--1);color: var(--ink-3)}.foot-inner{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.5rem 2rem}.missing{padding-block: clamp(4rem,12vw,9rem);min-height: 60vh}.missing h1{font-size: var(--step-4);font-weight: 750;letter-spacing: -0.035em;line-height: 1}.missing-en{margin-top: 4rem;padding-top: 1.5rem;border-top: 1px solid var(--rule);color: var(--ink-2)}.missing-en h2{font-size: var(--step-1);margin-bottom: 0.4rem;color: var(--ink)}@media (prefers-contrast: more){:root{--rule: var(--rule-2);--ink-2: var(--ink);--ink-3: light-dark(oklch(38% 0.01 270),oklch(82% 0.008 90))}}@media (forced-colors: active){.course-link,.repo,.site,.button,.profiles a,.mark{border: 1px solid CanvasText}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition: none !important;animation: none !important}@view-transition{navigation: none}}@media print{.top,.skip,.actions,.foot,.portrait{display: none}.band{background: none;border: 0}body{font-size: 11pt}a{color: inherit}.pubs a::after,.repo h3 a::after,.site h3 a::after{content: none}}@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){.top::after{content: '';position: absolute;inset: auto 0 -1px;height: 2px;transform-origin: 0 50%;background: linear-gradient(90deg,var(--pwls),var(--wsw3));animation: grow linear both;animation-timeline: scroll(root)}@keyframes grow{from{scale: 0 1}}.hero{view-timeline: --hero block}.stage{position: sticky;top: var(--header);height: calc(100svh - var(--header))}.scene{height: auto;min-height: 0}.hero-title{animation: title-in linear both;animation-timeline: --hero;animation-range: contain 0% contain 28%}@keyframes title-in{from{scale: var(--title-from)}}.device{animation: device-in linear both,device-turn linear both;animation-timeline: --hero,--hero;animation-range: contain 0% contain 34%,contain 0% contain 48%}@keyframes device-in{from{translate: -50% calc(-50% - 20cqh);scale: 0.86}}@keyframes device-turn{from{transform: rotateX(-34deg) rotateY(-24deg)}}.cue{display: flex;animation: cue-out linear both;animation-timeline: --hero;animation-range: contain 0% contain 8%}@keyframes cue-out{to{opacity: 0;translate: -50% 1rem}}.lid{animation: lid-open linear both;animation-timeline: --hero;animation-range: contain 24% contain 56%}@keyframes lid-open{from{transform: rotateX(-89deg)}55%{transform: rotateX(-24deg)}}.keys,.pad{animation: kb-in linear both;animation-timeline: --hero;animation-range: contain 24% contain 56%}@keyframes kb-in{from,8%{opacity: 0}14%{opacity: 1}}.screen{animation: screen-on linear both;animation-timeline: --hero;animation-range: contain 40% contain 58%}@keyframes screen-on{from{opacity: 0;filter: brightness(2.2)}}.snippet{animation: type steps(24,end) both;animation-timeline: --hero;animation-range: contain 56% contain 76%}@keyframes type{from{clip-path: inset(0 100% 0 0)}}.glow{animation: glow-in linear both;animation-timeline: --hero;animation-range: contain 36% contain 64%}@keyframes glow-in{from{opacity: 0;scale: 0.4}}.obj{animation: scatter linear both;animation-timeline: --hero;animation-range: contain 46% contain 80%}.obj-books,.obj-mug{animation-range: contain 44% contain 70%}.obj-board,.obj-cap{animation-range: contain 50% contain 76%}.obj-pen,.obj-pencil,.obj-note{animation-range: contain 56% contain 84%}@keyframes scatter{from{translate: var(--x0) var(--y0);rotate: var(--r0);scale: 0.3;opacity: 0}25%{opacity: 1}}.obj svg{animation: drift linear both;animation-timeline: --hero;animation-range: exit 0% exit 100%}@keyframes drift{to{translate: 0 calc(var(--d,1) * -9svh)}}.obj-books,.obj-pen,.obj-mug{--d: 2.2}.obj-board,.obj-cap,.obj-pencil{--d: 1.4}.hero{height: 240svh}.hero-foot{animation: rise linear both;animation-timeline: view();animation-range: entry 0% cover 30%}main>section h2{animation: title-up linear both;animation-timeline: view();animation-range: entry 10% cover 25%}@keyframes title-up{from{clip-path: inset(0 0 100% 0);translate: 0 0.6em}}.code h2,.research h2{animation-range: entry 10% entry 90%}.statement{height: 260svh;padding: 0;view-timeline: --say block}.statement p{position: sticky;top: var(--header);min-height: calc(100svh - var(--header));display: grid;place-content: center;pointer-events: none;animation: say-grow linear both;animation-timeline: --say;animation-range: contain 0% contain 100%}@keyframes say-grow{from{scale: 0.86}}.w{animation: word-in linear both;animation-timeline: --say;animation-range: cover calc(12% + var(--i) * var(--step)) cover calc(20% + var(--i) * var(--step))}@keyframes word-in{from{opacity: 0;translate: 0 0.5em;scale: 0.7;filter: blur(10px)}}.key{background-size: 220% 100%;animation-name: word-in,sheen;animation-range: cover calc(12% + var(--i) * var(--step)) cover calc(20% + var(--i) * var(--step)),contain 0% contain 100%;animation-timeline: --say,--say;animation-timing-function: linear,linear;animation-fill-mode: both,both}@keyframes sheen{from{background-position: 100% 0}to{background-position: 0 0}}.rise,.area,.project,.pub,.site{animation: rise linear both;animation-timeline: view();animation-range: entry 5% cover 28%}@keyframes rise{from{opacity: 0;translate: 0 2.5rem}}.area:nth-child(3n + 2){animation-range: entry 12% cover 32%}.area:nth-child(3n){animation-range: entry 20% cover 36%}.area .area-icon{animation: icon-pop linear both;animation-timeline: view();animation-range: entry 30% cover 40%}@keyframes icon-pop{from{scale: 0.4;rotate: -25deg}}.track-bar{animation: bar-grow linear both;animation-timeline: view();animation-range: entry 40% cover 45%}@keyframes bar-grow{from{transform: scaleX(0)}}.num{animation: count linear both;animation-timeline: view();animation-range: entry 20% cover 45%}@keyframes count{from{--n: var(--from)}}.email{animation: email-in linear both;animation-timeline: view();animation-range: entry 0% cover 40%}@keyframes email-in{from{opacity: 0;scale: 0.7}}@media (min-width: 52rem){.code{height: 360svh;padding: 0;view-timeline: --code block}.code-stage{position: sticky;top: var(--header);height: calc(100svh - var(--header));display: flex;flex-direction: column;justify-content: center;overflow: hidden}.code-hint{display: block}.code .repos{display: flex;width: max-content;margin: 0;gap: var(--space);padding-inline: max(var(--space),(100vw - var(--width)) / 2);animation: slide linear both;animation-timeline: --code;animation-range: contain 5% contain 95%}.code .repo{width: 25rem}@keyframes slide{to{translate: calc(-100% + 100vw) 0}}}}}.stat-0{--to: 2009;--from: 2009}.stat-1{--to: 199;--from: 0}.stat-2{--to: 142;--from: 0}.stat-3{--to: 56;--from: 0}.statement p{--step: 2.00%}.w:nth-child(1){--i: 0}.w:nth-child(2){--i: 1}.w:nth-child(3){--i: 2}.w:nth-child(4){--i: 3}.w:nth-child(5){--i: 4}.w:nth-child(6){--i: 5}.w:nth-child(7){--i: 6}.w:nth-child(8){--i: 7}.w:nth-child(9){--i: 8}.w:nth-child(10){--i: 9}.w:nth-child(11){--i: 10}.w:nth-child(12){--i: 11}.w:nth-child(13){--i: 12}.w:nth-child(14){--i: 13}.w:nth-child(15){--i: 14}.w:nth-child(16){--i: 15}.w:nth-child(17){--i: 16}.w:nth-child(18){--i: 17}.w:nth-child(19){--i: 18}.w:nth-child(20){--i: 19}.w:nth-child(21){--i: 20}.w:nth-child(22){--i: 21}.w:nth-child(23){--i: 22}.w:nth-child(24){--i: 23}