@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f6f5f2;
  --surface: #fcfbf8;
  --text: #202329;
  --muted: #5c6067;
  --accent: #183b8c;
  --accent-ink: #f4f1e9;
  --error: #a33c35;
  --night: #121a2a;
  --night-2: #1b2539;
  --on-night: #f4f1e9;
  --on-night-muted: color-mix(in srgb, var(--night), var(--on-night) 74%);
  --promo-accent: #c9b8ed;
  --promo-surface: #f0ecf7;
  --raised: color-mix(in srgb, var(--surface), var(--text) 3.5%);
  --well: color-mix(in srgb, var(--bg), var(--text) 5%);
  --line: color-mix(in srgb, var(--surface), var(--text) 18%);
  --line-strong: color-mix(in srgb, var(--surface), var(--text) 26%);
  --selected: color-mix(in srgb, var(--surface), var(--accent) 10%);
  --wash: color-mix(in srgb, var(--surface), var(--accent) 6%);
  --action-hover: color-mix(in srgb, var(--accent), var(--accent-ink) 8%);
  --disabled: color-mix(in srgb, var(--bg), var(--text) 12%);
  --glass: color-mix(in srgb, var(--bg) 82%, transparent);

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --gap-label: var(--space-4);
  --gap-pair: var(--space-8);
  --gap-group: var(--space-16);
  --gap-block: var(--space-32);
  --gutter: var(--space-32);
  --page-max: 1120px;
  --page-top: var(--space-32);
  --page-end: var(--space-64);
  --section-space: var(--space-96);
  --heading-gap: var(--space-32);
  --card-pad: var(--space-24);
  --panel-pad: var(--space-64);
  --header-height: 64px;
  --shell-inline: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));

  --radius-micro: 4px;
  --radius-control-sm: 12px;
  --radius-control: 16px;
  --radius-card: 20px;
  --radius-screen: 28px;
  --radius-capsule: 999px;
  --control-height: 44px;
  --button-height-sm: 40px;
  --button-height-lg: 48px;
  --stroke: 1px;
  --stroke-focus: 2px;

  --f-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-hero: 600 clamp(40px, 2.4vw + 26px, 60px) / 1.05 var(--f-display);
  --tracking-hero: -0.03em;
  --opsz-hero: "opsz" 60, "wght" 600;
  --type-headline: 600 28px/34px var(--f-display);
  --tracking-headline: -0.3px;
  --type-section: 600 clamp(28px, 1.2vw + 18px, 40px) / 1.1 var(--f-body);
  --tracking-section: -0.025em;
  --type-title: 600 22px/28px var(--f-body);
  --tracking-title: -0.15px;
  --type-card: 600 17px/24px var(--f-body);
  --type-body: 400 17px/26px var(--f-body);
  --type-compact: 400 15px/22px var(--f-body);
  --type-control: 600 15px/20px var(--f-body);
  --type-nav: 500 15px/20px var(--f-body);
  --type-meta: 400 13px/18px var(--f-body);
  --tracking-meta: 0.05px;
  --type-caption: 500 13px/18px var(--f-body);
  --tracking-caption: 0.1px;
  --type-micro: 500 11px/16px var(--f-body);
  --tracking-micro: 0.15px;
  --type-metric: 600 32px/34px var(--f-body);
  --tracking-metric: -0.4px;
  --type-wordmark: 600 20px/24px var(--f-display);

  --motion-micro: 150ms;
  --motion-state: 300ms;
  --motion-enter: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0.05, 0.7, 0.1, 1);
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #141619;
    --surface: #22252a;
    --text: #f4f3f0;
    --muted: #b5b8be;
    --accent: #8fa7df;
    --accent-ink: #252320;
    --error: #e6867f;
    --night: #172036;
    --night-2: #1f2a43;
    --promo-surface: #292634;
    --raised: color-mix(in srgb, var(--surface), var(--text) 4%);
    --well: color-mix(in srgb, var(--bg), var(--text) 4%);
    --action-hover: color-mix(in srgb, var(--accent), var(--text) 14%);
  }
}
@media (width < 1024px) {
  :root {
    --page-max: 42rem;
    --page-top: var(--space-16);
    --page-end: var(--space-48);
    --section-space: var(--space-64);
    --heading-gap: var(--space-24);
    --panel-pad: var(--space-48);
    --header-height: 56px;
  }
}
@media (width < 600px) {
  :root {
    --gutter: var(--space-20);
    --card-pad: var(--space-20);
    --panel-pad: var(--space-32);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-16));
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  touch-action: manipulation;
}
:focus-visible {
  outline: var(--stroke-focus) solid var(--accent);
  outline-offset: var(--space-4);
}
::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nowrap {
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: var(--space-8) var(--space-16);
  border-radius: 0 0 var(--radius-control-sm) 0;
  background: var(--text);
  color: var(--bg);
  font: var(--type-control);
  text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: none;
}

