/* ============================================================================
   style.css — Abdur Rahman Sarker · "Console" direction
   One typeface, phosphor palette, everything on a character grid.
   Dark is the base; [data-theme="light"] is a light terminal profile.
   ========================================================================= */

:root{
  --bg:#07090b; --bg2:#0a0e11; --panel:#0c1114; --hi:#111a1d;
  --line:#16241c; --line2:#1f3529; --line3:#2c4a39;
  --fg:#b8c7be; --bright:#e8f5ec; --dim:#6b8a76; --faint:#46604f;
  --grn:#4ade80; --amb:#fbbf24; --cyn:#38bdf8; --ros:#fb7185; --vio:#a78bfa;
  --sel:rgba(74,222,128,.13);
  --sh:rgba(0,0,0,.6);

  /* ---- type scale — every size on the site comes from here ---- */
  --fs-xs:10px;      /* badges, chips, micro labels          */
  --fs-sm:11px;      /* meta lines, section labels, counters */
  --fs-md:11.5px;    /* secondary / dim supporting text      */
  --fs-base:12.4px;  /* body copy — the default              */
  --fs-lg:14px;      /* record titles                        */
  --fs-num:clamp(23px,3vw,32px);  /* metric-card numbers     */
  --fs-hero:clamp(25px,4.6vw,44px); /* the one hero headline */
  --ls-label:.12em;  /* letter-spacing for uppercase labels  */
  --lh-body:1.66;    /* body line-height                     */
  --lh-tight:1.4;    /* headings / compact rows              */

  /* ---- spacing scale ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:18px; --sp-5:30px;
  --bar-w:2px;       /* accent bar thickness */
  --bar-gap:14px;    /* text offset from the accent bar */
}
:root[data-theme="light"]{
  --bg:#f5f7f4; --bg2:#eef1ed; --panel:#ffffff; --hi:#e8ede8;
  --line:#d4ded6; --line2:#bccdc0; --line3:#9db3a4;
  --fg:#2c3e34; --bright:#0f1f16; --dim:#5b7566; --faint:#7d9487;
  --grn:#15803d; --amb:#a16207; --cyn:#0369a1; --ros:#be123c; --vio:#6d28d9;
  --sel:rgba(21,128,61,.10);
  --sh:rgba(20,40,30,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-variant-ligatures:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
:focus-visible{outline:1px solid var(--grn);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* faint scanline field — the only decoration on the page */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(120,180,145,.022) 3px 4px)}
:root[data-theme="light"] .ground{background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(20,60,40,.022) 3px 4px)}

/* accent resolver */
.a-grn{--ac:var(--grn)} .a-amb{--ac:var(--amb)} .a-cyn{--ac:var(--cyn)}
.a-ros{--ac:var(--ros)} .a-vio{--ac:var(--vio)}
.cyan{--ac:var(--cyn)} .violet{--ac:var(--vio)} .lime{--ac:var(--grn)}
.amber{--ac:var(--amb)} .rose{--ac:var(--ros)}
.a-lime{--ac:var(--grn)}

/* ============================================================ PRIMITIVES
   One accent bar, one section label, one spacing rhythm — shared by every
   page so Edu, Exp, Research, Projects, Skills, Certs, Blog and Gallery all
   read as the same system.                                                */

/* the accent bar: a 2px coloured stripe down the left of a block */
.bar{
  border-left:var(--bar-w) solid var(--ac,var(--line2));
  padding-left:var(--bar-gap);
  transition:background .12s,border-color .12s;
}
.bar:hover{background:var(--hi);border-left-color:var(--ac,var(--grn))}

/* section label — the uppercase caption above a group of records */
.sec-h{
  display:block;font-size:var(--fs-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--faint);line-height:var(--lh-tight);
  margin:0 0 var(--sp-2);
}
.sec-h.ac{color:var(--ac,var(--grn))}
.sec-h.rule{border-bottom:1px solid var(--line2);padding-bottom:var(--sp-1)}
.sec-h .n{color:var(--grn);font-weight:500}

