/* AstroMates web: semantic colours from apps/mobile/src/ui/tokens.ts.
   No framework, remote fonts, analytics, or required JavaScript. */
:root {
  color-scheme: light;
  --color-background: #fff;
  --color-surface: #fafafa;
  --color-surface-hover: #f3f3f3;
  --color-text: #0a0a0a;
  --color-text-secondary: #525252;
  --color-text-inverse: #fff;
  --color-text-inverse-secondary: #c9c9c9;
  --color-border: #e9e9e9;
  --color-control-border: #717171;
  --color-accent: #0a0a0a;
  --color-accent-hover: #353535;
  /* Sign card: one warm-neutral ramp (OKLCH hue 75, chroma 0.003 to 0.02).
     Card ink measures 7.3:1 on the wash, secondary text 7.0:1. */
  --color-tint-surface: #f5f2ed;
  --color-tint-end: #fdfcf9;
  --color-tint-ink: #574e44;
  --color-tint-line: #e4dfd7;
  --color-avatar: #f0e6da;
  --color-avatar-ink: #4d4031;
  /* Star dots are ink, like a printed star atlas. */
  --color-star: #0a0a0a;
  --text-display: clamp(2.5rem, 5.6vw, 4.75rem);
  --text-title: clamp(2rem, 3.5vw, 3rem);
  --text-heading: 1.375rem;
  --text-body: 1rem;
  --text-support: .875rem;
  --radius-card: 1.5rem;
  --radius-small: .875rem;
  /* Motion: one curve per purpose, reused everywhere. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --duration-press: 160ms;
  --duration-ui: 240ms;
  --duration-enter: 800ms;
  --font-devanagari: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", sans-serif;
}
* { box-sizing: border-box; }
button[hidden], .sign-switch[hidden] { display: none; }
html { scroll-padding-block-start: 2rem; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--text-display); line-height: 1.1; letter-spacing: -.045em; }
h2 { font-size: var(--text-title); line-height: 1.15; letter-spacing: -.035em; }
h3 { font-size: var(--text-heading); line-height: 1.35; letter-spacing: -.015em; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: from-font; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 5px; }
.inverse :focus-visible { outline-color: var(--color-text-inverse); }
::selection { background: var(--color-border); color: var(--color-text); }
img, svg { display: block; max-inline-size: 100%; }
img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.brand img, .orb-art { outline: none; }
.wrap { inline-size: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -6rem; z-index: 5; padding: .75rem 1rem; background: var(--color-background); }
.skip-link:focus { inset-block-start: 1rem; }
.site-header { padding-block: 1.5rem; background: transparent; border-block-end: 1px solid transparent; }
:lang(ne) { font-family: var(--font-devanagari); }
h1 .line { display: block; }
.header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.brand { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.75rem; text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -.025em; }
.brand img { inline-size: 2.75rem; block-size: 2.75rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--text-support); text-decoration: none; color: var(--color-text-secondary); }
.nav a[aria-current="page"] { color: var(--color-text); text-decoration: underline; }
.eyebrow { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-text-secondary); }
.lead { max-inline-size: 43ch; font-size: 1.125rem; color: var(--color-text-secondary); }
.secondary { color: var(--color-text-secondary); }
.small { font-size: var(--text-support); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .75rem; min-block-size: 2.875rem; padding: .7rem 1.25rem; border: 1px solid var(--color-control-border); border-radius: 999px; background: var(--color-background); color: var(--color-text); font-size: var(--text-support); font-weight: 600; text-decoration: none; line-height: 1.5; }
.button-primary { background: var(--color-accent); color: var(--color-text-inverse); border-color: var(--color-accent); }
.button svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
/* Both labels share one cell, so the button keeps its width when it morphs. */
.copy-button { display: inline-grid; }
.copy-label, .copy-done { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.copy-done, .copy-button[data-copied] .copy-label { opacity: 0; filter: blur(2px); }
.copy-button[data-copied] .copy-done { opacity: 1; filter: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.text-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 500; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4.5rem; padding-block: 4rem 6rem; }
.hero-copy { display: grid; justify-items: start; gap: 1.5rem; }
.hero-copy h1 { max-inline-size: 11ch; }
.release-note { font-size: var(--text-support); color: var(--color-text-secondary); }
.preview { padding: 1.75rem; border: 1px solid var(--color-border); border-radius: 2.5rem; background: var(--color-surface); }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.preview-greeting { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.avatar { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--color-avatar); color: var(--color-avatar-ink); font-weight: 600; }
.sign-card { position: relative; isolation: isolate; overflow: hidden; padding: 1.5rem; border: 1px solid var(--color-tint-line); border-radius: var(--radius-card); background: linear-gradient(130deg, var(--color-tint-surface), var(--color-tint-end)); }
.sign-top { display: flex; align-items: center; gap: .75rem; margin-block-end: 1.125rem; }
.sign-glyph { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--color-background); color: var(--color-tint-ink); font-size: 1.75rem; }
.sign-glyph svg { inline-size: 1.625rem; block-size: 1.625rem; }
.sign-name { font-weight: 600; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.025em; }
.sign-card .small { color: var(--color-tint-ink); }
.sign-faces { display: grid; }
.sign-face { grid-area: 1 / 1; position: relative; z-index: 1; }
.sign-face[lang="ne"] .sign-name { line-height: 1.5; }
.sign-face[lang="ne"] > p { line-height: 1.75; }
.sign-face[aria-hidden="true"] { opacity: 0; filter: blur(4px); }
.sign-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; inline-size: fit-content; margin-block-start: .75rem; margin-inline-start: auto; padding: .25rem; border-radius: 999px; background: var(--color-surface-hover); }
.sign-switch::before { content: ""; position: absolute; inset-block: .25rem; inset-inline-start: .25rem; inline-size: calc(50% - .25rem); border-radius: 999px; background: var(--color-background); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); pointer-events: none; }
.sign-switch[data-active="ne"]::before { transform: translateX(100%); }
.sign-switch button { position: relative; min-block-size: 2.5rem; min-inline-size: 5.5rem; padding-inline: 1rem; border: 0; border-radius: 999px; background: none; color: var(--color-text-secondary); font-size: var(--text-support); font-weight: 500; }
.sign-switch button[aria-pressed="true"] { color: var(--color-text); }
.sign-watermark { position: absolute; inset-inline-end: .75rem; inset-block-end: .25rem; z-index: -1; inline-size: 7.5rem; block-size: 7.5rem; color: var(--color-tint-line); opacity: .45; pointer-events: none; }
.week { margin-block-start: 1.5rem; }
.week-label { font-size: var(--text-support); font-weight: 600; margin-block-end: .75rem; }
.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: .625rem; align-items: end; }
.week-day { display: grid; justify-items: center; gap: .5rem; color: var(--color-text-secondary); font-size: .8125rem; }
.bar-track { display: flex; align-items: end; block-size: 4rem; inline-size: 100%; }
.bar { inline-size: 100%; border-radius: .375rem; background: var(--color-border); }
.bar-today { background: var(--color-text); }
.bar-45 { block-size: 45%; } .bar-40 { block-size: 40%; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .75rem; }
.group-head .week-label { margin: 0; }
.faces { display: flex; }
.faces span { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; margin-inline-start: -.375rem; border: 2px solid var(--color-surface); border-radius: 50%; font-size: .75rem; font-weight: 600; color: #3d3550; background: #e7dcf7; }
/* Each friend keeps their own pastel, as in the app's avatars. */
.faces span:nth-child(2) { background: #fbd9c9; color: #5a3424; }
.faces span:nth-child(3) { background: #cfeedd; color: #24493a; }
.faces span:nth-child(4) { background: #d6e6fb; color: #253d5c; }
.is-best { color: var(--color-text); font-weight: 600; }
.group-note { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-block-start: .875rem; font-size: var(--text-support); font-weight: 500; }
.streak { display: inline-flex; align-items: center; gap: .25rem; color: var(--color-text-secondary); }
.streak svg { inline-size: .875rem; block-size: .875rem; color: #c2410c; } .bar-55 { block-size: 55%; } .bar-60 { block-size: 60%; } .bar-65 { block-size: 65%; } .bar-75 { block-size: 75%; } .bar-85 { block-size: 85%; }
.preview figcaption { margin-block-start: 1.25rem; font-size: .8125rem; color: var(--color-text-secondary); }
.section { padding-block: 4.5rem; }
.section-heading { max-inline-size: 42rem; display: grid; gap: 1rem; margin-block-end: 2.5rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature { display: grid; align-content: start; gap: 1rem; padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.feature p { color: var(--color-text-secondary); }
.feature-icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-surface-hover); }
.feature-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.perspective { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3.5rem; border-radius: 2rem; background: var(--color-text); color: var(--color-text-inverse); }
.perspective-copy { display: grid; gap: 1.25rem; }
.perspective .eyebrow, .perspective p { color: var(--color-text-inverse-secondary); }
.orbit { position: relative; display: grid; place-items: center; inline-size: min(100%, 22rem); aspect-ratio: 1; margin-inline: auto; }
.orbit::before, .orbit::after { content: ""; position: absolute; border: 1px solid #353535; border-radius: 50%; pointer-events: none; }
.orbit::before { inset: 0; } .orbit::after { inset: 14%; }
.orb-art { inline-size: 80%; position: relative; }
/* Each path is a ring-sized box; rotating it carries the dot along the ring. */
.orbit-path { position: absolute; inset: 0; pointer-events: none; transform: rotate(-40deg); }
.orbit-path-inner { inset: 14%; transform: rotate(150deg); }
.orbit-dot { position: absolute; inset-block-start: -.25rem; inset-inline-start: calc(50% - .25rem); inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--color-text-inverse-secondary); }
.orbit-path-inner .orbit-dot { inline-size: .375rem; block-size: .375rem; inset-block-start: -.1875rem; opacity: .6; }
.stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.star { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: var(--s); block-size: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); }
.principles { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; }
.principles .section-heading { align-self: start; }
.principle-list { display: grid; gap: 1.75rem; }
.principle-list div { display: grid; gap: .5rem; }
.faq { max-inline-size: 48rem; margin-inline: auto; }
.faq h2 { margin-block-end: 2rem; }
details { border-block-end: 1px solid var(--color-border); padding-block: 1rem; }
summary { cursor: pointer; font-weight: 500; min-block-size: 2.75rem; padding-block: .5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
/* A plus that turns into a cross when open; native details keeps the state. */
summary::after { content: ""; flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
details[open] > summary::after { transform: rotate(45deg); }
details p { padding-block: .5rem 1rem; color: var(--color-text-secondary); max-inline-size: 65ch; }
.closing { text-align: center; padding-block: 4rem 5rem; display: grid; justify-items: center; gap: 1.125rem; }
.site-footer { border-block-start: 1px solid var(--color-border); padding-block: 2rem; }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 3rem; align-items: start; }
.footer-brand { display: grid; gap: .25rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer-links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--text-support); color: var(--color-text-secondary); }
/* Long-form documents use the same chrome, with a readable 68ch measure. */
.page-heading { max-inline-size: 49rem; padding-block: 3rem 2.5rem; display: grid; gap: 1rem; }
.page-heading h1 { font-size: var(--text-title); }
.doc-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 4rem; padding-block-end: 5rem; }
.contents { align-self: start; position: relative; }
.contents a[aria-current="location"] { color: var(--color-text); font-weight: 500; }
.contents-indicator { display: none; }
.contents p { font-size: var(--text-support); font-weight: 600; margin-block-end: .5rem; }
.contents a { display: block; padding-block: .5rem; min-block-size: 2.75rem; font-size: var(--text-support); color: var(--color-text-secondary); }
.prose { max-inline-size: 68ch; min-inline-size: 0; overflow-wrap: anywhere; }
.prose section { margin-block-start: 2.5rem; scroll-margin-block-start: 2rem; }
.prose h2 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.3; margin-block-end: 1rem; }
.prose h3 { font-size: 1.125rem; margin-block: 1.5rem .75rem; }
.prose p + p { margin-block-start: 1rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; margin-block: 1rem; }
.prose li + li { margin-block-start: .75rem; }
.prose p, .prose li { text-wrap: auto; }
.notice { padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.notice p { margin-block-start: .5rem; }
.contact-card { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-block: 1.5rem; display: grid; justify-items: start; gap: 1rem; }
.email-address { font-size: 1.375rem; font-weight: 500; overflow-wrap: anywhere; }
.status { min-block-size: 1.6em; color: var(--color-text-secondary); font-size: var(--text-support); }
.request-template { white-space: pre-wrap; font: inherit; line-height: 1.6; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-small); overflow-wrap: anywhere; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block-end: 4rem; }
.support-grid .contact-card { margin: 0; }
.support-grid h2 { font-size: var(--text-heading); line-height: 1.35; }
.support-grid p { color: var(--color-text-secondary); }
.support-intro { max-inline-size: 43rem; margin-block-end: 2rem; }

/* Star atlas: fine ink dots that twinkle, no nebula wash.
   Decorative, behind content; tints stay pale enough that
   no text pair changes. */
main { position: relative; isolation: isolate; }
.galaxy { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: min(62rem, 120vh); z-index: -1; overflow: hidden; pointer-events: none;  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.closing { position: relative; isolation: isolate; }
.galaxy-closing { inset-block: -2rem; block-size: auto; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.galaxy .star { background: var(--color-star); }

@media (hover: hover) {
  .nav a:hover, .footer-links a:hover, .contents a:hover { color: var(--color-text); text-decoration: underline; }
  .button:hover { background: var(--color-surface-hover); }
  .button-primary:hover { background: var(--color-accent-hover); }
}
/* ── Motion ───────────────────────────────────────────────────────────────
   Everything is opt-in under no-preference. Content is visible by default:
   reveals are only armed by script.js, so a failed or disabled script never
   hides anything. Reduced motion keeps short opacity fades and drops movement. */
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover svg { transform: translateY(2px); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button { transition-property: background-color, transform; transition-duration: var(--duration-press); transition-timing-function: ease-out; }
  .button:active { transform: scale(.97); }
  .button svg { transition: transform var(--duration-ui) var(--ease-out); }
  .sign-switch::before { transition: transform 280ms var(--ease-out); }
  .sign-switch button { transition: color var(--duration-ui) ease; }
  .sign-switch button:active { transform: scale(.97); }
  .sign-face { transition: opacity 320ms ease, filter 320ms ease, transform 320ms var(--ease-out); }
  .sign-face[aria-hidden="true"] { transform: translateY(4px); }
  .nav a, .footer-links a, .contents a { transition: color 150ms ease; }
  .copy-label, .copy-done { transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--ease-out); }
  .copy-done { transform: translateY(4px); }
  .copy-button[data-copied] .copy-done { transform: none; }
  .copy-button[data-copied] .copy-label { transform: translateY(-4px); }
  summary::after { transition: transform var(--duration-ui) var(--ease-out); }

  /* Page entrance: once per load, staggered by --i. */
  .enter { animation: rise var(--duration-enter) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .enter-preview { animation: rise-preview 1000ms var(--ease-out) 180ms both; }
  .bar { transform-origin: bottom; animation: grow 900ms var(--ease-out) both; animation-delay: calc(500ms + var(--i, 0) * 45ms); }
  .page-heading > * { animation: rise 600ms var(--ease-out) both; }
  .page-heading > :nth-child(2) { animation-delay: 50ms; }
  .page-heading > :nth-child(3) { animation-delay: 100ms; }
  .page-heading > :nth-child(4) { animation-delay: 150ms; }

  /* Scroll reveal, interruptible transitions. */
  [data-reveal] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  [data-reveal].is-pending { opacity: 0; transform: translateY(1.25rem); }

  /* Sign card: pointer tilt (script.js) with a sheen that follows it. */
  .sign-card[data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .7), transparent 60%); opacity: var(--sheen, 0); transition: opacity 400ms ease; }

  /* The dark panel's sky: the same quiet starfield as the app's Transits card. */
  .star { animation: twinkle var(--t) ease-in-out var(--d) infinite alternate, drift var(--dt) ease-in-out var(--d) infinite alternate; }
  .orbit-path { animation: orbit 48s linear infinite; }
  .orbit-path-inner { animation-duration: 32s; animation-direction: reverse; }
  .orb-art { animation: float 7s ease-in-out infinite alternate; }
  [data-sky][data-paused] * { animation-play-state: paused; }

  @supports selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 320ms var(--ease-out), opacity 240ms ease, content-visibility 320ms allow-discrete; }
    details[open]::details-content { block-size: auto; opacity: 1; }
  }
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
}
@media (prefers-reduced-motion: reduce) {
  .enter, .enter-preview, .page-heading > * { animation: fade 400ms ease both; }
  [data-reveal] { transition: opacity 400ms ease; }
  [data-reveal].is-pending { opacity: 0; }
  .sign-face { transition: opacity 200ms ease; }
  .sign-face[aria-hidden="true"] { filter: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.75rem); filter: blur(4px); } }
