:root{--color-neon-magenta: rgb(255 61 176);--color-neon-cyan: rgb(34 226 255);--color-neon-violet: rgb(167 139 250);--color-bg: rgb(10 9 18);--color-fg: rgb(226 232 240);--color-link: rgb(96 165 250);--color-link-visited: rgb(196 181 253);--color-link-hover: var(--color-neon-cyan);--color-accent: var(--color-neon-cyan);--color-th: var(--color-neon-cyan);--color-code: rgb(125 249 255);--color-code-inline-fg: rgb(126 190 205);--color-code-inline-bg: rgb(26 24 42);--color-code-inline-border: rgb(46 42 68);--color-surface: rgb(18 16 30);--color-surface-2: rgb(24 21 38);--color-row: rgb(19 17 30);--color-row-alt: rgb(14 12 24);--color-postage-bg: rgb(16 14 26);--color-comment-bg: rgb(13 11 22);--color-comment-border: rgb(120 30 90);--color-border-header: var(--color-neon-magenta);--color-border-footer: rgb(60 55 88);--color-border-column: rgb(48 44 74);--color-mark-bg: rgb(30 12 40);--color-mark-fg: rgb(255 122 198);--color-special-mark-bg: rgb(24 20 38);--color-special-i: rgb(203 213 225);--font-mono: 'Fantasque Sans Mono', ui-monospace, monospace;--maxw: 1080px;--header-h: 3.25rem;--gutter: clamp(var(--space-4), 32.5vw - 240px, 20vw);--radius-1: 0.375rem;--radius-2: 0.625rem;--radius-3: 1rem;--shadow-1: 0 1px 2px rgb(0 0 0 / 40%);--shadow-2: 0 10px 30px -12px rgb(0 0 0 / 70%);--glow-magenta: 0 0 24px -4px rgb(255 61 176 / 45%);--glow-cyan: 0 0 24px -4px rgb(34 226 255 / 40%);--space-1: 0.25rem;--space-2: 0.5rem;--space-3: 0.875rem;--space-4: 1.25rem;--space-5: 2rem;--space-6: 3rem;--step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);--step-2: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);--step-3: clamp(1.8rem, 1.4rem + 2.2vw, 2.9rem);--step-4: clamp(2.2rem, 1.6rem + 3.4vw, 4rem);--step-5: clamp(2.6rem, 1.5rem + 6vw, 6rem);--step-intro: clamp(2.1rem, 1.1rem + 4.2vw, 5rem)}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;margin:0}img,svg,video,canvas{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}body{background-color:var(--color-bg);color:var(--color-fg);font:400 var(--step-0)/1.55 var(--font-mono);font-kerning:normal;overflow-wrap:break-word}::selection{background-color:var(--color-accent);color:var(--color-bg)}p,ul,ol,dl,blockquote,pre,figure{margin-block:0 var(--space-3)}ul,ol{padding-inline-start:var(--space-5)}li{margin-block:var(--space-1)}figure{margin-inline:0}a{color:var(--color-link);font-weight:700;text-decoration:none;transition:color 150ms ease}a:visited{color:var(--color-link-visited)}a:hover{color:var(--color-link-hover)}button.link-button{display:inline;padding:0;border:0;background:none;color:var(--color-link);font-weight:700;text-align:start;text-decoration:none;cursor:pointer;transition:color 150ms ease}button.link-button:hover{color:var(--color-link-hover)}.gh-icon{display:inline-block;vertical-align:middle;margin-inline-end:.3em}img.emoji{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.15em}mark{padding:.05em 0;border-radius:3px;background-color:var(--color-mark-bg);color:var(--color-mark-fg)}blockquote{margin-inline:0;padding-block:var(--space-2);padding-inline:var(--space-4);border-inline-start:3px solid var(--color-border-footer);font-style:italic}hr{margin-block:var(--space-5);border:0;border-block-start:1px solid var(--color-border-footer)}@font-face{font-family:"Fantasque Sans Mono";src:url("/assets/font/FantasqueSansMono-Regular.woff2") format("woff2"),url("/assets/font/FantasqueSansMono-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}h1,h2,h3,h4,h5,h6{font-weight:400;overflow-wrap:break-word;text-wrap:balance}h1{margin-block:var(--space-6) var(--space-4);font-size:var(--step-4);line-height:1.05}h2{margin-block:var(--space-5) var(--space-3);font-size:var(--step-3);line-height:1.1}h3{margin-block:var(--space-5) var(--space-3);color:var(--color-accent);font-size:var(--step-2);line-height:1.15}h4{margin-block:var(--space-4) var(--space-2);font-size:var(--step-1);line-height:1.25}h5,h6{margin-block:var(--space-4) var(--space-2);font-size:var(--step-0);line-height:1.4}:is(h1,h2,h3,h4,h5,h6):first-child{margin-block-start:0}small{font-size:.875em}:not(pre)>code{padding:.1em .4em;border:1px solid var(--color-code-inline-border);border-radius:var(--radius-1);background-color:var(--color-code-inline-bg);color:var(--color-code-inline-fg);font-family:var(--font-mono);font-size:.9em;overflow-wrap:break-word}html{scroll-padding-block-start:calc(var(--header-h) + var(--space-3))}#wrapper{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--space-3)}.skip-link{position:fixed;z-index:20;top:var(--space-2);left:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-1);background-color:var(--color-surface-2);color:var(--color-link);text-decoration:none;transform:translateY(-200%)}.skip-link:focus-visible{transform:none}.blog-header{position:sticky;z-index:10;top:0;border-block-end:1px solid color-mix(in srgb, var(--color-border-header) 40%, transparent);background-color:color-mix(in srgb, var(--color-bg) 88%, transparent)}@supports(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.blog-header{background-color:color-mix(in srgb, var(--color-bg) 72%, transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}}.header-inner{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;justify-content:space-between;min-height:var(--header-h);padding-block:var(--space-2);padding-inline:var(--gutter)}.site-title{color:var(--color-neon-cyan);font-weight:400;font-size:var(--step-1);letter-spacing:.08em;line-height:1.1;white-space:nowrap;text-decoration:none;text-shadow:0 0 6px color-mix(in srgb, var(--color-neon-cyan) 55%, transparent),0 0 22px color-mix(in srgb, var(--color-neon-magenta) 35%, transparent)}.site-title:visited{color:var(--color-neon-cyan)}.site-title:hover{color:var(--color-fg)}.site-nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center}.site-nav a{position:relative;color:var(--color-fg);font-size:var(--step-0);font-weight:400;white-space:nowrap;text-decoration:none}.site-nav a::after{content:"";position:absolute;inset-inline:0;bottom:-0.28em;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--color-neon-magenta), var(--color-neon-cyan));transform:scaleX(0);transform-origin:left;transition:transform 180ms ease}.site-nav a:visited{color:var(--color-fg)}.site-nav a:hover,.site-nav a:focus-visible{color:var(--color-neon-cyan)}.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}.lang-switch{display:inline-flex;border:1px solid var(--color-border-column);border-radius:2px;line-height:0;opacity:.85;transition:opacity 180ms ease,border-color 180ms ease,box-shadow 180ms ease}.lang-switch::after{content:none}.lang-switch:hover,.lang-switch:focus-visible{border-color:var(--color-neon-cyan);box-shadow:var(--glow-cyan);opacity:1}.lang-flag{display:block}.blog-footer{margin-block-start:var(--space-6);border-block-start:1px solid var(--color-border-footer);background-color:color-mix(in srgb, var(--color-surface) 60%, var(--color-bg))}.footer-inner{display:grid;gap:var(--space-3) var(--space-4);align-items:center;padding-block:var(--space-4);padding-inline:var(--gutter)}@media(width >= 768px){.footer-inner{grid-template-columns:1fr auto}}.footer-brand{display:flex;align-items:center;gap:var(--space-3)}.footer-brand-text{display:flex;flex-direction:column;gap:var(--space-1)}.footer-avatar{display:inline-flex;line-height:0}.footer-avatar img{border-radius:50%;border:1px solid var(--color-border-footer)}.nickname{font-size:var(--step-1);line-height:1.2}.footer-contact{color:color-mix(in srgb, var(--color-fg) 65%, transparent);font-size:var(--step-0)}.footer-icons{display:flex;gap:var(--space-3);align-items:center}.footer-icons a:any-link{color:color-mix(in srgb, var(--color-fg) 75%, transparent);line-height:0}.footer-icons svg{fill:currentcolor;margin-inline-end:0}.footer-icons a:hover{color:var(--color-neon-cyan)}.rss-link:hover{color:var(--color-neon-magenta)}.intro{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;min-height:clamp(17rem,52svh,32rem);margin-block-end:var(--space-4);text-align:center}#webgl-intro{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}.intro::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient ellipse 68% 62% at 50% 52%,color-mix(in srgb, var(--color-bg) 82%, transparent),rgba(0,0,0,0) 72%,linear-gradient 180deg,color-mix(in srgb, var(--color-bg) 60%, transparent) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,var(--color-bg) 100%}.intro-content{z-index:1;max-width:min(72ch,100%);padding:var(--space-4) var(--space-3)}.intro-title{margin-block:0 var(--space-2);color:var(--color-neon-magenta);font-size:var(--step-intro);letter-spacing:-0.02em;line-height:1.05;overflow-wrap:normal;text-wrap:balance}.intro-title-line{display:block}@supports(background-clip: text) or (-webkit-background-clip: text){.intro-title{background:linear-gradient(100deg, var(--color-neon-magenta) 10%, var(--color-neon-cyan) 90%);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0)}}.intro-tagline{max-width:40ch;margin-block-end:var(--space-3);margin-inline:auto;color:var(--color-fg);font-size:var(--step-1);line-height:1.4;text-wrap:balance}.intro-actions{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);justify-content:center}.intro.no-webgl .no-webgl-fallback{position:absolute;inset:0;z-index:-1;display:block}.intro.no-webgl .no-webgl-fallback img{width:100%;height:100%;object-fit:cover;object-position:50% 64%}.intro.no-webgl #webgl-intro{display:none}.section-head{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline;justify-content:space-between;margin-block-end:var(--space-3);padding-block-end:var(--space-2);border-block-end:1px solid color-mix(in srgb, var(--color-border-column) 70%, transparent)}.section-head h2{margin-block:0;font-size:var(--step-2)}.section-more{font-size:var(--step-0);white-space:nowrap}.home{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:var(--space-3);margin-block-end:var(--space-5)}.home-column{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-3) var(--space-4) var(--space-4);border:1px solid var(--color-border-column);border-radius:var(--radius-2);background-color:var(--color-surface);transition:transform 200ms cubic-bezier(0.22, 1, 0.36, 1),border-color 200ms ease,box-shadow 200ms ease}@media(width >= 640px){.home-column:first-child{grid-column:span 2}}.home-column:hover,.home-column:focus-within{border-color:color-mix(in srgb, var(--color-neon-cyan) 55%, var(--color-border-column));box-shadow:var(--glow-cyan),var(--shadow-2);transform:translateY(-3px)}@media(prefers-reduced-motion: reduce){.home-column:hover,.home-column:focus-within{transform:none}}.home-column-title{margin-block:0;color:var(--color-fg);font-size:var(--step-1);line-height:1.25}.home-column-title a{color:inherit;text-decoration-color:color-mix(in oklab, var(--color-neon-cyan) 45%, transparent)}.home-column-title a:hover{color:var(--color-neon-cyan)}.home-column-excerpt{color:color-mix(in srgb, var(--color-fg) 72%, transparent);font-size:var(--step-0)}.date{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-block:0;color:color-mix(in srgb, var(--color-fg) 68%, transparent);font-size:var(--step-0);letter-spacing:.04em}.post-tag{padding:.1em .55em;border:1px solid color-mix(in srgb, var(--color-neon-magenta) 45%, transparent);border-radius:999px;color:var(--color-neon-magenta);font-size:.85em;text-decoration:none}.post-tag:visited{color:var(--color-neon-magenta)}.post-tag:hover{border-color:var(--color-neon-magenta);color:var(--color-fg)}article #wrapper{max-width:none;padding-inline:var(--gutter)}.postage-title{margin-block:var(--space-5) var(--space-4);text-align:center}.postage-title h1{margin-block:0}.postage-title time{display:block;color:color-mix(in srgb, var(--color-fg) 65%, transparent);font-size:var(--step-0)}#postage-content{margin-block-end:var(--space-3);padding:var(--space-4);border:1px solid color-mix(in srgb, var(--color-border-column) 55%, transparent);border-radius:var(--radius-2);background-color:var(--color-postage-bg)}#comments-list{margin-block-end:var(--space-3)}.comment{margin-block:var(--space-3) var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--color-comment-border);border-radius:var(--radius-1);background-color:var(--color-comment-bg)}.comment::after{content:"";display:block;clear:both}.comment img{display:inline-block;margin-inline-end:var(--space-2);border-radius:4px;vertical-align:top}.comment em{color:color-mix(in srgb, var(--color-fg) 60%, transparent);font-size:.875em}table{display:block;max-width:100%;margin-block-end:var(--space-4);overflow-x:auto;border-collapse:collapse}tr{background-color:var(--color-row)}tr:nth-child(even){background-color:var(--color-row-alt)}th,td{padding:var(--space-2) var(--space-3);border:1px solid color-mix(in srgb, var(--color-fg) 45%, transparent);text-align:left}th{color:var(--color-th)}.code{margin:0;color:var(--color-code);font-family:var(--font-mono);white-space:pre-wrap}.button{display:inline-flex;gap:var(--space-2);align-items:center;padding:var(--space-2) var(--space-4);border:1px solid color-mix(in srgb, var(--color-fg) 30%, transparent);border-radius:999px;color:var(--color-fg);font-size:var(--step-0);text-decoration:none;transition:border-color 180ms ease,box-shadow 180ms ease,color 180ms ease,background-color 180ms ease}.button:visited{color:var(--color-fg)}.button:hover{border-color:var(--color-neon-cyan);color:var(--color-neon-cyan);box-shadow:var(--glow-cyan)}.button-primary{border-color:color-mix(in srgb, var(--color-neon-magenta) 70%, transparent);background-color:color-mix(in srgb, var(--color-neon-magenta) 14%, transparent);color:var(--color-neon-cyan)}.button-primary:visited{color:var(--color-neon-cyan)}.button-primary:hover{border-color:var(--color-neon-magenta);background-color:color-mix(in srgb, var(--color-neon-magenta) 22%, transparent);color:var(--color-fg);box-shadow:var(--glow-magenta)}.portfolio-cta{display:flex;justify-content:center;margin-block:var(--space-4)}mark{font-family:var(--font-mono)}.portfolio-projects{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-block-end:var(--space-5)}.project-card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--space-4);border:1px solid var(--color-border-column);border-radius:var(--radius-2);background-color:var(--color-surface);transition:transform 220ms cubic-bezier(0.22, 1, 0.36, 1),box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),border-color 220ms ease}.project-card:hover,.project-card:focus-within{border-color:color-mix(in srgb, var(--color-accent) 55%, var(--color-border-column));box-shadow:var(--glow-cyan),var(--shadow-2);transform:translateY(-4px)}@media(prefers-reduced-motion: reduce){.project-card:hover,.project-card:focus-within{transform:none}}.project-card>:is(h1,h2):first-child{margin-block:0 var(--space-1);font-size:var(--step-2)}.project-card p{margin-block:0}.portfolio-nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;justify-content:center;margin-block:var(--space-4);padding-block-end:var(--space-3);border-block-end:1px solid color-mix(in srgb, var(--color-border-column) 60%, transparent)}.portfolio-nav a{font-size:var(--step-1);text-decoration-color:rgba(0,0,0,0)}.portfolio-nav a:hover{text-decoration-color:currentcolor}.media{margin:0;margin-block-end:var(--space-4)}.media img,.media video{display:block;width:auto;max-width:100%;height:auto;max-height:55svh;margin-inline:auto;border-radius:var(--radius-1)}.media figcaption{margin-block-start:var(--space-2);color:color-mix(in srgb, var(--color-fg) 65%, transparent);font-size:.875em;text-align:center}.media-embed{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:var(--radius-1)}.media-embed iframe{display:block;width:100%;height:100%;border:0}.figure-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));gap:var(--space-3);align-items:start;margin-block-end:var(--space-4)}.figure-row>.media{margin-block-end:0}.figure-row>.media video.media-video{width:100%}.project-card>:is(.media,.figure-row){margin-block-end:0}#post-list{padding-inline-start:0;list-style:none}.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(0.22, 1, 0.36, 1),transform .6s cubic-bezier(0.22, 1, 0.36, 1)}.js [data-reveal].is-visible{opacity:1;transform:none}@media(prefers-reduced-motion: reduce){.js [data-reveal],.js [data-reveal].is-visible{opacity:1;transform:none;transition:none}}body.special{background-color:#32302f}body.special .special-doc,body.special .special-doc *:not(svg,svg *),body.special .special-doc foreignObject *{all:revert}body.special .special-doc{background-color:#32302f;color:#ebdbb2;font-family:"Fantasque Sans Mono",monospace;font-size:19px;line-height:1.1225}body.special .special-doc h1{margin:0;font-size:120px}body.special .special-doc h2{margin:0;font-size:80px}body.special .special-doc h3{margin-bottom:.25em;color:#eba98a;font-size:40px}body.special .special-doc a{color:#ebdbdb;cursor:pointer;text-decoration:none;user-select:none;-webkit-touch-callout:none}body.special .special-doc a:visited{color:#ebdb80}body.special .special-doc a:hover{color:#ebdbf8}body.special .special-doc th{color:#b2dbeb}body.special .special-doc table,body.special .special-doc th,body.special .special-doc td{border:1px solid #ebdbb2;border-collapse:collapse;padding:10px}body.special .special-doc ul{list-style:none}body.special .special-doc li{margin:5px 0}body.special .special-doc mark{background-color:#322e2d;color:#ee3c14;font-family:"Fantasque Sans Mono",monospace}body.special .special-doc i{color:#dad1e1}body.special .special-doc .code{margin:0;color:#49eafc;font-family:"Fantasque Sans Mono",monospace;font-size:18px;line-height:1.25;white-space:pre-wrap}@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-delay:0ms !important;transition-duration:0ms !important}html{scroll-behavior:auto}}