/* =====================================================================
   Saed Thaher — portfolio stylesheet
   1. Tokens (edit colors / fonts / spacing here)   2. Base   3. Layout
   4. Components   5. Project pages   6. Figures   7. CV / print
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --f-display:"Bricolage","Plex Sans",system-ui,sans-serif;
  --f-text:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --bg:#090b0e; --bg2:#0e1116; --panel:#11151b; --panel2:#161b22; --line:#222a34; --line2:#2f3945;
  --ink:#eceff3; --ink2:#c3cad4; --muted:#8a94a3;
  --acc:#ffb347; --acc-ink:#1a1206; --acc2:#5fe3d6; --bad:#ff7a70; --ok:#86e08f;
  --glow:rgba(255,179,71,.16); --grid:rgba(255,255,255,.035);
  --r:14px; --r-sm:8px; --wrap:1160px; --prose:720px;
  --shadow:0 20px 60px -30px rgba(0,0,0,.8);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f6f4ef; --bg2:#efece5; --panel:#fffdf9; --panel2:#f8f5ee; --line:#dcd7cb; --line2:#c9c3b5;
  --ink:#14171c; --ink2:#2f3640; --muted:#5d6672;
  --acc:#b8500a; --acc-ink:#fff8ef; --acc2:#0b7680; --bad:#b3261e; --ok:#1c7c36;
  --glow:rgba(184,80,10,.10); --grid:rgba(0,0,0,.045); --shadow:0 20px 50px -30px rgba(60,40,10,.35);
  color-scheme:light;
}
@view-transition{navigation:auto}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--f-text);overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;background-attachment:fixed}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:650;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.25rem;letter-spacing:-.01em}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:inherit;text-decoration-color:var(--acc);text-underline-offset:3px}
a:hover{color:var(--acc)}
img,svg,canvas{max-width:100%;display:block}
code,kbd,.mono{font-family:var(--f-mono);font-size:.88em}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:.08em .35em}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--acc-ink);padding:.5em 1em;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.eyebrow{font:500 .78rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:.8em;margin-bottom:1.2rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--acc)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink2);max-width:62ch}
.muted{color:var(--muted)}
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}

/* header */
.site-head{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;height:62px}
.brand{font:700 1.05rem var(--f-display);text-decoration:none;display:flex;align-items:center;gap:.6em;letter-spacing:-.01em}
.brand i{width:26px;height:26px;border-radius:7px;background:var(--acc);display:grid;place-items:center;color:var(--acc-ink);font:600 .7rem var(--f-mono);font-style:normal}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{text-decoration:none;font-size:.92rem;color:var(--ink2);padding:.45em .8em;border-radius:8px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--panel2)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--acc)}
.icon-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink2);height:36px;min-width:36px;padding:0 .6em;border-radius:9px;cursor:pointer;font:500 .78rem var(--f-mono);display:inline-flex;align-items:center;gap:.4em}
.icon-btn:hover{border-color:var(--acc);color:var(--ink)}
@media (max-width:720px){.nav a{padding:.45em .5em;font-size:.85rem}.brand span{display:none}.kbtn span{display:none}}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;color:var(--muted);font-size:.9rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.site-foot a{color:var(--ink2)}

/* ---------- 4. COMPONENTS ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.72em 1.15em;border-radius:11px;font:600 .95rem var(--f-text);text-decoration:none;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--acc);color:var(--ink)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{color:var(--acc-ink);filter:brightness(1.07)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font:500 .72rem/1 var(--f-mono);letter-spacing:.04em;padding:.5em .7em;border-radius:99px;border:1px solid var(--line2);color:var(--ink2);background:var(--panel)}
button.chip{cursor:pointer}
button.chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.status{font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:.45em .7em;border-radius:6px;background:color-mix(in srgb,var(--acc2) 14%,transparent);color:var(--acc2);border:1px solid color-mix(in srgb,var(--acc2) 40%,transparent);display:inline-flex;gap:.5em;align-items:center}
.status.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc2);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* hero */
.hero{min-height:min(92vh,880px);display:grid;align-items:center;padding:4rem 0 3rem;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;mask-image:linear-gradient(90deg,transparent 0,#000 38%,#000 100%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0,#000 55%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{margin:1.2rem 0 2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font:400 .8rem var(--f-mono);color:var(--muted);margin-top:2.2rem}
.hero-meta b{color:var(--ink);font-weight:500}
.portrait{width:clamp(150px,22vw,250px);aspect-ratio:1;border-radius:28px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow);position:relative;rotate:2deg;background:#fff}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--bg) 60%,transparent)}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.portrait{order:-1;width:120px;border-radius:20px}}
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;translate:-50% 0;font:400 .7rem var(--f-mono);letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.scroll-cue::after{content:"";display:block;width:1px;height:28px;background:linear-gradient(var(--acc),transparent);margin:.6em auto 0;animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{opacity:0}}

/* cards */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),var(--glow),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{border-color:var(--line2)}
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.card:hover{transform:translateY(-4px);color:inherit;border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
.pcard .mv{height:150px;margin:-1.4rem -1.4rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bg2);position:relative;overflow:hidden;display:grid;place-items:center}
.pcard .when{font:400 .74rem var(--f-mono);color:var(--muted);letter-spacing:.06em;display:flex;justify-content:space-between;gap:1em;margin-bottom:.6rem}
.pcard h3{font-size:1.35rem;margin-bottom:.4rem}
.pcard p{color:var(--ink2);font-size:.95rem;margin-bottom:1rem}
.pcard .metric{font:500 .8rem var(--f-mono);color:var(--acc);margin-bottom:1rem}
.pcard .chips{margin-top:auto}
.pcard .go{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line2);display:grid;place-items:center;transition:.3s;z-index:2}
a.card:hover .go{background:var(--acc);color:var(--acc-ink);rotate:-45deg;border-color:var(--acc)}
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.cards .pcard.hide{display:none}

/* micro visuals */
.mv svg{width:100%;height:100%}
.mv-cpu{display:flex;gap:10px;align-items:center}
.mv-cpu b{width:52px;height:52px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;font:500 .85rem var(--f-mono);color:var(--muted);animation:stage 3.2s infinite;animation-delay:calc(var(--i)*.4s)}
.mv-cpu s{width:14px;height:1px;background:var(--line2)}
@keyframes stage{0%,12%{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);box-shadow:0 0 24px var(--glow)}24%,100%{background:transparent;color:var(--muted);border-color:var(--line2);box-shadow:none}}
.mv-tdc{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;width:82%}
.mv-tdc i{aspect-ratio:1/2.4;border-radius:3px;background:var(--line);animation:therm 4s infinite;animation-delay:calc(var(--i)*.07s)}
.mv-tdc i.bub{animation-name:thermb}
@keyframes therm{0%,8%{background:var(--line)}16%,80%{background:var(--acc)}92%,100%{background:var(--line)}}
@keyframes thermb{0%,8%{background:var(--line)}16%,34%{background:var(--bad)}44%,80%{background:var(--acc2)}92%,100%{background:var(--line)}}
.mv-npu{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:62%}
.mv-npu i{aspect-ratio:1;border-radius:4px;border:1px solid var(--line2);animation:tile 3.6s infinite;animation-delay:calc(var(--i)*.06s)}
@keyframes tile{0%,20%{background:transparent}35%,75%{background:var(--acc2);border-color:var(--acc2);box-shadow:0 0 10px color-mix(in srgb,var(--acc2) 50%,transparent)}95%,100%{background:transparent}}
.mv-hdmi{width:58%;aspect-ratio:16/9;border:1px solid var(--line2);border-radius:6px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc) 30%,transparent) 0 12.5%,color-mix(in srgb,var(--acc2) 30%,transparent) 12.5% 25%,transparent 25% 37.5%)}
.mv-hdmi::after{content:"";position:absolute;left:0;right:0;height:22%;background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 40%,transparent),transparent);animation:scan 2.4s linear infinite}
@keyframes scan{from{top:-25%}to{top:105%}}
.mv-ic{width:70%;display:grid;gap:7px}
.mv-ic i{height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 var(--w,18px),transparent var(--w,18px) calc(var(--w,18px) + 5px));animation:slide 6s linear infinite;animation-direction:var(--dir,normal)}
.mv-ic i:nth-child(2n){background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc) 55%,transparent) 0 var(--w,26px),transparent var(--w,26px) calc(var(--w,26px) + 5px))}
@keyframes slide{to{background-position:230px 0}}
.mv-syn path{fill:none;stroke-width:1.6;stroke-dasharray:6 4;animation:dash 2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}

