/* src/theme-tokens.css */
/*
  UXPIN THEME TOKENS - integrated with the Wire theme editor.
  This file is the single source of truth for the design: every color, font,
  radius and shadow lives here as a CSS variable.
  KEEP THE STRUCTURE: exactly one "html:root:not(.dark)" block (light scheme)
  and one "html:root.dark" block (dark scheme), one "--token: value;" per line.
  Change VALUES or add/remove token lines - never rename or merge the blocks.
  Tailwind utilities read these through tailwind.config.js (bg-bg, text-text,
  bg-primary, font-display, ...), so editing a token restyles the whole page.
*/
html:root:not(.dark) {
  --color-bg: #f1f5fa;
  --color-surface: #ffffff;
  --color-text: #0f1a27;
  --color-muted: #52657d;
  --color-primary: #12608f;
  --color-primary-contrast: #ffffff;
  --color-accent: #0b6f66;
  --color-border: #dce5ef;
  --color-hero-ink: #eef4fb;
  --color-hero-ink-dim: rgb(226 237 250 / 0.76);
  --color-hero-signal: #6fc3ee;
  --color-hero-signal-contrast: #04121e;
  --color-hero-cool: #8ee0cf;
  --color-panel: rgb(4 10 20 / 0.44);
  --color-hairline: rgb(238 244 251 / 0.2);
  --color-ink-shadow: rgb(2 8 16 / 0.6);
  --color-night: #060d1a;
  --color-sunspill: rgb(255 200 130 / 0.24);
  --color-skyspill: rgb(90 160 220 / 0.12);
  --color-glow: rgb(18 96 143 / 0.1);
  --display-font: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body-font: "IBM Plex Sans", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --shadow-sm: 0px 1px 2px 0px rgba(15, 26, 39, 0.07);
  --shadow-md: 0px 18px 44px -22px rgba(15, 26, 39, 0.26);
  --color-scrim: rgb(3 5 10 / 0.7);
}
html:root.dark {
  --color-bg: #060d1a;
  --color-surface: #0c1628;
  --color-text: #e6edf7;
  --color-muted: #8598b4;
  --color-primary: #6fc3ee;
  --color-primary-contrast: #04121e;
  --color-accent: #8ee0cf;
  --color-border: #17263c;
  --color-hero-ink: #eef4fb;
  --color-hero-ink-dim: rgb(226 237 250 / 0.76);
  --color-hero-signal: #6fc3ee;
  --color-hero-signal-contrast: #04121e;
  --color-hero-cool: #8ee0cf;
  --color-panel: rgb(4 10 20 / 0.44);
  --color-hairline: rgb(238 244 251 / 0.2);
  --color-ink-shadow: rgb(2 8 16 / 0.6);
  --color-night: #060d1a;
  --color-sunspill: rgb(255 219 168 / 0.3);
  --color-skyspill: rgb(120 185 240 / 0.12);
  --color-glow: rgb(111 195 238 / 0.16);
  --display-font: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body-font: "IBM Plex Sans", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  --shadow-md: 0px 22px 50px -24px rgba(0, 0, 0, 0.7);
  --color-scrim: rgb(3 5 10 / 0.7);
}


/* src/styles.css */
/*
  Custom CSS beyond Tailwind utilities: keyframes, pseudo-elements, complex
  selectors. Plain CSS only - @apply/@tailwind are not processed here.
  Colors and fonts must reference the tokens: var(--color-primary), etc.
*/

/* Native controls follow the scheme the scroll position has selected. */
html:root:not(.dark) { color-scheme: light; }
html:root.dark { color-scheme: dark; }

