/* ---- Tokens ---- */
:root {
  --bg:#0a0a0a; --surface:#131313; --s1:#1b1b1b; --s2:#222; --s3:#2a2a2a; --s4:#353535;
  --ink:#e6e6e6; --ink-dim:#b8afa2; --ink-muted:#8a8278;
  --accent:#ff9900; --accent-dim:#b86e00; --pos:#3fe87e; --neg:#ff5566; --warn:#ffb86f;
  --ghost: rgba(85,68,52,0.22);
  --mono:'IBM Plex Mono','JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:'Space Grotesk','Inter','Helvetica Neue', Arial, sans-serif;
  --sz-body: 0.8125rem; --sz-h1: clamp(2.5rem, 6.5vw, 5.5rem);
  --topbar:44px; --ticker:30px; --cmd:32px; --rail:178px;
  --scan: 0;
}
[data-accent="green"]   { --accent:#3fe87e; --accent-dim:#1f9b4e; --warn:#a7ffcf; }
[data-accent="cyan"]    { --accent:#38d8ff; --accent-dim:#0088aa; --warn:#a7ecff; }
[data-accent="magenta"] { --accent:#ff4fb8; --accent-dim:#a8297a; --warn:#ffb0dc; }
[data-density="dense"]  {
  --sz-body: 0.6875rem;
  --topbar:36px; --ticker:24px; --cmd:26px;
}
[data-density="dense"] .page { padding:12px 16px 40px; }
[data-density="dense"] .mod-hd { height:22px; padding:0 8px; font-size:0.5625rem; }
[data-density="dense"] .mod-bd { padding:6px 8px; }
[data-density="dense"] .sec { margin:16px 0 6px; padding-bottom:4px; }
[data-density="dense"] .sec .sec-t { font-size:0.9375rem; }
[data-density="dense"] .hero { padding:14px 0 6px; }
[data-density="dense"] .hero .kicker { margin:4px 0 10px; line-height:1.45; }
[data-density="dense"] .kpi { padding:6px 8px; }
[data-density="dense"] .kpi-value { font-size:1.25rem; margin-top:2px; }
[data-density="dense"] .kpi-sub { margin-top:1px; }
[data-density="dense"] .xp-card { padding:8px 10px; gap:10px; }
[data-density="dense"] .xp-card ul { padding-left:12px; }
[data-density="dense"] .xp-card li { margin-bottom:1px; line-height:1.3; font-size:0.6875rem; }
[data-density="dense"] .xp-card h4 { font-size:0.75rem; margin:0 0 2px; }
[data-density="dense"] .whyme-cell { padding:10px; }
[data-density="dense"] .whyme-cell .wm-h { font-size:0.8125rem; margin:5px 0 4px; }
[data-density="dense"] .whyme-cell .wm-b { font-size:0.625rem; line-height:1.35; }
[data-density="dense"] .data-table tbody td { padding:4px 8px; }
[data-density="dense"] .data-table thead th { padding:3px 8px; }
[data-density="dense"] .proj { padding:8px 10px; }
[data-density="dense"] .proj .pr-title { font-size:0.8125rem; margin:3px 0 4px; }
[data-density="dense"] .proj .pr-desc { font-size:0.625rem; line-height:1.35; }
[data-density="dense"] .proj .pr-metrics { margin-top:6px; padding-top:6px; }
[data-density="dense"] .tl { padding:20px 0 10px; }
[data-density="dense"] .award { padding:10px; }
[data-density="dense"] .cap-row { padding:3px 0; }
[data-density="dense"] .ib-msg { padding:3px 8px; }
[data-density="dense"] .grid-2,[data-density="dense"] .grid-3,[data-density="dense"] .grid-4 { gap:6px; }
[data-density="dense"] .chips { gap:4px; margin-top:8px; }
[data-density="dense"] .chip { padding:3px 7px; font-size:0.5625rem; }

* { box-sizing: border-box; border-radius: 0 !important; }
html { font-size: 100%; } /* anchor: 1rem = browser default (usually 16px). Respects user accessibility size. */
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:var(--sz-body); -webkit-font-smoothing:antialiased; }
body { overflow-x:hidden; }
::selection { background: var(--accent); color:#000; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; font-size:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select { font-family:inherit; font-size:inherit; color:var(--ink); background:var(--s1); border:1px solid var(--ghost); padding:6px 8px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }

/* Boot */
.boot { position:fixed; inset:0; background:var(--bg); z-index:1000; display:grid; place-items:center; padding:40px; }
.boot-log { color:var(--ink-dim); font-size:0.75rem; line-height:1.55; white-space:pre; max-width:820px; width:100%; font-family:var(--mono); }
.boot-log .ok{color:var(--pos);} .boot-log .hi{color:var(--accent);} .boot-log .err{color:var(--neg);} .boot-log .cursor{color:var(--accent); animation:blink 1s steps(2) infinite;}
@keyframes blink { 50% { opacity:0; } }
.app { opacity:0; transition:opacity 500ms ease; }
.app.ready { opacity:1; }

/* Topbar */
.topbar { height:var(--topbar); display:grid; grid-template-columns: minmax(180px, 240px) 1fr minmax(380px, 460px); align-items:center; background:#000; border-bottom:1px solid var(--ghost); padding:0 12px; position:sticky; top:0; z-index:60; gap:8px; }
.topbar-right { gap:8px; flex-wrap:nowrap; }
@media (max-width:1280px){ .topbar-nav a { padding:6px 8px; } .brand-sub { display:none; } .cmd-trigger span { display:none; } .cmd-trigger { padding:3px 6px; } }
@media (max-width:1080px){ .topbar { grid-template-columns: minmax(140px,180px) 1fr minmax(280px,360px); } }
@media (max-width:920px){ .topbar-right .pill { display:none; } }
.topbar-brand { display:flex; align-items:center; gap:10px; }
.brand-dot { width:8px; height:8px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.brand-text { color:var(--accent); font-weight:700; letter-spacing:.08em; font-size:0.8125rem; }
.brand-sub  { color:var(--ink-muted); font-size:0.625rem; letter-spacing:.15em; }
.topbar-nav { display:flex; justify-content:center; gap:2px; }
.topbar-nav a { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; font-size:0.625rem; letter-spacing:.15em; color:var(--ink-dim); border-bottom:2px solid transparent; cursor:pointer; transition:background 120ms, color 120ms; }
.topbar-nav a .fn { color:var(--accent-dim); font-size:0.5625rem; }
.topbar-nav a:hover { background:var(--s1); color:var(--ink); }
.topbar-nav a.active { color:var(--accent); background:var(--s1); border-bottom-color:var(--accent); }
.topbar-right { display:flex; align-items:center; justify-content:flex-end; gap:10px; font-size:0.625rem; letter-spacing:.1em; }
.pill { padding:2px 6px; background:var(--s1); color:var(--ink-dim); font-size:0.5625rem; display:inline-flex; align-items:center; gap:5px; }
.pill-live { color:var(--pos); }
.live-dot { width:6px; height:6px; background:var(--pos); animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.clock { color:var(--accent); font-variant-numeric:tabular-nums; }

/* Ticker — fixed: label is solid, track sits in a separate masked area */
.ticker { height:var(--ticker); display:grid; grid-template-columns: auto 1fr; background:#050505; border-bottom:1px solid var(--ghost); position:sticky; top:var(--topbar); z-index:55; }
.ticker-label { padding:0 14px; height:100%; display:inline-flex; align-items:center; background:var(--accent); color:#000; font-size:0.625rem; letter-spacing:.15em; font-weight:700; white-space:nowrap; z-index:2; box-shadow: 6px 0 12px -4px rgba(0,0,0,0.6); }
.ticker-mask { overflow:hidden; position:relative; }
.ticker-track { display:flex; gap:36px; white-space:nowrap; animation: ticker-scroll var(--ticker-dur, 60s) linear infinite; padding-left:24px; height:100%; align-items:center; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
.tk-item { font-size:0.6875rem; color:var(--ink-dim); letter-spacing:.05em; }
.tk-item .tk-sym { color:var(--ink); font-weight:700; margin-right:8px; }
.tk-item .tk-pos { color:var(--pos); }
.tk-item .tk-neg { color:var(--neg); }
.tk-item .tk-amb { color:var(--accent); }

/* Shell */
.shell { display:grid; grid-template-columns: var(--rail) 1fr; min-height: calc(100vh - var(--topbar) - var(--ticker) - var(--cmd)); }
.rail { background:#000; border-right:1px solid var(--ghost); padding:14px 0; position:sticky; top:calc(var(--topbar) + var(--ticker)); height:calc(100vh - var(--topbar) - var(--ticker) - var(--cmd)); align-self:start; overflow-y:auto; display:flex; flex-direction:column; }
.rail::-webkit-scrollbar { width:4px; } .rail::-webkit-scrollbar-thumb { background:var(--accent-dim); }
.rail-section-label { font-size:0.5625rem; color:var(--ink-muted); letter-spacing:.2em; padding:6px 14px 8px; }
.rail-item { display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--ink-muted); cursor:pointer; border-left:2px solid transparent; transition:all 140ms; font-size:0.625rem; letter-spacing:.08em; }
.rail-item .rail-no { color:var(--accent-dim); font-size:0.5625rem; min-width:18px; }
.rail-item .rail-t { flex:1; }
.rail-item:hover { background:var(--s1); color:var(--ink); border-left-color:var(--accent-dim); }
.rail-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--s1); }
.rail-item.active .rail-no { color:var(--accent); }
.rail-icon { padding:10px 14px; gap:10px; }
.rail-icon svg { width:16px; height:16px; }
.rail-spacer { flex:1; min-height:14px; }

/* Pages with section transition */
.page-container { position:relative; min-width:0; }
.page { display:none; padding:24px 28px 80px; max-width:1400px; margin:0 auto; }
.page.active { display:block; animation: page-in 360ms cubic-bezier(.2,.8,.2,1); }
@keyframes page-in { from { opacity:0; transform: translateY(12px); clip-path: inset(0 100% 0 0); } to { opacity:1; transform: none; clip-path: inset(0 0 0 0); } }

/* Section block — gives motion-feel between sections */
.sec-block { position:relative; opacity:0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1); }
.sec-block.in { opacity:1; transform:none; }
.sec-block::before { content:''; position:absolute; left:-28px; top:0; bottom:0; width:2px; background: linear-gradient(180deg, transparent, var(--accent), transparent); opacity:0; transition: opacity 600ms; }
.sec-block.in::before { opacity:.35; }

/* Cmd bar */
.cmdbar { position:sticky; bottom:0; height:var(--cmd); display:flex; justify-content:space-between; align-items:center; padding:0 16px; background:rgba(10,10,10,.85); backdrop-filter:blur(10px); border-top:1px solid var(--ghost); z-index:50; font-size:0.625rem; letter-spacing:.1em; }
.cmd-left { color:var(--accent); display:flex; gap:8px; align-items:center; }
.cursor-blink { color:var(--accent); animation: blink 1s steps(2) infinite; }
.cmd-right { display:flex; gap:14px; color:var(--ink-muted); }

/* Modules */
.mod { background:var(--s1); margin-bottom:14px; }
.mod-hd { height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:var(--s2); font-size:0.625rem; letter-spacing:.18em; color:var(--ink-dim); border-bottom:1px solid var(--ghost); }
.mod-hd .hd-title { color:var(--accent); font-weight:700; }
.mod-hd .hd-meta { color:var(--ink-muted); font-size:0.5625rem; }
.mod-bd { padding:14px 16px; }

/* Hero */
.hero { padding: 30px 0 12px; }
.hero .pretitle { color:var(--ink-dim); font-size:0.6875rem; letter-spacing:.2em; }
.hero h1 { font-family:var(--disp); font-size:var(--sz-h1); line-height:.88; letter-spacing:-.04em; font-weight:700; margin:10px 0 18px; color:var(--accent); text-transform:uppercase; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.hero h1 .tw-cursor { color:var(--accent); animation:blink .75s steps(2) infinite; }
.hero .kicker { color:var(--ink); font-size:0.875rem; max-width:760px; line-height:1.6; margin:8px 0 20px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; background: rgba(42,42,42,.5); border:1px solid var(--accent); color:var(--accent); font-size:0.625rem; letter-spacing:.12em; font-weight:700; box-shadow: inset 0 0 10px rgba(255,153,0,.08); position:relative; overflow:hidden; }
.chip::before { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,153,0,.25), transparent); animation: scan-chip 3s infinite; }
@keyframes scan-chip { 100% { left: 160%; } }

/* Grids */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
/* Tablet — 4 cols → 2 cols, 3 cols → 2 cols */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .whyme-grid { grid-template-columns: repeat(2, 1fr); }
  .awards { grid-template-columns: repeat(2, 1fr); }
  .cap-3 { grid-template-columns: 1fr; }
}
/* Phablet — collapse 2 cols and stack row grids */
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .whyme-grid, .awards { grid-template-columns: 1fr; }
  .connect { grid-template-columns: 1fr; }
  .xp-card { grid-template-columns: 1fr; gap: 10px; }
  .endorse-form .row { grid-template-columns: 1fr; }
  .res-row { grid-template-columns: 90px 1fr 60px; row-gap: 4px; }
  .res-row .res-type:nth-of-type(2), .res-row .res-size, .res-row .res-date { display:none; }
  .log-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .log-row .lg-cat, .log-row .lg-mins, .log-row .lg-go { grid-column: 2; text-align:right; }
  .sec .sec-sub { display:none; }
}
/* Tablet — connect drops to 2-cols (resume wraps under cleanly) */
@media (max-width: 1024px) and (min-width: 721px) {
  .connect { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile shell collapse (was the single 960px breakpoint) */
@media (max-width: 960px) {
  .topbar { grid-template-columns:1fr auto; }
  .topbar-nav { grid-column:1/-1; order:3; justify-content:flex-start; padding-bottom:6px; }
  .rail { display:none; }
  .shell { grid-template-columns:1fr; }
  .page { padding:16px; }
}

/* Data table */
.data-table { width:100%; border-collapse:collapse; font-size:0.75rem; }
.data-table thead th { text-align:left; color:var(--ink-muted); font-weight:500; font-size:0.5625rem; letter-spacing:.15em; padding:6px 10px; border-bottom:1px dashed var(--ghost); }
.data-table tbody td { padding:10px; color:var(--ink); font-variant-numeric:tabular-nums; }
.data-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.012); }
.data-table tbody tr:hover td { background: rgba(255,153,0,.06); }
.data-table .pos { color:var(--pos); } .data-table .neg { color:var(--neg); } .data-table .amb { color:var(--accent); } .data-table .muted { color:var(--ink-muted); }
.data-table .row-active td { background: rgba(255,153,0,.08); border-left:2px solid var(--accent); }

.tag { display:inline-block; padding:2px 6px; font-size:0.5625rem; letter-spacing:.1em; font-weight:700; background:var(--accent); color:#000; }
.tag.pos { background:var(--pos); } .tag.muted { background:var(--s3); color:var(--ink-dim); }
.tag.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }

/* KPI */
.kpi { background:var(--s2); padding:12px 14px; position:relative; overflow:hidden; }
.kpi-label { font-size:0.5625rem; letter-spacing:.15em; color:var(--ink-muted); }
.kpi-value { font-family:var(--disp); font-size:1.75rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; margin-top:6px; }
.kpi-sub { font-size:0.625rem; color:var(--ink-dim); margin-top:4px; }
.kpi.pos .kpi-value { color:var(--pos); }
.kpi::after { content:''; position:absolute; top:0; right:0; width:24px; height:24px; background: linear-gradient(135deg, transparent 50%, var(--accent) 50%, var(--accent) 60%, transparent 60%); opacity:.4; }

/* Reveal */
.reveal { opacity:0; transform:translateY(8px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.in { opacity:1; transform:none; }

/* CRT */
.crt-overlay { position:fixed; inset:0; pointer-events:none; z-index:200; background: repeating-linear-gradient(to bottom, rgba(0,0,0,calc(var(--scan)/100)) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; }
[data-crt="1"] .crt-overlay::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.45) 100%); }
[data-crt="1"] .app { animation: flicker 3s infinite; }
@keyframes flicker { 0%,100%{filter:none;} 3%{filter:brightness(1.05);} 6%{filter:brightness(.95);} 70%{filter:none;} }

/* Timeline */
.timeline-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.timeline-wrap::-webkit-scrollbar { height:6px; }
.timeline-wrap::-webkit-scrollbar-thumb { background: var(--accent-dim); }
/* Fade-edge hint on the parent module so users see it scrolls horizontally */
.mod-bd:has(.timeline-wrap) { position: relative; padding: 0; }
.mod-bd:has(.timeline-wrap)::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
  background: linear-gradient(-90deg, var(--s1), transparent);
  pointer-events: none; z-index: 3;
}
.tl { position:relative; display:flex; gap:0; padding:40px 0 20px; min-width:1700px; }
.tl-line { position:absolute; left:0; right:0; top:60px; height:1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.tl-node { flex:1; min-width:140px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 8px; cursor:pointer; }
.tl-dot  { width:10px; height:10px; background:#000; border:2px solid var(--accent); margin-top:14px; transition:all 150ms; z-index:1; }
.tl-node:hover .tl-dot { background:var(--accent); box-shadow:0 0 14px var(--accent); }
.tl-date { color:var(--accent); font-size:0.625rem; letter-spacing:.15em; margin-top:14px; }
.tl-title { color:var(--ink); font-size:0.75rem; font-weight:700; margin-top:6px; }
.tl-sub { color:var(--ink-muted); font-size:0.625rem; margin-top:2px; max-width:140px; }
.tl-node.milestone .tl-dot { background:var(--accent); border-color:var(--accent); box-shadow: 0 0 10px var(--accent); }
.tl-node.dropped .tl-dot { border-color: var(--neg); }
.tl-node.dropped .tl-date { color: var(--neg); }

/* Experience cards */
.xp-card { display:grid; grid-template-columns:160px 1fr; gap:18px; padding:14px 16px; border-top:1px dashed var(--ghost); }
.xp-card:first-child { border-top:none; }
.xp-card .xp-meta { color:var(--ink-muted); font-size:0.625rem; letter-spacing:.1em; }
.xp-card .xp-meta .xp-period { color:var(--accent); font-weight:700; }
.xp-card h4 { margin:0 0 4px; color:var(--ink); font-size:0.875rem; font-family:var(--disp); font-weight:600; }
.xp-card .xp-co { color:var(--ink-dim); font-size:0.6875rem; margin-bottom:8px; }
.xp-card ul { margin:0; padding-left:16px; }
.xp-card li { color:var(--ink); font-size:0.75rem; line-height:1.55; margin-bottom:4px; }
.xp-card li::marker { color:var(--accent); }

/* Marquee endorsements */
.marquee-col { overflow:hidden; height:300px; position:relative; }
.marquee-col::before, .marquee-col::after { content:''; position:absolute; left:0; right:0; height:40px; z-index:2; pointer-events:none; }
.marquee-col::before { top:0; background: linear-gradient(180deg, var(--s1), transparent); }
.marquee-col::after  { bottom:0; background: linear-gradient(0deg, var(--s1), transparent); }
.marquee-track { display:flex; flex-direction:column; gap:10px; animation: marquee var(--marq-dur, 50s) linear infinite; }
.marquee-col.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateY(-50%); } }
.endorsement { background:var(--s2); padding:12px 14px; font-size:0.75rem; color:var(--ink); line-height:1.5; border-left:2px solid var(--accent); }
.endorsement .en-name { color:var(--accent); font-size:0.625rem; letter-spacing:.12em; font-weight:700; margin-top:8px; display:block; }

.endorse-form { display:grid; gap:10px; }
.endorse-form textarea { min-height:80px; }
.endorse-form .row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }

.btn { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); color:#000; font-weight:700; padding:8px 14px; font-size:0.6875rem; letter-spacing:.15em; box-shadow: 0 0 24px -8px var(--accent); transition: transform 80ms; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background:transparent; border:1px solid var(--accent); color:var(--accent); box-shadow:none; }

/* Why me */
.whyme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ghost); }
.whyme-cell { background:var(--s1); padding:18px; transition:all 160ms; }
.whyme-cell:hover { background:#000; }
.whyme-cell .wm-no { font-size:0.625rem; color:var(--accent); letter-spacing:.2em; }
.whyme-cell .wm-h  { font-family:var(--disp); font-size:1rem; font-weight:700; margin:10px 0 8px; color:var(--ink); }
.whyme-cell .wm-b  { font-size:0.6875rem; color:var(--ink-dim); line-height:1.5; }

/* Skills (categorized) */
.skills-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; margin-bottom: 14px; }
@media (max-width:960px){ .skills-3 { grid-template-columns:1fr; } }
.skbox { background:var(--s1); }
.skbox .sk-hd { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--s2); border-bottom:1px solid var(--ghost); }
.skbox .sk-hd .sk-t { color:var(--accent); font-size:0.625rem; letter-spacing:.18em; font-weight:700; }
.skbox .sk-hd .sk-n { color:var(--ink-muted); font-size:0.5625rem; }
.skbox .sk-bd { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.sk-row { display:grid; grid-template-columns: 1fr 80px; gap:10px; align-items:center; padding: 6px 0; border-bottom:1px dashed var(--ghost); }
.sk-row:last-child { border-bottom:0; }
.sk-row .sk-name { font-size:0.75rem; color:var(--ink); }
.sk-row .sk-name .sk-tag { font-size:0.5625rem; color:var(--accent); letter-spacing:.12em; margin-left:6px; }
.sk-bar { height:6px; background:var(--s3); position:relative; overflow:hidden; }
.sk-bar > i { display:block; height:100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: width 800ms cubic-bezier(.2,.8,.2,1); width:0; }
.sk-bar > i.tick { box-shadow: 0 0 8px var(--accent); }

/* Arcade */
.arcade { background:#040404; border:1px solid var(--ghost); }
.arc-hd { padding:10px 12px; background:var(--s2); border-bottom:1px solid var(--ghost); display:flex; align-items:center; justify-content:space-between; }
.arc-hd .arc-t { color:var(--accent); letter-spacing:.18em; font-size:0.625rem; font-weight:700; }
.arc-hd .arc-meta { color:var(--ink-muted); font-size:0.5625rem; letter-spacing:.12em; }
.arc-tabs { display:flex; gap:0; padding:0 12px; background:#000; border-bottom:1px solid var(--ghost); overflow-x:auto; }
.arc-tab { padding:10px 14px; font-size:0.625rem; letter-spacing:.15em; color:var(--ink-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.arc-tab:hover { color:var(--ink); }
.arc-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.arc-stage { padding:14px; display:grid; grid-template-columns: 1fr 240px; gap:14px; align-items:start; }
.arc-screen { background:#000; border:1px solid var(--ghost); position:relative; aspect-ratio: 16/10; overflow:hidden; cursor:none; }
.arc-screen canvas { display:block; width:100%; height:100%; }
.arc-side { display:flex; flex-direction:column; gap:10px; }
.arc-instr { background:var(--s1); border:1px dashed var(--ghost); padding:10px; font-size:0.625rem; color:var(--ink-dim); line-height:1.55; }
.arc-instr h5 { font-family:var(--disp); font-size:0.8125rem; color:var(--accent); margin:0 0 6px; letter-spacing:.05em; }
.arc-instr kbd { background: var(--s3); border:1px solid var(--ghost); padding:1px 6px; font-size:0.625rem; color:var(--ink); }
.arc-score { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.arc-score .kpi { padding:8px 10px; }
.arc-score .kpi-value { font-size: 1.125rem; }
@media (max-width:960px){ .arc-stage { grid-template-columns:1fr; } }

/* Connect */
.connect { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.connect a { display:flex; flex-direction:column; gap:6px; padding:18px; background:var(--s2); border:1px solid var(--ghost); transition:all 140ms; }
.connect a:hover { background:#000; border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow: 0 8px 24px -12px var(--accent); }
.connect .cn-label { font-size:0.5625rem; letter-spacing:.18em; color:var(--ink-muted); }
.connect .cn-val { font-family:var(--disp); font-size:1.25rem; font-weight:600; color:var(--ink); }
.connect a:hover .cn-val { color:var(--accent); }

/* Resources */
.res-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.res-filter { padding:6px 10px; background:var(--s1); color:var(--ink-dim); font-size:0.625rem; letter-spacing:.12em; cursor:pointer; border:1px solid var(--ghost); }
.res-filter:hover { color:var(--ink); }
.res-filter.active { color:#000; background:var(--accent); border-color:var(--accent); }
.res-row { display:grid; grid-template-columns: 110px 1fr 80px 130px 80px 80px 28px; gap:12px; padding:10px 12px; align-items:center; border-bottom:1px dashed var(--ghost); font-size:0.75rem; transition:all 120ms; cursor:pointer; }
.res-row:hover { background: rgba(255,153,0,.06); }
.res-row .res-sym { color:var(--accent); font-weight:700; letter-spacing:.1em; font-size:0.6875rem; }
.res-row .res-title { color:var(--ink); font-weight:500; }
.res-row .res-sub { color:var(--ink-muted); font-size:0.625rem; margin-top:2px; }
.res-row .res-type { color:var(--ink-dim); font-size:0.625rem; letter-spacing:.1em; }
.res-row .res-size { color:var(--ink-muted); font-size:0.625rem; text-align:right; }
.res-row .res-date { color:var(--ink-muted); font-size:0.625rem; }
.res-row .res-go { text-align:right; color:var(--accent); }

/* Logs */
.log-row { display:grid; grid-template-columns: 110px 90px 1fr 120px 60px; gap:14px; padding:14px; align-items:start; border-bottom:1px dashed var(--ghost); cursor:pointer; transition:all 120ms; }
.log-row:hover { background: rgba(255,153,0,.06); }
.log-row .lg-date { color:var(--ink-muted); font-size:0.625rem; letter-spacing:.1em; }
.log-row .lg-cat { color:var(--accent); font-size:0.625rem; letter-spacing:.12em; }
.log-row .lg-t { color:var(--ink); font-family:var(--disp); font-size:1rem; font-weight:600; line-height:1.3; }
.log-row .lg-d { color:var(--ink-dim); font-size:0.75rem; margin-top:4px; line-height:1.5; }
.log-row .lg-mins { color:var(--ink-muted); font-size:0.625rem; text-align:right; }
.log-row .lg-go { color:var(--accent); text-align:right; }

.log-detail { background:var(--s1); padding:28px 32px; max-width:820px; }
.log-detail h1 { font-family:var(--disp); font-size:2rem; line-height:1.2; color:var(--ink); margin:0 0 8px; }
.log-detail .back { color:var(--accent); font-size:0.625rem; letter-spacing:.15em; cursor:pointer; margin-bottom:14px; display:inline-block; }
.log-detail .meta { color:var(--ink-muted); font-size:0.625rem; letter-spacing:.12em; margin-bottom:24px; }
.log-detail p, .log-detail li { color:var(--ink); font-size:0.8125rem; line-height:1.75; }
.log-detail h3 { font-family:var(--disp); font-size:1.125rem; color:var(--accent); margin:22px 0 8px; }

/* Section heading with index */
.sec { display:flex; align-items:baseline; gap:12px; margin:32px 0 12px; border-bottom:1px dashed var(--ghost); padding-bottom:8px; scroll-margin-top: 100px; }
.sec .sec-no { color:var(--accent-dim); font-size:0.625rem; letter-spacing:.2em; }
.sec .sec-t { font-family:var(--disp); font-size:1.25rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.sec .sec-sub { color:var(--ink-muted); font-size:0.625rem; letter-spacing:.1em; margin-left:auto; }

/* Awards */
.awards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.award { padding:16px; background:var(--s2); border:1px solid var(--ghost); position:relative; overflow:hidden; transition:all 150ms; }
.award::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--accent); }
.award:hover { background:#000; transform:translateY(-2px); }
.award .aw-date { font-size:0.5625rem; color:var(--ink-muted); letter-spacing:.15em; }
.award .aw-title { font-family:var(--disp); font-size:0.875rem; font-weight:600; color:var(--ink); margin:6px 0; }
.award .aw-rank { position:absolute; top:12px; right:14px; font-family:var(--disp); font-size:1.375rem; font-weight:700; color:var(--accent); }

/* Projects */
.proj { padding:14px; background:var(--s2); border:1px solid var(--ghost); position:relative; transition:all 150ms; cursor:pointer; }
.proj:hover { border-color:var(--accent); }
.proj .pr-sym { color:var(--accent); font-size:0.625rem; letter-spacing:.15em; }
.proj .pr-title { font-family:var(--disp); font-size:0.9375rem; font-weight:600; color:var(--ink); margin:6px 0 8px; }
.proj .pr-desc { color:var(--ink-dim); font-size:0.6875rem; line-height:1.5; }
.proj .pr-metrics { display:flex; gap:14px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--ghost); }
.proj .pr-metric .m-l { font-size:0.5625rem; color:var(--ink-muted); letter-spacing:.1em; }
.proj .pr-metric .m-v { font-family:var(--disp); font-size:0.875rem; font-weight:700; color:var(--accent); }
.proj .pr-metric .m-v.pos { color:var(--pos); } .proj .pr-metric .m-v.neg { color:var(--neg); }

/* Tweaks */
.tweaks { position:fixed; bottom:48px; right:16px; z-index:70; width:260px; background:#000; border:1px solid var(--accent); box-shadow:0 0 40px -8px var(--accent); font-size:0.6875rem; }
.tweaks-hd { background:var(--accent); color:#000; padding:6px 10px; font-weight:700; letter-spacing:.15em; font-size:0.625rem; display:flex; justify-content:space-between; }
.tweaks-hd #tweaks-close { cursor:pointer; }
.tweaks-body { padding:12px; display:grid; gap:10px; }
.tweaks-body label { display:grid; gap:6px; color:var(--ink-dim); font-size:0.5625rem; letter-spacing:.12em; }
.swatches { display:flex; gap:6px; }
.swatches button { width:24px; height:24px; background:var(--c); border:1px solid var(--ghost); }
.swatches button.active { outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Data highlights (terminal status indicators) ---- */
.hl-pos { background: var(--pos); color:#000; padding:1px 5px; font-weight:800; letter-spacing:.05em; }
.hl-neg { background: var(--neg); color:#fff; padding:1px 5px; font-weight:800; letter-spacing:.05em; }
.hl-amb { background: var(--accent); color:#000; padding:1px 5px; font-weight:800; letter-spacing:.05em; }
.proj .pr-metric .m-v.hl-pos,
.proj .pr-metric .m-v.hl-neg,
.proj .pr-metric .m-v.hl-amb { font-size:0.8125rem; }

/* ---- IB (Instant Bloomberg) chat ---- */
.ib-chat { background:#000; border:1px solid var(--ghost); height:360px; display:flex; flex-direction:column; }
.ib-head { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:var(--s2); border-bottom:1px solid var(--ghost); font-size:0.5625rem; letter-spacing:.15em; color:var(--ink-dim); }
.ib-head .ib-ch { color:var(--accent); font-weight:700; }
.ib-head .ib-status { display:inline-flex; align-items:center; gap:5px; color:var(--pos); font-size:0.5625rem; }
.ib-head .ib-status::before { content:''; width:6px; height:6px; background:var(--pos); animation:pulse 1.2s infinite; }
.ib-stream { flex:1; overflow-y:auto; font-family:var(--mono); padding:6px 0; }
.ib-stream::-webkit-scrollbar { width:4px; } .ib-stream::-webkit-scrollbar-thumb { background:var(--accent-dim); }
.ib-msg { padding:4px 10px; font-size:0.6875rem; line-height:1.45; border-left:2px solid transparent; animation: ib-in 300ms ease; }
@keyframes ib-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.ib-msg:hover { background: rgba(255,153,0,.04); border-left-color: var(--accent-dim); }
.ib-msg .ib-time { color:var(--ink-muted); margin-right:6px; }
.ib-msg .ib-user { color:var(--accent); font-weight:700; letter-spacing:.05em; margin-right:4px; }
.ib-msg .ib-user::after { content:':'; color:var(--ink-dim); margin-left:2px; }
.ib-msg .ib-body { color:var(--ink); }
.ib-msg.self .ib-user { color:var(--pos); }
.ib-compose { padding:6px 10px; background:var(--s2); border-top:1px solid var(--ghost); display:grid; grid-template-columns: 1fr 1fr 2fr auto; gap:6px; }
.ib-compose input, .ib-compose button { font-size:0.6875rem; padding:4px 6px; }

/* ---- Capability Terminal (Skills rewrite) ---- */
.cap-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:960px){ .cap-3 { grid-template-columns:1fr; } }
.cap-box { background:var(--s1); border:1px solid var(--ghost); }
.cap-hd { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--s2); border-bottom:1px solid var(--ghost); }
.cap-hd .cap-t { color:var(--accent); font-size:0.625rem; letter-spacing:.18em; font-weight:700; }
.cap-hd .cap-n { color:var(--ink-muted); font-size:0.5625rem; letter-spacing:.12em; }
.cap-cmd { padding:8px 12px 4px; font-size:0.625rem; color:var(--ink-muted); border-bottom:1px dashed var(--ghost); letter-spacing:.1em; }
.cap-cmd::before { content:'> '; color:var(--accent); }
.cap-bd { padding:6px 12px 10px; display:flex; flex-direction:column; gap:2px; }
.cap-row { padding:6px 0; border-bottom:1px dashed var(--ghost); display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; }
.cap-row:last-child { border-bottom:0; }
.cap-name { font-size:0.75rem; color:var(--ink); font-weight:600; letter-spacing:.03em; }
.cap-proof { font-size:0.625rem; color:var(--ink-dim); line-height:1.4; margin-top:3px; }
.cap-proof .p-line { display:block; padding-left:10px; position:relative; }
.cap-proof .p-line::before { content:'→'; position:absolute; left:0; color:var(--accent-dim); }
.cap-status { font-family:var(--mono); font-size:0.5625rem; letter-spacing:.1em; padding:2px 6px; font-weight:700; white-space:nowrap; }
.cap-status.verified { background:var(--pos); color:#000; }
.cap-status.expert { background:var(--accent); color:#000; }
.cap-status.adv { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.cap-status.cert { background:var(--s3); color:var(--accent); }

/* ---- Finance Lab floating popup ---- */
.fin-lab-toggle { /* sits in rail, styled like rail-icon */ }
.fin-lab-toggle.active { color: var(--accent); border-left-color: var(--accent); background:var(--s1); }
.fin-lab { position:fixed; left: calc(var(--rail) + 18px); bottom: calc(var(--cmd) + 14px); width: 600px; height: 460px; background:#050505; border:1px solid var(--accent); box-shadow: 0 12px 60px -10px var(--accent), inset 0 0 0 1px rgba(0,0,0,.4); z-index:90; display:flex; flex-direction:column; transform-origin: bottom left; animation: fl-in 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes fl-in { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
.fin-lab.hidden { display:none; }
.fl-hd { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:var(--accent); color:#000; font-size:0.625rem; letter-spacing:.18em; font-weight:700; cursor:move; user-select:none; }
.fl-hd .fl-sub { font-weight:500; font-size:0.5625rem; opacity:.75; }
.fl-hd .fl-close { cursor:pointer; background:#000; color:var(--accent); padding:1px 8px; font-weight:700; }
.fl-tabs { display:flex; background:#000; border-bottom:1px solid var(--ghost); overflow-x:auto; }
.fl-tabs::-webkit-scrollbar { height:3px; } .fl-tabs::-webkit-scrollbar-thumb { background:var(--accent-dim); }
.fl-tab { padding:7px 10px; font-size:0.5625rem; letter-spacing:.12em; color:var(--ink-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; flex:1; text-align:center; }
.fl-tab:hover { color:var(--ink); }
.fl-tab.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--s1); }
.fl-stage { flex:1; position:relative; background:#000; overflow:hidden; }
.fl-stage canvas { display:block; width:100%; height:100%; }
.fl-stage .fl-overlay { position:absolute; inset:0; pointer-events:none; display:flex; align-items:flex-end; justify-content:space-between; padding:6px 10px; font-size:0.5625rem; letter-spacing:.12em; color:var(--ink-muted); }
.fl-stage .fl-overlay > div { pointer-events:auto; }
.fl-stage .fl-score { color:var(--accent); font-weight:700; }
.fl-stage .fl-msg { position:absolute; top:38px; left:10px; right:10px; font-size:0.5625rem; color:var(--ink-muted); letter-spacing:.1em; text-align:center; pointer-events:none; padding:0 10px; }
.fl-stage .fl-msg .v { color:var(--accent); }
.fl-stage .fl-btn { position:absolute; right:10px; bottom:48px; background:var(--accent); color:#000; font-size:0.6875rem; font-weight:700; padding:6px 16px; letter-spacing:.14em; cursor:pointer; pointer-events:auto; user-select:none; }
.fl-stage .fl-btn:hover { filter:brightness(1.15); }
.fl-stage .fl-slider { position:absolute; left:10px; bottom:28px; right:10px; pointer-events:auto; }
.fl-stage input[type=range].fl-range { width:100%; accent-color: var(--accent); }
.fl-stage .fl-input { position:absolute; left:10px; right:10px; bottom:8px; background:#000; border:1px solid var(--accent); color:var(--accent); padding:5px 8px; font-family:var(--mono); font-size:0.8125rem; letter-spacing:.15em; text-transform:uppercase; pointer-events:auto; }
@media (max-width:960px){ .fin-lab { left:10px; right:10px; width:auto; } }
@media (max-width:720px){
  .fin-lab { left:8px; right:8px; top:calc(var(--topbar) + var(--ticker) + 8px); bottom:calc(var(--cmd) + 8px); width:auto; height:auto; }
  .fl-stage canvas { width:100% !important; height:auto !important; max-height:55vh; }
  .fl-tabs { overflow-x:auto; white-space:nowrap; }
  .fl-stage .fl-input { font-size:0.6875rem; }
}
/* Mobile-only: stack data-table rows into cards */
@media (max-width:720px){
  .data-table, .data-table tbody, .data-table tr, .data-table td { display:block; width:100%; }
  .data-table thead { display:none; }
  .data-table tbody tr { background:var(--s2); border:1px solid var(--ghost); margin-bottom:10px; padding:6px 4px; }
  .data-table tbody tr:nth-child(odd) td { background:transparent; }
  .data-table tbody td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 12px; text-align:right !important; border-bottom:1px dashed var(--ghost); }
  .data-table tbody td:last-child { border-bottom:0; }
  .data-table tbody td::before { content: attr(data-label); color:var(--ink-muted); font-size:0.5625rem; letter-spacing:.15em; font-weight:500; text-align:left; flex-shrink:0; }
  .data-table .row-active { border-left:2px solid var(--accent); }
  .data-table .row-active td { border-left:0; }
}

/* ---- Ticker hover-pause + variable speed ---- */
.ticker-track:hover { animation-play-state: paused; }
.tk-item .tk-blink { animation: tk-blink 1.5s infinite; }
@keyframes tk-blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ---- Command palette ---- */
.cmd-trigger { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; background:var(--s1); border:1px solid var(--ghost); color:var(--ink-dim); font-size:0.625rem; letter-spacing:.1em; cursor:pointer; transition:all 120ms; }
.cmd-trigger:hover { color:var(--accent); border-color:var(--accent); }
.cmd-trigger kbd { background:var(--s3); padding:1px 5px; font-size:0.5625rem; color:var(--ink); }
.cmd-palette { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; backdrop-filter:blur(4px); }
.cmd-palette.hidden { display:none; }
.cmd-box { width:min(640px, 92vw); background:#050505; border:1px solid var(--accent); box-shadow: 0 20px 80px -10px var(--accent); }
.cmd-input-wrap { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--ghost); background:var(--s1); }
.cmd-input-wrap::before { content:'>'; color:var(--accent); font-weight:700; }
.cmd-input { flex:1; background:transparent; border:0; color:var(--ink); font-family:var(--mono); font-size:0.875rem; letter-spacing:.05em; padding:0; }
.cmd-input:focus { border:0; outline:none; }
.cmd-results { max-height:50vh; overflow-y:auto; }
.cmd-results::-webkit-scrollbar { width:4px; } .cmd-results::-webkit-scrollbar-thumb { background:var(--accent-dim); }
.cmd-result { display:grid; grid-template-columns: 70px 1fr auto; gap:10px; padding:8px 14px; align-items:center; cursor:pointer; border-bottom:1px dashed var(--ghost); }
.cmd-result:hover, .cmd-result.active { background:rgba(255,153,0,.08); }
.cmd-result .cr-tag { color:var(--accent); font-size:0.5625rem; letter-spacing:.15em; font-weight:700; }
.cmd-result .cr-t { color:var(--ink); font-size:0.75rem; }
.cmd-result .cr-s { color:var(--ink-muted); font-size:0.625rem; }
.cmd-result .cr-key { color:var(--ink-muted); font-size:0.5625rem; letter-spacing:.1em; }
.cmd-empty { padding:20px; color:var(--ink-muted); font-size:0.6875rem; text-align:center; letter-spacing:.1em; }
.cmd-foot { padding:6px 14px; background:var(--s1); border-top:1px solid var(--ghost); font-size:0.5625rem; color:var(--ink-muted); letter-spacing:.12em; display:flex; gap:14px; }
.cmd-foot kbd { background:var(--s3); padding:1px 5px; color:var(--ink); }

/* ---- Collapsible work cards ---- */
.xp-card.collapsible h4 { cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px; }
.xp-card.collapsible h4::before { content:'▾'; color:var(--accent); font-size:0.625rem; transition:transform 180ms; }
.xp-card.collapsible.collapsed h4::before { transform:rotate(-90deg); }
.xp-card.collapsible .xp-body { transition: max-height 280ms ease, opacity 220ms; max-height:600px; overflow:hidden; }
.xp-card.collapsible.collapsed .xp-body { max-height:0; opacity:0; }