:root{
  --bg:#0a0a08;
  --bg-raise:#13120d;
  --line:#2a2417;
  --amber:#ffb000;
  --amber-dim:#b3791f;
  --paper:#ece0c0;
  --paper-dim:#8f866c;
  --cyan:#4fd6c9;
  --green:#49e08a;
  --danger:#ff4d3d;
  --glow:0 0 8px rgba(255,176,0,.35);
  --maxw:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
}

/* ---- CRT overlays ---- */
.crt-scan{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.crt-vig{
  position:fixed;inset:0;z-index:61;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);
}
.crt-flick{
  position:fixed;inset:0;z-index:62;pointer-events:none;
  background:rgba(255,176,0,.015);
  animation:flick 6s steps(2) infinite;
}
@keyframes flick{0%,97%{opacity:.5}98%{opacity:.9}99%{opacity:.3}100%{opacity:.6}}

/* ---- shell frame ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:22px 20px 80px}

.tabbar{
  display:flex;gap:6px;align-items:flex-end;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;flex-wrap:wrap;
}
.tab{
  font-family:inherit;font-size:14px;cursor:pointer;
  background:transparent;color:var(--paper-dim);
  border:1px solid var(--line);border-bottom:none;
  padding:8px 15px;border-radius:6px 6px 0 0;text-decoration:none;
  transition:color .15s,background .15s,box-shadow .15s;
  letter-spacing:.02em;
}
.tab:hover{color:var(--paper)}
.tab[aria-current="page"]{
  color:var(--amber);background:var(--bg-raise);
  text-shadow:var(--glow);box-shadow:0 -1px 0 var(--amber) inset;
}
.tab .dot{color:var(--amber-dim)}
.tab[aria-current="page"] .dot{color:var(--amber)}

.statusline{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--paper-dim);font-size:12.5px;margin-bottom:20px;
  border:1px dashed var(--line);padding:7px 12px;border-radius:6px;
}
.statusline b{color:var(--cyan);font-weight:500}

/* ---- prompt lines ---- */
.prompt{color:var(--amber-dim);margin:34px 0 10px;font-size:15px;letter-spacing:.02em}
.prompt::before{content:"zebtron@crt:~$ ";color:var(--cyan)}
.prompt b{color:var(--amber);font-weight:600;text-shadow:var(--glow)}

h1.logo{
  font-family:"VT323",monospace;
  font-weight:400;font-size:clamp(72px,16vw,150px);
  line-height:.82;margin:6px 0 2px;color:var(--amber);
  text-shadow:0 0 18px rgba(255,176,0,.45),0 0 2px rgba(255,176,0,.8);
  letter-spacing:.02em;
}
.subtitle{color:var(--paper-dim);font-size:15px;margin:0 0 4px}
.subtitle .cyan{color:var(--cyan)}

h2.sec{
  font-family:"VT323",monospace;font-weight:400;
  font-size:clamp(34px,6vw,52px);line-height:1;
  color:var(--amber);margin:2px 0 6px;text-shadow:var(--glow);
}

p{max-width:64ch}
p .hi{color:var(--amber);text-shadow:var(--glow)}
a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(79,214,201,.45)}
a:hover{color:#8ff0e6;border-bottom-color:#8ff0e6}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---- link menu (ls output) ---- */
.menu{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px}
.menu a{
  display:grid;grid-template-columns:14px 168px 1fr;gap:12px;align-items:baseline;
  border:none;padding:7px 10px;border-radius:5px;color:var(--paper);
  transition:background .12s;
}
.menu a:hover{background:var(--bg-raise)}
.menu a .arw{color:var(--amber);opacity:0;transition:opacity .12s}
.menu a:hover .arw{opacity:1}
.menu a .name{color:var(--amber);text-shadow:var(--glow);white-space:nowrap}
.menu a .desc{color:var(--paper-dim);font-size:14px}
.menu a .desc em{color:var(--cyan);font-style:normal}
@media(max-width:560px){
  .menu a{grid-template-columns:14px 1fr;gap:4px 10px}
  .menu a .desc{grid-column:2}
}

/* ---- cards / panels ---- */
.panel{
  background:var(--bg-raise);border:1px solid var(--line);
  border-radius:8px;padding:20px 22px;margin:14px 0;
}
.panel h3{
  margin:0 0 10px;color:var(--amber);font-weight:600;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;
}

/* ---- buttons ---- */
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.btn{
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:7px;text-decoration:none;border:1px solid;
  transition:transform .1s,box-shadow .15s,background .15s;letter-spacing:.02em;
}
.btn:active{transform:translateY(1px)}
.btn-dl{background:var(--amber);color:#1a1200;border-color:var(--amber);box-shadow:0 0 20px rgba(255,176,0,.3)}
.btn-dl:hover{background:#ffc23d;box-shadow:0 0 30px rgba(255,176,0,.5)}
.btn-donate{background:transparent;color:var(--cyan);border-color:var(--cyan)}
.btn-donate:hover{background:rgba(79,214,201,.1);box-shadow:0 0 20px rgba(79,214,201,.25)}

.meta{color:var(--paper-dim);font-size:13px;margin:4px 0 0}

/* cursor */
.cur{display:inline-block;width:11px;height:1.05em;background:var(--amber);
  margin-left:3px;vertical-align:-2px;box-shadow:var(--glow);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- resume ---- */
.contactbar{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--paper-dim);font-size:13.5px;margin:2px 0 10px}
.contactbar span b{color:var(--cyan);font-weight:500}
.job{padding:15px 0;border-bottom:1px dashed var(--line)}
.job:last-child{border-bottom:none}
.job-head{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;align-items:baseline}
.job-title{color:var(--amber);font-weight:600;text-shadow:var(--glow)}
.job-co{color:var(--cyan)}
.job-date{color:var(--paper-dim);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.job-desc{margin:6px 0 0;color:var(--paper);font-size:14.5px;max-width:72ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.tag{border:1px solid var(--line);color:var(--paper);padding:5px 11px;border-radius:5px;font-size:13px}

footer{margin-top:54px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--paper-dim);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.view{animation:boot .5s ease both}
@keyframes boot{from{opacity:0;filter:brightness(2)}to{opacity:1;filter:none}}

@media(prefers-reduced-motion:reduce){
  .crt-flick,.cur,.view{animation:none}
  .cur{opacity:1}
}