:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f5f5f5;
  --surface-3:#eaeaea;
  --surface-alpha:rgba(255,255,255,.82);
  --text:#171717;
  --muted:#4d4d4d;
  --faint:#8f8f8f;
  --accent:#006bff;
  --accent-hover:#005ff2;
  --accent-solid:#006bff;
  --accent-solid-hover:#005ff2;
  --accent-soft:#eaf2ff;
  --line:#00000014;
  --line-strong:#00000026;
  --success:#0e7a5f;
  --success-soft:#ecfdf5;
  --warning:#b45309;
  --warning-soft:#fffbeb;
  --danger:#c43b3b;
  --danger-soft:#fef2f2;
  --focus-ring:0 0 0 2px #ffffff,0 0 0 4px #006bff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 6px 16px rgba(0,0,0,.08);
  --max-w:1180px;
  --radius:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
[data-theme="dark"]{
  --bg:#000000;
  --surface:#000000;
  --surface-2:#1a1a1a;
  --surface-3:#292929;
  --surface-alpha:rgba(0,0,0,.82);
  --text:#ededed;
  --muted:#a0a0a0;
  --faint:#878787;
  --accent:#006efe;
  --accent-hover:#47a8ff;
  --accent-solid:#006efe;
  --accent-solid-hover:#005ff2;
  --accent-soft:rgba(0,110,254,.14);
  --line:#ffffff14;
  --line-strong:#ffffff26;
  --success:#00ac3a;
  --success-soft:rgba(0,172,58,.14);
  --warning:#ffae00;
  --warning-soft:rgba(255,174,0,.14);
  --danger:#e2162a;
  --danger-soft:rgba(226,22,42,.14);
  --focus-ring:0 0 0 2px #000000,0 0 0 4px #47a8ff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 16px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .2s ease,color .2s ease}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
::selection{background:var(--accent-solid);color:#fff}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.mono,code,kbd,pre,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;border:1px solid transparent;border-radius:var(--radius);font-weight:500;font-size:14px;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent-solid);color:#fff}
.btn-primary:hover{background:var(--accent-solid-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-lg{min-height:48px;padding:13px 20px;font-size:15px}
.icon-btn{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.icon-btn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.icon-btn:active{transform:scale(.96)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500}
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 24px;background:var(--surface-alpha);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--text)}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius);background:var(--accent-solid);color:#fff;font-size:16px;font-weight:600}
.back-link{color:var(--muted);font-size:13px;transition:color .15s ease}
.back-link:hover{color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}