@charset "utf-8";

/* ============================================================
   Terminal theme — Amber Yijia Zheng
   ============================================================ */

:root{
  --bg:#0c0d10;
  --term:#0f1115;
  --term-bar:#0b0c0f;
  --fg:#d7dadf;
  --muted:#8b909a;
  --dim:#5a5f6b;
  --green:#3ddc84;
  --cyan:#56d4dd;
  --amber:#ffb454;
  --pink:#ff7a93;
  --line:#1d2027;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,sans-serif;

  /* publication highlight reuse */
  --oral-color:#ffd479;
  --award-color:#ffd479;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(circle at 50% -10%,rgba(61,220,132,.06),transparent 45%);
  color:var(--fg);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan)}

/* guard against Bootstrap's dark utility colors on our dark bg */
.text-body{color:var(--fg) !important}
.text-muted{color:var(--muted) !important}
.lead{color:var(--muted)}

.container{max-width:100%;margin:0;padding:0}
.wrap,.main-content{max-width:860px;margin:0 auto;padding:0 24px}

/* ---------------- Terminal hero ---------------- */
.hero{min-height:96vh;display:flex;align-items:center;padding:60px 0 40px}
.hero .wrap{width:100%}
.terminal{
  width:100%;
  background:var(--term);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--term-bar)}
.dot{width:12px;height:12px;border-radius:50%}
.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
.bar .title{margin-left:10px;font-family:var(--mono);font-size:.78rem;color:var(--dim)}
.screen{
  padding:26px 24px 30px;
  font-family:var(--mono);
  font-size:.92rem;
  line-height:1.85;
  min-height:430px;
}
.hero .screen{max-height:72vh;overflow-y:auto;scroll-behavior:smooth}
.hero .screen::-webkit-scrollbar{width:8px}
.hero .screen::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.hero .screen::-webkit-scrollbar-track{background:transparent}
.line{white-space:pre-wrap;word-break:break-word}
.prompt{color:var(--green)}
.path{color:var(--cyan)}
.cmd{color:var(--fg)}
.out{color:var(--muted)}
.out b{color:var(--fg);font-weight:500}
.out .k{color:var(--amber)}
.out .p{color:var(--pink)}
.cursor{display:inline-block;width:9px;height:1.05em;background:var(--green);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.out .dim,.line .dim{color:var(--dim)}
.whoami{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.whoami-txt{line-height:1.6}
.whoami-img{width:104px;height:104px;flex:none;margin-left:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transition:opacity .45s ease}
.whoami-img.loaded{opacity:1}
@media (max-width:600px){.whoami-img{width:84px;height:84px}.whoami{gap:14px}}
.reveal{padding:6px 0}
.reveal-canvas{width:180px;height:180px;display:block;border-radius:12px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45);image-rendering:pixelated}
.reveal-cap{margin-top:8px;font-size:.92em}
@media (max-width:600px){.reveal-canvas{width:140px;height:140px}}
.term-input{
  font:inherit;color:var(--fg);background:transparent;border:none;outline:none;
  caret-color:var(--green);padding:0;margin:0;width:60%;min-width:120px;
}
.links-inline a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--dim)}
.links-inline a:hover{border-color:var(--cyan)}

/* ---------------- Sections ---------------- */
section{padding:78px 0;border-top:1px solid var(--line)}
.tag{font-family:var(--mono);font-size:.78rem;color:var(--green);margin-bottom:8px}
.tag::before{content:"// "}
h2.sec{font-family:var(--mono);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;margin:0 0 26px 0;color:var(--fg)}
h2.sec .h2c{color:var(--dim)}
.body p{color:var(--muted);max-width:680px;margin:0 0 16px 0}
.body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--line)}
.body a:hover{border-color:var(--cyan)}
.body strong{color:var(--fg);font-weight:600}

