/* 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: #050505;
  --color-surface: #0b0b0b;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-primary: #000000;
  --color-primary-contrast: #ffffff;
  --color-accent: #00f0ff;
  --color-accent-soft: rgb(0 240 255 / 0.12);
  --color-glow: rgb(0 240 255 / 0.35);
  --color-line: rgb(255 255 255 / 0.1);
  --color-border: #222222;
  --display-font: "Playfair Display", "Source Sans 3", system-ui, serif;
  --body-font: "Source Sans 3", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0px 0px 0px 1px rgba(255, 255, 255, 0.06);
  --shadow-md: 0px 14px 40px -16px rgba(0, 240, 255, 0.22);
  --color-scrim: rgb(5 5 5 / 0.7);
}
html:root.dark {
  --color-bg: #050505;
  --color-surface: #0b0b0b;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-primary: #000000;
  --color-primary-contrast: #ffffff;
  --color-accent: #00f0ff;
  --color-accent-soft: rgb(0 240 255 / 0.12);
  --color-glow: rgb(0 240 255 / 0.35);
  --color-line: rgb(255 255 255 / 0.1);
  --color-border: #222222;
  --display-font: "Playfair Display", "Source Sans 3", system-ui, serif;
  --body-font: "Source Sans 3", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0px 0px 0px 1px rgba(255, 255, 255, 0.06);
  --shadow-md: 0px 14px 40px -16px rgba(0, 240, 255, 0.22);
  --color-scrim: rgb(5 5 5 / 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.
*/

html:root:not(.dark) {
  color-scheme: dark;
}
html:root.dark {
  color-scheme: dark;
}

/* The hero film. The can's horizontal centre of mass runs 68% -> 56% of the
   frame, so when a viewport is taller than the clip's 16:9 the crop has to
   move toward the can rather than away from it: 62% is the midpoint of that
   travel, which keeps the can in shot at every aspect ratio while leaving the
   dark left side under the headline.

   No scrim, no filter and no backdrop-filter over this element. The measured
   left-half brightness is 11.7 -> 28.3 out of 255, so white type reads over it
   unaided, and a full-viewport backdrop-filter composited every frame is the
   single most expensive thing that can sit on top of a scrub. */
.scrub-video {
  object-position: 62% 50%;
  background-color: var(--color-bg);
}


/* Mobile and tablet: the frame is far narrower than 16:9, so centre the crop
   on the can and move the hero copy to the bottom, over a plain gradient
   (no blur), instead of across the can. */
@media (max-width: 1023px) {
  .scrub-video {
    object-position: 77% 50%;
  }
  #hero {
    align-items: flex-end;
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-scrim) 0%, var(--color-scrim) 30%, transparent 75%);
  }
  #hero .container > div {
    max-width: 32rem;
  }
  #hero h1 {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
  }
  #hero a {
    display: block;
    text-align: center;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .scrub-video {
    object-position: 70% 50%;
  }
}

/* Both hero states are driven by opacity written from the scrub loop, so they
   stay on the compositor. No transition: a time-based clock would run against
   the seeks and replay instead of reversing when the user scrolls back. */
#hero,
#ingredients {
  will-change: opacity;
}


/* The ingredients card is centred on the can while the panel is shown.
   With object-fit: cover the rendered clip is W = max(100vw, 177.78vh) wide,
   offset by 62% of the overflow (object-position above). In that stretch of
   the film the can stands at ~70.6% of the frame (measured), so its on-screen
   x = 62vw + 0.086 * W = 62vw + max(8.6vw, 15.29vh). Pure CSS, so it tracks
   every resize with no JS. The #ingredients prefix outranks the card's
   Tailwind utilities (relative, mx-auto, md:h-*), which otherwise win.
   Below lg the copy and card stack, and the card stays in the flow. */