/*
  NOTHING here cross-fades color, background-color or border-color, on purpose.
  Those properties cannot run on the compositor: each one costs a main-thread
  style recalc and a paint on every frame of its transition, and the scheme flip
  changes them on the whole document at once. Profiling the scrub showed ~18
  such transitions stacked on the frames where the video is also decoding its
  largest pictures, which is what dropped frames around sunrise.

  The flip does not need easing anyway: main.js performs it while the video
  still covers the viewport, so there is nothing on screen to cross-fade. It is
  now a single instant restyle at a scroll position deliberately kept away from
  the stage boundaries. Hover feedback is instant for the same reason.
*/

/* Text sitting on the video. The caption is static and the clip ends in full
   daylight, so it has to stay legible over the bright frames too - but with a
   shadow, never by dimming the picture. There was a gradient scrim here that
   faded in from 50% of the scrub; it was a full-viewport translucent layer
   composited over every video frame from that point on, and its threshold sat
   right where the scrub started to stutter. A text-shadow costs nothing per
   frame because it is painted into the caption layer once. */
.over-media {
  text-shadow: 0 1px 2px var(--color-ink-shadow), 0 4px 12px var(--color-ink-shadow),
    0 16px 48px var(--color-ink-shadow);
}

/* ── Header ────────────────────────────────────────────────────────────
   Solid is the BASE state, so with JS off the bar is always readable.
   The transparent-over-video treatment is an enhancement, and it hands
   itself back once the scrub releases (.is-solid, set from the tick).      */
.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
html.js-scrub .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--color-hero-ink);
}
html.js-scrub .site-header.is-solid {
  background-color: var(--color-bg);
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

/* The day, as a rule across the top of the page. */
.day-progress__fill {
  transform: scaleX(0);
  transform-origin: left center;
}

/* ── Orbit scrub, fallback first ──────────────────────────────────────
   No JS (and no scrub class): the section is an ordinary block. The poster
   frame sits on top at its native ratio and the four stage captions stack
   vertically underneath it, which is also the reduced-motion presentation. */
.scrub__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scrub__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Orbit scrub, enhanced ────────────────────────────────────────────  */
html.js-scrub .scrub {
  height: 340vh;
}
html.js-scrub .scrub__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
html.js-scrub .scrub__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
html.js-scrub .scrub__captions {
  position: absolute;
  inset: 0;
}
/* The instrument strip only means anything while the scrub is live. */
.scrub__hud {
  display: none;
}
html.js-scrub .scrub__hud {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
/*
  One caption, pinned over the clip for the whole scrub. It does not change, so
  there is nothing here to animate, nothing to promote and nothing to write per
  frame. The film is the motion; the story is told by the real sections below.
*/
html.js-scrub .scrub__card {
  position: absolute;
  inset: 0;
}

/* Stage ticks in the instrument strip. Switched, not faded: an indicator that
   eases is two more animations on the boundary frame for no benefit. */
.scrub__tick {
  opacity: 0.34;
}
.scrub__tick.is-active {
  opacity: 1;
}

/* ── Afterglow ─────────────────────────────────────────────────────────
   The clip ends in full daylight and the page below it is space-dark, so the
   seam was a hard cut at the brightest frame. This is that daylight falling
   past the horizon onto the first section: a warm core offset to the right,
   where the sun sits in the last frame, over a broader cool wash for the
   atmosphere. Both centres sit ABOVE the top edge, so only the spill is seen.

   Deliberately a static background-image, not a scroll-driven layer. By the
   time this section is on screen the scrub has finished, so the sun is always
   at full strength here and animating it would cost frames to show nothing.
   As a background it also paints behind content with no stacking or
   pointer-events handling, once into the section's own layer, and never
   composites over a video frame. Gated on .js-scrub because the fallback
   shows the NIGHT poster, which no daylight should be spilling from.        */
/* isolation: the light sits at z-index -1 so the sections paint over it
   without either of them needing a z-index, and isolate keeps it from
   dropping behind the page background. */
.afterglow {
  position: relative;
  isolation: isolate;
}
.afterglow__light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Long falloff on purpose: the light carries well down the page rather than
     stopping at the first section. */
  height: 165vh;
  z-index: -1;
  pointer-events: none;
  transform-origin: top center;
}
html.js-scrub .afterglow__light {
  background-image: radial-gradient(
      115% 82% at 71% -6%,
      var(--color-sunspill) 0%,
      transparent 72%
    ),
    radial-gradient(175% 115% at 33% -14%, var(--color-skyspill) 0%, transparent 84%);
}

/* The bloom: the light swells as the seam crosses the screen, then settles.
   Driven by a scroll-driven view() timeline, so it runs on the compositor with
   no scroll listener, no rAF and no main-thread work at all - and it is
   transform and opacity only, the two properties that survived the profiling.
   Safe here in a way the old scrim was not: this sits BELOW the video, and by
   the time it is on screen the scrub has finished and its loop has halted, so
   it competes with no decoding. Browsers without animation-timeline just get
   the settled state, which is the element's base style. */
@keyframes afterglow-bloom {
  from {
    opacity: 0.3;
    transform: scaleY(0.86);
  }
  to {
    opacity: 1;
    transform: scaleY(1.06);
  }
}
@supports (animation-timeline: view()) {
  html.js-scrub .afterglow__light {
    animation: afterglow-bloom linear both;
    animation-timeline: view();
    /* Measured, not assumed: for an element taller than the viewport the entry
       phase spans roughly one viewport, not the element's 165vh. At 30% the
       bloom was over within ~216px, before the glow was properly in view; 80%
       spreads it across most of the seam's travel up the screen. */
    animation-range: entry 0% entry 80%;
  }
}

/* ── Request estimator slider ─────────────────────────────────────────  */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  /* muted, not border: a border-weight track all but disappears against the
     surface on the dark scheme, and you should be able to see the rail you
     are dragging along. */
  background: var(--color-muted);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 3px solid var(--color-bg);
  background: var(--color-primary);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 3px solid var(--color-bg);
  background: var(--color-primary);
  cursor: grab;
}
.range:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