/* ---------------- Experience as git log ---------------- */
.log{font-family:var(--mono);font-size:.9rem}
.log .row{
  display:grid;grid-template-columns:200px 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line);transition:.2s;
}
.log .row:last-child{border-bottom:none}
.log .row:hover{background:rgba(255,255,255,.02);padding-left:8px}
.log .date{color:var(--dim);white-space:nowrap}
.log .role b{color:var(--fg);font-weight:600}
.log .role .org{color:var(--amber)}
.log .role .note{color:var(--muted)}
.log .logo{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:7px;border-radius:3px;background:#fff;padding:1px}

/* ---------------- Publications (reused widget classes) ---------------- */
.year-group{margin-bottom:26px}
.year-title{
  font-family:var(--mono);font-size:.95rem;color:var(--green);
  margin:0 0 6px 0;font-weight:500;
}
.year-title::before{content:"$ ls papers/"}
.year-title .yr{color:var(--fg)}

.publication-item{
  display:grid;grid-template-columns:120px 1fr;gap:22px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:start;
}
.publication-item:hover .publication-image img{transform:scale(1.06)}
.publication-image{
  width:120px;height:80px;border-radius:8px;overflow:hidden;
  background:#15151a;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--dim);
}
.publication-image img{width:100%;height:100%;object-fit:cover;transition:.4s}
.publication-content{min-width:0}
.publication-title{font-family:var(--sans);font-weight:600;font-size:1.04rem;line-height:1.4;margin:0 0 5px 0;color:var(--fg)}
.publication-authors{font-size:.86rem;color:var(--muted);margin-bottom:6px}
.publication-authors .text-body{color:var(--muted) !important}
.publication-authors a.text-body{color:var(--fg) !important;text-decoration:none;border-bottom:1px dotted var(--dim)}
.publication-authors a.text-body:hover{border-color:var(--cyan)}
.publication-authors strong{color:var(--cyan);font-weight:600}
.publication-authors mark{background:transparent;color:var(--dim);font-size:.78rem}
.publication-venue{font-family:var(--mono);font-size:.78rem;color:var(--green);margin-bottom:6px}
.publication-venue i{font-style:normal}
.publication-highlight{
  display:inline-block;color:var(--amber);border:1px solid #4a3a16;background:#2a230f;
  border-radius:5px;padding:0 7px;font-size:.7rem;margin-left:6px;font-style:normal;
}
.publication-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.publication-link{font-family:var(--mono);font-size:.76rem;color:var(--dim);text-decoration:none}
.publication-link:hover{color:var(--cyan)}

/* ---------------- Navbar ---------------- */
.navbar{
  background:rgba(12,13,16,.85) !important;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.navbar-brand{font-family:var(--mono);font-weight:500;color:var(--green) !important;font-size:.95rem}
.navbar-brand::before{content:"~/ "}
.navbar-nav .nav-link{font-family:var(--mono);color:var(--muted) !important;font-size:.85rem}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--cyan) !important}
.navbar-toggler{color:var(--muted)}

/* ---------------- Footer ---------------- */
.footer{
  border-top:1px solid var(--line);background:transparent;
  padding:46px 0;text-align:center;
}
.footer .text-muted,.footer .text-right{color:var(--dim) !important}
.site-foot{font-family:var(--mono);font-size:.76rem;color:var(--dim);text-align:center}

/* ---------------- Page header (sub-pages) ---------------- */
.page-head{padding:90px 0 10px}
.page-head .crumb{font-family:var(--mono);font-size:.82rem;color:var(--green)}
.page-head .crumb .path{color:var(--cyan)}
.page-head h1{font-family:var(--mono);font-weight:700;font-size:2rem;letter-spacing:-.02em;margin:10px 0 0;color:var(--fg)}
.page-head p{color:var(--muted);max-width:640px;margin-top:10px}

