/* Abdullah Mir portfolio */

/* Layout: a personal profile sidebar on the left (who I am, where to go) and one page at a time on the right.
   Cyan marks anything mobile, amber marks anything data. Chart series use their own validated tokens (--s1..--s3). */
:root{
  --bg:#0B0E12; --side:#0F1319; --surface:#141922; --surface-2:#1B222D; --line:#252D39;
  --fg:#E8EDF3; --muted:#8793A3;
  --mobile:#43C6F0; --data:#F6B341; --on:#04202A;
  --s1:#2896C0; --s2:#C98419; --s3:#7767E0;
  --accent:var(--mobile);
  --display:"Geist","Segoe UI",system-ui,sans-serif;
  --body:"Geist","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:"Instrument Serif","Times New Roman",serif;
  --r:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  /* light theme: airy, with a soft colour wash behind the page, raised white cards and brighter accents.
     Text colours all keep at least 4.5:1 on white and on the page background. */
  --bg:#F3F6FC; --side:#F8FAFE; --surface:#FFFFFF; --surface-2:#EBF1FA; --line:#D8E1EE;
  --fg:#0B1220; --muted:#4A5870; --mobile:#0775A8; --data:#B45309; --on:#FFFFFF;
  --s1:#0775A8; --s2:#B45309; --s3:#5B4BDB; color-scheme:light;
  --mobile-hi:#1AA7E0; --data-hi:#F59E0B;
  --mesh:radial-gradient(1000px 640px at 88% -8%,rgba(56,189,248,.30),transparent 62%),radial-gradient(900px 640px at -6% 100%,rgba(251,191,36,.26),transparent 60%),radial-gradient(760px 560px at 58% 64%,rgba(139,127,255,.11),transparent 70%);
  --blob-op:.12; --hlmix:16%; --band-bg:linear-gradient(110deg,rgba(56,189,248,.22),rgba(139,127,255,.13) 52%,rgba(251,191,36,.26)),#FFFFFF; --name-grad:linear-gradient(100deg,#0775A8,#6657D9 36%,#B45309 68%,#0775A8); --glow-mix:22%; --bandmix:20%;
  --sh:0 1px 2px rgba(16,32,64,.05),0 12px 30px -16px rgba(16,32,64,.22); --shh1:0 2px 4px rgba(16,32,64,.05); --shmix:46%;
  --side-bg:linear-gradient(180deg,rgba(255,255,255,.9),rgba(236,244,253,.84)); --side-sh:10px 0 40px -26px rgba(16,40,90,.28); --side-sh-m:0 10px 24px -18px rgba(16,40,90,.4);
  --ind-bg:#FFFFFF; --ind-sh:0 1px 2px rgba(16,32,64,.06),0 8px 18px -10px rgba(16,40,90,.28);
  --btn-sheen:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 62%); --btn-sh1:inset 0 1px 0 rgba(255,255,255,.35); --btnmix:58%;
  --ghost-bg:rgba(255,255,255,.7);
  --shc:rgba(16,40,90,.34); --shc2:rgba(16,40,90,.26); --shp:rgba(16,40,90,.5)}}
:root[data-theme="light"]{
  /* light theme: airy, with a soft colour wash behind the page, raised white cards and brighter accents.
     Text colours all keep at least 4.5:1 on white and on the page background. */
  --bg:#F3F6FC; --side:#F8FAFE; --surface:#FFFFFF; --surface-2:#EBF1FA; --line:#D8E1EE;
  --fg:#0B1220; --muted:#4A5870; --mobile:#0775A8; --data:#B45309; --on:#FFFFFF;
  --s1:#0775A8; --s2:#B45309; --s3:#5B4BDB; color-scheme:light;
  --mobile-hi:#1AA7E0; --data-hi:#F59E0B;
  --mesh:radial-gradient(1000px 640px at 88% -8%,rgba(56,189,248,.30),transparent 62%),radial-gradient(900px 640px at -6% 100%,rgba(251,191,36,.26),transparent 60%),radial-gradient(760px 560px at 58% 64%,rgba(139,127,255,.11),transparent 70%);
  --blob-op:.12; --hlmix:16%; --band-bg:linear-gradient(110deg,rgba(56,189,248,.22),rgba(139,127,255,.13) 52%,rgba(251,191,36,.26)),#FFFFFF; --name-grad:linear-gradient(100deg,#0775A8,#6657D9 36%,#B45309 68%,#0775A8); --glow-mix:22%; --bandmix:20%;
  --sh:0 1px 2px rgba(16,32,64,.05),0 12px 30px -16px rgba(16,32,64,.22); --shh1:0 2px 4px rgba(16,32,64,.05); --shmix:46%;
  --side-bg:linear-gradient(180deg,rgba(255,255,255,.9),rgba(236,244,253,.84)); --side-sh:10px 0 40px -26px rgba(16,40,90,.28); --side-sh-m:0 10px 24px -18px rgba(16,40,90,.4);
  --ind-bg:#FFFFFF; --ind-sh:0 1px 2px rgba(16,32,64,.06),0 8px 18px -10px rgba(16,40,90,.28);
  --btn-sheen:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 62%); --btn-sh1:inset 0 1px 0 rgba(255,255,255,.35); --btnmix:58%;
  --ghost-bg:rgba(255,255,255,.7);
  --shc:rgba(16,40,90,.34); --shc2:rgba(16,40,90,.26); --shp:rgba(16,40,90,.5)}
