:root{
  --ink:#03060d;
  --bg:#070b14;
  --bg-2:#0c1220;
  --card:#0e1525;
  --foreground:#dff1ff;
  --muted:#6c87a6;
  --muted-2:#8ea4be;
  --cyan:#5ef3ff;
  --magenta:#ff4dd6;
  --green:#7cff7c;
  --acid:#d9ff3c;
  --rust:#cc7a3a;
  --border:rgba(94,243,255,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Special Elite","Courier New",monospace;
  color:var(--foreground);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  background-image:
    linear-gradient(rgba(94,243,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,243,255,.05) 1px,transparent 1px),
    radial-gradient(circle at 18% 8%,rgba(255,77,214,.12),transparent 55%),
    radial-gradient(circle at 88% 78%,rgba(94,243,255,.14),transparent 55%);
  background-size:44px 44px,44px 44px,100% 100%,100% 100%;
}
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:overlay;
  z-index:200;
}
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55) 95%);
  z-index:199;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--magenta);color:var(--ink)}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(to bottom,rgba(7,11,20,.96),rgba(7,11,20,.7) 80%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:"Monoton",cursive;
  letter-spacing:.14em;
  font-size:14px;
}
.brand-mark{
  width:32px;height:32px;
  border:1.5px solid var(--cyan);
  border-radius:6px;
  display:grid;place-items:center;
  box-shadow:0 0 14px rgba(94,243,255,.5),inset 0 0 14px rgba(94,243,255,.18);
}
.brand-mark svg{width:18px;height:18px}
.nav-links{display:flex;gap:4px;flex-wrap:nowrap}
.nav-link{
  padding:7px 14px;
  border:1px solid var(--border);
  font-family:"Monoton",cursive;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--cyan);
  background:rgba(94,243,255,.04);
  transition:all .15s ease;
}
.nav-link:hover{
  background:rgba(255,77,214,.12);
  border-color:rgba(255,77,214,.6);
  color:var(--magenta);
}
.nav-spacer{flex:1}
.nav-status{
  display:flex;align-items:center;gap:8px;
  font-family:"Space Mono",monospace;
  font-size:11px;
  letter-spacing:.15em;
  color:var(--muted);
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.arc{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),var(--cyan),transparent);
  background-size:200% 100%;
  animation:arcpan 6s linear infinite;
  filter:drop-shadow(0 0 6px var(--cyan));
}
@keyframes arcpan{from{background-position:0% 50%}to{background-position:200% 50%}}

/* ============ HERO ============ */
.hero{
  max-width:1280px;margin:0 auto;
  padding:64px 28px 40px;
  display: flex;
  flex-direction: column;
  gap:48px;
  align-items:center;
  position:relative;
}
.stamp{
  display:inline-block;
  border:2px solid var(--magenta);
  color:var(--magenta);
  padding:6px 14px;
  font-family:"Monoton",cursive;
  letter-spacing:.22em;
  font-size:11px;
  transform:rotate(-2deg);
  margin-bottom:24px;
  text-shadow:0 0 8px rgba(255,77,214,.55);
  box-shadow:0 0 16px rgba(255,77,214,.18);
}
.online{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Space Mono",monospace;font-size:11px;
  color:var(--green);letter-spacing:.18em;
  margin-left:14px;vertical-align:middle;
  text-transform:uppercase;
}
.hero h1{
  font-family:"Monoton",cursive;
  font-size:clamp(54px,9vw,128px);
  line-height:.92;
  letter-spacing:.02em;
  margin-bottom:18px;
  text-shadow:
    0 0 2px var(--cyan),
    0 0 14px rgba(94,243,255,.7),
    0 0 32px rgba(255,77,214,.45);
}
.hero h1 .alt{color:var(--magenta);text-shadow:0 0 14px rgba(255,77,214,.8)}
.hero h1 .acid{color:var(--acid);text-shadow:0 0 14px rgba(217,255,60,.7)}
.hero-sub{
  font-family:"Space Mono",monospace;
  color:var(--muted-2);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:24px;
}
.hero > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 860px;
}
.hero-bio {
  font-size: 17px;
  line-height: 1.65;
  color: var(--foreground);
  max-width: 540px;
  margin-bottom: 32px;
  text-align: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 540px;
}
.hero-bio strong{
  color:var(--cyan);
  font-weight:normal;
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;
  font-family:"Monoton",cursive;
  letter-spacing:.18em;
  font-size:12px;
  border:1px solid var(--cyan);
  background:var(--cyan);
  color:#021018;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 24px rgba(94,243,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.25);
  transition:all .15s ease;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--magenta);
  color:#1a0410;
  border-color:var(--magenta);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 0 32px rgba(255,77,214,.7);
}
.btn.ghost{
  background:transparent;
  color:var(--foreground);
  border-color:rgba(255,77,214,.55);
  box-shadow:0 0 16px rgba(255,77,214,.35);
}
.btn.ghost:hover{background:rgba(255,77,214,.12);color:var(--magenta)}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-width:540px;
}
.stat{padding:4px 0}
.stat-num{
  font-family:"Monoton",cursive;
  font-size:32px;
  letter-spacing:.04em;
  line-height:1;
}
.stat-cyan{color:var(--cyan);text-shadow:0 0 12px rgba(94,243,255,.7)}
.stat-magenta{color:var(--magenta);text-shadow:0 0 12px rgba(255,77,214,.7)}
.stat-green{color:var(--green);text-shadow:0 0 12px rgba(124,255,124,.7)}
.stat-acid{color:var(--acid);text-shadow:0 0 12px rgba(217,255,60,.7)}
.stat-label{
  font-family:"Space Mono",monospace;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:6px;
  line-height:1.3;
}

/* ============ SECTIONS ============ */
section{
  max-width:1280px;margin:0 auto;
  padding:80px 28px;
  position:relative;
}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:36px;
  border-bottom:1px solid var(--border);
  padding-bottom:18px;
}
.section-title{
  font-family:"Monoton",cursive;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:.04em;
  text-shadow:0 0 8px rgba(94,243,255,.5);
}
.section-tag{
  font-family:"Space Mono",monospace;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* "evidence panel" */
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(14,21,37,.85),rgba(7,11,20,.85));
  border:1px solid rgba(94,243,255,.35);
  padding:28px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 20px 60px -20px rgba(255,77,214,.3),
    inset 0 1px 0 rgba(94,243,255,.12);
}
.panel::before{
  content:"";position:absolute;left:-1px;top:-1px;
  width:22px;height:22px;
  border-top:2px solid var(--cyan);
  border-left:2px solid var(--cyan);
}
.panel::after{
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:22px;height:22px;
  border-bottom:2px solid var(--magenta);
  border-right:2px solid var(--magenta);
}

/* ============ CAPSTONE ============ */
.capstone-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:32px;
  align-items:start;
}
.case-title{
  font-family:"Monoton",cursive;
  font-size:28px;
  line-height:1.15;
  letter-spacing:.02em;
  margin:18px 0 8px;
  text-shadow:0 0 8px rgba(94,243,255,.4);
}
.case-sub{
  font-family:"Space Mono",monospace;
  font-size:13px;
  color:var(--muted-2);
  letter-spacing:.06em;
  margin-bottom:28px;
}
.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin:24px 0;
}
.metric{
  padding:18px 14px;
  text-align:center;
  border-right:1px solid var(--border);
}
.metric:last-child{border-right:none}
.metric-label{
  font-family:"Space Mono",monospace;
  font-size:9px;
  color:var(--muted);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.metric-num{
  font-family:"Monoton",cursive;
  font-size:30px;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(94,243,255,.6);
  margin:8px 0 4px;
  letter-spacing:.04em;
}
.metric-note{
  font-family:"Space Mono",monospace;
  font-size:10px;
  color:var(--muted-2);
}
.metric.alt .metric-num{color:var(--magenta);text-shadow:0 0 12px rgba(255,77,214,.6)}
.metric.green .metric-num{color:var(--green);text-shadow:0 0 12px rgba(124,255,124,.6)}
.metric.acid .metric-num{color:var(--acid);text-shadow:0 0 12px rgba(217,255,60,.6)}

.subhead{
  font-family:"Space Mono",monospace;
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.pipeline-flow{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:6px 0 28px;
}
.pipe-node{
  display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--border);
  background:rgba(94,243,255,.04);
  padding:10px 14px;
  min-width:120px;
  font-family:"Space Mono",monospace;
  cursor:default;
  transition:all .15s ease;
}
.pipe-node:hover{
  background:rgba(255,77,214,.08);
  border-color:rgba(255,77,214,.6);
  transform:translateY(-2px);
}
.pipe-node:nth-child(4n+1){border-color:rgba(94,243,255,.5);color:var(--cyan)}
.pipe-node:nth-child(4n+3){border-color:rgba(255,77,214,.5);color:var(--magenta)}
.pipe-node:nth-child(4n+5){border-color:rgba(124,255,124,.45);color:var(--green)}
.pipe-node:nth-child(4n+7){border-color:rgba(217,255,60,.45);color:var(--acid)}
.pipe-label{font-size:12px;font-weight:700;letter-spacing:.08em}
.pipe-sub{font-size:10px;color:var(--muted-2);margin-top:2px;text-align:center}
.pipe-arrow{
  color:var(--cyan);
  font-size:20px;
  text-shadow:0 0 6px var(--cyan);
}

.findings{margin-top:8px}
.find{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  padding:14px 0;
  border-bottom:1px dashed rgba(94,243,255,.18);
}
.find:last-child{border-bottom:none}
.find-num{
  font-family:"Monoton",cursive;
  font-size:24px;
  color:var(--magenta);
  text-shadow:0 0 10px rgba(255,77,214,.6);
  line-height:1;
}
.find-text{font-size:14px;line-height:1.6}
.find-text b{color:var(--cyan);font-weight:normal;text-shadow:0 0 6px rgba(94,243,255,.4)}

.aside-card{
  padding:22px;
  border:1px solid var(--border);
  background:rgba(14,21,37,.6);
}
.aside-h{
  font-family:"Monoton",cursive;
  font-size:14px;
  letter-spacing:.14em;
  color:var(--magenta);
  margin-bottom:12px;
  text-shadow:0 0 8px rgba(255,77,214,.5);
}
.aside-card p{font-size:13px;line-height:1.7;color:var(--foreground)}
.aside-card + .aside-card{margin-top:18px}
.rules-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  font-family:"Space Mono",monospace;
  margin-top:6px;
}
.rules-table th,.rules-table td{
  padding:7px 6px;
  text-align:left;
  border-bottom:1px dashed rgba(94,243,255,.2);
}
.rules-table th{color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:700}
.rules-table .mark{color:var(--acid);text-shadow:0 0 6px rgba(217,255,60,.4)}

.bench-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  border-bottom:1px dashed rgba(94,243,255,.15);
  font-family:"Space Mono",monospace;font-size:12px;
}
.bench-row:last-child{border-bottom:none}
.bench-bar{
  flex:1;height:6px;background:rgba(94,243,255,.08);
  position:relative;border:1px solid rgba(94,243,255,.2);
  overflow:hidden;
}
.bench-bar span{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 8px rgba(255,77,214,.5);
  width:0;
  transition:width 1.4s cubic-bezier(.2,.7,.2,1);
}
.bench-row.star .bench-bar span{background:linear-gradient(90deg,var(--acid),var(--green))}
.bench-row .lab{min-width:78px;color:var(--muted-2)}
.bench-row .val{min-width:46px;text-align:right;color:var(--foreground)}
.bench-row.star .val{color:var(--acid);text-shadow:0 0 6px rgba(217,255,60,.4)}

/* ============ TOKENIZER PROJECT ============ */
.tok-intro{font-size:15px;line-height:1.75;color:var(--foreground);max-width:920px;margin-bottom:28px}
.tok-intro strong{font-weight:normal}
.tok-intro .c{color:var(--cyan)}
.tok-intro .a{color:var(--acid)}

.project-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.proj-card{
  border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(14,21,37,.85),rgba(7,11,20,.7));
  padding:20px 18px;
  position:relative;
  transition:all .2s ease;
}
.proj-card:hover{
  border-color:rgba(255,77,214,.6);
  transform:translateY(-3px);
  box-shadow:0 12px 32px -10px rgba(255,77,214,.4);
}
.proj-num{
  font-family:"Monoton",cursive;
  font-size:14px;
  color:var(--cyan);
  letter-spacing:.16em;
  margin-bottom:6px;
}
.proj-tag{
  display:inline-block;
  font-family:"Space Mono",monospace;
  font-size:9px;
  letter-spacing:.16em;
  color:var(--magenta);
  text-transform:uppercase;
  padding:2px 8px;
  border:1px solid rgba(255,77,214,.5);
  margin-bottom:14px;
}
.proj-title{
  font-family:"Monoton",cursive;
  font-size:16px;
  line-height:1.2;
  margin-bottom:8px;
  text-shadow:0 0 6px rgba(94,243,255,.35);
}
.proj-headline{
  font-size:12px;
  line-height:1.55;
  color:var(--foreground);
  margin-bottom:16px;
}
.proj-headline b{color:var(--acid);font-weight:normal}
.proj-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  font-family:"Space Mono",monospace;
  font-size:10px;
}
.proj-stat{
  border:1px solid rgba(94,243,255,.2);
  padding:6px 8px;
}
.proj-stat .k{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.proj-stat .v{color:var(--cyan);font-size:13px;font-weight:700;margin-top:2px}

.team-row{
  margin-top:32px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:"Space Mono",monospace;font-size:12px;
}
.team-label{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:10px}
.team-member{
  padding:5px 12px;border:1px solid rgba(124,255,124,.45);
  color:var(--green);background:rgba(124,255,124,.06);
}
.team-member.me{
  background:rgba(94,243,255,.12);
  border-color:var(--cyan);
  color:var(--cyan);
  text-shadow:0 0 6px rgba(94,243,255,.5);
}

/* Tokenizer interactive demo */
.tok-demo{
  margin-top:36px;
  border:1px solid var(--border);
  padding:24px 22px;
  background:rgba(14,21,37,.55);
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:28px;
  align-items:start;
}
.tok-demo h4{
  font-family:'Monoton',cursive;font-size:18px;letter-spacing:.04em;
  margin-bottom:8px;text-shadow:0 0 8px rgba(94,243,255,.4);
}
.tok-demo .lead{font-size:13px;line-height:1.6;color:var(--muted-2);margin-bottom:18px}
.fert-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.fert-row{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Mono',monospace;font-size:12px;
}
.fert-row .lab{min-width:140px;color:var(--muted-2)}
.fert-row .bar{
  flex:1;height:8px;background:rgba(94,243,255,.08);
  position:relative;border:1px solid rgba(94,243,255,.2);overflow:hidden;
}
.fert-row .bar span{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--magenta),var(--rust));
  box-shadow:0 0 8px rgba(255,77,214,.4);
  width:0;
  transition:width 1.2s cubic-bezier(.2,.7,.2,1);
}
.fert-row.win .bar span{background:linear-gradient(90deg,var(--acid),var(--green))}
.fert-row .val{min-width:56px;text-align:right;color:var(--foreground)}
.fert-row.win .val{color:var(--acid);text-shadow:0 0 6px rgba(217,255,60,.4)}

.surgery-card{
  padding:20px;border:1px dashed rgba(94,243,255,.35);
  background:rgba(7,11,20,.7);
  font-family:'Space Mono',monospace;font-size:12px;line-height:1.7;
}
.surgery-card h5{
  font-family:'Monoton',cursive;font-size:13px;letter-spacing:.14em;
  color:var(--magenta);margin-bottom:12px;text-shadow:0 0 8px rgba(255,77,214,.5);
}
.surgery-row{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(94,243,255,.15);padding:6px 0}
.surgery-row:last-child{border-bottom:none}
.surgery-row .k{color:var(--muted-2)}
.surgery-row .v{color:var(--cyan)}
.surgery-row.win .v{color:var(--acid);text-shadow:0 0 6px rgba(217,255,60,.4)}

/* ============ DOMAINS / SKILL EXPLORER ============ */
.search-bar{
  display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;align-items:center;
}
.search-input{
  flex:1;min-width:240px;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);
  padding:11px 16px;
  background:rgba(14,21,37,.6);
  font-family:'Space Mono',monospace;font-size:13px;
}
.search-input input{
  flex:1;border:none;outline:none;background:transparent;
  color:var(--foreground);font:inherit;
}
.search-input input::placeholder{color:var(--muted)}
.search-input .ico{color:var(--cyan)}
.search-meta{
  font-family:'Space Mono',monospace;font-size:11px;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
}
.search-meta b{color:var(--acid);font-weight:700}
.toggle-btn{
  padding:11px 16px;border:1px solid var(--border);
  background:rgba(94,243,255,.04);color:var(--cyan);
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all .15s ease;
}
.toggle-btn:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(255,77,214,.08)}

.domains-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.dom{
  border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(14,21,37,.85),rgba(7,11,20,.7));
  position:relative;
  transition:all .2s ease;
  overflow:hidden;
}
.dom:hover{border-color:rgba(255,77,214,.55)}
.dom-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:18px 20px;cursor:pointer;
  user-select:none;
}
.dom-name{
  font-family:"Monoton",cursive;
  font-size:14px;letter-spacing:.06em;line-height:1.15;
  text-shadow:0 0 6px rgba(94,243,255,.35);
}
.dom-meta{
  font-family:"Space Mono",monospace;
  font-size:10px;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;
  margin-top:6px;line-height:1.4;
}
.dom-num{
  font-family:"Monoton",cursive;
  font-size:30px;line-height:1;
  text-shadow:0 0 10px rgba(94,243,255,.6);
}
.dom:nth-child(3n+1) .dom-num{color:var(--cyan);text-shadow:0 0 10px rgba(94,243,255,.6)}
.dom:nth-child(3n+2) .dom-num{color:var(--magenta);text-shadow:0 0 10px rgba(255,77,214,.6)}
.dom:nth-child(3n+3) .dom-num{color:var(--acid);text-shadow:0 0 10px rgba(217,255,60,.6)}
.dom-chev{
  font-family:'Space Mono',monospace;color:var(--muted);font-size:14px;
  transition:transform .2s ease;
}
.dom.open .dom-chev{transform:rotate(90deg);color:var(--magenta)}
.dom-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.dom.open .dom-body{max-height:2000px}
.dom-body-inner{
  padding:0 20px 20px;
  border-top:1px dashed rgba(94,243,255,.18);
}
.dom-courses{
  display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 14px;
}
.course-pill{
  font-family:'Space Mono',monospace;font-size:9px;
  padding:3px 8px;border:1px solid rgba(94,243,255,.3);
  color:var(--cyan);letter-spacing:.06em;
  background:rgba(94,243,255,.04);
}
.dom-skills{display:flex;flex-direction:column;gap:6px}
.skill{
  font-size:12px;line-height:1.55;color:var(--foreground);
  padding-left:14px;position:relative;opacity:.9;
}
.skill::before{
  content:"▌";position:absolute;left:0;top:1px;
  color:var(--cyan);font-size:8px;opacity:.6;
}
.skill mark{
  background:var(--acid);color:var(--ink);padding:0 2px;
  text-shadow:none;font-weight:700;
}
.dom.hidden{display:none}
.dom-skills .skill.hidden{display:none}

