/* ==========================================================================
   Namasi G. Sankar — site styles
   One dark "circuit-board" template shared by every page (grown out of the
   /explainers/ page). Plain CSS, no theme dependency.
   ========================================================================== */

:root{
  --bg:#05070a; --surface:#10161d; --sunk:#141c24; --fg:#E5ECEF; --fg-soft:#C9D4DA; --muted:#93A4AE; --line:#223039;
  --violet:#9C8CFF; --violet-soft:#241f3d; --teal:#2DD4BF; --teal-soft:#132e2b;
  --nA:#55C68E; --nC:#86A2FF; --nG:#E2B84A; --nT:#F27767;
  --glass:rgba(20,26,36,.55); --glass-line:rgba(156,140,255,.18);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --nav-h:68px;
  /* aliases kept so older inline markup (research teaser cards) still resolves */
  --global-link-color:var(--violet); --accent-teal:var(--teal); --global-border-color:var(--line);
  --acgt-a:var(--nA); --acgt-c:var(--nC); --acgt-g:var(--nG); --acgt-t:var(--nT);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font:17px/1.7 var(--sans);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* body stays transparent so the fixed backdrop layers (z-index -1/-2) show through */
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:transparent;overflow-x:hidden}
img,video,iframe,svg{max-width:100%}
a{color:var(--teal)}
::selection{background:rgba(156,140,255,.35);color:#fff}
@view-transition{navigation:auto}

/* ---------- backdrop: drifting circuit grid + aurora ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-color:var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(156,140,255,.075) 0, rgba(156,140,255,.075) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(156,140,255,.075) 0, rgba(156,140,255,.075) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(45,212,191,.055) 0, rgba(45,212,191,.055) 1px, transparent 1px, transparent 256px),
    repeating-linear-gradient(90deg, rgba(45,212,191,.055) 0, rgba(45,212,191,.055) 1px, transparent 1px, transparent 256px);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 40%, rgba(0,0,0,.35) 100%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 40%, rgba(0,0,0,.35) 100%);
}
/* aurora: three soft light blobs that drift slowly and independently (markup in _layouts/default.html) */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;display:block;width:78vmax;height:78vmax;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){left:-30vmax;top:-34vmax;background:radial-gradient(circle,rgba(156,140,255,.32),rgba(156,140,255,0) 62%)}
.aurora i:nth-child(2){right:-34vmax;bottom:-40vmax;background:radial-gradient(circle,rgba(45,212,191,.26),rgba(45,212,191,0) 62%)}
.aurora i:nth-child(3){left:28vw;top:18vh;width:58vmax;height:58vmax;background:radial-gradient(circle,rgba(134,162,255,.18),rgba(134,162,255,0) 62%)}
@media (prefers-reduced-motion:no-preference){
  body::before{animation:gridDrift 120s linear infinite}
  .aurora i:nth-child(1){animation:auroraA 36s ease-in-out infinite alternate}
  .aurora i:nth-child(2){animation:auroraB 44s ease-in-out infinite alternate}
  .aurora i:nth-child(3){animation:auroraC 52s ease-in-out infinite alternate}
}
@keyframes gridDrift{to{background-position:64px 64px,-64px -64px,256px -128px,-256px 128px}}
@keyframes auroraA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40vw,22vh) scale(1.15)}100%{transform:translate(12vw,50vh) scale(.95)}}
@keyframes auroraB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-42vw,-18vh) scale(1.1)}100%{transform:translate(-16vw,-46vh) scale(1.2)}}
@keyframes auroraC{0%{transform:translate(0,0) scale(1);opacity:.55}50%{transform:translate(-32vw,26vh) scale(1.25);opacity:1}100%{transform:translate(20vw,-16vh) scale(.9);opacity:.65}}