body[data-mode="data"]{--accent:var(--data)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.65 var(--body);margin:0;overflow-x:hidden;transition:background .4s}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.03em}
p{margin:0}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:26px 26px;opacity:.55;
  mask-image:radial-gradient(ellipse 70% 55% at 75% 8%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 70% 55% at 75% 8%,#000 10%,transparent 72%)}
.bg::after{content:"";position:absolute;width:560px;height:560px;max-width:90vw;border-radius:50%;right:-120px;top:-200px;background:var(--accent);filter:blur(130px);opacity:var(--blob-op,.14);transition:background .6s}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--mesh,none)}
.routebar{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.routebar.go{animation:route .7s ease-out}
@keyframes route{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---------- shell ---------- */
:root{--sw:clamp(248px,18vw,300px);--gut:clamp(16px,2.6vw,44px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.layout{position:relative;z-index:1;display:grid;grid-template-columns:var(--sw) minmax(0,1fr);max-width:none;margin:0}
.side{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:calc(30px + env(safe-area-inset-top,0px)) clamp(18px,1.8vw,28px) 22px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--side-bg,var(--side));box-shadow:var(--side-sh,none)}
.brand{position:relative}
.who{display:flex;flex-direction:column;gap:18px;text-decoration:none}
.avatar{--av:104px;position:relative;width:var(--av);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex:none}
.avatar .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--mobile-hi,var(--mobile)),var(--data-hi,var(--data)),var(--mobile-hi,var(--mobile)));animation:spin 9s linear infinite}
.avatar .face{position:relative;width:calc(100% - 6px);aspect-ratio:1;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;font:700 calc(var(--av)*.32)/1 var(--display);letter-spacing:-.04em}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.who-t b{display:block;font:700 26px/1.1 var(--display);letter-spacing:-.03em}
.who-t small{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.45}
.tools{position:absolute;top:0;right:0;display:flex;gap:8px}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;transition:border-color .2s,transform .2s}
.icon-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#burger{display:none}
#burger span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .2s;margin-block:2px}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:26px}
.loc{display:flex;align-items:center;gap:10px;font:500 13px var(--mono);color:var(--muted);margin-bottom:26px}
.loc i{width:8px;height:8px;border-radius:50%;background:#35C47C;flex:none;animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(53,196,124,.6)}80%,100%{box-shadow:0 0 0 10px rgba(53,196,124,0)}}
.links{position:relative;display:flex;flex-direction:column;gap:2px}
.links a{position:relative;z-index:1;text-decoration:none;color:var(--muted);font-size:15px;font-weight:500;padding:10px 16px;border-radius:10px;transition:color .2s}
.links a:hover,.links a.on{color:var(--fg)}
.ind{position:absolute;left:0;top:0;width:100%;border-radius:10px;background:var(--ind-bg,var(--surface-2));box-shadow:var(--ind-sh,none);transition:transform .45s cubic-bezier(.3,1.2,.5,1),height .45s,opacity .25s}
.ind::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);transition:background .4s}
.socials{display:flex;gap:8px;margin-top:auto;padding-top:24px}
.socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s,transform .2s}
.socials a:hover{color:var(--fg);border-color:var(--accent);transform:translateY(-2px)}
.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .side{height:auto;overflow:visible;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;padding:10px clamp(16px,4vw,40px);border-right:0;border-bottom:1px solid var(--line);box-shadow:var(--side-sh-m,none);
    background:color-mix(in srgb,var(--side) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .who{flex-direction:row;align-items:center;gap:12px;min-width:0}
  .avatar{--av:42px}
  .who-t b{font-size:18px}
  .who-t small{display:none}
  .tools{position:static}
  .eptools{display:flex;align-items:center;gap:8px;flex:none}
  .main{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
  #burger{display:grid}
  .menu{position:absolute;top:100%;left:0;right:0;margin:0;padding:14px clamp(16px,4vw,40px) 20px;background:var(--side);border-bottom:1px solid var(--line);max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 26px 40px -24px var(--shc,rgba(0,0,0,.6));
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .3s,opacity .3s,visibility .3s}
  .menu.open{transform:none;opacity:1;visibility:visible}
  .loc{margin-bottom:14px}
  .links a{padding:12px 14px;font-size:16px}
  .links a.on{background:var(--surface-2)}
  .ind{display:none}
  .socials{padding-top:18px}
}

/* short desktop windows: keep the whole sidebar visible */
@media (min-width:961px) and (max-height:800px){
  .side{padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:16px}
  .avatar{--av:76px}
  .who{gap:12px}
  .who-t b{font-size:22px}
  .who-t small{font-size:13px;margin-top:4px}
  .menu{margin-top:16px}
  .loc{margin-bottom:14px}
  .links a{padding:8px 16px}
  .socials{padding-top:14px}
}
@media (min-width:961px) and (max-height:600px){
  .who-t small,.loc{display:none}
  .avatar{--av:56px}
  .links a{padding:6px 16px;font-size:14px}
}

/* touch devices: comfortable tap targets */
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .socials a{width:44px;height:44px}
  .links a{min-height:44px;display:flex;align-items:center}
  .filters button,.seg button{min-height:44px}
}

/* ---------- pages ---------- */
.main{min-width:0;padding-inline:var(--gut)}
.page{padding-block:clamp(28px,4.5vw,72px) clamp(36px,5vw,64px);max-width:1640px;margin-inline:auto}
.stagger>*{animation:up .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px;max-width:62ch}
.head h1,.head h2{font-size:clamp(38px,5.2vw,64px);font-weight:700;line-height:1}
.head p{color:var(--muted);font-size:17px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 15px var(--body);padding:12px 22px;border-radius:999px;background:var(--accent);background-image:var(--btn-sheen,none);color:var(--on);border:0;cursor:pointer;box-shadow:var(--btn-sh1,0 0 0 0 transparent),0 10px 22px -10px color-mix(in srgb,var(--accent) var(--btnmix,0%),transparent);transition:transform .2s,background .4s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px var(--accent)}
.btn.ghost{background:var(--ghost-bg,transparent);color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);box-shadow:none}
.row-btns{display:flex;flex-wrap:wrap;gap:12px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 12px var(--mono);padding:5px 10px;border-radius:7px;background:var(--surface-2);color:var(--fg);border:1px solid var(--line)}
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--sp,var(--accent)) 15%,transparent),transparent 62%)}
.spot:hover::after{opacity:1}

