/* ── Custom cursor ───────────────────────────────────── */
body,body *{cursor:none !important}
.cursor-dot{position:fixed;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--signal);z-index:9999;pointer-events:none;
  transition:width .15s ease,height .15s ease,margin .15s ease,background .15s ease,border-color .15s ease,opacity .15s ease;
  opacity:0;border:1px solid var(--bg)}
.cursor-dot.on{opacity:1}
.cursor-dot.is-hover{width:15px;height:15px;margin:-15px 0 0 -15px;background:var(--signal);border:1px solid var(--bg)}
.cursor-dot.is-down{width:4px;height:4px;margin:-2px 0 0 -2px}

/* ── Design tokens ─────────────────────────────────────── */
:root{
  --bg:#080808; --panel:#0e0e0d; --fg:#f1f1ed; --fg2:#949494; --fg3:#5c5c5a;
  --line:#343434; --rule:#1f1f1e;
  --signal:#e8ff00;
  --c-person:#a7d8e0; --c-company:#e8ff00; --c-gov:#4f9dff; --c-country:#b48cff;
  --c-fund:#ff5c2b; --c-weapon:#ff00c8; --c-contract:#e2e2da; --c-org:#6fd38a;
  --c-agg:#8b8b86; --c-elec:#2b3dff;
  --paper:#ecebe4; --ink:#141412; --ink2:#9b988e;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
html[data-theme="paper"]{
  --bg:#f5f2ea; --panel:#e8e4dc; --fg:#0a0a08; --fg2:#847c68; --fg3:#797467;
  --line:#46423c; --rule:#dfd6c4;
  --signal:#c8102e;
  --c-person:#1a5a68; --c-company:#c8102e; --c-gov:#1a4a8e; --c-country:#5a2f90;
  --c-fund:#b83010; --c-weapon:#800970; --c-contract:#86867c; --c-org:#1a6a3a;
  --c-agg:#5d5d55; --c-elec:#2b3dff;
  color-scheme:light;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box;scrollbar-width:none}
*::-webkit-scrollbar{display:none}
::selection{background:var(--fg);color:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.tiny{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}

/* ── App shell ─────────────────────────────────────────── */
#app{position:fixed;inset:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
canvas#net{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
canvas#net.hovering{cursor:pointer}

/* ── Header ────────────────────────────────────────────── */
header{position:absolute;left:0;right:0;top:env(safe-area-inset-top,0px);display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:16px;padding:14px 18px;pointer-events:none;z-index:8}
header>*{pointer-events:auto}
.mark{display:flex;flex-direction:column;gap:3px}
.mark b{font-weight:500;font-size:15px;letter-spacing:.08em}
.mark b i{font-style:normal;color:var(--signal)}
.searchwrap{justify-self:center;width:min(440px,100%);position:relative}
#q{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--fg);font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:6px 0 6px 18px;text-transform:uppercase}
#q::placeholder{color:var(--fg3)}
.searchwrap:before{content:"/";position:absolute;left:0;top:6px;font-family:var(--mono);font-size:12px;color:var(--signal)}
#results{position:absolute;top:34px;left:0;right:0;background:var(--panel);border:1px solid var(--rule);max-height:60vh;overflow:auto;padding:6px 0}
#results .grp{padding:8px 12px 2px}
#results button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:5px 12px;font-size:13px}
#results button:hover,#results button.on{background:#161615;color:var(--signal)}
#results button span:last-child{font-family:var(--mono);font-size:10px;color:var(--fg3)}
nav.top{display:flex;gap:18px;align-items:center}
nav.top button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg2)}
nav.top button[aria-pressed="true"],nav.top button:hover{color:var(--fg)}
nav.top button[aria-pressed="true"]:before{content:"● ";color:var(--signal)}