/* ---------- top navigation (identical on every page) ---------- */
.topbar{position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(5,7,10,.82);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(156,140,255,.2)}
.topbar-in{max-width:1180px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font:800 19px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--teal));box-shadow:0 0 14px rgba(45,212,191,.7)}
.topnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.topnav a{position:relative;padding:9px 13px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--fg-soft);text-decoration:none;transition:color .2s,background-color .2s}
.topnav a:hover{color:var(--fg);background:rgba(156,140,255,.1)}
.topnav a.current{color:var(--fg);background:rgba(156,140,255,.14)}
.topnav a.current::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--teal))}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--fg);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .25s,opacity .25s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1000px){
  .nav-toggle{display:inline-flex}
  .topnav{position:absolute;top:var(--nav-h);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 16px 18px;background:#05070a;box-shadow:0 24px 40px rgba(0,0,0,.6);border-bottom:1px solid rgba(156,140,255,.2);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s}
  .nav-open .topnav{opacity:1;transform:none;pointer-events:auto}
  .topnav a{padding:14px 16px;font-size:17px;border-radius:12px}
  .topnav a.current::after{left:16px;right:auto;width:28px;bottom:8px}
}

/* ---------- layout shells ---------- */
.site-main{flex:1;width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:76px 0 36px;text-align:center}
.kicker{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.grad-title{font:800 clamp(36px,5.4vw,60px)/1.06 var(--display);letter-spacing:-.025em;margin:18px 0 16px;
  background-image:linear-gradient(90deg,var(--violet),var(--teal),var(--violet));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){ .grad-title{animation:shift 9s ease infinite} }
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.lede{max-width:660px;margin:0 auto;color:var(--muted);font-size:19px;line-height:1.6}
.hero-rule{height:1px;margin:44px auto 0;max-width:820px;background:linear-gradient(90deg,transparent,rgba(156,140,255,.45),rgba(45,212,191,.45),transparent)}

/* ---------- buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;text-decoration:none;font:600 15px/1 var(--sans);
  color:var(--fg);background:var(--glass);border:1px solid var(--glass-line);transition:transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);border-color:rgba(45,212,191,.5);box-shadow:0 10px 30px rgba(45,212,191,.18)}
.btn-primary{color:var(--bg);border:0;background:linear-gradient(90deg,var(--violet),var(--teal));box-shadow:0 8px 28px rgba(156,140,255,.3)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(45,212,191,.4)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:500 14px/1 var(--sans);color:var(--fg-soft);
  text-decoration:none;border:1px solid var(--line);background:rgba(16,22,29,.6);transition:color .2s,border-color .2s}
.chip:hover{color:var(--fg);border-color:rgba(156,140,255,.45)}
.chip svg{width:16px;height:16px;fill:currentColor}

/* ---------- glass panels / cards ---------- */
.panel,.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 36px rgba(0,0,0,.35)}
.panel{padding:28px}
.card{display:block;padding:24px 26px;color:inherit;text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
a.card:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5);box-shadow:0 14px 40px rgba(45,212,191,.16),0 0 0 1px rgba(156,140,255,.2)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card .card-tag{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.card h3{font:700 21px/1.25 var(--display);margin:10px 0 8px;color:var(--fg)}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.card .card-go{display:inline-block;margin-top:14px;font:600 14px var(--sans);color:var(--teal)}

/* ---------- prose (markdown content) ---------- */
.prose{padding:20px 0 40px;color:var(--fg-soft)}
.prose > *:first-child{margin-top:0}
.prose h2{font:700 clamp(26px,3.2vw,34px)/1.18 var(--display);letter-spacing:-.015em;color:var(--fg);margin:2.4em 0 .7em;
  padding-top:1.3em;border-top:1px solid var(--line);text-shadow:0 0 22px rgba(156,140,255,.28),0 0 44px rgba(45,212,191,.12)}
.prose h3{font:700 22px/1.3 var(--display);color:var(--fg);margin:2em 0 .6em}
.prose h4{font:600 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:2em 0 .6em}
.prose p{margin:0 0 1.15em}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--teal);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  border-bottom:1px solid rgba(45,212,191,.35);transition:background-size .3s,border-color .3s}
.prose a:hover{background-size:100% 1px;border-color:transparent}
.prose a.card,.prose a.btn,.prose .explainer-teaser a{background:none;border-bottom:0}
.prose a.btn{border:1px solid var(--glass-line);color:var(--fg)}
.prose a.btn-primary{border:0;color:var(--bg);background:linear-gradient(90deg,var(--violet),var(--teal))}
.prose a.card{color:inherit}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose ul li::marker{color:var(--teal)}
.prose ol li::marker{color:var(--violet);font-family:var(--mono);font-weight:600}
.prose img{display:block;height:auto;margin:1.6em auto;border-radius:14px;border:1px solid var(--glass-line);background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.prose hr{border:0;height:1px;margin:2em 0;background:linear-gradient(90deg,transparent,rgba(156,140,255,.4),transparent)}
.prose code{font:500 .88em var(--mono);padding:.15em .45em;border-radius:6px;background:var(--sunk);border:1px solid var(--line);color:var(--fg)}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-left:3px solid var(--violet);color:var(--fg)}
.prose iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.prose .wordwrap{padding:16px 20px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}