/* home */
.intro{display:flex;flex-direction:column;gap:24px;min-width:0}
.big{font:700 clamp(44px,6.2vw,80px)/1.02 var(--display);letter-spacing:-.04em}
@media (min-width:1240px){.big{font-size:clamp(46px,4.9vw,70px)}}
.big .ln{display:block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.big .ln>span{display:block;animation:rev 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--l,0)*110ms + 150ms)}
@keyframes rev{from{transform:translateY(108%)}to{transform:none}}
.big em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;padding-bottom:.02em;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 94%;background-size:100% 3px;animation:under 1s 1s cubic-bezier(.3,.8,.3,1) both}
@keyframes under{from{background-size:0% 3px}to{background-size:100% 3px}}
.big em.m{color:var(--mobile)}.big em.d{color:var(--data)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:60ch}
.lede strong{color:var(--fg);font-weight:500}
.figures{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(40px,6vw,64px);border-block:1px solid var(--line)}
.figures>div{padding:22px 18px 22px 0}
.figures>div:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
.figures>div:nth-child(n+3){border-top:1px solid var(--line)}
.figures b{display:block;font:700 clamp(38px,10.5vw,64px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.figures b i{font-style:normal;color:var(--accent);transition:color .4s}
@media (min-width:1240px){
  .figures{grid-template-columns:repeat(4,1fr)}
  .figures>div:nth-child(n){padding:26px 22px 26px 0;border:0}
  .figures>div:nth-child(n+2){padding-left:22px;border-left:1px solid var(--line)}
  .figures b{font-size:clamp(44px,4.2vw,60px)}
}
.figures>div>span{color:var(--muted);font-size:15px}

.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,6vw,64px)}
.path{--sp:var(--mobile);display:flex;flex-direction:column;gap:18px;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;overflow:hidden}
.path.d{--sp:var(--data)}
.path:hover{transform:translateY(-6px);border-color:var(--sp)}
.pv{height:130px;display:flex;align-items:flex-end;justify-content:center;gap:12px;border-radius:12px;background:var(--surface-2);overflow:hidden;position:relative}
.pv::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--spx,var(--sp)) 30%,transparent),transparent 65%)}
.path{--spx:var(--mobile-hi,var(--mobile))}.path.d{--spx:var(--data-hi,var(--data))}
.mp{position:relative;width:58px;height:104px;border-radius:14px 14px 0 0;border:3px solid var(--line);border-bottom:0;background:var(--bg);display:grid;place-items:center;transform:translateY(16px);animation:bob 4s ease-in-out infinite}
.mp:nth-child(2){height:116px;animation-delay:.5s;border-color:color-mix(in srgb,var(--mobile) 60%,var(--line))}
.mp:nth-child(3){animation-delay:1s}
.mp i{width:0;height:0;border-left:11px solid var(--mobile);border-block:7px solid transparent;margin-left:3px}
@keyframes bob{50%{transform:translateY(6px)}}
.pv svg{position:relative;width:86%;height:100%}
.pv svg .gl{stroke:var(--line);stroke-width:1;fill:none}
.pv svg .bar{fill:color-mix(in srgb,var(--data-hi,var(--data)) 45%,transparent)}
.pv svg .lin{fill:none;stroke:var(--s2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dash 3.2s ease-in-out infinite}
@keyframes dash{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
.path h3{font-size:24px;font-weight:700}
.path p{color:var(--muted);font-size:15px}
.path .go{margin-top:auto;font:500 14px var(--mono);color:var(--sp)}
@media (max-width:760px){.paths{grid-template-columns:1fr}}

.about{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:clamp(48px,7vw,88px)}
.about-h{display:flex;flex-direction:column;gap:14px}
.about-b{display:grid;gap:18px;max-width:72ch}
@media (min-width:1360px){.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4vw,72px);align-items:start}.about-h{position:sticky;top:40px}}
.about h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.05}
.about p{color:var(--muted)}
.about p strong{color:var(--fg);font-weight:500}
.tbox{margin-top:clamp(48px,7vw,80px)}
.tbox h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.05}
.tlede{color:var(--muted);max-width:64ch;margin:0 0 22px}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (min-width:1500px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tg{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;gap:14px}
.tg h3{font:600 15px var(--mono);letter-spacing:0;display:flex;align-items:center;gap:10px}
.tg h3 i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.tg .chip{transition:border-color .2s,transform .2s}
.tg .chip:hover{border-color:var(--c);transform:translateY(-2px)}
@media (max-width:860px){.tgrid{grid-template-columns:1fr}}
.band{margin-top:clamp(56px,8vw,96px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(26px,4vw,40px);border-radius:20px;border:1px solid var(--line);background:var(--band-bg,linear-gradient(110deg,color-mix(in srgb,var(--mobile) 12%,var(--surface)),color-mix(in srgb,var(--data) 12%,var(--surface))));box-shadow:var(--sh,0 0 0 0 transparent)}
.band h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.1}


/* the name: a clear step below the tagline */
.hero-name{display:flex;flex-direction:column;gap:8px}
.name{font:700 clamp(30px,3.4vw,42px)/1.05 var(--display);letter-spacing:-.035em;margin:0}
.name em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;padding:0 .06em .04em 0;
  background-image:var(--name-grad,linear-gradient(100deg,var(--mobile),var(--data),var(--mobile)));background-size:250% 100%;background-repeat:no-repeat;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hue 7s ease-in-out infinite alternate}