/* metric tiles */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.tile{background:var(--panel);padding:1.3rem 1.3rem 1.2rem}
.tile .v{font:700 clamp(1.9rem,3.6vw,2.7rem)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile .v small{font-size:.5em;color:var(--acc);font-weight:600;margin-left:.15em;letter-spacing:0}
.tile .k{font-size:.92rem;color:var(--ink2);margin-top:.5rem}
.tile .c{font:400 .7rem/1.4 var(--f-mono);color:var(--muted);margin-top:.45rem}

/* strip of what I do */
.do{border-top:1px solid var(--line)}
.do li{list-style:none;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.do ul{padding:0;margin:0}
.do .n{font:400 .78rem var(--f-mono);color:var(--acc)}
.do h3{margin:0 0 .2rem}
.do p{margin:0;color:var(--ink2);font-size:.97rem}

/* timeline */
.tl{position:relative;padding-left:1.6rem;border-left:1px solid var(--line2);display:grid;gap:1.6rem}
.tl li{list-style:none;position:relative}
.tl li::before{content:"";position:absolute;left:calc(-1.6rem - 5px);top:.5em;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.tl time{font:400 .76rem var(--f-mono);color:var(--muted);letter-spacing:.06em}
.tl h3{margin:.15rem 0 .2rem;font-size:1.1rem}
.tl p{margin:0;color:var(--ink2);font-size:.95rem}
.tl .ev-bad::before{border-color:var(--bad)} .tl .ev-ok::before{border-color:var(--ok);background:var(--ok)}

/* command palette */
.pal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.pal.open{display:flex}
.pal-box{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.pal input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:1rem 1.1rem;color:var(--ink);font:400 1rem var(--f-text);outline:0}
.pal ul{list-style:none;margin:0;padding:.4rem;max-height:46vh;overflow:auto}
.pal li a{display:flex;justify-content:space-between;gap:1em;padding:.6rem .8rem;border-radius:8px;text-decoration:none;font-size:.95rem}
.pal li a small{font:400 .7rem var(--f-mono);color:var(--muted)}
.pal li.sel a,.pal li a:hover{background:var(--panel2);color:var(--ink);box-shadow:inset 2px 0 0 var(--acc)}

/* ---------- 5. PROJECT PAGES ---------- */
.phero{padding:clamp(3rem,7vw,5.5rem) 0 2.5rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);max-width:17ch}
.phero .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font:400 .8rem var(--f-mono);color:var(--muted);margin-bottom:1.4rem}
.phero .lede{margin-bottom:1.6rem}
.back{font:400 .8rem var(--f-mono);color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:1.6rem}
.article{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;padding:3rem 0 4rem}
@media (min-width:1080px){.article{grid-template-columns:200px minmax(0,1fr)}}
.toc{display:none}
@media (min-width:1080px){.toc{display:block;position:sticky;top:90px;align-self:start;font-size:.85rem}
  .toc a{display:block;padding:.35em 0 .35em .9em;border-left:1px solid var(--line);color:var(--muted);text-decoration:none}
  .toc a.on{color:var(--ink);border-color:var(--acc)}
  .toc .t{font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}}
.body>section{padding:0 0 3.2rem}
.body>section>:is(p,ul,ol,h2,h3,.note){max-width:var(--prose)}
.body h2{scroll-margin-top:90px;display:flex;align-items:baseline;gap:.7em}
.body h2 span{font:400 .8rem var(--f-mono);color:var(--acc);letter-spacing:.1em}
.body ul{padding-left:1.1em} .body li{margin-bottom:.45em}
.body li::marker{color:var(--acc)}
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:1.5rem 0}
.scope div{background:var(--panel);padding:1.1rem 1.2rem;font-size:.92rem;color:var(--ink2)}
.scope h4{font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.scope .mine h4{color:var(--acc)}
.note{border-left:2px solid var(--acc2);padding:.2rem 0 .2rem 1rem;color:var(--ink2);font-size:.95rem;margin:1.2rem 0}
.dl{display:grid;gap:.9rem;margin:1.2rem 0;max-width:var(--prose)}
.dl div{display:grid;grid-template-columns:1.6rem 1fr;gap:.4rem}
.dl div::before{content:"→";color:var(--acc);font-family:var(--f-mono)}
.dl b{font-weight:600}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;border-top:1px solid var(--line);padding:2.5rem 0 4rem}
.prevnext a{text-decoration:none;padding:1.2rem 1.4rem}
.prevnext small{font:400 .72rem var(--f-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.prevnext b{font:650 1.15rem var(--f-display)}
.prevnext a:last-child{text-align:right}

/* ---------- 6. FIGURES ---------- */
.fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:1.6rem 0 2rem;overflow:hidden}
.fig-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font:500 .74rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fig-h .tools{display:flex;gap:.35rem;flex-wrap:wrap}
.fig-b{padding:1.3rem 1.1rem;overflow-x:auto}
.fig figcaption,.fig .cap{padding:.8rem 1.1rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.fig svg text{font-family:var(--f-mono);fill:var(--ink2)}
.tb{font:500 .72rem var(--f-mono);padding:.45em .75em;border-radius:7px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink2);cursor:pointer}
.tb:hover{border-color:var(--acc);color:var(--ink)} .tb[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
/* bar comparisons */
.bars{display:grid;gap:1.15rem}
.bar-row .lab{display:flex;justify-content:space-between;gap:1em;font-size:.9rem;margin-bottom:.4rem}
.bar-row .lab b{font:500 .82rem var(--f-mono);color:var(--acc)}
.bar{height:22px;border-radius:5px;background:var(--bg2);position:relative;margin-bottom:4px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:5px;background:var(--line2);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.bar.after i{background:var(--acc)} .bar.alt i{background:var(--acc2)} .bar.bad i{background:var(--bad)}
.bar span{position:absolute;left:.6em;top:0;line-height:22px;font:500 .72rem/22px var(--f-mono);color:var(--ink);mix-blend-mode:normal;white-space:nowrap;text-shadow:0 0 6px var(--bg)}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font:400 .74rem var(--f-mono);color:var(--muted);margin-bottom:1rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.45em;background:var(--line2);vertical-align:-1px}
.legend .a{background:var(--acc)} .legend .b{background:var(--acc2)} .legend .c{background:var(--bad)}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.tbl th{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line2);white-space:nowrap}
.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--f-mono)}
.tbl .good{color:var(--ok)} .tbl .badc{color:var(--bad)} .tbl tr.hl td{background:color-mix(in srgb,var(--acc) 8%,transparent)}
/* pipeline viz */
.pl-grid{display:grid;grid-template-columns:3.2rem repeat(4,minmax(86px,1fr));gap:4px;font:400 .74rem var(--f-mono);min-width:460px}
.pl-grid .h{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:.3em .5em}
.pl-cell{padding:.5em .55em;border-radius:6px;background:var(--bg2);border:1px solid var(--line);min-height:2.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-cell.now{border-color:var(--acc)} .pl-cell.stall{background:color-mix(in srgb,var(--bad) 16%,var(--bg2));border-color:var(--bad)}
.pl-cell.kill{text-decoration:line-through;opacity:.5} .pl-cell.fwd{box-shadow:inset 3px 0 0 var(--acc2)} .pl-cell.pm{background:color-mix(in srgb,var(--acc) 18%,var(--bg2))}
.pl-log{font:400 .8rem var(--f-mono);color:var(--ink2);margin-top:.9rem;min-height:2.6em}
/* packmul */
.pm{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;min-width:480px}
.pm .lane{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.8rem;font:400 .78rem var(--f-mono);display:grid;gap:.45rem}
.pm label{color:var(--muted);display:flex;justify-content:space-between}
.pm input[type=range]{width:100%;accent-color:var(--acc)}
.pm .p{color:var(--acc);font-weight:500;border-top:1px dashed var(--line2);padding-top:.45rem}
.pm-out{margin-top:1rem;font:400 .85rem/1.7 var(--f-mono);color:var(--ink2)}
.pm-out b{color:var(--acc)}
/* thermometer */
.th{display:grid;grid-template-columns:repeat(32,1fr);gap:3px;min-width:520px}
.th button{aspect-ratio:1/2.2;border-radius:4px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;padding:0;font:400 .6rem var(--f-mono);color:var(--muted)}
.th button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.th button.bub{outline:2px solid var(--bad);outline-offset:1px}
.th-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-top:1rem}
.th-out div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;font:400 .76rem var(--f-mono);color:var(--muted)}
.th-out b{display:block;font:700 1.6rem var(--f-display);color:var(--ink)}
.th-out .err b{color:var(--bad)} .th-out .fine b{color:var(--ok)}
/* tiles grid (AIE) */
.aie{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-width:420px}
.aie i{aspect-ratio:1;border-radius:6px;border:1px solid var(--line2);background:var(--bg2);transition:.4s;transition-delay:calc(var(--i)*18ms)}
.aie.run i{background:var(--acc2);border-color:var(--acc2);box-shadow:0 0 12px color-mix(in srgb,var(--acc2) 45%,transparent)}
/* stacked bar */
.stack{display:flex;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.stack div{display:grid;place-items:center;font:500 .72rem var(--f-mono);color:var(--acc-ink);min-width:0;overflow:hidden;white-space:nowrap}
/* lab stepper */
.labs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:1rem;min-width:520px}
.labs button{background:var(--bg2);border:1px solid var(--line);color:var(--ink2);border-radius:10px;padding:.7rem .3rem;cursor:pointer;font:500 .78rem var(--f-mono)}
.labs button small{display:block;color:var(--muted);font-size:.68rem;margin-top:.25rem;font-weight:400}
.labs button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)} .labs button[aria-pressed="true"] small{color:var(--acc-ink)}
.lab-panel h3{margin-bottom:.3rem} .lab-panel p{color:var(--ink2);max-width:70ch}
.kv{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.kv span{font:400 .74rem var(--f-mono);background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:.4em .65em;color:var(--ink2)}
.kv span b{color:var(--acc);font-weight:500}
.conv{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:start;min-width:520px}
.conv canvas{width:100%;image-rendering:pixelated;border-radius:8px;border:1px solid var(--line)}
.kern{display:grid;grid-template-columns:repeat(3,2.3rem);gap:3px;font:500 .8rem var(--f-mono)}
.kern i{font-style:normal;height:2.3rem;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:6px}
/* diagrams */
.dg .box{fill:var(--bg2);stroke:var(--line2);stroke-width:1.2} .dg .box.a{stroke:var(--acc)} .dg .box.b{stroke:var(--acc2)} .dg .box.fill{fill:color-mix(in srgb,var(--acc) 14%,var(--bg2))}
.dg .ln{stroke:var(--muted);stroke-width:1.2;fill:none} .dg .ln.a{stroke:var(--acc)} .dg .ln.b{stroke:var(--acc2)} .dg .dash{stroke-dasharray:4 4}
.dg .t{font-size:12px;fill:var(--ink)} .dg .s{font-size:10px;fill:var(--muted)} .dg .zone{fill:none;stroke:var(--line2);stroke-dasharray:3 5}
.dg .flow{stroke-dasharray:5 7;animation:dash 1.4s linear infinite}

/* ---------- 7. CV / coursework / print ---------- */
.cv{max-width:860px;margin-inline:auto;padding:3rem 0 4rem}
.cv-head{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-bottom:2rem}
.cv-head img{width:92px;height:92px;border-radius:20px;object-fit:cover;border:1px solid var(--line2)}
.cv-head h1{font-size:clamp(2rem,5vw,3rem);margin:0}
.cv h2{font:500 .76rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--line);padding-bottom:.6rem;margin:2.2rem 0 1.1rem}
.cv-item{margin-bottom:1.3rem}
.cv-item .top{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}
.cv-item .top b{font:650 1.08rem var(--f-display)} .cv-item .top span,.cv-item .sub{font:400 .78rem var(--f-mono);color:var(--muted)}
.cv-item ul{margin:.45rem 0 0;padding-left:1.1em;color:var(--ink2);font-size:.96rem} .cv-item li{margin-bottom:.3em} .cv-item li::marker{color:var(--acc)}
.course{display:grid;grid-template-columns:5.2rem 1fr auto;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.course .no{font:500 .85rem var(--f-mono);color:var(--acc)} .course p{margin:.15rem 0 0;font-size:.9rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
@media print{
  :root,[data-theme]{--bg:#fff;--panel:#fff;--panel2:#fff;--ink:#000;--ink2:#111;--muted:#444;--acc:#8a3b00;--line:#ccc;--line2:#bbb}
  body{background:#fff;font-size:8.8pt;line-height:1.32}.cv-item li{margin-bottom:.1em}.cv-item ul{font-size:1em}.cv-head h1{font-size:20pt}.site-head,.site-foot,.pal,.no-print{display:none!important}
  .cv{padding:0;max-width:none}.cv h2{margin:1rem 0 .5rem}.cv-item{margin-bottom:.6rem;break-inside:avoid}.cv-head{margin-bottom:.6rem}.cv-head img{width:64px;height:64px}
  .rv{opacity:1!important;transform:none!important}@page{margin:14mm}
}