@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}:root{--bg:#07080c;--surface:#11131a;--surface2:#181b25;--ink:#f1f1ec;--muted:#9498a6;--line:#272b37;--acid:#d8f36b;--blue:#8d9cff;--purple:#bd9cff;--yellow:#e9c85b;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.topbar{height:88px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{color:var(--ink);text-decoration:none;font-weight:700;display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--acid);color:#111;border-radius:50% 50% 50% 5px;font-size:20px}.topbar nav{display:flex;gap:34px}.topbar nav a{color:var(--muted);text-transform:uppercase;font:11px 'DM Mono';text-decoration:none}.topbar nav a:hover{color:var(--acid)}#theme{background:none;border:1px solid var(--line);color:var(--acid);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:16px}.hero{max-width:1240px;min-height:690px;margin:auto;padding:75px 28px 100px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.kicker,.section-head{font:11px 'DM Mono';letter-spacing:.12em;color:var(--acid)}.kicker span{color:var(--muted)}h1,h2{font-weight:600;letter-spacing:-.08em;margin:18px 0;line-height:.9}h1{font-size:clamp(72px,10vw,142px)}h1 i,h2 i{color:var(--acid);font-style:normal}.intro{font:15px/1.7 'DM Mono';color:var(--muted);margin:30px 0}.hero-links{display:flex;gap:10px}.pill{padding:13px 17px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:12px;border-radius:4px;transition:.3s}.pill b{margin-left:25px;color:var(--acid)}.pill:hover{transform:translateY(-4px);border-color:var(--acid)}.pill.hot{background:var(--acid);color:#111;border-color:var(--acid)}.pill.hot b{color:#111}.hero-art{height:480px;position:relative;display:grid;place-items:center}.grid-lines{position:absolute;inset:5%;background:linear-gradient(90deg,transparent 49.8%,#272b37 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#272b37 50%,transparent 50.2%);background-size:72px 72px;mask-image:radial-gradient(circle,#000,transparent 70%);opacity:.55}.halo{position:absolute;width:350px;height:350px;border:1px solid var(--acid);border-radius:48% 52% 65% 35%;animation:morph 10s ease-in-out infinite alternate;filter:drop-shadow(0 0 24px #d8f36b38)}.avatar-wrap{width:275px;height:350px;position:relative;z-index:1;overflow:hidden;border-radius:45% 8% 45% 8%;transform:rotate(5deg);box-shadow:18px 20px 0 #bd9cff33}.avatar-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.04)}.avatar-tag{position:absolute;bottom:0;left:0;right:0;padding:17px;background:#07080ce6;font:11px 'DM Mono';color:var(--acid)}.avatar-tag small{color:var(--muted);font-size:8px}.code-float{position:absolute;right:0;top:45px;padding:15px;background:var(--surface);border:1px solid var(--line);color:var(--blue);font:12px/1.6 'DM Mono';animation:float 4s ease-in-out infinite}.star{position:absolute;bottom:45px;left:4%;font-size:60px;color:var(--yellow);animation:spin 12s linear infinite}.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;color:var(--muted);font:13px 'DM Mono';padding:19px 0}.ticker-track{display:inline-flex;min-width:max-content;animation:marquee 28s linear infinite}.ticker-track span{padding:0 30px}.ticker-track b{color:var(--acid);font-weight:400}.ticker-track:after{content:'PYTHON ✦ C# ✦ C++ ✦ JAVASCRIPT / TYPESCRIPT ✦ SCALA ✦';padding:0 30px;color:var(--muted)}.work,.stack{max-width:1240px;margin:auto;padding:110px 28px}.section-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.section-head small{font:10px 'DM Mono';color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}.project{min-height:470px;padding:24px;display:flex;flex-direction:column;text-decoration:none;color:#111;position:relative;overflow:hidden;transition:transform .4s}.project:hover{transform:rotate(-2deg) translateY(-8px)}.p-yellow{background:var(--yellow)}.p-purple{background:var(--purple)}.p-blue{background:var(--blue)}.project-number{font:12px 'DM Mono'}.project-art{height:190px;display:grid;place-items:center;line-height:1;font-size:112px;font-weight:400;transition:transform .5s;transform:translateY(-4px)}.project:hover .project-art{transform:translateY(-4px) scale(1.15) rotate(8deg)}.rings{font-size:126px;transform:translateY(-10px)}.face{font-size:118px;transform:translateY(-15px)}.project:hover .rings{transform:translateY(-10px) scale(1.15) rotate(8deg)}.project:hover .face{transform:translateY(-15px) scale(1.15) rotate(8deg)}.project h2{font-size:38px;margin:0 0 10px}.project p{font-size:14px;max-width:270px;margin:0}.project footer{border-top:1px solid #1115;margin-top:auto;padding-top:17px;display:flex;justify-content:space-between;font:10px 'DM Mono'}.stack{border-top:1px solid var(--line)}.stack-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px}.stack h2{font-size:70px}.skills{display:flex;flex-direction:column;gap:28px}.skills label{font:10px 'DM Mono';color:var(--acid)}.skills p{font-size:23px;line-height:1.5;margin:10px 0}.skills b{color:var(--muted)}.contact{background:var(--acid);color:#111;padding:100px 28px}.contact-inner{max-width:1180px;margin:auto;position:relative}.contact-symbol{position:absolute;right:0;font-size:100px}.contact h2{font-size:clamp(60px,9vw,120px);margin:0 0 60px}.contact h2 i{color:#6955d5}.links{max-width:560px}.links a{display:flex;justify-content:space-between;border-bottom:1px solid #1115;padding:15px 0;color:#111;text-decoration:none;font:13px 'DM Mono'}.links a:hover b{color:#6955d5}.footer{max-width:1240px;margin:auto;padding:28px;color:var(--muted);display:flex;justify-content:space-between;font:10px 'DM Mono';letter-spacing:.1em}@keyframes morph{to{transform:rotate(30deg) scale(1.08);border-radius:60% 40% 35% 65%}}@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-35%)}}@media(max-width:760px){html,body{width:100%;max-width:100%;overflow-x:clip}.topbar{width:100%;padding:0 20px;height:70px}.topbar nav{display:none}.hero{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;padding:28px 20px 70px;align-items:start}.hero-copy{width:100%;min-width:0}.hero h1{font-size:clamp(52px,17vw,68px);max-width:100%;overflow-wrap:normal}.hero-art{width:100%;max-width:100%;min-width:0;height:350px;overflow:hidden}.avatar-wrap{width:220px;height:280px}.halo{width:280px;height:280px}.code-float{right:4px;top:15px}.star{left:4px;bottom:5px}.ticker{width:100%;max-width:100%}.project-grid,.stack-layout{grid-template-columns:minmax(0,1fr);width:100%}.project{min-width:0;min-height:400px}.project h2{font-size:clamp(28px,9vw,38px);overflow-wrap:anywhere}.stack h2{font-size:clamp(46px,14vw,57px)}.skills p{font-size:20px;overflow-wrap:anywhere}.work,.stack{width:100%;max-width:100%;padding:80px 20px}.contact{width:100%;max-width:100%;padding:80px 20px;overflow:hidden}.contact h2{font-size:clamp(48px,16vw,68px)}.contact-symbol{right:0;font-size:70px}.links{width:100%;max-width:100%}.footer{width:100%;max-width:100%;padding:25px 20px;gap:12px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
/* M3 Expressive layer: semantic surfaces, shape contrast, tonal controls, and stateful motion. */
.brand-mark{width:42px;height:42px;border-radius:18px 24px 24px 6px;transform:rotate(-8deg);box-shadow:0 0 0 6px color-mix(in srgb,var(--acid) 12%,transparent)}.brand-mark svg{width:30px;height:30px}.topbar{background:color-mix(in srgb,var(--bg) 86%,transparent);border-radius:0 0 24px 24px}.hero{position:relative}.hero:before{content:'';position:absolute;right:3%;top:12%;width:170px;height:170px;border-radius:38% 62% 54% 46%;background:var(--surface2);opacity:.55;z-index:-1}.hero-copy{z-index:1}.pill{border-radius:18px 18px 6px 18px;background:var(--surface)}.pill.hot{border-radius:22px 8px 22px 22px}.project{border-radius:34px 12px 34px 12px}.project:nth-child(2){border-radius:12px 34px 12px 34px}.project:nth-child(3){border-radius:34px 34px 12px 34px}.project-art{border-radius:48% 52% 40% 60%;margin:12px 0;background:#ffffff22}.p-purple .project-art{background:#ffffff30}.p-yellow .project-art{background:#fff7b044}.p-blue .project-art{background:#ffffff30}.stack-layout{align-items:start}.skill-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}.skill-pills span{padding:14px 19px;border-radius:20px 20px 6px 20px;background:var(--surface2);border:1px solid var(--line);color:var(--ink);font:12px 'DM Mono';transition:transform .25s,background .25s}.skill-pills span:nth-child(3n){border-radius:20px 6px 20px 20px}.skill-pills span:hover{transform:translateY(-4px);background:var(--primary-container,var(--surface));border-color:var(--acid)}.contact{border-radius:48px 48px 0 0}.contact-inner{max-width:1180px}.links a{padding:18px 22px;border-radius:18px;margin:4px 0;background:#1112}.light .topbar{background:#f7f5eeeb}.light .hero:before{background:#ebe9df}.light .skill-pills span{background:#fffdf7;color:#20221d;border-color:#d6d6c9}.light .contact{background:#c8e86c}.light .links a{background:#ffffff35}.light .project-art{background:#ffffff45}
/* Expressive refinements */
.halo{border-radius:52% 48% 58% 42%;transform:translate3d(0,0,0);backface-visibility:hidden;animation:halo-shape 12s ease-in-out infinite alternate;will-change:border-radius}@keyframes halo-shape{to{border-radius:42% 58% 35% 65%}}
.ticker-track{display:flex;width:max-content;animation:marquee-seamless 32s linear infinite;will-change:transform}.ticker-group{display:flex;align-items:center;flex-shrink:0}.ticker-track span{padding:0 30px}.ticker-track b{color:var(--acid);font-weight:400}.ticker-track:before,.ticker-track:after{display:none}@keyframes marquee-seamless{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Light theme: warm ivory surface, readable ink, and indigo/lime accents. */
body.light{--bg:#f7f5ee;--surface:#fffdf7;--surface2:#ebe9df;--ink:#20221d;--muted:#65695f;--line:#d6d6c9;--acid:#526d00;--blue:#465bd4;--purple:#8c55c7;--yellow:#e8bd3f;color-scheme:light}.light .brand-mark{box-shadow:0 0 0 5px #526d0015}.light .hero-art .grid-lines{opacity:.28;background-image:linear-gradient(90deg,transparent 49.8%,#a9ad9e 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#a9ad9e 50%,transparent 50.2%)}.light .avatar-tag{background:#20221ddd;color:#d8f36b}.light .code-float{background:#fffdf7;border-color:#d6d6c9}.light .ticker{background:#ebe9df}.light .contact{background:#c8e86c}.light .contact h2 i,.light .links a:hover b{color:#5140ba}.light .pill{background:#fffdf7}.light .pill.hot{background:#526d00;color:#fff}.light .pill.hot b{color:#fff}.light .project{box-shadow:0 12px 28px #4b514012}.light .footer{color:#65695f}