*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0d12;
  --panel:#0f131a;
  --panel2:#141a22;
  --panel3:#1a212b;
  --line:rgba(232,226,208,.08);
  --line2:rgba(232,226,208,.14);
  --line3:rgba(232,226,208,.22);
  --text:#e8e2d0;
  --text2:#d4cebc;
  --muted:#7a7566;
  --muted2:#a8a292;
  --cyan:#00e5ff;
  --cyan2:rgba(0,229,255,.5);
  --magenta:#ff2a8f;
  --magenta2:rgba(255,42,143,.5);
  --amber:#ffb800;
  --green:#4ade80;
  --danger:#ff3a3a;
  --f-display:'Instrument Serif',serif;
  --f-body:'Geist',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-crt:'VT323',monospace;
}

.light{
  --bg:#dcd6c4;
  --panel:#d0c9b4;
  --panel2:#c4bda8;
  --panel3:#b8b19c;
  --line:rgba(26,23,18,.12);
  --line2:rgba(26,23,18,.22);
  --line3:rgba(26,23,18,.35);
  --text:#1a1712;
  --text2:#2a2620;
  --muted:#6b6555;
  --muted2:#4a4438;
  --cyan:#0088aa;
  --cyan2:rgba(0,136,170,.4);
  --magenta:#c41968;
  --magenta2:rgba(196,25,104,.4);
  --amber:#a67400;
  --green:#3a7f3a;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:14px;line-height:1.55;
  overflow-x:hidden;min-height:100vh;
}

/* ==================== PERSISTENT LAYERS ==================== */
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);
  background-size:28px 28px;opacity:.5;
}
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.14) 3px,transparent 4px);
  mix-blend-mode:multiply;opacity:.5;
}
.light .scanlines{opacity:.22}
.scanbar{
  position:fixed;left:0;right:0;height:80px;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,transparent,rgba(0,229,255,.03) 50%,transparent);
  animation:scanmove 9s linear infinite;
}
.light .scanbar{background:linear-gradient(to bottom,transparent,rgba(26,23,18,.04) 50%,transparent)}
@keyframes scanmove{0%{top:-80px}100%{top:100vh}}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%);
}
.light .vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(26,23,18,.15) 100%)}

