@layer reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased}img,svg,canvas,video{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}p,h1,h2,h3,h4{overflow-wrap:break-word}}:root{--bg: #fdfdff;--surface-1: #f6f6f9;--surface-2: #f0f0f3;--surface-3: #e9e9ec;--text: #111113;--text-muted: #555557;--text-faint: #717174;--border: #d7d7da;--accent: #105fd9;--accent-2: #105fd9;--glow-cold: #f4f6ff}:root[data-theme=dark]{--bg: #010101;--surface-1: #0a0a0c;--surface-2: #1c1c1e;--surface-3: #2f2f31;--text: #e4e4e7;--text-muted: #98989b;--text-faint: #868688;--border: #38383a;--accent: #00c6f2;--accent-2: #00c6f2}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #010101;--surface-1: #0a0a0c;--surface-2: #1c1c1e;--surface-3: #2f2f31;--text: #e4e4e7;--text-muted: #98989b;--text-faint: #868688;--border: #38383a;--accent: #00c6f2;--accent-2: #00c6f2}}@layer reset,base,layout,components,utilities;@layer base{:root{--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: Consolas, "Cascadia Mono", Monaco, Menlo, "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", monospace;--radius-s: 6px;--radius-l: 22px;--grid-cell: 28px;--grid-dot: 1.5px;--grid-ink: color-mix(in srgb, var(--text) 7%, transparent);--seam-ink: color-mix(in srgb, var(--text-faint) 65%, transparent);--space: 1.18}:root[data-theme=dark]{--grid-ink: color-mix(in srgb, var(--text) 14%, transparent);--seam-ink: var(--text-faint)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--grid-ink: color-mix(in srgb, var(--text) 14%, transparent);--seam-ink: var(--text-faint)}}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text);background-image:radial-gradient(var(--grid-ink) var(--grid-dot),transparent var(--grid-dot));background-size:var(--grid-cell) var(--grid-cell);background-position:50% 0}h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.15}h2{font-size:2.2rem;text-wrap:balance}@media(max-width:860px){h2{font-size:1.9rem}}@media(max-width:720px){h2{font-size:1.6rem}}a{color:inherit}code{font-family:var(--font-mono)}::selection{color:var(--bg);background-color:var(--accent);text-shadow:none}}@layer layout{.container{max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}section[id]{scroll-margin-top:calc(var(--nav-height, 4rem) + 1.5rem)}}@layer components{.btn{display:inline-flex;align-items:center;gap:.5em;padding:.65em 1.25em;border:1px solid var(--border);border-radius:var(--radius-s) var(--radius-s) var(--radius-s) 0;background:var(--surface-2);color:var(--text);font-weight:500;text-decoration:none;cursor:pointer}.btn:hover{background:var(--surface-3);border-color:var(--text-muted);transition:background .18s ease,border-color .18s ease}.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn-primary:hover{background:var(--text-muted);border-color:var(--text-muted)}.bit{display:inline-block;width:.55em;height:.55em;background:currentColor;border-radius:38% 38% 38% 0}}:root[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill){position:relative}:root[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):before{content:"";position:absolute;inset:-4px;border-radius:calc(var(--radius-s) + 4px) calc(var(--radius-s) + 4px) calc(var(--radius-s) + 4px) 0;padding:1.5px;background:var(--text);pointer-events:none;-webkit-mask:radial-gradient(circle 8rem at calc(var(--eco-x, -99rem) + 4px) calc(var(--eco-y, -99rem) + 4px),#000 22%,transparent 70%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:source-in,xor;mask:radial-gradient(circle 8rem at calc(var(--eco-x, -99rem) + 4px) calc(var(--eco-y, -99rem) + 4px),#000 22%,transparent 70%),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:intersect,exclude}:root[data-theme=dark][data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):before{filter:drop-shadow(0 0 6px var(--text))}@media(prefers-color-scheme:dark){:root:not([data-theme=light])[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):before{filter:drop-shadow(0 0 6px var(--text))}}:root[data-fx=shader] .about .num:before{border-radius:38% 38% 38% 0}:root[data-fx=shader] .nav-wrap .side:before{border-radius:calc(var(--pill-h) / 2 + 4px)}:root[data-fx=shader] .contact .mail{overflow:visible}:root[data-fx=shader] .contact .mail code{border-radius:calc(var(--radius-s) - 1px) 0 0 0}:root[data-fx=shader] .contact .mail .copy{border-radius:0 calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px) 0}:root[data-fx=shader] .contact .mail:has(.copy[hidden]) code{border-radius:calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px) calc(var(--radius-s) - 1px) 0}:root[data-fx=shader] .btn:hover{background:color-mix(in srgb,var(--text) 12%,var(--surface-2));border-color:var(--border);transition:background .18s ease}:root[data-fx=shader] .btn-primary:hover{background:color-mix(in srgb,var(--bg) 14%,var(--text));border-color:var(--text)}:root[data-fx=shader] .pains .arrow:hover{background:color-mix(in srgb,var(--text) 12%,var(--surface-2));border-color:var(--border);transition:background .18s ease}:root[data-fx=shader][data-eco-touch] .btn:hover{background:var(--surface-2);border-color:var(--border)}:root[data-fx=shader][data-eco-touch] .btn-primary:hover{background:var(--text);border-color:var(--text)}:root[data-fx=shader][data-eco-touch] .pains .arrow:hover{background:none;border-color:var(--border);color:var(--text-muted)}:root[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):before,:root[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):after{transition:opacity .3s ease}:root[data-eco-off][data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):before,:root[data-eco-off][data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):after{opacity:0}:root[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--text) 10%,transparent) 0%,transparent 70%)}:root[data-fx=shader] .btn-primary:after{background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--bg) 20%,transparent) 0%,transparent 70%)}:root[data-theme=dark][data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):after{background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--text) 15%,transparent) 0%,transparent 70%)}@media(prefers-color-scheme:dark){:root:not([data-theme=light])[data-fx=shader] :where(.btn,.pains .arrow,.about .num,.contact .mail,.nav-wrap .pill):after{background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--text) 15%,transparent) 0%,transparent 70%)}}:root[data-theme=dark][data-fx=shader] .btn-primary:after{background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--bg) 20%,transparent) 0%,transparent 70%)}@media(prefers-color-scheme:dark){:root:not([data-theme=light])[data-fx=shader] .btn-primary:after{background:radial-gradient(circle 7rem at var(--eco-x, -99rem) var(--eco-y, -99rem),color-mix(in srgb,var(--bg) 20%,transparent) 0%,transparent 70%)}}