/* ============================================================
   LunaMoth · Atrium — shared design language
   light, editorial, moonlit — in the family of the README / Hermes
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --bg:#f4f5fa; --bg-tint:#eef0f8; --surface:#ffffff; --surface-2:#f8f9fd;
  --ink:#14151f; --ink-soft:#54586b; --ink-faint:#9398ad;
  --line:rgba(20,22,46,.10); --line-2:rgba(20,22,46,.17);
  --brand:#3a4ddb; --brand-ink:#2735b6; --brand-wash:#eef0ff;
  --moon:#7fb0d0; --moon-soft:#bfe0ef;
  --shadow-card:0 1px 2px rgba(18,20,45,.04), 0 8px 24px -10px rgba(18,20,45,.14);
  --shadow-lift:0 2px 6px rgba(18,20,45,.06), 0 30px 60px -24px rgba(18,20,45,.30);
  --r-lg:22px; --r-md:14px; --r-sm:10px; --maxw:1240px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
html[data-theme="dark"]{
  --bg:#080912; --bg-tint:#0c0e1b; --surface:#11131f; --surface-2:#161826;
  --ink:#ecedfb; --ink-soft:#a7abc6; --ink-faint:#6c7193;
  --line:rgba(150,160,220,.14); --line-2:rgba(150,160,220,.24);
  --brand:#8ea0ff; --brand-ink:#aab6ff; --brand-wash:rgba(110,125,255,.12);
  --moon:#8fb9d6; --moon-soft:rgba(143,185,214,.3);
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 40px 80px -28px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5; overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}
a{color:inherit; text-decoration:none}
::selection{background:var(--brand); color:#fff}
img{display:block; max-width:100%}

/* ---- ambient ---- */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 84% -6%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
    radial-gradient(820px 640px at 6% 4%, color-mix(in srgb, var(--moon) 26%, transparent), transparent 60%);
  transition:opacity .6s var(--ease);}
.grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
html[data-theme="dark"] .grain{mix-blend-mode:screen; opacity:.05}
#motes{position:fixed; inset:0; z-index:0; pointer-events:none}

.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 30px}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:blur(16px) saturate(1.2);
  background:color-mix(in srgb, var(--bg) 74%, transparent); border-bottom:1px solid var(--line);}
.topbar .row{max-width:var(--maxw); margin:0 auto; padding:15px 30px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:11px}
.brand .mk{width:25px; height:25px; color:var(--brand); flex:0 0 auto; filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--brand) 40%, transparent))}
.brand b{font-family:"Fraunces",serif; font-weight:600; font-size:1.12rem; letter-spacing:-.01em}
.brand .zh{color:var(--ink-faint); font-family:"Fraunces",serif; font-weight:400; font-size:.98rem}
.grow{flex:1}
.tag-chip{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:6px 12px; white-space:nowrap}
.tag-chip .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#3fc98a; margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(63,201,138,.5); animation:beat 2.8s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(63,201,138,.5)}70%{box-shadow:0 0 0 7px rgba(63,201,138,0)}100%{box-shadow:0 0 0 0 rgba(63,201,138,0)}}
.toggles{display:flex; gap:8px}
.tg{cursor:pointer; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-soft);
  height:36px; min-width:40px; padding:0 11px; border-radius:10px; font-family:"JetBrains Mono",monospace; font-size:.74rem;
  display:inline-grid; place-items:center; transition:.25s var(--ease)}
.tg:hover{color:var(--brand); border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-wash)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:"Inter",sans-serif; font-weight:500;
  font-size:.92rem; padding:12px 20px; border-radius:999px; border:1px solid transparent; transition:.25s var(--ease)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 22px -10px var(--brand)}
.btn-primary:hover{background:var(--brand-ink); transform:translateY(-1px); box-shadow:0 14px 30px -12px var(--brand)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 4px var(--brand-wash)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---- chips ---- */
.chip{font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-soft); white-space:nowrap}
.chip.brand{color:var(--brand); border-color:color-mix(in srgb,var(--brand) 40%, transparent); background:var(--brand-wash)}

/* ---- language switching ---- */
.zh-only{display:none}
html[lang="zh"] .en-only{display:none}
html[lang="zh"] .zh-only{display:inline}
html[lang="zh"] .zh-only.blk{display:block}
.en-only.blk{display:block}
html[lang="zh"]{font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif}

footer{position:relative; z-index:2; border-top:1px solid var(--line); margin-top:70px; padding:40px 0 80px; color:var(--ink-faint)}
footer .row{max-width:var(--maxw); margin:0 auto; padding:0 30px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-end}
footer .lede{max-width:560px; color:var(--ink-soft); font-family:"Fraunces",serif; font-style:italic; font-size:1.05rem; line-height:1.5}
footer .mono{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.04em; color:var(--ink-faint)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}