@keyframes rise-preview { from { opacity: 0; transform: translateY(1.5rem) scale(.98); } }
@keyframes grow { from { transform: scaleY(.25); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes twinkle { from { opacity: calc(var(--o) * .25); } to { opacity: var(--o); } }
@keyframes drift { to { translate: var(--dx) var(--dy); } }
@keyframes orbit { to { rotate: 360deg; } }
/* Depth: far stars lag the page more than near ones as the hero scrolls away. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .galaxy:not(.galaxy-closing) .galaxy-far { animation: lag-far linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .galaxy:not(.galaxy-closing) .galaxy-near { animation: lag-near linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
  @keyframes lag-far { to { transform: translateY(14rem); } }
  @keyframes lag-near { to { transform: translateY(6rem); } }
}

@keyframes float { from { transform: translateY(-.375rem); } to { transform: translateY(.375rem); } }
/* Header: picks up a hairline once the page scrolls (CSS scroll timeline). */
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-shade linear both; animation-timeline: scroll(root); animation-range: 0 4rem; }
  @keyframes header-shade { from { background-color: transparent; } to { background-color: rgb(255 255 255 / .88); border-block-end-color: var(--color-border); } }
  /* Reading progress on long documents. */
  body:has(.doc-layout)::after { content: ""; position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 20; block-size: 2px; background: var(--color-text); transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes progress { from { transform: scaleX(0); } }
}
@media (min-width: 46.0625rem) {
  html { scroll-padding-block-start: 7rem; }
  .site-header { position: sticky; inset-block-start: 0; z-index: 10; padding-block: 1rem; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); }
  .contents { position: sticky; inset-block-start: 6.5rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--color-border); }
  .contents-indicator { display: block; position: absolute; inset-block-start: 0; inset-inline-start: -1px; inline-size: 2px; block-size: 1px; background: var(--color-text); transform-origin: top; transform: translateY(var(--y, 0)) scaleY(var(--h, 0)); pointer-events: none; }
}
@media (min-width: 46.0625rem) and (prefers-reduced-motion: no-preference) {
  .contents-indicator { transition: transform 300ms var(--ease-in-out); }
}
@media (max-width: 62rem) {
  .hero { gap: 2rem; }
  .feature { padding: 1.25rem; }
  .perspective { padding: 2.5rem; gap: 2rem; }
  .principles { gap: 3rem; }
  .doc-layout { gap: 2rem; }
}
@media (max-width: 46rem) {
  .hero { grid-template-columns: 1fr; padding-block: 2.5rem 3rem; gap: 2.5rem; }
  .hero-copy h1 { max-inline-size: 13ch; }
  .preview { inline-size: 100%; max-inline-size: 30rem; margin-inline: auto; padding: 1.25rem; border-radius: 2.75rem; }
  .feature-grid, .principles, .perspective, .support-grid { grid-template-columns: 1fr; }
  .section { padding-block: 3rem; }
  .perspective { padding: 1.75rem; }
  .orbit { inline-size: min(100%, 16rem); }
  .principles { gap: 2rem; }
  .doc-layout { grid-template-columns: 1fr; gap: 2rem; }
  .contents { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .contents p { flex-basis: 100%; }
  .nav { gap: .25rem 1.25rem; }
}
@media (max-width: 25rem) {
  .sign-card { padding: 1rem; }
  .preview { padding: 1rem; border-radius: 2.5rem; }
  .week-bars { gap: .375rem; }
  .header-row { gap: .5rem; }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .button, .sign-card, .feature, .perspective, .notice { border: 1px solid CanvasText; }
  .bar { background: CanvasText; }
}
@media print {
  .site-header, .site-footer, .contents, .skip-link, .actions { display: none; }
  .doc-layout { display: block; }
  .wrap { inline-size: 100%; }
  .prose { max-inline-size: none; }
  .notice { break-inside: avoid; }
}