/* ── FAQ disclosure ───────────────────────────────────────────────────  */
.faq summary {
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq__sign {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq details[open] .faq__sign {
  transform: rotate(45deg);
}

/* ── Reduced motion ───────────────────────────────────────────────────
   main.js never adds .js-scrub under this preference, but the overrides are
   here too so the presentation is correct even if the class arrives some
   other way: no sticky, no scrubbing, the poster held still and every
   caption stacked in the flow.                                            */
@media (prefers-reduced-motion: reduce) {
  .faq__sign {
    transition: none;
  }
  .afterglow__light {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.js-scrub .scrub {
    height: auto;
  }
  html.js-scrub .scrub__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  html.js-scrub .scrub__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }
  html.js-scrub .scrub__captions {
    position: static;
    inset: auto;
  }
  html.js-scrub .scrub__hud {
    display: none;
  }
  html.js-scrub .scrub__card {
    position: static;
    inset: auto;
  }
  html.js-scrub .site-header {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
  }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: var(--mono-font);
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.top-0 {
  top: 0px;
}
.top-\[43\%\] {
  top: 43%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-50 {
  z-index: 50;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-\[2px\] {
  height: 2px;
}
.h-full {
  height: 100%;
}
.w-11 {
  width: 2.75rem;
}
.w-20 {
  width: 5rem;
}
.w-52 {
  width: 13rem;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-\[15ch\] {
  max-width: 15ch;
}
.max-w-\[46ch\] {
  max-width: 46ch;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-sm {
  max-width: 24rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-14 {
  gap: 3.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-12 {
  column-gap: 3rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border);
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-token-lg {
  border-radius: var(--radius-lg);
}
.rounded-token-md {
  border-radius: var(--radius-md);
}
.rounded-token-sm {
  border-radius: var(--radius-sm);
}
.border {
  border-width: 1px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-border {
  border-color: var(--color-border);
}
.border-hairline {
  border-color: var(--color-hairline);
}
.border-primary {
  border-color: var(--color-primary);
}
.bg-bg {
  background-color: var(--color-bg);
}
.bg-glow {
  background-color: var(--color-glow);
}
.bg-hairline {
  background-color: var(--color-hairline);
}
.bg-hero-signal {
  background-color: var(--color-hero-signal);
}
.bg-night {
  background-color: var(--color-night);
}
.bg-panel {
  background-color: var(--color-panel);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-surface {
  background-color: var(--color-surface);
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.font-body {
  font-family: var(--body-font);
}
.font-display {
  font-family: var(--display-font);
}
.font-mono {
  font-family: var(--mono-font);
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[1\.4rem\] {
  font-size: 1.4rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[2\.2rem\] {
  font-size: 2.2rem;
}
.text-\[2\.6rem\] {
  font-size: 2.6rem;
}
.text-\[clamp\(1\.4rem\2c 2\.4vw\2c 1\.9rem\)\] {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}
.text-\[clamp\(1\.9rem\2c 4vw\2c 2\.6rem\)\] {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}
.text-\[clamp\(1\.9rem\2c 4vw\2c 2\.9rem\)\] {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
.text-\[clamp\(2\.1rem\2c 5vw\2c 3\.4rem\)\] {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
.text-\[clamp\(2\.4rem\2c 6vw\2c 3\.4rem\)\] {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
}
.text-\[clamp\(2\.6rem\2c 7vw\2c 3\.6rem\)\] {
  font-size: clamp(2.6rem, 7vw, 3.6rem);
}
.text-\[clamp\(2\.9rem\2c 8vw\2c 6rem\)\] {
  font-size: clamp(2.9rem, 8vw, 6rem);
}
.text-\[clamp\(2rem\2c 4\.6vw\2c 3\.4rem\)\] {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.uppercase {
  text-transform: uppercase;
}
.leading-\[0\.94\] {
  line-height: 0.94;
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.3\] {
  line-height: 1.3;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-accent {
  color: var(--color-accent);
}
.text-hero-ink {
  color: var(--color-hero-ink);
}
.text-hero-ink-dim {
  color: var(--color-hero-ink-dim);
}
.text-hero-signal {
  color: var(--color-hero-signal);
}
.text-hero-signal-contrast {
  color: var(--color-hero-signal-contrast);
}
.text-muted {
  color: var(--color-muted);
}
.text-primary {
  color: var(--color-primary);
}
.text-primary-contrast {
  color: var(--color-primary-contrast);
}
.text-text {
  color: var(--color-text);
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-token-md {
  --tw-shadow: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-token-sm {
  --tw-shadow: var(--shadow-sm);
  --tw-shadow-colored: var(--shadow-sm);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.placeholder\:text-muted::placeholder {
  color: var(--color-muted);
}
.hover\:bg-panel:hover {
  background-color: var(--color-panel);
}
.hover\:text-text:hover {
  color: var(--color-text);
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.focus\:border-primary:focus {
  border-color: var(--color-primary);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
@media (min-width: 640px) {

  .sm\:inline {
    display: inline;
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:text-\[11px\] {
    font-size: 11px;
  }
}
@media (min-width: 768px) {

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[72px\] {
    height: 72px;
  }

  .md\:scroll-mt-24 {
    scroll-margin-top: 6rem;
  }

  .md\:grid-cols-\[4rem_14rem_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 4rem 14rem minmax(0,1fr);
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_17rem\] {
    grid-template-columns: minmax(0,1fr) 17rem;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-14 {
    gap: 3.5rem;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-7 {
    padding: 1.75rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:pt-28 {
    padding-top: 7rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {

  .lg\:grid-cols-\[17rem_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 17rem minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_19rem\] {
    grid-template-columns: minmax(0,1fr) 19rem;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_25rem\] {
    grid-template-columns: minmax(0,1fr) 25rem;
  }

  .lg\:grid-cols-\[minmax\(0\2c 46ch\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,46ch) minmax(0,1fr);
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }
}