/* Light by default; dark when chosen in the theme switch, or when the system is dark and nothing
   was chosen (data-theme is set by the script in <head>; the media query covers no JavaScript). */
:root {
  --bg: #FBFBFD;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;
  --border: #E5E5EA;
  --border-strong: #D2D2D7;
  --accent: #6A4BF0;
  --accent-hover: #5636D6;
  --on-accent: #FFFFFF;
  --nav-bg: rgba(251, 251, 253, 0.85);
  --cta-bg: #1D1D1F;
  --cta-text: #F5F5F7;
  --cta-secondary: #A1A1A6;
  --cta-button-bg: #FFFFFF;
  --cta-button-text: #1D1D1F;
  --kbd-bg: #F2F2F7;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0B0B0F;
  --surface: #16161A;
  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --border: #26262C;
  --border-strong: #3A3A42;
  --accent: #8E75FF;
  --accent-hover: #A796FF;
  --on-accent: #0B0B0F;
  --nav-bg: rgba(11, 11, 15, 0.8);
  --cta-bg: #16161A;
  --cta-text: #F5F5F7;
  --cta-secondary: #A1A1A6;
  --cta-button-bg: #F5F5F7;
  --cta-button-text: #0B0B0F;
  --kbd-bg: #222228;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0B0B0F;
    --surface: #16161A;
    --text: #F5F5F7;
    --text-secondary: #A1A1A6;
    --border: #26262C;
    --border-strong: #3A3A42;
    --accent: #8E75FF;
    --accent-hover: #A796FF;
    --on-accent: #0B0B0F;
    --nav-bg: rgba(11, 11, 15, 0.8);
    --cta-bg: #16161A;
    --cta-text: #F5F5F7;
    --cta-secondary: #A1A1A6;
    --cta-button-bg: #F5F5F7;
    --cta-button-text: #0B0B0F;
    --kbd-bg: #222228;
    color-scheme: dark;
  }
}

/* Screenshots come in light and dark versions; show the one matching the page. */
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .only-light { display: none; }
  :root:not([data-theme]) .only-dark { display: block; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.spacer { flex: 1; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: 0.5rem 1rem; border-radius: 8px; }

/* Nav */

.nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-row { min-height: 56px; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; }
.brand:hover { color: var(--text); }
.nav-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.nav-link:hover { color: var(--text); }

.theme-switch { display: inline-flex; padding: 2px; border: 1px solid var(--border-strong); border-radius: 980px; }
.theme-switch button {
  width: 32px; height: 28px; border: 0; border-radius: 980px; background: transparent;
  color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--kbd-bg); color: var(--text); }
.theme-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px; border-radius: 980px;
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); }
.button-small { min-height: 34px; padding: 0 16px; font-size: 14px; }
.button-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--border-strong); }
.button-outline:hover { background: transparent; color: var(--accent-hover); border-color: var(--accent); }
.button-inverse { background: var(--cta-button-bg); color: var(--cta-button-text); }
.button-inverse:hover { background: var(--cta-button-bg); color: var(--cta-button-text); opacity: 0.9; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

kbd {
  font-family: inherit; font-size: 0.9em;
  padding: 1px 7px; border-radius: 6px;
  background: var(--kbd-bg); border: 1px solid var(--border-strong);
}

/* Hero */

.hero { padding-top: 6rem; padding-bottom: 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hero h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; max-width: 14em; }
.lede { margin: 0; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-secondary); max-width: 34em; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.fine { margin: 0; font-size: 13px; color: var(--text-secondary); }

.overview { padding-top: 1rem; padding-bottom: 5rem; }
.overview img { width: 100%; }

/* How it works */

.band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how { padding-top: 6rem; padding-bottom: 6rem; display: flex; flex-direction: column; gap: 5rem; }
.section-head { text-align: center; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.eyebrow { margin: 0; font-size: 15px; font-weight: 600; color: var(--accent); }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; }

.feature-row { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 0.75rem; }
.feature-text h3 { margin: 0; font-size: 1.75rem; letter-spacing: -0.01em; line-height: 1.2; }
.feature-text p { margin: 0; font-size: 1.1rem; color: var(--text-secondary); }
.feature-media { flex: 2 1 480px; min-width: 0; }
.feature-media img { width: 100%; }
.feature-media.picker { flex: 1 1 360px; display: flex; justify-content: center; }
.feature-media.picker img { max-width: 432px; }

/* Rules */

.rules { padding-top: 6rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: 3rem; }
.section-lede { margin: 0; font-size: 1.1rem; color: var(--text-secondary); max-width: 38em; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.rules-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.rules-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text-secondary); padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); }
.rules-table td { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table .any { color: var(--text-secondary); }
.rules-table code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }
.rules-table .fallback td { background: var(--kbd-bg); }

.rules-detail { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.rules-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 1rem; }
.rules-text h3 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.rules-text p { margin: 0; color: var(--text-secondary); }
.conditions { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.conditions dt { font-weight: 600; }
.conditions dd { margin: 0.2rem 0 0; color: var(--text-secondary); }
.conditions code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }
.rules-media { flex: 1 1 420px; min-width: 0; }
.rules-media img { width: 100%; }

/* Features */

.features { padding-top: 6rem; padding-bottom: 6rem; display: flex; flex-direction: column; gap: 3rem; }
.features h2 { text-align: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card p { margin: 0; color: var(--text-secondary); }

/* Call to action */

.cta {
  margin-bottom: 6rem; padding: 4rem 2rem; border-radius: 28px;
  background: var(--cta-bg); color: var(--cta-text); border: 1px solid var(--border);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.cta h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.cta .button { margin-top: 0.5rem; }
.cta p { margin: 0; font-size: 13px; color: var(--cta-secondary); }

/* Footer */

.footer { border-top: 1px solid var(--border); }
.footer-row { padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 13px; color: var(--text-secondary); }
.footer-row a { color: var(--text-secondary); }
.footer-row a:hover { color: var(--text); }

@media (max-width: 640px) {
  .nav-link { display: none; }
  .hero { padding-top: 3.5rem; }
  .how { gap: 3.5rem; padding-top: 4rem; padding-bottom: 4rem; }
  .rules { padding-top: 4rem; gap: 2rem; }
  .feature-row.reverse { flex-direction: row; }
}