/* ==================== BOOT SEQUENCE ==================== */
#boot{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:2rem;cursor:pointer;
}
#boot.done{opacity:0;pointer-events:none;transition:opacity .6s ease .1s}
.boot-frame{
  width:min(540px,100%);
  border:1px solid var(--line3);
  padding:1.5rem 1.5rem 1rem;
  font-family:var(--f-mono);font-size:12px;color:var(--text2);
  position:relative;background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.boot-frame::before,.boot-frame::after{content:'';position:absolute;width:8px;height:8px;border:1px solid var(--cyan)}
.boot-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.boot-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.boot-head{
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--muted2);
  border-bottom:1px dashed var(--line2);
  padding-bottom:.6rem;margin-bottom:.8rem;letter-spacing:.12em;
}
.boot-head b{color:var(--cyan);font-weight:500}
.boot-lines{min-height:170px}
.boot-line{white-space:pre;line-height:1.65;opacity:0}
.boot-line.show{opacity:1}
.boot-line .ok{color:var(--green)}
.boot-line .acc{color:var(--cyan)}
.boot-cursor{display:inline-block;width:7px;height:11px;background:var(--text);vertical-align:middle;animation:blink 1s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.boot-skip{
  margin-top:.9rem;padding-top:.65rem;
  border-top:1px dashed var(--line2);
  font-size:10px;letter-spacing:.14em;color:var(--muted);text-align:right;
}

/* ==================== CORNER HUD ==================== */
.hud{
  position:fixed;z-index:50;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:var(--muted2);pointer-events:none;line-height:1.7;
}
.hud .hud-line{display:flex;gap:6px;align-items:center;white-space:nowrap}
.hud.tl{top:96px;left:16px}
.hud.br{bottom:16px;right:16px;text-align:right}
.hud.br .hud-line{justify-content:flex-end}
.hud .tag{color:var(--cyan)}
.hud .val{color:var(--text2)}
.hud .state-ok{color:var(--green);text-shadow:0 0 6px var(--green)}
.signal-bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.signal-bars i{display:block;width:2px;background:var(--muted)}
.signal-bars i:nth-child(1){height:3px}
.signal-bars i:nth-child(2){height:5px}
.signal-bars i:nth-child(3){height:7px}
.signal-bars i:nth-child(4){height:9px}
.signal-bars i:nth-child(5){height:10px}
.signal-bars.active i{background:var(--cyan);animation:sigpulse 1.4s ease-in-out infinite}
.signal-bars.active i:nth-child(2){animation-delay:.15s}
.signal-bars.active i:nth-child(3){animation-delay:.3s}
.signal-bars.active i:nth-child(4){animation-delay:.45s}
.signal-bars.active i:nth-child(5){animation-delay:.6s}
@keyframes sigpulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (max-width:1180px){.hud{display:none}}

/* ==================== MARQUEE ==================== */
.marquee{
  position:relative;z-index:12;
  background:var(--panel);
  border-bottom:1px solid var(--line2);
  overflow:hidden;
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text2);
  padding:9px 0;white-space:nowrap;
}
.marquee-track{
  display:inline-flex;gap:3rem;
  animation:mq 45s linear infinite;padding-left:3rem;
}
.marquee-track b{color:var(--cyan);font-weight:500}
.marquee-track .mg{color:var(--magenta)}
.marquee-track .am{color:var(--amber)}
.marquee-track .sep{color:var(--line3)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==================== NAV ==================== */
nav.top-nav{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;height:48px;
  background:rgba(10,13,18,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
.light nav.top-nav{background:rgba(220,214,196,.82)}
.nav-logo{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--text);text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.nav-logo .brk{color:var(--cyan)}
.nav-links{display:flex;gap:1.25rem}
.nav-links a{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2);
  text-decoration:none;transition:color .15s;padding:2px 0;
}
.nav-links a::before{content:'/';color:var(--line3);margin-right:5px;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::before{color:var(--cyan)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-status{
  display:flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  color:var(--muted2);text-transform:uppercase;
}
.status-dot{width:6px;height:6px;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.theme-btn{
  background:transparent;border:1px solid var(--line2);
  color:var(--muted2);width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--f-mono);font-size:11px;
  transition:border-color .15s,color .15s,background .15s;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--panel)}
@media (max-width:640px){.nav-links{display:none}nav.top-nav{padding:0 1rem}}

/* ==================== PAGE WRAPPER ==================== */
.page{
  max-width:1240px;margin:0 auto;
  padding:1.5rem 1.5rem 4rem;
  position:relative;z-index:10;
}
@media (max-width:640px){.page{padding:1rem}}

/* ==================== HEADER BANNER ==================== */
.banner{
  position:relative;
  padding:2rem 1.75rem 1.5rem;
  background:var(--panel);border:1px solid var(--line2);
  margin-bottom:1rem;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  overflow:hidden;
}
.banner::before{content:'';position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:1px solid var(--cyan);border-left:1px solid var(--cyan)}
.banner::after{content:'';position:absolute;bottom:10px;right:10px;width:14px;height:14px;border-bottom:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.banner-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.banner-name{
  font-family:var(--f-display);
  font-size:clamp(52px,9vw,96px);
  font-style:italic;line-height:.85;letter-spacing:-.03em;
  color:var(--text);position:relative;
}
.banner-name .dot{color:var(--cyan);font-style:normal}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .12s;
}
.glitch::before{color:var(--magenta);transform:translate(-3px,0)}
.glitch::after{color:var(--cyan);transform:translate(3px,0)}
.banner-name:hover .glitch::before,
.banner-name:hover .glitch::after{opacity:.85}
.banner-name:hover .glitch::before{animation:glA .35s steps(4) infinite}
.banner-name:hover .glitch::after{animation:glB .35s steps(4) infinite}
@keyframes glA{0%{transform:translate(-3px,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(-4px,-1px)}75%{transform:translate(-3px,2px)}100%{transform:translate(-3px,0)}}
@keyframes glB{0%{transform:translate(3px,0)}25%{transform:translate(4px,-1px)}50%{transform:translate(2px,1px)}75%{transform:translate(3px,-2px)}100%{transform:translate(3px,0)}}
.banner-id{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2);
  text-align:right;line-height:1.9;min-width:180px;
}
.banner-id b{color:var(--cyan);font-weight:500}
.banner-id .row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line2);padding-bottom:2px}
.banner-id .row:last-child{border-bottom:none}
@media (max-width:640px){.banner-id{text-align:left;min-width:0;width:100%}}
.banner-tags{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-top:1.25rem;padding-top:1rem;
  border-top:1px dashed var(--line2);
}

/* ==================== DASHBOARD GRID ==================== */
.dash{
  display:grid;
  grid-template-columns:260px 1fr 260px;
  gap:1rem;align-items:start;
}
@media (max-width:1080px){
  .dash{grid-template-columns:1fr 260px}
  .dash .sidebar-l{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
}
@media (max-width:820px){
  .dash{grid-template-columns:1fr}
  .dash .sidebar-l,.dash .sidebar-r{display:flex;flex-direction:column;gap:1rem}
}
.sidebar-l,.sidebar-r{
  display:flex;flex-direction:column;gap:1rem;
  position:sticky;top:64px;max-height:calc(100vh - 80px);overflow-y:auto;
}
@media (max-width:1080px){.sidebar-l,.sidebar-r{position:static;max-height:none;overflow:visible}}
.sidebar-l::-webkit-scrollbar,.sidebar-r::-webkit-scrollbar{width:4px}
.sidebar-l::-webkit-scrollbar-thumb,.sidebar-r::-webkit-scrollbar-thumb{background:var(--line2)}
.main-col{display:flex;flex-direction:column;gap:1rem;min-width:0}

/* ==================== WIDGET (small sidebar card) ==================== */
.widget{
  background:var(--panel);
  border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  position:relative;transition:border-color .2s;
}
.widget:hover{border-color:var(--cyan2)}
.widget::before{
  content:'';position:absolute;top:6px;right:6px;
  width:8px;height:8px;
  border-top:1px solid var(--line3);border-right:1px solid var(--line3);
}
.widget-title{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2);
  padding:.7rem .9rem;border-bottom:1px dashed var(--line2);
  display:flex;align-items:center;gap:8px;
}
.widget-title::before{content:'▸';color:var(--cyan);font-size:9px}
.widget-title b{color:var(--cyan);font-weight:500;margin-left:auto}
.widget-body{padding:.9rem}
.widget-img{width:100%;display:block;border-bottom:1px dashed var(--line2)}

/* Info table */
.info-table{width:100%;font-family:var(--f-mono);font-size:11px;border-collapse:collapse}
.info-table td{padding:5px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.info-table tr:last-child td{border-bottom:none}
.info-table .info-key{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:10px;width:64px;padding-right:8px}
.info-table td:not(.info-key){color:var(--text2)}

/* Chip lists */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  padding:3px 8px;background:var(--panel2);
  color:var(--text2);border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}
.chip.cy{color:var(--cyan);border-color:rgba(0,229,255,.3)}
.chip.mg{color:var(--magenta);border-color:rgba(255,42,143,.3)}
.chip.gr{color:var(--green);border-color:rgba(74,222,128,.3)}
.chip.am{color:var(--amber);border-color:rgba(255,184,0,.3)}

/* Status list */
.status-list{display:flex;flex-direction:column;gap:7px;font-family:var(--f-mono);font-size:11px}
.status-list .row{display:flex;align-items:center;gap:8px}
.status-list .row .d{width:6px;height:6px;flex-shrink:0;background:var(--green);box-shadow:0 0 5px var(--green)}
.status-list .row.act .d{background:var(--amber);box-shadow:0 0 5px var(--amber);animation:pulse 1.5s infinite}
.status-list .row.lrn .d{background:var(--magenta);box-shadow:0 0 5px var(--magenta)}
.status-list .row .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;min-width:60px}
.status-list .row .val{color:var(--text2)}