/* Measured on the clip's final frames: the floating can's centre sits at 70% of
   the frame width and 36% of its height, and it is ~49% of the frame tall.
   The frame is object-fit: cover at object-position 62% 50%, so
   centre x = 62vw + 0.08 * W and centre y = (H_stage - H) / 2 + 0.36 * H,
   with W = max(100vw, 177.78vh) and H = W * 9/16. The card is a zero-size
   anchor on that point; the callouts hang off it. */
#ingredients {
  --cw: max(100vw, 177.78vh);
  --ch: calc(var(--cw) * 0.5625);
  --can-h: calc(var(--ch) * 0.49);
  --can-r: calc(var(--cw) * 0.072);
}
@media (min-width: 1024px) {
  #ingredients .can-anchored {
    position: absolute;
    top: calc((100% - var(--ch)) / 2 + var(--ch) * 0.36);
    left: calc(62vw + var(--cw) * 0.08);
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transform: none;
  }
}

/* Callouts: a hairline grows out of the can's edge, then the figure slides in.
   --k is the card's settle progress written by the scrub loop, --d staggers
   each callout, so they come in one after another as the can finishes rising. */
.callout {
  --p: clamp(0, calc((var(--k, 1) - var(--d, 0) * 0.14) * 2.6), 1);
  position: absolute;
  top: calc(var(--y) * var(--can-h));
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  opacity: var(--p);
}
.callout-l {
  right: var(--can-r);
  flex-direction: row-reverse;
  text-align: right;
}
.callout-r {
  left: var(--can-r);
  flex-direction: row;
  text-align: left;
}
.callout-line {
  position: relative;
  display: block;
  width: clamp(28px, 4vw, 72px);
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(var(--p));
}
.callout-l .callout-line {
  transform-origin: right;
}
.callout-r .callout-line {
  transform-origin: left;
}
.callout-line::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-glow);
}
.callout-l .callout-line::after {
  right: 0;
}
.callout-r .callout-line::after {
  left: 0;
}
.callout-num {
  font-family: var(--display-font);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-text);
}
.callout-num span {
  margin-left: 2px;
  font-size: 0.45em;
  color: var(--color-accent);
}
.callout-cap {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Story: outlined words, moved by scroll from main.js. */
.outline-row {
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
  will-change: transform;
}
.story-word {
  transition: opacity 0.3s ease-out, color 0.3s ease-out;
}

/* Skyline: a city going to sleep. Windows switch off as the night runs, a few
   stay lit. Built in main.js, so without JS the strip is simply empty. */
.skyline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 9rem;
  padding: 0 1rem;
  opacity: 0.55;
}
.skyline-b {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
.win {
  height: 4px;
  background: var(--color-muted);
  opacity: 0.75;
  transition: opacity 0.6s ease-out;
}
.win[data-off="true"] {
  opacity: 0.06;
}
.win-live {
  background: var(--color-accent);
  opacity: 1;
  box-shadow: 0 0 8px var(--color-glow);
}

/* Ritual steps: the one matching the clock is lit, the rest recede. Without
   JS every step keeps data-active="true", so all three read in full. */
.step-item {
  transition: opacity 0.4s ease-out;
}
.step-item[data-active="false"] {
  opacity: 0.3;
}
[data-bar] {
  transition: transform 0.5s ease-out;
}
[data-pan] {
  will-change: transform;
}

/* Ambient life: a slow pulse on the "live" dots. */
.live-dot {
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--color-glow);
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot,
  [data-bar],
  .win,
  .story-word,
  .step-item {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero,
  #ingredients,
  .scrub-video {
    transition: none !important;
    animation: none !important;
  }
}

*, ::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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  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;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-\[8\%\] {
  bottom: 8%;
}
.left-0 {
  left: 0px;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-4 {
  right: 1rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-\[8\%\] {
  top: 8%;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-11 {
  height: 2.75rem;
}
.h-2 {
  height: 0.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[260vh\] {
  height: 260vh;
}
.h-\[300vh\] {
  height: 300vh;
}
.h-\[400vh\] {
  height: 400vh;
}
.h-\[500px\] {
  height: 500px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-11 {
  width: 2.75rem;
}
.w-2 {
  width: 0.5rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[340px\] {
  width: 340px;
}
.w-full {
  width: 100%;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.origin-left {
  transform-origin: left;
}
.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));
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * 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));
}
.overflow-hidden {
  overflow: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.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-t {
  border-top-width: 1px;
}
.border-line {
  border-color: var(--color-line);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.bg-\[\#050505\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.bg-\[\#050505\]\/95 {
  background-color: rgb(5 5 5 / 0.95);
}
.bg-accent {
  background-color: var(--color-accent);
}
.bg-bg {
  background-color: var(--color-bg);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-line {
  background-color: var(--color-line);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-scrim {
  --tw-gradient-from: var(--color-scrim) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-cover {
  object-fit: cover;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.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;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.font-display {
  font-family: var(--display-font);
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[clamp\(1\.9rem\2c 4\.8vw\2c 4\.25rem\)\] {
  font-size: clamp(1.9rem, 4.8vw, 4.25rem);
}
.text-\[clamp\(2\.75rem\2c min\(8vw\2c 12vh\)\2c 5\.5rem\)\] {
  font-size: clamp(2.75rem, min(8vw, 12vh), 5.5rem);
}
.text-\[clamp\(2rem\2c 5vw\2c 3\.5rem\)\] {
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.text-\[clamp\(3rem\2c 9vw\2c 6rem\)\] {
  font-size: clamp(3rem, 9vw, 6rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.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;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[0\.9\] {
  line-height: 0.9;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.35em\] {
  letter-spacing: 0.35em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#050505\] {
  --tw-text-opacity: 1;
  color: rgb(5 5 5 / var(--tw-text-opacity, 1));
}
.text-accent {
  color: var(--color-accent);
}
.text-bg {
  color: var(--color-bg);
}
.text-muted {
  color: var(--color-muted);
}
.text-text {
  color: var(--color-text);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.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);
}
.blur {
  --tw-blur: blur(8px);
  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);
}
.drop-shadow-\[0_2px_16px_rgba\(0\2c 0\2c 0\2c 0\.9\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 16px rgba(0,0,0,0.9));
  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);
}
.drop-shadow-\[0_2px_24px_rgba\(0\2c 0\2c 0\2c 0\.85\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 24px rgba(0,0,0,0.85));
  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);
}
.filter {
  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);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.placeholder\:text-muted::placeholder {
  color: var(--color-muted);
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}
.hover\:border-accent:hover {
  border-color: var(--color-accent);
}
.hover\:text-accent:hover {
  color: var(--color-accent);
}
.hover\:shadow-token-md:hover {
  --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);
}
.focus\:border-accent:focus {
  border-color: var(--color-accent);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.enabled\:hover\:scale-\[1\.02\]:hover:enabled {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
@media (min-width: 640px) {

  .sm\:p-8 {
    padding: 2rem;
  }
}
@media (min-width: 768px) {

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

  .md\:w-\[380px\] {
    width: 380px;
  }

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

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

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

  .md\:text-left {
    text-align: left;
  }
}
@media (min-width: 1024px) {

  .lg\:absolute {
    position: absolute;
  }

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

  .lg\:top-1\/2 {
    top: 50%;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-\[16\/9\] {
    aspect-ratio: 16/9;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:w-\[320px\] {
    width: 320px;
  }

  .lg\:max-w-\[22rem\] {
    max-width: 22rem;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    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));
  }

  .lg\:grid-cols-\[1\.05fr_0\.95fr\] {
    grid-template-columns: 1.05fr 0.95fr;
  }

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

  .lg\:gap-16 {
    gap: 4rem;
  }

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

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

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

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }
}
@media (min-width: 1280px) {

  .xl\:left-\[8vw\] {
    left: 8vw;
  }

  .xl\:w-\[380px\] {
    width: 380px;
  }

  .xl\:max-w-sm {
    max-width: 24rem;
  }
}
@media (min-width: 1536px) {

  .\32xl\:max-w-md {
    max-width: 28rem;
  }
}