/* ── Left rail ─────────────────────────────────────────── */
#rail{position:absolute;left:0;top:78px;bottom:64px;width:224px;padding:10px 18px;overflow:auto;z-index:4;display:flex;flex-direction:column;gap:22px;scrollbar-width:none}
#rail h3{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--fg3);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between}
.opt{display:flex;align-items:center;gap:8px;width:100%;padding:3px 0;font-size:12.5px;color:var(--fg2);text-align:left}
.opt .dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;flex:none}
.opt[aria-pressed="true"]{color:var(--fg)}
.opt[aria-pressed="true"] .dot{background:currentColor}
.opt .n{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg3)}
.opt .sw{width:6px;height:6px;flex:none}
.typ{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:12.5px}
.typ .dotb{width:16px;height:16px;display:grid;place-items:center;flex:none}
.typ .dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor}
.typ .dotb[aria-pressed="true"] .dot{background:currentColor}
.typ .lab{color:var(--fg2);text-align:left;flex:1;padding:2px 4px;margin-left:-4px;border-radius:2px}
.typ .lab:hover{color:var(--fg)}
.typ .lab[aria-pressed="true"]{color:var(--bg);background:var(--hl,var(--fg))}
.typ .n{font-family:var(--mono);font-size:10px;color:var(--fg3)}
.railtabs{display:flex;border-bottom:1px solid var(--line);gap:18px;margin-bottom:-8px}
.railtabs button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--fg3);padding:4px 0 7px;border-bottom:1px solid transparent;margin-bottom:-1px}
.railtabs button[aria-pressed="true"]{color:var(--fg);border-color:var(--signal)}
.hint{font-size:11.5px;line-height:1.5;color:var(--fg3);margin:0}

/* ── Case files drawer: floppy disk shape ─────────────── */
.drawer{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 12px;display:flex;flex-direction:column;gap:10px}
.file{position:relative;height:64px;width:100%;cursor:pointer}
.file .tab{position:absolute;bottom:0;left:var(--off,20px);right:16px;height:56px;z-index:1;display:flex;align-items:center;gap:8px;padding:0 14px;overflow:hidden;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(0 0, 72% 0, 78% 10%, 100% 10%, 100% 100%, 0 100%);
  transition:transform .2s}
