:root, [data-theme="dark"] {
  --ch-bg:#0b0e14; --ch-text:#e6edf3; --ch-muted:#9aa;
  --ch-surface:rgba(18,23,33,0.92); --ch-input-bg:#11161f; --ch-border:#2a3340;
  --ch-sig-hot:#ff453a; --ch-sig-warm:#ff9f0a; --ch-sig-mid:#ffd60a; --ch-sig-cool:#40c8ff; --ch-sig-cold:#5e7bff; --ch-sig-none:#5b6675;
}
[data-theme="light"] {
  --ch-bg:#f4f1ea; --ch-text:#1b2430; --ch-muted:#5a6675;
  --ch-surface:rgba(255,252,245,0.92); --ch-input-bg:#fffcf5; --ch-border:#cfc8b8;
  --ch-sig-hot:#d11f1f; --ch-sig-warm:#e07000; --ch-sig-mid:#c79100; --ch-sig-cool:#1577c0; --ch-sig-cold:#3a44b8; --ch-sig-none:#9aa3ad;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ch-bg);
  color: var(--ch-text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
}

.lp-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--ch-border);
  background: var(--ch-surface); backdrop-filter: blur(8px);
  position: sticky; top: 0;
}
.lp-brand { font-weight: 700; letter-spacing: 0.02em; }
.lp-nav { display: flex; align-items: center; gap: 16px; }
.lp-nav a { color: var(--ch-text); text-decoration: none; }
.lp-nav a:hover { color: var(--ch-sig-cool); }
.lp-theme {
  background: var(--ch-input-bg); color: var(--ch-text);
  border: 1px solid var(--ch-border); border-radius: 8px;
  padding: 4px 8px; cursor: pointer; font-size: 15px;
}

.lp-main { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }
.lp-hero { text-align: center; padding: 24px 0 8px; }
.lp-hero h1 { font-size: 2.4rem; margin: 0 0 12px; }
.lp-lead { color: var(--ch-muted); font-size: 1.15rem; max-width: 620px; margin: 0 auto 24px; }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.lp-btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--ch-border); background: var(--ch-input-bg);
  color: var(--ch-text); text-decoration: none; font-weight: 600;
}
.lp-btn:hover { border-color: var(--ch-sig-cool); }
.lp-btn-primary { border-color: var(--ch-sig-cool); }

.lp-card {
  background: var(--ch-surface); border: 1px solid var(--ch-border);
  border-radius: 14px; padding: 20px 22px; margin: 22px 0;
}
.lp-card h2 { margin: 0 0 10px; font-size: 1.3rem; }
.lp-card a { color: var(--ch-sig-cool); }
.lp-links { margin: 0; padding-left: 20px; }
.lp-links li { margin: 6px 0; }

.lp-foot {
  text-align: center; color: var(--ch-muted);
  padding: 24px 20px 40px; border-top: 1px solid var(--ch-border);
}