/* ============ INSTRUMENTS / TOOLS ============ */
.tools-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool-row{
  border:1px solid var(--border);
  padding:14px 16px;
  background:rgba(14,21,37,.55);
}
.tool-cat{
  font-family:"Space Mono",monospace;
  font-size:10px;
  color:var(--magenta);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.tool-items{font-size:13px;line-height:1.6;color:var(--foreground)}

/* ============ DOSSIER ============ */
.dossier-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.dossier-card{
  border:1px solid var(--border);
  padding:24px 20px;
  background:linear-gradient(180deg,rgba(14,21,37,.85),rgba(7,11,20,.6));
  position:relative;
}
.dossier-h{
  font-family:"Space Mono",monospace;
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.dossier-h .pulse-dot{width:6px;height:6px;display:inline-block;margin-right:6px;vertical-align:middle}
.dossier-body{font-size:14px;line-height:1.6}
.dossier-body strong{color:var(--magenta);font-weight:normal;text-shadow:0 0 6px rgba(255,77,214,.4)}

/* education / certs */
.edu-card{
  border:1px solid var(--border);
  padding:20px 22px;background:rgba(14,21,37,.6);
  display:flex;gap:18px;align-items:flex-start;
  margin-top:24px;
}
.edu-mark{
  width:48px;height:48px;border:1.5px solid var(--cyan);
  display:grid;place-items:center;border-radius:6px;flex-shrink:0;
  box-shadow:0 0 14px rgba(94,243,255,.4),inset 0 0 14px rgba(94,243,255,.18);
  font-family:'Monoton',cursive;color:var(--cyan);font-size:18px;letter-spacing:.06em;
}
.edu-body h4{
  font-family:'Monoton',cursive;font-size:16px;letter-spacing:.04em;
  margin-bottom:4px;text-shadow:0 0 6px rgba(94,243,255,.4);
}
.edu-body .meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.06em;margin-bottom:8px}
.edu-body p{font-size:13px;line-height:1.6;color:var(--foreground);opacity:.92}

.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cert{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--border);padding:14px 18px;background:rgba(14,21,37,.55);
}
.cert .nm{font-size:13px}
.cert .org{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted-2);margin-top:3px}
.cert .badge{
  font-family:'Space Mono',monospace;font-size:10px;
  padding:3px 10px;letter-spacing:.14em;
}
.cert .badge.cyan{color:var(--cyan);border:1px solid rgba(94,243,255,.5)}
.cert .badge.green{color:var(--green);border:1px solid rgba(124,255,124,.5)}

/* ============ CONTACT ============ */
.transmit{
  text-align:center;padding:80px 28px 100px;max-width:1280px;margin:0 auto;
}
.transmit-h{
  font-family:"Monoton",cursive;
  font-size:clamp(36px,6vw,80px);
  letter-spacing:.04em;
  margin-bottom:18px;
  text-shadow:0 0 14px rgba(94,243,255,.6),0 0 32px rgba(255,77,214,.35);
}
.transmit-h .alt{color:var(--magenta);text-shadow:0 0 18px rgba(255,77,214,.8)}
.transmit-sub{
  font-family:"Space Mono",monospace;font-size:13px;
  color:var(--muted);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:32px;
}
.transmit-row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}

footer{
  border-top:1px solid var(--border);
  padding:28px;
  text-align:center;
  font-family:"Space Mono",monospace;
  font-size:11px;color:var(--muted);
  letter-spacing:.18em;text-transform:uppercase;
}
footer .gear{display:inline-block;color:var(--acid);margin:0 8px}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(20px);transition:all .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* flicker */
.flicker{animation:flicker 4s infinite}
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:.6}
}

/* counter for hero stats */
.counter{display:inline-block}

/* RESPONSIVE */
@media (max-width:1080px){
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .domains-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px;padding:36px 22px}
  .capstone-grid{grid-template-columns:1fr}
  .tok-demo{grid-template-columns:1fr}
  .tools-list{grid-template-columns:repeat(2,1fr)}
  .dossier-grid{grid-template-columns:1fr}
  .nav-inner{padding:12px 18px;gap:12px}
  .nav-links{display:none}
  section{padding:50px 22px}
}
@media (max-width:600px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2){border-right:none}
  .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--border)}
  .project-grid{grid-template-columns:1fr}
  .tools-list{grid-template-columns:1fr}
  .domains-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr}
}

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  background:rgba(94,243,255,.04);
  color:var(--cyan);
  cursor:pointer;font:inherit;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  transition:all .15s ease;
}
.theme-toggle:hover{
  border-color:var(--magenta);color:var(--magenta);
  background:rgba(255,77,214,.08);
}
.theme-toggle svg{width:14px;height:14px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:inline}
html.light .theme-toggle .icon-sun{display:inline}
html.light .theme-toggle .icon-moon{display:none}