.page-title {
  font: var(--type-hero);
  letter-spacing: var(--tracking-hero);
  font-optical-sizing: none;
  font-variation-settings: var(--opsz-hero);
  text-wrap: balance;
}
.lede {
  max-width: 36ch;
  color: var(--muted);
  font: var(--type-body);
  text-wrap: pretty;
}

.app-icon {
  --squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.00 50.00 L99.98 63.69 L99.94 68.06 L99.86 71.23 L99.75 73.81 L99.61 76.01 L99.44 77.94 L99.24 79.68 L99.01 81.26 L98.74 82.71 L98.44 84.05 L98.11 85.30 L97.74 86.46 L97.35 87.55 L96.91 88.57 L96.44 89.52 L95.94 90.43 L95.39 91.27 L94.81 92.07 L94.19 92.82 L93.53 93.53 L92.82 94.19 L92.07 94.81 L91.27 95.39 L90.43 95.94 L89.52 96.44 L88.57 96.91 L87.55 97.35 L86.46 97.74 L85.30 98.11 L84.05 98.44 L82.71 98.74 L81.26 99.01 L79.68 99.24 L77.94 99.44 L76.01 99.61 L73.81 99.75 L71.23 99.86 L68.06 99.94 L63.69 99.98 L50.00 100.00 L36.31 99.98 L31.94 99.94 L28.77 99.86 L26.19 99.75 L23.99 99.61 L22.06 99.44 L20.32 99.24 L18.74 99.01 L17.29 98.74 L15.95 98.44 L14.70 98.11 L13.54 97.74 L12.45 97.35 L11.43 96.91 L10.48 96.44 L9.57 95.94 L8.73 95.39 L7.93 94.81 L7.18 94.19 L6.47 93.53 L5.81 92.82 L5.19 92.07 L4.61 91.27 L4.06 90.43 L3.56 89.52 L3.09 88.57 L2.65 87.55 L2.26 86.46 L1.89 85.30 L1.56 84.05 L1.26 82.71 L0.99 81.26 L0.76 79.68 L0.56 77.94 L0.39 76.01 L0.25 73.81 L0.14 71.23 L0.06 68.06 L0.02 63.69 L0.00 50.00 L0.02 36.31 L0.06 31.94 L0.14 28.77 L0.25 26.19 L0.39 23.99 L0.56 22.06 L0.76 20.32 L0.99 18.74 L1.26 17.29 L1.56 15.95 L1.89 14.70 L2.26 13.54 L2.65 12.45 L3.09 11.43 L3.56 10.48 L4.06 9.57 L4.61 8.73 L5.19 7.93 L5.81 7.18 L6.47 6.47 L7.18 5.81 L7.93 5.19 L8.73 4.61 L9.57 4.06 L10.48 3.56 L11.43 3.09 L12.45 2.65 L13.54 2.26 L14.70 1.89 L15.95 1.56 L17.29 1.26 L18.74 0.99 L20.32 0.76 L22.06 0.56 L23.99 0.39 L26.19 0.25 L28.77 0.14 L31.94 0.06 L36.31 0.02 L50.00 0.00 L63.69 0.02 L68.06 0.06 L71.23 0.14 L73.81 0.25 L76.01 0.39 L77.94 0.56 L79.68 0.76 L81.26 0.99 L82.71 1.26 L84.05 1.56 L85.30 1.89 L86.46 2.26 L87.55 2.65 L88.57 3.09 L89.52 3.56 L90.43 4.06 L91.27 4.61 L92.07 5.19 L92.82 5.81 L93.53 6.47 L94.19 7.18 L94.81 7.93 L95.39 8.73 L95.94 9.57 L96.44 10.48 L96.91 11.43 L97.35 12.45 L97.74 13.54 L98.11 14.70 L98.44 15.95 L98.74 17.29 L99.01 18.74 L99.24 20.32 L99.44 22.06 L99.61 23.99 L99.75 26.19 L99.86 28.77 L99.94 31.94 L99.98 36.31Z'/%3E%3C/svg%3E");
  flex: none;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: var(--squircle) center / 100% 100% no-repeat;
  mask: var(--squircle) center / 100% 100% no-repeat;
}
@media (prefers-color-scheme: dark) {
  .app-icon {
    filter: drop-shadow(0 0 0.6px color-mix(in srgb, var(--text) 70%, transparent));
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-pair);
  min-height: var(--button-height-lg);
  padding: var(--space-12) var(--space-20);
  border: var(--stroke) solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--accent-ink);
  font: var(--type-control);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-micro) var(--ease-standard);
}
.button:hover {
  background: var(--action-hover);
}
.button-quiet {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}
.button-quiet:hover {
  background: var(--wash);
}
.button-quiet[aria-current] {
  border-color: var(--accent);
  background: var(--selected);
}
.button-sm {
  min-height: var(--button-height-sm);
  padding: var(--space-8) var(--space-16);
}
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-pair);
}
.store-buttons a {
  display: block;
  border-radius: var(--space-8);
  transition: opacity var(--motion-micro) var(--ease-standard);
}
.store-buttons a:hover {
  opacity: 0.85;
}
.store-buttons img {
  width: auto;
  max-width: 100%;
  height: var(--button-height-lg);
  object-fit: contain;
}
@media (width < 600px) {
  .store-buttons img {
    height: var(--control-height);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-height: var(--header-height);
  padding: var(--space-8) var(--shell-inline);
  transition: transform var(--motion-state) var(--ease-standard);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: var(--stroke) solid transparent;
  pointer-events: none;
  transition:
    background-color var(--motion-micro) var(--ease-standard),
    border-color var(--motion-micro) var(--ease-standard);
}
.site-header[data-scrolled]::before {
  background: var(--glass);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-12);
  min-height: var(--control-height);
  color: var(--text);
  text-decoration: none;
  font: var(--type-wordmark);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20, "wght" 600;
  letter-spacing: -0.2px;
}
.brand .app-icon {
  width: var(--space-32);
  height: var(--space-32);
}
.site-nav {
  margin-left: auto;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  color: var(--muted);
  font: var(--type-compact);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-micro) var(--ease-standard);
}
.footer-links a:hover {
  color: var(--text);
}
.flow-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--gap-pair);
  max-width: 240px;
  min-width: 0;
  margin-left: auto;
}
.flow-progress .track {
  flex: 1;
  min-width: 0;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-capsule);
  background: var(--line);
}
.flow-progress .fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--motion-state) var(--ease-standard);
}
.flow-progress span {
  color: var(--muted);
  font: var(--type-meta);
  letter-spacing: var(--tracking-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-flow] .site-header .site-nav {
  display: none;
}
@media (width < 1024px) {
  .site-header[data-hidden] {
    transform: translateY(calc(-100% - 2px));
  }
  .flow-progress {
    max-width: 180px;
  }
}

.site-main,
.site-footer {
  width: min(100% - 2 * var(--gutter), var(--page-max) - 2 * var(--gutter));
  margin-inline: auto;
}
.site-main {
  flex: 1;
  padding-block: var(--page-top) var(--page-end);
}
.section {
  margin-top: var(--section-space);
}
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
  max-width: 40rem;
  margin-bottom: var(--heading-gap);
}
.section-heading h2,
.final-panel h2 {
  font: var(--type-section);
  letter-spacing: var(--tracking-section);
  text-wrap: balance;
}
.section-heading p {
  max-width: 52ch;
}
.card {
  min-width: 0;
  padding: var(--card-pad);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.night-panel {
  border-radius: var(--radius-screen);
  background: radial-gradient(120% 120% at 50% 0%, var(--night-2), var(--night));
  color: var(--on-night);
}
.night-panel p {
  color: var(--on-night-muted);
}
.night-panel :focus-visible {
  outline-color: var(--on-night);
}
.final-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-group);
  margin-top: var(--section-space);
  padding: var(--panel-pad) var(--card-pad);
  text-align: center;
}
.final-panel p {
  max-width: 44ch;
  margin-bottom: var(--gap-group);
}
.final-panel .store-buttons {
  justify-content: center;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-pair) var(--space-24);
  padding-block: var(--gap-group) var(--gap-block);
  border-top: var(--stroke) solid var(--line);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-24);
}
.copyright {
  color: var(--muted);
  font: var(--type-compact);
}
@media (width < 1024px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (width < 600px) {
  .site-footer {
    align-items: center;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
}

@media screen {
  body:has(.download-bar:not([hidden])) {
    padding-bottom: var(--download-bar-h, 76px);
  }
  .download-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 34;
    display: flex;
    align-items: center;
    gap: var(--gap-pair);
    padding: var(--space-12) max(var(--space-12), env(safe-area-inset-right))
      calc(var(--space-12) + env(safe-area-inset-bottom)) max(var(--space-12), env(safe-area-inset-left));
    border-top: var(--stroke) solid var(--line);
    background: var(--surface);
    box-shadow: 0 -4px 20px color-mix(in srgb, var(--text) 6%, transparent);
  }
  .download-bar .app-icon {
    width: var(--control-height);
    height: var(--control-height);
  }
  .download-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }
  .download-info strong {
    font: var(--type-control);
  }
  .download-info span {
    color: var(--muted);
    font: var(--type-caption);
    letter-spacing: var(--tracking-caption);
  }
  .download-action {
    flex: none;
  }
}

.prose > * {
  max-width: 44rem;
}
.prose h1 {
  margin-bottom: var(--gap-pair);
}
.prose .last-updated,
.prose .lede {
  margin-bottom: var(--gap-block);
}
.prose .last-updated {
  color: var(--muted);
  font: var(--type-meta);
  letter-spacing: var(--tracking-meta);
}
.prose h2 {
  margin: var(--gap-block) 0 var(--gap-pair);
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
}
.prose p,
.prose ul {
  margin: 0 0 var(--space-12);
  color: var(--muted);
}
.prose ul {
  padding-left: var(--space-24);
}
.prose li + li {
  margin-top: var(--gap-label);
}

@media print {
  .site-header,
  .site-footer,
  .download-bar,
  .skip-link {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}