html:root {
  --brand: var(--app-accent);
  --brand-strong: color-mix(in srgb, var(--app-accent) 80%, #000);
  --brand-soft: color-mix(in srgb, var(--app-accent) 14%, transparent);
  --brand-contrast: #03141b;
  --text-brand: var(--app-accent);
  --text-link-hover: var(--app-accent);
  --border-focus: var(--app-accent);
  --surface-selected: color-mix(in srgb, var(--app-accent) 20%, transparent);
  --success-fg: var(--app-accent);
  --success-bg: color-mix(in srgb, var(--app-accent) 18%, transparent);
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--app-accent);
  --logo-dot: var(--app-accent);
}
::selection { background: color-mix(in srgb, var(--app-accent) 35%, transparent); color: var(--text-strong); }
:root {
  --ot-ink: var(--text-strong);
  --ot-body: color-mix(in srgb, var(--text-strong) 72%, var(--bg-page));
  --ot-muted: color-mix(in srgb, var(--text-strong) 52%, var(--bg-page));
  --ot-line: color-mix(in srgb, var(--text-strong) 9%, transparent);
  --ot-line-strong: color-mix(in srgb, var(--text-strong) 16%, transparent);
  --ot-card: color-mix(in srgb, var(--text-strong) 3%, var(--bg-page));
  --ot-accent: var(--app-accent);
  --ot-accent-soft: color-mix(in srgb, var(--app-accent) 12%, transparent);
  --ot-brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --ot-shadow: 0 1px 0 color-mix(in srgb, var(--text-strong) 4%, transparent) inset;
  --ot-shadow-lg: 0 0 0 1px var(--ot-line), 0 32px 80px -32px rgba(0,0,0,.7);
}
body {
  background-color: var(--bg-page);
  background-image: radial-gradient(56% 640px at 50% -120px, var(--ot-accent-soft), transparent 72%);
  background-repeat: no-repeat;
  color: var(--ot-body);
}
header.site { border-bottom-color: var(--ot-line); }
header.site nav { gap: 28px; }
header.site nav a, .header-actions > a:not(.btn) { font-size: 14px; color: var(--ot-body); transition: color .15s; }
header.site nav a:hover, .header-actions > a:not(.btn):hover { color: var(--ot-ink); text-decoration: none; }
.header-actions { gap: 24px; }
.header-actions .btn { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.brand-word { font-size: 19px; }
@media (max-width: 760px) {
  header.site .wrap { padding-block: 12px 0; }
  header.site nav {
    gap: 22px; padding-block: 8px 12px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}
.btn {
  padding: 12px 20px; border-radius: 10px; font-size: 14px; line-height: 20px;
  border-color: var(--ot-line-strong); background: var(--ot-card);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; border-color: color-mix(in srgb, var(--text-strong) 30%, transparent); color: var(--ot-ink); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.btn.primary:hover { background: color-mix(in srgb, var(--brand) 88%, var(--text-strong)); border-color: transparent; color: var(--brand-contrast); }
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 112px 0 80px;
}
.hero .cta-note {
  order: -1; margin: 0 0 28px; padding: 6px 14px;
  border: 1px solid var(--ot-line); border-radius: 999px; background: var(--ot-card);
  font-size: 13px; line-height: 1.4; color: var(--ot-body);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero .cta-note::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 0 3px var(--ot-brand-soft);
}
.hero h1 {
  font-size: clamp(42px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -0.045em;
  max-width: 11em; margin: 0 0 24px; text-wrap: balance;
}
.hero .lede { font-size: 18px; line-height: 1.6; max-width: 56ch; margin: 0 0 40px; color: var(--ot-body); }
.hero .cta { justify-content: center; }
.hero .cta .btn { padding: 14px 24px; font-size: 15px; }
.shot { margin: 72px 0 0; }
.shot-hero { margin: 0 0 128px; }
.shot img { border: 0; border-radius: 16px; box-shadow: var(--ot-shadow-lg); }
.shot figcaption {
  margin: 20px auto 0; max-width: 60ch; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--ot-muted);
}
section { padding: 128px 0; border-top-color: var(--ot-line); }
.eyebrow {
  font-size: 12px; letter-spacing: .12em; color: var(--ot-accent);
  margin: 0 0 16px;
}
section h2 {
  font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.035em;
  max-width: 24ch; margin: 0 0 20px; text-wrap: balance;
}
h2 + p.sub { font-size: 17px; line-height: 1.65; color: var(--ot-body); max-width: 58ch; margin: 0 0 56px; }
section:not(#faq) > :is(.eyebrow, h2, p.sub) { margin-left: auto; margin-right: auto; text-align: center; }
.grid { gap: 16px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card, .beat {
  background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: 16px;
  padding: 28px; box-shadow: var(--ot-shadow); transition: border-color .15s ease;
}
.card:hover, .beat:hover { border-color: var(--ot-line-strong); }
.card h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 8px; }
.card p, .beat p { font-size: 15px; line-height: 1.6; color: var(--ot-body); }
.beats { gap: 16px; }
.beat-n { margin-bottom: 12px; font-size: 12px; letter-spacing: .1em; color: var(--ot-accent); }
.afterbeats {
  max-width: 60ch; margin: 40px auto 0; text-align: center;
  font-size: 15px; line-height: 1.7; color: var(--ot-body);
}
.afterbeats strong { color: var(--ot-ink); }
#install .cta { justify-content: center; gap: 12px; }
#install .cta .btn.primary {
  padding: 14px 24px; font-size: 15px;
  background: var(--ot-brand-soft); color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}
#install .cta .btn.primary:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); border-color: var(--brand); color: var(--brand); }
#install .cta-note { max-width: 60ch; margin: 24px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ot-body); }
#install .cta-note + .cta-note { margin-top: 8px; }
#install .cta-note a, .afterbeats a, #install p.sub a { color: var(--ot-ink); text-decoration: underline; text-decoration-color: var(--ot-line-strong); text-underline-offset: 3px; }
#install .cta-note a:hover, .afterbeats a:hover, #install p.sub a:hover { color: var(--ot-accent); text-decoration-color: currentColor; }
#install .shot ~ p.sub { max-width: 64ch; margin: 32px auto 0; text-align: center; font-size: 13px; line-height: 2; color: var(--ot-muted); }
#install .shot ~ p.sub code { font-size: 12px; }
#faq dl.faq { border-top: 1px solid var(--ot-line); }
#faq dl.faq dt { margin: 0; padding: 24px 0 0; font-size: 17px; line-height: 1.4; color: var(--ot-ink); }
#faq dl.faq dd {
  margin: 8px 0 0; padding: 0 0 24px; border-bottom: 1px solid var(--ot-line);
  font-size: 15px; line-height: 1.7; color: var(--ot-body); max-width: 68ch;
}
#faq dd a { color: var(--ot-ink); text-decoration: underline; text-decoration-color: var(--ot-line-strong); text-underline-offset: 3px; }
#faq dd a:hover { color: var(--ot-accent); }
@media (min-width: 900px) {
  #faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start; }
  #faq > .eyebrow { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 96px; }
  #faq > h2 { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 32px; font-size: 40px; max-width: 12ch; position: sticky; top: 128px; }
  #faq > dl.faq { grid-column: 2; grid-row: 1; }
  #faq > .reading { grid-column: 2; grid-row: 2; }
}
#faq .reading {
  margin-top: 48px; padding: 24px 28px; border: 1px solid var(--ot-line); border-radius: 16px;
  background: var(--ot-card);
}
#faq .reading h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted); margin: 0 0 16px; }
#faq .reading ul { padding-left: 18px; margin: 0 0 16px; }
#faq .reading li { font-size: 15px; line-height: 1.5; color: var(--ot-muted); }
#faq .reading li + li { margin-top: 8px; }
#faq .reading p { font-size: 14px; }
#faq .reading a { color: var(--ot-ink); }
#faq .reading p a { color: var(--ot-accent); }
#faq .reading a:hover { color: var(--ot-accent); }
#get {
  margin: 0 0 96px; padding: 96px 32px; border: 1px solid var(--ot-line); border-radius: 24px;
  background:
    radial-gradient(60% 100% at 50% 0%, var(--ot-accent-soft), transparent 70%),
    var(--ot-card);
  text-align: center;
}
#get .cta { justify-content: center; }
#get .cta .btn { padding: 14px 24px; font-size: 15px; }
#get h2 + p.sub { margin-bottom: 40px; }
footer.site { margin-top: 0; border-top-color: var(--ot-line); }
footer.site .wrap { padding-top: 72px; padding-bottom: 56px; column-gap: 40px; row-gap: 40px; }
.footer-about .brand-word { font-size: 19px; }
.footer-about p { font-size: 14px; line-height: 1.6; color: var(--ot-muted); max-width: 34ch; margin-top: 16px; }
.footer-group { gap: 12px; }
.footer-group .eyebrow { color: var(--ot-muted); margin: 0 0 4px; font-size: 12px; }
footer.site .footer-group a { font-size: 14px; color: var(--ot-body); }
footer.site a:hover { color: var(--ot-ink); text-decoration: none; }
.footer-base { border-top-color: var(--ot-line); }
footer.site .footer-base .wrap { padding-top: 24px; padding-bottom: 40px; font-size: 13px; color: var(--ot-muted); }
footer.site .footer-base span > a:not(.social) { color: var(--ot-body); }
.doc { margin-inline: auto; max-width: 42rem; padding-block: 80px 128px; }
.doc.article { max-width: 42rem; }
.doc h1 {
  font-size: clamp(34px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.035em;
  margin: 0 0 20px; text-wrap: balance;
}
.doc h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; margin: 56px 0 12px; }
.doc p, .doc li, .doc.article p, .doc.article li { font-size: 17px; line-height: 1.7; color: var(--ot-body); }
.doc > p, .doc.article p, .doc.article ul, .doc > ul:not(.posts) { margin: 0 0 20px; }
.doc strong { color: var(--ot-ink); font-weight: var(--weight-medium); }
.doc a { color: var(--ot-ink); text-decoration: underline; text-decoration-color: var(--ot-line-strong); text-underline-offset: 3px; }
.doc a:hover { color: var(--ot-accent); text-decoration-color: currentColor; }
.doc a.btn { text-decoration: none; }
.doc a.btn.primary, .doc a.btn.primary:hover { color: var(--brand-contrast); }
.doc .updated, .doc .updated time { font-size: 13px; color: var(--ot-muted); margin: 0 0 40px; }
.doc .crumbs { font-size: 13px; margin: 0 0 16px; }
.doc .crumbs a { color: var(--ot-accent); text-decoration: none; }
.crumbs + h1 { margin-top: 0; }
.doc .cta { margin: 8px 0 24px; }
.doc code, section code { font-size: 0.82em; padding: 2px 6px; border-radius: 6px; border-color: transparent; background: color-mix(in srgb, var(--text-strong) 8%, transparent); color: var(--ot-ink); }
.doc ol.steps { margin: 8px 0 32px; gap: 16px; }
.doc ol.steps li { padding-left: 44px; margin: 0; }
.doc ol.steps li::before {
  top: 2px; width: 28px; height: 28px; font-size: 13px;
  background: var(--ot-accent-soft); border-color: transparent; color: var(--ot-accent);
}
.doc .tablewrap { margin: 24px 0 32px; border: 1px solid var(--ot-line); border-radius: 12px; background: var(--ot-card); }
.doc table { margin: 0; font-size: 15px; }
.doc th, .doc td { padding: 14px 16px; border-bottom-color: var(--ot-line); line-height: 1.6; font-size: 15px; }
.doc th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ot-muted); }
.doc tr:last-child td { border-bottom: 0; }
.doc .lede { font-size: 18px; line-height: 1.6; color: var(--ot-body); margin: 0; }
.doc .posts { margin: 48px 0 0; }
.doc .posts li { padding-block: 32px; border-top-color: var(--ot-line); }
.doc .posts li:last-child { border-bottom: 1px solid var(--ot-line); }
.doc .posts time { font-size: 13px; color: var(--ot-muted); }
.doc .posts h2 { font-size: 24px; line-height: 1.25; margin: 8px 0 12px; text-wrap: balance; }
.doc .posts h2 a { text-decoration: none; color: var(--ot-ink); }
.doc .posts h2 a:hover { color: var(--ot-accent); }
.doc .posts p { font-size: 15px; line-height: 1.65; margin: 0; }
.doc .posts .more { margin-top: 16px; font-size: 14px; color: var(--ot-accent); text-decoration: none; }
.doc .posts .more:hover { text-decoration: underline; }
.doc .related { margin-top: 56px; padding: 24px 28px; border: 1px solid var(--ot-line); border-radius: 16px; background: var(--ot-card); }
.doc .related h2 { margin: 0 0 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted); }
.doc .related ul { margin: 0; }
.doc .related li { font-size: 15px; }
@media (max-width: 899px) {
  section { padding: 80px 0; }
  .hero { padding: 72px 0 56px; }
  .shot-hero { margin-bottom: 80px; }
  .shot { margin-top: 48px; }
  #get { padding: 80px 24px; margin-bottom: 64px; }
}
@media (max-width: 640px) {
  .hero { padding: 48px 0 48px; }
  .hero .cta-note { margin-bottom: 24px; font-size: 12px; }
  .hero h1 { font-size: 42px; line-height: 1.04; }
  .hero .lede { font-size: 16px; line-height: 1.6; margin-bottom: 32px; }
  .hero .cta .btn { padding: 13px 20px; }
  section h2 { font-size: 32px; line-height: 1.1; }
  h2 + p.sub { font-size: 16px; margin-bottom: 40px; }
  .card, .beat { padding: 24px; }
  .card h3 { font-size: 17px; }
  #install .cta, #get .cta { flex-direction: column; align-items: stretch; }
  #install .cta .btn, #get .cta .btn { text-align: center; padding: 13px 18px; }
  #faq dl.faq dt { font-size: 16px; padding-top: 20px; }
  #faq dl.faq dd { padding-bottom: 20px; }
  #faq .reading { padding: 20px; }
  #get { padding: 64px 20px; border-radius: 20px; }
  .doc { padding-block: 48px 80px; }
  .doc h2 { font-size: 20px; margin-top: 44px; }
  .doc p, .doc li, .doc.article p, .doc.article li { font-size: 16px; }
  .doc .posts h2 { font-size: 20px; }
  .doc table { min-width: 0; table-layout: fixed; }
  .doc th, .doc td { padding: 12px; font-size: 14px; }
  .doc th:first-child, .doc td:first-child { width: 44%; }
  .doc td code { font-size: 12px; padding: 2px 4px; overflow-wrap: anywhere; }
  footer.site .wrap { padding-top: 56px; gap: 32px 20px; }
}
@media (max-width: 400px) {
  .hero .cta-note { padding: 5px 10px; gap: 6px; letter-spacing: -0.01em; text-wrap: balance; }
  .hero .cta .btn { padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .beat, .btn { transition: none; }
}