@keyframes hue{to{background-position:100% 0}}

/* hero extras */
.main{overflow-x:clip}
.hero{position:relative;display:grid;gap:clamp(28px,5vw,56px);isolation:isolate;--ox:var(--gut);--oy:340px}
@media (min-width:1240px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
.hero::before{content:"";position:absolute;inset:calc(var(--oy)*-1) calc(var(--ox)*-1 - 1px);z-index:0;pointer-events:none;background:radial-gradient(460px circle at var(--gx,72%) var(--gy,28%),color-mix(in srgb,var(--accent) var(--glow-mix,14%),transparent),transparent 62%);transition:background .6s}
.hero>.intro,.hero>.hv{position:relative;z-index:1}
.net{position:absolute;left:calc(var(--ox)*-1 - 1px);top:-80px;width:calc(100% + var(--ox)*2 + 2px);height:calc(100% + 160px);z-index:0;pointer-events:none;
  mask-image:radial-gradient(ellipse 100% 80% at 58% 45%,#000 30%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 58% 45%,#000 30%,transparent 90%)}
.role{display:flex;align-items:center;gap:10px;min-height:1.8em;font:500 15px var(--mono);color:var(--accent);transition:color .4s}
.role::before{content:"→";color:var(--muted)}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--accent);margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.intro>*:not(.big){animation:up .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*90ms + 80ms)}

.hv{position:relative;width:min(100%,400px);aspect-ratio:400/480;margin-inline:auto}
.hv-in{position:absolute;left:0;top:0;width:400px;height:480px;transform-origin:0 0}
.ly{position:absolute;transform:translate(calc(var(--px,0)*var(--d,0)*1px),calc(var(--py,0)*var(--d,0)*1px));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pop{animation:pop .9s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--pd,.5s)}
@keyframes pop{from{opacity:0;transform:scale(.86) translateY(26px)}to{opacity:1;transform:none}}
.fl{animation:flt 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes flt{50%{transform:translateY(-11px)}}
.orb{position:absolute;border:1px dashed var(--line);border-radius:50%;animation:spin 50s linear infinite}
.orb::before,.orb::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mobile-hi,var(--mobile));top:-5px;left:50%}
.orb::after{background:var(--data-hi,var(--data));top:auto;bottom:-5px}
.orb.r2{animation-direction:reverse;animation-duration:36s}
.hp{position:relative;width:226px;height:478px;border-radius:38px;padding:8px;background:linear-gradient(160deg,#2B3342,#0A0D12);box-shadow:0 40px 70px -30px var(--shp,rgba(0,0,0,.65)),inset 0 0 0 1.5px rgba(255,255,255,.09)}
.hp::before{content:"";position:absolute;top:15px;left:50%;translate:-50% 0;width:32%;height:18px;border-radius:11px;background:#000;z-index:4}
.hp-screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#0D1424;color:#E8EDF3;padding:42px 12px 12px;display:flex;flex-direction:column;gap:9px}
.hp-top{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--body)}
.hp-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#43C6F0,#9BB5FF)}
.hp-search{height:28px;border-radius:9px;background:#18223A;display:flex;align-items:center;padding:0 10px;font:10px var(--mono);color:#6F7C99}
.hp-ban{position:relative;height:66px;border-radius:12px;background:linear-gradient(120deg,#43C6F0,#7C8BFF);overflow:hidden;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.hp-ban i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.75);width:62%}
.hp-ban i+i{width:38%;background:rgba(255,255,255,.45)}
.hp-ban::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-100%);animation:shine 4.5s 1.2s ease-in-out infinite}
.hp-clip{flex:1;overflow:hidden}
.hp-feed{display:flex;flex-direction:column;gap:8px;animation:feedscroll 11s ease-in-out infinite}
@keyframes feedscroll{0%,15%{transform:none}50%,70%{transform:translateY(-92px)}100%{transform:none}}
.hp-item{display:flex;gap:9px;align-items:center;padding:8px;border-radius:11px;background:#141D32}
.hp-th{width:38px;height:38px;border-radius:9px;flex:none}
.hp-col{flex:1;display:flex;flex-direction:column;gap:6px}
.hp-ln{height:6px;border-radius:3px;background:#26324F}
.hp-pr{font:600 10px var(--mono);color:#9BB5FF}
.hp-tab{display:flex;justify-content:space-around;padding-top:9px;border-top:1px solid #1C2640}
.hp-tab i{width:16px;height:16px;border-radius:5px;background:#26324F}
.hp-tab i:first-child{background:#43C6F0}
.hp-toast{position:absolute;top:70px;left:50%;z-index:3;display:flex;align-items:center;gap:7px;white-space:nowrap;padding:7px 12px;border-radius:999px;background:#1B2A45;border:1px solid #2A3C5E;font:500 10px var(--mono);color:#C6F3DB;animation:toast 8s 2.5s ease-in-out infinite;opacity:0;transform:translate(-50%,-26px)}
.hp-toast i{width:6px;height:6px;border-radius:50%;background:#35C47C}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-26px)}8%,38%{opacity:1;transform:translate(-50%,0)}46%,100%{opacity:0;transform:translate(-50%,-26px)}}
.hc{width:224px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 26px 50px -26px var(--shc,rgba(0,0,0,.55))}
.hc-top{display:flex;justify-content:space-between;align-items:center;font:500 11px var(--mono);color:var(--muted);margin-bottom:8px}
.dots{display:flex;gap:4px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--data);animation:pulse2 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes pulse2{0%,100%{opacity:.25}50%{opacity:1}}
.hc svg{display:block;width:100%;height:auto}
.hc .gl{stroke:var(--line);stroke-width:1;fill:none}
.hc .bar{fill:color-mix(in srgb,var(--data-hi,var(--s2)) 42%,transparent)}
.hc .lin{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dash 4s ease-in-out infinite}
.hc .lin.a{stroke:var(--s1)}.hc .lin.b{stroke:var(--s2);animation-delay:.4s}
.hc-foot{display:flex;gap:14px;margin-top:8px;font:500 10px var(--mono);color:var(--muted)}
.hc-foot span{display:flex;align-items:center;gap:6px}
.hc-foot i{width:8px;height:8px;border-radius:2px}
.fchip{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -16px var(--shc2,rgba(0,0,0,.5));font:500 13px var(--mono)}
.fchip i{width:8px;height:8px;border-radius:50%;background:var(--mobile)}
.fchip.d i{background:var(--data)}

.mq{overflow:hidden;margin-top:clamp(40px,6vw,64px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{margin-top:6px}
.mq-track{display:flex;align-items:center;gap:34px;width:max-content;animation:mq 46s linear infinite;font:700 clamp(30px,4.2vw,50px)/1.25 var(--display);letter-spacing:-.03em;white-space:nowrap}
.mq.r2 .mq-track{animation-direction:reverse;animation-duration:52s;color:transparent;-webkit-text-stroke:1.4px var(--muted)}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track i{width:12px;height:12px;border-radius:3px;background:var(--mobile-hi,var(--mobile));flex:none;rotate:45deg}
.mq.r2 .mq-track i{background:var(--data-hi,var(--data))}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{width:auto;flex-wrap:wrap}}

.rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.pending{opacity:.35;transform:translateY(34px)}

/* projects */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);position:relative;margin-bottom:34px;max-width:100%}
#ptabs{--accent:var(--mobile)}
#ptabs[data-tab="data"]{--accent:var(--data)}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font:500 14px var(--mono);padding:10px 20px;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--on)}
@media (max-width:400px){.seg{max-width:100%}.seg button{padding:10px 14px;font-size:13px}}
@media (max-width:340px){.seg button{padding:9px 10px;font-size:12px}}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--accent);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s,background .4s}
.sub{color:var(--muted);max-width:60ch;margin-bottom:8px;font-size:17px}

.app-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.app-row.flip{grid-template-columns:minmax(0,1fr) auto}
.app-row.flip .dwrap{order:2}
.app-text{display:flex;flex-direction:column;gap:14px;max-width:52ch}
.app-text h3{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.05}
.app-text p{color:var(--muted);font-size:17px}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mobile)}
.meta span+span{color:var(--muted)}
.pts{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pts li{position:relative;padding-left:22px;font-size:15px}
.pts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;border-radius:2px;background:var(--sp,var(--mobile))}
.store{align-self:flex-start;font:500 14px var(--mono);color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.store:hover{color:var(--fg);border-color:var(--mobile)}
.dwrap{display:grid;place-items:center}
@media (max-width:760px){.app-row,.app-row.flip{grid-template-columns:1fr}.app-row.flip .dwrap{order:0}}

.device{position:relative;width:min(252px,70vw);aspect-ratio:9/19;border-radius:40px;padding:9px;background:linear-gradient(160deg,#2B3342,#0A0D12);
  box-shadow:0 36px 70px -30px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.09);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.app-row:hover .device{transform:translateY(-6px) rotate(-.8deg)}
.dscreen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#0B0F16}
.device::before{content:"";position:absolute;top:17px;left:50%;translate:-50% 0;width:30%;height:20px;border-radius:12px;background:#000;z-index:4}
.device video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vctl{position:absolute;bottom:16px;left:50%;translate:-50% 0;z-index:3;display:flex;gap:8px;opacity:0;transition:opacity .25s}
.device:hover .vctl,.device:focus-within .vctl{opacity:1}
.vctl button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(10,13,18,.72);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.vctl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.soon-screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:46px 14px 14px;
  background:radial-gradient(circle at 20% 10%,var(--c1),transparent 55%),radial-gradient(circle at 90% 95%,var(--c2),transparent 50%),#0B0F16}
.sk{border-radius:10px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 70%);background-size:220% 100%;animation:shim 2.6s linear infinite}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.badge{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:12px;width:84%;text-align:center;font:500 12px/1.4 var(--mono);color:#E8EDF3}
.badge i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);animation:pulse 2.2s ease-in-out infinite}
.badge i::after{content:"";width:0;height:0;border-left:15px solid #fff;border-block:9px solid transparent;margin-left:4px}
@keyframes pulse{50%{transform:scale(1.1);box-shadow:0 0 0 12px rgba(255,255,255,.07)}}

/* data science cards */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 13px var(--mono);padding:8px 14px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.filters button[aria-pressed="true"]{color:var(--on);background:var(--data);border-color:var(--data)}
/* app showcase */
#tab-mobile .sub{margin-bottom:22px}
.filters.m button[aria-pressed="true"]{background:var(--mobile);border-color:var(--mobile)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;align-items:stretch}
.acard{--sp:var(--c1);position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.acard::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.acard:hover,.acard:focus-within{transform:translateY(-4px);border-color:var(--c1)}
.ahead{display:flex;align-items:center;gap:14px}
.amono{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:#fff;font:800 19px/1 var(--display);letter-spacing:-.02em;
  background:radial-gradient(circle at 16% 8%,var(--c1),transparent 72%),radial-gradient(circle at 96% 100%,var(--c2),transparent 66%),#0B0F16}
.ahead h3{font-size:22px;line-height:1.15;font-weight:700;margin-top:3px}
.acat{display:flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.acat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c1)}
.alead{margin:0;color:var(--fg);font-size:15.5px;line-height:1.55}
.apts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.apts li{position:relative;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.5}
.apts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;border-radius:2px;background:var(--c1)}
.afoot{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.afoot .btn{padding:10px 20px;font-size:14px}
.afoot .btn.demo::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-block:6px solid transparent;margin-right:1px}
.dsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:20px;margin-top:20px}
.dsgroup{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding-top:10px;border-top:1px solid var(--line)}
.dsgroup:first-child{border-top:0;padding-top:0}
.dsgroup h3{font:700 clamp(20px,2.4vw,26px)/1.1 var(--display);letter-spacing:-.02em;margin:0}
.dsgroup span{font:500 12px var(--mono);color:var(--muted)}
.dscard{--sp:var(--data);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.dscard:hover{transform:translateY(-6px);border-color:var(--data)}
.dscover{position:relative;height:200px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;padding:10px}
.dscover img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dsbody{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.dsbody .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 14px}
.dsbody .meta{color:var(--data)}
.dsbody h3{font-size:24px;font-weight:700;line-height:1.15}
.dsbody p{color:var(--muted);font-size:15px}
.kpi{flex:0 1 auto;min-width:0;max-width:100%;text-align:right}
.kpi b{display:block;font:700 28px/1 var(--display);letter-spacing:-.03em;color:var(--data);font-variant-numeric:tabular-nums}
.kpi small{font:500 11px var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.more{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.more button,.more a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:500 13px var(--body);padding:8px 14px;border-radius:8px;border:1px solid transparent;background:var(--surface-2);color:var(--fg);cursor:pointer;transition:border-color .2s}
.more a{background:transparent;border-color:var(--line)}
.more button:hover,.more a:hover{border-color:var(--data)}

/* chart */
.chart{display:block;width:100%;height:auto}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart text{font:11px var(--mono);fill:var(--muted)}
.chart .ln2{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s .15s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .pt{stroke:var(--surface);stroke-width:2}
.chart .bar{transform-box:fill-box;transform-origin:bottom;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.chart .cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.chart-wrap{position:relative}
.tip{position:absolute;z-index:5;pointer-events:none;min-width:120px;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(0,0,0,.5);font:12px/1.5 var(--mono);transform:translate(-50%,-110%)}
.tip b{display:block;font-weight:500;color:var(--muted);margin-bottom:2px}
.tip span{display:flex;align-items:center;gap:6px;color:var(--fg)}
.tip i,.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font:12px var(--mono);color:var(--fg)}
.legend span{display:flex;align-items:center;gap:7px}
.chart-block{margin-bottom:18px}
.chart-block h4{font:600 15px var(--body);letter-spacing:0;text-transform:none;color:var(--fg);margin:0 0 6px}
.chart-block details{margin-top:10px;font:12px var(--mono);color:var(--muted)}
.chart-block summary{cursor:pointer}
.chart-block table{border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums;min-width:100%}
.chart-block th,.chart-block td{padding:5px 12px 5px 0;text-align:left;border-bottom:1px solid var(--line)}
.tblwrap{overflow-x:auto}
.skel{width:100%;height:100%}
.skel .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5;fill:none}
.skel .lin{fill:none;stroke:var(--data);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8;stroke-dasharray:1;stroke-dashoffset:1;animation:dash 3.6s ease-in-out infinite}
.skel .lin.b{stroke:var(--s1);opacity:.55;animation-delay:.5s}
.soon-tag{position:absolute;left:50%;bottom:14px;translate:-50% 0;font:500 12px var(--mono);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}

/* project pages */
.more a.open{background:var(--accent);color:var(--on);border-color:transparent;font-weight:600;padding:9px 16px}
.more a.open:hover{box-shadow:0 10px 26px -12px var(--accent)}
.dscard .dscover{height:auto;aspect-ratio:1.9/1}
.dscover.chartcover{display:block;padding:14px 16px}
.dscover.paper{background:#fff;padding:12px}
.dscover.paper img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:none;max-height:none;object-fit:contain}
.dsnote{margin-top:26px;color:var(--muted);font-size:14px;max-width:72ch}
.back{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--mono);letter-spacing:.04em;color:var(--muted);text-decoration:none;margin-bottom:26px;transition:color .2s,transform .2s}
.back:hover{color:var(--data);transform:translateX(-3px)}
.proj .meta{color:var(--data)}
.phead{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.phead h1,.phead h2{font-size:clamp(32px,4.8vw,56px);line-height:1.04;font-weight:700;max-width:22ch}
.plead{color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.6;max-width:68ch}
.pkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:40px}
.pkpis div{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pkpis b{display:block;font:700 clamp(26px,3vw,34px)/1.05 var(--display);letter-spacing:-.03em;color:var(--data);font-variant-numeric:tabular-nums}
.pkpis small{display:block;margin-top:7px;font:500 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;align-items:start}
.pmain{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;min-width:0}
.psec h3{font-size:24px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:14px}
.psec h3::after{content:"";flex:1;height:1px;background:var(--line)}
.psec>p{font-size:16px;max-width:68ch}
.psec .pts li{color:var(--fg);line-height:1.55}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:3px 14px}
.steps li::before{content:counter(s);grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:600 13px var(--mono);color:var(--data);border:1px solid var(--line);background:var(--surface)}
.steps b{font-weight:600;font-size:16px;line-height:1.3;padding-top:3px}
.steps span{color:var(--muted);font-size:15px;line-height:1.55}
.pside{position:sticky;top:24px;display:grid;gap:14px}
.glance{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.glance h4{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.glance dl{margin:0;display:grid;gap:15px}
.glance dt{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--data);margin-bottom:3px}
.glance dd{margin:0;font-size:14px;line-height:1.5}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:60px}
.pn{display:flex;flex-direction:column;gap:5px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .25s,transform .25s}
.pn:hover{border-color:var(--data);transform:translateY(-3px)}
.pn small{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pn b{font:600 17px/1.25 var(--display)}
.pn.next{text-align:right}
@media (max-width:860px){.pgrid{grid-template-columns:minmax(0,1fr);gap:34px}.pside{position:static;order:-1}}
@media (max-width:560px){.pnav{grid-template-columns:1fr}.pn.next{text-align:left}}
.rt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.rt caption{caption-side:top;text-align:left;font:600 15px/1.4 var(--body);padding-bottom:10px}
.rt th{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:right;padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.rt td{padding:12px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.rt th:first-child,.rt td:first-child{text-align:left;padding-left:0;white-space:normal}
.rt tr.hl td{background:color-mix(in srgb,var(--data-hi,var(--data)) var(--hlmix,9%),transparent)}
.rt td.best{font-weight:700;color:var(--data)}
.rt.txt th,.rt.txt td{text-align:left;white-space:normal;vertical-align:top;padding-right:14px}
.rt.txt td:nth-child(2){font:500 12.5px var(--mono);white-space:nowrap}
.rt.txt.wide td:nth-child(2){font:inherit;white-space:normal}
.rt.txt.wide td:first-child{white-space:nowrap;font:500 12.5px var(--mono);color:var(--data)}
.cms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cm{margin:0}
.cm figcaption{font:600 14px var(--body);margin-bottom:8px}
.cmg{display:grid;grid-template-columns:72px 1fr 1fr;gap:4px}
.cmg .ax{font:500 10.5px/1.25 var(--mono);color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:2px}
.cmg .ax.rl{justify-content:flex-end;text-align:right}
.cc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:72px;border-radius:10px;background:color-mix(in srgb,var(--c) var(--a),var(--surface))}
.cc.ok{--c:var(--s1)}
.cc.bad{--c:var(--s2)}
.cc b{font:700 20px var(--display);font-variant-numeric:tabular-nums}
.cc small{font:11px var(--mono);opacity:.75}
.cnote{font:12px/1.5 var(--mono);color:var(--muted);margin-top:10px}
.hbars{display:grid;gap:9px;margin-top:8px}
.hb{display:grid;grid-template-columns:minmax(96px,168px) minmax(0,1fr) 72px;align-items:center;gap:12px;font:13px var(--mono)}
.hb .hl{overflow-wrap:anywhere}
.hb .hv{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.hb .hv i{display:block;height:100%;width:var(--w);border-radius:6px;background:var(--s1);transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*55ms)}
.hb b{font-weight:500;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes growx{from{transform:scaleX(0)}}
@media (max-width:560px){.rt{font-size:13px}.rt th,.rt td{padding:10px 7px}.rt th{font-size:10px;letter-spacing:.03em}.rt:not(.txt) th:first-child,.rt:not(.txt) td:first-child{min-width:104px}}
@media (max-width:560px){.hb{grid-template-columns:96px minmax(0,1fr) 64px;gap:8px;font-size:12px}}
.figs{display:grid;gap:18px}
.figs.multi{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fig{margin:0}
.fig .paper{background:#fff;border-radius:12px;border:1px solid var(--line);padding:10px;display:grid;place-items:center}
.fig img{display:block;max-width:100%;height:auto}
.fig figcaption{font:12px/1.5 var(--mono);color:var(--muted);margin-top:8px}
.erdfig{margin:0 0 26px}
.erdw{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;overflow-x:auto}
.erdw .erd{min-width:500px}
.erdfig figcaption{font:12px/1.5 var(--mono);color:var(--muted);margin-top:8px}
.erd{display:block;width:100%;height:auto}
.erd rect{fill:var(--surface-2);stroke:var(--line);stroke-width:1.2}
.erd path{fill:none;stroke:var(--muted);stroke-width:1.5}
.erd circle{fill:var(--data)}
.erd .t{font:600 13.5px var(--display);fill:var(--fg)}
.erd .l{font:11.5px var(--mono);fill:var(--muted)}
.erd .k{fill:var(--data);font-weight:600}

/* experience */
.sumline{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.sumline .chip{font-size:13px;padding:7px 13px}
.timeline{position:relative;display:grid;gap:18px;padding-left:38px}
.timeline::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--data),var(--mobile));transform-origin:top;animation:drawy 1.4s .2s cubic-bezier(.3,.8,.3,1) both}
@keyframes drawy{from{transform:scaleY(0)}to{transform:none}}
.job{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 28px;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color .3s,transform .35s}
.job:hover{border-color:var(--dot);transform:translateX(4px)}
.job::before{content:"";position:absolute;left:-37px;top:32px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--dot)}
.job .when{font:500 13px var(--mono);color:var(--dot);padding-top:6px}
.job .when small{display:block;color:var(--muted);margin-top:6px;font-size:12px}
.job h3{font-size:24px;font-weight:700}
.job .org{color:var(--muted);margin:2px 0 14px}
.job ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px}
.job li{position:relative;padding-left:20px;color:var(--muted);font-size:15px}
@media (min-width:1500px){.job ul{display:block;columns:2;column-gap:40px}.job li{break-inside:avoid;margin-bottom:9px}}
.job li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--dot);border-radius:2px}
@media (max-width:700px){.job{grid-template-columns:1fr}}

/* education */
.edu{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.deg{--sp:var(--mobile);display:flex;flex-direction:column;gap:14px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color .3s,transform .35s}
.deg.d{--sp:var(--data)}
.deg:hover{border-color:var(--sp);transform:translateY(-6px)}
.deg .big2{font:800 clamp(60px,8vw,104px)/.9 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--sp)}
.deg h3{font-size:26px;font-weight:700}
.deg p{color:var(--muted);font-size:15px}
.deg .meta{margin-top:auto;color:var(--sp)}
@media (max-width:760px){.edu{grid-template-columns:1fr}}

.deg .where{color:var(--fg);font-weight:500;margin-top:-6px}
.deg ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.deg li{position:relative;padding-left:20px;color:var(--muted);font-size:15px}
.deg li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--sp);border-radius:2px}

/* certificates */
.cert{--sp:var(--data);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:20px;background:var(--surface);border:1px solid var(--line);outline:1px solid var(--line);outline-offset:-10px;overflow:hidden;transition:border-color .3s}
.cert:hover{border-color:var(--sp)}
.cert::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--data-hi,var(--sp)) 16%,transparent) 50%,transparent 60%);transform:translateX(-100%);animation:shine 6s 1s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.seal{width:clamp(92px,14vw,140px);aspect-ratio:1}
.seal svg{width:100%;height:100%;overflow:visible}
.seal .rg{transform-origin:50% 50%;animation:spin 30s linear infinite}
.seal text{font:500 8.5px var(--mono);letter-spacing:.2em;fill:var(--muted)}
.cert h3{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.08;margin-block:10px 12px}
.cert p{margin-bottom:16px;color:var(--muted);max-width:60ch}
.cert .to{font:500 13px var(--mono);color:var(--muted)}
.cert .to b{color:var(--fg);font-weight:500}
@media (max-width:640px){.cert{grid-template-columns:1fr}}
@media (min-width:1500px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}.certs .cert:last-child{grid-column:1/-1}.courses{grid-template-columns:minmax(0,1fr)}}
.certs{display:grid;gap:clamp(16px,2.5vw,24px)}
.cert{align-items:start}
.cert .seal{margin-top:6px}
.courses{list-style:none;margin:0 0 18px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(18px,3vw,36px);counter-reset:c}
.courses.one{grid-template-columns:minmax(0,1fr)}
.courses li{counter-increment:c;display:flex;gap:12px;align-items:baseline;font-size:14.5px;line-height:1.4;color:var(--fg)}
.courses li::before{content:counter(c,decimal-leading-zero);flex:none;font:500 11px var(--mono);color:var(--data)}
@media (max-width:760px){.courses{grid-template-columns:minmax(0,1fr)}}

/* contact */
.contact{display:flex;flex-direction:column;gap:30px}
.contact h1,.contact h2{font-size:clamp(40px,6vw,76px);font-weight:700;line-height:1}
.contact .lede{margin-top:16px}
.reach{display:grid;gap:10px;max-width:560px}
@media (min-width:1200px){.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,5vw,96px);align-items:center}.contact>div:first-child,.contact>.chiprow{grid-column:1}.contact>.reach{grid-column:2;grid-row:1/span 2;max-width:none}}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;transition:border-color .2s,transform .25s}
.row:hover{border-color:var(--accent);transform:translateX(4px)}
.row>div{min-width:0}
.row small{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.row span{font:500 15px var(--mono);overflow-wrap:anywhere}
.row button{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font:500 12px var(--mono);padding:7px 11px;border-radius:8px;cursor:pointer;flex:none}

footer{padding-block:0 40px;color:var(--muted);font:13px var(--mono);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1640px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.chart .ln2,.skel .lin,.pv svg .lin{stroke-dashoffset:0}}

/* raised cards: no-ops in the dark theme, soft shadows in the light one */
:is(.path,.tg,.acard,.dscard,.pkpis div,.glance,.pn,.job,.deg,.cert,.row,.erdw,.seg){box-shadow:var(--sh,0 0 0 0 transparent)}
:is(.path,.acard,.dscard,.pn,.job,.deg,.row,.cert):hover,.acard:focus-within{box-shadow:var(--shh1,0 0 0 0 transparent),0 24px 46px -20px color-mix(in srgb,var(--sp,var(--dot,var(--accent))) var(--shmix,0%),transparent)}

/* text for search engines and screen readers only */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* links inside running text, and the footer link row */
.about-b a:not(.btn){color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .2s}
.about-b a:not(.btn):hover{color:var(--accent)}
.about-b .pts a{font-weight:600}
.lp-links{margin-top:clamp(40px,6vw,64px)}
.flinks{display:flex;flex-wrap:wrap;gap:6px 20px}
.flinks a{color:inherit;text-decoration:none;transition:color .2s}
.flinks a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}