:root{--bg:#050608;--fg:#e8eaee;--muted:#9aa1ad;--line:#1d2129;--soft:#0e1116;--accent:#5fb0f7;--nav:56px;--x:50vw;--y:50vh;--r:min(320px,42vmax)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:6px;z-index:60}
.skip:focus{left:8px}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:10;background:rgba(5,6,8,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px}
.name{font-weight:600;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:20px}
nav a{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a.active{color:var(--fg);border-color:var(--accent)}
section{padding:56px 0;border-bottom:1px solid var(--line);scroll-margin-top:var(--nav)}
section:last-of-type{border-bottom:0}
.intro{padding:88px 0 64px}
.meta{color:var(--muted);font-size:15px;margin:0 0 16px}
h1{font-size:clamp(32px,5.5vw,44px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 16px}
.lead{font-size:19px;color:var(--muted);margin:0 0 32px;max-width:600px}
h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 24px}
h3{font-size:17px;font-weight:600;margin:0}
h3 a{text-decoration:none}
p{margin:0 0 16px}
section p:last-child{margin-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:500;font-size:15px;transition:border-color .2s,background .2s,color .2s}
.btn:hover{border-color:var(--fg);color:var(--fg)}
.btn.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0;padding-top:0}
.list p{color:var(--muted);font-size:15px;margin:4px 0 0}
.when{flex:0 0 112px;color:var(--muted);font-size:15px;padding-top:1px}
.projects li{justify-content:space-between;align-items:flex-start}
.tag{flex:none;font-size:12px;font-weight:500;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin-top:2px}
.tag.live{color:#86efac;background:#08180e;border-color:#14532d}
.skills{margin:0;display:grid;gap:12px}
.skills div{display:flex;gap:24px}
.skills dt{flex:0 0 112px;color:var(--muted);font-size:15px}
.skills dd{margin:0}
.links{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.links a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#3a404b}
.links a:hover{text-decoration-color:var(--accent)}
.foot{padding-top:32px;padding-bottom:96px;color:var(--muted);font-size:14px}

/* Interactive light: darkness with a hole where the lamp is */
.dark,.lamp,.switch,.hint{display:none}
.js .dark{display:block;position:fixed;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(circle var(--r) at var(--x) var(--y),rgba(95,176,247,.07) 0,rgba(0,0,0,0) 30%,rgba(2,3,4,.7) 62%,#000 100%);
  transition:opacity .6s ease}
.js .lamp{display:block;position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:41;pointer-events:none;background:#fff;
  transform:translate(var(--x),var(--y));
  box-shadow:0 0 .6vh .3vh #a6d3fa,0 0 1.4vh .7vh #a6d3fa,0 0 4vh 1vh #8fc8f9,0 0 9vh 1vh #79bdf8,0 0 16vh 1vh rgba(95,176,247,.55),0 0 30vh 1vh rgba(95,176,247,.25);
  transition:opacity .6s ease}
.dock{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;gap:10px;align-items:center}
.js .switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #2a303a;background:#0b0e13;color:var(--fg);font:500 14px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
.js .switch::before{content:"";width:8px;height:8px;border-radius:50%;background:#3a404b;transition:background .2s,box-shadow .2s}
.js .switch:hover{border-color:var(--accent)}
.js .switch[aria-pressed="true"]::before{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.js .hint{display:block;position:fixed;left:20px;bottom:30px;z-index:50;margin:0;color:#5b626e;font-size:13px;pointer-events:none;transition:opacity .4s}
.js.lit .dark,.js.lit .lamp,.js.lit .hint,.js.moved .hint{opacity:0}
.js.touch .lamp{width:10px;height:10px;margin:-5px 0 0 -5px}

@media (max-width:600px){
  body{font-size:16px}
  nav{gap:12px}
  nav a{font-size:14px}
  .name{font-size:15px}
  .intro{padding:56px 0 48px}
  .list li,.skills div{flex-direction:column;gap:4px}
  .projects li{flex-direction:row;gap:12px}
  .when,.skills dt{flex-basis:auto}
  .js .hint{display:none}
}
@media (max-width:420px){nav a[href="#about"]{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Nav CTA */
.nav-cta{color:var(--bg)!important;background:var(--accent);border:0!important;border-radius:999px;padding:6px 14px!important;font-weight:600}
.nav-cta:hover{background:var(--fg)}

/* Socials carousel */
.row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.row-head h2{margin:0}
.car-ctrl{display:flex;gap:8px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--fg);font:500 18px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.car-btn:hover{border-color:var(--accent);color:var(--accent)}
.car-btn:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--fg)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.carousel::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:220px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--soft);text-decoration:none;transition:border-color .2s,transform .2s}
.slide:hover{border-color:var(--accent);color:var(--fg)}
.badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--fg);color:var(--bg);font-weight:700;font-size:16px;margin-bottom:10px}
.plat{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.handle{font-size:22px;font-weight:700;letter-spacing:-.01em}
.desc{color:var(--muted);font-size:15px}
.go{margin-top:auto;padding-top:12px;color:var(--accent);font-weight:600;font-size:15px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:16px}
.dots span{width:6px;height:6px;border-radius:50%;background:#2a303a;transition:background .2s,width .2s}
.dots span.on{background:var(--accent);width:18px;border-radius:3px}
@media (max-width:600px){.carousel{grid-auto-columns:88%}.nav-cta{padding:6px 12px!important}nav a[href="#experience"]{display:none}}
@media (max-width:420px){nav a[href="#projects"]{display:none}}

.float-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--accent);color:#04121f;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 0 18px rgba(95,176,247,.55),0 0 48px rgba(95,176,247,.25);transition:background .2s,box-shadow .2s}
.float-cta:hover{background:#8fc8f9;color:#04121f;box-shadow:0 0 24px rgba(95,176,247,.75),0 0 64px rgba(95,176,247,.35)}
@media (max-width:600px){.dock{left:12px;right:12px;bottom:12px;justify-content:space-between}.float-cta{flex:1;justify-content:center}}

/* Expandable project rows */
.sub{color:var(--muted);font-size:15px;margin:-12px 0 20px}
.projects li{display:block;padding:0;border-top:1px solid var(--line)}
.projects li:first-child{border-top:0}
.proj summary{list-style:none;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:16px 0;cursor:pointer}
.proj summary::-webkit-details-marker{display:none}
.proj summary>div{flex:1}
.proj summary:hover h3{color:var(--accent)}
.chev{flex:none;width:10px;height:10px;margin-top:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.proj[open] .chev{transform:rotate(-135deg);margin-top:12px}
.proj-body{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:4px 0 20px}
.proj-body h4{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.proj-body p{margin:0;font-size:14px;color:var(--muted)}
.more{grid-column:1/-1;font-weight:600;color:var(--accent);text-decoration:none}
.more:hover{text-decoration:underline}

/* Project pages */
.case-head{padding-top:56px}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:15px;margin-bottom:24px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:4px 0 0;font-size:15px}
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--soft);margin-bottom:24px;width:fit-content;max-width:100%;overflow-x:auto}
.tabs [role=tab]{min-height:40px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 15px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tabs [role=tab]:hover{color:var(--fg)}
.tabs [role=tab][aria-selected=true]{background:var(--fg);color:var(--bg)}
.big{font-size:19px;line-height:1.6}
.points{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.points li{position:relative;padding-left:20px;color:var(--muted)}
.points li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:2px;background:var(--accent)}
.real{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.real h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.check{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check li{position:relative;padding-left:26px;font-size:15px}
.check li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;border:2px solid #3a404b}
.check.done li::before{border-color:#22c55e;background:radial-gradient(circle,#22c55e 0 3px,transparent 4px)}
.check.todo li{color:var(--muted)}
.meter{margin-top:24px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,var(--accent))}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:f}
.step{width:100%;display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--fg);font:600 16px Inter,system-ui,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s}
.step:hover,.step[aria-expanded=true]{border-color:var(--accent)}
.num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:13px}
.step[aria-expanded=true] .num{background:var(--accent);color:var(--bg)}
.step-body{margin:8px 0 8px 56px;color:var(--muted)}
.case-end .actions{margin-bottom:32px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:600}
.pager a:hover{border-color:var(--accent)}
.pager small{font-weight:400;color:var(--muted);font-size:13px}
.pager .next{text-align:right}
@media (max-width:600px){.proj-body,.real,.facts{grid-template-columns:1fr}.step-body{margin-left:14px}}