:root{--bg:#09090b;--fg:#f4f4f5;--mute:#a1a1aa;--line:#232329;--acc:#a78bfa;--card:#111114;--g1:#3b82f6;--g2:#a855f7;--g3:#ec4899;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#09090b;--fg:#f4f4f5}}
:root[data-theme="dark"]{--bg:#09090b;--fg:#f4f4f5}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);view-transition-name:root}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);border-bottom:1px solid var(--line);z-index:5}
nav .w{display:flex;gap:0;align-items:center;height:52px;overflow-x:auto;white-space:nowrap}
nav b{flex-shrink:0;color:var(--acc);margin-right:clamp(32px,6vw,88px)}
nav a{color:var(--mute);font-size:14px}nav a:hover{color:var(--fg)}
header{padding:72px 0 48px}
h1{font-size:clamp(34px,8vw,52px);margin:0 0 6px;letter-spacing:-1px}
.sub{color:var(--acc);margin:0 0 16px}
.bio{color:var(--mute);max-width:560px;margin:0 0 24px}
.soc{display:flex;flex-wrap:wrap;gap:10px}
.soc a{border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:14px;color:var(--mute)}
.soc a:hover{border-color:var(--acc);color:var(--acc)}
section{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:84px}
h2{font-size:14px;color:var(--mute);font-weight:400;margin:0 0 24px}
h2:before{content:"~/";color:var(--acc)}
.row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.role{margin-bottom:22px}.role h3{margin:0;font-size:17px}.role p{margin:2px 0;color:var(--mute);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:16px}
.card h3{margin:0 0 6px}.card p{margin:0 0 12px;color:var(--mute);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tags span{font-size:12px;border:1px solid var(--line);padding:2px 8px;border-radius:99px;color:var(--mute)}
.stack-tags{display:grid;gap:6px}
.stack-tags .tag-row{display:flex;flex-wrap:wrap;gap:6px}
.stack-tags span{padding:4px 10px;border-radius:7px;background:#17171c}
.links a{color:var(--acc);font-size:14px;margin-right:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.grid h3{font-size:14px;margin:0 0 8px;color:var(--acc)}
.grid p{margin:0;color:var(--mute);font-size:14px}
footer{padding:32px 0;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
body.booting{overflow:hidden}
#boot{position:fixed;inset:0;background:#000;color:#cfcfcf;z-index:100;padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px;font-size:14px;line-height:1.5;overflow:hidden;transition:opacity .5s}
#boot.off{opacity:0;pointer-events:none}
#boot .ok{color:#7CFFB2}
#boot .hint{position:absolute;left:20px;bottom:calc(16px + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:12px}
.cur{display:inline-block;width:8px;height:1em;background:#cfcfcf;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero{display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center}
.hero .photo{grid-column:2;grid-row:1}.hero .info{grid-column:1;grid-row:1}
.photo{width:180px;height:180px;border-radius:50%;border:1px dashed var(--mute);display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:13px;text-align:center;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.soc a{padding:9px 18px;color:var(--fg);border-color:#333}
@media(max-width:560px){.hero{grid-template-columns:1fr;gap:24px}.hero .photo,.hero .info{grid-column:1;grid-row:auto}.photo{width:140px;height:140px}}
.hero .soc a{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:10px}
.hero .soc svg{width:20px;height:20px;fill:currentColor;display:block}
.hero .soc svg.s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{margin:0;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--acc);border-radius:8px;font-weight:600;transition:transform .15s,background .15s,color .15s,box-shadow .15s}
.links a::after{content:"\2197";font-size:12px;transition:transform .15s}
.links a:hover{background:var(--acc);color:#000;transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,255,178,.25)}
.links a:hover::after{transform:translate(2px,-2px)}
.links a:first-child:not(:last-child){background:var(--acc);color:#000}
.links a:first-child:not(:last-child):hover{background:transparent;color:var(--acc)}
.links a:active{transform:translateY(0)}
.links a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.stat b{display:block;font-size:30px;color:var(--acc);line-height:1.2}
.stat span{color:var(--mute);font-size:13px}
.heat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto}
#cal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(4px,1vw,8px);width:min(100%,420px);margin:0 auto}
#cal i{display:block;width:100%;aspect-ratio:1;border-radius:5px;background:#161616}
#cal i.l1{background:#0e4429}#cal i.l2{background:#006d32}#cal i.l3{background:#26a641}#cal i.l4{background:#7CFFB2}
.cap{width:min(100%,420px);margin:12px auto 0;color:var(--mute);font-size:12px}.cap a{color:var(--acc)}
#github-status{display:none;margin:10px 0 0;color:var(--mute);font-size:12px}
#github-status.show{display:block}
nav a.blogbtn{flex-shrink:0;border:1px solid var(--acc);color:var(--acc);padding:5px 14px;border-radius:6px;font-size:14px;transition:background .15s,color .15s}
nav a.blogbtn:hover{background:var(--acc);color:#000}
.hero{grid-template-columns:1fr;gap:20px;align-items:start}
.hero .photo,.hero .info{grid-column:1;grid-row:auto}
.photo{width:128px;height:128px}
nav .w{height:64px;overflow:visible}
#menu{display:flex;flex:1;gap:clamp(14px,2vw,24px);align-items:center;justify-content:center}
nav a.blogbtn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;margin-left:clamp(28px,4vw,52px);background:#141418;border:1px solid #1f1f25;color:var(--fg);padding:10px 16px;border-radius:12px;font-size:15px}
nav a.blogbtn:hover{background:#1c1c22;color:var(--fg)}
nav a.blogbtn span{color:var(--mute);font-size:16px}
#burger{display:none;flex-shrink:0;width:44px;height:44px;padding:0;align-items:center;justify-content:center;background:#141418;border:1px solid #1f1f25;color:var(--fg);border-radius:12px;cursor:pointer}
#burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(max-width:640px){nav b{margin-right:auto}nav a.blogbtn{margin-left:12px}#burger{margin-left:12px}#burger{display:flex}#menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 16px;background:var(--bg);border-bottom:1px solid var(--line)}#menu.open{display:flex}#menu a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--line)}#menu a:last-child{border-bottom:0}}
.photo{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#3b82f6,#a855f7,#ec4899) border-box}
h2.big{font-size:clamp(26px,5vw,34px);font-weight:700;color:var(--fg);margin:0 0 24px;letter-spacing:-.5px}
h2.big:before{content:none}
.g{background:linear-gradient(90deg,#3b82f6,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cta{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#a855f7,#ec4899);color:#fff;font-weight:600;font-size:15px;transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(168,85,247,.35)}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
::selection{background:rgba(167,139,250,.35)}
.soc a{border-color:var(--line);background:var(--card)}
.soc a:hover{border-color:var(--acc);color:var(--acc)}
.links a:hover{box-shadow:0 6px 18px rgba(167,139,250,.28)}
nav a.blogbtn,#burger{background:var(--card);border-color:var(--line)}
nav a.blogbtn:hover{background:#18181d}
#cal i{background:#1a1a20}
#cal i.l1{background:#2a1f4d}#cal i.l2{background:#4b32a3}#cal i.l3{background:#7c5ce0}#cal i.l4{background:#c4b5fd}
.cta{background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3))}
.g.purple{background-image:linear-gradient(90deg,#8b5cf6,#a855f7)}
.g.blue{background-image:linear-gradient(90deg,#3b82f6,#5b8def)}
h2.big,h2.big .g{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-style:normal}
.g.pink{background-image:linear-gradient(90deg,#ec4899,#f472b6)}
#boot{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
nav a.blogbtn{background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 20px rgba(168,85,247,.35);transition:transform .15s,filter .15s,box-shadow .15s}
nav a.blogbtn span{color:#fff}
nav a.blogbtn:hover{background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));color:#fff;filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 8px 24px rgba(168,85,247,.5)}
nav a.blogbtn,nav a.blogbtn:hover{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;border:1.5px solid transparent;color:var(--fg);font-weight:500;filter:none;transform:none;box-shadow:none}
nav a.blogbtn span{color:var(--mute)}
nav a.blogbtn:hover{box-shadow:0 0 18px rgba(168,85,247,.35)}
#stack .grid{grid-template-columns:1fr;gap:24px}
#stack .grid h3{color:var(--fg);font-size:15px;font-weight:600;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:13px;color:var(--fg);transition:border-color .15s,transform .15s}
.chips span:hover{border-color:var(--acc);transform:translateY(-1px)}
.chips span{display:inline-flex;align-items:center;gap:8px}
.chips i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font:700 10px/1 Inter,ui-sans-serif,system-ui,sans-serif;font-style:normal;letter-spacing:-.3px;flex-shrink:0}
#stack .grid{gap:0}
#stack .grid>div{padding:26px 0;border-top:1px solid var(--line)}
#stack .grid>div:first-child{border-top:0;padding-top:0}
#stack .grid h3{font:400 15px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px;color:var(--mute);margin:0 0 16px}
.chips{gap:10px}
.chips span{height:46px;padding:0 16px;gap:12px;border:1.5px solid #2a2a31;border-radius:14px;background:transparent;color:var(--fg);font-size:15px}
.chips span svg{width:22px;height:22px;flex-shrink:0;color:#8e8e98;transition:color .15s}
.chips span:hover{border-color:var(--acc)}
.chips span:hover svg{color:var(--fg)}
.photo img{filter:grayscale(1);transition:filter .35s,transform .35s}
.photo:hover img{filter:none;transform:scale(1)}
.chips span{transition:border-color .15s,background .15s,transform .15s}
.chips span svg{transition:color .15s,transform .15s}
.chips span:hover{border-color:var(--b,var(--acc));background:rgba(255,255,255,.04)}
.chips span:hover svg{color:var(--b,var(--fg));transform:scale(1.15)}
#certificates .card h3,#recent .card h3{font-size:17px}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.certs .card{margin:0}
.project-list{display:grid;width:100%;gap:26px;padding-bottom:18px}
.project-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(30rem,72svh);padding:0;overflow:hidden;border-radius:16px;margin:0}
.project-card:nth-child(1){position:sticky;top:92px;z-index:1}
.project-card:nth-child(2){position:sticky;top:104px;z-index:2}
.project-visual{position:relative;isolation:isolate;display:grid;place-items:center;min-height:min(30rem,72svh);padding:clamp(20px,4vw,42px);overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#3c3b43 0,#27272d 68%)}
.project-visual::before{position:absolute;z-index:0;width:70%;aspect-ratio:1;border-radius:50%;background:var(--project-glow,rgba(124,92,224,.55));content:"";filter:blur(75px);opacity:.22;transform:scale(.84);transition:opacity .55s,transform .7s cubic-bezier(.2,.75,.25,1)}
.project-card:nth-child(2){--project-glow:rgba(59,130,246,.58)}
.project-visual .preview-window{z-index:1;border:1px solid rgba(255,255,255,.1)}
.preview-window{width:100%;max-width:560px;min-height:220px;overflow:hidden;border-radius:10px;background:#f4f4f5;color:#18181b;box-shadow:0 20px 55px rgba(0,0,0,.3);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.preview-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#e4e4e7;border-bottom:1px solid #d4d4d8}
.preview-bar i{width:6px;height:6px;border-radius:50%;background:#a1a1aa}
.preview-brand{margin-left:8px;font-size:9px;font-weight:700}
.aro-preview .preview-brand{color:#7c3aed}
.preview-body{padding:clamp(16px,3vw,30px);text-align:center}
.preview-eyebrow{display:block;margin-bottom:9px;color:#71717a;font-size:7px;font-weight:700;letter-spacing:1px}
.preview-body h4{margin:0 auto 8px;font-size:clamp(15px,2vw,24px);line-height:1.2;letter-spacing:-.5px}
.preview-copy{display:block;max-width:280px;margin:0 auto 16px;color:#71717a;font-size:8px}
.preview-cta{display:inline-block;padding:6px 13px;border-radius:5px;background:#7c3aed;color:#fff;font-size:8px;font-weight:600}
.preview-sources{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:20px}
.preview-sources span{padding:5px 8px;border:1px solid #e4e4e7;border-radius:6px;color:#52525b;font-size:7px}
.inventory-preview .preview-brand{color:#2563eb}
.inventory-preview .preview-body{text-align:left}
.inventory-preview .preview-body h4{margin-left:0}
.inventory-preview .preview-sources{justify-content:flex-start}
.inventory-preview .preview-sources span:first-child{background:#dbeafe;border-color:#bfdbfe}
.inventory-preview .preview-sources span:nth-child(2){background:#fef3c7;border-color:#fde68a}
.inventory-preview .preview-sources span:nth-child(3){background:#dcfce7;border-color:#bbf7d0}
.project-details{display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,4vw,44px)}
.project-card h3{margin:0 0 12px;font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.7px}
.project-card .project-description{margin:0;color:var(--mute);font-size:16px;line-height:1.65}
.project-card .tags{gap:8px;margin:0}
.project-card .tags span{padding:5px 11px;border-radius:999px;background:transparent;font-size:13px}
.project-links{gap:10px}
.project-links a,.project-links a:first-child:not(:last-child){gap:9px;padding:10px 15px;border:1px solid transparent;border-radius:9px;background:#18181d;color:var(--fg);font-size:14px;font-weight:500}
.project-links a:first-child:not(:last-child){background:#f4f4f5;color:#09090b}
.project-links a::after{content:none}
.project-links a:hover,.project-links a:first-child:not(:last-child):hover{background:#25252c;color:var(--fg);box-shadow:none}
.project-links a:first-child:not(:last-child):hover{background:#e4e4e7;color:#09090b}
.project-links svg{width:18px;height:18px;flex-shrink:0}
.project-links .github-mark{fill:currentColor}
.project-links .external-mark{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.project-card:nth-child(1){top:72px}.project-card:nth-child(2){top:82px}.project-card{grid-template-columns:1fr;min-height:0}.project-visual{min-height:0;aspect-ratio:2;padding:clamp(14px,5vw,22px)}.project-details{gap:14px;padding:18px}.preview-window{min-height:0}.project-card h3{margin-bottom:8px}.project-card .project-description{font-size:13px}.project-card .tags span{padding:4px 8px;font-size:11px}}

body{position:relative;isolation:isolate}
body::before{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% -18%,rgba(124,92,224,.14),transparent 55%),radial-gradient(ellipse at 100% 55%,rgba(59,130,246,.045),transparent 38%);content:""}
nav{transition:background .3s,border-color .3s}
nav a,#menu a,.soc a,.chips span,.project-links a{transition-duration:.25s}
.hero .photo{box-shadow:0 0 0 0 rgba(167,139,250,0);transition:transform .5s cubic-bezier(.2,.75,.25,1),box-shadow .5s}
.hero .photo:hover{transform:translateY(-3px);box-shadow:0 12px 42px rgba(124,92,224,.2)}
.project-card{transition:transform .6s cubic-bezier(.2,.75,.25,1),border-color .5s,box-shadow .6s}
.project-card:hover{border-color:rgba(167,139,250,.4);box-shadow:0 22px 65px rgba(0,0,0,.22)}
.project-card.motion-reveal{opacity:1;transform:none;filter:none;transition:border-color .5s,box-shadow .6s}
.project-card.motion-reveal.is-visible,.project-card.motion-reveal.is-visible:hover{opacity:1;transform:none;filter:none}
.project-visual,.project-details{transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1),filter .8s cubic-bezier(.2,.75,.25,1)}
.project-card.motion-reveal:not(.is-visible) .project-visual{opacity:0;transform:scale(.82);filter:blur(7px)}
.project-card.motion-reveal:not(.is-visible) .project-details{opacity:0;transform:translateX(28px);filter:blur(5px)}
.project-card.motion-reveal.is-visible .project-visual,.project-card.motion-reveal.is-visible .project-details{opacity:1;transform:translate(0) scale(1);filter:blur(0)}
.project-card.motion-reveal.is-visible .project-visual{transition-delay:var(--reveal-delay,0ms)}
.project-card.motion-reveal.is-visible .project-details{transition-delay:calc(var(--reveal-delay,0ms) + 140ms)}
.preview-window{position:relative;transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .55s,border-color .55s}
.preview-window::after{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.16) 48%,transparent 70%);content:"";transform:translateX(-130%);transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.project-card:hover .project-visual::before{opacity:.42;transform:scale(1.08)}
.project-card:hover .preview-window{transform:translateY(-3px) scale(1.025);border-color:rgba(255,255,255,.24);box-shadow:0 28px 65px rgba(0,0,0,.38)}
.project-card:hover .preview-window::after{transform:translateX(130%)}
#cal i{transition:transform .2s cubic-bezier(.2,.75,.25,1),filter .2s}
#cal i:hover{position:relative;z-index:1;transform:scale(1.16);filter:brightness(1.3)}
.soc a:hover,.chips span:hover{transform:translateY(-2px)}
body.motion-ready .hero .photo{animation:hero-enter .9s .08s both cubic-bezier(.2,.75,.25,1)}
body.motion-ready .hero .info{animation:hero-enter .85s .2s both cubic-bezier(.2,.75,.25,1)}
@keyframes hero-enter{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.motion-reveal{opacity:0;transform:translateY(22px);filter:blur(3px);transition:opacity .7s cubic-bezier(.2,.75,.25,1),transform .7s cubic-bezier(.2,.75,.25,1),filter .7s cubic-bezier(.2,.75,.25,1);transition-delay:var(--reveal-delay,0ms)}
.motion-reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
@keyframes cinematic-out{to{opacity:0;transform:scale(.992);filter:blur(3px)}}
@keyframes cinematic-in{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
::view-transition-group(root){animation-duration:.65s}
::view-transition-old(root){animation:cinematic-out .28s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:cinematic-in .58s cubic-bezier(.2,.75,.25,1) both}
.section-transition{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;pointer-events:none;visibility:hidden}
.section-transition.is-active{visibility:visible}
.section-transition::before{position:absolute;inset:0;background:linear-gradient(105deg,rgba(9,9,11,.96),rgba(30,25,48,.94) 42%,rgba(30,25,48,.94) 58%,rgba(9,9,11,.96));content:"";transform:scaleX(0);transform-origin:left;opacity:0}
.section-transition.is-active::before{animation:section-wipe .82s cubic-bezier(.76,0,.24,1) both}
.section-transition span{position:relative;color:var(--fg);font-size:clamp(22px,4vw,38px);font-weight:600;letter-spacing:-.04em;opacity:0;transform:translateY(10px);filter:blur(5px)}
.section-transition.is-active span{animation:section-title .56s .14s ease-out both}
@keyframes section-wipe{0%{transform:scaleX(0);opacity:0}12%{opacity:1}52%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes section-title{0%{opacity:0;transform:translateY(10px);filter:blur(5px)}28%,72%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-6px);filter:blur(3px)}}
@keyframes section-arrival{from{opacity:.45;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.section-arrival{animation:section-arrival .65s .12s both cubic-bezier(.2,.75,.25,1)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;transition-delay:0ms!important}
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}
.section-transition{display:none}
.project-card.motion-reveal:not(.is-visible) .project-visual,.project-card.motion-reveal:not(.is-visible) .project-details{opacity:1;transform:none}
.project-card.motion-reveal .project-visual,.project-card.motion-reveal .project-details{opacity:1;transform:none;filter:none}
.project-card:hover .project-visual::before{transform:none}
.project-card:hover .preview-window{transform:none}
.motion-reveal{opacity:1;transform:none;filter:none}
}

#stack .grid{gap:0}
#stack .grid>div{padding:26px 0;border-top:1px solid var(--line)}
#stack .grid>div:first-child{border-top:0;padding-top:0}
#stack .grid h3{font:400 15px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px;color:var(--mute);margin:0 0 16px}
.chips{gap:10px}
.chips span{height:46px;padding:0 16px;gap:12px;border:1.5px solid #2a2a31;border-radius:14px;background:transparent;color:var(--fg);font-size:15px}
.chips span svg{width:22px;height:22px;flex-shrink:0;color:#8e8e98;transition:color .15s}
.chips span:hover{border-color:var(--acc)}
.chips span:hover svg{color:var(--fg)}
.photo img{filter:grayscale(1);transition:filter .35s,transform .35s}
.photo:hover img{filter:none;transform:scale(1)}
.chips span{transition:border-color .15s,background .15s,transform .15s}
.chips span svg{transition:color .15s,transform .15s}
.chips span:hover{border-color:var(--b,var(--acc));background:rgba(255,255,255,.04)}
.chips span:hover svg{color:var(--b,var(--fg));transform:scale(1.15)}
.tech-stack-section { display: flex; flex-direction: column; gap: 0; }
.tech-row { display: grid; grid-template-columns: clamp(100px, 19vw, 260px) minmax(0, 1fr); align-items: center; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.tech-row:first-of-type { border-top: none; padding-top: 0; }
.tech-label { color: rgba(255,255,255,0.85); font-size: 1.05rem; font-weight: 500; }
.tech-pills { display: flex; flex-wrap: nowrap; gap: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tech-pills::-webkit-scrollbar { display: none; }
.tech-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--fg); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; transition: border-color .18s,background .18s,transform .18s; }
.tech-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; fill: #8e8e98; color: #8e8e98; transition: color .18s,fill .18s,transform .18s; }
.tech-icon .icon-cutout { fill: var(--bg); }
.tech-icon.icon-react { fill: none; stroke: currentColor; stroke-width: 1.7; }
.tech-pill:hover { border-color: var(--acc); background: rgba(255,255,255,.035); }
.tech-pill:hover .tech-icon { fill: var(--fg); color: var(--fg); transform: scale(1.08); }
.tech-pill:hover .tech-icon.icon-react { fill: none; }
#stack .tech-pill:hover .tech-icon.js-icon { fill: #f7df1e; }
#stack .tech-row:nth-of-type(1) .tech-pill:nth-child(1):hover .tech-icon { fill: #3776ab; }
#stack .tech-row:nth-of-type(1) .tech-pill:nth-child(2):hover .tech-icon { fill: #3178c6; }
#stack .tech-row:nth-of-type(1) .tech-pill:nth-child(3):hover .tech-icon { fill: #f7df1e; }
#stack .tech-row:nth-of-type(2) .tech-pill:nth-child(1):hover .tech-icon { fill: #e34f26; }
#stack .tech-row:nth-of-type(2) .tech-pill:nth-child(2):hover .tech-icon { fill: #1572b6; }
#stack .tech-row:nth-of-type(2) .tech-pill:nth-child(3):hover .tech-icon { fill: #38bdf8; }
#stack .tech-row:nth-of-type(2) .tech-pill:nth-child(4):hover .tech-icon { fill: none; stroke: #61dafb; }
#stack .tech-row:nth-of-type(2) .tech-pill:nth-child(5):hover .tech-icon { fill: #fff; }
#stack .tech-row:nth-of-type(3) .tech-pill:nth-child(1):hover .tech-icon { fill: #5fa04e; }
#stack .tech-row:nth-of-type(3) .tech-pill:nth-child(2):hover .tech-icon { fill: #fff; }
#stack .tech-row:nth-of-type(3) .tech-pill:nth-child(3):hover .tech-icon { fill: #009688; }
#stack .tech-row:nth-of-type(4) .tech-pill:nth-child(1):hover .tech-icon { fill: #a78bfa; }
#stack .tech-row:nth-of-type(4) .tech-pill:nth-child(2):hover .tech-icon { fill: #38bdf8; }
#stack .tech-row:nth-of-type(4) .tech-pill:nth-child(3):hover .tech-icon { fill: #a78bfa; }
#stack .tech-row:nth-of-type(4) .tech-pill:nth-child(4):hover .tech-icon { fill: #2596be; }
#stack .tech-row:nth-of-type(5) .tech-pill:nth-child(1):hover .tech-icon { fill: #4169e1; }
#stack .tech-row:nth-of-type(5) .tech-pill:nth-child(2):hover .tech-icon { fill: #47a248; }
#stack .tech-row:nth-of-type(5) .tech-pill:nth-child(3):hover .tech-icon { fill: #ff4438; }
.tech-pill:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
@media(max-width:640px){.tech-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 0}.tech-label{font-size:1rem}.tech-pills{flex-wrap:wrap;gap:8px;overflow:visible}.tech-pill{min-height:46px;padding:0 12px;gap:8px;font-size:14px}.tech-icon{width:22px;height:22px;flex-basis:22px}}
#certificates .card h3,#recent .card h3{font-size:17px}