:root{
  --bg:#0a1220;--bg2:#101a2c;--text:#e6edf7;--muted:#a3b3ca;--accent:#22d3ee;--accent-ink:#04121a;
  --line:#22314a;--card:#0f1a2d;--glow:rgba(34,211,238,.18);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
[data-theme=light]{
  --bg:#f5f8fc;--bg2:#e9eff7;--text:#0b1220;--muted:#475569;--accent:#0e7490;--accent-ink:#fff;
  --line:#cbd5e1;--card:#fff;--glow:rgba(14,116,144,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:8px;top:-60px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{top:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{max-width:1080px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:12px}
.brand{font:700 1rem var(--mono);color:var(--text);text-decoration:none;margin-right:auto}
.brand .mono{color:var(--accent)}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:8px 10px;color:var(--muted);text-decoration:none;font-size:.9rem;border-radius:6px}
.nav-links a:hover{color:var(--text);background:var(--bg2)}
.icon-btn{background:none;border:1px solid var(--line);color:var(--text);width:40px;height:40px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.menu-btn{display:none}
.i-sun{display:none}
[data-theme=dark] .i-sun{display:block}
[data-theme=dark] .i-moon{display:none}
@media(max-width:820px){
  .menu-btn{display:grid}
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 14px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 8px}
}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:96px 0 56px;overflow:hidden;background:radial-gradient(ellipse at 20% 10%,var(--glow),transparent 60%)}
#net{position:absolute;inset:0;width:100%;height:100%}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;width:100%}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.term{background:#070d18;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6),0 0 0 1px var(--glow);overflow:hidden;color:#d5e1f2}
.term-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #1b2a42;background:#0b1424}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#33445f;margin-right:5px}
.term-title{font-size:.78rem;color:#9fb0c8;margin-right:auto}
.skip-btn{background:none;border:1px solid #33445f;color:#cfe0f5;border-radius:6px;padding:4px 10px;font-size:.78rem;cursor:pointer}
.skip-btn:hover{border-color:#22d3ee;color:#22d3ee}
.skip-btn[hidden]{display:none}
.term-body{margin:0;padding:16px;font-size:.8rem;line-height:1.7;white-space:pre;overflow-x:auto;min-height:15.5em}
.term .ln{display:block}
.term b{color:#e6edf7;font-weight:500}
.term .p,.term .ok{color:#22d3ee}
.term .dim{color:#8a9bb3}
.term .hop{color:#7ee0a8}
.caret{display:inline-block;width:.55em;height:1em;background:#22d3ee;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.eyebrow{color:var(--accent);margin:0 0 6px;font-size:.9rem}
h1{font-size:clamp(2.4rem,6vw,3.8rem);line-height:1.08;margin:0 0 12px;letter-spacing:-.02em}
.title{font-size:1.15rem;font-weight:500;margin:0 0 6px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.js .intro{transition:opacity .6s,transform .6s}
.js.pre .intro{opacity:0;transform:translateY(14px)}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:600;padding:11px 20px;border-radius:8px;text-decoration:none;border:1px solid var(--accent);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--accent)}
.btn.ghost{background:none;color:var(--accent)}

/* sections */
.section{padding:88px 0}
.section:nth-of-type(even){background:var(--bg2)}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin:0 0 32px;letter-spacing:-.01em}
h3{margin:0 0 6px;font-size:1.1rem}
.tag{color:var(--accent);font-size:.9rem;font-weight:500;margin-right:6px}
.tag::after{content:" //"}
.lead{font-size:1.15rem;margin:0 0 24px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 14px 34px -16px var(--accent)}
.card p{margin:10px 0 16px;color:var(--muted)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.status{font-size:.72rem;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:2px 10px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font:500 .78rem var(--mono);padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--text)}
.chips.big li{font-size:.85rem;padding:6px 12px}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.skills h3{color:var(--accent);font-size:.95rem;margin-bottom:14px}

/* timeline: a link line with node dots */
.timeline{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding-bottom:36px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--accent)}
.date{color:var(--accent);font-size:.82rem;margin:0}
.org{color:var(--muted);margin:0 0 8px}
.timeline p:last-child{margin:0}

.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.two h3{margin-top:24px}
.two h3:first-child{margin-top:0}
.plain{list-style:none;padding:0;margin:12px 0 0}
.plain li{padding:0 0 18px 16px;border-left:2px solid var(--accent);margin-bottom:18px}
.links{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0 0 20px}
.footer{padding:28px 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}

/* scroll reveal (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .card.reveal.in{transition:opacity .7s ease,transform .25s,border-color .25s,box-shadow .25s}

/* if main.js never finishes (bad path, error), show everything after 3 s instead of leaving a blank page */
@keyframes reveal-fallback{to{opacity:1;transform:none}}
.js:not(.ready) .reveal{animation:reveal-fallback .01s 3s forwards}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js.pre .intro{opacity:1;transform:none}
}

/* content additions */
.open-line{display:inline-block;margin:0;padding:10px 14px;border:1px solid var(--accent);border-left-width:4px;border-radius:8px;background:var(--glow);font-size:.9rem}
.card.feature{grid-column:1/-1;padding:28px}
.card.feature:hover{transform:none}
.phases{flex-wrap:wrap}
.phases .done,.phases .wip{border-color:var(--accent);color:var(--accent)}
.phases .wip{border-style:dashed}
.phase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:22px 0 18px}
.phase-grid h4{margin:0 0 6px;font-size:.82rem;color:var(--accent)}
.phase-grid p{margin:0}
.card .repo{margin:16px 0 0}
@media(max-width:600px){.more-gh{margin-top:32px}
.more-gh h3{font-size:.95rem;color:var(--accent);margin-bottom:12px}
.more-gh .links{margin:0}
.todo{margin-top:32px;background:#070d18;color:#d5e1f2;border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.todo-h{margin:0 0 8px;font-size:.85rem;color:#8a9bb3}
.todo .p{color:#22d3ee}
.todo ul{list-style:none;margin:0;padding:0;font-size:.85rem;line-height:1.9}
.todo li span{color:#22d3ee;margin-right:8px}
.todo em{color:#7ee0a8;font-style:normal}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:48px}
.cert{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cert h3{margin:0}
.cert .org{margin:0 0 8px}
.cert .status{margin-top:auto}
.card-top{flex-wrap:wrap}
@media(max-width:600px){