/* "Now" widget */
.now-title{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;text-align:center;
  padding:.65rem .9rem .3rem;
}
.now-line{
  font-family:var(--f-crt);font-size:1.55rem;
  color:var(--text);text-align:center;
  padding:.15rem .9rem .8rem;line-height:1.15;
}
.now-line .cy{color:var(--cyan)}

/* Social list */
.social-list{display:flex;flex-direction:column;gap:5px}
.social-link{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;background:var(--panel2);
  border:1px solid var(--line);color:var(--text2);text-decoration:none;
  font-family:var(--f-mono);font-size:11px;
  transition:border-color .15s,background .15s;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.social-link:hover{border-color:var(--cyan);background:var(--panel3)}
.social-link strong{font-weight:500;color:var(--text);letter-spacing:.06em}
.social-link span{color:var(--muted2);font-size:10px}

/* Reading (AniList) compact widget */
.reading-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.reading-tile{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--panel3);border:1px solid var(--line2);text-decoration:none;transition:border-color .2s}
.reading-tile:hover{border-color:var(--cyan)}
.reading-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.reading-tile:hover img{transform:scale(1.06)}
.reading-tile .rprog{
  position:absolute;bottom:0;left:0;right:0;
  font-family:var(--f-mono);font-size:8px;letter-spacing:.06em;
  background:rgba(10,13,18,.85);color:var(--cyan);
  padding:2px 4px;text-align:center;
}
.reading-empty{
  grid-column:1/-1;padding:.5rem 0;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-align:center;
}
.reading-ftr{
  margin-top:.75rem;padding-top:.6rem;
  border-top:1px dashed var(--line2);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;
  color:var(--muted2);text-transform:uppercase;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;
}
.reading-ftr .cy{color:var(--cyan)}

