/* Generated by packages/ui (pnpm --filter @thylas/ui build:css). Do not edit; edit src/tokens.ts. */

:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f6f5f2;
  --color-surface: #ffffff;
  --color-surface-sunken: #eceae5;
  --color-ink: #1f2125;
  --color-ink-muted: #52575e;
  --color-line: #d9d6cf;
  --color-line-strong: #767a80;
  --color-nav-bg: #1f2125;
  --color-nav-active-bg: #383c42;
  --color-nav-ink: #f4f3ef;
  --color-nav-muted: #b8bdc3;
  --color-nav-focus: #9cc2ff;
  --color-accent: #1a4f8f;
  --color-accent-hover: #143e70;
  --color-accent-ink: #ffffff;
  --color-focus: #1a5fc2;
  --color-danger: #b02a1f;
  --color-danger-bg: #fcebe8;
  --color-warning: #7d4a00;
  --color-warning-bg: #fdf1db;
  --color-success: #1c6636;
  --color-success-bg: #e6f3ea;
  --color-info: #1a4f8f;
  --color-info-bg: #e7eff9;
  --color-mark-bg: #ffe58f;
  --color-mark-active-bg: #f2c230;
  --color-mark-ink: #1f2125;
  --color-diff-add-bg: #e4f3e8;
  --color-diff-add-strong: #b5dfc1;
  --color-diff-del-bg: #fbe9e6;
  --color-diff-del-strong: #f1c3bb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #121417;
    --color-surface: #1b1d21;
    --color-surface-sunken: #25282d;
    --color-ink: #eceae6;
    --color-ink-muted: #a9afb6;
    --color-line: #353940;
    --color-line-strong: #80868d;
    --color-nav-bg: #0b0c0e;
    --color-nav-active-bg: #272a30;
    --color-nav-ink: #eceae6;
    --color-nav-muted: #a9afb6;
    --color-nav-focus: #9cc2ff;
    --color-accent: #94bcf4;
    --color-accent-hover: #b7d2f8;
    --color-accent-ink: #0d1b2e;
    --color-focus: #9cc2ff;
    --color-danger: #ff9d91;
    --color-danger-bg: #3b1915;
    --color-warning: #f1c172;
    --color-warning-bg: #33260d;
    --color-success: #83d39e;
    --color-success-bg: #122a1b;
    --color-info: #94bcf4;
    --color-info-bg: #14233a;
    --color-mark-bg: #f3d36b;
    --color-mark-active-bg: #ffbf3d;
    --color-mark-ink: #1f2125;
    --color-diff-add-bg: #13301e;
    --color-diff-add-strong: #1f5734;
    --color-diff-del-bg: #3b1915;
    --color-diff-del-strong: #6a2a23;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121417;
  --color-surface: #1b1d21;
  --color-surface-sunken: #25282d;
  --color-ink: #eceae6;
  --color-ink-muted: #a9afb6;
  --color-line: #353940;
  --color-line-strong: #80868d;
  --color-nav-bg: #0b0c0e;
  --color-nav-active-bg: #272a30;
  --color-nav-ink: #eceae6;
  --color-nav-muted: #a9afb6;
  --color-nav-focus: #9cc2ff;
  --color-accent: #94bcf4;
  --color-accent-hover: #b7d2f8;
  --color-accent-ink: #0d1b2e;
  --color-focus: #9cc2ff;
  --color-danger: #ff9d91;
  --color-danger-bg: #3b1915;
  --color-warning: #f1c172;
  --color-warning-bg: #33260d;
  --color-success: #83d39e;
  --color-success-bg: #122a1b;
  --color-info: #94bcf4;
  --color-info-bg: #14233a;
  --color-mark-bg: #f3d36b;
  --color-mark-active-bg: #ffbf3d;
  --color-mark-ink: #1f2125;
  --color-diff-add-bg: #13301e;
  --color-diff-add-strong: #1f5734;
  --color-diff-del-bg: #3b1915;
  --color-diff-del-strong: #6a2a23;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
header { padding: 2rem 0 0; }
.home { display: inline-block; border-radius: 0.25rem; }
.logo { display: block; width: 10.5rem; height: auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; padding: 4rem 0 3.5rem; }
.eyebrow { margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
h1 { margin: 0 0 1.25rem; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 750; text-wrap: balance; }
.lead { margin: 0 0 2.25rem; max-width: 38rem; font-size: 1.1875rem; color: var(--color-ink-muted); }
.mark { display: none; width: 100%; max-width: 18rem; height: auto; justify-self: end; }
form { max-width: 34rem; scroll-margin-top: 2rem; }
.title { display: block; margin-bottom: 0.5rem; font-weight: 650; }
.field { display: flex; flex-wrap: wrap; gap: 0.75rem; }
input[type="email"] { flex: 1 1 15rem; min-width: 0; padding: 0.75rem 1rem; font: inherit; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: 0.5rem; }
input[aria-invalid="true"] { border-color: var(--color-danger); }
/* The button wears the brand ink: very dark grey on light, and light ink on dark. */
button { flex: 0 0 auto; padding: 0.75rem 1.25rem; font: inherit; font-weight: 650; color: var(--color-bg); background: var(--color-ink); border: 0; border-radius: 0.5rem; cursor: pointer; }
button:hover { background: var(--color-ink-muted); }
.note { margin: 0.875rem 0 0; font-size: 0.875rem; color: var(--color-ink-muted); }
.notice { margin: 0 0 1rem; padding: 0.75rem 1rem; color: var(--color-ink); border-left: 4px solid; border-radius: 0.25rem; }
.notice.ok { background: var(--color-success-bg); border-color: var(--color-success); }
.notice.err { background: var(--color-danger-bg); border-color: var(--color-danger); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 3rem 0 3.5rem; border-top: 1px solid var(--color-line); }
.features h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.features p { margin: 0; color: var(--color-ink-muted); }
footer { padding: 2rem 0 3rem; font-size: 0.875rem; color: var(--color-ink-muted); border-top: 1px solid var(--color-line); }
.missing { padding: 5rem 0; }
@media (min-width: 48rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); padding: 6rem 0 5rem; }
  .mark { display: block; }
}
/* The brand images are ink on transparent; in dark mode they turn to light ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-img { filter: invert(1); }
}