.file .tab .shutter{position:absolute;top:0;right:14px;width:40px;height:14px;background:rgba(255,255,255,.15);border-radius:3px 3px 0 0}
.file .tab .shutter::after{content:"";position:absolute;top:3px;left:6px;right:6px;height:2px;background:rgba(0,0,0,.2);border-radius:1px}
.file .tab b{font-family:var(--mono);font-weight:500;font-size:9px;flex-shrink:0;opacity:.6;min-width:0}
.file .tab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;letter-spacing:.03em}
/* .file:nth-child(odd) .tab{background:#1a1a1a;color:#c8c4bc} */
.file:nth-child(odd) .tab{background:var(--signal);color:#111}
.file:nth-child(even) .tab{background:var(--signal);color:#111}
.file:hover .tab{transform:translateY(-3px)}
.file[aria-pressed="true"] .tab{background:var(--signal);color:#111;transform:translateY(-3px)}
html[data-theme="paper"] .file:nth-child(odd) .tab{background:#c8102e;color:#fff}
html[data-theme="paper"] .file:nth-child(even) .tab{background:#c8102e;color:#fff}
html[data-theme="paper"] .file:hover .tab{background:#111;color:#fff}
html[data-theme="paper"] .file[aria-pressed="true"] .tab{background:#111;color:#fff}
.file[aria-pressed="true"] .tab b{opacity:1}
.drawerfoot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:10px 20px;background:#111;color:var(--signal);border:1px solid;border-color: var(--signal);border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,transform .2s}
.drawerfoot span{font-weight:500}
.drawerfoot i{font-style:normal;display:inline-block;transition:transform .3s}
.drawerfoot:hover{background:#d4e000;color: #111;transform:translateY(-1px)}
.drawerfoot:hover i{transform:rotate(-45deg)}
.seg{display:flex;gap:0;border:1px solid var(--rule)}
.seg button{flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:5px 0;color:var(--fg2)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
html[data-theme="paper"] .drawerfoot{background:#c8102e;color:#111}
html[data-theme="paper"] .drawerfoot:hover{background:#1a1a1a;color:#fff;transform:translateY(-1px)}
html[data-theme="paper"] .seg button[aria-pressed="true"]{color:#fff}

/* ── Right panel (dossier) ─────────────────────────────── */
#dossier{position:absolute;right:0;top:78px;bottom:64px;width:280px;padding:10px 18px;overflow:auto;z-index:4;display:flex;flex-direction:column;gap:18px;scrollbar-width:none}
#dossier h3{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--fg3);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between}
#dossier .stat{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:12.5px}
#dossier .stat b{font-weight:400;color:var(--fg)}
#dossier .stat span{font-family:var(--mono);font-size:10px;color:var(--fg3)}
#dossier .stat .val{font-family:var(--mono);font-size:14px;color:var(--signal)}
#dossier .bar{height:2px;background:var(--rule);margin:2px 0 6px}
#dossier .bar i{display:block;height:100%;background:var(--signal)}
#dossier .link{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12.5px;color:var(--fg2)}
#dossier .link:hover{color:var(--fg)}
#dossier .link span{font-family:var(--mono);font-size:10px;color:var(--fg3)}

/* ── Bottom strip ──────────────────────────────────────── */
#modes{position:absolute;left:0;right:0;bottom:0;height:64px;padding:0 18px;display:flex;align-items:center;gap:20px;z-index:6;border-top:1px solid var(--rule);background:var(--bg)}
#modes .grp{display:flex;gap:0;border:1px solid var(--rule)}
#modes .grp button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:6px 12px;color:var(--fg2)}
#modes .grp button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
#modes .spacer{flex:1}
#modes .coords{font-family:var(--mono);font-size:10px;color:var(--fg3);letter-spacing:.06em}
#modes .hint-keys{font-family:var(--mono);font-size:10px;color:var(--fg3)}
#modes .hint-keys b{color:var(--fg2);font-weight:400}

/* ── Detail overlay ────────────────────────────────────── */
#detail{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
#detail.open{display:flex}
#detail .card{position:relative;background:var(--panel);border:1px solid var(--line);padding:32px;max-width:520px;width:90%;max-height:80vh;overflow:auto}
#detail .card h2{font-size:24px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}
#detail .card .sub{font-family:var(--mono);font-size:11px;color:var(--fg3);margin-bottom:16px;letter-spacing:.06em}
#detail .card p{font-size:14px;line-height:1.6;color:var(--fg2);margin:0 0 12px}
#detail .card .meta{display:flex;gap:16px;margin:16px 0;font-family:var(--mono);font-size:11px;color:var(--fg3)}
#detail .card .meta b{color:var(--signal);font-weight:400}
#detail .card .close{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:11px;color:var(--fg3)}
#detail .card .close:hover{color:var(--fg)}
#detail .card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
#detail .card .tag{font-family:var(--mono);font-size:10px;padding:3px 8px;border:1px solid var(--line);border-radius:2px;color:var(--fg2)}

/* ── Case Files overlay ─────────────────────────────────── */
#casefiles{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;background-color:var(--bg);overflow:auto;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px),linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px}
#casefiles.open{display:flex}
.cf-header{padding:32px 32px 16px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.cf-header h2{font-size:32px;font-weight:300;margin:0;letter-spacing:-.02em;color:var(--fg)}
.cf-header .tiny{color:var(--fg3)}
.cf-back{position:absolute;top:32px;right:32px;font-family:var(--mono);font-size:11px;color:var(--fg2);background:none;border:1px solid var(--line);padding:8px 16px;cursor:pointer}
.cf-back:hover{color:var(--fg);border-color:var(--fg)}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;padding:32px;flex:1}
.cf-card{border:1px solid var(--line);padding:24px;cursor:pointer;transition:border-color .2s,background .2s;display:flex;flex-direction:column;gap:14px;background:var(--panel)}
.cf-card:hover{border-color:var(--fg);background:var(--bg)}
.cf-card .cf-num{font-family:var(--mono);font-size:10px;color:var(--fg3);letter-spacing:.08em}
.cf-card .cf-title{font-size:16px;font-weight:500;margin:0;line-height:1.3}
.cf-card .cf-desc{font-size:12px;color:var(--fg2);line-height:1.5;margin:0;flex:1}
.cf-card .cf-meta{display:flex;gap:12px;font-family:var(--mono);font-size:10px;color:var(--fg3);border-top:1px solid var(--rule);padding-top:10px}
.cf-card .cf-meta span{display:flex;align-items:center;gap:4px}
.cf-card .cf-tag{display:inline-block;font-family:var(--mono);font-size:9px;padding:2px 6px;border:1px solid var(--line);border-radius:2px;color:var(--fg2);margin-right:4px}

/* ── About & Contact overlays ───────────────────────────── */
#about,#contact{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;background-color:var(--bg);overflow:auto}
#about.open,#contact.open{display:flex}
.ov-header{padding:14px 32px 10px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px;position:relative}
.ov-header h2{font-size:32px;font-weight:300;margin:0;letter-spacing:-.02em;color:var(--fg)}
.ov-back{position:absolute;top:32px;right:32px;font-family:var(--mono);font-size:11px;color:var(--fg2);background:none;border:1px solid var(--line);padding:8px 16px;cursor:pointer}
.ov-back:hover{color:var(--fg);border-color:var(--fg)}
.ov-body{padding:14px 32px;flex:1;max-width:960px;width:100%;margin:0 auto}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.contact-card{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--fg);transition:border-color .2s,background .2s;background:var(--panel);border-radius:0}
.contact-card:hover{border-color:var(--signal);background:var(--bg)}
.contact-icon{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--signal)}
.contact-label{font-size:15px;font-weight:500}
.contact-handle{font-family:var(--mono);font-size:10px;color:var(--fg3);word-break:break-all}

/* ── Status screen layout ──────────────────────────── */
[hidden]{display:none !important}
.status-screen{display:grid;gap:10px;grid-template-columns:1fr 290px;grid-template-areas:"tabs header" "body side" "dialogue side"}
@media(max-width:760px){.status-screen{grid-template-columns:1fr;grid-template-areas:"tabs" "header" "body" "dialogue" "side"}}
.panel-frame{background:var(--panel);border:2px solid var(--line);padding:8px;display:flex;flex-direction:column;border-radius:0}
.panel-body{background:var(--bg);border:2px solid var(--line);padding:6px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--fg);flex:1;border-radius:0}
.side-plate{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--signal);text-align:center;padding:2px 0 0;margin-top:4px;border-top:1px solid var(--rule);text-transform:uppercase}
.screen-tabs{grid-area:tabs;display:flex;gap:6px;flex-wrap:wrap}
.screen-tabs button{flex:1;min-width:70px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg2);background:var(--bg);border:2px solid var(--line);padding:8px 4px;cursor:pointer;text-transform:uppercase;transition:all .2s}
.screen-tabs button:hover,.screen-tabs button[aria-current="true"]{color:var(--fg);border-color:var(--signal);background:var(--panel)}
.screen-header{grid-area:header;display:grid;grid-template-columns:2fr 1fr;gap:8px}
.screen-body{grid-area:body}
.screen-tab-label{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg);background:var(--panel);border:2px solid var(--line);padding:2px 14px;margin:-2px 0 8px;text-transform:uppercase}
.screen-content{background:var(--bg);border:2px solid var(--line);padding:10px}
.status-grid{display:grid;grid-template-columns:92px 1fr 100px;grid-template-areas:"p d e" "p c c" "b b b";gap:8px}
@media(max-width:600px){.status-grid{grid-template-columns:96px 1fr;grid-template-areas:"p d" "p c" "b b"}.emblem{display:none}}
.portrait-col{grid-area:p}
.portrait{display:block;width:92px;height:92px;padding:0;border:2px solid var(--line);cursor:pointer;background:var(--bg);border-radius:0;overflow:hidden;flex-shrink:0}
.portrait-name{margin-top:8px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fg);background:var(--panel);border:2px solid var(--line);padding:2px 0}
.portrait-bio{grid-area:b;margin:0;border:1px solid var(--line);background:var(--bg);font-size:10px;line-height:1.5;color:var(--fg2);padding:10px 12px}
.panel-box{border:2px solid var(--line);background:var(--bg);position:relative;padding:16px 10px 8px;border-radius:0}
.panel-box>i{position:absolute;left:0;right:0;top:0;height:16px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--signal);padding-left:6px;background:var(--panel);text-transform:uppercase}
.data-block{grid-area:d}
.data-block div,.data-row{display:flex;justify-content:space-between;gap:10px;text-transform:uppercase;font-size:10px}
.data-block span+span{color:var(--fg)}
.emblem{grid-area:e;border:2px solid var(--line);background:var(--bg);border-radius:0}
.emblem svg{width:100%;height:100%;display:block}
.condition-block{grid-area:c}
.condition-monitor{position:relative;height:68px;background:var(--bg);margin-top:4px;overflow:hidden;border:1px solid var(--line)}
.condition-monitor svg{position:absolute;inset:0;width:100%;height:100%}
.condition-monitor path{fill:none;stroke:#16a34a;stroke-width:3;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:beat 1.8s linear infinite}
@keyframes beat{to{stroke-dashoffset:-520}}
.condition-block b{position:absolute;right:8px;bottom:0;font-family:var(--mono);font-size:22px;color:#16a34a;background:var(--bg);padding:0 6px}
.dialogue{grid-area:dialogue}
.dialogue-box{background:var(--bg);border:2px solid var(--line);min-height:56px;padding:10px 14px;font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--fg);border-radius:0}
.dialogue-caret{animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.side-panel{grid-area:side;display:flex;flex-direction:column}
.side-panel .panel-body{flex:1;min-height:380px;padding:8px 0;overflow:auto}
.side-list{padding:0;margin:0;list-style:none}
.side-list li{width:100%;text-align:left;font-family:var(--mono);font-size:10px;color:var(--fg2);background:none;border:0;padding:3px 8px;cursor:pointer;text-transform:uppercase}
.side-list li:hover,.side-list li[aria-pressed="true"]{background:var(--panel);color:var(--fg)}
.side-list li span:last-child{color:var(--signal);margin-left:4px}
/* side panel only on SKILLS + CABINET tabs */
.status-screen.hide-side{grid-template-columns:1fr;grid-template-areas:"tabs" "header" "body" "dialogue"}
.status-screen.hide-side .side-panel{display:none}
/* item loadout cards (cabinet only) */
.item-images{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 8px}
.item-card{display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);padding:10px;cursor:pointer;transition:border-color .2s}
.item-card:hover{border-color:var(--accent, var(--signal))}
.item-card.picked{border-color:var(--accent, var(--signal));background:var(--bg)}
.item-img{flex:0 0 auto;height:68px;width:auto;max-width:80%;object-fit:contain;
  /* border that follows the PNG's transparent shape */
  filter:
    drop-shadow(0px 0 0 var(--accent)) drop-shadow(1px 0 0 var(--accent))
    drop-shadow(0 0px 0 var(--accent)) drop-shadow(0 0px 0 var(--accent))
    drop-shadow(0px 1px 0 var(--accent)) drop-shadow(0px 0px 0 var(--accent))
    drop-shadow(0px 0px 0 var(--accent)) drop-shadow(0px 0px 0 var(--accent));}
.item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-slot{align-self:flex-end;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--accent, var(--signal));text-transform:uppercase}
.item-name{margin:0;font-size:12px;font-weight:600;color:var(--fg);line-height:1.25;overflow-wrap:anywhere}
.item-flavor{margin:0;font-size:9px;color:var(--fg3);line-height:1.35;overflow-wrap:anywhere}
.item-stats{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.item-stat{display:flex;align-items:center;gap:6px}
.item-stat>span{flex:0 0 16px;font-family:var(--mono);font-size:8px;color:var(--accent, var(--signal))}
.bars{display:flex;gap:2px;flex:1;min-width:0}
.bars i{flex:1;height:5px;background:var(--rule);min-width:0}
.bars i.on{background:var(--accent, var(--signal))}

/* ── Work experience timeline ────────────────────────── */
.work-timeline{position:relative;--progress:0%;margin-top:14px}
.work-timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.work-timeline::after{content:"";position:absolute;left:7px;top:6px;height:var(--progress);width:2px;background:var(--signal);transition:height .25s linear}
.work-entry{position:relative;padding:0 0 16px 26px}
.work-entry::before{content:"";position:absolute;left:2px;top:5px;width:11px;height:11px;background:var(--bg);border:2px solid var(--line);border-radius:50%;transition:border-color .2s,background .2s}
.work-entry.in-view::before{border-color:var(--signal);background:var(--signal)}
.work-card{background:var(--panel);border:2px solid var(--line);padding:12px 14px;cursor:pointer;transition:border-color .2s}
.work-card:hover{border-color:var(--signal)}
.work-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.work-role{font-size:14px;font-weight:600;color:var(--fg);line-height:1.3}
.work-company{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--signal);text-transform:uppercase;margin-top:2px}
.work-date{font-family:var(--mono);font-size:10px;color:var(--fg3);white-space:nowrap;padding-top:2px}
.work-details{display:none;margin-top:12px}
.work-entry.open .work-details{display:block}
.work-points{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:5px}
.work-points li{font-size:12px;color:var(--fg2);line-height:1.5;padding-left:14px;position:relative}
.work-points li::before{content:"—";position:absolute;left:0;color:var(--signal)}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tag{font-family:var(--mono);font-size:9px;padding:3px 10px;background:var(--bg);border:1px solid var(--line);color:var(--fg2);text-transform:uppercase}
.work-repo{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--mono);font-size:10px;color:var(--fg2);text-decoration:none;border:1px solid var(--line);padding:6px 14px;text-transform:uppercase;transition:color .2s,border-color .2s}
.work-repo:hover{color:var(--fg);border-color:var(--signal)}
/* cursor-following image preview */
.cursor-preview{position:fixed;left:0;top:0;width:200px;height:140px;z-index:60;pointer-events:none;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center}
.cursor-preview.active{opacity:1}
.cursor-preview img{max-width:100%;max-height:100%;object-fit:contain;background:var(--panel);border:2px solid var(--signal);padding:5px}

/* ── Certifications & publications ───────────────────── */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:760px){.cert-grid{grid-template-columns:1fr}}
.cert-card{display:flex;flex-direction:column;gap:5px;background:var(--bg);border:1px solid var(--line);padding:12px;text-decoration:none;color:var(--fg);transition:border-color .2s,background .2s}
.cert-card:hover{border-color:var(--signal);background:var(--panel)}
.cert-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cert-num{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--signal)}
.cert-year{font-family:var(--mono);font-size:10px;color:var(--fg3)}
.cert-title{font-size:13px;font-weight:500;line-height:1.35;color:var(--fg);overflow-wrap:anywhere}
.cert-issuer{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--fg3);text-transform:uppercase;overflow-wrap:anywhere}
.cert-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;border-top:1px solid var(--rule);padding-top:8px}
.cert-type{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--signal);text-transform:uppercase}
.cert-view{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--fg3);text-transform:uppercase;transition:color .2s}
.cert-card:hover .cert-view{color:var(--signal)}

