:root {
  color-scheme: dark;
  --paper: #090a0d;
  --surface: #111318;
  --surface-raised: #171a21;
  --ink: #f1f3f9;
  --muted: #969caa;
  --line: #282c36;
  --accent: #c2d0ff;
  --focus: #9eaff2;
  font: 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, .button { cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
button:disabled { cursor: default; opacity: .4; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 4px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.brand-mark { width: 27px; height: 27px; fill: none; stroke: var(--accent); stroke-width: 1.4; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
.preview-banner, .simulation-banner { padding: 8px 20px; background: #12151d; border-bottom: 1px solid #262b37; text-align: center; font-size: 11px; color: #a4acc0; line-height: 1.6; }
.eyebrow { font-size: 11px; letter-spacing: .14em; font-weight: 500; color: #9aa6c2; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 48px; padding: 11px 21px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; }
.button.primary { background: #e4eaff; color: #161c2a; }
.button.primary:hover { background: #fff; }
.button.secondary { background: transparent; color: #e2e5ef; border-color: #353b49; }
.button.secondary:hover { border-color: #7b879f; background: #171b25; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }