*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
.variant-tag{position:fixed;right:10px;bottom:10px;z-index:99;font:600 11px/1 ui-monospace,monospace;
letter-spacing:.09em;text-transform:uppercase;padding:7px 10px;border-radius:3px;opacity:.9}
.items{display:grid}
.desc p{margin:0 0 .55em}
.desc p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ══════════ TOKENS ══════════
light = c11 Git x Zine (terminal green #0A7D35, hue 142, AA on cream)
dark = c06 Terminal x Zine (acid yellow / red on near-black) */
:root{
--bg:#FFF8E7;--surf:#FFFFFF;--fg:#141210;--dim:#5F5A52;
--ac1:#C4231D;--ac1b:#E5322D;--ac2:#0A7D35;
--rule:#141210;--shadow:#141210;--onac:#FFFFFF;--onslab:#FFFFFF;
--card-bd:3px;--card-sh:4px 4px 0 var(--shadow);
color-scheme:light;
}
:root[data-theme="dark"]{
/* slate ground, ink at 12:1, and two mild accents:
ac1 muted blue (structure) + ac2 terminal green (signal) */
--bg:#14181D;--surf:#1B2027;--fg:#CDD5DE;--dim:#8B95A1;
--ac1:#6E9BC9;--ac1b:#6E9BC9;--ac2:#74C58C;
--rule:#2A313A;--shadow:rgba(0,0,0,.5);--onac:#14181D;--onslab:#14181D;
--card-bd:1px;--card-sh:none;
color-scheme:dark;
}
body{background:var(--bg);color:var(--fg);
font:400 14px/1.68 "JetBrains Mono",ui-monospace,monospace;
transition:background .22s ease,color .22s ease}
.variant-tag{background:var(--ac2);color:#fff}
.page{max-width:1020px;margin:0 auto;padding:2rem 1.6rem 5rem;position:relative}
/* ── theme button ── */
.theme-btn{position:fixed;top:14px;right:14px;z-index:80;cursor:pointer;
display:flex;align-items:center;gap:.45rem;
font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;
background:var(--surf);color:var(--fg);border:2px solid var(--rule);
padding:.55rem .8rem;box-shadow:3px 3px 0 var(--shadow)}
.theme-btn:hover{background:var(--ac2);color:#fff;border-color:var(--ac2)}
.theme-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.tb-ico{width:11px;height:11px;border-radius:50%;flex:none;
background:radial-gradient(circle at 32% 32%,transparent 52%,currentColor 53%);
box-shadow:inset 0 0 0 1.5px currentColor}
.tb-txt::before{content:"→ "}
[data-theme="dark"] .theme-btn{box-shadow:none;border-color:var(--ac1);color:var(--ac1)}
[data-theme="dark"] .theme-btn:hover{background:var(--ac1);color:var(--onac)}
[data-theme="dark"] .tb-ico{background:currentColor}
/* ── hero ── */
.hero{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:2.6rem;align-items:center}
.hero-text{min-width:0}
.hero h1{font-family:"Archivo Black",Helvetica,sans-serif;
font-size:clamp(1.7rem,4.6vw,2.7rem);letter-spacing:-.03em;line-height:1.02;
margin:.35rem 0 .3rem;overflow-wrap:break-word}
.eyebrow{font:500 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.16em;
text-transform:uppercase;color:var(--ac2);margin-bottom:.55rem}
.meta,.filepath{color:var(--dim);font-size:12px;line-height:1.55}
.lede{max-width:58ch;margin-top:.4rem}
.lede p{margin:0 0 .7em;padding-left:1.1rem;position:relative}
.lede p::before{content:"+";position:absolute;left:0;color:var(--ac2)}
.lede a{color:var(--ac1);text-decoration:underline;text-underline-offset:3px}
.statline{margin-top:.85rem;font-size:12.5px;color:var(--dim)}
.add{color:var(--ac2)}.del{color:var(--ac1)}
/* ── prompt vs commit line: one shows per theme ── */
.prompt{color:var(--dim);font-size:12.5px;margin:1.3rem 0 .4rem;display:none}
.usr{color:var(--ac2)}.pth{color:var(--ac1)}
.cur{color:var(--ac2);animation:bl 1.1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.branch{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.3rem}
.star{color:var(--ac2);font-size:17px;line-height:1}
.hash{color:var(--ac2);font-size:12.5px;font-weight:500}
.ref{color:var(--ac1);font-size:12px}
/* ── keywords, links ── */
.kw{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:1rem}
.kw li{font-size:11px;padding:.24rem .5rem;border:1.5px solid var(--rule);color:var(--dim)}
.links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.links a{font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.07em;text-transform:uppercase;
text-decoration:none;color:var(--fg);background:var(--surf);
border:2px solid var(--rule);padding:.55rem .9rem;box-shadow:3px 3px 0 var(--shadow)}
.links a:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.links a.primary{background:var(--ac1b);color:var(--onac);border-color:var(--rule)}
[data-theme="dark"] .links a{box-shadow:none}
[data-theme="dark"] .links a.primary{color:var(--onac)}
/* ── portrait ── */
.hero-media{margin:0;position:relative}
.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;
border:4px solid var(--rule);box-shadow:10px 10px 0 var(--ac1b)}
.hero-media figcaption{font:700 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.1em;
text-transform:uppercase;color:var(--onac);background:var(--ac1b);
text-align:center;margin-top:.7rem;padding:.32rem 0;font-size:11px}
[data-theme="dark"] .portrait{border:1px solid var(--ac2);box-shadow:none;
filter:grayscale(1) contrast(1.02) sepia(.28) hue-rotate(168deg) saturate(1.15)}
[data-theme="dark"] .hero-media:hover .portrait{filter:none}
[data-theme="dark"] .hero-media figcaption{background:none;color:var(--ac1)}
[data-theme="dark"] .hero-media::before{content:"$ display photo.png";position:absolute;
top:-1.45rem;left:0;font-size:11px;color:var(--dim)}
/* ── sections ── */
.sec{margin-top:1.7rem;position:relative;padding-left:2.2rem}
.sechead{margin-bottom:.2rem}
.sechead h2{display:inline;font-family:"Archivo Black",Helvetica,sans-serif;
font-size:1.05rem;letter-spacing:-.01em;text-transform:uppercase;color:var(--ac1)}
.sechead-wrap .prompt{margin:0 0 .35rem}
.items{display:grid;gap:.55rem;margin-top:.8rem}
.item{background:var(--surf);border:var(--card-bd) solid var(--rule);
border-left:4px solid var(--ac2);padding:.8rem 1rem;box-shadow:var(--card-sh)}
.item h3{font-size:13.5px;font-weight:700;margin-bottom:.12rem}
.item h3::before{content:"+ ";color:var(--ac2)}
.skills .item h3::before{content:""}
.item .org{color:var(--ac1);font-size:12.5px}
.item .venue,.item .authors,.item .note{color:var(--dim);font-size:12.5px}
.item .desc,.item p{font-size:13px}
.when{color:var(--ac2);font-size:11.5px;font-weight:500}
.exp .item,.acad .item,.edu .item,.awards .item,.news .item{display:grid;
grid-template-columns:10rem 1fr;gap:1rem}
.news time{color:var(--ac2);font-size:11.5px;font-weight:500}
.news-body p{margin:0;font-size:13px}
.badge{display:inline-block;margin-top:.32rem;font-size:10.5px;letter-spacing:.07em;
text-transform:uppercase;border:1px solid var(--ac2);color:var(--ac2);padding:.16rem .42rem}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.42rem}
.tags span{font-size:10.5px;color:var(--dim);border:1px solid var(--rule);padding:.14rem .38rem}
.research .items,.skills .items{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ico{color:var(--ac1);font-size:15px}
.skills .item h3{color:var(--ac2)}
.foot{margin-top:2.4rem;padding-left:2.2rem;position:relative;color:var(--dim);font-size:12px}
/* ══════════ LIGHT: commit rail (c11) ══════════ */
/* anchored to , so the rail begins at the first section (Research)
and never runs alongside the name or summary */
main{position:relative;padding-top:1.2rem;
--rail-pad:1.2rem; /* main's own padding-top */
--rail-node:.4rem; /* .sec::before top offset */
--rail-r:5.5px} /* half the node's 11px height */
.sec:first-child{margin-top:0}
/* begins at the centre of the Research node, so the line emanates from the dot */
main::before{content:"";position:absolute;left:5.5px;
top:calc(var(--rail-pad) + var(--rail-node) + var(--rail-r));bottom:0;
width:2px;background:var(--rule);opacity:.28}
.sec::before{content:"";position:absolute;left:1px;top:.4rem;width:11px;height:11px;
border-radius:50%;background:var(--bg);border:2px solid var(--ac2)}
/* ══════════ DARK: prompt stream (c06) ══════════ */
[data-theme="dark"] .prompt{display:block}
[data-theme="dark"] .branch,
[data-theme="dark"] .filepath,
[data-theme="dark"] .meta{display:none}
[data-theme="dark"] main::before{display:none}
[data-theme="dark"] .sec::before{display:none}
[data-theme="dark"] .sec,[data-theme="dark"] .foot{padding-left:0}
[data-theme="dark"] .sechead h2{background:var(--ac1);color:var(--onslab);
padding:.28rem .6rem;display:inline-block}
[data-theme="dark"] .item{background:none;border:none;border-left:2px solid var(--rule);
padding:.15rem 0 .15rem 1rem}
[data-theme="dark"] .when,[data-theme="dark"] .news time{background:var(--ac2);
color:var(--onac);display:inline-block;padding:.1rem .4rem;font-weight:700}
[data-theme="dark"] .badge{background:var(--ac1);color:var(--onslab);border:none;font-weight:700}
[data-theme="dark"] .tags span{background:var(--ac1);color:var(--onslab);border:none;font-weight:700}
[data-theme="dark"] .kw li{border-color:var(--rule)}
[data-theme="dark"] .del{color:var(--dim)}
.pub-sub{margin:1.2rem 0 .5rem;font:500 10.5px/1 var(--f-mono,"JetBrains Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* per-group bug lists */
.bug-group{width:100%}
.bug-group summary{list-style:none;cursor:pointer;display:grid;
grid-template-columns:20px minmax(0,1fr) auto auto;gap:.7rem;align-items:center}
.bug-group summary::-webkit-details-marker{display:none}
.bug-group summary:hover .bug-main h4{color:var(--ac2)}
.bug-caret.sm{width:7px;height:7px;margin-left:.3rem}
.bug-group[open] .bug-caret.sm{transform:rotate(-135deg) translateY(-2px)}
.bug-links{margin:.7rem 0 .2rem;padding:0 0 0 2.6rem;display:grid;gap:.28rem;
max-height:19rem;overflow-y:auto;list-style:none}
.bug-links li{display:grid;grid-template-columns:5.6rem 6.2rem 1fr;gap:.6rem;
align-items:baseline;font-size:11.5px;line-height:1.45}
.bug-links a{color:var(--ac2);font-weight:500;text-decoration:none}
.bug-links a:hover{text-decoration:underline}
.bl-repo{color:var(--dim);font-size:10.5px}
.bl-title{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
.bug-links{padding-left:.8rem}
.bug-links li{grid-template-columns:1fr;gap:0}
.bl-title{white-space:normal}
}
/* ══════════ current research ══════════ */
.projects{gap:.8rem}
.proj{border-left-width:4px}
.proj-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.15rem}
.proj-head h3{flex:1;min-width:16rem;font-size:14.5px;line-height:1.35}
.proj .desc{margin-top:.45rem}
.proj .desc p{margin:0}
.proj .desc strong{color:var(--ac2);font-weight:700}
.metrics{margin-top:.6rem}
.metrics span{font-weight:700;color:var(--ac2);border-color:var(--ac2);
background:color-mix(in srgb, var(--ac2) 9%, transparent)}
[data-theme="dark"] .metrics span{background:color-mix(in srgb, var(--ac2) 15%, transparent);
color:var(--ac2)}
/* ══════════ bug ledger ══════════ */
.bugs{margin-top:1.1rem;border:2px solid var(--ac2);background:var(--surf);
max-width:100%;box-shadow:var(--card-sh)}
.bugs summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
gap:.55rem;flex-wrap:wrap;padding:.75rem .9rem;
transition:background-color .18s ease}
.bugs summary::-webkit-details-marker{display:none}
.bugs summary:hover{background:color-mix(in srgb, var(--ac2) 10%, transparent)}
.bugs summary:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
.bug-n{font-family:"Archivo Black",Helvetica,sans-serif;font-size:1.6rem;
line-height:1;color:var(--ac2);letter-spacing:-.02em}
.bug-l{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.bug-note{flex:1 1 100%;font-size:12px;color:var(--dim)}
.bug-caret{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ac2);
border-bottom:2px solid var(--ac2);transform:rotate(45deg) translateY(-2px);
transition:transform .22s ease;align-self:center}
.bugs[open] .bug-caret{transform:rotate(-135deg) translateY(-2px)}
.bugs[open] summary{border-bottom:1px solid var(--rule)}
.bug-list{padding:.35rem 0;margin:0;animation:bug-in .22s ease}
@keyframes bug-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bug-row{display:block;padding:.5rem .9rem;--bc:var(--ac2)}
.bug-row + .bug-row{border-top:1px solid var(--rule)}
.bug-row:hover{background:color-mix(in srgb, var(--bc) 9%, transparent)}
.bug-ico{width:20px;height:20px;fill:var(--dim);transition:fill .18s ease}
.bug-row:hover .bug-ico{fill:color-mix(in srgb, var(--bc) 82%, #14181D)}
[data-theme="dark"] .bug-row:hover .bug-ico{fill:color-mix(in srgb, var(--bc) 64%, #E8EEF5)}
.bug-main{min-width:0}
.bug-main h4{margin:0;font-size:13.5px;font-weight:700;white-space:nowrap}
.bug-main h4 a{text-decoration:underline;text-underline-offset:2px}
.bug-main p{margin:0;font-size:11.5px;color:var(--dim);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.bug-c{font-family:"Archivo Black",Helvetica,sans-serif;font-size:1rem;color:var(--ac2)}
[data-tech="Clang / LLVM"]{--bc:#262D3A}
[data-tech="GCC"]{--bc:#A42E2B}
[data-tech="WebAssembly runtimes"]{--bc:#654FF0}
[data-tech="Deep learning libraries"]{--bc:#FF6F00}
@media (prefers-reduced-motion:reduce){.bug-list{animation:none}.bug-caret{transition:none}}
@media (max-width:820px){
.hero{display:block}
.hero-media{max-width:230px;margin:0 0 1.5rem}
.exp .item,.acad .item,.edu .item,.awards .item,.news .item{grid-template-columns:1fr;gap:.2rem}
main::before{display:none}
.sec::before{display:none}
main{padding-top:0}
.sec,.foot{padding-left:0}
.theme-btn{top:auto;bottom:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}