:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #191919;
  --muted: #595d56;
  --line: #dcdfd8;
  --accent: #176b45;
  --lime: #b5ec7c;
  --chart: #e5f0db;
  --chart-line: #cdddc3;
  --chart-trace: #52976b;
  --chart-text: #415a42;
  --gutter: clamp(18px, 5vw, 72px);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121212;
    --ink: #f2f2f2;
    --muted: #b2b2b2;
    --line: #343834;
    --accent: #a8dfb8;
    --chart: #263528;
    --chart-line: #364738;
    --chart-trace: #7da98a;
    --chart-text: #b3c8b0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121212;
  --ink: #f2f2f2;
  --muted: #b2b2b2;
  --line: #343834;
  --accent: #a8dfb8;
  --chart: #263528;
  --chart-line: #364738;
  --chart-trace: #7da98a;
  --chart-text: #b3c8b0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.5; }
h1, p, figure { margin: 0; }
img, picture { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; }
button, select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--lime); color: #191919; }

.wrap {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  background: var(--paper);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.github-link, .theme-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 560;
}

.github-link { padding: 0 6px; text-decoration: none; }
.theme-control { position: relative; }

.theme-control svg {
  position: absolute;
  left: 9px;
  pointer-events: none;
}

.theme-control::after {
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}

.theme-control select {
  min-height: 44px;
  padding-inline: 34px 24px;
  appearance: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.intro {
  display: grid;
  justify-items: center;
  padding-block: clamp(25px, 4.5vw, 56px) 34px;
  text-align: center;
}

.app-icon {
  border-radius: 22%;
  width: clamp(64px, 5vw, 72px);
  height: auto;
}

h1 {
  margin-top: 17px;
  font-size: clamp(2.625rem, 7vw, 5.75rem);
  font-weight: 690;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.intro-copy {
  margin-top: 13px;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  text-wrap: pretty;
}

.preview-nav {
  display: flex;
  justify-content: center;
}

.feature-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 2.4vw, 28px);
  margin-bottom: 17px;
}

.feature-tabs button {
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.feature-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--ink);
}

.preview-stage { position: relative; isolation: isolate; }

.chart-field {
  position: absolute;
  z-index: -1;
  inset: 78px 0 98px;
  display: grid;
  align-items: center;
}

.chart-field::before {
  position: absolute;
  z-index: -1;
  inset: -28% 0;
  background: radial-gradient(
    ellipse 64% 51% at 50% 50%,
    var(--chart) 30%,
    transparent 100%
  );
  content: "";
  pointer-events: none;
}

.demo-chart { color: var(--chart-text); font-size: 0.8125rem; }
.demo-chart figcaption { font-weight: 650; }
.demo-chart figcaption span { display: block; font-weight: 450; }

.demo-chart svg {
  display: block;
  width: 100%;
  height: clamp(170px, 21vw, 258px);
  margin-block: 12px 4px;
  overflow: visible;
}

