/* Copied from docs/design-system/tokens — keep in sync. Source of truth: docs/design-system. */
/* Webfonts — self-hosted Google Fonts (SIL OFL). Latin subset. */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/BebasNeue-Regular-CoNGBGqG.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/Inter-Latin-8kRkwJBP.woff2") format("woff2")}
:root{
/* Base — neutrals */
--ok-ink:#111111;
--ok-white:#ffffff;
--ok-soft-cloud:#f5f5f5;
--ok-charcoal:#39393b;
--ok-ash:#4b4b4d;
--ok-mute:#707072;
--ok-stone:#9e9ea0;
--ok-hairline:#cacacb;
--ok-hairline-soft:#e5e5e5;
/* Base — semantic */
--ok-red:#d30005;
--ok-red-deep:#780700;
--ok-green:#007d48;
--ok-green-bright:#1eaa52;
--ok-blue:#1151ff;
--ok-blue-deep:#0034e3;
/* Base — category accents (chips, swatch dots, editorial tiles only) */
--ok-accent-pink:#ed1aa0;
--ok-accent-pink-soft:#ffb0dd;
--ok-accent-purple-soft:#beaffd;
--ok-accent-purple-pale:#d6d1ff;
--ok-accent-teal:#0a7281;
--ok-accent-pink-deep:#4c012d;

/* Semantic aliases */
--color-primary:var(--ok-ink);
--color-on-primary:var(--ok-white);
--surface-canvas:var(--ok-white);
--surface-soft:var(--ok-soft-cloud);
--surface-inverse:var(--ok-ink);
--text-primary:var(--ok-ink);
--text-body:var(--ok-ink);
--text-soft:var(--ok-charcoal);
--text-secondary:var(--ok-mute);
--text-tertiary:var(--ok-stone);
--text-disabled:var(--ok-ash);
--text-inverse:var(--ok-white);
--text-inverse-secondary:var(--ok-stone);
--border-hairline:var(--ok-hairline);
--border-hairline-soft:var(--ok-hairline-soft);
--border-strong:var(--ok-ink);
/* Feedback — in OpenKeys: "error" = wrong note / missed, "success" = correct note / completed */
--feedback-error:var(--ok-red);
--feedback-error-pressed:var(--ok-red-deep);
--feedback-success:var(--ok-green);
--feedback-success-inverse:var(--ok-green-bright);
--feedback-info:var(--ok-blue);
--feedback-info-pressed:var(--ok-blue-deep);
}
:root{
--font-display:"Bebas Neue","Anton","Oswald","Arial Narrow",sans-serif;
--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

--weight-regular:400;
--weight-medium:500;

/* display-campaign — editorial hero lockups ONLY */
--type-display-size:96px;--type-display-lh:0.9;
--type-display-size-tablet:64px;--type-display-size-mobile:48px;
/* headings */
--type-heading-xl-size:32px;--type-heading-xl-lh:1.2;
--type-heading-lg-size:24px;--type-heading-lg-lh:1.2;
--type-heading-md-size:16px;--type-heading-md-lh:1.75;
/* body */
--type-body-size:16px;--type-body-lh:1.5;
/* buttons */
--type-button-lg-size:24px;--type-button-lg-lh:1.2;
--type-button-md-size:16px;--type-button-md-lh:1.5;
--type-button-sm-size:14px;--type-button-sm-lh:1.5;
/* link */
--type-link-size:16px;--type-link-lh:1.75;
/* captions */
--type-caption-md-size:14px;--type-caption-md-lh:1.5;
--type-caption-sm-size:12px;--type-caption-sm-lh:1.5;
/* utility / legal */
--type-utility-size:9px;--type-utility-lh:1.75;
}
:root{
--space-xxs:2px;
--space-xs:4px;
--space-sm:8px;
--space-md:12px;
--space-lg:18px;
--space-xl:24px;
--space-xxl:30px;
--space-section:48px;
--space-section-tablet:32px;
--space-section-mobile:24px;

--container-max:1440px;
--gutter-desktop:48px;
--gutter-ultrawide:80px;
--sidebar-filter:220px;
--nav-utility-h:36px;
--nav-primary-h:56px;
--control-h:48px;
--control-h-sm:40px;
--icon-button:40px;
--swatch-dot:12px;
}
:root{
/* Radii */
--radius-none:0px;
--radius-sm:18px;
--radius-md:24px;
--radius-lg:30px;
--radius-full:9999px;
--radius-card:var(--radius-none);
--radius-button:var(--radius-lg);
--radius-input:var(--radius-md);

/* Elevation — there are no drop shadows. */
--elevation-0:none;
--elevation-hairline:1px solid var(--ok-hairline);
--elevation-inset:inset 0 -1px 0 var(--ok-hairline-soft);
--focus-halo:0 0 0 12px var(--ok-soft-cloud);

/* Motion — minimal; the signature "tap collapse" is the only flourish */
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--press-scale:0.5; /* @kind other */
--press-opacity:0.5; /* @kind other */
}

