/* ==========================================================================
   Kunal Jha — portfolio v3  ·  dark / mono / big type
   ========================================================================== */
:root{
  --bg:#111114; --bg-2:#16161b; --bg-3:#1c1c22;
  --line:#26262e; --line-2:#33333d;
  --text:#f4f4f6; --text-2:#b4b4c0; --text-3:#7c7c8a;
  --pur:#7c3aed; --pur-2:#a78bfa; --pink:#f472b6; --blue:#60a5fa; --orange:#fb923c; --amber:#ffb36b; --green:#34d399; --teal:#5eead4;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px; --r:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--pur);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sec{padding:120px 0;position:relative}
.mono{font-family:var(--mono)}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:12px;background:#fff;color:#111;padding:10px 14px;border-radius:8px;z-index:999;font-family:var(--mono);font-size:13px}
.skip:focus{left:12px}
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--pur),var(--pink));z-index:200;pointer-events:none}

/* headings */
.big{font-weight:700;font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.02em}
.mid{font-weight:700;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.01em}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.grid .rv{transition-delay:calc(var(--d,0)*70ms)}
.how .rv{transition-delay:calc(var(--d,0)*90ms)}
.cells .rv{transition-delay:calc(var(--d,0)*110ms)}
.recs .rv,.mgrid .rv{transition-delay:calc(var(--d,0)*110ms)}
.wcard.rv{transition-delay:calc(min(var(--i,0),5)*80ms)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .35s,padding .35s,box-shadow .35s}
.nav.scrolled{background:rgba(17,17,20,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:10px 0;box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;gap:14px}
.logo{font-family:var(--mono);font-weight:600;font-size:17px;color:var(--text);letter-spacing:-.01em;position:relative;z-index:2;margin-right:auto}
.logo .cur{color:var(--pur-2);animation:blink 1.1s steps(1) infinite}
.menu{display:flex;gap:4px;align-items:center}
.nl{display:block;padding:9px 18px;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--text-2);border:1px solid transparent;transition:color .25s,background .25s,border-color .25s}
.nl:hover{color:#fff;background:rgba(255,255,255,.05)}
.nl.active{color:#fff;background:rgba(139,92,246,.13);border-color:rgba(139,92,246,.5)}
.nav-tools{display:flex;align-items:center;gap:10px;margin-left:8px}
.kbtn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);font-family:var(--mono);font-size:13px;color:var(--text-2);background:rgba(255,255,255,.02);transition:color .25s,border-color .25s}
.kbtn kbd{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-3);line-height:1.3}
.kbtn:hover{color:#fff;border-color:#8a8a99}
.hire{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1px solid rgba(52,211,153,.6);background:rgba(52,211,153,.1);color:var(--green);font-family:var(--mono);font-size:13.5px;font-weight:500;box-shadow:0 0 0 3px rgba(52,211,153,.07);transition:background .25s,box-shadow .25s,transform .25s;white-space:nowrap}
.hire:hover{background:rgba(52,211,153,.2);box-shadow:0 0 0 3px rgba(52,211,153,.12),0 0 26px rgba(52,211,153,.25);transform:translateY(-1px)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:relative;z-index:2}
.burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 45% at 68% 22%,rgba(255,150,80,.16),transparent 62%),
    radial-gradient(ellipse 50% 40% at 18% 82%,rgba(124,58,237,.2),transparent 62%),
    var(--bg)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0}