.chart-grid, .chart-trace {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.chart-grid { stroke: var(--chart-line); stroke-width: 1; }
.chart-trace { stroke: var(--chart-trace); stroke-width: 2; stroke-linejoin: round; }
.chart-point { fill: var(--chart-trace); }
.chart-dates { display: flex; justify-content: space-between; }

.feature-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
  gap: 22px;
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.preview:has(.feature-tabs:not([hidden])) .feature-panels { grid-template-columns: 1fr; }

.feature-panel {
  container-type: inline-size;
  width: min(100%, 288px);
  justify-self: center;
  text-align: center;
}

.feature-panel .device-iphone-14-pro {
  margin-inline: auto;
  zoom: 0.63;
  filter: drop-shadow(0 16px 16px #0b160f26);
}

@supports (zoom: calc(100cqi / 428px)) {
  .feature-panel .device-iphone-14-pro {
    zoom: calc(100cqi / 428px);
  }
}

.feature-panel .device-screen {
  max-width: none;
  overflow: hidden;
  background: var(--paper);
}

.feature-panel .device-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-panel figcaption {
  margin-top: 13px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 580;
}

.sample-note {
  margin: 5px var(--gutter) 0;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}

.site-footer {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 52px;
  padding-block: 27px 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 1rem;
  text-align: center;
}

.site-footer a { color: var(--ink); }
.credit { margin-top: 8px; }

@media (max-width: 760px) {
  .chart-field { display: none; }
}

@media (max-width: 520px) {
  .site-header { min-height: 56px; gap: 11px; }
  .intro { padding-block: 25px 26px; }
  h1 { margin-top: 15px; }
  .intro-copy { margin-top: 9px; max-width: 28ch; }
  .feature-tabs { margin-bottom: 13px; }
  .feature-tabs button { padding-inline: 7px; font-size: 0.875rem; }
  .feature-panel { width: min(100%, 276px); }
  .site-footer { margin-top: 38px; padding-block: 21px 27px; }
}

@media (hover: hover) and (pointer: fine) {
  .github-link:hover { color: var(--ink); text-decoration: underline; }
  .feature-tabs button:hover { color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .feature-panel[role="tabpanel"] picture { animation: reveal-screen 160ms ease-out; }
  @keyframes reveal-screen { from { opacity: 0.72; } }
}

.site-nav, .footer-links, .page-index, .release-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.site-nav a {
  display: inline-grid;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: .875rem;
  text-decoration: none;
}

.site-nav a[aria-current="page"], .site-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-links { justify-content: center; }
.home-actions { display: grid; justify-items: center; gap: 8px; margin-top: 23px; }
.home-actions p { color: var(--muted); font-size: .875rem; }

.download-button {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  padding: 9px 20px;
  border-radius: 8px;
  background: var(--lime);
  color: #19271f;
  font-weight: 650;
  text-decoration: none;
}

.download-button:hover { background: #a7dc70; }

.content-page { max-width: 780px; min-height: 58vh; padding-block: clamp(24px, 6vw, 75px) 20px; }
.page-intro { margin-bottom: clamp(25px, 5vw, 45px); }
.page-intro h1 { margin: 0 0 12px; font-size: clamp(2.4rem, 7vw, 4.8rem); text-wrap: initial; }
.page-intro p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 55ch; }
.page-index { border-block: 1px solid var(--line); padding-block: 13px; }
.prose { max-width: 68ch; overflow-wrap: anywhere; }
.prose h2, .release-list h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.2; }
.prose p + p, .release-list p + p { margin-top: 10px; }
.prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .45em; }
.prose section, .release-list + .prose { margin-top: 32px; }
.prose a, .release-list a:not(.download-button), .page-index a { color: var(--accent); }
.release-list { border-block: 1px solid var(--line); padding: 20px 0; }
.release-entry { padding: 20px 0; overflow-wrap: anywhere; }
.release-entry + .release-entry { border-top: 1px solid var(--line); }
.release-list h2 + .release-entry { padding-top: 8px; }
.release-entry h2, .release-entry h3 { margin: 0 0 3px; }
.release-entry time { color: var(--muted); }
.release-actions { margin-top: 12px; }
.release-notes { margin-top: 12px; }
.release-notes summary { cursor: pointer; padding-block: 8px; }
.release-notes pre { white-space: pre-wrap; }
.release-notes li { margin-block: 4px; }

@media (max-width: 520px) {
  .site-nav { gap: 4px 12px; }
}

@media (max-width: 375px) {
  .site-header { gap: 6px; }
  .site-nav { gap: 4px 10px; }
  .theme-control select { width: 46px; padding: 0; font-size: 0; }
  .theme-control option { font-size: .875rem; }
}

.hero-download {
  grid-auto-flow: column;
  gap: 11px;
  min-height: 56px;
  padding-inline: 15px;
  border-radius: 11px;
}
.file-type {
  padding-left: 10px;
  border-left: 1px solid #19271f42;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.release-link { min-height: 28px; color: var(--accent); font-size: .875rem; }
.home-actions .download-version {
  color: var(--muted);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}