:root{
  --bg:        #0a0e14;
  --bg-2:      #0f141c;
  --panel:     #11161f;
  --border:    #1d2530;
  --text:      #c9d1d9;
  --dim:       #6b7689;
  --green:     #6ee787;
  --cyan:      #56d4dd;
  --amber:     #e3b341;
  --magenta:   #d2a8ff;
  --red:       #ff7b72;
  --prompt:    var(--green);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
ul{list-style:none;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'JetBrains Mono','Noto Sans TC',ui-monospace,monospace;
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* subtle background grid + glow */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 500px at 80% -5%, rgba(110,231,135,.06), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(86,212,221,.05), transparent 60%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:28px 28px;
}

a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:880px;margin:0 auto;padding:0 18px;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,20,.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:880px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.nav-brand{color:var(--green);font-weight:700;}
.nav-brand .blink{color:var(--green);}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.nav-links a{
  color:var(--dim);font-size:12.5px;padding:3px 9px;border-radius:5px;
}
.nav-links a:hover{color:var(--green);background:var(--bg-2);text-decoration:none;}

/* ── TERMINAL WINDOW ── */
.term{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  margin:22px 0;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
}
.dot{width:11px;height:11px;border-radius:50%;}
.dot.r{background:#ffa0a0;} .dot.y{background:#ffff60;} .dot.g{background:#80a0ff;}
.term-title{margin-left:8px;color:var(--dim);font-size:12px;}
.term-body{padding:18px 18px 20px;}

/* prompt line */
.cmd{margin:0 0 6px;word-break:break-word;}
.cmd .usr{color:var(--green);}
.cmd .at{color:var(--dim);}
.cmd .host{color:var(--cyan);}
.cmd .path{color:var(--magenta);}
.cmd .sym{color:var(--dim);}
.cmd .arg{color:var(--text);}
.out{margin:0 0 16px;color:var(--text);}
.out:last-child{margin-bottom:0;}

.blink{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ── HERO ── */
.hero{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.hero-text{flex:1;min-width:240px;}
.hero .name{
  font-size:30px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:.5px;
}
.hero .typed{
  color:var(--green);font-size:16px;font-weight:500;margin-top:6px;min-height:24px;
}
.hero .lede{color:var(--dim);margin-top:10px;font-size:13px;max-width:46ch;}
.avatar{
  width:120px;height:120px;border-radius:14px;flex-shrink:0;
  border:1px solid var(--border);
  box-shadow:0 0 0 4px rgba(110,231,135,.07);
  object-fit:cover;background:var(--bg-2);
}
.social{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.social a{
  font-size:12px;color:var(--dim);border:1px solid var(--border);
  padding:4px 11px;border-radius:6px;background:var(--bg-2);
}
.social a:hover{color:var(--green);border-color:var(--green);text-decoration:none;}

/* ── TAGS ── */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.tag{
  font-size:11.5px;color:var(--cyan);
  border:1px solid rgba(86,212,221,.3);background:rgba(86,212,221,.06);
  padding:2px 9px;border-radius:5px;
}

/* ── SKILLS ── */
.skill{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;margin-bottom:8px;}
.skill .lbl{color:var(--text);}
.skill .yr{color:var(--dim);font-size:12px;}
.meter{font-family:'JetBrains Mono',monospace;color:var(--green);letter-spacing:1px;font-size:13px;}
.meter .empty{color:var(--border);}

/* ── LISTS ── */
.li{padding:3px 0 3px 20px;position:relative;}
.li::before{content:'›';position:absolute;left:2px;color:var(--green);}
.li .rank{
  color:var(--amber);font-size:12px;margin-left:6px;
  border:1px solid rgba(227,179,65,.3);background:rgba(227,179,65,.07);
  padding:0 7px;border-radius:4px;white-space:nowrap;
}
.li .rank.top{color:var(--green);border-color:rgba(110,231,135,.35);background:rgba(110,231,135,.07);}

.entry{margin-bottom:14px;}
.entry:last-child{margin-bottom:0;}
.entry .row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px;}
.entry .h{color:#fff;font-weight:700;}
.entry .date{color:var(--amber);font-size:12px;}
.entry .sub{color:var(--cyan);font-size:12.5px;margin-top:1px;}
.entry .desc{color:var(--dim);font-size:12.5px;margin-top:4px;padding-left:20px;position:relative;}
.entry .desc::before{content:'#';position:absolute;left:4px;color:var(--border);}
.entry .h a{color:#fff;}
.entry .h a:hover{color:var(--green);text-decoration:none;}

/* ── BLOG ── */
.empty{color:var(--dim);}
.empty .hint{color:var(--border);}
.nav-links a.on{color:var(--green);background:var(--bg-2);}
.back{display:inline-block;margin-top:4px;color:var(--dim);font-size:12.5px;}
.back:hover{color:var(--green);text-decoration:none;}
.page-head{padding:26px 0 2px;}
.page-head h1{font-size:22px;color:#fff;font-weight:700;letter-spacing:.5px;}
.page-head p{color:var(--dim);font-size:13px;margin-top:6px;}

.stack{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0;}
.stack span{
  font-size:11px;color:var(--magenta);
  border:1px solid rgba(210,168,255,.25);background:rgba(210,168,255,.05);
  padding:1px 8px;border-radius:4px;
}

/* contact */
.kv{display:flex;gap:8px;padding:2px 0;}
.kv .k{color:var(--dim);min-width:90px;}
.kv .v{color:var(--text);}

footer{
  text-align:center;color:var(--dim);font-size:12px;
  padding:26px 0 40px;border-top:1px solid var(--border);margin-top:10px;
}

@media(max-width:560px){
  .hero{flex-direction:column-reverse;align-items:flex-start;}
  .skill{grid-template-columns:78px 1fr;}
  .skill .yr{grid-column:2;text-align:left;margin-top:-4px;}
  .hero .name{font-size:24px;}
}