/*
 * Styles for the static info pages (site/pages.mjs, built by scripts/build-site.mjs). Same design system as
 * the app: ink / white / soft-cloud, Inter 400/500, Bebas Neue for the hero line only, pill controls, square
 * flat blocks, no shadows, no hover tints, "tap collapse" press. Tokens are prepended at build time from
 * src/ui/design/tokens.css, so every colour here is a variable.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-canvas: var(--ok-ink);
    --surface-soft: var(--ok-charcoal);
    --color-primary: var(--ok-white);
    --color-on-primary: var(--ok-ink);
    --text-primary: var(--ok-white);
    --text-soft: var(--ok-hairline-soft);
    --text-secondary: var(--ok-stone);
    --border-hairline: var(--ok-ash);
    --border-hairline-soft: var(--ok-ash);
    --elevation-inset: inset 0 -1px 0 var(--ok-charcoal);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}
b, strong, th { font-weight: var(--weight-medium); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter-desktop); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-canvas);
  box-shadow: var(--elevation-inset);
}
.top .wrap { height: var(--nav-primary-h); display: flex; align-items: center; gap: var(--space-xl); }
.brand { font-weight: var(--weight-medium); font-size: 20px; line-height: 1; text-decoration: none; }
.top nav { display: flex; gap: var(--space-xl); margin-left: auto; align-items: center; }
.top nav a { text-decoration: none; font-weight: var(--weight-medium); white-space: nowrap; }
.top nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--text-primary); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--control-h); padding: 0 32px;
  border-radius: var(--radius-button);
  background: var(--surface-soft); color: var(--text-primary);
  font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.btn.sm { min-height: var(--control-h-sm); padding: 0 18px; font-size: var(--type-button-sm-size); }
.btn.primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn:active { transform: scale(var(--press-scale)); opacity: var(--press-opacity); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Sections */
main section { padding: var(--space-section) 0; }
main section + section { border-top: 1px solid var(--border-hairline-soft); }
.crumbs { margin: var(--space-xl) 0 0; color: var(--text-secondary); font-size: var(--type-caption-md-size); }
.crumbs a { text-decoration: none; }
.display {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--type-display-size); line-height: var(--type-display-lh);
  text-transform: uppercase; max-width: 20ch;
}
.lede { font-size: var(--type-heading-lg-size); line-height: 1.35; color: var(--text-soft); max-width: 40ch; margin: 0 0 var(--space-xxl); }
h2 { font-weight: var(--weight-medium); font-size: var(--type-heading-xl-size); line-height: var(--type-heading-xl-lh); margin: 0 0 var(--space-xl); }
h3 { font-weight: var(--weight-medium); font-size: var(--type-heading-md-size); line-height: var(--type-heading-md-lh); margin: 0 0 var(--space-xs); }
p { margin: 0 0 var(--space-md); max-width: 68ch; }
.note { color: var(--text-secondary); font-size: var(--type-caption-md-size); }
ul.plain { margin: 0; padding-left: 20px; max-width: 68ch; }
ul.plain li { margin-bottom: var(--space-sm); }

.shot { margin: var(--space-section) 0 0; background: var(--surface-soft); }
.shot figcaption { padding: var(--space-md) 0 0; color: var(--text-secondary); font-size: var(--type-caption-md-size); background: var(--surface-canvas); }

/* Feature tiles: square, flat, soft-cloud */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.tile { background: var(--surface-soft); padding: var(--space-xl); }
.tile p { margin: 0; color: var(--text-soft); }

/* Comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: 1px solid var(--border-hairline); }
thead th { font-size: var(--type-caption-md-size); color: var(--text-secondary); }
tbody th { width: 26%; }

/* FAQ: disclosure rows */
.faq { border-top: 1px solid var(--border-hairline); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--border-hairline); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: var(--space-xl) 0; font-weight: var(--weight-medium); line-height: var(--type-heading-md-lh);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform var(--duration-base) var(--ease-standard); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .a { padding-bottom: var(--space-xl); }

/* Link list (related pages) */
.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.links a { display: block; background: var(--surface-soft); padding: var(--space-xl); text-decoration: none; }
.links a span { display: block; color: var(--text-secondary); font-size: var(--type-caption-md-size); }

/* Footer */
footer { border-top: 1px solid var(--border-hairline); padding: var(--space-section) 0 var(--space-xl); color: var(--text-secondary); }
footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
footer .cols div { display: flex; flex-direction: column; gap: var(--space-md); }
footer .cols b { color: var(--text-primary); }
footer .cols a { text-decoration: none; font-weight: var(--weight-medium); font-size: var(--type-caption-md-size); }
footer .legal { border-top: 1px solid var(--border-hairline); margin-top: var(--space-section); padding-top: var(--space-md); font-size: var(--type-caption-sm-size); }

@media (max-width: 1023px) {
  .display { font-size: var(--type-display-size-tablet); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main section { padding: var(--space-section-tablet) 0; }
}
@media (max-width: 599px) {
  .wrap { padding: 0 16px; }
  .display { font-size: var(--type-display-size-mobile); }
  .lede { font-size: 20px; }
  h2 { font-size: var(--type-heading-lg-size); }
  .tiles, .links, footer .cols { grid-template-columns: 1fr; }
  main section { padding: var(--space-section-mobile) 0; }
  .top nav .hide-sm { display: none; }
  .top .wrap { gap: var(--space-md); }
  .top nav { gap: var(--space-md); }
}