/* Chladni site theme: monochrome brand (logo kit) + Catppuccin, as in the desktop app.
   Light = Latte, dark = Mocha; header stays dark in both so the white logo reads. */

:root {
  --cx-base: #1e1e2e;     /* Mocha base: the app window background */
  --cx-mantle: #181825;
  --cx-crust: #11111b;
  --cx-radius: 10px;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cx-base);
  --md-primary-fg-color--light: #313244;
  --md-primary-fg-color--dark: var(--cx-crust);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #8839ef;              /* Latte mauve */
  --md-typeset-a-color: #1e66f5;              /* Latte blue */
  --md-default-bg-color: #eff1f5;             /* Latte base */
  --md-default-fg-color: #4c4f69;             /* Latte text */
  --md-code-bg-color: #e6e9ef;                /* Latte mantle */
  --md-code-fg-color: #4c4f69;
  --cx-card-bg: #ffffff;
  --cx-card-border: #ccd0da;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--cx-mantle);
  --md-primary-fg-color--light: #313244;
  --md-primary-fg-color--dark: var(--cx-crust);
  --md-primary-bg-color: #cdd6f4;
  --md-accent-fg-color: #cba6f7;              /* Mocha mauve */
  --md-typeset-a-color: #89b4fa;              /* Mocha blue */
  --md-default-bg-color: var(--cx-base);
  --md-default-fg-color: #cdd6f4;
  --md-default-fg-color--light: #bac2de;
  --md-default-fg-color--lighter: #7f849c;
  --md-default-fg-color--lightest: #45475a;
  --md-code-bg-color: var(--cx-mantle);
  --md-code-fg-color: #cdd6f4;
  --md-footer-bg-color: var(--cx-crust);
  --md-footer-bg-color--dark: #0b0b12;
  --cx-card-bg: var(--cx-mantle);
  --cx-card-border: #313244;
}

.md-header, .md-tabs { background-color: var(--md-primary-fg-color); }
.md-header__button.md-logo img { height: 1.6rem; }
.md-typeset h1, .md-typeset h2 { font-weight: 700; letter-spacing: -0.01em; }
.md-typeset .md-button { border-radius: 999px; }

/* ---------------------------------------------------------------- changelog */
.md-typeset .release-date { color: var(--md-default-fg-color--light); font-size: 0.8rem; }
.md-typeset .release-tag {
  margin-left: 0.5em; padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  color: var(--md-default-bg-color); background: var(--md-accent-fg-color);
}

/* ---------------------------------------------------------------- home page */
.cx-hero {
  position: relative; overflow: hidden; color: #ffffff;
  background: radial-gradient(ellipse at 50% 0%, #313244 0%, var(--cx-base) 55%, var(--cx-crust) 100%);
}
.cx-hero__sand { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; cursor: pointer; }
.cx-hero__inner {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 4.5rem 1rem 4rem; pointer-events: none;
}
.cx-hero__inner a { pointer-events: auto; }
.cx-hero__logo { width: 88px; height: 88px; margin-bottom: 1rem; }
.cx-hero h1 { margin: 0; font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; }
.cx-hero__lead { max-width: 40rem; margin: 1rem 0 1.8rem; font-size: 1.05rem; line-height: 1.6; color: #bac2de; }
.cx-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.cx-hero .md-button { color: #ffffff; border-color: rgba(255, 255, 255, 0.45); border-radius: 999px; }
.cx-hero .md-button--primary { color: var(--cx-base); background: #ffffff; border-color: #ffffff; }
.cx-hero .md-button:hover { color: var(--cx-base); background: #cba6f7; border-color: #cba6f7; }

.md-typeset .cx-section { margin: 2.5rem 0; }
.md-typeset .cx-section:first-child { margin-top: 0; }
.md-typeset .cx-section h2 { margin-top: 0; text-align: center; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.md-typeset .cx-card {
  padding: 1.1rem 1.2rem; border: 1px solid var(--cx-card-border); border-radius: var(--cx-radius);
  background: var(--cx-card-bg);
}
.md-typeset .cx-card h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.md-typeset .cx-card p { margin: 0; font-size: 0.8rem; line-height: 1.55; }

.cx-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }
.md-typeset .cx-shots figure { margin: 0; }
.md-typeset .cx-shots img {
  border: 1px solid var(--cx-card-border); border-radius: var(--cx-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.md-typeset .cx-shots figcaption { max-width: none; font-size: 0.75rem; }

.md-typeset .cx-verify { text-align: center; }
.md-typeset .cx-verify p { max-width: 42rem; margin: 0.5rem auto 1rem; }

@media screen and (max-width: 44.9375em) {
  .cx-hero h1 { font-size: 2.3rem; }
  .cx-hero__inner { padding: 3rem 1rem; }
}