:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1c1b29;--bg-2:#25243a;--fg:#ecebf5;--muted:#a3a1bd;--line:#ffffff1a;--accent:#ffb040;--accent-rgb:255, 176, 64;--accent-ch:255 176 64;--accent-2:#ff6b8b;--on-accent:#1c1b29;--font-body:"Inter", system-ui, sans-serif;--font-head:"Sora", "Inter", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--gutter:clamp(1rem, 5vw, 4rem)}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f5fb;--bg-2:#fff;--fg:#1c1b29;--muted:#5b5975;--line:#1c1b291f;--accent:#c2410c;--accent-rgb:194, 65, 12;--accent-ch:194 65 12;--accent-2:#be185d;--on-accent:#fff}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);color:var(--fg);font:300 1.0625rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased;margin:0;transition:background .3s,color .3s;overflow-x:hidden}h1,h2,h3{font-family:var(--font-head);letter-spacing:-.02em;margin:0;line-height:1.12}h1{font-size:clamp(2.2rem,6vw,4.4rem)}h2{margin-bottom:.75rem;font-size:clamp(1.8rem,4vw,2.9rem)}h3{font-size:1.2rem}p{margin:0 0 1rem}a{color:inherit}ul,ol{margin:0;padding:0;list-style:none}code{font-family:var(--font-mono);background:var(--line);border-radius:.3em;padding:.1em .4em;font-size:.85em}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{z-index:100;background:var(--accent);color:var(--on-accent);border-radius:.5rem;padding:.6rem 1rem;position:fixed;top:-4rem;left:1rem}.skip:focus{top:1rem}#progress{z-index:60;background:linear-gradient(90deg, var(--accent), var(--accent-2));transform-origin:0;height:3px;position:fixed;inset:0 0 auto;transform:scaleX(0)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){@keyframes grow-progress{to{transform:scaleX(1)}}#progress{animation:linear grow-progress;animation-timeline:scroll()}}}@media (prefers-reduced-motion:reduce){#progress{display:none}}.header{z-index:50;padding:.9rem var(--gutter);background:color-mix(in srgb, var(--bg) 70%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;display:flex;position:fixed;inset:0 0 auto}.brand{font:600 1.1rem var(--font-head);align-items:center;gap:.5rem;text-decoration:none;display:flex}.brand-mark{color:var(--accent);font-family:var(--font-mono)}.header nav ul{gap:clamp(.75rem,2.5vw,2rem);display:flex}.header nav a{color:var(--muted);font-size:.95rem;text-decoration:none;transition:color .2s}.header nav a:hover{color:var(--fg)}.theme-btn{border:1px solid var(--line);color:var(--fg);cursor:pointer;background:0 0;border-radius:50%;width:2.4rem;height:2.4rem;font-size:1.1rem}.theme-btn:hover{border-color:var(--accent)}.hero{min-height:100svh;padding:7rem var(--gutter) 4rem;background:radial-gradient(ellipse at 80% 10%, rgb(var(--accent-ch) / .12), transparent 55%);align-items:center;display:grid;position:relative;overflow:hidden}.network{width:100%;height:100%;position:absolute;inset:0}.hero-inner{max-width:54rem;position:relative}.eyebrow{font:400 .8rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}.grad{background:linear-gradient(100deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}h1 em{text-decoration:underline;-webkit-text-decoration-color:rgb(var(--accent-ch) / .5);text-decoration-color:rgb(var(--accent-ch) / .5);text-underline-offset:.15em;font-style:normal;text-decoration-thickness:3px}.role{font:400 clamp(1.1rem, 2.5vw, 1.5rem) var(--font-mono);color:var(--muted);min-height:1.6em;margin:1.5rem 0 1rem}.caret{background:var(--accent);vertical-align:text-bottom;width:.55ch;height:1.1em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.lede{max-width:38rem;color:var(--muted);font-size:1.15rem}.cta{flex-wrap:wrap;gap:.9rem;margin-top:2rem;display:flex}.scroll-cue{color:var(--muted);font-size:1.4rem;text-decoration:none;animation:2s ease-in-out infinite bob;position:absolute;bottom:1.5rem;left:50%;translate:-50%}@keyframes bob{50%{transform:translateY(6px)}}.btn{border:1px solid var(--line);color:var(--fg);cursor:pointer;background:0 0;border-radius:999px;padding:.8rem 1.5rem;font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .2s,border-color .2s,background .2s;display:inline-block}.btn:hover{border-color:var(--accent);transform:translateY(-2px)}.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.section{padding:clamp(4rem, 10vw, 8rem) var(--gutter);max-width:76rem;margin-inline:auto}.sub{color:var(--muted);max-width:40rem;font-size:1.1rem}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:entry){@keyframes rise{0%{opacity:0;translate:0 2.5rem;scale:.97}}.reveal{animation:linear both rise;animation-timeline:view();animation-range:entry entry 55%}}.no-sda .reveal{opacity:0;transition:opacity .7s,translate .7s;translate:0 2rem}.no-sda .reveal.is-in{opacity:1;translate:0}}.filters{flex-wrap:wrap;gap:.5rem;margin:2rem 0;display:flex}.filters button{font:400 .85rem var(--font-mono);color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:.45rem 1rem}.filters button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.grid{perspective:1000px;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1.25rem;display:grid}.grid>li{display:flex}.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;border:1px solid var(--line);background:radial-gradient(circle at var(--mx) var(--my), rgb(var(--accent-ch) / .14), transparent 55%), var(--bg-2);width:100%;transform:rotateX(var(--rx)) rotateY(var(--ry));border-radius:1.25rem;flex-direction:column;padding:1.6rem;text-decoration:none;transition:transform .15s ease-out,border-color .2s;display:flex;position:relative}.card-top{justify-content:space-between;align-items:center;margin-bottom:1.2rem;display:flex}.chip{font:400 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}.year{font:400 .75rem var(--font-mono);color:var(--muted)}.card h3{margin-bottom:.6rem}.arrow{color:var(--accent)}.card p{color:var(--muted);flex:1;font-size:.97rem}.stack{flex-wrap:wrap;gap:.4rem;margin-top:.5rem;display:flex}.stack li{font:400 .72rem var(--font-mono);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.2rem .6rem}.demos{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.25rem;margin-top:2.5rem;display:grid}.demo{background:var(--bg-2);border:1px solid var(--line);border-radius:1.25rem;flex-direction:column;gap:1.2rem;padding:1.6rem;display:flex}.lab{--h:38;gap:.9rem;font-size:.9rem;display:grid}.lab-preview{background:var(--bg);border:1px solid var(--line);border-radius:.9rem;gap:.8rem;padding:1rem;display:grid}.lab-btn{font:600 .9rem var(--font-body);color:#111;cursor:default;background:oklch(.8 .15 calc(var(--h)));border-radius:var(--r);border:0;padding:.7rem 1rem;transition:background .2s,border-radius .2s}.lab-card{border:2px solid oklch(.75 .14 calc(var(--h)));border-radius:var(--r);padding:.9rem;transition:border-color .2s,border-radius .2s;display:grid}.lab-card span{color:var(--muted);font-size:.85rem}.lab label{color:var(--muted);gap:.3rem;display:grid}.lab output{float:right;font-family:var(--font-mono);color:var(--fg)}.lab input[type=range]{width:100%;accent-color:var(--accent)}.presets{flex-wrap:wrap;gap:.4rem;display:flex}.presets button{color:var(--fg);border:1px solid var(--line);cursor:pointer;font:inherit;background:0 0;border-radius:999px;padding:.3rem .8rem}.presets button:hover{border-color:var(--accent)}.spring{justify-items:start;gap:1rem;display:grid}.spring-btn{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:999px;width:9rem;height:3.6rem;padding:.4rem;display:flex}.spring-btn[aria-pressed=true]{background:rgb(var(--accent-ch) / .25);border-color:var(--accent)}.knob{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:2.7rem;height:2.7rem;transition:translate .9s linear(0, .4 8%, .95 17%, 1.14 25%, 1.16 31%, 1.04 44%, .98 56%, 1.01 72%, 1 100%);border-radius:50%}.spring-btn[aria-pressed=true] .knob{translate:5.3rem}@media (prefers-reduced-motion:reduce){.knob{transition-duration:10ms}}.counter{justify-content:center;align-items:center;gap:1.2rem;display:flex}.counter button{border:1px solid var(--line);width:3rem;height:3rem;color:var(--fg);cursor:pointer;background:0 0;border-radius:50%;font-size:1.4rem}.counter button:hover{border-color:var(--accent);color:var(--accent)}.digits{font:700 3rem var(--font-head);display:flex;overflow:hidden}.digit{animation:.35s cubic-bezier(.2,.9,.3,1.2) flip;display:inline-block}@keyframes flip{0%{opacity:0;transform:translateY(-60%)}}@media (prefers-reduced-motion:reduce){.digit{animation:none}}.about{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start;gap:3rem;display:grid}.skills{flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;display:flex}.skills li{border:1px solid var(--line);background:var(--bg-2);border-radius:999px;padding:.35rem .9rem;font-size:.88rem}.timeline{border-inline-start:2px solid var(--line);gap:2rem;padding-inline-start:2rem;display:grid}.timeline li{position:relative}.timeline li:before{content:"";background:var(--accent);width:12px;height:12px;box-shadow:0 0 0 4px rgb(var(--accent-ch) / .2);border-radius:50%;position:absolute;top:.45rem;left:calc(-2rem - 7px)}.when{font:400 .78rem var(--font-mono);color:var(--accent);letter-spacing:.08em}.timeline h3{margin:.2rem 0 .4rem}.timeline p{color:var(--muted);margin:0}.contact{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:3rem;display:grid}.form{background:var(--bg-2);border:1px solid var(--line);border-radius:1.25rem;gap:1rem;padding:1.8rem;display:grid}.form label{color:var(--muted);gap:.35rem;font-size:.88rem;display:grid}.form input,.form textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:.7rem;padding:.75rem .9rem}.form input:focus-visible,.form textarea:focus-visible{border-color:var(--accent);outline-offset:1px}.form .btn{justify-self:start}.ok{color:var(--accent);margin:0}.footer{text-align:center;padding:2.5rem var(--gutter);color:var(--muted);border-top:1px solid var(--line);font-size:.85rem}.footer p{margin:0}@media (width<=40rem){.header nav{display:none}}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(40rem 30rem at 85% -5%, rgb(var(--accent-ch) / .13), transparent 70%), radial-gradient(36rem 28rem at -5% 55%, #ff6b8b17, transparent 70%), radial-gradient(34rem 26rem at 100% 100%, #6e5aff1a, transparent 70%);position:fixed;inset:0}.hero{background:0 0}.hero-grid{align-items:center;gap:3rem;width:100%;max-width:76rem;margin-inline:auto;display:grid;position:relative}@media (width>=64rem){.hero-grid{grid-template-columns:1.25fr .75fr}}.codewin{border:1px solid var(--line);background:color-mix(in srgb, var(--bg-2) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px #0000008c, 0 0 0 1px rgb(var(--accent-ch) / .08);font:400 .88rem/1.7 var(--font-mono);border-radius:1rem;margin:0;overflow:hidden}@media (width>=64rem) and (prefers-reduced-motion:no-preference){.codewin{transition:transform .5s;transform:perspective(900px)rotateY(-9deg)rotateX(3deg)}.codewin:hover{transform:perspective(900px)rotateY(0)rotateX(0)}}.codewin-bar{border-bottom:1px solid var(--line);align-items:center;gap:.4rem;padding:.7rem 1rem;display:flex}.codewin-bar i{background:var(--line);border-radius:50%;width:.7rem;height:.7rem}.codewin-bar i:first-child{background:#ff5f57}.codewin-bar i:nth-child(2){background:#febc2e}.codewin-bar i:nth-child(3){background:#28c840}.codewin-bar span{color:var(--muted);margin-left:auto;font-size:.75rem}.codewin pre{white-space:pre;margin:0;padding:1.2rem 1.4rem;overflow-x:auto}.codewin code{font:inherit;background:0 0;padding:0}.codewin .k{color:#c792ea}.codewin .v{color:var(--accent)}.codewin .p{color:#82aaff}.codewin .s{color:#a5e075}.codewin .n{color:#f78c6c}:root[data-theme=light] .codewin .k{color:#7c3aed}:root[data-theme=light] .codewin .p{color:#1d4ed8}:root[data-theme=light] .codewin .s{color:#15803d}:root[data-theme=light] .codewin .n{color:#c2410c}.stats{padding:0 var(--gutter)}.stats ul{border:1px solid var(--line);background:color-mix(in srgb, var(--bg-2) 70%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1.25rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));max-width:76rem;margin:0 auto;display:grid;overflow:hidden}.stats li{border-inline-start:1px solid var(--line);gap:.2rem;padding:1.6rem 1.5rem;display:grid}.stats li:first-child{border-inline-start:0}.stats strong{font:700 clamp(2rem, 4vw, 2.8rem) var(--font-head);background:linear-gradient(100deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;line-height:1.1}.stats li>span{color:var(--muted);font-size:.9rem;line-height:1.4}.card:before{content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from 180deg at var(--mx) var(--my), var(--accent), var(--accent-2), transparent 40%, var(--accent));-webkit-mask-composite:xor;opacity:0;padding:1px;transition:opacity .3s;position:absolute;inset:-1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.card:hover:before{opacity:1}.card:hover{border-color:#0000}.section h2{text-wrap:balance}.section+.section{border-top:1px solid var(--line)}@media (width<=40rem){.header nav{display:block}.header nav ul{gap:.9rem}.header nav a{font-size:.85rem}.brand{gap:0;font-size:0}.brand-mark{font-size:1.1rem}.stats li{border-inline-start:0;border-top:1px solid var(--line)}.stats li:first-child{border-top:0}.hero{padding-top:6rem}}.codewin .ln{white-space:pre;display:block}.demo.wide{grid-column:1/-1}.badge{font:400 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid rgb(var(--accent-ch) / .4);vertical-align:middle;border-radius:999px;margin-left:.5rem;padding:.15rem .6rem}.physics{grid-template-columns:1fr;gap:1.2rem;display:grid}@media (width>=56rem){.physics{grid-template-columns:1fr 16rem;align-items:stretch}}.physics-stage{border:1px solid var(--line);background:radial-gradient(circle at 50% 120%, rgb(var(--accent-ch) / .18), var(--bg) 70%);border-radius:1rem;min-height:22rem;position:relative;overflow:hidden}.physics-stage canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}:root[data-theme=light] .physics-stage canvas{filter:saturate(1.2)brightness(.9)}.physics-hint,.physics-count{font:400 .75rem var(--font-mono);color:var(--muted);pointer-events:none;position:absolute;top:.8rem}.physics-hint{left:1rem}.physics-count{right:1rem}.physics-controls{align-content:start;gap:1rem;font-size:.9rem;display:grid}.physics-controls label{color:var(--muted);gap:.3rem;display:grid}.physics-controls output{float:right;font-family:var(--font-mono);color:var(--fg)}.physics-controls input[type=range]{width:100%;accent-color:var(--accent)}.cssdemo{align-content:start;gap:1rem;display:grid}.cssdemo p{color:var(--muted);margin:0;font-size:.92rem}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.spin-border{--angle:0deg;background:linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--angle), var(--accent), var(--accent-2), #6e5aff, var(--accent)) border-box;height:7rem;font:400 1rem var(--font-mono);border:2px solid #0000;border-radius:1rem;place-items:center;animation:4s linear infinite spin-angle;display:grid}@keyframes spin-angle{to{--angle:360deg}}.scene{perspective:600px;place-items:center;height:7rem;display:grid}.cube{--s:4rem;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:9s linear infinite cube-spin;position:relative}.cube:hover,.scene:hover .cube{animation-play-state:paused}.cube i{font:700 1.2rem var(--font-head);color:var(--on-accent);backface-visibility:visible;background:linear-gradient(135deg, rgb(var(--accent-ch) / .9), color-mix(in srgb, var(--accent-2) 80%, transparent));border:1px solid #ffffff40;place-items:center;font-style:normal;display:grid;position:absolute;inset:0}.cube .front{transform:translateZ(calc(var(--s) / 2))}.cube .back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}.cube .right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}.cube .left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}.cube .top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}.cube .bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}@keyframes cube-spin{to{transform:rotateX(360deg)rotateY(360deg)}}.has-demo fieldset{border:0;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;display:flex}.has-demo label span{border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:.35rem .9rem;font-size:.88rem;transition:background .2s,color .2s;display:inline-block}.has-demo input{opacity:0;pointer-events:none;position:absolute}.has-demo input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.has-demo input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}.mood-card{border:1px solid var(--line);background:var(--bg);height:5.6rem;color:var(--fg);border-radius:.9rem;align-content:center;gap:.2rem;padding:1.2rem;transition:all .4s;display:grid}.mood-card span{color:inherit;opacity:.75;font-size:.88rem}.has-demo:has(input[value=bold]:checked) .mood-card{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#1c1b29;border-color:#0000;transform:rotate(-1.5deg)scale(1.03)}.has-demo:has(input[value=night]:checked) .mood-card{color:#8ab4ff;background:#0b0a14;border-color:#2b3a6b;box-shadow:0 0 30px -5px #3b5bdb}.marquee{border-block:1px solid var(--line);padding:1rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000);mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000)}.marquee-track{gap:.6rem;width:max-content;animation:18s linear infinite marquee;display:flex}.marquee:hover .marquee-track{animation-play-state:paused}.marquee-track span{border:1px solid var(--line);font:400 .82rem var(--font-mono);white-space:nowrap;background:var(--bg);border-radius:999px;padding:.35rem .9rem}@keyframes marquee{to{transform:translate(calc(-50% - .3rem))}}.shimmer{background:linear-gradient(90deg, var(--muted) 30%, var(--accent) 50%, var(--muted) 70%) 0 0 / 250% 100%;-webkit-background-clip:text;background-clip:text;animation:3s linear infinite shimmer;color:#0000!important}@keyframes shimmer{to{background-position:-250% 0}}@media (prefers-reduced-motion:reduce){.spin-border,.cube,.marquee-track,.shimmer{animation:none}.shimmer{background:0 0;color:var(--muted)!important}}.hp{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.form button:disabled{opacity:.6;cursor:progress}.form [role=status]{min-height:1.5em}.err{color:#ff6b6b;margin:0}:root[data-theme=light] .err{color:#b91c1c}