/* ============ LIGHT THEME ============ */
html.light{
  /* Matches the verified cream/parchment palette of the live mobile site. */
  --ink:#181821;
  --bg:#f4ede0;
  --bg-2:#ece2cd;
  --card:#fffaf0;
  --foreground:#181821;
  --muted:#7a6d59;
  --muted-2:#5a4f3e;
  --cyan:#0a7a8a;
  --magenta:#b21a78;
  --green:#2a7a3a;
  --acid:#7a7a14;
  --rust:#a14a1a;
  --border:rgba(10,122,138,.32);
}
html.light body{
  background-image:
    linear-gradient(rgba(10,122,138,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,122,138,.07) 1px,transparent 1px),
    radial-gradient(circle at 18% 8%,rgba(178,26,120,.10),transparent 55%),
    radial-gradient(circle at 88% 78%,rgba(10,122,138,.10),transparent 55%);
}
html.light body::after{opacity:.4;mix-blend-mode:multiply;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.06) 2px 3px)}
html.light body::before{background:radial-gradient(ellipse at center,transparent 30%,rgba(120,90,40,.25) 95%)}
html.light .nav{background:linear-gradient(to bottom,rgba(244,237,224,.96),rgba(244,237,224,.7) 80%,transparent)}
html.light .brand-mark{box-shadow:0 0 8px rgba(10,122,138,.4),inset 0 0 8px rgba(10,122,138,.12)}
html.light .hero h1,
html.light .section-title,
html.light .transmit-h,
html.light .case-title,
html.light .stat-num,
html.light .metric-num{text-shadow:0 0 1px currentColor !important;-webkit-text-stroke:0;filter:none}
/* Replace the dark-theme-only hero neon with readable light-theme accents. */
html.light .hero h1 span[style]:nth-of-type(1){color:#0a5a66 !important;text-shadow:0 1px 0 rgba(255,255,255,.7) !important}
html.light .hero h1 span[style]:nth-of-type(2){color:#9a1568 !important;text-shadow:0 1px 0 rgba(255,255,255,.7) !important}
html.light .btn{box-shadow:0 4px 14px -4px rgba(10,122,138,.4),inset 0 -3px 0 rgba(0,0,0,.18)}
html.light .btn{color:#052c33}
html.light .btn:hover{box-shadow:0 4px 18px -4px rgba(178,26,120,.5)}
html.light .btn.ghost{box-shadow:0 2px 10px -4px rgba(178,26,120,.3)}
html.light .panel{
  background:linear-gradient(180deg,rgba(255,250,240,.95),rgba(244,237,224,.95));
  box-shadow:0 20px 40px -20px rgba(120,80,40,.3),inset 0 1px 0 rgba(10,122,138,.12);
}
html.light .dossier-card,
html.light .aside-card,
html.light .tool-row,
html.light .proj-card,
html.light .dom,
html.light .edu-card,
html.light .cert,
html.light .tok-demo{
  background:rgba(255,250,240,.7);
}
html.light .surgery-card{background:rgba(244,237,224,.85)}
html.light .pulse-dot{box-shadow:0 0 6px rgba(42,122,58,.5)}
html.light .pipe-node{background:rgba(255,250,240,.85)}
html.light .capsule img.alch{
  filter:
    drop-shadow(0 0 24px rgba(178,26,120,.25))
    drop-shadow(0 0 50px rgba(10,122,138,.2))
    contrast(1.04) saturate(1.05);
}
html.light .capsule::after{background:radial-gradient(ellipse at center,rgba(10,122,138,.3),transparent 70%)}
html.light .stamp{box-shadow:0 0 8px rgba(178,26,120,.2)}
html.light .skill mark{background:rgba(217,255,60,.5);color:var(--ink)}
html.light .arc{filter:drop-shadow(0 0 3px var(--cyan));opacity:.7}
html.light .bench-bar span{box-shadow:0 0 4px rgba(178,26,120,.3)}
html.light .fert-row .bar span{box-shadow:0 0 4px rgba(178,26,120,.3)}
html.light input::placeholder{color:var(--muted)}

/* ============ TYPE SYSTEM v2 · UI POLISH ============ */
/* Monoton stays as the neon-sign signature at display sizes only.
   Orbitron (cyberpunk HUD pairing) carries small headings, labels and
   numerals where Monoton's triple-line forms are illegible. */
.brand{font-family:"Orbitron",sans-serif;font-weight:800;letter-spacing:.18em}
.nav-link{font-family:"Orbitron",sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em}
.btn{font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:.16em}
.stat-num{font-family:"Orbitron",sans-serif;font-weight:800;letter-spacing:.02em}
.metric-num{font-family:"Orbitron",sans-serif;font-weight:800;letter-spacing:.02em;font-size:26px}
.aside-h{font-family:"Orbitron",sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em}
.proj-num{font-family:"Orbitron",sans-serif;font-weight:700}
.proj-title{font-family:"Orbitron",sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em}
.tok-demo h4{font-family:"Orbitron",sans-serif;font-weight:700;font-size:15px;letter-spacing:.1em}
.surgery-card h5{font-family:"Orbitron",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em}
.dom-name{font-family:"Orbitron",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em}
.dom-num{font-family:"Orbitron",sans-serif;font-weight:800}
.edu-mark{font-family:"Orbitron",sans-serif;font-weight:800}
.edu-body h4{font-family:"Orbitron",sans-serif;font-weight:700;letter-spacing:.08em}
.theme-toggle{font-family:"Orbitron",sans-serif;font-weight:600}

/* Rubber-stamp authenticity: typewriter face for dossier stamps */
.stamp{
  font-family:"Special Elite","Courier New",monospace;
  font-size:12px;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
}

/* Hairline crop marks tie panels to the HUD grid */
.aside-card{transition:border-color .2s ease,box-shadow .2s ease}
.aside-card:hover{border-color:rgba(255,77,214,.45);box-shadow:0 8px 24px -14px rgba(255,77,214,.35)}

/* Smooth theme switching */
body,.panel,.aside-card,.dossier-card,.tool-row,.edu-card,.cert,.surgery-card,.tok-demo{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}

/* Themed scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--cyan),var(--magenta));
  border:2px solid var(--bg-2);border-radius:6px;
}

/* Accessibility: visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--magenta);outline-offset:3px;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* (Superseded: the old script-font hero spans are gone; .hero-name has its own
   light-theme colors in the elevation layer below.) */
/* Light mode: lift small-caps label contrast to ≥4.5:1 */
html.light{--muted:#6e6049}

html.light .search-input{background:rgba(255,250,240,.85)}
html.light .toggle-btn{background:rgba(255,250,240,.85)}
/* ============ Light-theme overrides for the cert carousel (Issue #2) ============ */
/* Mirrors the cream/parchment palette used by html.light .panel / .cert elsewhere. */

html.light .cert-strip-wrap{
  background:linear-gradient(180deg, rgba(255,250,240,.4), rgba(244,237,224,.85) 30%, rgba(244,237,224,.85) 70%, rgba(255,250,240,.4));
}
html.light .cert-strip-wrap::before, html.light .cert-strip-wrap::after{
  color:#0a7a8a; opacity:.7;
}
html.light .cert-strip-card{
  background:rgba(255,250,240,.7);
}
html.light .cert-strip-card:hover{
  box-shadow:0 24px 60px -20px rgba(120,80,40,.4), 0 0 0 1px #0a7a8a, 0 0 28px rgba(10,122,138,.25);
}
/* .cert-strip-thumb stays #000 — it's a document viewport, not chrome. */
html.light .cert-strip-stamp{
  border-color:#b21a78; color:#b21a78;
  background:rgba(178,26,120,.06); text-shadow:0 0 6px rgba(178,26,120,.4);
}
html.light .cert-lightbox{
  background:rgba(244,237,224,.78); backdrop-filter:blur(8px);
}
html.light .cert-lightbox-close:hover{ background:#0a7a8a; color:#fff }
html.light .cert-strip-card,
html.light .cert-strip-wrap,
html.light .cert-lightbox{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease }

/* ============================================================================
   ELEVATION LAYER v3 · background composition · graceful motion · UI polish
   Additive: augments/overrides the base theme above without touching content.
   ============================================================================ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-padding-top:88px}

/* ---- Animated background stack (behind body's grid, behind content) ---- */
#aurora{
  position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(94,243,255,.16), transparent 62%),
    radial-gradient(42% 52% at 82% 28%, rgba(255,77,214,.14), transparent 62%),
    radial-gradient(46% 56% at 62% 88%, rgba(124,255,124,.09), transparent 62%),
    radial-gradient(40% 50% at 12% 82%, rgba(217,255,60,.07), transparent 62%);
  filter:blur(36px) saturate(1.15);
  animation:auroraDrift 26s var(--ease-io) infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(2deg)}
  100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-2deg)}
}
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  opacity:.6;
}
html.light #aurora{opacity:.6; mix-blend-mode:multiply}
html.light #bg-canvas{opacity:.35}