/* group + sub-group rhythm */
.grp{margin-bottom:var(--sp-4)}
.grp:last-child{margin-bottom:0}
.sub{padding-left:var(--sp-3);border-left:1px dashed var(--line2);margin-bottom:var(--sp-3)}
.sub:last-child{margin-bottom:0}

/* body copy defaults, shared by every page */
.txt{margin:0;font-size:var(--fs-base);color:var(--dim);line-height:var(--lh-body)}
.txt b{color:var(--bright);font-weight:600}
.dimtx{font-size:var(--fs-md);color:var(--faint);line-height:var(--lh-body)}

/* the summary section that the SUMMARY sub-menu tab reveals */
.sumsec{margin-top:var(--sp-5)}
.sumsec:first-child{margin-top:0}

/* ============================================================ SHELL */
.layout{position:relative;z-index:1;display:flex;align-items:flex-start;padding-bottom:34px}

/* ---- left pane: session ---- */
.rail{
  position:fixed;left:0;top:0;bottom:28px;width:272px;z-index:40;
  padding:calc(14px + env(safe-area-inset-top,0px)) 14px 14px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--bg2);border-right:1px solid var(--line2);
  overflow-y:auto;overscroll-behavior:contain;
}
.rail::-webkit-scrollbar{width:0}
.pane-h{
  display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;overflow:hidden;
}
.pane-h::after{content:"";flex:1;height:1px;background:var(--line2)}

.shot{position:relative;border:1px solid var(--line2);background:var(--panel);padding:5px}
.shot img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 6%;filter:grayscale(.35) contrast(1.05)}
.shot::after{
  content:"";position:absolute;inset:5px;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,var(--panel));
}
.shot b{
  position:absolute;left:9px;bottom:8px;z-index:2;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grn);
}

.kv{display:flex;gap:9px;font-size:12px;line-height:1.6}
.kv i{font-style:normal;color:var(--faint);flex:0 0 42px;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;padding-top:2px}
.kv span{flex:1;min-width:0;color:var(--fg);overflow-wrap:anywhere}
.kv a:hover{color:var(--grn)}
.kv b{color:var(--bright);font-weight:600}

.stat{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line2);
  background:var(--hi);font-size:11px;color:var(--fg);
}
.dotp{width:6px;height:6px;border-radius:50%;background:var(--grn);flex:none;box-shadow:0 0 6px var(--grn)}
@keyframes bl50{50%{opacity:.25}}
.dotp{animation:bl50 2.4s ease-in-out infinite}

.lnks{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.lnk{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line2);
  font-size:11px;color:var(--dim);background:var(--panel);transition:color .12s,border-color .12s;
}
.lnk:hover{color:var(--grn);border-color:var(--line3)}
.lnk svg{width:12px;height:12px;flex:none}
.cvbtn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:9px;
  border:1px solid var(--grn);color:var(--grn);background:var(--sel);
  font-size:11.5px;font-weight:500;letter-spacing:.06em;transition:background .14s;
}
.cvbtn:hover{background:color-mix(in srgb,var(--grn) 20%,transparent);color:var(--bright)}
.cvbtn svg{width:13px;height:13px}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:10px;border-top:1px solid var(--line)}

/* ---- main ---- */
.main{flex:1;min-width:0;margin-left:272px;padding:0 clamp(14px,2.6vw,30px) 46px}

/* ---- buffer tabs ---- */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:stretch;gap:0;
  background:var(--bg);border-bottom:1px solid var(--line2);margin-bottom:20px;
}
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  display:flex;align-items:center;gap:6px;padding:10px 13px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  border-right:1px solid var(--line);border-bottom:2px solid transparent;transition:color .12s,background .12s;
}
.tabs a em{font-style:normal;color:var(--line3);font-size:10px}
.tabs a:hover{color:var(--fg);background:var(--hi)}
.tabs a.on{color:var(--grn);border-bottom-color:var(--grn);background:var(--sel)}
.tabs a.on em{color:var(--grn);opacity:.7}
.tbtn{
  flex:none;padding:0 12px;display:flex;align-items:center;gap:7px;border-left:1px solid var(--line);
  font-size:11px;color:var(--faint);transition:color .12s}