/* ---------- entry lists (publications, awards, talks) ---------- */
.entries{display:grid;gap:16px;margin:8px 0 28px}
.entry{position:relative;padding:22px 26px 22px 30px}
.entry::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--violet),var(--teal))}
.entry-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.entry-meta .pill{padding:5px 9px;border-radius:999px;background:var(--violet-soft);color:var(--violet)}
.entry h3{font:700 20px/1.3 var(--display);margin:12px 0 8px;color:var(--fg)}
.entry p{margin:0 0 .5em;color:var(--muted);font-size:15.5px;line-height:1.6}
.entry p:last-child{margin-bottom:0}
.entry .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.entry .links a{border:1px solid var(--glass-line);border-radius:999px;padding:7px 14px;font:600 13px/1 var(--sans);color:var(--fg);background:rgba(16,22,29,.6)}
.entry .links a:hover{border-color:rgba(45,212,191,.55);color:var(--teal)}
.section-label{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin:44px 0 16px}

/* ---------- explainer teaser cards (used inline on Research) ---------- */
.explainer-teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.8em 0 2.2em}
.explainer-teaser__card{display:block;padding:20px 20px 18px;border-radius:16px;text-decoration:none;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,box-shadow .25s}
.explainer-teaser__card:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.5);box-shadow:0 12px 30px rgba(45,212,191,.18)}
.explainer-teaser__icon{display:block;width:100%;height:56px;margin-bottom:10px;overflow:visible}
.explainer-teaser__label{display:block;font:700 17px/1.3 var(--display);color:var(--fg);margin-bottom:4px}
.explainer-teaser__desc{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .mini-hadof .n{animation:miniPulse 3.2s ease-in-out infinite}.mini-hadof .n2{animation-delay:.5s}.mini-hadof .n3{animation-delay:1s}
  .mini-genome .g{animation:miniSlide 3.6s ease-in-out infinite}.mini-genome .g2{animation-delay:.3s}.mini-genome .g3{animation-delay:.6s}.mini-genome .g4{animation-delay:.9s}
  .mini-qubo .q{animation:miniFade 4s ease-in-out infinite}.mini-qubo .q2{animation-delay:.6s}.mini-qubo .q3{animation-delay:1.2s}
}
@keyframes miniPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes miniSlide{0%{opacity:0;transform:translateX(-8px)}30%,70%{opacity:1;transform:none}100%{opacity:.3}}
@keyframes miniFade{0%,100%{opacity:.25}50%{opacity:.95}}

/* ---------- home ---------- */
.home-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:56px;align-items:center;padding:72px 0 40px}
.home-hero h1{font-size:clamp(44px,6.4vw,76px);margin:18px 0 18px}
.home-hero .lede{margin:0 0 28px;max-width:600px}
.home-hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.portrait{position:relative;justify-self:center;width:min(100%,400px)}
.portrait-frame{position:relative;padding:3px;border-radius:28px;background:linear-gradient(140deg,var(--violet),rgba(156,140,255,.15) 40%,rgba(45,212,191,.15) 60%,var(--teal));
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(156,140,255,.18)}
.portrait-frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:25px;background:var(--sunk)}
.portrait-orbit{position:absolute;inset:-26px;border-radius:50%;border:1px dashed rgba(156,140,255,.22);pointer-events:none}
@media (prefers-reduced-motion:no-preference){ .portrait-orbit{animation:spin 60s linear infinite} }
@keyframes spin{to{transform:rotate(360deg)}}
.home-section{padding:64px 0 0}
.home-section > .kicker{display:block;text-align:center}
.home-section > h2{font:800 clamp(30px,4vw,44px)/1.1 var(--display);letter-spacing:-.02em;text-align:center;margin:14px 0 30px;color:var(--fg)}
@media (max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:40px;padding-top:44px;text-align:left}
  .portrait{order:-1;width:min(78%,340px)}
}