/* Hit counter */
.hits-body{text-align:center;padding:.9rem}
.hit-num{
  font-family:var(--f-crt);font-size:2.2rem;
  color:var(--cyan);text-shadow:0 0 12px rgba(0,229,255,.3);
  letter-spacing:.14em;
  background:var(--panel3);
  border:1px solid var(--line2);
  padding:.35rem;margin-bottom:.5rem;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.hit-lbl{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;
}

/* ==================== POST CARD ==================== */
.post{
  background:var(--panel);border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  position:relative;transition:border-color .2s;
}
.post:hover{border-color:var(--line3)}
.post::before{content:'';position:absolute;top:8px;right:8px;width:12px;height:12px;border-top:1px solid var(--line3);border-right:1px solid var(--line3)}
.post::after{content:'';position:absolute;bottom:8px;left:8px;width:12px;height:12px;border-bottom:1px solid var(--line3);border-left:1px solid var(--line3)}
.post-head{
  padding:1rem 1.25rem;
  border-bottom:1px dashed var(--line2);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.post-date{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
.post-date .cy{color:var(--cyan)}
.post-date b{color:var(--text2)}
.post-title{
  font-family:var(--f-display);font-style:italic;
  font-size:24px;line-height:1.1;letter-spacing:-.01em;color:var(--text);
}
.post-body{padding:1.25rem}
.post-body p{margin-bottom:.85rem;color:var(--text2)}
.post-body p:last-child{margin-bottom:0}
.post-body strong{color:var(--cyan);font-weight:500}
.post-body a{color:var(--cyan);text-decoration:none;border-bottom:1px dashed var(--cyan2)}
.post-body a:hover{border-bottom-style:solid}
.post-ftr{
  padding:.8rem 1.25rem;
  border-top:1px dashed var(--line2);
  display:flex;flex-wrap:wrap;gap:5px;
}

/* Intro block */
.intro-hi{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--cyan);text-transform:uppercase;margin-bottom:.5rem;
}
.callout{
  padding:.85rem 1rem;background:var(--panel2);
  border-left:2px solid var(--cyan);
  font-size:13px;color:var(--text2);margin:.75rem 0;
}
.callout b{color:var(--text);font-weight:500}

/* Projects mini-card grid */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.proj-grid{grid-template-columns:1fr}}
.proj-card{
  display:flex;flex-direction:column;gap:5px;
  padding:.85rem .95rem;background:var(--panel2);
  border:1px solid var(--line);
  text-decoration:none;color:var(--text);
  transition:border-color .15s,background .15s,transform .1s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  position:relative;
}
.proj-card:hover{border-color:var(--cyan);background:var(--panel3);transform:translateY(-1px)}
.proj-card.feat{border-color:var(--cyan2);background:linear-gradient(135deg,var(--panel2) 60%,rgba(0,229,255,.05))}
.proj-card.act{border-color:var(--magenta2);background:linear-gradient(135deg,var(--panel2) 60%,rgba(255,42,143,.05))}
.proj-card.act:hover{border-color:var(--magenta)}
.proj-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.proj-head .fid{color:var(--cyan)}
.proj-head .fid.mg{color:var(--magenta)}
.proj-head .st{display:inline-flex;align-items:center;gap:4px}
.proj-head .st i{width:5px;height:5px;background:var(--green);box-shadow:0 0 4px var(--green)}
.proj-head .st.act i{background:var(--amber);box-shadow:0 0 4px var(--amber);animation:pulse 1.5s infinite}
.proj-name{font-family:var(--f-display);font-style:italic;font-size:20px;line-height:1;letter-spacing:-.01em}
.proj-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted2);text-transform:uppercase}
.proj-desc{font-size:12px;color:var(--text2);line-height:1.55}
.proj-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.proj-tags .tg{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;
  padding:1px 6px;background:var(--panel3);
  color:var(--text2);border:1px solid var(--line);
}