/* soft drifting grid parallax on the body grid itself */
body{animation:gridDrift 60s linear infinite}
@keyframes gridDrift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:44px 44px,44px 44px,0 0,0 0}
}
@media (prefers-reduced-motion:reduce){ body{animation:none} #aurora{animation:none} }

/* ---- Scroll progress bar ---- */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  z-index:150; pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--acid));
  box-shadow:0 0 12px rgba(94,243,255,.7);
  transition:width .1s linear;
}

/* ---- Nav polish + scrollspy ---- */
.nav{transition:background .3s ease, box-shadow .3s ease}
.nav.scrolled{box-shadow:0 10px 40px -18px rgba(0,0,0,.8),0 1px 0 rgba(94,243,255,.15)}
.nav-link{position:relative; overflow:hidden}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transition:width .25s var(--ease-out);
}
.nav-link:hover::after, .nav-link.active::after{width:100%}
.nav-link.active{
  color:var(--magenta); border-color:rgba(255,77,214,.55);
  background:rgba(255,77,214,.1); box-shadow:0 0 16px rgba(255,77,214,.22)
}
.brand-mark{transition:transform .5s var(--ease-spring), box-shadow .3s ease}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}

/* ---- Button polish: shine sweep + spring press ---- */
.btn{position:relative; overflow:hidden; transition:transform .25s var(--ease-spring), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease-out);
}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.dl{background:transparent; color:var(--acid); border-color:var(--acid); box-shadow:0 0 18px rgba(217,255,60,.28)}
.btn.dl:hover{background:var(--acid); color:#141400; border-color:var(--acid); box-shadow:0 0 30px rgba(217,255,60,.6)}
html.light .btn.dl{color:#6a6a10;border-color:#8a8a14;box-shadow:0 3px 14px -5px rgba(122,122,20,.5)}
html.light .btn.dl:hover{background:#c9d43a;color:#1a1a00}

/* ---- Availability pill in hero ---- */
.avail-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; margin-bottom:6px;
  border:1px solid rgba(124,255,124,.5); border-radius:999px;
  font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.2em;
  color:var(--green); text-transform:uppercase;
  background:rgba(124,255,124,.06);
  box-shadow:0 0 20px rgba(124,255,124,.15), inset 0 0 14px rgba(124,255,124,.06);
}

/* ---- Repo / open-source link chips ---- */
.repo-links{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:22px}
.repo-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border:1px solid var(--border);
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em;
  color:var(--cyan); background:rgba(94,243,255,.05);
  transition:transform .22s var(--ease-spring), border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.repo-chip svg{width:15px; height:15px}
.repo-chip:hover{transform:translateY(-3px); border-color:var(--magenta); color:var(--magenta); background:rgba(255,77,214,.08); box-shadow:0 10px 24px -12px rgba(255,77,214,.5)}
.repo-chip.open{border-color:rgba(124,255,124,.5); color:var(--green); background:rgba(124,255,124,.06)}
.repo-chip.open:hover{border-color:var(--green); color:var(--green); box-shadow:0 10px 24px -12px rgba(124,255,124,.5)}
.repo-chip .k{color:var(--muted); letter-spacing:.16em}

/* ---- Panel + card graceful motion ---- */
.panel{transition:border-color .35s ease, box-shadow .5s ease, transform .5s var(--ease-out); overflow:hidden}
.panel::before,.panel::after{transition:width .35s var(--ease-out), height .35s var(--ease-out)}
.panel:hover::before,.panel:hover::after{width:34px; height:34px}
.panel:hover{border-color:rgba(94,243,255,.5); box-shadow:0 0 0 1px rgba(255,255,255,.04),0 34px 90px -34px rgba(255,77,214,.42),inset 0 1px 0 rgba(94,243,255,.16)}
.dossier-card,.aside-card,.tool-row,.edu-card{transition:transform .3s var(--ease-out), border-color .25s ease, box-shadow .35s ease}
.dossier-card:hover,.tool-row:hover,.edu-card:hover{transform:translateY(-4px); border-color:rgba(94,243,255,.5); box-shadow:0 18px 44px -22px rgba(94,243,255,.4)}
.dossier-card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transition:width .4s var(--ease-out);
}
.dossier-card:hover::before{width:100%}
.proj-card{transition:transform .3s var(--ease-out), border-color .25s ease, box-shadow .35s ease}
.pipe-node{transition:transform .25s var(--ease-spring), background .2s, border-color .2s, box-shadow .2s}
.pipe-node:hover{box-shadow:0 10px 26px -14px rgba(255,77,214,.5)}

/* ---- Section titles: shimmer + reveal underline ---- */
.section-head{position:relative}
.section-title{position:relative; display:inline-block}
.section-head::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transition:width 1s var(--ease-out) .1s;
}
.reveal.in .section-head::after, section.in .section-head::after{width:46%}

/* ---- Graceful reveal: blur-in + stagger children ---- */
.reveal{opacity:0; transform:translateY(30px); filter:blur(7px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out)}
.reveal.in{opacity:1; transform:none; filter:none}
.stagger>*{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.stagger.in>*{opacity:1; transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.22s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.34s}
.stagger.in>*:nth-child(7){transition-delay:.40s}
.stagger.in>*:nth-child(8){transition-delay:.46s}
.stagger.in>*:nth-child(9){transition-delay:.52s}
@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1 !important; transform:none !important; filter:none !important}
}