/* ---------- explainer sections (Animations page) ---------- */
.explainer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;padding:60px 0;border-top:1px solid var(--line)}
.explainer .tag{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.explainer h2{font:700 32px/1.15 var(--display);margin:12px 0 14px;letter-spacing:-.01em;color:var(--fg);text-shadow:0 0 22px rgba(156,140,255,.3),0 0 44px rgba(45,212,191,.15)}
.explainer .copy p{color:var(--muted);margin:0 0 10px}
.explainer .copy code{font:500 .9em var(--mono);color:var(--fg)}
.stat-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.stat{font:700 24px/1 var(--display);color:var(--fg)}
.stat small{display:block;font:500 11px/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.more{display:inline-block;margin-top:16px;font:600 14px var(--sans);color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(45,212,191,.4)}
@media (max-width:820px){ .explainer{grid-template-columns:1fr;gap:28px;padding:44px 0} .explainer .panel{order:-1} }

/* ---------- CV viewer ---------- */
.cv-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 28px}
.cv-pages{display:grid;gap:22px;max-width:900px;margin:0 auto}
.cv-pages canvas{display:block;width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(156,140,255,.25)}
.cv-status{text-align:center;color:var(--muted);font:500 14px var(--mono);padding:40px 0}
.cv-skel{aspect-ratio:1/1.414;border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,.04) 20%,rgba(255,255,255,.09) 40%,rgba(255,255,255,.04) 60%) 0 0/200% 100%;border:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){ .cv-skel{animation:skel 1.4s linear infinite} }
@keyframes skel{to{background-position:-200% 0}}

/* ---------- animated figure kit (inline SVG) ---------- */
.section-lede{max-width:680px;margin:-12px auto 34px;text-align:center;color:var(--muted);font-size:18px;line-height:1.6}
.center{justify-content:center}
.viz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.viz-card{padding:18px 22px 24px}
.viz-frame{border-radius:12px;background:rgba(5,7,10,.4);border:1px solid rgba(156,140,255,.1);padding:10px 8px;margin-bottom:16px}
.viz-card h3{margin:0 0 6px}
.home-vision .btn-row{margin-top:26px}
@media (max-width:760px){ .viz-grid{grid-template-columns:1fr} }

.prose .bleed{width:min(1100px,calc(100vw - 40px));margin-left:calc(50% - min(550px,calc(50vw - 20px)))}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;padding:38px 0;border-top:1px solid var(--line)}
.bleed > .story:first-child{border-top:0;padding-top:12px}
.story:nth-child(odd) .viz{order:-1}
.story .viz{padding:16px 14px}
.story .copy .tag{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.story .copy h3{font:700 clamp(22px,2.4vw,27px)/1.2 var(--display);margin:10px 0 12px;color:var(--fg);letter-spacing:-.01em}
.story .copy p{color:var(--muted);margin:0 0 .8em}
.story .copy ul,.story .copy ol{color:var(--muted);margin-bottom:.8em}
.story .copy strong{color:var(--fg)}
@media (max-width:820px){ .story{grid-template-columns:1fr;gap:20px;padding:30px 0} .story .viz,.story:nth-child(odd) .viz{order:-1} }

.callout{padding:22px 26px;margin:0 0 8px}
.callout .kicker{display:block;margin-bottom:12px}
.callout p{margin:0 0 .8em;color:var(--fg-soft)}
.callout p:last-child{margin:0}
.more-wrap{margin:30px 0 10px}
details.fold{display:block;width:100%;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);padding:0 22px}
details.fold summary{cursor:pointer;list-style:none;padding:16px 0;font:600 15px/1.3 var(--sans);color:var(--teal)}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"+";display:inline-block;width:1.2em;font-family:var(--mono)}
details.fold[open] summary::before{content:"\2212"}
details.fold[open]{padding-bottom:10px}
details.fold h4:first-of-type{margin-top:.6em}