.tbtn:hover{color:var(--grn)}
.tbtn svg{width:14px;height:14px;stroke:currentColor}
.tbtn kbd{border:1px solid var(--line2);padding:1px 5px;font-size:10px;color:var(--dim)}
:root[data-theme="light"] .i-moon{display:none}
:root:not([data-theme="light"]) .i-sun{display:none}

/* ============================================================ OUTPUT */
.page{animation:fade .24s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.cmd{display:flex;gap:9px;align-items:baseline;margin:var(--sp-5) 0 var(--sp-2);flex-wrap:wrap;font-size:var(--fs-base)}
.cmd:first-child{margin-top:var(--sp-1)}
.cmd .p{color:var(--grn);font-weight:600}
.cmd .d{color:var(--cyn)}
.cmd .c{color:var(--bright);font-weight:500}
.cmd .n{margin-left:auto;font-size:var(--fs-sm);color:var(--faint);letter-spacing:var(--ls-label);text-transform:uppercase}
.out{padding-left:22px;border-left:1px solid var(--line);margin-bottom:6px;font-size:var(--fs-base);line-height:var(--lh-body)}
@media (max-width:700px){ .out{padding-left:12px} }

.hero-name{
  font-size:var(--fs-hero);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  color:var(--bright);margin:2px 0 6px;text-transform:uppercase;
}
.hero-sub{color:var(--dim);font-size:var(--fs-base);margin:0 0 var(--sp-1);line-height:var(--lh-body)}
.hero-sub b{color:var(--grn);font-weight:500}
.para{max-width:78ch;color:var(--fg);margin:0 0 var(--sp-2);font-size:var(--fs-base);line-height:var(--lh-body)}
.para b{color:var(--bright);font-weight:600}
.para .hl{color:var(--grn)}
.dimtx{color:var(--faint)}

.cur{display:inline-block;width:8px;height:15px;background:var(--grn);vertical-align:-3px;animation:blk 1.05s steps(2) infinite}
@keyframes blk{50%{opacity:0}}

/* ---- record table (the workhorse) ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base);line-height:var(--lh-body)}
.tbl th{
  text-align:left;font-weight:500;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:0 var(--sp-3) 7px 0;border-bottom:1px solid var(--line2);white-space:nowrap;
}
.tbl td{padding:7px var(--sp-3) 7px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--hi)}
.tbl .k{color:var(--faint);white-space:nowrap;font-size:var(--fs-md)}
.tbl .v{color:var(--bright)}
.tbl .r{text-align:right;white-space:nowrap;color:var(--ac,var(--grn));font-size:var(--fs-md)}
.tbl .w{width:100%}
.wrapx{overflow-x:auto}

/* ---- record block ---- */
.rec{
  border-left:var(--bar-w) solid var(--ac,var(--line2));
  padding:11px 0 11px var(--bar-gap);margin-bottom:2px;
  transition:background .12s,border-color .12s;
}
.rec:hover{background:var(--hi);border-left-color:var(--ac,var(--grn))}
.rec h4{font-size:var(--fs-lg);font-weight:600;color:var(--bright);margin:3px 0 var(--sp-1);line-height:var(--lh-tight);letter-spacing:-.01em}
.rec .meta{font-size:var(--fs-sm);color:var(--faint);letter-spacing:.06em;text-transform:uppercase;line-height:var(--lh-tight)}
.rec .body{font-size:var(--fs-base);color:var(--dim);margin:0;line-height:var(--lh-body)}
.rec .body mark{background:none;color:var(--bright);font-weight:600}
.rec ul{margin:var(--sp-2) 0 0;padding-left:15px;display:flex;flex-direction:column;gap:var(--sp-1)}
.rec li{font-size:var(--fs-base);color:var(--dim);line-height:var(--lh-body)}
.rec li::marker{color:var(--ac,var(--grn))}

.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.bdg{font-size:var(--fs-xs);padding:3px 7px;border:1px solid var(--line2);color:var(--dim);background:var(--panel);line-height:var(--lh-tight)}
.bdg.on{color:var(--ac,var(--grn));border-color:color-mix(in srgb,var(--ac,var(--grn)) 45%,transparent)}
.tagn{color:var(--ac,var(--grn))}

.lnkout{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-2);font-size:var(--fs-md);color:var(--cyn);
  border-bottom:1px dashed color-mix(in srgb,var(--cyn) 45%,transparent);padding-bottom:1px;overflow-wrap:anywhere;
}
.lnkout:hover{color:var(--bright);border-bottom-style:solid}
.lnkout svg{width:11px;height:11px;flex:none}