/* ── Tech stacks ─────────────────────────────────────── */
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:14px}
@media(max-width:600px){.stack-grid{grid-template-columns:1fr}}
.stack-group{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--rule)}
.stack-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--signal);text-transform:uppercase}
.stack-items{font-size:11px;color:var(--fg2);line-height:1.5}

/* ── Cabinet masonry ───────────────────────────────────── */
.cab-masonry{columns:4;column-gap:10px}
@media(max-width:1000px){.cab-masonry{columns:3}}
@media(max-width:760px){.cab-masonry{columns:2}}
@media(max-width:480px){.cab-masonry{columns:1}}

/* ── Responsive: app shell ─────────────────────────────── */
@media(max-width:1100px){
  #rail{width:196px;padding:10px 14px}
  #dossier{width:240px;padding:10px 14px}
}
@media(max-width:880px){
  header{grid-template-columns:1fr auto;gap:10px 14px;padding:12px 14px}
  .searchwrap{grid-column:1 / -1;order:3;justify-self:stretch;width:100%}
  .mark b{font-size:13px}
  nav.top{gap:12px}
  nav.top button{font-size:10px;letter-spacing:.06em}
  #rail{width:172px;top:104px;padding:10px 12px;gap:14px}
  #dossier{width:206px;top:104px;padding:10px 12px;gap:14px}
  #modes{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 14px;gap:12px}
  #modes .coords,#modes .hint-keys{display:none}
}
@media(max-width:620px){
  header{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .mark{flex-direction:row;align-items:baseline;gap:8px}
  .mark .tiny{display:none}
  .searchwrap{order:2}
  nav.top{order:3;justify-content:center;flex-wrap:wrap;gap:8px 12px}
  nav.top button{font-size:9px;letter-spacing:.04em}
  /* rail becomes a horizontal strip above the bottom bar */
  #rail{left:0;right:0;top:auto;bottom:54px;width:auto;max-height:36vh;padding:8px 12px;
    background:var(--bg);border-top:1px solid var(--rule);flex-direction:row;gap:12px;
    overflow-x:auto;overflow-y:hidden}
  #rail .railtabs{flex:none;margin-bottom:0;border-bottom:0;border-right:1px solid var(--line);padding-right:12px}
  #rail #drawer{flex-direction:row;flex:none}
  #rail .drawer{flex-direction:row;flex:none;width:auto;padding:8px;gap:8px}
  #rail .file{width:150px;flex:none;height:56px}
  #rail .drawerfoot{display:none}
  #dossier{display:none}
  #modes{height:54px;padding:6px 10px;gap:10px}
  #modes .grp button{padding:5px 8px;font-size:9px;letter-spacing:.04em}
  /* overlays */
  .ov-body{padding:12px 14px}
  .ov-header{padding:14px 14px 10px}
  .ov-back{top:14px;right:14px;padding:6px 10px;font-size:10px}
  #detail .card{padding:20px;max-height:92vh}
  .cf-grid{grid-template-columns:1fr;padding:16px;gap:14px}
  .cf-card{padding:16px}
}
.cab-card{break-inside:avoid;margin-bottom:10px;position:relative;overflow:hidden;background:none;border:none;padding:0;border-radius:0;cursor:pointer;transition:opacity .2s}
.cab-card:hover{opacity:.8}
.cab-label{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--signal);text-transform:uppercase;display:block;margin-top:4px}
.cab-title{font-size:11px;color:var(--fg);font-weight:500;display:block}
.cab-sub{font-size:9px;color:var(--fg3);font-family:var(--mono);display:block}
.cab-img{width:100%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:28px;border:none;overflow:hidden}
.cab-img img{width:100%;height:auto;display:block}
.cab-info{display:none;position:absolute;bottom:0;left:0;right:0;background:rgba(8,8,8,.85);padding:8px;flex-direction:column;gap:2px}
.cab-card:hover .cab-info,.cab-card.active .cab-info{display:flex}
.cab-player{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cab-play-btn{font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:4px 10px;background:var(--signal);color:#111;border:none;cursor:pointer;text-transform:uppercase;width:fit-content;border-radius:0;transition:background .2s}
.cab-play-btn:hover{background:var(--fg);color:var(--bg)}
.cab-eq{display:flex;gap:3px;align-items:flex-end;height:20px}
.cab-eq i{flex:1;background:var(--signal);animation:eq-bounce .6s ease-in-out infinite alternate;min-height:3px}
.cab-eq i:nth-child(1){animation-delay:0s}
.cab-eq i:nth-child(2){animation-delay:.1s}
.cab-eq i:nth-child(3){animation-delay:.2s}
.cab-eq i:nth-child(4){animation-delay:.3s}
.cab-eq i:nth-child(5){animation-delay:.4s}
.cab-eq i:nth-child(6){animation-delay:.5s}
.cab-card:not(.playing) .cab-eq i{animation-play-state:paused;height:3px}
@keyframes eq-bounce{0%{height:4px}100%{height:20px}}
.cab-progress{width:100%;height:4px;background:var(--line);position:relative;overflow:hidden}
.cab-progress-fill{height:100%;width:0%;background:var(--signal);transition:width .25s linear}
.cab-time{font-family:var(--mono);font-size:9px;color:var(--fg3);text-align:right}