.viz-svg{display:block;width:100%;height:auto;overflow:visible}
.viz-svg text{font:500 9.5px/1 var(--mono);fill:var(--muted)}
.viz-svg text.mid{text-anchor:middle}
.viz-svg text.end{text-anchor:end}
.viz-svg text.cap{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--fg-soft)}
.viz-svg text.ttl{font:600 11px var(--sans);fill:var(--fg)}
.viz-svg text.big{font:700 21px var(--display);fill:var(--fg)}
.viz-svg text.dim{fill:#64757f}
.viz-svg text.teal{fill:var(--teal)}
.viz-svg text.gold{fill:var(--nG)}
.viz-svg .axis{stroke:var(--line);stroke-width:1.5}
.viz-svg .dash{stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 4}
.viz-svg .ring{fill:none;stroke:rgba(156,140,255,.5);stroke-width:1.5}
.viz-svg .ring.faint{stroke:rgba(156,140,255,.2)}
.viz-svg .vec{stroke:var(--teal);stroke-width:2.5;stroke-linecap:round}
.viz-svg .tip,.viz-svg .tipfill{fill:var(--teal)}
.viz-svg .arw{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.viz-svg .need{fill:rgba(156,140,255,.75)}
.viz-svg .have{fill:var(--teal)}
.viz-svg .need,.viz-svg .have,.viz-svg .bar{transform-box:fill-box}
.viz-svg .need,.viz-svg .have{transform-origin:0 50%}
.viz-svg [style*="offset-path"],.a-qmech .ball{offset-rotate:0deg}

/* home: exploding search space */
.a-explode .bar{fill:var(--violet);opacity:.85;transform-origin:50% 100%}
.a-explode .bar.hot{fill:var(--teal)}
.a-explode .cnt{opacity:0}
.a-explode g.cnt:first-of-type{opacity:1}
/* home: superposition / entanglement / tunnelling */
.a-qmech .sp-vec{transform-box:view-box;transform-origin:55px 82px}
.a-qmech .ent1{transform-box:view-box;transform-origin:138px 82px}
.a-qmech .ent2{transform-box:view-box;transform-origin:182px 82px}
.a-qmech .link{fill:none;stroke:var(--violet);stroke-width:2;stroke-dasharray:3 3}
.a-qmech .land{fill:none;stroke:rgba(156,140,255,.65);stroke-width:2}
.a-qmech .over{fill:none;stroke:rgba(147,164,174,.35);stroke-width:1.2;stroke-dasharray:3 4}
.a-qmech .ball{fill:var(--nG);offset-path:path('M236,106 L298,131')}
/* home: small noisy devices */
.a-nisq .cpl{stroke:rgba(156,140,255,.28);stroke-width:1.5}
.a-nisq .q{fill:var(--sunk);stroke:var(--violet);stroke-width:1.6}
/* home: QPUs as accelerators */
.a-hpc .rack{fill:var(--sunk);stroke:var(--line);stroke-width:1.5}
.a-hpc .led{fill:var(--nA);opacity:.4}
.a-hpc .wire{stroke:rgba(156,140,255,.3);stroke-width:1.5}
.a-hpc .hub{fill:var(--violet-soft);stroke:var(--violet);stroke-width:1.8}
.a-hpc .hub + text{fill:var(--fg)}
.a-hpc .qpu{fill:var(--teal-soft);stroke:var(--teal);stroke-width:1.8}
.a-hpc .qd{fill:var(--teal);opacity:.65}
.a-hpc .pkt{opacity:0}
.a-hpc .p-in{fill:var(--fg-soft)}
.a-hpc .p-out{fill:var(--violet)}
.a-hpc .p-back{fill:var(--teal)}
/* research: QUBO */
.a-qubo .ge{stroke:var(--line);stroke-width:2}
.a-qubo .ge-hot{stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;opacity:0}
.a-qubo .gn{fill:var(--sunk);stroke:var(--violet);stroke-width:1.6}
.a-qubo .gn + text{fill:var(--fg)}
.a-qubo .mc{fill:rgba(156,140,255,.08);stroke:rgba(156,140,255,.18)}
.a-qubo .mc.diag{fill:rgba(156,140,255,.32)}
.a-qubo .mc-hot{fill:var(--teal);opacity:0}
/* research: energy landscape */
.a-land .land{fill:none;stroke:var(--violet);stroke-width:2}
.a-land .land-fill{fill:rgba(156,140,255,.07)}
.a-land .cball{fill:var(--nG)}
.a-land .smp{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center}
.a-land .smp.best{filter:drop-shadow(0 0 6px rgba(45,212,191,.8))}
/* research: hardware walls */
.a-walls .tile{fill:rgba(16,22,29,.6);stroke:var(--glass-line)}
.a-walls .wire{stroke:var(--muted);stroke-width:1.5}
.a-walls .gate{fill:var(--violet-soft);stroke:var(--violet);stroke-width:1.4}
.a-walls .npulse{fill:var(--teal)}
.a-walls .b1{fill:var(--violet)}
.a-walls .b4{fill:var(--violet)}
.a-walls .b16{fill:var(--teal)}
.a-walls .b4,.a-walls .b16{transform-box:fill-box;transform-origin:center}
.a-walls .tour-good{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linejoin:round}
.a-walls .tour-bad{fill:none;stroke:var(--nT);stroke-width:2.5;stroke-dasharray:5 4;opacity:0}
.a-walls .city{fill:var(--fg)}
/* research: overlap vs de Bruijn */
.a-graphs .sep{stroke:var(--line);stroke-dasharray:3 4}
.a-graphs .ge{stroke:rgba(156,140,255,.3);stroke-width:1.5}
.a-graphs .gn{fill:var(--sunk);stroke:var(--violet);stroke-width:1.6}
.a-graphs .ham{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400}
.a-graphs .db{fill:none;stroke:rgba(156,140,255,.45);stroke-width:1.8}
.a-graphs .db.rep{stroke:var(--nG);stroke-dasharray:4 4}
.a-graphs .kmer{fill:var(--sunk);stroke:var(--teal);stroke-width:1.5}
.a-graphs .walker{fill:var(--teal);opacity:0}
.a-graphs .walker.w2{fill:var(--nG)}
/* projects */
.a-brown .box{stroke:var(--glass-line)}
.a-brown polyline{fill:none;stroke-width:1.4;stroke-linejoin:round;opacity:.75}
.a-game .cell{fill:rgba(16,22,29,.75);stroke:var(--line)}
.a-game text.pay{font:600 13px var(--mono);fill:var(--fg)}
.a-game .hl{fill:none;stroke-width:2.5;opacity:0}
.a-game .hl-c{stroke:var(--nT)}
.a-game .hl-q{stroke:var(--teal);filter:drop-shadow(0 0 6px rgba(45,212,191,.6))}
.a-game .ent-link{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-dasharray:4 4;opacity:0}
.a-game .c-qu{opacity:0}
.a-igem .bact rect{fill:var(--teal-soft);stroke:var(--teal);stroke-width:1.8;transform-box:fill-box;transform-origin:center}
.a-igem .bact circle{fill:var(--teal);opacity:.55}
.a-igem .o{fill:#E5ECEF;opacity:.85}
.a-igem .c{fill:#64757f}
.a-igem .co2{opacity:0}
.a-igem .fuel{fill:var(--nG);opacity:0}
.a-causal .ce{stroke:var(--violet);stroke-width:2}
.a-causal .cn{fill:var(--sunk);stroke:var(--violet);stroke-width:2}
.a-causal .cn.xnode{stroke:var(--teal)}
.a-causal text.big{font-size:16px}
.a-causal .cp{fill:var(--teal);opacity:0}
.a-causal .c-do{opacity:0}
.a-conv .stream{fill:none;stroke:rgba(156,140,255,.35);stroke-width:2}
.a-conv .flow{fill:var(--teal);opacity:0}
.a-conv .goal{fill:var(--violet-soft);stroke:var(--teal);stroke-width:2}
.a-conv .goal ~ text.mid{fill:var(--fg)}
.a-net .nl{stroke:rgba(156,140,255,.45);stroke-width:1.5;stroke-dasharray:1}
.a-net .nn{fill:var(--sunk);stroke:var(--teal);stroke-width:1.8;transform-box:fill-box;transform-origin:center}
.a-net .nc{fill:var(--violet);filter:drop-shadow(0 0 10px rgba(156,140,255,.7))}

@media (prefers-reduced-motion:no-preference){
  .a-explode .bar{animation:barGrow 8s cubic-bezier(.3,.7,.3,1) infinite both;animation-delay:calc(var(--i) * .22s)}
  .a-explode .cnt{animation:cntShow 8s infinite both;animation-delay:calc(var(--i) * 2s)}
  .a-qmech .sp-vec{animation:spin 6s ease-in-out infinite}
  .a-qmech .ent{animation:entFlip 4.5s ease-in-out infinite}
  .a-qmech .link,.a-game .ent-link{animation:dashMove 1s linear infinite}
  .a-qmech .ball{animation:tunnel 4.5s ease-in-out infinite}
  .a-nisq .q.nz{animation:noise 4.5s infinite}
  .a-nisq .need,.a-walls .need{animation:fillBar 6s ease-out infinite both}
  .a-nisq .have,.a-walls .have{animation:fillBar 6s ease-out .4s infinite both}
  .a-hpc .led{animation:blink 1.8s steps(1) infinite}
  .a-hpc .pkt{animation:pkt 3s linear infinite both}
  .a-hpc .chip{animation:chipGlow 3s ease-in-out infinite}
  .a-qubo .ge-hot,.a-qubo .mc-hot{animation:qHot 7.2s infinite both;animation-delay:calc(var(--k) * 1.2s)}
  .a-land .cball{animation:roll 6s ease-in infinite}
  .a-land .smp{animation:smpIn 6s ease-out infinite both;animation-delay:var(--d)}
  .a-walls .npulse{animation:npulse 3.2s linear infinite}
  .a-walls .b4{animation:pop 4.5s .9s infinite both}
  .a-walls .b16{animation:pop 4.5s 1.8s infinite both}
  .a-walls .tour-bad{animation:tourBad 5s infinite}
  .a-walls .tour-good{animation:tourGood 5s infinite}
  .a-graphs .ham{animation:ham 6s ease-in-out infinite}
  .a-graphs .walker{animation:walk 6s linear infinite both}
  .a-graphs .walker.w2{animation-delay:3s}
  .a-graphs .db.rep,.a-graphs text.gold{animation:repBlink 1.5s ease-in-out infinite}
  .a-game .hl-c,.a-game .c-cl{animation:phaseA 8s infinite}
  .a-game .hl-q,.a-game .c-qu{animation:phaseB 8s infinite}
  .a-game .ent-link{animation:phaseB 8s infinite,dashMove 1s linear infinite}
  .a-igem .bact rect{animation:bactPulse 3.2s ease-in-out infinite}
  .a-igem .b2 rect{animation-delay:1.6s}
  .a-igem .co2{animation:co2In 4.4s ease-in infinite both}
  .a-igem .fuel{animation:fuelOut 4s ease-out infinite both}
  .a-causal .cp{animation:pkt 2.4s linear infinite both}
  .a-causal .cp.zx{animation:pkt 2.4s linear infinite both,cutVis 9.6s infinite}
  .a-causal .ce.zx{animation:cut 9.6s infinite}
  .a-causal .xnode{animation:xRing 9.6s infinite}
  .a-causal .c-obs{animation:phaseA 9.6s infinite}
  .a-causal .c-do{animation:phaseB 9.6s infinite}
  .a-conv .flow{animation:pkt 3.6s ease-in infinite both}
  .a-conv .goal{animation:goalPulse 3s ease-in-out infinite}
  .a-net .nl{animation:draw 10s ease-out infinite both;animation-delay:calc(var(--n) * .25s)}
  .a-net .nn{animation:popN 10s infinite both;animation-delay:calc(var(--n) * .3s)}
  .a-net .nc{animation:goalPulse 3s ease-in-out infinite}
}
@keyframes barGrow{0%{transform:scaleY(0);opacity:.85}18%,86%{transform:scaleY(1);opacity:.85}96%,100%{transform:scaleY(1);opacity:0}}
@keyframes cntShow{0%{opacity:0}3%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes entFlip{0%,35%{transform:rotate(0)}50%,85%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes dashMove{to{stroke-dashoffset:-12}}
@keyframes tunnel{0%,15%{offset-distance:0%;opacity:1}42%,58%{opacity:.2}85%,100%{offset-distance:100%;opacity:1}}
@keyframes noise{0%,70%,100%{fill:var(--sunk);stroke:var(--violet)}75%,86%{fill:var(--nT);stroke:var(--nT)}80%{fill:var(--sunk)}}
@keyframes fillBar{0%{transform:scaleX(0)}35%,90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.25}}
@keyframes blink{0%{opacity:.25}50%{opacity:1}}
@keyframes pkt{0%{offset-distance:0%;opacity:0}10%,88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes chipGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px rgba(45,212,191,.7))}}
@keyframes qHot{0%{opacity:0}4%,14%{opacity:.95}20%,100%{opacity:0}}
@keyframes roll{0%{offset-distance:0%}40%{offset-distance:100%}47%{offset-distance:88%}54%,100%{offset-distance:100%}}
@keyframes smpIn{0%{opacity:0;transform:scale(0)}10%,80%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes npulse{0%{offset-distance:0%;fill:var(--teal);opacity:1}100%{offset-distance:100%;fill:var(--nT);opacity:.35}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}12%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tourBad{0%,40%{opacity:1}50%,100%{opacity:0}}
@keyframes tourGood{0%,45%{opacity:0}55%,95%{opacity:1}100%{opacity:0}}
@keyframes ham{0%{stroke-dashoffset:400;opacity:1}60%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes walk{0%{offset-distance:0%;opacity:0}5%{opacity:1}45%{offset-distance:100%;opacity:1}50%,100%{offset-distance:100%;opacity:0}}
@keyframes repBlink{50%{opacity:.3}}
@keyframes phaseA{0%,45%{opacity:1}52%,100%{opacity:0}}
@keyframes phaseB{0%,50%{opacity:0}57%,95%{opacity:1}100%{opacity:0}}
@keyframes bactPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes co2In{0%{transform:translate(0,0);opacity:0}10%{opacity:.95}75%{transform:translate(112px,4px);opacity:.9}90%,100%{transform:translate(130px,6px);opacity:0}}
@keyframes fuelOut{0%{transform:translate(0,0) scale(.4);opacity:0}15%{transform:translate(8px,0) scale(1);opacity:1}85%{opacity:1}100%{transform:translate(70px,-6px) scale(1);opacity:0}}
@keyframes cut{0%,46%{opacity:1}52%,96%{opacity:.12}100%{opacity:1}}
@keyframes cutVis{0%,47%{visibility:visible}48%,97%{visibility:hidden}100%{visibility:visible}}
@keyframes xRing{0%,48%,100%{stroke:var(--teal);filter:none}54%,94%{stroke:var(--nG);filter:drop-shadow(0 0 8px rgba(226,184,74,.7))}}
@keyframes goalPulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 12px rgba(45,212,191,.75))}}
@keyframes draw{0%{stroke-dashoffset:1;opacity:1}20%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes popN{0%{transform:scale(0);opacity:1}12%,85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .a-qubo .mc-hot,.a-qubo .ge-hot{opacity:.6}
  .a-land .cball{offset-distance:100%}
  .a-land .smp{opacity:.95}
  .a-walls .tour-good{opacity:1}
  .a-game .hl-q,.a-game .c-qu,.a-game .ent-link{opacity:1}
  .a-game .c-cl{opacity:0}
  .a-igem .co2,.a-igem .fuel{opacity:.9}
}

/* ---------- footer ---------- */
.site-footer{margin-top:80px;border-top:1px solid var(--line);padding:26px 24px 34px;text-align:center;color:var(--muted);font:500 13px/1.5 var(--mono);letter-spacing:.04em}

/* ---------- scroll reveal (JS adds .reveal; no JS = always visible) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .35s ease-out,transform .35s ease-out}
  .reveal.is-visible{opacity:1;transform:none}
}

@media (max-width:600px){
  html{font-size:16px}
  .wrap,.wrap-narrow,.topbar-in{padding-left:16px;padding-right:16px}
  .page-hero{padding:52px 0 24px}
  .lede{font-size:17px}
  .panel{padding:18px}
  .entry{padding:18px 18px 18px 24px}
  .brand{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}