/* ---- Hero name: on-brand neon signature (replaces script face) ---- */
.hero-name{
  font-family:"Monoton",cursive;
  font-weight:400;
  font-size:clamp(52px,9.5vw,132px);
  line-height:.94; letter-spacing:.015em;
  margin:30px 0 18px;
}
.hero-name .l1{
  display:block; color:#eafcff;
  text-shadow:0 0 3px var(--cyan),0 0 18px rgba(94,243,255,.75),0 0 44px rgba(94,243,255,.4);
}
.hero-name .l2{
  display:block; color:var(--magenta);
  text-shadow:0 0 3px var(--magenta),0 0 20px rgba(255,77,214,.8),0 0 50px rgba(255,77,214,.45);
  animation:neonBreathe 4.5s ease-in-out infinite;
}
@keyframes neonBreathe{
  0%,100%{text-shadow:0 0 3px var(--magenta),0 0 20px rgba(255,77,214,.8),0 0 50px rgba(255,77,214,.45)}
  50%{text-shadow:0 0 2px var(--magenta),0 0 12px rgba(255,77,214,.6),0 0 30px rgba(255,77,214,.3)}
}
html.light .hero-name .l1{color:#0a5a66; text-shadow:0 1px 0 rgba(255,255,255,.6)}
html.light .hero-name .l2{color:#9a1568; text-shadow:0 1px 0 rgba(255,255,255,.5); animation:none}
@media (prefers-reduced-motion:reduce){ .hero-name .l2{animation:none} }

/* ---- OPEN SOURCE ribbon for the Vault section stamp ---- */
.stamp.oss{border-color:var(--acid); color:var(--acid); text-shadow:0 0 8px rgba(217,255,60,.5); box-shadow:0 0 16px rgba(217,255,60,.18)}

/* ---- Declassified / upcoming teaser ---- */
.classified-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px}
.redacted{
  position:relative; overflow:hidden;
  border:1px dashed rgba(94,243,255,.32);
  background:linear-gradient(160deg,rgba(14,21,37,.7),rgba(7,11,20,.55));
  padding:26px 22px 24px; min-height:196px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .35s var(--ease-out), border-color .25s ease, box-shadow .35s ease;
}
.redacted:hover{transform:translateY(-4px); border-color:rgba(255,77,214,.5); box-shadow:0 20px 50px -24px rgba(255,77,214,.4)}
.redacted::after{
  content:""; position:absolute; left:-60%; top:0; width:40%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(94,243,255,.12),transparent);
  animation:scanSweep 4.5s linear infinite;
}
@keyframes scanSweep{0%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){ .redacted::after{animation:none; display:none} }
.redacted .file-no{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
.redacted .rk-bars{display:flex; flex-direction:column; gap:9px; margin:4px 0}
.rk{height:13px; background:linear-gradient(90deg,rgba(94,243,255,.16),rgba(94,243,255,.05)); position:relative; overflow:hidden}
.rk::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(3,6,13,.9) 0 6px,transparent 6px 10px)}
.rk.w1{width:88%} .rk.w2{width:64%} .rk.w3{width:75%}
.redacted .tag-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto}
.redacted .rtag{font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.12em; padding:3px 8px; border:1px solid rgba(94,243,255,.25); color:var(--muted-2); text-transform:uppercase}
.redacted-stamp{
  position:absolute; top:14px; right:12px;
  font-family:"Space Mono",monospace; font-size:8px; font-weight:700; letter-spacing:.12em;
  color:var(--magenta); border:1.5px solid var(--magenta); border-radius:50%;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1;
  transform:rotate(-14deg); opacity:.85; background:rgba(255,77,214,.05); text-shadow:0 0 6px rgba(255,77,214,.5);
}
.classified-note{
  margin-top:18px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; text-align:center; opacity:.8;
}
.classified-note .blink{color:var(--acid); animation:pulse 1.6s ease-in-out infinite}
@media (max-width:900px){ .classified-grid{grid-template-columns:1fr} }

/* ---- Repo footer meta strip inside project panels ---- */
.repo-meta{
  margin-top:24px; padding-top:16px; border-top:1px dashed rgba(94,243,255,.2);
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-family:"Space Mono",monospace; font-size:11px; color:var(--muted-2); letter-spacing:.06em;
}
.repo-meta .mkey{color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:10px}
.repo-meta b{color:var(--cyan); font-weight:400}