/* ---- ascii meter ---- */
/* meters carry the accent bar too, so Skills matches every other page */
.meter{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  border-left:var(--bar-w) solid var(--ac,var(--line2));
  padding:var(--sp-2) 0 var(--sp-2) var(--bar-gap);margin-bottom:2px;
  transition:background .12s,border-color .12s;
}
.meter:hover{background:var(--hi);border-left-color:var(--ac,var(--grn))}
.meter .lb{flex:0 0 auto;min-width:184px;color:var(--bright);font-size:var(--fs-base)}
.meter .br{color:var(--ac,var(--grn));letter-spacing:-.5px;font-size:var(--fs-base);white-space:nowrap}
.meter .pc{color:var(--faint);font-size:var(--fs-md);min-width:38px;text-align:right}
.meter .it{flex:1;min-width:150px;color:var(--faint);font-size:var(--fs-md);text-align:right;overflow-wrap:anywhere}

/* ---- tree ---- */
.tree{font-size:var(--fs-base)}
/* each certification group is an accent-bar block, same as .rec */
.tnode{
  border-left:var(--bar-w) solid var(--ac,var(--line2));
  padding:var(--sp-1) 0 var(--sp-2) var(--bar-gap);margin-bottom:2px;
  transition:background .12s,border-color .12s;
}
.tnode:hover{background:var(--hi);border-left-color:var(--ac,var(--grn))}
.thead{display:flex;align-items:center;gap:10px;width:100%;padding:var(--sp-2) 0 var(--sp-1)}
.thead .gl{color:var(--line3);flex:none}
.thead .nm{color:var(--bright);font-weight:600;flex:1;min-width:0;font-size:var(--fs-base);line-height:var(--lh-tight)}
.thead .ct{color:var(--faint);font-size:var(--fs-sm);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.tpad{padding:0;display:flex;flex-direction:column}
.crow{display:flex;gap:var(--bar-gap);padding:6px 0;border-top:1px solid var(--line);align-items:baseline}
.crow .cv{flex:0 0 188px;color:var(--bright);font-size:var(--fs-base)}
.crow .cc{flex:1;color:var(--dim);font-size:var(--fs-base);line-height:var(--lh-body);min-width:170px}
.crow .cy{flex:none;color:var(--ac,var(--grn));font-size:var(--fs-sm);white-space:nowrap}

/* ---- filters ---- */
/* sub-menu (filter) bar — identical on every page that has one */
.filters{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);
  border-bottom:1px dashed var(--line);
}
.filters.plain{border-bottom:none;padding-bottom:0;margin-bottom:var(--sp-3)}
.filt{
  padding:5px 11px;border:1px solid var(--line2);
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;line-height:var(--lh-tight);
  color:var(--dim);background:var(--panel);transition:all .12s;
}
.filt:hover{color:var(--fg);border-color:var(--line3)}
.filt.on{color:var(--bg);background:var(--grn);border-color:var(--grn)}
:root[data-theme="light"] .filt.on{color:#fff}
.filt span{opacity:.7;font-size:var(--fs-xs);margin-left:var(--sp-1)}
/* the SUMMARY tab sits apart from the section tabs */
.filt.sum{margin-left:auto;border-style:dashed;color:var(--ac,var(--grn));border-color:color-mix(in srgb,var(--grn) 45%,transparent)}
.filt.sum:hover{color:var(--bright);border-style:solid}
.filt.sum.on{color:var(--bg);background:var(--grn);border-style:solid}
:root[data-theme="light"] .filt.sum.on{color:#fff}
@media (max-width:820px){ .filt.sum{margin-left:0} }

/* ---- grids ---- */
.gr{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.auto{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* metric card — also carries the accent bar on its left edge */
.box{
  background:var(--panel);padding:13px var(--bar-gap);
  border:1px solid var(--line2);border-left:var(--bar-w) solid var(--ac,var(--line2));
  display:flex;flex-direction:column;gap:7px;transition:border-color .14s,background .12s;
}
.box:hover{border-color:var(--ac,var(--line3));border-left-color:var(--ac,var(--grn));background:var(--hi)}
.box .bh{font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:7px;line-height:var(--lh-tight)}
.box .bh svg{width:12px;height:12px;stroke:var(--ac,var(--grn));flex:none}
.box .bn{font-size:var(--fs-num);font-weight:700;color:var(--bright);letter-spacing:-.03em;line-height:1}
.box .bn sup{font-size:var(--fs-sm);color:var(--ac,var(--grn));vertical-align:super;margin-left:3px;letter-spacing:0}
.box p{margin:0;font-size:var(--fs-base);color:var(--dim);line-height:var(--lh-body)}
.box p b{color:var(--bright);font-weight:600}
.box .rname{font-size:var(--fs-lg);color:var(--bright);font-weight:600;line-height:var(--lh-tight)}

/* ---- media slots ---- */
.slot{position:relative;aspect-ratio:16/9;border:1px solid var(--line2);background:var(--bg2);overflow:hidden;display:grid;place-items:center}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(.5)}
:root[data-theme="light"] .slot img{opacity:.55;mix-blend-mode:multiply}
.slot .ph{position:relative;z-index:2;font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.slot.tall{aspect-ratio:3/4} .slot.mid{aspect-ratio:4/3} .slot.short{aspect-ratio:16/10}
.masonry{columns:3;column-gap:var(--sp-3)}
/* gallery cards carry the accent bar on their left edge */
.mitem{
  break-inside:avoid;margin-bottom:var(--sp-3);background:var(--panel);
  border:1px solid var(--line2);border-left:var(--bar-w) solid var(--ac,var(--line2));
  transition:border-color .14s,background .12s;
}
.mitem:hover{border-color:var(--ac,var(--line3));border-left-color:var(--ac,var(--grn));background:var(--hi)}
.mcap{padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.mcap b{font-size:var(--fs-base);color:var(--bright);font-weight:600;line-height:var(--lh-tight)}
.mcap span{font-size:var(--fs-sm);color:var(--faint);line-height:var(--lh-tight)}

/* ---- notice ---- */
.note{display:flex;gap:11px;padding:11px 13px;border:1px dashed var(--line3);background:var(--panel);margin-bottom:14px}
.note .i{color:var(--amb);flex:none}
.note p{margin:0;font-size:var(--fs-base);color:var(--dim);line-height:var(--lh-body)}
.note b{color:var(--bright)}
.note code{color:var(--cyn)}

/* ============================================================ SEARCH */
.pal{position:fixed;inset:0;z-index:90;display:none;padding:9vh 16px 16px;justify-content:center;background:rgba(0,0,0,.6)}
.pal.on{display:flex}
:root[data-theme="light"] .pal{background:rgba(40,60,50,.3)}
.palbox{width:min(680px,100%);max-height:74vh;display:flex;flex-direction:column;border:1px solid var(--line3);background:var(--bg2);box-shadow:0 26px 70px var(--sh)}
.palin{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.palin span{color:var(--grn);font-weight:600}
.palin input{flex:1;background:none;border:none;outline:none;color:var(--bright);font:inherit;font-size:14px}
.palin input::placeholder{color:var(--faint)}
.palin kbd{border:1px solid var(--line2);padding:2px 6px;font-size:var(--fs-xs);color:var(--faint)}
.palout{overflow-y:auto;padding:6px}
.pres{display:block;width:100%;padding:8px 10px;border-left:2px solid transparent}
.pres:hover,.pres.sel{background:var(--sel);border-left-color:var(--grn)}
.pres b{display:block;font-size:var(--fs-base);color:var(--bright);font-weight:500;line-height:var(--lh-tight)}
.pres span{display:block;font-size:var(--fs-sm);color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.palempty{padding:22px 14px;color:var(--faint);font-size:var(--fs-base);text-align:center}

/* ---- help sheet ---- */
.help{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.66)}
.help.on{display:flex}
.helpbox{width:min(520px,100%);border:1px solid var(--line3);background:var(--bg2);padding:20px 22px;box-shadow:0 26px 70px var(--sh)}
.helpbox h3{margin:0 0 var(--bar-gap);font-size:var(--fs-base);letter-spacing:.16em;text-transform:uppercase;color:var(--grn);font-weight:600}
.hrow{display:flex;gap:var(--bar-gap);align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.hrow:last-child{border-bottom:none}
.hrow kbd{flex:0 0 96px;color:var(--amb);font-size:var(--fs-base)}
.hrow span{color:var(--dim)}

/* ============================================================ STATUS BAR */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:28px;
  display:flex;align-items:center;gap:0;
  background:var(--bg2);border-top:1px solid var(--line2);
  font-size:var(--fs-sm);padding-bottom:env(safe-area-inset-bottom,0px);
}
.sb-mode{background:var(--grn);color:var(--bg);padding:0 11px;height:100%;display:flex;align-items:center;font-weight:600;letter-spacing:.1em;flex:none}
:root[data-theme="light"] .sb-mode{color:#fff}
.sb-file{padding:0 11px;color:var(--fg);border-right:1px solid var(--line);height:100%;display:flex;align-items:center;flex:none}
.sb-keys{display:flex;gap:13px;padding:0 11px;color:var(--faint);overflow:hidden;white-space:nowrap;flex:1}
.sb-keys b{color:var(--amb);font-weight:500}
.sb-pos{padding:0 11px;color:var(--faint);border-left:1px solid var(--line);height:100%;display:flex;align-items:center;flex:none}
@media (max-width:700px){ .sb-keys{display:none} }

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,10px);z-index:80;padding:9px 14px;
  border:1px solid var(--line3);background:var(--bg2);font-size:var(--fs-md);color:var(--fg);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================ RESPONSIVE */
@media (max-width:1200px){ .g4,.g3{grid-template-columns:repeat(2,1fr)} .masonry{columns:2} }
@media (max-width:1020px){
  .rail{position:static;width:auto;bottom:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
    gap:12px;border-right:none;border-bottom:1px solid var(--line2);
    padding:calc(12px + env(safe-area-inset-top,0px)) clamp(14px,2.6vw,30px) 12px}
  .layout{flex-direction:column}
  .main{margin-left:0;width:100%}
  .shot{flex:0 0 78px}
  .rail-id{flex:1;min-width:210px;display:flex;flex-direction:column;gap:7px}
  .rail-blk{flex:1;min-width:190px;display:flex;flex-direction:column;gap:7px}
  .rail-foot{margin-top:0;border-top:none;padding-top:0;flex:0 0 auto;width:auto}
  .pane-h{display:none}
}
@media (max-width:820px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .crow{flex-direction:column;gap:3px}
  .crow .cv{flex:none}
  .meter .lb{min-width:0;flex:1 0 100%}
  .meter .it{text-align:left;flex:1 0 100%}
}
@media (max-width:700px){ .masonry{columns:1} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cur{opacity:1}
}
@media print{ .rail,.topbar,.statusbar,.ground,.pal,.help{display:none!important} .main{margin-left:0} body{background:#fff;color:#000} }

/* ============================================================ TYPEWRITER
   A ghost copy of the full text reserves the exact final height, and the
   typed text is laid over it — so the page never reflows while typing.  */
.tw{position:relative;display:block}
.tw-ghost{visibility:hidden}
.tw-live{position:absolute;left:0;top:0;right:0}
.tw-live::after{
  content:"";display:inline-block;width:.5em;height:1em;margin-left:3px;
  vertical-align:-.15em;background:var(--grn,var(--cyan,currentColor));
  animation:twblink 1.05s steps(2) infinite;
}
.tw.done .tw-live::after{display:none}
@keyframes twblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .tw-live::after{animation:none} }

/* ============================================================ WHOAMI VIZ
   Name block on the left, a live research-graph readout on the right.  */
.who{display:flex;gap:clamp(16px,3vw,34px);align-items:center}
.who-txt{flex:1;min-width:0}
.who-viz{
  flex:0 0 clamp(250px,33%,400px);position:relative;aspect-ratio:16/10;
  border:1px solid var(--line2);background:var(--bg2);overflow:hidden;
}
.who-viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.who-viz .vz-top,.who-viz .vz-bot{
  position:absolute;left:9px;right:9px;display:flex;justify-content:space-between;gap:8px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);pointer-events:none;z-index:2;
}
.who-viz .vz-top{top:8px}
.who-viz .vz-bot{bottom:8px}
.who-viz .vz-top b{color:var(--grn);font-weight:500}
.who-viz::before,.who-viz::after{
  content:"";position:absolute;width:10px;height:10px;z-index:3;pointer-events:none;
  border-color:var(--line3);border-style:solid;
}
.who-viz::before{left:4px;top:4px;border-width:1px 0 0 1px}
.who-viz::after{right:4px;bottom:4px;border-width:0 1px 1px 0}
@media (max-width:1000px){
  .who{flex-direction:column;align-items:stretch}
  .who-viz{flex:none;width:100%;aspect-ratio:16/7}
}

/* ---- home: research-graph canvas overlay ---- */
.who{position:relative}
.who-canvas{
  position:absolute;top:0;right:10px;width:60%;max-width:850px;height:460px;
  z-index:0;pointer-events:none;
}
.who-canvas canvas{width:100%;height:100%;display:block}
.who-canvas .vz-top,.who-canvas .vz-bot{
  position:absolute;left:20px;width:calc(100% - 40px);display:flex;justify-content:space-between;
  font-size:var(--fs-sm);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--faint);font-weight:600;line-height:var(--lh-tight);
}
.who-canvas .vz-top{top:20px}
.who-canvas .vz-bot{bottom:20px}
.who-canvas .vz-top b{color:var(--grn);font-weight:600}
.who-canvas .vz-live{color:var(--grn)}
@media (max-width:1000px){ .who-canvas{display:none} }

/* ---- home: auto-sliding metric cards ---- */
.slider-wrap{
  border:1px dashed var(--line);background:var(--panel);
  padding:var(--sp-3);margin-top:var(--sp-2);
}
.slider{display:flex;gap:var(--sp-3);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;user-select:none;cursor:grab}
.slider::-webkit-scrollbar{display:none}
.slider .slide{min-width:260px;flex-shrink:0;height:130px;justify-content:center;pointer-events:none}
.slider-hint{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  margin-top:var(--sp-3);font-size:var(--fs-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--faint);line-height:var(--lh-tight);
}
.slider-hint svg{width:12px;height:12px;stroke:currentColor;flex:none}

/* ============================================================ SIDEBAR BLOCKS */
.mini-rows{display:flex;flex-direction:column;gap:4px}
.mrow{display:flex;align-items:baseline;gap:var(--sp-2);font-size:var(--fs-md)}
.mrow i{font-style:normal;color:var(--faint);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.11em;flex:1;min-width:0}
.mrow b{color:var(--bright);font-weight:600;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips span{font-size:var(--fs-xs);padding:3px 6px;border:1px solid var(--line2);color:var(--dim);background:var(--panel)}
.chips.mem span{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 35%,transparent)}
#clk{font-variant-numeric:tabular-nums}