#scene{width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:2;padding:130px 24px 110px;max-width:1200px}
.name{font-weight:800;text-transform:uppercase;font-size:clamp(54px,11.5vw,150px);line-height:.95;letter-spacing:.04em;color:#fff;text-shadow:0 20px 60px rgba(0,0,0,.65),0 2px 0 rgba(0,0,0,.3)}
.name .ch{display:inline-block;opacity:0;transform:translateY(46px) rotate(4deg);animation:up .9s var(--ease) forwards;animation-delay:calc(var(--i,0)*55ms + .25s)}
.name .sp{display:inline-block;width:.28em}
.role{font-family:var(--mono);text-transform:uppercase;letter-spacing:.3em;font-size:clamp(11px,1.35vw,16px);color:var(--text-2);margin-top:26px;opacity:0;animation:fade 1s var(--ease) forwards;animation-delay:.9s}
.featured{margin-top:70px;opacity:0;animation:fade 1s var(--ease) forwards;animation-delay:1.25s}
.fl{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-3)}
.logos{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 36px;margin-top:20px}
.lg{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:#fff;padding:9px 16px 9px 10px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);transition:transform .35s,border-color .35s,background .35s,box-shadow .35s}
.lg img{width:24px;height:24px;border-radius:6px;background:#fff;padding:2px;object-fit:contain}
.lg:hover{transform:translateY(-2px);border-color:var(--pur-2);background:rgba(139,92,246,.1);box-shadow:0 10px 30px -12px rgba(139,92,246,.6)}
.lg.ukg{border-color:rgba(0,170,110,.45)}.lg.ukg:hover{border-color:#34d399;background:rgba(52,211,153,.1)}
.lg.amz{border-color:rgba(255,153,0,.45)}.lg.amz:hover{border-color:#ff9900;background:rgba(255,153,0,.1)}
.lg.acn{border-color:rgba(161,0,255,.45)}.lg.acn:hover{border-color:#a100ff;background:rgba(161,0,255,.1)}
.lg.cert{color:var(--amber);border-color:rgba(255,179,107,.5);background:rgba(255,179,107,.08)}
.lg.cert:hover{border-color:var(--amber);background:rgba(255,179,107,.16);box-shadow:0 10px 30px -12px rgba(255,179,107,.6)}
.mouse{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);width:22px;height:36px;border:2px solid rgba(255,255,255,.45);border-radius:12px;z-index:2;transition:border-color .3s}
.mouse:hover{border-color:#fff}
.mouse span{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--pur-2);animation:wheel 1.6s ease-in-out infinite}

/* CSS fallback shapes (used only when WebGL / three.js is unavailable) */
.css-shapes{position:absolute;inset:0;perspective:1100px;overflow:hidden}
.css-shapes[hidden]{display:none}
.cube{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:spin var(--t,28s) linear infinite}
.cube i{position:absolute;inset:0;background:#1b1b22;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.cube i:nth-child(1){transform:translateZ(calc(var(--s)/2));background:#232329}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:#151519}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:#3a2e28}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.c1{--s:260px;--t:34s;left:12%;top:8%}
.c2{--s:150px;--t:26s;right:14%;bottom:12%}
.c3{--s:90px;--t:20s;left:24%;bottom:18%}
.orb{position:absolute;right:26%;top:16%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd7b0,#ff9c5b 60%,#c65a2b);box-shadow:0 0 70px 24px rgba(255,150,80,.35);animation:float 6s ease-in-out infinite}

/* ==========================================================================
   EXPERTISE
   ========================================================================== */
.expertise{overflow:hidden}
.codebg{position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:min(1400px,100%);font-family:var(--mono);font-size:13px;line-height:1.75;color:rgba(255,255,255,.05);pointer-events:none;white-space:pre;padding:0 28px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);z-index:0}
.expertise .wrap{position:relative;z-index:1}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:60px}
.cell{background:var(--bg);padding:46px 42px 56px;position:relative}
.ct{display:flex;gap:22px;align-items:flex-start}
.ct svg{width:52px;height:52px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ct svg .f{fill:#fff;stroke:none}
.ct svg .d{stroke-dasharray:3 4;opacity:.6}
.cell h3{font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-.01em}
.u{position:relative;display:inline-block;z-index:0}
.u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:9px;z-index:-1;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .25s}
.u.pink::after{background:var(--pink)}
.u.blue::after{background:var(--blue)}
.u.orange::after{background:var(--orange)}
.cell.in .u::after{transform:scaleX(1)}
.cell > p{margin:30px 0 0 6px;font-family:var(--mono);font-size:14px;line-height:1.8;color:var(--text-2);position:relative;padding-left:20px;border-left:1px solid var(--line-2)}
.cell:not(.quote) > p::before,.cell:not(.quote) > p::after{position:absolute;left:0;font-size:12px;color:var(--text-3);opacity:.6;line-height:1}
.cell:not(.quote) > p::before{content:"<h3>";top:-22px}
.cell:not(.quote) > p::after{content:"</h3>";bottom:-24px}
.quote{display:flex;flex-direction:column;justify-content:center}
.quote p{font-family:var(--sans);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.35;color:#fff;border-left:5px solid var(--pur);padding-left:26px;margin:0}
.quote p em{color:var(--pur-2);font-style:italic}
.quote footer{margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--text-2);padding-left:31px}

/* ==========================================================================
   SPLIT — two halves of the job
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr minmax(280px,420px) 1fr;min-height:580px;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:grid-template-columns .65s var(--ease)}
.split[data-focus="left"]{grid-template-columns:1.7fr minmax(280px,420px) .6fr}
.split[data-focus="right"]{grid-template-columns:.6fr minmax(280px,420px) 1.7fr}
.half{display:flex;align-items:center;padding:80px 6vw;position:relative;cursor:pointer}
.half.left{background:linear-gradient(135deg,#18181e,#121216)}
.half.right{background:linear-gradient(225deg,#181228,#0f0d16)}
.half-in{max-width:400px;transition:opacity .5s,transform .5s var(--ease)}
.left .half-in{margin-left:auto;text-align:right}
.split[data-focus="left"] .right .half-in{opacity:.3;transform:translateX(12px)}
.split[data-focus="right"] .left .half-in{opacity:.3;transform:translateX(-12px)}
.half h3{font-weight:800;font-size:clamp(40px,5.2vw,74px);line-height:1;letter-spacing:-.03em;color:#fff}
.right h3{font-family:var(--mono);font-weight:600;color:var(--pur-2);letter-spacing:-.04em;font-size:clamp(28px,4.2vw,58px)}
.half p{margin-top:18px;color:var(--text-2);font-size:16px;line-height:1.6}
.more{display:inline-flex;gap:8px;align-items:center;margin-top:24px;font-family:var(--mono);font-size:13px;color:#fff;border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color .3s}
.more span{transition:transform .3s var(--ease)}
.more:hover{border-color:#fff}
.more:hover span{transform:translateX(5px)}
.portrait{position:relative;overflow:hidden;--cut:50%;background:#000}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.portrait .ph{filter:saturate(1.05) contrast(1.05)}
.ph-code{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 var(--cut));transition:clip-path .65s var(--ease)}
.ph-code img{filter:grayscale(1) contrast(1.3) brightness(.8)}
.ph-code::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(124,58,237,.7),rgba(34,211,238,.45));mix-blend-mode:color;z-index:1}
.ph-code .tex{position:absolute;left:0;right:0;top:0;padding:14px 12px;font-family:var(--mono);font-size:10.5px;line-height:1.55;color:rgba(255,255,255,.8);mix-blend-mode:screen;white-space:pre;animation:tex 24s linear infinite;text-shadow:0 0 8px rgba(167,139,250,.7);z-index:2}
.portrait::after{content:"";position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.7) 20%,rgba(255,255,255,.7) 80%,transparent);transition:left .65s var(--ease);z-index:3}
.split[data-focus="left"] .portrait{--cut:74%}
.split[data-focus="right"] .portrait{--cut:26%}

/* ==========================================================================
   WORK
   ========================================================================== */
.work-head{display:grid;grid-template-columns:1.05fr 1fr;gap:40px 70px;align-items:center}
.work-copy .mono{font-size:15px;line-height:1.85;color:var(--text-2);margin-top:28px;max-width:540px}
.fp{display:flex;align-items:flex-end;gap:14px;margin-top:44px}
.arrow{width:110px;height:56px;fill:none;stroke:var(--pur-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-bottom:10px}
.fpl{font-weight:600;font-size:16px;color:#fff}
.fp h3{font-family:var(--mono);font-size:clamp(17px,1.7vw,21px);margin:6px 0 16px;color:#fff;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--pur);color:#fff;font-family:var(--mono);font-size:13px;font-weight:500;padding:12px 20px;border-radius:6px;transition:background .25s,transform .25s,box-shadow .25s;box-shadow:0 10px 30px -10px rgba(124,58,237,.7)}
.btn:hover{background:#6d28d9;transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(124,58,237,.8)}
.device{position:relative;padding:12px 12px 0;background:#26262e;border-radius:16px 16px 4px 4px;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px #33333d;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.device{transform:perspective(1200px) rotateY(-9deg) rotateX(3deg) translateY(26px)}
.device.in{transform:perspective(1200px) rotateY(-9deg) rotateX(3deg)}
.device.in:hover{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
.screen{background:#0d0d11;border-radius:8px 8px 0 0;overflow:hidden;border:1px solid #33333d}
.sbar{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#15151b;border-bottom:1px solid #26262e}
.sbar i{width:9px;height:9px;border-radius:50%;background:#3a3a45}
.sbar i:nth-child(1){background:#ff5f57}.sbar i:nth-child(2){background:#febc2e}.sbar i:nth-child(3){background:#28c840}
.sbar span{margin-left:8px;font-family:var(--mono);font-size:10px;color:var(--text-3)}
.diag{width:100%;height:auto;display:block;font-family:var(--mono);padding:14px}
.diag .box{fill:#1a1a21;stroke:#3a3a46;stroke-width:1}
.diag .box.hot{stroke:var(--amber)}
.diag text{fill:#c9c9d4;font-size:10.5px}
.diag .lbl{fill:#7c7c8a;font-size:9px}
.diag .flow{stroke:#5a5a68;stroke-width:1.2;fill:none;marker-end:url(#arr)}
.diag .flow.hot{stroke:var(--amber);stroke-dasharray:6 6;animation:dash 1.2s linear infinite}
.diag.sm .flow{marker-end:none}
.diag .pkt{filter:drop-shadow(0 0 5px #ffb36b)}
.base{height:14px;background:linear-gradient(#2c2c35,#1d1d24);border-radius:0 0 14px 14px;margin:0 -12px;position:relative}
.base::after{content:"";position:absolute;left:50%;top:0;width:90px;height:5px;transform:translateX(-50%);background:#101014;border-radius:0 0 6px 6px}

.filter{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:90px;font-family:var(--mono);font-size:13px;color:var(--text-2)}
.fb{color:var(--text-3);margin-right:6px}
.filter button{color:var(--text-2);padding:6px 2px;transition:color .2s;position:relative}
.filter button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--pur-2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.filter button:hover{color:#fff}
.filter button.on{color:#fff}
.filter button.on::after{transform:scaleX(1)}
.filter button sup{font-size:9px;color:var(--pur-2);margin-left:3px;vertical-align:top}
.filter i{color:var(--line-2)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:36px}
.proj{display:flex;flex-direction:column;gap:6px}
.proj.out{opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}
.proj.hide{display:none}
.cover{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);padding:0;text-align:left}
.cover:focus-visible{outline:2px solid var(--pur-2);outline-offset:3px}
.cv{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s var(--ease)}
.cover:hover .cv{transform:scale(1.06)}
.ov{position:absolute;right:14px;bottom:14px;background:#fff;color:#111;font-family:var(--mono);font-size:12px;font-weight:500;padding:8px 12px;border-radius:6px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
.cover:hover .ov,.cover:focus-visible .ov{opacity:1;transform:none}
.cv .diag.sm{padding:24px 20px;width:100%}
.cv .big{width:34%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.cv code{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:11px;color:var(--text-2);background:rgba(0,0,0,.4);padding:4px 8px;border-radius:4px;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glyph{font-size:76px;color:#fff;text-shadow:0 0 44px rgba(167,139,250,.65);font-weight:600;line-height:1}
.frames{position:relative;width:58%;aspect-ratio:1}
.frames i{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.6);border-radius:4px}
.frames i:nth-child(2){background:rgba(244,114,182,.28);border-color:var(--pink)}
.c-amz{background:radial-gradient(circle at 30% 20%,rgba(255,153,0,.28),transparent 58%),#16161b}
.c-amz2{background:radial-gradient(circle at 70% 25%,rgba(96,165,250,.28),transparent 58%),#16161b}
.c-ukg{background:radial-gradient(circle at 30% 70%,rgba(52,211,153,.24),transparent 58%),#16161b}
.c-k8s{background:radial-gradient(circle at 50% 40%,rgba(50,108,229,.4),transparent 62%),#13131a}
.c-jira{background:radial-gradient(circle at 50% 40%,rgba(38,132,255,.38),transparent 62%),#13131a}
.c-sf{background:radial-gradient(circle at 50% 40%,rgba(0,161,224,.38),transparent 62%),#13131a}
.c-agent{background:radial-gradient(circle at 50% 40%,rgba(167,139,250,.38),transparent 62%),#13131a}
.c-claude{background:radial-gradient(circle at 50% 40%,rgba(255,179,107,.36),transparent 62%),#13131a}
.c-ad{background:radial-gradient(circle at 50% 40%,rgba(244,114,182,.3),transparent 62%),#13131a}
.c-cd{background:radial-gradient(circle at 50% 40%,rgba(96,165,250,.3),transparent 62%),#13131a}
.c-ard{background:radial-gradient(circle at 50% 40%,rgba(0,151,157,.4),transparent 62%),#13131a}
.c-skills{background:radial-gradient(circle at 50% 40%,rgba(217,119,87,.34),transparent 62%),#13131a}
.proj h3{font-weight:700;font-size:18px;margin-top:14px;line-height:1.3}
.cat{font-family:var(--mono);font-size:12px;color:var(--pur-2)}
.show{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:3px;margin-top:6px;transition:color .2s,border-color .2s}
.show:hover{color:#fff;border-color:#fff}

/* ==========================================================================
   STORY — chat walkthrough
   ========================================================================== */
.story{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.narrow{max-width:900px}
.gut{--lh:clamp(36px,4.2vw,48px);position:relative;display:grid;grid-template-columns:44px 1fr;gap:0 18px;align-items:start;padding-left:64px}
.gut.second{margin-top:96px}
.sq{position:absolute;left:0;top:-34px;width:58px;height:58px;border-radius:8px;background:linear-gradient(135deg,#c4b5fd,#7c3aed 55%,#4c1d95);box-shadow:0 22px 44px -12px rgba(124,58,237,.7)}
.nums{font-family:var(--mono);color:var(--text-3);font-size:17px;text-align:right}
.nums li{line-height:var(--lh)}
.gh{font-weight:700;font-size:clamp(24px,3vw,34px);line-height:var(--lh);letter-spacing:-.01em}
.acc{color:var(--pur-2)}
.chat{margin:52px 0 0;display:flex;flex-direction:column;gap:18px;min-height:120px}
.msg{display:flex;gap:14px;align-items:flex-end;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg.in{opacity:1;transform:none}
.msg.me{justify-content:flex-end}
.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:13px;background:#0f2a2c;color:var(--teal);border:2px solid rgba(94,234,212,.45)}
.av.img{border-color:var(--pur-2);overflow:hidden;background:#000}
.av img{width:100%;height:100%;object-fit:cover}
.bub{max-width:640px;background:#1e1e26;border:1px solid var(--line-2);border-bottom:3px solid #40404f;border-radius:14px 14px 14px 4px;padding:16px 20px;font-size:15.5px;line-height:1.6;color:var(--text)}
.me .bub{border-radius:14px 14px 4px 14px;background:#1a1626;border-color:#2f2745;border-bottom-color:var(--pur)}
.bub b{color:var(--pur-2);font-weight:600}
.them .bub b{color:var(--teal)}
.msg.typing .bub{position:relative;color:transparent}
.msg.typing .bub b{color:transparent}
.msg.typing .bub::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -16px;border-radius:50%;background:var(--text-3);box-shadow:12px 0 0 var(--text-3),24px 0 0 var(--text-3);animation:dots 1s ease-in-out infinite}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.hw{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:24px 20px;transition:border-color .3s,transform .3s var(--ease)}
.hw:hover{border-color:var(--pur-2);transform:translateY(-4px)}
.hw svg{width:26px;height:26px;fill:none;stroke:var(--pur-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw h4{margin-top:16px;font-size:15px;font-weight:700;line-height:1.3}
.hw p{margin-top:6px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.now{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:64px;font-family:var(--mono);font-size:14px;color:var(--text-2)}
.dl{width:54px;height:54px;border-radius:8px;background:var(--pur);display:grid;place-items:center;box-shadow:0 16px 34px -10px rgba(124,58,237,.85);animation:bob 1.8s ease-in-out infinite;transition:background .25s}
.dl:hover{background:#6d28d9}
.dl svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   WRITING — horizontal scroller
   ========================================================================== */
.writing{padding-bottom:90px}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.row-head .mono{font-size:14px;color:var(--text-2);margin-top:12px;max-width:600px;line-height:1.7}
.row-head a{color:var(--pur-2)}
.spark{color:var(--pur-2);font-size:.6em;vertical-align:super;margin-left:4px}
.arrows{display:flex;gap:8px;flex:none}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);color:#fff;font-size:18px;transition:background .2s,color .2s,border-color .2s}
.arrows button:hover{background:#fff;color:#111;border-color:#fff}
.scroller{display:flex;gap:20px;overflow-x:auto;padding:40px max(28px,calc((100vw - var(--wrap))/2 + 28px)) 24px;scroll-snap-type:x mandatory;scroll-padding-left:max(28px,calc((100vw - var(--wrap))/2 + 28px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}
.scroller:focus-visible{outline:2px solid var(--pur-2);outline-offset:-2px}
.wcard{flex:none;width:340px;scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;transition:transform .4s var(--ease),border-color .4s,opacity .8s var(--ease)}
.wcard.in{transform:none}
.wcard.in:hover{transform:translateY(-6px);border-color:var(--c)}
.wc-cover{position:relative;height:130px;border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.wc-cover img{width:46px;height:46px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.wc-cover b{position:absolute;right:12px;bottom:2px;font-size:58px;color:var(--c);opacity:.32;font-weight:600;line-height:1;font-family:var(--mono)}
.wc-n{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.wc-cat{font-family:var(--mono);font-size:11px;color:var(--c);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.wcard h4{font-size:15.5px;font-weight:700;line-height:1.35}
.wcard p{font-size:13px;color:var(--text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wc-read{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;color:var(--text-2)}

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */
.jobs{margin-top:64px;display:flex;flex-direction:column;gap:28px;position:relative;padding-left:28px}
.jobs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--pur),var(--pink) 50%,var(--blue))}
.job{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:30px 34px 30px;display:grid;gap:14px;transition:border-color .3s}
.job:hover{border-color:var(--line-2)}
.job::before{content:"";position:absolute;left:-34px;top:38px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:3px solid var(--pur-2)}
.job header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;padding-right:80px}
.job h3{font-size:clamp(18px,1.8vw,22px);font-weight:700;line-height:1.3}
.at{color:var(--pur-2);font-weight:600}
.dates{font-family:var(--mono);font-size:13px;color:var(--text-2);background:rgba(255,255,255,.04);padding:6px 12px;border-radius:6px;border:1px solid var(--line-2);white-space:nowrap}
.jmeta{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.jmeta li{display:flex;gap:7px;align-items:center}
.jmeta svg{width:15px;height:15px;fill:none;stroke:var(--pur-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jmeta a{color:var(--text);border-bottom:1px solid var(--line-2)}
.job > p{color:var(--text-2);font-size:15px;max-width:780px;line-height:1.65}
.bul{display:grid;gap:8px;max-width:840px}
.bul li{position:relative;padding-left:18px;font-size:14.5px;color:var(--text-2);line-height:1.55}
.bul li::before{content:"▹";position:absolute;left:0;color:var(--pur-2)}
.bul b{color:#fff;font-weight:600}
.tech{display:flex;flex-wrap:wrap;gap:8px}
.tech li{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text-2)}
.jlogo{position:absolute;right:30px;top:28px;width:56px;height:56px;border-radius:12px;background:#fff;padding:9px;object-fit:contain;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.edu{margin-top:48px;display:grid;grid-template-columns:1fr 1.7fr;gap:20px}
.edu-card{display:flex;gap:18px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.deg{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:9px 10px;border-radius:8px;background:rgba(124,58,237,.18);color:var(--pur-2);border:1px solid rgba(124,58,237,.45);flex:none}
.edu-card b{display:block;font-size:15px;line-height:1.3}
.edu-card span{font-size:13px;color:var(--text-2);display:block;margin-top:4px}
.certs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-content:center;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.cl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);width:100%;margin-bottom:2px}
.cert{font-size:13px;padding:7px 11px;border-radius:8px;border:1px solid var(--line-2);color:var(--text-2);transition:border-color .2s,color .2s,transform .2s;display:inline-flex;gap:8px;align-items:baseline}
.cert small{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.cert.ai{border-color:rgba(255,179,107,.4);color:#fff}
.cert:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}

/* ==========================================================================
   CONTACT — "Get in touch" box
   ========================================================================== */
.contact{padding-top:40px}
.sh{display:flex;align-items:center;gap:26px;margin-bottom:30px}
.sh h2{position:relative;padding-bottom:16px;white-space:nowrap}
.sh h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--pur-2),var(--pink))}
.sh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.contact-box{position:relative;overflow:hidden;background:linear-gradient(180deg,#16161b,#111114);border:1px solid var(--line-2);border-radius:20px;padding:88px 40px 64px;text-align:center}
.contact-box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--pur),var(--pink),var(--blue));opacity:.9}
.contact-box .glow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(10px)}
.contact-box .g1{left:-180px;top:-220px;background:radial-gradient(circle,rgba(124,58,237,.32),transparent 65%)}
.contact-box .g2{right:-200px;bottom:-260px;background:radial-gradient(circle,rgba(244,114,182,.2),transparent 65%)}
.contact-box > *{position:relative}
.contact-box h2{font-weight:700;font-size:clamp(34px,5.2vw,66px);line-height:1.08;letter-spacing:-.03em;max-width:900px;margin:0 auto}
.grad{background:linear-gradient(90deg,var(--pur-2),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-box p{margin:26px auto 0;max-width:640px;font-size:16.5px;line-height:1.7;color:var(--text-2)}
.cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:38px}
.btn.primary{background:linear-gradient(90deg,var(--pur),#d946ef);box-shadow:0 14px 34px -12px rgba(168,85,247,.8)}
.btn.primary:hover{background:linear-gradient(90deg,#6d28d9,#c026d3)}
.btn.ghost{background:transparent;color:var(--text-2);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{color:#fff;border-color:#8a8a99;background:rgba(255,255,255,.03)}
.contact-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;margin-top:40px;font-family:var(--mono);font-size:13px;color:var(--text-3)}
.contact-meta b{color:var(--pur-2);font-weight:600;margin-right:6px}

/* experience — at-a-glance stats + recommendations */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:44px auto 0;max-width:1000px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;text-align:left}
.stat b{display:block;font-size:clamp(34px,3.6vw,48px);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.stat b i{font-style:normal;color:var(--pur-2)}
.stat small{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--text-3)}
.recs-wrap{margin-top:56px}
.recs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rec{position:relative;background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--rc);border-radius:14px;padding:28px 30px 24px;margin:0}
.rec .q{position:absolute;right:22px;top:6px;font-size:72px;font-weight:800;line-height:1;color:var(--rc);opacity:.18}
.rec p{font-size:14.5px;line-height:1.75;color:var(--text-2)}
.rec footer{display:flex;align-items:center;gap:12px;margin-top:20px}
.rec .av{width:40px;height:40px;border-radius:50%;background:var(--rc);color:#fff;font-family:var(--mono);font-weight:600;font-size:13px;display:grid;place-items:center;flex:none}
.rec b{display:block;font-size:14px;color:#fff}
.rec small{font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.rec .verified{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--text-3);white-space:nowrap}
.rec .verified svg{width:13px;height:13px;color:#0a66c2}

/* ==========================================================================
   DEV VISUALS — windows, code, terminals, metrics, logo wall, photos
   ========================================================================== */
.win{background:#0d0d12;border:1px solid #2a2a35;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02);display:flex;flex-direction:column;min-width:0}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#15151c;border-bottom:1px solid #26262e;flex:none}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a45;flex:none}
.win-bar i:nth-child(1){background:#ff5f57}.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-tabs{display:flex;gap:2px;margin-left:10px;min-width:0;overflow:hidden}
.win-tab{font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:6px 6px 0 0;color:var(--text-3);white-space:nowrap}
.win-tab.on{background:#0d0d12;color:#fff}
.win-tab::before{content:"◆";font-size:8px;margin-right:6px;color:var(--pur-2)}
.win-tab.yml::before{color:var(--pink)}
.code{display:block;margin:0;padding:16px 18px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#d4d4dc;overflow:auto;counter-reset:ln;white-space:pre;flex:1}
.code .l{display:block;padding-left:34px;position:relative;border-radius:4px}
.code .l:empty::after{content:"\00a0"}
.code .l::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:22px;text-align:right;color:#4a4a58}
.code .l.hl{background:rgba(124,58,237,.16);box-shadow:inset 3px 0 0 var(--pur)}
.code .k{color:#c792ea}.code .ty{color:#82aaff}.code .fn{color:#ffcb6b}.code .st{color:#c3e88d}.code .cm{color:#5c6370;font-style:italic}.code .an{color:#f78c6c}.code .nu{color:#f78c6c}.code .op{color:#89ddff}
.term{display:block;margin:0;padding:14px 16px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#cfcfd8;background:#0b0b10;overflow:auto;white-space:pre;flex:1}
.term .ln{display:block}
.term .p{color:var(--teal)}.term .ok{color:var(--green)}.term .wn{color:var(--amber)}.term .er{color:#f87171}.term .dim{color:var(--text-3)}.term .hi{color:#fff}.term .tool{color:var(--pur-2)}
.term .cur{display:inline-block;width:8px;height:14px;background:var(--pur-2);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
.term.anim .ln{opacity:0;transition:opacity .25s}
.term.anim .ln.in{opacity:1}
.metrics{padding:16px 18px 18px;background:#0d0d12;flex:1}
.metrics h5{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;font-weight:500;display:flex;justify-content:space-between}
.metrics h5 span{color:var(--green)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 14px}
.kpi{background:#14141b;border:1px solid #26262e;border-radius:8px;padding:10px 12px;min-width:0}
.kpi b{display:block;font-size:19px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em}
.kpi b em{font-style:normal;font-size:12px;color:var(--green);margin-left:4px}
.kpi small{font-family:var(--mono);font-size:10.5px;color:var(--text-3);display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart{width:100%;height:auto;display:block}
.chart .gl{stroke:#26262e;stroke-width:1}
.chart .before{stroke:var(--pink);fill:none;stroke-width:2;stroke-linejoin:round}
.chart .after{stroke:var(--green);fill:none;stroke-width:2.2;stroke-linejoin:round}
.chart .area{fill:url(#gA);opacity:.6}
.chart text{font-family:var(--mono);font-size:9px;fill:#7c7c8a}
.chart .dot{fill:var(--green);stroke:#0d0d12;stroke-width:2}

/* desk collage (home) */
.desk{padding:30px 0 120px}
.desk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.desk-head .mono{font-size:14px;color:var(--text-2);max-width:560px;margin-top:12px;line-height:1.7}
.desk-stage{perspective:1800px}
.desk-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:22px;transform:rotateX(5deg) rotateY(-5deg);transform-style:preserve-3d;transition:transform .9s var(--ease)}
.desk-stage:hover .desk-grid{transform:rotateX(0) rotateY(0)}
.desk-grid .win{animation:drift 9s ease-in-out infinite}
.desk-grid .win:nth-child(2){animation-delay:-3s}
.desk-grid .win:nth-child(3){animation-delay:-6s}
.desk-grid .ed{grid-row:1 / span 2}
.desk-grid .ed .code{min-height:100%}
.desk-cap{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:12px;color:var(--text-3)}
.desk-cap span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;background:var(--pur-2);vertical-align:1px}
.desk-cap span:nth-child(2)::before{background:var(--teal)}
.desk-cap span:nth-child(3)::before{background:var(--green)}

/* toolbelt logo wall */
.wall-sec{padding:0 0 120px}
.wall-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.wall-head .mono{font-size:13px;color:var(--text-2)}
.wall{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:6px 0}
.wall + .wall{margin-top:14px}
.wall-track{display:flex;gap:14px;width:max-content;animation:marq 46s linear infinite}
.wall.rev .wall-track{animation-direction:reverse;animation-duration:54s}
.wall:hover .wall-track{animation-play-state:paused}
.tile{display:flex;align-items:center;gap:11px;padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);font-family:var(--mono);font-size:13px;color:var(--text-2);white-space:nowrap;transition:border-color .3s,color .3s,transform .3s}
.tile:hover{border-color:var(--pur-2);color:#fff;transform:translateY(-3px)}
.tile img{width:26px;height:26px;object-fit:contain}
.tile b{font-weight:600;color:var(--text)}
.tile small{color:var(--text-3);font-size:11px}

/* chat attachments */
.bub.att{padding:8px;max-width:520px;width:100%}
.bub.att .win{border-radius:10px;box-shadow:none}
.bub.att img{display:block;width:100%;border-radius:10px}
.bub.att figcaption{font-family:var(--mono);font-size:11.5px;color:var(--text-3);padding:9px 8px 3px}
.bub.att .diag{padding:10px;background:#0d0d12}
.bub.att .term{font-size:11.5px;line-height:1.6}

/* screenshot-style covers */
.cv.shot{align-items:end;padding:26px 8% 0}
.cv.shot .win{width:100%;border-radius:10px 10px 0 0;border-bottom:0;box-shadow:0 -20px 60px -30px rgba(0,0,0,.9);transform:translateY(0);transition:transform .6s var(--ease)}
.cover:hover .cv.shot .win{transform:translateY(-8px)}
.cv.shot .term,.cv.shot .code{font-size:10.5px;line-height:1.55;padding:10px 12px}
.cv.shot .win-bar{padding:7px 10px}
.cv.shot .win-bar i{width:8px;height:8px}
.cv .corner{position:absolute;right:14px;top:14px;width:36px;height:36px;padding:6px;border-radius:9px;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:2}
.cv .corner img{width:100%;height:100%;object-fit:contain}
.cv .corner b{display:block;text-align:center;color:#111;font-size:16px;line-height:24px}
.cv img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .7s var(--ease)}
.cv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(13,13,18,.75))}
.cv.diagw{padding:26px 8% 0;align-items:end}
.cv.diagw .win{width:100%;border-radius:10px 10px 0 0;border-bottom:0}
.cv.diagw .diag{padding:12px 14px 0}
.doc{background:#f5f5f7;color:#111;border-radius:6px 6px 0 0;padding:16px 18px;font-family:var(--sans);width:100%;height:100%;box-shadow:0 -20px 50px -30px rgba(0,0,0,.9)}
.doc{display:block}
.doc > b{display:block;font-size:12px;font-weight:700;color:#111;letter-spacing:-.01em;line-height:1.3}
.doc small{display:block;font-family:var(--mono);font-size:8.5px;color:#7c7c8a;margin-top:2px}
.doc i{display:block;height:6px;border-radius:3px;background:#dcdce3;margin-top:8px}
.doc i:nth-of-type(2n){width:82%}.doc i:nth-of-type(3n){width:64%}
.doc .badge{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:8.5px;padding:3px 7px;border-radius:4px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}

/* modal figures */
.pm-fig{margin:0 0 24px;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#0d0d12}
.pm-fig img{display:block;width:100%;max-height:360px;object-fit:cover}
.pm-fig .diag{padding:16px}
.pm-fig .term{font-size:12px}
.cv-fig{display:block}
.cv-fig .win{border:0;border-radius:0;box-shadow:none}
.pm-fig .win-bar{padding:8px 12px}
.pm-fig figcaption{font-family:var(--mono);font-size:11.5px;color:var(--text-3);padding:10px 14px;border-top:1px solid var(--line)}

/* experience extras */
.tech li img{width:16px;height:16px;vertical-align:-3px;margin-right:7px;display:inline-block}
.xtra{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.resume-card{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:24px 26px;overflow:hidden;position:relative;margin-top:48px}
.resume-card .prev{position:relative;perspective:900px}
.resume-card .prev img{width:100%;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transform:rotateY(14deg) rotateX(4deg);transition:transform .6s var(--ease);border:1px solid #33333d}
.resume-card:hover .prev img{transform:rotateY(4deg) rotateX(1deg)}
.resume-card h3{font-size:20px;font-weight:700;line-height:1.25}
.resume-card p{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.6}
.resume-card .btn{margin-top:16px}
.resume-card .meta{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:10px}
.moments{margin-top:56px}
.moments-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.moments-head .mono{font-size:13px;color:var(--text-2)}
.moments-head .mono a{color:var(--pur-2)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.moment{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#000;margin:0}
.moment img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.moment:hover img{transform:scale(1.05)}
.moment figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88));font-size:13.5px;color:#fff}
.moment figcaption b{display:block;font-weight:700}
.moment figcaption span{font-family:var(--mono);font-size:11px;color:var(--text-2)}
.moment figcaption a{color:var(--pur-2)}
.moment .m-tag{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:10.5px;padding:4px 8px;border-radius:6px;background:rgba(13,13,18,.75);color:#fff;border:1px solid rgba(255,255,255,.15)}
.cert img{width:14px;height:14px;border-radius:3px;align-self:center;flex:none}

/* blog covers */
.wcard .wc-cover{background-size:auto 92%,cover;background-position:right -10px bottom -6px,center;background-repeat:no-repeat}
.wcard[data-f="aws"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M50%2090h95a22%2022%200%200%200%204-43%2030%2030%200%200%200-57-8%2024%2024%200%200%200-42%2015%2018%2018%200%200%200%200%2036z%22/%3E%3Crect%20x%3D%2266%22%20y%3D%2298%22%20width%3D%2224%22%20height%3D%2216%22%20rx%3D%223%22/%3E%3Crect%20x%3D%22100%22%20y%3D%2298%22%20width%3D%2224%22%20height%3D%2216%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M78%2098V90M112%2098V90%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}
.wcard[data-f="backend"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M60%2040c-14%200-14%2010-14%2020s0%2015-12%2015c12%200%2012%205%2012%2015s0%2020%2014%2020%22/%3E%3Cpath%20d%3D%22M140%2040c14%200%2014%2010%2014%2020s0%2015%2012%2015c-12%200-12%205-12%2015s0%2020-14%2020%22/%3E%3Cpath%20d%3D%22M84%2058h32M84%2075h44M84%2092h24%22/%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2258%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2275%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%2292%22%20r%3D%223%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}
.wcard[data-f="data"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2045h140M30%2075h140M30%20105h140%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2245%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2245%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%2275%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2275%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%22105%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%22125%22%20cy%3D%22105%22%20r%3D%225%22/%3E%3Cpath%20d%3D%22M60%2050v20M110%2050l30%2020M85%2080l-35%2020%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}
.wcard[data-f="security"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M100%2028l44%2016v30c0%2026-19%2045-44%2054-25-9-44-28-44-54V44z%22/%3E%3Crect%20x%3D%2286%22%20y%3D%2270%22%20width%3D%2228%22%20height%3D%2222%22%20rx%3D%224%22/%3E%3Cpath%20d%3D%22M92%2070v-8a8%208%200%200%201%2016%200v8%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2281%22%20r%3D%223%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}
.wcard[data-f="design"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2250%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2245%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2295%22%20r%3D%2212%22/%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22105%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22105%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22M69%2055l22%2032M131%2050l-21%2037M53%20100l37-4M147%20101l-36-5M70%2050h60%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}
.wcard[data-f="ai"] .wc-cover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20130%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.16%29%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M100%2035l7%2020%2020%207-20%207-7%2020-7-20-20-7%2020-7z%22/%3E%3Cpath%20d%3D%22M150%2080l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%22/%3E%3Cpath%20d%3D%22M50%2090l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2262%22%20r%3D%2234%22%20stroke-dasharray%3D%224%206%22/%3E%3C/svg%3E"),linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,#16161b),#111114)}

.wc-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:14px 14px;opacity:.8}
.wc-cover::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;left:-40px;bottom:-90px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);opacity:.8}
.wc-cover img{position:relative;z-index:1}
.wc-cover b,.wc-n{z-index:1}

/* ==========================================================================
   BLOG — topic map, editor's picks, illustrations
   ========================================================================== */
.blog-head{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.blog-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--text-3)}
.blog-stats b{color:#fff;font-weight:600;margin-right:7px;font-size:15px}
.topic-map{position:relative;padding:10px 0}
.topic-map svg{width:100%;height:auto;display:block;overflow:visible}
.topic-map .bub{cursor:pointer;transform-box:fill-box;transform-origin:center;animation:bob 6s ease-in-out infinite;animation-delay:var(--d,0s);outline:0}
.topic-map .bub circle{fill:color-mix(in srgb,var(--c) 20%,#16161b);stroke:var(--c);stroke-width:1.5;transition:fill .3s,stroke-width .3s,filter .3s}
.topic-map .bub:hover circle,.topic-map .bub:focus-visible circle{fill:color-mix(in srgb,var(--c) 38%,#16161b);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c) 60%,transparent))}
.topic-map .bub.on circle{stroke-width:3;fill:color-mix(in srgb,var(--c) 45%,#16161b)}
.topic-map .bub text{fill:#fff;font-family:var(--sans);font-weight:600;font-size:13px;text-anchor:middle;pointer-events:none}
.topic-map .bub .n{fill:var(--c);font-family:var(--mono);font-weight:500;font-size:11px}
.tm-cap{position:absolute;right:0;bottom:-6px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.feat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:80px}
.feat-head.all-head{margin-top:40px}
.feats{display:flex;gap:22px;overflow-x:auto;padding:28px 4px 34px;margin:0 -4px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feats::-webkit-scrollbar{display:none}
.feats:focus-visible{outline:2px solid var(--pur-2);outline-offset:-2px}
.feat{flex:none;width:min(520px,86vw);scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),border-color .45s,opacity .8s var(--ease),box-shadow .45s}
.feat.rv{transition-delay:calc(var(--d,0)*90ms)}
.feat.in:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--c) 45%,transparent)}
.feat .art{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,#0f0f14),#0d0d12);border-bottom:1px solid var(--line)}
.feat .art svg{width:100%;height:100%;display:block}
.feat .num{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55);z-index:1}
.feat .fb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.feat .fb .wc-cat{margin-top:0}
.feat h3{font-size:19px;font-weight:700;line-height:1.3;color:#fff}
.feat p{font-size:14px;color:var(--text-2);line-height:1.6}
.feat .fmeta{display:flex;justify-content:space-between;margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:12px;color:var(--text-3)}
.wc-date{color:var(--text-3);margin-right:10px}
.wc-date::after{content:"·";margin-left:10px}
/* illustration language */
.il{font-family:var(--mono);color:var(--c)}
.il text{fill:#9a9aa8;font-size:9.5px;font-family:var(--mono)}
.il .t2{fill:#fff;font-weight:600}
.il .hot-t{fill:var(--c)}
.il .cap{fill:#7c7c8a;font-size:9px}
.il .cap2{fill:#c9c9d4;font-size:9px}
.il .lbl text{fill:#6b6b78;font-size:8.5px}
.il .box{fill:#15151c;stroke:#3a3a46;stroke-width:1}
.il .box.hot{stroke:var(--c);stroke-width:1.5}
.il .lane line,.il .lane{stroke:#2a2a35;stroke-width:1.5}
.il .task{fill:var(--c);opacity:.9}
.il .mv{animation:ilx 5.6s var(--ease) infinite;animation-delay:var(--dl,0s)}
.il .lockp{fill:none;stroke:var(--c);stroke-width:2}
.il .lockb{fill:var(--c)}
.il .cell{transform-box:fill-box;transform-origin:center}
.il .cell.evict{animation:evict 5s ease-in-out infinite}
.il .cell.evict rect{transition:stroke .3s}
.il .cell.fresh{animation:fresh 5s ease-in-out infinite}
.il .cell.fresh rect{stroke:var(--c)}
.il .flow line{stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-dasharray:7 11;animation:flow 1.3s linear infinite;opacity:.9}
.il .flow.slow line{animation-duration:2.1s;stroke-dasharray:10 16}
.il .link{fill:none;stroke:var(--c);stroke-width:2;stroke-dasharray:6 8;animation:flow 1.4s linear infinite}
.il .ep{fill:color-mix(in srgb,var(--c) 30%,#15151c);stroke:var(--c);stroke-width:1.5}
.il .dot{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
.il .req{animation:req 4.4s ease-in-out infinite}
.il .req.r2{animation-delay:1.6s}
.il .write{animation:req 4.4s ease-in-out infinite;animation-delay:.9s}
.il .rowr{fill:var(--c);opacity:0;animation:rowin 4.4s ease-in-out infinite;animation-delay:1.3s}
.il .cached{fill:var(--c);font-size:9.5px;opacity:0;animation:cached 4.4s ease-in-out infinite;animation-delay:2.4s}
/* per-post card art (grid + home teaser) */
.wc-art{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,#0f0f14),#0d0d12);border:1px solid rgba(255,255,255,.05)}
.wc-art svg{width:100%;height:100%;display:block}
.wc-art .wc-n{position:absolute;left:10px;top:8px;font-family:var(--mono);font-size:11px;color:var(--text-3);z-index:1}
.wcard:hover .wc-art{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
/* more illustration primitives */
.il .trav{animation:trav var(--dur,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .trav-y{animation:travy var(--dur,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .bounce{animation:bounceb 4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .dot.bad{fill:#f87171;filter:drop-shadow(0 0 6px #f87171)}
.il .bad-t{fill:#f87171}
.il .chunk{fill:color-mix(in srgb,var(--c) 45%,#15151c);stroke:var(--c);stroke-width:1;animation:chunkin 4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .rowh{fill:color-mix(in srgb,var(--c) 18%,#15151c);stroke:#3a3a46}
.il .row2{fill:#15151c;stroke:#3a3a46}
.il .rowshift{animation:rowshift 5s ease-in-out infinite}
.il .insert{fill:color-mix(in srgb,var(--c) 40%,#15151c);stroke:var(--c);opacity:0;animation:insertin 5s ease-in-out infinite}
.il .cursorrow{fill:color-mix(in srgb,var(--c) 40%,#15151c);stroke:var(--c);stroke-width:1.5}
.il .kd{filter:drop-shadow(0 0 5px currentColor)}
.il .fill{fill:var(--c);opacity:.7;transform-box:fill-box;transform-origin:left;animation:fillw 4s ease-in-out infinite}
.il .fill.slow{animation-duration:6s;fill:#f87171}
.il .stage{fill:#2a2a35;animation:stagefill 4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .mask{fill:var(--c);animation:maskb 3s steps(1) infinite}
.il .breaker{fill:#15151c;stroke:#34d399;stroke-width:2;animation:cb 6s steps(1) infinite}
.il .cbstate{fill:#34d399;font-size:9px;animation:cbt 6s steps(1) infinite}
.il .seq{opacity:0;animation:seqin 5.5s ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .tick{fill:var(--c);font-weight:600}
.il .bar{transform-box:fill-box;transform-origin:bottom;animation:bargrow 4.5s ease-in-out infinite;animation-delay:var(--dl,0s)}
.il .barb{fill:#f472b6;opacity:.55}
.il .bara{fill:var(--c)}
.il .orbit{animation:pulse 3.3s ease-in-out infinite;animation-delay:var(--dl,0s);transform-box:fill-box;transform-origin:center}
.il .lagt{fill:var(--c);font-size:9px;animation:maskb 2s steps(1) infinite}
.il .jwt{stroke-width:1.5;animation:jwtglow 4.5s ease-in-out infinite}
.il .j1{fill:rgba(244,114,182,.18);stroke:#f472b6}
.il .j2{fill:rgba(167,139,250,.18);stroke:#a78bfa;animation-delay:1.5s}
.il .j3{fill:rgba(52,211,153,.18);stroke:#34d399;animation-delay:3s}
.il .hs{stroke:var(--c);stroke-width:1.5}
.il .lam{fill:var(--c);font-size:34px;font-weight:600}
.il .cold{fill:#f87171;opacity:.7;transform-box:fill-box;transform-origin:left;animation:fillw 4s ease-in-out infinite;--w:1}
.il .warm{fill:var(--c);transform-box:fill-box;transform-origin:left;animation:fillw 4s ease-in-out infinite;--w:1}
@keyframes trav{0%{transform:translateX(0);opacity:0}10%{opacity:1}70%{transform:translateX(var(--dx));opacity:1}80%{transform:translateX(var(--dx));opacity:0}100%{transform:translateX(var(--dx));opacity:0}}
@keyframes travy{0%{transform:translateY(0);opacity:0}10%{opacity:1}70%{transform:translateY(var(--dy));opacity:1}80%{transform:translateY(var(--dy));opacity:0}100%{transform:translateY(var(--dy));opacity:0}}
@keyframes bounceb{0%{transform:translateX(0);opacity:0}10%{opacity:1}45%{transform:translateX(90px)}60%{transform:translateX(40px);opacity:1}75%{transform:translateX(30px);opacity:0}100%{transform:translateX(30px);opacity:0}}
@keyframes chunkin{0%,15%{opacity:.25}30%,70%{opacity:1}85%,100%{opacity:.25}}
@keyframes rowshift{0%,35%{transform:translateY(0)}50%,85%{transform:translateY(20px)}100%{transform:translateY(0)}}
@keyframes insertin{0%,40%{opacity:0}52%,85%{opacity:1}100%{opacity:0}}
@keyframes fillw{0%{transform:scaleX(0)}60%,85%{transform:scaleX(var(--w,1))}100%{transform:scaleX(0)}}
@keyframes stagefill{0%,20%{fill:#2a2a35}35%,80%{fill:var(--c)}100%{fill:#2a2a35}}
@keyframes maskb{50%{opacity:.35}}
@keyframes cb{0%,45%{stroke:#34d399}50%,75%{stroke:#f87171}80%,100%{stroke:#ffb36b}}
@keyframes cbt{0%,45%{fill:#34d399}50%,75%{fill:#f87171}80%,100%{fill:#ffb36b}}
@keyframes seqin{0%{opacity:0}12%,80%{opacity:1}95%,100%{opacity:0}}
@keyframes bargrow{0%{transform:scaleY(1)}45%,80%{transform:scaleY(.55)}100%{transform:scaleY(1)}}
@keyframes pulse{50%{transform:scale(1.8);opacity:.4}}
@keyframes jwtglow{0%,70%,100%{filter:none}15%,45%{filter:drop-shadow(0 0 8px currentColor)}}
@keyframes ilx{0%{transform:translateX(0);opacity:0}8%{opacity:1}62%{transform:translateX(206px);opacity:1}72%{transform:translateX(206px);opacity:0}100%{transform:translateX(206px);opacity:0}}
@keyframes evict{0%,38%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}66%{opacity:0;transform:scale(.55)}100%{opacity:0;transform:scale(.55)}}
@keyframes fresh{0%,66%{opacity:0;transform:scale(.55)}82%,100%{opacity:1;transform:scale(1)}}
@keyframes flow{to{stroke-dashoffset:-36}}
@keyframes req{0%{transform:translateX(0);opacity:0}8%{opacity:1}42%{transform:translateX(60px);opacity:1}52%{transform:translateX(60px);opacity:0}100%{transform:translateX(60px);opacity:0}}
@keyframes rowin{0%,44%{opacity:0}56%,100%{opacity:1}}
@keyframes cached{0%,58%{opacity:0}70%,88%{opacity:1}100%{opacity:0}}
@keyframes drift{50%{transform:translateY(-8px)}}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   SUB-PAGES — page heads, blog grid, CTA strip, page transitions
   ========================================================================== */
.page{padding-top:170px}
.page-head{padding-bottom:16px}
.page-head.center{margin:0 auto;max-width:820px}
.kicker{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--pur-2)}
.page-head h1{margin-top:14px}
.page-head .mono{margin-top:22px;font-size:15px;line-height:1.8;color:var(--text-2);max-width:640px}
.page-head.center .mono{margin-left:auto;margin-right:auto}
.page-head .mono a{color:var(--pur-2)}
.xp.page .jobs{margin-top:56px}
.writing.page .filter{margin-top:40px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.wgrid .wcard{width:auto;flex:initial}
.wgrid .wcard.rv{transition-delay:calc(min(var(--d,0),8)*60ms)}
.wcard.hide{display:none}
.more-card{justify-content:center;border-style:dashed}
.more-card .wc-cover{background:linear-gradient(135deg,rgba(124,58,237,.25),#111114)}
.more-card .wc-cover b{position:static;opacity:1;font-size:48px}
.cta-strip{padding:0 0 110px}
.cta-strip .box{background:#0a0a0d;border:1px solid var(--line);border-radius:18px;padding:48px 52px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-strip .box::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%);pointer-events:none}
.cta-strip h2{font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.25;max-width:640px;margin-top:10px}
.cta-strip .btn{font-size:14px;padding:14px 22px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .36s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}

/* ==========================================================================
   CHAOS PLAYGROUND — live multi-region simulation
   ========================================================================== */
.chaos{padding:30px 0 120px}
.chaos-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
.chaos-stage{min-height:420px;transition:box-shadow .4s}
.chaos-stage .win-bar span{overflow:visible}
.chaos-status{margin-left:auto!important;font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.chaos-status.ok{color:var(--green)}.chaos-status.wn{color:var(--amber)}.chaos-status.er{color:#f87171}
.chaos-svg{width:100%;height:auto;display:block;padding:10px 12px 6px;font-family:var(--mono);flex:1}
.chaos-svg text{font-size:10.5px;fill:#c9c9d4}
.chaos-svg .t2{fill:#fff;font-weight:600}
.chaos-svg .dim{fill:#7c7c8a;font-size:9px}
.chaos-svg .box{fill:#15151c;stroke:#3a3a46;stroke-width:1;transition:stroke .3s,fill .3s}
.chaos-svg .ch-rbox{fill:rgba(255,255,255,.015);stroke:#2a2a35;stroke-dasharray:4 4;transition:stroke .3s}
.chaos-svg .ch-rname{fill:var(--pur-2);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.chaos-svg .ch-link{stroke:#4a4a58;stroke-width:1.4;fill:none;marker-end:url(#ch-arr)}
.chaos-svg .ch-route{stroke:var(--pur-2);stroke-width:1.6;fill:none;stroke-dasharray:6 8;animation:flow 1.2s linear infinite;transition:opacity .4s}
.chaos-svg .ch-route.off{opacity:.15;animation-play-state:paused}
.chaos-svg .ch-repl{stroke:var(--amber);stroke-width:1.2;fill:none;stroke-dasharray:3 6;animation:flow 2s linear infinite;opacity:.8}
.chaos-svg .ch-health{fill:var(--green);filter:drop-shadow(0 0 5px var(--green));transition:fill .3s}
.chaos-svg .unhealthy .ch-health{fill:#f87171;filter:drop-shadow(0 0 6px #f87171)}
.chaos-svg .down .box{stroke:#f87171;fill:rgba(248,113,113,.08)}
.chaos-svg .down .t2,.chaos-svg .down .dim{fill:#f87171}
.chaos-svg .down .ch-rbox{stroke:rgba(248,113,113,.55)}
.chaos-svg .down .ch-rname{fill:#f87171}
.chaos-svg .qdown .ch-sqs .box{stroke:#f87171;fill:rgba(248,113,113,.12)}
.chaos-svg .qdown .ch-sqs .t2{fill:#f87171}
.chaos-svg .ch-depth{fill:var(--amber);transition:height .25s,y .25s}
.chaos-svg .ch-pills rect{fill:#22222c;stroke:#3a3a46;stroke-width:1;transition:fill .25s,stroke .25s}
.chaos-svg .ch-pills rect.on{fill:#2a2440;stroke:var(--pur-2)}
.chaos-svg .ch-pills rect.busy{fill:var(--pur);stroke:var(--pur-2)}
.chaos-svg .ch-pk{fill:var(--teal);filter:drop-shadow(0 0 5px var(--teal))}
.chaos-svg .ch-pk.retry{fill:var(--amber);filter:drop-shadow(0 0 5px var(--amber))}
.chaos-svg .ch-pk.poison{fill:#f87171;filter:drop-shadow(0 0 6px #f87171)}
.chaos-svg .ch-pk.dup{fill:var(--pink);filter:drop-shadow(0 0 5px var(--pink))}
.chaos-svg .ch-lbl{font-size:8.5px;fill:#fff;paint-order:stroke;stroke:#0d0d12;stroke-width:3px;stroke-linejoin:round;font-weight:600}
.chaos-svg .ch-lbl.wn{fill:var(--amber)}.chaos-svg .ch-lbl.er{fill:#f87171}.chaos-svg .ch-lbl.ok{fill:var(--green)}
.chaos-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.ch-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ch-m{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;position:relative;overflow:hidden;min-width:0}
.ch-m.wide{grid-column:span 3}
.ch-m small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.ch-m b{display:block;font-size:20px;font-weight:700;margin-top:4px;letter-spacing:-.02em;color:#fff;transition:color .3s}
.ch-m b.wn{color:var(--amber)}.ch-m b.er{color:#f87171}
.ch-spark{position:absolute;right:10px;bottom:8px;width:120px;height:32px}
.ch-spark polyline{fill:none;stroke:var(--green);stroke-width:1.6;stroke-linejoin:round}
.ch-actions{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-wrap:wrap;gap:8px}
.ch-actions .kicker{width:100%;margin-bottom:2px}
.ch-btn{font-family:var(--mono);font-size:12.5px;padding:9px 12px;border-radius:8px;border:1px solid var(--line-2);color:var(--text-2);background:rgba(255,255,255,.02);transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.ch-btn:hover{color:#fff;border-color:#f87171;background:rgba(248,113,113,.08)}
.ch-btn.on{color:#fff;border-color:#f87171;background:rgba(248,113,113,.2);box-shadow:0 0 0 3px rgba(248,113,113,.12)}
.ch-btn.restore{margin-left:auto;border-color:rgba(52,211,153,.5);color:var(--green)}
.ch-btn.restore:hover{background:rgba(52,211,153,.12);border-color:var(--green);color:var(--green)}
.ch-log{background:#0b0b10;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--text-2);min-height:180px;flex:1;overflow:hidden}
.ch-log li{padding:5px 0;border-bottom:1px dashed #1e1e26;animation:login .35s var(--ease)}
.ch-log li:last-child{border-bottom:0}
.ch-log .ts{color:var(--text-3);margin-right:8px}
.ch-log li.er{color:#f87171}.ch-log li.wn{color:var(--amber)}.ch-log li.ok{color:var(--green)}.ch-log li.info{color:var(--pur-2)}.ch-log li.dim{color:var(--text-3)}
.ch-log b{color:#fff;font-weight:600}
.chaos.alarm .chaos-stage{box-shadow:0 0 0 1px rgba(248,113,113,.6),0 0 70px -10px rgba(248,113,113,.55)}
.chaos-foot{margin-top:18px;font-size:12.5px;color:var(--text-3);line-height:1.75;max-width:1000px}
@keyframes login{from{opacity:0;transform:translateY(-6px)}}

/* footer + to-top */
.foot{padding:34px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot b{color:#fff}
.totop{position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:8px;background:var(--pur);display:grid;place-items:center;z-index:90;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s var(--ease),background .25s;box-shadow:0 14px 30px -10px rgba(124,58,237,.85)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:#6d28d9}
.totop svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal{border:0;padding:0;background:transparent;max-width:none;width:min(780px,calc(100vw - 32px));margin:auto;color:var(--text);overflow:visible}
.modal::backdrop{background:rgba(6,6,10,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[open]{animation:pop .32s var(--ease)}
.modal .x{position:absolute;right:0;top:-50px;width:40px;height:40px;border-radius:50%;background:#fff;color:#111;font-size:24px;line-height:1;display:grid;place-items:center;z-index:2;transition:transform .2s}
.modal .x:hover{transform:rotate(90deg)}
.pm-body{background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;padding:42px 46px;max-height:82vh;overflow:auto}
.pm-body .tag{font-family:var(--mono);font-size:12px;color:var(--pur-2)}
.pm-body h2{font-size:clamp(22px,2.6vw,32px);margin:10px 0 16px;line-height:1.2;letter-spacing:-.01em}
.pm-body p{color:var(--text-2);line-height:1.75;font-size:15.5px}
.pm-body dl{margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:14.5px}
.pm-body dt{font-family:var(--mono);color:var(--pur-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding-top:4px}
.pm-body dd{color:var(--text-2);line-height:1.6}
.pm-body dd b{color:#fff}
.pm-body .tech{margin-top:24px}
.pm-body .btn{margin-top:24px}
.embed{width:min(560px,calc(100vw - 32px))}
.em-body{background:#fff;border-radius:14px;overflow:hidden;max-height:85vh}
.em-body iframe{display:block;width:100%;height:min(720px,80vh);border:0}
.em-body .nohttp{padding:40px 30px;color:#111;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.7}
.em-body .nohttp a{color:var(--pur);text-decoration:underline}

/* command palette */
.kp{width:min(600px,calc(100vw - 32px));margin-top:12vh}
.kp-body{background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.kp-in{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.kp-in > span{color:var(--pur-2);font-family:var(--mono);font-size:18px}
.kp-in input{flex:1;background:none;border:0;outline:0;color:#fff;font-family:var(--mono);font-size:15px}
.kp-in input::placeholder{color:var(--text-3)}
.kp kbd{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-3)}
#kp-list{max-height:min(420px,50vh);overflow:auto;padding:8px}
#kp-list li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;color:var(--text-2);font-size:14px}
#kp-list li .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--pur-2);flex:none}
#kp-list li b{color:#fff;font-weight:500}
#kp-list li small{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3)}
#kp-list li.sel,#kp-list li:hover{background:rgba(139,92,246,.14);color:#fff}
#kp-list li.empty{color:var(--text-3);cursor:default;justify-content:center;font-family:var(--mono);font-size:13px}
.kp-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-3)}
.kp-foot kbd{margin-right:4px}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes blink{50%{opacity:0}}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}
@keyframes float{50%{transform:translateY(-16px)}}
@keyframes dash{to{stroke-dashoffset:-12}}
@keyframes tex{to{transform:translateY(-25%)}}
@keyframes dots{0%,100%{box-shadow:12px 0 0 var(--text-3),24px 0 0 var(--text-3);background:var(--pur-2)}33%{box-shadow:12px 0 0 var(--pur-2),24px 0 0 var(--text-3);background:var(--text-3)}66%{box-shadow:12px 0 0 var(--text-3),24px 0 0 var(--pur-2);background:var(--text-3)}}
@keyframes bob{50%{transform:translateY(6px)}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .grid,.wgrid{grid-template-columns:repeat(2,1fr)}
  .desk-grid{transform:none;grid-template-columns:1fr}
  .chaos-grid{grid-template-columns:1fr}
  .chaos-stage{min-height:0}
  .desk-grid .ed{grid-row:auto}
  .xtra{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .work-head{grid-template-columns:1fr;gap:56px}
  .device{max-width:640px;transform:none!important}
}
@media (max-width:900px){
  .burger{display:flex}
  .kbtn{display:none}
  .hire{padding:8px 14px;font-size:12.5px}
  .nav-tools{margin-left:auto;position:relative;z-index:2}
  .menu{position:fixed;inset:0;background:rgba(17,17,20,.97);flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s}
  .menu.open{opacity:1;pointer-events:auto}
  .nl{font-size:20px;padding:12px 24px}
  .sec{padding:88px 0}
  .cells{grid-template-columns:1fr}
  .cell{padding:38px 28px 50px}
  .split{grid-template-columns:1fr;grid-template-rows:auto 380px auto;min-height:0}
  .split[data-focus="left"],.split[data-focus="right"]{grid-template-columns:1fr}
  .half{padding:56px 28px}
  .left .half-in{margin-left:0;text-align:left}
  .split[data-focus="left"] .right .half-in,.split[data-focus="right"] .left .half-in{transform:none}
  .ph-code{clip-path:inset(var(--cut) 0 0 0)}
  .portrait::after{left:0;right:0;top:var(--cut);bottom:auto;width:auto;height:2px;margin:-1px 0 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 20%,rgba(255,255,255,.7) 80%,transparent);transition:top .65s var(--ease)}
  .filter{margin-top:64px}
  .how{grid-template-columns:1fr 1fr}
  .gut{padding-left:0;grid-template-columns:36px 1fr}
  .sq{display:none}
  .gut.second{margin-top:72px}
  .edu{grid-template-columns:1fr}
  .recs{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .blog-head{grid-template-columns:1fr;gap:20px}
  .topic-map{max-width:420px}
  .feat-head{flex-direction:column;align-items:flex-start;margin-top:60px}
  .sh h2{white-space:normal}
  .jlogo{width:44px;height:44px;padding:7px;right:22px;top:22px}
  .job header{padding-right:60px}
  .job{padding:26px 24px}
  .job::before{display:none}
  .jobs{padding-left:18px}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .hero-in{padding:120px 16px 100px}
  .name{letter-spacing:.02em}
  .logos{gap:10px 20px}
  .lg{font-size:13px}
  .grid{grid-template-columns:1fr;gap:34px}
  .wgrid{grid-template-columns:1fr}
  .page{padding-top:120px}
  .desk-head,.wall-head,.moments-head{flex-direction:column;align-items:flex-start}
  .kpis{grid-template-columns:1fr 1fr}
  .ch-metrics{grid-template-columns:1fr 1fr}
  .ch-m.wide{grid-column:span 2}
  .ch-btn{flex:1 1 44%}
  .ch-btn.restore{margin-left:0;flex-basis:100%}
  .resume-card{grid-template-columns:1fr}
  .resume-card .prev{max-width:220px}
  .mgrid{grid-template-columns:1fr}
  .bub.att{max-width:100%}
  .code,.term{font-size:11.5px}
  .cta-strip .box{padding:34px 26px}
  .how{grid-template-columns:1fr}
  .bub{max-width:100%;font-size:14.5px;padding:14px 16px}
  .av{width:36px;height:36px;font-size:11px}
  .fp{flex-direction:column;align-items:flex-start;gap:6px}
  .arrow{display:none}
  .row-head{flex-direction:column;align-items:flex-start}
  .wcard{width:290px}
  .contact-box{padding:64px 22px 48px}
  .stat-row{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:18px}
  .rec .verified{display:none}
  .pm-body{padding:30px 24px}
  .pm-body dl{grid-template-columns:1fr;gap:4px 0}
  .pm-body dt{margin-top:12px}
  .totop{right:16px;bottom:16px;width:44px;height:44px}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.msg,.wcard{opacity:1;transform:none}
  .name .ch,.role,.featured{opacity:1;transform:none}
  .device{transform:none!important}
  .ph-code .tex{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}