:root {
      --bg: #0d0e0f;
      --bg2: #141618;
      --surface: #1a1c1e;
      --surface2: #202326;
      --text: #f2efe7;
      --text2: #b9b4a8;
      --text3: #7d776c;
      --accent: #c8a96e;
      --accent2: #e8c784;
      --cyan: #2196a8;
      --danger: #e05c5c;
      --border: rgba(255,255,255,0.10);
      --shadow: 0 24px 80px rgba(0,0,0,0.45);
      --radius: 22px;
      --max: 1160px;
      --glow1: rgba(200,169,110,0.14);
      --glow2: rgba(33,150,168,0.16);
      --glow3: rgba(200,169,110,0.08);
    }

    html[data-skin="camo"] {
      --bg: #10130e;
      --bg2: #171b13;
      --surface: #1d2319;
      --surface2: #252d20;
      --text: #f1f0df;
      --text2: #c6c2a4;
      --text3: #8d8a72;
      --accent: #a9b66f;
      --accent2: #d3df91;
      --cyan: #7aa37a;
      --border: rgba(213,223,145,0.12);
      --glow1: rgba(169,182,111,0.16);
      --glow2: rgba(76,107,67,0.20);
      --glow3: rgba(121,91,53,0.12);
    }

    html[data-skin="winter"] {
      --bg: #eef3f7;
      --bg2: #e6edf4;
      --surface: rgba(255,255,255,0.78);
      --surface2: rgba(241,247,252,0.92);
      --text: #14202b;
      --text2: #415161;
      --text3: #6f7b87;
      --accent: #2f7ea8;
      --accent2: #4eaad6;
      --cyan: #2b9ec0;
      --border: rgba(20,32,43,0.12);
      --shadow: 0 24px 80px rgba(24,57,88,0.18);
      --glow1: rgba(78,170,214,0.22);
      --glow2: rgba(47,126,168,0.18);
      --glow3: rgba(255,255,255,0.68);
    }

    html[data-skin="future"] {
      --bg: #080b14;
      --bg2: #0d1322;
      --surface: #111a2c;
      --surface2: #17243a;
      --text: #edf6ff;
      --text2: #a9bdd1;
      --text3: #71879d;
      --accent: #5ee1ff;
      --accent2: #9df1ff;
      --cyan: #8b5cff;
      --border: rgba(94,225,255,0.14);
      --glow1: rgba(94,225,255,0.20);
      --glow2: rgba(139,92,255,0.18);
      --glow3: rgba(94,225,255,0.10);
    }

    html[data-skin="neon"] {
      --bg: #100713;
      --bg2: #170b1f;
      --surface: #1d1027;
      --surface2: #291638;
      --text: #fff3ff;
      --text2: #d7b8dc;
      --text3: #9c7fa3;
      --accent: #ff4fd8;
      --accent2: #ffe066;
      --cyan: #42f5e9;
      --border: rgba(255,79,216,0.16);
      --glow1: rgba(255,79,216,0.20);
      --glow2: rgba(66,245,233,0.18);
      --glow3: rgba(255,224,102,0.10);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 18% 8%, var(--glow1), transparent 34%),
        radial-gradient(circle at 78% 20%, var(--glow2), transparent 30%),
        radial-gradient(circle at 50% 92%, var(--glow3), transparent 34%),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: min(var(--max), calc(100% - 36px));
      margin: 0 auto;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(18px);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 950;
      letter-spacing: -0.04em;
    }

    .mark {
      width: 40px;
      height: 40px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
      box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 12%, transparent);
      font-size: 22px;
      font-weight: 950;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      color: var(--text2);
      font-size: 14px;
      font-weight: 750;
    }

    .nav-links a:hover {
      color: var(--accent2);
    }

    .skinbar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .skinbtn {
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 76%, transparent);
      color: var(--text2);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .skinbtn.active {
      color: #111;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    }

    html[data-skin="winter"] .skinbtn.active {
      color: #f8fbff;
    }

    .hero {
      padding: 86px 0 52px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.22em;
      font-size: 12px;
      font-weight: 950;
      margin-bottom: 14px;
    }

    h1 {
      margin: 0;
      font-size: clamp(46px, 7vw, 82px);
      line-height: 0.94;
      letter-spacing: -0.07em;
      max-width: 780px;
    }

    .lead {
      margin: 24px 0 0;
      color: var(--text2);
      font-size: clamp(17px, 2vw, 21px);
      max-width: 680px;
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      font-weight: 900;
      font-size: 14px;
    }

    .btn-primary {
      color: #111;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    html[data-skin="winter"] .btn-primary {
      color: #f8fbff;
    }

    .btn-muted {
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      color: var(--text);
    }

    .terminal {
      border-radius: 30px;
      padding: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface2) 84%, transparent));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .terminal-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .dots {
      display: flex;
      gap: 7px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 99px;
      background: var(--accent);
      opacity: 0.9;
    }

    .terminal-label {
      color: var(--text3);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .codecard {
      border-radius: 22px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg) 76%, transparent);
      padding: 22px;
      min-height: 410px;
    }

    .line {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--text2);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px;
      margin: 0 0 12px;
      word-break: break-word;
    }

    .prompt {
      color: var(--accent);
      flex: 0 0 auto;
    }

    .ok {
      color: var(--cyan);
    }

    .section {
      padding: 58px 0;
    }

    .section-head {
      max-width: 780px;
      margin-bottom: 22px;
    }

    h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.04;
      letter-spacing: -0.055em;
    }

    .section-head p {
      margin: 14px 0 0;
      color: var(--text2);
      font-size: 16px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .card {
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      border: 1px solid var(--border);
      padding: 22px;
      box-shadow: 0 12px 45px rgba(0,0,0,0.16);
    }

    .card h3 {
      margin: 0 0 8px;
      font-size: 19px;
      letter-spacing: -0.03em;
    }

    .card p {
      margin: 0;
      color: var(--text2);
      font-size: 14px;
    }

    .icon {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 11%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
      font-weight: 950;
    }

    .app-card {
      position: relative;
      overflow: hidden;
      min-height: 260px;
    }

    .app-card::after {
      content: "";
      position: absolute;
      inset: auto -40px -80px auto;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%);
      pointer-events: none;
    }

    .status {
      display: inline-flex;
      border-radius: 999px;
      padding: 6px 10px;
      color: var(--accent);
      border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 18px;
    }

    .tagrow {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 18px;
    }

    .tag {
      display: inline-flex;
      border-radius: 999px;
      padding: 5px 9px;
      color: var(--text2);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface2) 68%, transparent);
      font-size: 11px;
      font-weight: 850;
    }

    .notice {
      border-color: color-mix(in srgb, var(--accent) 26%, transparent);
      background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
        color-mix(in srgb, var(--surface) 90%, transparent);
    }

    footer {
      padding: 42px 0 48px;
      border-top: 1px solid var(--border);
      color: var(--text3);
      font-size: 13px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .footer-links {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .footer-links a:hover {
      color: var(--accent2);
    }

    @media (max-width: 920px) {
      .hero-grid,
      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .nav-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
      }

      .nav-links {
        flex-wrap: wrap;
      }

      .hero {
        padding-top: 52px;
      }
    }

    @media (max-width: 520px) {
      .wrap {
        width: min(100% - 26px, var(--max));
      }

      .card,
      .terminal {
        border-radius: 20px;
      }

      .codecard {
        min-height: auto;
        padding: 18px;
      }

      .skinbar {
        gap: 6px;
      }

      .skinbtn {
        padding: 6px 8px;
      }
    }

/* Shared legal/content page support */
.content-header {
  padding: 72px 0 32px;
}

.content-main {
  padding-bottom: 32px;
}

.content-main p {
  color: var(--text2);
  margin: 0 0 12px;
}

.content-main ul {
  margin: 0 0 12px 20px;
  padding: 0;
  color: var(--text2);
}

.content-main li {
  margin: 7px 0;
}

.content-main h3 {
  margin: 22px 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.note {
  color: var(--text3);
  font-size: 13px;
}

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: 12px;
  font-weight: 850;
  margin: 4px 6px 4px 0;
}

.panel.warn,
.card.warn {
  border-color: rgba(232,165,80,0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(232,165,80,0.12), transparent 34%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

html[data-skin="winter"] .panel.warn,
html[data-skin="winter"] .card.warn {
  border-color: rgba(47,126,168,0.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(78,170,214,0.16), transparent 34%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.nav-links a.active {
  color: var(--accent2);
}

@media (max-width: 920px) {
  .content-header {
    padding-top: 46px;
  }
}