/* ============================================================
   OpenCharaAgent · Atrium — shared design language
   midnight blue, editorial, moonlit — dark by default
   ============================================================ */
@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:#060a14; --bg-tint:#0a1020; --surface:#0e1626; --surface-2:#121c30;
  --ink:#e8eefb; --ink-soft:#a6b4cf; --ink-faint:#66748f;
  --line:rgba(160,190,240,.12); --line-2:rgba(160,190,240,.22);
  --brand:#a9cdf1; --brand-ink:#c9e2fa; --brand-wash:rgba(150,190,240,.12); --on-brand:#0a1526;
  --moon:#dcebfa; --moon-soft:rgba(220,235,250,.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);
  --r-lg:22px; --r-md:14px; --r-sm:10px; --maxw:1240px;
  --ease:cubic-bezier(.22,.7,.2,1);
}
html[data-theme="light"]{
  --bg:#f4f7fb; --bg-tint:#edf2f9; --surface:#ffffff; --surface-2:#f7fafd;
  --ink:#14202f; --ink-soft:#4c5c72; --ink-faint:#8b99ad;
  --line:rgba(31,78,126,.12); --line-2:rgba(31,78,126,.20);
  --brand:#1F4E7E; --brand-ink:#173e66; --brand-wash:#e7f0f9; --on-brand:#ffffff;
  --moon:#1F4E7E; --moon-soft:#bcd6ec;
  --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);
}

*{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:var(--on-brand)}
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:.05; mix-blend-mode:screen;
  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="light"] .grain{mix-blend-mode:multiply; opacity:.035}
#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(--moon); flex:0 0 auto; filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--moon) 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:var(--on-brand); 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)}
footer .foot-note{margin-top:22px; font-size:.74rem; line-height:1.5; color:var(--ink-faint); opacity:.85}

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