/* ---- Back-to-top ---- */
#to-top{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--cyan); background:rgba(7,11,20,.7); color:var(--cyan);
  cursor:pointer; opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  box-shadow:0 0 18px rgba(94,243,255,.3); backdrop-filter:blur(6px);
  transition:opacity .3s ease, transform .3s var(--ease-spring), background .2s, color .2s;
}
#to-top.show{opacity:1; transform:none; pointer-events:auto}
#to-top:hover{background:var(--cyan); color:#021018}
#to-top svg{width:20px; height:20px}
@media (max-width:600px){ #to-top{right:14px; bottom:14px} }
/* ============ WALNUT LIGHT-THEME FINISH ============ */
html.light{
  --ink:#2c1d15; --bg:#c5a275; --bg-2:#ad8055; --card:#ead3ac;
  --foreground:#2c1d15; --muted:#6b4d38; --muted-2:#4d3425;
  --cyan:#46634c; --magenta:#87442f; --green:#557044; --acid:#735414; --rust:#834026;
  --border:rgba(69,45,29,.44);
}
html.light body{
  background-image:
    linear-gradient(rgba(75,48,29,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,48,29,.105) 1px,transparent 1px),
    radial-gradient(ellipse at 12% 4%,rgba(249,224,180,.52),transparent 50%),
    radial-gradient(ellipse at 88% 84%,rgba(94,57,34,.30),transparent 58%);
}
html.light body::after{opacity:.26;mix-blend-mode:multiply;background:repeating-linear-gradient(11deg,transparent 0 8px,rgba(70,41,23,.14) 9px 10px,transparent 11px 21px)}
html.light body::before{background:radial-gradient(ellipse at center,transparent 34%,rgba(55,31,17,.34) 100%)}
html.light .nav{background:linear-gradient(to bottom,rgba(201,168,121,.97),rgba(180,134,89,.78) 82%,transparent)}
html.light .panel{background:linear-gradient(145deg,rgba(242,220,181,.97),rgba(190,143,97,.94));box-shadow:0 20px 40px -20px rgba(57,33,19,.52),inset 0 1px 0 rgba(255,240,211,.68)}
html.light .dossier-card,html.light .aside-card,html.light .tool-row,html.light .proj-card,html.light .dom,html.light .edu-card,html.light .cert,html.light .tok-demo{background:linear-gradient(145deg,rgba(238,213,173,.86),rgba(201,160,112,.76))}
html.light .surgery-card{background:linear-gradient(145deg,rgba(218,183,137,.91),rgba(178,128,86,.86))}
html.light .pipe-node,html.light .search-input,html.light .toggle-btn{background:rgba(239,215,176,.91)}
html.light .capsule img.alch{filter:drop-shadow(0 0 24px rgba(138,70,49,.23)) drop-shadow(0 0 50px rgba(77,107,81,.18)) contrast(1.03) saturate(.92)}
html.light .capsule::after{background:radial-gradient(ellipse at center,rgba(128,97,30,.22),transparent 70%)}
html.light .stamp{box-shadow:0 0 8px rgba(138,70,49,.22)}
html.light .skill mark{background:rgba(192,157,72,.44);color:var(--ink)}
html.light .bench-bar span,html.light .fert-row .bar span{box-shadow:0 0 4px rgba(138,70,49,.3)}
html.light .btn{color:#fff5de;box-shadow:0 4px 14px -4px rgba(69,45,28,.48),inset 0 -3px 0 rgba(0,0,0,.18)}
html.light .btn:hover{color:#fff5de;box-shadow:0 4px 18px -4px rgba(138,70,49,.52)}
html.light .hero h1 span[style]:nth-of-type(1){color:#5a321c !important;text-shadow:0 1px 0 rgba(255,239,205,.75) !important}
html.light .hero h1 span[style]:nth-of-type(2){color:#80452d !important;text-shadow:0 1px 0 rgba(255,239,205,.75) !important}
html.light .cert-strip-wrap{background:linear-gradient(180deg,rgba(239,211,166,.38),rgba(152,105,67,.86) 30%,rgba(152,105,67,.86) 70%,rgba(239,211,166,.38))}
html.light .cert-strip-wrap::before,html.light .cert-strip-wrap::after{color:#415e46;opacity:.78}
html.light .cert-strip-card{background:linear-gradient(155deg,rgba(244,222,184,.94),rgba(195,148,99,.90))}
html.light .cert-strip-card:hover{box-shadow:0 24px 60px -20px rgba(62,37,22,.55),0 0 0 1px #4d6b51,0 0 28px rgba(77,107,81,.25)}
html.light .cert-strip-stamp{border-color:#8a4631;color:#8a4631;background:rgba(138,70,49,.08);text-shadow:0 0 6px rgba(138,70,49,.35)}
html.light .cert-lightbox{background:rgba(83,53,32,.86)}
html.light .cert-lightbox-close:hover{background:#4d6b51;color:#fff}
html.light #aurora{opacity:.28;mix-blend-mode:multiply}
html.light #bg-canvas{opacity:.68}

/* Light treatment for the Classified-in-the-Lab cards. */
html.light .redacted{
  border-color:rgba(70,99,76,.58);
  background:linear-gradient(145deg,rgba(240,218,179,.92),rgba(170,122,82,.80));
  box-shadow:inset 0 1px 0 rgba(255,241,211,.58),0 14px 30px -24px rgba(50,30,18,.60);
}
html.light .redacted:hover{border-color:rgba(152,82,56,.72);box-shadow:0 20px 50px -24px rgba(77,48,29,.62)}
html.light .redacted::after{background:linear-gradient(105deg,transparent,rgba(255,236,198,.28),transparent)}
html.light .redacted .file-no{color:#75513a}
html.light .rk{background:linear-gradient(90deg,rgba(70,99,76,.30),rgba(70,99,76,.12))}
html.light .rk::after{background:repeating-linear-gradient(90deg,rgba(43,29,21,.92) 0 6px,transparent 6px 10px)}
html.light .redacted .rtag{border-color:rgba(70,99,76,.58);color:#3f513f;background:rgba(239,216,177,.42)}
html.light .redacted-stamp{color:#8f482f;border-color:#8f482f;background:rgba(242,216,174,.64);text-shadow:none}
html.light .classified-note{color:#60432f;opacity:.94}
html.light .classified-note .blink{color:#76591f}

.cert-strip-wrap{
  position:relative; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:48px 0; margin-top:14px;
  background:linear-gradient(180deg, rgba(14,21,37,.4), rgba(14,21,37,.85) 30%, rgba(14,21,37,.85) 70%, rgba(14,21,37,.4));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cert-strip-wrap::before, .cert-strip-wrap::after{
  content:"▌ VAULT ACCESS · CLASSIFICATION: PUBLIC · BROWSE WITH CARE ▐";
  position:absolute; left:0; right:0;
  font-family:'Special Elite','Courier New',monospace; font-size:11px; letter-spacing:.32em;
  color:var(--cyan); opacity:.55; text-align:center;
}
.cert-strip-wrap::before{ top:14px }
.cert-strip-wrap::after{ bottom:14px }

.cert-strip{
  display:flex;
  gap:24px;
  width:max-content;
  will-change:transform;
}
/* Reduced motion: stop the marquee and let the row be scrolled by hand instead. */
@media (prefers-reduced-motion:reduce){
  .cert-strip{ animation:none !important; transform:none !important }
  .cert-strip-wrap{ overflow-x:auto; -webkit-mask-image:none; mask-image:none }
}

.cert-strip-card{
  flex:0 0 260px; position:relative;
  background:rgba(14,21,37,.55);
  border:1px solid var(--border);
  aspect-ratio:260/330; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.cert-strip-card::after{
  content:""; position:absolute; top:0; right:0; width:18px; height:18px;
  background:linear-gradient(225deg, rgba(255,255,255,0.04), transparent 60%); pointer-events:none;
}
.cert-strip-card:hover{
  transform:translateY(-8px) scale(1.15); z-index:5;
  border-color:var(--cyan);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85), 0 0 0 1px var(--cyan), 0 0 28px rgba(94,243,255,.35);
}
.cert-strip-thumb{ flex:1; min-height:0; background:#000; position:relative; border-bottom:1px solid rgba(94,243,255,0.08) }
.cert-strip-thumb img{ display:block; width:100%; height:100%; object-fit:contain; background:#000 }
.cert-strip-meta{ padding:10px 12px 12px; font-family:'Special Elite','Courier New',monospace }
.cert-strip-meta .nm{ font-size:12px; color:var(--ink); letter-spacing:.02em; line-height:1.25}
.cert-strip-meta .org{ font-family:'Space Mono',monospace; font-size:9px; color:var(--cyan); letter-spacing:.16em; margin-top:4px}
.cert-strip-meta .date{ font-family:'Space Mono',monospace; font-size:9px; color:var(--muted-2); margin-top:2px}

.cert-strip-stamp{
  position:absolute; top:8px; left:8px;
  width:54px; height:54px;
  border:1.5px solid var(--acid); color:var(--acid);
  font-family:'Space Mono',monospace; font-size:8px; font-weight:700; letter-spacing:.1em;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1;
  transform:rotate(-18deg) scale(.6); opacity:0;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  background:rgba(217,255,60,.06); text-shadow:0 0 6px rgba(217,255,60,.6); pointer-events:none;
}
.cert-strip-card:hover .cert-strip-stamp{ opacity:1; transform:rotate(-12deg) scale(1) }

.cert-lightbox{
  position:fixed; inset:0;
  background:rgba(2,6,14,.88); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; z-index:999; padding:40px;
}
.cert-lightbox.open{ display:flex }
.cert-lightbox img{
  max-width:92vw; max-height:85vh;
  border:1px solid var(--cyan); box-shadow:0 0 80px rgba(94,243,255,.4); background:#000;
}
.cert-lightbox-close{
  position:absolute; top:20px; right:24px;
  background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  width:36px; height:36px; border-radius:50%;
  font-family:'Space Mono',monospace; cursor:pointer; font-size:14px;
}
.cert-lightbox-close:hover{ background:var(--cyan); color:#000 }
.cert-lightbox-title{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-family:'Special Elite','Courier New',monospace; font-size:14px; color:var(--cyan);
  text-shadow:0 0 8px rgba(94,243,255,.6);
}
.cert-lightbox-pdf{
  position:absolute; top:24px; left:24px;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em;
  color:var(--acid); text-decoration:none; padding:8px 14px; border:1px solid var(--acid);
}
.cert-lightbox-pdf:hover{ background:var(--acid); color:#000 }