/* ---------------- Blog / writing list ---------------- */
.post-list{margin-top:10px}
.post-row{
  display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);transition:.2s;
}
.post-row:hover{padding-left:8px;background:rgba(255,255,255,.02)}
.post-row .date{font-family:var(--mono);font-size:.8rem;color:var(--dim);white-space:nowrap}
.post-row h3{margin:0;font-family:var(--sans);font-weight:600;font-size:1.08rem;line-height:1.4}
.post-row h3 a{color:var(--fg);text-decoration:none}
.post-row h3 a:hover{color:var(--cyan)}
.post-row .excerpt{color:var(--muted);font-size:.9rem;margin-top:5px}
.post-row .tags{margin-top:7px}
.post-row .tags span{font-family:var(--mono);font-size:.7rem;color:var(--green);border:1px solid var(--line);border-radius:5px;padding:1px 7px;margin-right:6px}

/* ---------------- Blog post (single) ---------------- */
.post{max-width:720px;margin:0 auto;padding:40px 24px 80px}
.post .post-meta{font-family:var(--mono);font-size:.8rem;color:var(--dim);margin-bottom:10px}
.post h1.post-title{font-family:var(--sans);font-weight:700;font-size:2rem;line-height:1.2;letter-spacing:-.01em;color:var(--fg);margin:0 0 28px}
.post-body{color:#c2c6cd;font-size:1.02rem;line-height:1.8}
.post-body h2{font-family:var(--mono);color:var(--green);font-size:1.2rem;margin:36px 0 14px}
.post-body h3{color:var(--fg);font-size:1.05rem;margin:28px 0 10px}
.post-body p{margin:0 0 18px}
.post-body a{color:var(--cyan);text-underline-offset:3px}
.post-body code{font-family:var(--mono);font-size:.86em;background:#15171c;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--amber)}
.post-body pre{background:var(--term);border:1px solid var(--line);border-radius:10px;padding:18px;overflow:auto;margin:0 0 22px}
.post-body pre code{background:none;border:none;padding:0;color:var(--fg)}
.post-body blockquote{border-left:2px solid var(--green);margin:0 0 20px;padding:2px 0 2px 18px;color:var(--muted)}
.post-body img{max-width:100%;border-radius:10px;border:1px solid var(--line)}
.post-body ul,.post-body ol{color:#c2c6cd;padding-left:22px;margin:0 0 18px}
.post-back{font-family:var(--mono);font-size:.82rem;color:var(--dim);text-decoration:none}
.post-back:hover{color:var(--cyan)}

/* ---------------- Life timeline ---------------- */
.timeline{position:relative;margin-top:10px}
.tl-item{
  position:relative;margin-left:6px;padding:0 0 34px 30px;
  border-left:1px solid var(--line);
}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--bg);transition:.2s;
}
.tl-item.exciting::before{background:var(--amber)}
.tl-item.boring::before{background:var(--dim)}
.tl-item:hover::before{box-shadow:0 0 0 4px var(--bg),0 0 0 7px rgba(86,212,221,.25)}
.tl-date{font-family:var(--mono);font-size:.78rem;color:var(--dim)}
.tl-title{font-family:var(--sans);font-weight:600;font-size:1.08rem;color:var(--fg);margin:3px 0 6px;line-height:1.35}
.tl-body{color:var(--muted);font-size:.95rem;max-width:620px}
.tl-body a{color:var(--cyan)}
.tl-img{margin-top:12px;max-width:340px;width:100%;border-radius:10px;border:1px solid var(--line);display:block;transition:.3s}
.tl-img:hover{transform:scale(1.02)}

/* ---------------- 404 ---------------- */
.error-term{max-width:680px;margin:14vh auto;padding:0 24px}
.error-term .screen{min-height:auto}
.error-term .big{color:var(--pink);font-family:var(--mono);font-size:1.4rem;margin:8px 0}

/* ---------------- Responsive ---------------- */
@media (max-width:600px){
  .screen{font-size:.82rem;padding:20px 16px 24px;min-height:380px}
  .log .row{grid-template-columns:1fr;gap:4px}
  .log .date{font-size:.8rem}
  .publication-item{grid-template-columns:1fr;gap:12px}
  .publication-image{width:100%;height:170px}
  section{padding:56px 0}
}

/* hide legacy bootstrap cards if any remain */
.card{display:none}