/* Homelab list */
.hlab-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:.75rem}
.hlab-item{
  background:var(--panel2);border:1px solid var(--line);
  padding:.55rem .8rem;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.08em;color:var(--text2);
  display:flex;align-items:center;gap:8px;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.hlab-item .d{width:5px;height:5px;background:var(--green);box-shadow:0 0 5px var(--green);flex-shrink:0}

/* Stack groups */
.stack-group{margin-bottom:.85rem}
.stack-group:last-child{margin-bottom:0}
.stack-lbl{
  display:inline-block;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
  padding:2px 8px 2px 0;margin-bottom:6px;
  border-bottom:1px dashed var(--line2);
}
.stack-lbl b{color:var(--cyan);font-weight:500}

/* Post tags */
.post-tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  padding:2px 7px;background:var(--panel2);
  color:var(--muted2);border:1px solid var(--line);
}

/* Contact channels */
.chn-list{display:flex;flex-direction:column;gap:6px}
.chn{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .9rem;background:var(--panel2);
  border:1px solid var(--line);color:var(--text);text-decoration:none;
  transition:border-color .15s,background .15s,transform .1s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.chn:hover{border-color:var(--cyan);background:var(--panel3);transform:translateX(3px)}
.chn-l{display:flex;align-items:center;gap:10px}
.chn-ico{
  width:26px;height:26px;background:var(--panel3);
  border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--cyan);
  flex-shrink:0;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}
.chn-t{display:flex;flex-direction:column;line-height:1.2}
.chn-t b{font-size:13px;font-weight:500}
.chn-t span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:1px}
.chn-arr{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);transition:color .15s,transform .15s}
.chn:hover .chn-arr{color:var(--cyan);transform:translateX(2px)}

/* ==================== FOOTER ==================== */
footer{
  margin-top:1rem;
  padding:1.1rem 1.25rem;
  background:var(--panel);
  border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
footer .cy{color:var(--cyan)}
footer .sep{color:var(--line3);margin:0 4px}

/* ==================== REVEAL ==================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ==================== VIEW TRANSITION ==================== */
::view-transition-group(root){animation-timing-function:cubic-bezier(.7,0,.84,0)}
::view-transition-new(root){clip-path:circle(0% at var(--cx,50%) var(--cy,50%));animation:clip-in 1s cubic-bezier(.7,0,.3,1) forwards}
::view-transition-old(root){clip-path:circle(140% at var(--cx,50%) var(--cy,50%));animation:clip-out 1s cubic-bezier(.7,0,.3,1) forwards}
@keyframes clip-in{to{clip-path:circle(140% at var(--cx,50%) var(--cy,50%))}}
@keyframes clip-out{to{clip-path:circle(0% at var(--cx,50%) var(--cy,50%))}}

@media (prefers-reduced-motion:reduce){
  .scanbar,.status-dot,.status-list .row.act .d,.proj-head .st.act i,.signal-bars.active i,.boot-cursor,.marquee-track{animation:none}
  .glitch::before,.glitch::after{display:none}
  .reveal{opacity:1;transform:none;transition:none}
}