:root{
  /* Dark palette: black base, soft contrast */
  --bg:#050607;
  --paper:#0b0e11;
  --paper2:#0f1318;
  --ink:#e7e9ee;
  --muted:#a8adb8;
  --muted2:#8a90a0;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);

  /* Soft accent (not neon) */
  --accent:#9aa7ff;
  --accent2:#7fd4ff;

  --serif:"Noto Serif TC", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans TC", sans-serif;

  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --shadow2:0 10px 28px rgba(0,0,0,.42);
  --glow:0 0 0 1px rgba(154,167,255,.18), 0 16px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(154,167,255,.10), transparent 60%),
             radial-gradient(900px 500px at 90% 10%, rgba(127,212,255,.08), transparent 55%),
             var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  letter-spacing:.2px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease;
}
body.is-loaded{opacity:1;transform:none}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(160%) blur(12px);
  background:rgba(5,6,7,.65);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line2);
  display:grid;place-items:center;
  font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:var(--shadow2);
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{font-weight:700}
.brand__text span{font-size:12px;color:var(--muted2)}

.nav{display:flex;align-items:center;gap:10px}
.nav__link{
  font-size:13px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav__link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.06);
  color:var(--ink);
}
.nav__btn{
  border:1px solid rgba(154,167,255,.25);
  background:rgba(154,167,255,.08);
  color:var(--ink);
  border-radius:999px;
  padding:9px 12px;
  font-size:13px;
  cursor:pointer;
}
.nav__btn:hover{box-shadow:var(--glow)}
.nav__btn:focus-visible{outline:2px solid rgba(154,167,255,.45); outline-offset:2px}

/* Container */
.container{
  max-width:1120px;
  margin:0 auto;
  padding:22px 18px 40px;
}

/* Swap transition when project changes */
[data-swap].is-swapping{
  opacity:.25;
  transform:translateY(6px);
  filter:saturate(.9);
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
}
[data-swap]{
  transition:opacity .35s ease, transform .35s ease, filter .35s ease;
}

/* Hero */
.hero{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:var(--shadow2);
}
.hero__meta{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.pill{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:7px 10px;
  border-radius:999px;
}
.hero__note{font-size:12px;color:var(--muted2);margin-left:auto}

.hero__title{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.6px;
  font-size:38px;
  line-height:1.2;
  margin:6px 0 10px;
}
.hero__subtitle{
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:70ch;
}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1.7fr .9fr;
  gap:18px;
  margin-top:18px;
  align-items:start;
}

/* Post */
.post{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 20px 22px;
  box-shadow:var(--shadow2);
}
.media{
  margin:0;
  border-radius:calc(var(--radius) - 6px);
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(154,167,255,.08), rgba(127,212,255,.05));
  position:relative;
}
.media__img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  opacity:.92;
  transition:transform .28s ease, opacity .28s ease;
}
.media:hover .media__img{transform:scale(1.01);opacity:1}

.media__cap{
  padding:12px 14px;
  font-size:12px;
  color:var(--muted2);
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.25);
}

.media__zoom{
  position:absolute;
  right:12px;
  top:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--ink);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.media__zoom:hover{border-color:rgba(154,167,255,.35); box-shadow:var(--glow)}
.media__zoom:focus-visible{outline:2px solid rgba(154,167,255,.45); outline-offset:2px}

.divider{height:1px;background:var(--line);margin:18px 0}

/* Blocks */
.block{margin:0 0 18px}
.block__title{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.8px;
  font-size:18px;
  color:rgba(231,233,238,.96);
}
.list{
  margin:0;
  padding-left:18px;
  color:rgba(231,233,238,.92);
  line-height:1.85;
}
.list li{margin:6px 0}
.list--kpi li{
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:12px;
  list-style:disc;
}

/* Callout */
.callout{
  border:1px solid rgba(154,167,255,.18);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(154,167,255,.08), rgba(127,212,255,.04));
  padding:14px 14px;
}
.callout__label{
  font-size:12px;
  color:var(--muted2);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.callout__text{line-height:1.8}

/* Sidebar */
.sidebar{position:sticky; top:86px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px 18px;
  box-shadow:var(--shadow2);
}
.author{display:flex;gap:12px;align-items:center}
.avatar{
  width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line2);
  display:grid;place-items:center;
  font-weight:700;
  background:rgba(255,255,255,.03);
}
.author__name{font-weight:700}
.author__role{font-size:13px;color:var(--muted);margin-top:2px}
.author__loc{font-size:12px;color:var(--muted2);margin-top:2px}

.meta{display:flex;flex-direction:column;gap:10px}
.meta__row{display:flex;justify-content:space-between;gap:10px}
.meta__k{font-size:12px;color:var(--muted2)}
.meta__v{font-size:12px;color:rgba(231,233,238,.9)}

.subttl{
  font-size:12px;
  color:var(--muted2);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  color:rgba(231,233,238,.9);
}
.chip__dot{
  width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  font-size:10px;
  color:var(--muted2);
}

.share{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:rgba(231,233,238,.92);
  cursor:pointer;
}
.btn--primary{
  border-color:rgba(154,167,255,.35);
  background:linear-gradient(135deg, rgba(154,167,255,.16), rgba(127,212,255,.10));
}
.btn--primary:hover{box-shadow:var(--glow)}
.btn--ghost:hover{border-color:rgba(154,167,255,.22); background:rgba(255,255,255,.03)}
.btn:focus-visible{outline:2px solid rgba(154,167,255,.45); outline-offset:2px}

/* Works */
.works{margin-top:18px; padding-top:6px}
.works__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:18px 2px 12px;
}
.works__title{
  font-family:var(--serif);
  font-weight:700;
  margin:0;
  letter-spacing:.8px;
}
.works__desc{margin:0;color:var(--muted);font-size:13px}

.works__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.work{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow2);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}
.work:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(154,167,255,.22);
}
.work.is-active{
  border-color:rgba(154,167,255,.45);
  box-shadow:var(--glow);
}
.work__cover{
  height:130px;
  background:linear-gradient(135deg, rgba(154,167,255,.10), rgba(0,0,0,.0));
  border-bottom:1px solid var(--line);
  position:relative;
}
.work__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.9;
}
.work__body{padding:12px 12px 14px}
.work__title{
  margin:0 0 6px;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
}
.work__desc{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

/* Footer */
.footer{margin-top:22px}
.footer__inner{
  border-top:1px solid var(--line);
  padding:18px 4px 0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.footer__title{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.6px;
}
.footer__note{color:var(--muted);font-size:12px;margin-top:6px}
.footer__copy{color:var(--muted2);font-size:12px}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(231,233,238,.92);
  padding:10px 12px;
  border-radius:999px;
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow2);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(-6px);
}

/* Back to top */
.toTop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:rgba(231,233,238,.9);
  cursor:pointer;
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow2);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.toTop.is-show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.toTop:hover{border-color:rgba(154,167,255,.35); box-shadow:var(--glow)}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal.is-open{display:flex}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.modal__panel{
  position:relative;
  width:min(980px, calc(100% - 28px));
  max-height:calc(100% - 28px);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__title{
  font-family:var(--serif);
  letter-spacing:.6px;
  font-weight:700;
}
.modal__close{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:rgba(231,233,238,.92);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
}
.modal__close:hover{border-color:rgba(154,167,255,.35); box-shadow:var(--glow)}
.modal__body{
  padding:12px;
  overflow:auto;
}
.modal__body img{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
}
.modal__foot{
  padding:10px 14px 12px;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
  .works__grid{grid-template-columns:repeat(2, 1fr)}
  .hero__note{margin-left:0}
}
@media (max-width: 560px){
  .hero__title{font-size:30px}
  .works__grid{grid-template-columns:1fr}
  .topbar__inner{flex-direction:column;align-items:flex-start}
  .nav{width:100%;justify-content:flex-start;flex-wrap