:root{
  --bg:#030303;
  --text:#f5f5f3;
  --muted:rgba(245,245,243,.52);
  --faint:rgba(245,245,243,.22);
  --soft:rgba(245,245,243,.08);
  --blue:rgba(118,176,255,.55);
  --max:1440px;
  --gutter:clamp(20px,4vw,72px);
  --vh:100vh;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);overflow-x:hidden;line-height:1.35}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(255,255,255,.18)}
#field,.field-vignette,.field-glow,.cursor-orb{position:fixed;inset:0;pointer-events:none}
#field{z-index:0;width:100%;height:100%;opacity:1;mix-blend-mode:screen}
.field-vignette{z-index:1;background:radial-gradient(circle at 50% 40%,transparent 16%,rgba(3,3,3,.03) 48%,rgba(3,3,3,.46) 100%);mix-blend-mode:normal}
.field-glow{z-index:1;inset:auto;width:min(40vw,560px);height:min(40vw,560px);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(93,142,216,.07),transparent 68%);mix-blend-mode:screen}
.cursor-orb{z-index:8;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 65%);opacity:0;transform:translate3d(-95px,-95px,0);transition:opacity .25s ease}
.shell{width:min(calc(100% - (var(--gutter) * 2)),var(--max));margin-inline:auto;position:relative;z-index:2}
.nav{position:fixed;top:0;left:0;right:0;height:72px;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:10;mix-blend-mode:difference}
.mark{font-size:14px;font-weight:800;letter-spacing:.08em;justify-self:start}
.nav nav{display:flex;gap:24px;font-size:12px;color:rgba(255,255,255,.62)}
.nav nav a,.nav-link{transition:color .25s ease,opacity .25s ease}
.nav nav a:hover,.nav-link:hover{color:#fff}
.nav-link{justify-self:end;font-size:12px;color:rgba(255,255,255,.62)}
.cover{min-height:100svh;min-height:var(--vh);display:grid;align-items:end;padding:clamp(92px,12vh,160px) 0 clamp(32px,7vh,90px);position:relative;z-index:2}
.cover-inner{display:flex;flex-direction:column;justify-content:flex-end;min-height:72svh}
.eyebrow,.micro,.section-number,.cover-foot,.socials{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{color:var(--muted);margin:0 0 clamp(26px,6vh,72px)}
.cover-title,.headline{margin:0;font-weight:520;letter-spacing:-.055em;line-height:.94;max-width:12ch}
.cover-title{font-size:clamp(58px,11vw,180px)}
.cover-statement{margin:clamp(24px,4vh,42px) 0 0;font-size:clamp(18px,2.1vw,32px);letter-spacing:-.025em;color:rgba(255,255,255,.75);max-width:18ch}
.line-mask{display:block;overflow:hidden}
.line{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.is-in .line,.reveal-line{transform:translateY(0)}
.reveal-line{opacity:0;transform:translateY(110%);animation:enter 1s cubic-bezier(.16,1,.3,1) forwards}
.delay-1{animation-delay:.13s}.delay-2{animation-delay:.25s}
@keyframes enter{to{opacity:1;transform:translateY(0)}}
.cover-foot{margin-top:clamp(42px,8vh,96px);display:flex;justify-content:space-between;color:rgba(255,255,255,.38)}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue i{width:28px;height:1px;background:rgba(255,255,255,.38);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scan 2.1s ease-in-out infinite}
@keyframes scan{50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.section{position:relative;z-index:2;padding:clamp(120px,18vh,260px) 0}
.section-grid,.system-wrap,.stack-wrap,.contact-wrap{display:grid;grid-template-columns:80px minmax(0,1fr);gap:clamp(34px,6vw,110px)}
.section-number{color:rgba(255,255,255,.26);padding-top:.55em}
.micro{margin:0 0 22px;color:rgba(255,255,255,.42)}
.headline{font-size:clamp(44px,7vw,100px)}
.body-copy{font-size:clamp(16px,1.6vw,23px);color:rgba(255,255,255,.56);max-width:30ch;margin:clamp(24px,4vh,42px) 0 0}
.signal-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(42px,7vh,76px)}
.signal{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.58);font-size:12px;letter-spacing:.05em}
.signal i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
.signal:hover i,.signal.is-active i{background:#fff;transform:scale(1.9);box-shadow:0 0 20px rgba(255,255,255,.55)}
.signal.is-active{color:#fff}
.section-intro{display:grid;grid-template-columns:80px minmax(0,1fr);gap:clamp(34px,6vw,110px);align-items:start}
.system-wrap,.stack-wrap{display:block}
.system-wrap .section-intro,.stack-wrap .section-intro{margin-bottom:clamp(50px,9vh,110px)}
.system-canvas{position:relative;min-height:min(62vw,720px);max-height:720px;aspect-ratio:1.7/1;max-width:1120px;margin-inline:auto}
.system-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,8vw,110px);height:clamp(72px,8vw,110px);border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.025);box-shadow:0 0 100px rgba(255,255,255,.06)}
.system-core span,.system-node span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.system-node{position:absolute;width:clamp(76px,9vw,112px);height:clamp(76px,9vw,112px);border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(3,3,3,.3);display:grid;place-items:center;cursor:pointer;transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease}
.system-node:hover,.system-node.is-active{border-color:rgba(255,255,255,.38);box-shadow:0 0 60px rgba(109,167,255,.08);transform:scale(1.08) translate3d(var(--dx,0),var(--dy,0),0)}
.node-a{left:10%;top:18%}.node-b{right:8%;top:25%}.node-c{left:18%;bottom:11%}.node-d{right:15%;bottom:14%}
.system-path{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform-origin:left center;opacity:.5;transition:opacity .4s ease,background .4s ease}
.path-a{left:50%;top:50%;width:36%;transform:rotate(-155deg)}
.path-b{left:50%;top:50%;width:34%;transform:rotate(-22deg)}
.path-c{left:50%;top:50%;width:34%;transform:rotate(158deg)}
.path-d{left:50%;top:50%;width:33%;transform:rotate(32deg)}
.system-canvas:has(.system-node:hover) .system-path{opacity:.8;background:linear-gradient(90deg,transparent,rgba(118,176,255,.5),transparent)}
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(42px,8vw,120px);align-items:start}
.work{min-width:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.work-media{display:block;position:relative;overflow:hidden;aspect-ratio:1.35/1;background:#090909}
.work-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.42));pointer-events:none}
.work-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.82) contrast(1.03);transform:scale(1.001);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s ease}
.work:hover .work-media img{transform:scale(1.045);filter:saturate(.95) contrast(1.04)}
.work-index{position:absolute;left:18px;top:16px;font-size:11px;letter-spacing:.1em;color:#fff;z-index:1}
.work-copy{padding-top:22px}
.work-copy h3{font-size:clamp(34px,4vw,62px);line-height:1;letter-spacing:-.05em;font-weight:520;margin:0 0 14px}
.work-copy>p:not(.micro){margin:0;color:rgba(255,255,255,.52);font-size:14px;max-width:36ch}
.text-link{display:inline-block;margin-top:20px;font-size:12px;color:rgba(255,255,255,.76);position:relative}
.text-link::after{content:"";display:block;width:100%;height:1px;background:rgba(255,255,255,.25);margin-top:5px;transform-origin:left;transition:transform .35s ease}
.text-link:hover::after{transform:scaleX(.28)}
.skill-rail{position:relative;padding:clamp(50px,8vh,100px) 0 0}
.skill-track{height:1px;background:rgba(255,255,255,.1);position:relative;margin:0 3%}
.skill-progress{position:absolute;left:0;top:-1px;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#fff,rgba(118,176,255,.7));box-shadow:0 0 22px rgba(118,176,255,.22);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.skill-rail.is-in .skill-progress{transform:scaleX(1)}
.skill-node{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap}
.skill-node::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);margin:0 auto 14px;transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
.skill-node:hover::before{transform:scale(1.7);background:#fff;box-shadow:0 0 16px rgba(255,255,255,.6)}
.skill-python{left:0}.skill-cpp{left:22%}.skill-dsa{left:43%}.skill-git{left:61%}.skill-dart{left:78%}.skill-flutter{left:100%}
.skill-caption{margin:52px 3% 0;color:rgba(255,255,255,.42);font-size:13px}
.contact-wrap{padding-top:0}
.contact-title{max-width:16ch}
.contact-email{display:inline-block;margin-top:clamp(30px,5vh,54px);font-size:clamp(18px,2.2vw,30px);letter-spacing:-.02em;position:relative}
.contact-email::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:rgba(255,255,255,.2);transition:transform .35s ease;transform-origin:left}
.contact-email:hover::after{transform:scaleX(.3)}
.socials{margin-top:clamp(42px,7vh,70px);display:flex;gap:28px;color:rgba(255,255,255,.42)}
.socials a:hover{color:#fff}
.footer{padding:28px 0 38px;display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.24);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.noscript{position:fixed;left:16px;right:16px;bottom:16px;z-index:20;padding:12px;background:#fff;color:#000;font-size:12px}
@media (max-width:900px){
  .nav{height:64px;grid-template-columns:1fr auto}.nav nav{display:none}
  .nav-link{font-size:11px}
  .section-grid,.section-intro,.contact-wrap{grid-template-columns:44px minmax(0,1fr);gap:22px}
  .section{padding:110px 0}
  .system-canvas{min-height:66vw}
  .works{gap:50px}
}
@media (max-width:620px){
  :root{--gutter:20px}
  .cover{padding-top:90px;padding-bottom:28px}
  .cover-inner{min-height:78svh}
  .cover-title{font-size:clamp(54px,17vw,92px)}
  .cover-statement{font-size:18px}
  .cover-foot{font-size:9px;gap:18px}
  .cover-foot>span:first-child{display:none}
  .section{padding:92px 0}
  .section-grid,.section-intro,.contact-wrap{grid-template-columns:30px minmax(0,1fr);gap:16px}
  .section-number{font-size:9px}
  .headline{font-size:clamp(40px,12.5vw,62px)}
  .body-copy{font-size:15px;max-width:28ch}
  .signal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .system-canvas{aspect-ratio:1/1.12;min-height:0;max-height:none}
  .system-node{width:72px;height:72px}
  .node-a{left:0;top:15%}.node-b{right:0;top:22%}.node-c{left:6%;bottom:10%}.node-d{right:4%;bottom:12%}
  .path-a{width:27%;transform:rotate(-166deg)}.path-b{width:29%;transform:rotate(-15deg)}.path-c{width:28%;transform:rotate(171deg)}.path-d{width:28%;transform:rotate(16deg)}
  .works{grid-template-columns:1fr;gap:70px}
  .work-copy h3{font-size:40px}
  .skill-track{margin:0 2%}
  .skill-node{font-size:8px}
  .skill-node::before{width:6px;height:6px;margin-bottom:12px}
  .skill-cpp{left:20%}.skill-dsa{left:40%}.skill-git{left:60%}.skill-dart{left:80%}
  .skill-caption{margin-inline:2%}
  .socials{gap:18px;flex-wrap:wrap;font-size:10px}
  .footer{font-size:8px;align-items:flex-start;flex-direction:column;padding-bottom:26px}
}
@media (orientation:landscape) and (max-height:560px){
  .cover-inner{min-height:88svh}
  .cover{padding-top:76px;padding-bottom:24px}
  .cover-foot{margin-top:32px}
  .section{padding:90px 0}
}
@media (min-width:1600px) and (min-height:850px){.cover-inner{min-height:68svh}.section{padding-block:240px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #field,.cursor-orb{display:none}
}
.error-page{min-height:100svh;display:grid;place-items:center;background:var(--bg);color:var(--text)}
.error-inner{padding-block:40px}
.error-inner .headline{max-width:14ch}

/* Section worlds + scroll-locked shutter */
html.shutter-lock,body.shutter-lock{overflow:hidden!important;overscroll-behavior:none}
.shutter{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;background:rgba(0,0,0,.98);opacity:1;transition:opacity .5s ease .95s}
.shutter-panel{position:absolute;left:0;width:100%;height:50.5%;background:linear-gradient(180deg,rgba(2,4,10,.985),rgba(1,2,6,.96));box-shadow:0 0 90px rgba(43,103,192,.10);will-change:transform}
.shutter-top{top:0;transform:translateY(0)}
.shutter-bottom{bottom:0;transform:translateY(0)}
.shutter::before,.shutter::after{content:"";position:absolute;inset:0;pointer-events:none}
.shutter::before{background:radial-gradient(circle at 50% 50%,rgba(80,144,255,.12),transparent 42%),radial-gradient(circle at 50% 50%,rgba(43,105,210,.08),transparent 72%);opacity:.95}
.shutter::after{background:linear-gradient(90deg,transparent 0%,rgba(91,164,255,.12) 50%,transparent 100%);mix-blend-mode:screen;opacity:.7}
.shutter-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:rgba(160,205,255,.82);font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:opacity .35s ease,transform .35s ease}
.shutter.is-opening .shutter-top{transform:translateY(-100%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.shutter.is-opening .shutter-bottom{transform:translateY(100%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
.shutter.is-opening .shutter-label{opacity:0;transform:translate(-50%,-65%)}
.shutter.is-open{opacity:0;pointer-events:none}

/* Larger, brighter particles without turning the page into a disco ball. */
#field{opacity:1}
.field-vignette{background:radial-gradient(circle at 50% 44%,transparent 18%,rgba(3,3,3,.02) 40%,rgba(3,3,3,.56) 100%)}
.field-glow{width:min(54vw,760px);height:min(54vw,760px);background:radial-gradient(circle,rgba(120,170,255,.09),transparent 67%);opacity:.75}
.cursor-orb{width:230px;height:230px;transform:translate3d(-115px,-115px,0);background:radial-gradient(circle,rgba(255,255,255,.09),transparent 64%)}

.section{isolation:isolate}
.section-about{--world-rgb:255,255,255}
.section-system{--world-rgb:255,255,255}
.section-work{--world-rgb:246,197,70}
.section-stack{--world-rgb:255,78,78}
.section-contact{--world-rgb:255,157,47}

.section::before{content:"";position:absolute;inset:12% 0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(var(--world-rgb),.035),transparent 56%);opacity:.9}
.section-work::before{background:radial-gradient(circle at 50% 46%,rgba(246,197,70,.07),transparent 58%)}
.section-stack::before{background:radial-gradient(circle at 50% 46%,rgba(255,48,48,.055),transparent 58%)}
.section-contact::before{background:radial-gradient(circle at 50% 45%,rgba(255,146,36,.09),transparent 58%)}

/* Circular project presentation */
.works{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(60px,10vw,160px);justify-items:center}
.work{width:min(100%,520px);display:flex;flex-direction:column;align-items:center}
.work-media{width:min(100%,480px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(246,197,70,.18),rgba(9,9,9,.96) 62%);border:1px solid rgba(246,197,70,.18);box-shadow:0 0 0 1px rgba(246,197,70,.035),0 0 90px rgba(246,197,70,.08);transition:box-shadow .7s ease,border-color .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.work-media::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(246,197,70,.12);box-shadow:inset 0 0 80px rgba(246,197,70,.06)}
.work-media::after{background:radial-gradient(circle at 52% 44%,transparent 28%,rgba(0,0,0,.08) 54%,rgba(0,0,0,.46) 100%);border-radius:50%}
.work-media img{object-fit:cover;mix-blend-mode:screen;filter:saturate(.6) contrast(1.05) brightness(.82);transform:scale(1.08);transition:transform 1.3s cubic-bezier(.16,1,.3,1),filter .7s ease}
.work:hover .work-media{box-shadow:0 0 0 1px rgba(246,197,70,.16),0 0 110px rgba(246,197,70,.16);border-color:rgba(246,197,70,.34);transform:scale(1.018)}
.work:hover .work-media img{transform:scale(1.14);filter:saturate(.84) contrast(1.07) brightness(.95)}
.work-index{left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.16em;color:rgba(255,238,189,.84);mix-blend-mode:screen}
.work-copy{text-align:center;padding-top:24px}
.work-copy h3{font-size:clamp(30px,3.3vw,50px)}
.work-copy>p:not(.micro){max-width:26ch}
.work-copy .text-link{color:rgba(246,197,70,.76)}
.work-copy .text-link::after{background:rgba(246,197,70,.26)}

/* Red upward skill progression */
.skill-track{height:2px;background:rgba(255,78,78,.16)}
.skill-progress{height:4px;background:linear-gradient(90deg,rgba(255,120,120,.9),rgba(255,48,48,.95));box-shadow:0 0 26px rgba(255,48,48,.32)}
.skill-node{color:rgba(255,157,157,.78)}
.skill-node::before{background:rgba(255,78,78,.7);box-shadow:0 0 14px rgba(255,48,48,.24)}
.skill-node:hover::before{background:#ff6b6b;box-shadow:0 0 22px rgba(255,48,48,.7)}
.skill-rail{overflow:visible}
.skill-rail::after{content:"";position:absolute;left:3%;right:3%;bottom:24%;height:60%;background:linear-gradient(180deg,transparent,rgba(255,48,48,.05));clip-path:polygon(0 100%,16% 84%,32% 72%,48% 53%,65% 39%,81% 18%,100% 0,100% 3%,81% 23%,65% 44%,48% 58%,32% 77%,16% 89%,0 100%);opacity:.8;pointer-events:none}
.skill-node{transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s ease}
.skill-node:hover{transform:translate(-50%,-65%);color:#fff}

/* Contact is allowed to glow like a star, but remains readable. */
.section-contact{min-height:92svh;display:grid;align-items:center}
.contact-wrap{position:relative;z-index:3}
.contact-title{max-width:12ch}
.contact-email{color:rgba(255,223,182,.92)}
.contact-email::after{background:rgba(255,157,47,.38)}
.socials a:hover{color:#ffd28a}

@media (max-width:900px){
  .works{grid-template-columns:1fr;gap:76px}
  .work-media{width:min(82vw,430px)}
}
@media (max-width:620px){
  .shutter-label{font-size:8px;letter-spacing:.16em}
  .cursor-orb{width:180px;height:180px;transform:translate3d(-90px,-90px,0)}
  .work-media{width:min(82vw,360px)}
}

/* Dense interactive dotted field inspired by editorial particle interfaces. */
.shutter-field{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:1}
.shutter-panel{z-index:2}
.shutter-label{z-index:3}