/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-outline-style: solid;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: Archivo, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --spacing: .25rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --radius-lg: .5rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --blur-xl: 24px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-platinum: #f3f0f3;
    --color-ink: #13161e;
    --color-ink-2: #1a1e29;
    --color-ink-3: #222736;
    --color-raspberry: #dd2c3e;
    --color-amber: #f3f0f3;
    --color-jade: #33b552;
    --color-sky: #33aee6;
    --font-display: "Clash Display", system-ui, sans-serif;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

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

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

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

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

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

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

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!static {
    position: static !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

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

  .top-7 {
    top: calc(var(--spacing) * 7);
  }

  .top-\[72px\] {
    top: 72px;
  }

  .top-full {
    top: 100%;
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-7 {
    bottom: calc(var(--spacing) * 7);
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

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

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .isolate {
    isolation: isolate;
  }

  .z-10 {
    z-index: 10;
  }

  .z-30 {
    z-index: 30;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[200\] {
    z-index: 200;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-auto {
    margin-top: auto;
  }

  .-mr-1\.5 {
    margin-right: calc(var(--spacing) * -1.5);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-flex {
    display: inline-flex;
  }

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

  .\!h-10 {
    height: calc(var(--spacing) * 10) !important;
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

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

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

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

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

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

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .max-h-\[22\.5rem\] {
    max-height: 22.5rem;
  }

  .max-h-\[44px\] {
    max-height: 44px;
  }

  .max-h-\[calc\(100dvh-2rem\)\] {
    max-height: calc(100dvh - 2rem);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

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

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

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

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

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .max-w-\[16ch\] {
    max-width: 16ch;
  }

  .max-w-\[20ch\] {
    max-width: 20ch;
  }

  .max-w-\[38ch\] {
    max-width: 38ch;
  }

  .max-w-\[40ch\] {
    max-width: 40ch;
  }

  .max-w-\[48ch\] {
    max-width: 48ch;
  }

  .max-w-\[52ch\] {
    max-width: 52ch;
  }

  .max-w-\[58ch\] {
    max-width: 58ch;
  }

  .max-w-\[520px\] {
    max-width: 520px;
  }

  .max-w-\[760px\] {
    max-width: 760px;
  }

  .max-w-\[860px\] {
    max-width: 860px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[1280px\] {
    max-width: 1280px;
  }

  .max-w-\[calc\(100vw-2\.5rem\)\] {
    max-width: calc(100vw - 2.5rem);
  }

  .max-w-full {
    max-width: 100%;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[max\(100\%\,13\.5rem\)\] {
    min-width: max(100%, 13.5rem);
  }

  .flex-1 {
    flex: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-top {
    transform-origin: top;
  }

  .origin-top-left {
    transform-origin: 0 0;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-\[7px\] {
    --tw-translate-y: calc(7px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[7px\] {
    --tw-translate-y: 7px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .scroll-mt-20 {
    scroll-margin-top: calc(var(--spacing) * 20);
  }

  .scroll-mt-\[80px\] {
    scroll-margin-top: 80px;
  }

  .list-none {
    list-style-type: none;
  }

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

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

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .content-start {
    align-content: flex-start;
  }

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

  .items-end {
    align-items: flex-end;
  }

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

  .items-stretch {
    align-items: stretch;
  }

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

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-\[5px\] {
    gap: 5px;
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }

  .gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[2\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 2.5px;
  }

  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-amber {
    border-color: var(--color-amber);
  }

  .border-ink\/15 {
    border-color: #13161e26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-ink\/15 {
      border-color: color-mix(in oklab, var(--color-ink) 15%, transparent);
    }
  }

  .border-platinum\/10 {
    border-color: #f3f0f31a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-platinum\/10 {
      border-color: color-mix(in oklab, var(--color-platinum) 10%, transparent);
    }
  }

  .border-platinum\/12 {
    border-color: #f3f0f31f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-platinum\/12 {
      border-color: color-mix(in oklab, var(--color-platinum) 12%, transparent);
    }
  }

  .border-platinum\/15 {
    border-color: #f3f0f326;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-platinum\/15 {
      border-color: color-mix(in oklab, var(--color-platinum) 15%, transparent);
    }
  }

  .border-platinum\/70 {
    border-color: #f3f0f3b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-platinum\/70 {
      border-color: color-mix(in oklab, var(--color-platinum) 70%, transparent);
    }
  }

  .bg-amber {
    background-color: var(--color-amber);
  }

  .bg-ink {
    background-color: var(--color-ink);
  }

  .bg-ink-2 {
    background-color: var(--color-ink-2);
  }

  .bg-ink-3 {
    background-color: var(--color-ink-3);
  }

  .bg-ink\/40 {
    background-color: #13161e66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink\/40 {
      background-color: color-mix(in oklab, var(--color-ink) 40%, transparent);
    }
  }

  .bg-ink\/90 {
    background-color: #13161ee6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink\/90 {
      background-color: color-mix(in oklab, var(--color-ink) 90%, transparent);
    }
  }

  .bg-ink\/95 {
    background-color: #13161ef2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink\/95 {
      background-color: color-mix(in oklab, var(--color-ink) 95%, transparent);
    }
  }

  .bg-jade {
    background-color: var(--color-jade);
  }

  .bg-platinum {
    background-color: var(--color-platinum);
  }

  .bg-platinum\/\[0\.03\] {
    background-color: #f3f0f308;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-platinum\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--color-platinum) 3%, transparent);
    }
  }

  .bg-platinum\/\[0\.06\] {
    background-color: #f3f0f30f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-platinum\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--color-platinum) 6%, transparent);
    }
  }

  .bg-sky {
    background-color: var(--color-sky);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-ink {
    --tw-gradient-from: var(--color-ink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .\!px-5 {
    padding-inline: calc(var(--spacing) * 5) !important;
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }

  .pt-\[72px\] {
    padding-top: 72px;
  }

  .pt-\[104px\] {
    padding-top: 104px;
  }

  .pt-\[120px\] {
    padding-top: 120px;
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pr-14 {
    padding-right: calc(var(--spacing) * 14);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .\!text-\[12\.5px\] {
    font-size: 12.5px !important;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15\.5px\] {
    font-size: 15.5px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[17px\] {
    font-size: 17px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .text-\[32px\] {
    font-size: 32px;
  }

  .text-\[36px\] {
    font-size: 36px;
  }

  .leading-\[0\.95\] {
    --tw-leading: .95;
    line-height: .95;
  }

  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }

  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }

  .leading-\[1\.05\] {
    --tw-leading: 1.05;
    line-height: 1.05;
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }

  .leading-\[1\.7\] {
    --tw-leading: 1.7;
    line-height: 1.7;
  }

  .leading-\[1\.08\] {
    --tw-leading: 1.08;
    line-height: 1.08;
  }

  .leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.01em\] {
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
  }

  .tracking-\[-0\.02em\] {
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .text-balance {
    text-wrap: balance;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .\!text-ink {
    color: var(--color-ink) !important;
  }

  .text-amber {
    color: var(--color-amber);
  }

  .text-ink {
    color: var(--color-ink);
  }

  .text-jade {
    color: var(--color-jade);
  }

  .text-platinum {
    color: var(--color-platinum);
  }

  .text-platinum\/30 {
    color: #f3f0f34d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/30 {
      color: color-mix(in oklab, var(--color-platinum) 30%, transparent);
    }
  }

  .text-platinum\/40 {
    color: #f3f0f366;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/40 {
      color: color-mix(in oklab, var(--color-platinum) 40%, transparent);
    }
  }

  .text-platinum\/45 {
    color: #f3f0f373;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/45 {
      color: color-mix(in oklab, var(--color-platinum) 45%, transparent);
    }
  }

  .text-platinum\/50 {
    color: #f3f0f380;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/50 {
      color: color-mix(in oklab, var(--color-platinum) 50%, transparent);
    }
  }

  .text-platinum\/55 {
    color: #f3f0f38c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/55 {
      color: color-mix(in oklab, var(--color-platinum) 55%, transparent);
    }
  }

  .text-platinum\/60 {
    color: #f3f0f399;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/60 {
      color: color-mix(in oklab, var(--color-platinum) 60%, transparent);
    }
  }

  .text-platinum\/65 {
    color: #f3f0f3a6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/65 {
      color: color-mix(in oklab, var(--color-platinum) 65%, transparent);
    }
  }

  .text-platinum\/70 {
    color: #f3f0f3b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/70 {
      color: color-mix(in oklab, var(--color-platinum) 70%, transparent);
    }
  }

  .text-platinum\/75 {
    color: #f3f0f3bf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/75 {
      color: color-mix(in oklab, var(--color-platinum) 75%, transparent);
    }
  }

  .text-platinum\/80 {
    color: #f3f0f3cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/80 {
      color: color-mix(in oklab, var(--color-platinum) 80%, transparent);
    }
  }

  .text-platinum\/85 {
    color: #f3f0f3d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-platinum\/85 {
      color: color-mix(in oklab, var(--color-platinum) 85%, transparent);
    }
  }

  .text-raspberry {
    color: var(--color-raspberry);
  }

  .text-sky {
    color: var(--color-sky);
  }

  .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, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.08\] {
    opacity: .08;
  }

  .shadow-\[0_10px_40px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 10px 40px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_30px_80px_rgba\(0\,0\,0\,0\.6\)\] {
    --tw-shadow: 0 30px 80px var(--tw-shadow-color, #0009);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 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, );
  }

  .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-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -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, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:text-platinum\/70:is(:where(.group):hover *) {
      color: #f3f0f3b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-platinum\/70:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-platinum) 70%, transparent);
      }
    }
  }

  .placeholder\:text-platinum\/35::placeholder {
    color: #f3f0f359;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-platinum\/35::placeholder {
      color: color-mix(in oklab, var(--color-platinum) 35%, transparent);
    }
  }

  .placeholder\:text-platinum\/40::placeholder {
    color: #f3f0f366;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-platinum\/40::placeholder {
      color: color-mix(in oklab, var(--color-platinum) 40%, transparent);
    }
  }

  .first-of-type\:mt-5:first-of-type {
    margin-top: calc(var(--spacing) * 5);
  }

  @media (hover: hover) {
    .hover\:border-platinum\/25:hover {
      border-color: #f3f0f340;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-platinum\/25:hover {
        border-color: color-mix(in oklab, var(--color-platinum) 25%, transparent);
      }
    }

    .hover\:border-platinum\/35:hover {
      border-color: #f3f0f359;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-platinum\/35:hover {
        border-color: color-mix(in oklab, var(--color-platinum) 35%, transparent);
      }
    }

    .hover\:border-platinum\/40:hover {
      border-color: #f3f0f366;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-platinum\/40:hover {
        border-color: color-mix(in oklab, var(--color-platinum) 40%, transparent);
      }
    }

    .hover\:bg-\[\#F3F0F3\]:hover {
      background-color: #f3f0f3;
    }

    .hover\:bg-platinum\/10:hover {
      background-color: #f3f0f31a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-platinum\/10:hover {
        background-color: color-mix(in oklab, var(--color-platinum) 10%, transparent);
      }
    }

    .hover\:bg-platinum\/\[0\.04\]:hover {
      background-color: #f3f0f30a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-platinum\/\[0\.04\]:hover {
        background-color: color-mix(in oklab, var(--color-platinum) 4%, transparent);
      }
    }

    .hover\:text-platinum:hover {
      color: var(--color-platinum);
    }

    .hover\:text-sky:hover {
      color: var(--color-sky);
    }
  }

  .focus\:border-platinum\/40:focus {
    border-color: #f3f0f366;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-platinum\/40:focus {
      border-color: color-mix(in oklab, var(--color-platinum) 40%, transparent);
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-\[\#F3F0F3\]:focus-visible {
    outline-color: #f3f0f3;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media (min-width: 40rem) {
    .sm\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .sm\:left-auto {
      left: auto;
    }

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:block {
      display: block;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-\[10px\] {
      height: 10px;
    }

    .sm\:h-\[15px\] {
      height: 15px;
    }

    .sm\:w-\[10px\] {
      width: 10px;
    }

    .sm\:w-\[15px\] {
      width: 15px;
    }

    .sm\:w-\[260px\] {
      width: 260px;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:flex-none {
      flex: none;
    }

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

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

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

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:px-3\.5 {
      padding-inline: calc(var(--spacing) * 3.5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .sm\:text-\[24px\] {
      font-size: 24px;
    }
  }

  @media (min-width: 48rem) {
    .md\:-top-3 {
      top: calc(var(--spacing) * -3);
    }

    .md\:-right-4 {
      right: calc(var(--spacing) * -4);
    }

    .md\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .md\:right-8 {
      right: calc(var(--spacing) * 8);
    }

    .md\:left-auto {
      left: auto;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .md\:col-span-12 {
      grid-column: span 12 / span 12;
    }

    .md\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .md\:mt-7 {
      margin-top: calc(var(--spacing) * 7);
    }

    .md\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .md\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .md\:mr-4 {
      margin-right: calc(var(--spacing) * 4);
    }

    .md\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .md\:mb-5 {
      margin-bottom: calc(var(--spacing) * 5);
    }

    .md\:mb-6 {
      margin-bottom: calc(var(--spacing) * 6);
    }

    .md\:mb-7 {
      margin-bottom: calc(var(--spacing) * 7);
    }

    .md\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .md\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:\!h-11 {
      height: calc(var(--spacing) * 11) !important;
    }

    .md\:h-4 {
      height: calc(var(--spacing) * 4);
    }

    .md\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .md\:h-11 {
      height: calc(var(--spacing) * 11);
    }

    .md\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .md\:h-40 {
      height: calc(var(--spacing) * 40);
    }

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

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

    .md\:h-auto {
      height: auto;
    }

    .md\:h-full {
      height: 100%;
    }

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

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

    .md\:w-4 {
      width: calc(var(--spacing) * 4);
    }

    .md\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .md\:w-36 {
      width: calc(var(--spacing) * 36);
    }

    .md\:w-40 {
      width: calc(var(--spacing) * 40);
    }

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

    .md\:flex-1 {
      flex: 1;
    }

    .md\:origin-top-right {
      transform-origin: 100% 0;
    }

    .md\:scroll-mt-\[96px\] {
      scroll-margin-top: 96px;
    }

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

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

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

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

    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    .md\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:\!px-6 {
      padding-inline: calc(var(--spacing) * 6) !important;
    }

    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .md\:py-7 {
      padding-block: calc(var(--spacing) * 7);
    }

    .md\:py-18 {
      padding-block: calc(var(--spacing) * 18);
    }

    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }

    .md\:pt-\[88px\] {
      padding-top: 88px;
    }

    .md\:pt-\[128px\] {
      padding-top: 128px;
    }

    .md\:pt-\[152px\] {
      padding-top: 152px;
    }

    .md\:pb-10 {
      padding-bottom: calc(var(--spacing) * 10);
    }

    .md\:pb-12 {
      padding-bottom: calc(var(--spacing) * 12);
    }

    .md\:pb-14 {
      padding-bottom: calc(var(--spacing) * 14);
    }

    .md\:pb-20 {
      padding-bottom: calc(var(--spacing) * 20);
    }

    .md\:\!text-\[13\.5px\] {
      font-size: 13.5px !important;
    }

    .md\:text-\[13px\] {
      font-size: 13px;
    }

    .md\:text-\[16px\] {
      font-size: 16px;
    }

    .md\:text-\[18px\] {
      font-size: 18px;
    }

    .md\:text-\[28px\] {
      font-size: 28px;
    }

    .md\:text-\[32px\] {
      font-size: 32px;
    }

    .md\:text-\[40px\] {
      font-size: 40px;
    }

    .md\:text-\[48px\] {
      font-size: 48px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:ml-auto {
      margin-left: auto;
    }

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

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

    .lg\:flex-1 {
      flex: 1;
    }

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

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

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

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

    .lg\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .lg\:px-16 {
      padding-inline: calc(var(--spacing) * 16);
    }

    .lg\:text-\[16\.5px\] {
      font-size: 16.5px;
    }

    .lg\:text-\[19px\] {
      font-size: 19px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:w-\[180px\] {
      width: 180px;
    }

    .xl\:text-\[22px\] {
      font-size: 22px;
    }
  }

  .\[\&\>svg\]\:h-5 > svg {
    height: calc(var(--spacing) * 5);
  }

  .\[\&\>svg\]\:h-\[22px\] > svg {
    height: 22px;
  }

  .\[\&\>svg\]\:w-5 > svg {
    width: calc(var(--spacing) * 5);
  }

  .\[\&\>svg\]\:w-\[22px\] > svg {
    width: 22px;
  }

  .\[\&\>svg\]\:fill-none > svg {
    fill: none;
  }

  .\[\&\>svg\]\:stroke-current > svg {
    stroke: currentColor;
  }

  .\[\&\>svg\]\:\[stroke-width\:1\.9\] > svg {
    stroke-width: 1.9px;
  }

  .\[\&\>svg\]\:\[stroke-width\:1\.75\] > svg {
    stroke-width: 1.75px;
  }

  .\[\&\>svg\]\:\[stroke-linecap\:round\] > svg {
    stroke-linecap: round;
  }

  .\[\&\>svg\]\:\[stroke-linejoin\:round\] > svg {
    stroke-linejoin: round;
  }

  @media (pointer: coarse) {
    .\[\@media\(pointer\:coarse\)\]\:min-h-11 {
      min-height: calc(var(--spacing) * 11);
    }

    .\[\@media\(pointer\:coarse\)\]\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
/* Verbatim copy of the 2026 design's shared \3c style> block (index.html).
   Kept UNLAYERED on purpose: it must win over Tailwind's layered utilities
   exactly as it does in the prototype. Do not move into @layer. */

  :root {
    --platinum: #F3F0F3;
    --ink:      #13161E;
    --ink-2:    #1A1E29;
    --ink-3:    #222736;
    --raspberry:#DD2C3E;
    --amber:    #F3F0F3;
    --jade:     #33B552;
    --sky:      #33AEE6;
  }
  html { scroll-behavior: smooth; }
  body {
    background: var(--ink);
    color: var(--platinum);
    font-family: 'Archivo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  ::selection { background: var(--amber); color: var(--ink); }

  .font-display { font-family: 'Clash Display', system-ui, sans-serif; }
  .font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

  /* H1 / H2 / mono caption tokens */
  .h1 { font-family:'Clash Display',sans-serif; font-weight:700; font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; }
  .h2 { font-family:'Clash Display',sans-serif; font-weight:700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.015em; }
  .h3 { font-family:'Archivo',sans-serif; font-weight:500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; }
  .fig { font-family:'JetBrains Mono',monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,240,243,0.55); }
  .body-l { font-family:'Archivo',sans-serif; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: rgba(243,240,243,0.78); }
  .lede { font-family:'Clash Display',sans-serif; font-weight:600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--platinum); }

  /* Subtle dotted grain so the dark background isn't flat */
  .ink-grain {
    background-color: var(--ink);
    background-image:
      radial-gradient(rgba(243,240,243,0.025) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
  }

  /* Ambient blooms */
  .bloom-sky    { position:absolute; pointer-events:none; width:60vw; height:60vw; max-width:900px; max-height:900px; border-radius:9999px; background: radial-gradient(circle, rgba(51,174,230,0.07) 0%, rgba(51,174,230,0) 55%); }
  .bloom-jade   { position:absolute; pointer-events:none; width:50vw; height:50vw; max-width:720px; max-height:720px; border-radius:9999px; background: radial-gradient(circle, rgba(51,181,82,0.06) 0%, rgba(51,181,82,0) 55%); }
  .bloom-amber  { position:absolute; pointer-events:none; width:40vw; height:40vw; max-width:640px; max-height:640px; border-radius:9999px; background: radial-gradient(circle, rgba(243,240,243,0.05) 0%, rgba(243,240,243,0) 55%); }

  /* Buttons */
  .btn-pill {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    height:44px; padding: 0 22px; border-radius: 999px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; white-space: nowrap;
  }

  /* Card defaults */
  /* Buttons — pill system. Primary = amber fill; ghost = outlined. Hover: subtle lift, no color swap. */
  .btn-pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 22px; border-radius:999px; font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; border:1px solid rgba(243,240,243,.22); background:transparent; color:var(--platinum); transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
  .btn-pill:hover { border-color:rgba(243,240,243,.45); background:rgba(243,240,243,.06); transform:translateY(-1px); }
  .btn-amber { background:var(--amber); border-color:var(--amber); color:var(--ink); }
  .btn-amber:hover { background:#F3F0F3; border-color:#F3F0F3; color:var(--ink); box-shadow:0 10px 28px -12px rgba(243,240,243,.55); }
  .btn-ghost { background:transparent; border-color:rgba(243,240,243,.22); color:var(--platinum); }
  .btn-ghost:hover { background:rgba(243,240,243,.06); border-color:rgba(243,240,243,.45); color:var(--platinum); }
  .btn-black, .btn-ink { background:rgba(19,22,30,.55); border-color:rgba(243,240,243,.22); color:var(--platinum); }
  .btn-black:hover, .btn-ink:hover { background:rgba(19,22,30,.75); border-color:rgba(243,240,243,.45); color:var(--platinum); box-shadow:none; }
  .card {
    background: var(--ink);
    border: 1px solid rgba(243,240,243,0.10);
    border-radius: 16px;
  }
  .card-hover:hover { border-color: rgba(51,174,230,0.6); }

  /* Section reveal */
  .reveal { opacity: 0; transform: translateY(4px); transition: opacity 260ms ease-out, transform 260ms ease-out; }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }

  /* Marquee */
  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-track {
    display:flex; gap:0; width:max-content;
    animation: marquee 50s linear infinite;
  }

  /* News auto-rotating marquee */
  @keyframes news-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .news-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .news-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
  }
  .news-marquee-card {
    flex: 0 0 auto;
    width: clamp(280px, 32vw, 380px);
    display: flex;
    align-items: stretch;
  }
  .news-marquee-card > * {
    width: 100%;
    height: 100%;
  }

  /* HERO motion ----------------------------------------------------------- */
  /* Two orbs swing in, blur, collide, resolve into the wordmark.            */
  @keyframes orb-amber {
    0%   { transform: translate(-65vw, 25vh) scale(1.1);  filter: blur(0px); opacity: 0; }
    8%   { opacity: 1; }
    55%  { transform: translate(-2vw, 0) scale(1);        filter: blur(8px);  }
    62%  { transform: translate(0, 0) scale(0.9);         filter: blur(34px); opacity: 0.95; }
    72%  { transform: translate(0, 0) scale(0.4);         filter: blur(60px); opacity: 0.5; }
    100% { transform: translate(-22vw, 6vh) scale(0.6);   filter: blur(40px); opacity: 0.12; }
  }
  @keyframes orb-sky {
    0%   { transform: translate(60vw, -28vh) scale(0.7);  filter: blur(0px); opacity: 0; }
    8%   { opacity: 1; }
    55%  { transform: translate(2vw, 0) scale(0.65);      filter: blur(8px);  }
    62%  { transform: translate(0, 0) scale(0.5);         filter: blur(34px); opacity: 0.9; }
    72%  { transform: translate(0, 0) scale(0.3);         filter: blur(60px); opacity: 0.5; }
    100% { transform: translate(22vw, -8vh) scale(0.45);  filter: blur(40px); opacity: 0.12; }
  }
  @keyframes wordmark-resolve {
    0%, 65%   { opacity: 0; transform: scale(0.94); filter: blur(28px); }
    78%       { opacity: 1; transform: scale(1.01); filter: blur(2px);  }
    100%      { opacity: 1; transform: scale(1);    filter: blur(0);    }
  }
  @keyframes hero-fade-in {
    0%, 75% { opacity: 0; transform: translateY(8px); }
    100%    { opacity: 1; transform: none; }
  }
  @keyframes drift-left  { 0%,100% { transform: translate(-22vw, 6vh) scale(0.6); } 50% { transform: translate(-26vw, 10vh) scale(0.65); } }
  @keyframes drift-right { 0%,100% { transform: translate(22vw, -8vh) scale(0.45); } 50% { transform: translate(26vw, -12vh) scale(0.5);  } }

  .orb {
    position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; border-radius: 9999px;
    transform: translate(-50%, -50%); margin-left: -260px; margin-top: -260px;
    will-change: transform, filter, opacity;
  }
  .orb-amber {
    background: radial-gradient(circle at 30% 75%, #FFE26A 0%, #F3F0F3 35%, #B58E00 75%, #4a3a00 100%);
    box-shadow: 0 40px 120px rgba(243,240,243,0.35), inset -40px -60px 120px rgba(0,0,0,0.4);
    animation: orb-amber 3.2s cubic-bezier(0.6,0,0.2,1) both, drift-left 14s ease-in-out 3.2s infinite;
  }
  .orb-sky {
    background: radial-gradient(circle at 70% 30%, #BCE9FB 0%, #33AEE6 40%, #1f6e92 80%, #0a2a3a 100%);
    box-shadow: 0 40px 120px rgba(51,174,230,0.35), inset 40px 60px 120px rgba(0,0,0,0.4);
    width: 360px; height: 360px; margin-left: -180px; margin-top: -180px;
    animation: orb-sky 3.2s cubic-bezier(0.6,0,0.2,1) both, drift-right 16s ease-in-out 3.2s infinite;
  }
  .wordmark-svg {
    animation: wordmark-resolve 3.2s cubic-bezier(0,0.7,0.2,1) both;
  }
  .hero-tagline { animation: hero-fade-in 3.6s ease-out both; }
  .hero-sub     { animation: hero-fade-in 3.9s ease-out both; }
  .hero-ctas    { animation: hero-fade-in 4.1s ease-out both; }
  .hero-ticker  { animation: hero-fade-in 4.4s ease-out both; }

  @media (prefers-reduced-motion: reduce) {
    .orb-amber, .orb-sky { animation: none; opacity: 0.12; filter: blur(40px); }
    .orb-amber { transform: translate(calc(-50% - 22vw), calc(-50% + 6vh)) scale(0.6); }
    .orb-sky   { transform: translate(calc(-50% + 22vw), calc(-50% - 8vh)) scale(0.45); }
    .wordmark-svg, .hero-tagline, .hero-sub, .hero-ctas, .hero-ticker { animation: none; opacity: 1; transform: none; filter: none; }
    .reveal { opacity: 1; transform: none; }
    .marquee-track { animation: none; }
    .news-marquee-track { animation: none; }
    .stars-a, .stars-b, .orbit-a, .orbit-b, .star-pulse { animation: none; }
  }

  /* Star field — space direction, no sound, very light on GPU */
  .stars { position:absolute; inset:-10%; pointer-events:none; background-repeat:repeat; opacity:0.45; }
  .stars-a {
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(243,240,243,0.9) 50%, transparent 51%),
      radial-gradient(1px 1px at 68% 32%, rgba(243,240,243,0.7) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 40% 76%, rgba(243,240,243,0.85) 50%, transparent 51%),
      radial-gradient(1px 1px at 86% 64%, rgba(243,240,243,0.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 24% 52%, rgba(51,174,230,0.8) 50%, transparent 51%),
      radial-gradient(1px 1px at 56% 8%,  rgba(243,240,243,0.8) 50%, transparent 51%);
    background-size: 420px 420px;
    animation: stars-drift 220s linear infinite;
  }
  .stars-b {
    background-image:
      radial-gradient(1px 1px at 30% 40%, rgba(243,240,243,0.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 78% 12%, rgba(243,240,243,0.45) 50%, transparent 51%),
      radial-gradient(1px 1px at 8% 88%,  rgba(243,240,243,0.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 62% 58%, rgba(243,240,243,0.4) 50%, transparent 51%);
    background-size: 260px 260px;
    animation: stars-drift 160s linear infinite reverse;
  }
  @keyframes stars-drift   { to { transform: translate3d(-140px, -90px, 0); } }
  @keyframes stars-twinkle { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }

  .orbit-a { animation: orbit-spin 60s linear infinite; }
  .orbit-b { animation: orbit-spin 90s linear infinite reverse; }
  @keyframes orbit-spin { to { rotate: 360deg; } }
  .star-pulse { animation: star-pulse 4s ease-in-out infinite; }
  @keyframes star-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

  /* Sticky CTA pulse */
  @keyframes sticky-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(51,174,230,0.55), 0 12px 32px rgba(0,0,0,0.5); }
    50%     { box-shadow: 0 0 0 10px rgba(51,174,230,0.0),  0 12px 32px rgba(0,0,0,0.5); }
  }
  .sticky-cta { box-shadow: none !important; animation: none !important; }

  /* Amber-band contact form fields */
  .cta-field { width: 100%; background: rgba(19,22,30,0.06); color: var(--ink); border: 1px solid rgba(19,22,30,0.25); border-radius: 10px; padding: 12px 14px; font-family: 'Archivo', sans-serif; font-size: 15px; outline: none; transition: border-color 160ms ease, background 160ms ease; }
  .cta-field:focus { border-color: var(--ink); background: rgba(19,22,30,0.10); }
  .cta-field[aria-invalid="true"] { border-color: var(--raspberry); }

  /* Inputs */
  .input-line {
    background: transparent; color: var(--platinum);
    border: 0; border-bottom: 1px solid rgba(243,240,243,0.20);
    padding: 14px 2px; width: 100%; outline: none;
    font-family: 'Archivo', sans-serif; font-size: 15px;
    transition: border-color 180ms ease;
  }
  .input-line:focus { border-bottom-color: var(--sky); }
  .input-line::placeholder { color: rgba(243,240,243,0.4); }

  /* Nav backdrop on scroll */
  .nav { border-bottom: 1px solid rgba(243,240,243,0.08); transition: background-color 240ms ease, backdrop-filter 240ms ease, border-color 240ms ease; }
  .nav.scrolled { background-color: rgba(19,22,30,0.96); border-bottom-color: rgba(243,240,243,0.12); }

  /* Striped placeholder (for game card hero composition) */
  .stripes-amber {
    background-image: repeating-linear-gradient(135deg, rgba(243,240,243,0.16) 0 2px, transparent 2px 14px);
  }
  .stripes-sky {
    background-image: repeating-linear-gradient(135deg, rgba(51,174,230,0.16) 0 2px, transparent 2px 14px);
  }
  .stripes-jade {
    background-image: repeating-linear-gradient(135deg, rgba(51,181,82,0.18) 0 2px, transparent 2px 14px);
  }

  /* Clamp excerpt to 3 lines on news cards */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .stripes-platinum {
    background-image: repeating-linear-gradient(135deg, rgba(243,240,243,0.06) 0 2px, transparent 2px 14px);
  }

  /* Custom checkbox/select kept minimal */
  .ring-focus:focus-within { box-shadow: 0 0 0 1px var(--sky); }

  /* Hairlines */
  /* Brand pattern — rings + offset circles derived from the mark, very low contrast */
  .pattern-rings { position: relative; }
  .pattern-rings::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; display: none;
    background-image:
      radial-gradient(circle at 12% 30%, transparent 118px, rgba(243,240,243,0.05) 119px, rgba(243,240,243,0.05) 121px, transparent 122px),
      radial-gradient(circle at 88% 70%, transparent 158px, rgba(51,174,230,0.06) 159px, rgba(51,174,230,0.06) 161px, transparent 162px),
      radial-gradient(circle at 21% 21%, rgba(243,240,243,0.35) 0 3px, transparent 4px),
      radial-gradient(circle at 95% 58%, rgba(243,240,243,0.25) 0 2px, transparent 3px);
    mask-image: linear-gradient(180deg, transparent, black 15%, black 85%, transparent);
  }
  .pattern-rings > * { position: relative; }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* uppercase headings */
  .h1, .h2, h1, h2, .h3 { text-transform: uppercase; }
  .hero-banner-slot, .hero-banner-slot img, .hero-banner-slot::part(img) { image-rendering: high-quality; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; transform: translateZ(0); }
  /* Hero banner — mobile: dedicated portrait art, centered on the binary star, soft blur */
  @media (max-width: 767px) {
    .hero-banner-mobile { object-position: 50% 58%; filter: blur(1.5px) brightness(0.9); transform: scale(1.02); }
  }
  .hero-video { object-position: 50% 50%; }
  .hero-mark { top: 0; bottom: 0; }
  .hero-mark-mobile { filter: blur(4px) brightness(0.7); opacity: 0.55; transform: translateX(-26%); }
  @media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
  /* mobile hero scale */
  @media (max-width: 767px) {
  }
  /* Hero title scales to the CTA row width (~2 buttons) */
  .hero-title { font-size: clamp(34px, 3.9vw, 58px); }
  @media (max-width: 767px) { .hero-title { font-size: clamp(30px, 8.4vw, 40px); } }
  .partner-logo { filter: grayscale(1); }
  /* centered hero: soften the right-anchored mark so text stays legible */
  .hero-mark { opacity: 1; }
  .text-balance { text-wrap: balance; }
  html, body { overflow-x: clip; }
  .hit-44 { position: relative; } .hit-44::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .btn-pill:focus-visible, .btn-glass:focus-visible, .chip:focus-visible, .glass:focus-visible { outline: 2px solid #F3F0F3; outline-offset: 2px; }
  .sec-head { display:flex; flex-direction:column; align-items:center; text-align:center; }
  .sec-head > * { width:100%; max-width:100%; text-align:center; margin-left:auto; margin-right:auto; overflow-wrap:anywhere; }
  .sec-head .h2 { text-wrap:balance; padding-left:.02em; }
  .sec-head .body-l { text-wrap:balance; }
  @media (min-width: 768px) { .md\:py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; } .md\:pb-18 { padding-bottom: 4.5rem; } }
  /* Game card — full-bleed art, overlay copy, glass CTA */
  .gcard { position: relative; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; border: 1px solid rgba(243,240,243,0.12); background: #1A1E29; isolation: isolate; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
  .gcard:hover { transform: translateY(-3px); border-color: rgba(243,240,243,0.28); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
  .gcard-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  div.gcard-art { background: #1A1E29; }
  div.gcard-art > * { position: absolute; inset: 0; }
  .gcard:hover .gcard-art { transform: scale(1.04); }
  .gcard-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,22,30,.15) 0%, rgba(19,22,30,.25) 45%, rgba(19,22,30,.92) 100%); }
  .gcard-tag { position: absolute; top: 14px; right: 14px; height: 30px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(19,22,30,.55); border: 1px solid rgba(243,240,243,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #F3F0F3; }
  .gcard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .gcard-title { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1; letter-spacing: -.02em; color: #F3F0F3; }
  .gcard-actions { display: flex; align-items: center; gap: 18px; }
  .btn-glass { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; background: rgba(243,240,243,.06); border: 1px solid rgba(243,240,243,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #F3F0F3; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
  .btn-glass svg { width: 14px; height: 14px; }
  .gcard:hover .btn-glass, .btn-glass:hover { background: #F3F0F3; border-color: #F3F0F3; color: #13161E; }
  .gcard-more { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,240,243,.85); }
  .gcard-more svg { width: 14px; height: 14px; transition: transform .18s ease; }
  .gcard-more:hover { color: #F3F0F3; } .gcard-more:hover svg { transform: translateX(3px); }
  /* Section seams removed — only the header keeps a divider; .hair-t is kept for in-list rules */
  section.hair-t { border-top: 0; }
  ol.hair-t, ul.hair-t, div.hair-t { border-top: 1px solid rgba(243,240,243,0.08); }
  section.sec-line { border-top-width: 1px !important; border-top-style: solid !important; border-top-color: rgba(243,240,243,0.10) !important; }
  section.sec-line-b { border-bottom: 1px solid rgba(243,240,243,0.08); }
  .hair-b { border-bottom: 1px solid rgba(243,240,243,0.08); }

  /* Game card hover behaviors */
  .game-card { transition: border-color 140ms ease; }
  .game-card:hover { border-color: rgba(243,240,243,0.22); }
  .game-card.sky:hover { border-color: rgba(51,174,230,0.45); }
  .game-card.jade:hover { border-color: rgba(51,181,82,0.45); }
  .game-card .preview-video { opacity: 0; transition: opacity 240ms ease; }
  .game-card:hover .preview-video { opacity: 1; }
  .game-card:hover .static-art    { opacity: 0.05; }
  .static-art { transition: opacity 240ms ease; }

  /* Odometer chapter number on stat reveal */
  @keyframes odometer {
    0% { transform: translateY(50%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .odo.in .odo-num { animation: odometer 700ms cubic-bezier(0.2,0.7,0.2,1) both; }

  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }

  /* ---- 2026-10 design update (modifications/last_mod), verbatim; the glow
     picture is a file instead of an inline data URI. ---- */
  /* v3 — unified background #13161E + light-blue buttons #F3F0F3 */
  body, body.ink-grain { background:#13161E; background-image:none; }
  .bloom-sky, .bloom-jade, .bloom-amber { display:none !important; }
  .btn-amber { background:#F3F0F3; border-color:#F3F0F3; color:#13161E; }
  .btn-amber:hover { background:#F3F0F3; border-color:#F3F0F3; color:#13161E; box-shadow:0 10px 28px -12px rgba(243,240,243,.6); }
  /* Background version B — twinkling canvas particles */

  /* Hero — orbs as a standalone element on the page background */
  .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:40px; min-height:clamp(420px,40vw,520px); }
  .hero-copy { grid-area:1/1; position:relative; z-index:2; }
  .hero-art { grid-area:1/2; justify-self:end; position:relative; z-index:1; }
  .hero-orbs { --s:clamp(320px,40vw,540px); position:relative; width:var(--s); aspect-ratio:1.1886; transition:filter .3s ease; }
  .pl-logo { position:absolute !important; left:50%; top:50%; width:60% !important; height:auto !important; transform:translate(-50%,-54%); z-index:2 !important; pointer-events:none;
    opacity:.86; mix-blend-mode:screen; filter:blur(.2px);
    -webkit-mask-image:radial-gradient(120% 120% at 78% 22%, #000 30%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.38) 90%); mask-image:radial-gradient(120% 120% at 78% 22%, #000 30%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.38) 90%); }
  .hero-ovf { overflow-x:clip; overflow-y:visible; }
  .pl-body { position:absolute; left:0; top:0; width:83.94%; aspect-ratio:1; z-index:1; animation:pl-float 12s ease-in-out infinite; }
  .pl-body img { position:relative; z-index:1; width:100%; height:100%; display:block; user-select:none; pointer-events:none; }
  .pl-glow { position:absolute; left:-70%; top:-70%; width:240%; height:240%; z-index:0; pointer-events:none; background:url('../assets/planet-glow-r3-4r5J3IDb.webp') center/100% 100% no-repeat; animation:pl-breathe 11s ease-in-out infinite; }
  .pl-moon { position:absolute; left:81.73%; top:1.71%; width:18.27%; aspect-ratio:1; z-index:2; animation:pl-moon 18s ease-in-out infinite; }
  .pl-moon img { width:100%; height:100%; display:block; user-select:none; pointer-events:none; }
  .pl-moon::before { content:""; position:absolute; inset:-30%; border-radius:50%; z-index:-1; background:radial-gradient(closest-side, rgba(242,190,60,.16), rgba(242,190,60,0)); }
  @keyframes pl-float { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-7px,0); } }
  @keyframes pl-moon { 0%,100% { transform:translate3d(0,0,0); } 25% { transform:translate3d(-6px,5px,0); } 50% { transform:translate3d(-11px,12px,0); } 75% { transform:translate3d(-4px,6px,0); } }
  @keyframes pl-breathe { 0%,100% { opacity:.8; } 50% { opacity:1; } }
  @media (prefers-reduced-motion: reduce) { .pl-body, .pl-glow, .pl-moon { animation:none; } }
  @media (max-width:767px) {
    .hero-grid { grid-template-columns:minmax(0,1fr); row-gap:24px; min-height:0; }
    .hero-art { grid-area:1/1; justify-self:center; }
    .hero-copy { grid-area:2/1; }
    .hero-orbs { --s:min(84vw,360px); }
    .hero-title { font-size:clamp(28px,8vw,38px); }
    html[data-mhero="overlay"] .hero-orbs { --s:min(96vw,420px); filter:blur(3px) brightness(.5); }
    html[data-mhero="overlay"] .hero-art::after { content:""; position:absolute; left:-20%; right:-20%; bottom:-2px; height:55%; background:linear-gradient(to bottom, rgba(19,22,30,0), #13161E 92%); pointer-events:none; z-index:4; }
    html[data-mhero="overlay"] .hero-copy { margin-top:calc(min(96vw,420px) * -0.46); }
  }
/* Site additions on top of the prototype CSS: behaviour the technical spec
   adds to the 2026 design. Unlayered, like the prototype CSS. */

/* --- Navigation: hover underline (spec) ---------------------------------
   Same 2px light line as the active item, eased in and out on hover. */
.nav-underline {
  opacity: 0; transform: scaleX(0.4);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
a:hover > .nav-underline, a:focus-visible > .nav-underline { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-underline { transform: none; transition: opacity 120ms linear; }
}

/* --- Status / category tag (game cards, news cards) ---------------------
   Geometry comes from the prototype's .gcard-tag; colour from the status. */
.status-tag { gap: 7px; }
.status-tag .status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.status-tag.is-new, .status-tag.c-jade { color: #33B552; border-color: rgba(51,181,82,0.55); background-image: linear-gradient(rgba(51,181,82,0.16), rgba(51,181,82,0.16)); }
/* Client 2026-10-27: the site's yellow became the light #F3F0F3. */
.status-tag.is-soon, .status-tag.c-amber { color: #F3F0F3; border-color: rgba(243,240,243,0.5); background-image: linear-gradient(rgba(243,240,243,0.12), rgba(243,240,243,0.12)); }
.status-tag.c-sky { color: #33AEE6; border-color: rgba(51,174,230,0.55); background-image: linear-gradient(rgba(51,174,230,0.16), rgba(51,174,230,0.16)); }
.status-tag.c-raspberry { color: #F05A6A; border-color: rgba(221,44,62,0.6); background-image: linear-gradient(rgba(221,44,62,0.18), rgba(221,44,62,0.18)); }
.status-tag.c-platinum { color: #F3F0F3; }

/* --- Footer logo strip: centred tiles (spec) ----------------------------
   Same tile size as the prototype's 2 / 4 / 8-column grid with 12px gaps, but
   laid out with centred wrapping so a short or partial row stays balanced. */
/* One row of equal tiles (the prototype's 8-column size on wide screens); when
   the row doesn't fit it becomes a slow loop of two identical sets. */
/* Plain logos at one height (no boxes), evenly spaced. Light logos on a
   transparent background suit the dark strip best. */
.cert-tile { flex: 0 0 auto; display: flex; }
.cert-tile > a { display: flex; border-radius: 6px; }
.cert-item { display: inline-flex; align-items: center; justify-content: center; height: 56px; }
.cert-logo { display: block; width: auto; height: auto; max-height: 34px; max-width: 128px; object-fit: contain; opacity: .85; transition: opacity .2s ease; }
.cert-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: rgba(243,240,243,.72); transition: color .2s ease; }
.cert-tile > a:hover .cert-logo, .cert-tile > a:focus-visible .cert-logo { opacity: 1; }
.cert-tile > a:hover .cert-name, .cert-tile > a:focus-visible .cert-name { color: #F3F0F3; }
@media (min-width: 1024px) { .cert-item { height: 64px; } .cert-logo { max-height: 40px; max-width: 150px; } .cert-name { font-size: 12px; } }
.cert-strip { position: relative; overflow: hidden; }
.cert-track { display: flex; }
.cert-set { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(28px, 4vw, 56px); }
.cert-strip.is-moving .cert-track { width: max-content; animation: marquee 32s linear infinite; }
.cert-strip.is-moving .cert-set { padding-right: clamp(28px, 4vw, 56px); }
/* Never paused by the pointer (client 2026-10-13). A keyboard user on a logo
   link gets a still row that scrolls to the focused logo. */
.cert-strip.is-moving:has(:focus-visible) { overflow-x: auto; }
.cert-strip.is-moving:has(:focus-visible) .cert-track { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cert-strip.is-moving { overflow-x: auto; }
  .cert-strip.is-moving .cert-track { animation: none; }
}

/* --- Contact page: one stroke for cards, fields and buttons (spec) ------- */
.contact-unified { --stroke: rgba(243,240,243,0.16); --stroke-radius: 16px; }
.contact-unified .card { border-color: var(--stroke); border-radius: var(--stroke-radius); }
.contact-unified .input-line {
  border: 1px solid var(--stroke); border-radius: var(--stroke-radius);
  padding: 13px 16px 14px; background: rgba(19,22,30,0.35); /* same height as the prototype field */
  transition: border-color 180ms ease, background-color 180ms ease;
}
.contact-unified .input-line:focus { border-color: var(--sky); background: rgba(19,22,30,0.55); }
.contact-unified .input-line[aria-invalid="true"] { border-color: var(--raspberry); }
.contact-unified .ring-focus:focus-within { box-shadow: none; }
.contact-unified .btn-pill { border-width: 1px; }
.contact-unified .btn-ghost { border-color: var(--stroke); }

/* --- A game's page, /games/<slug> (client 2026-10-27: pages, no popups) ---- */
/* The gallery the client approved for the former popup: a large picture over a
   soft blur of itself, then three large thumbnails. */
.game-gallery { outline: none; }
.game-gallery:focus-visible .game-info-main { box-shadow: 0 0 0 2px #F3F0F3; }
.game-info-main { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid rgba(243,240,243,0.12); background: #1A1E29; touch-action: pan-y; }
/* Any picture shape fits: the whole picture over a soft blur of itself (not darkened: client 2026-10-29). */
.game-info-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px); pointer-events: none; user-select: none; }
.game-info-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.game-info-thumbs { --gap: 8px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; margin: 10px -2px -2px; }
.game-info-thumbs::-webkit-scrollbar { display: none; }
.game-info-thumbs > .gallery-thumb { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; }
@media (min-width: 768px) { .game-info-thumbs { --gap: 10px; } }
.gallery-count { position: absolute; bottom: 12px; right: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(19,22,30,0.75);
  font-family: Archivo, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: rgba(243,240,243,0.85); font-variant-numeric: tabular-nums; }
.game-back { display: inline-flex; align-items: center; gap: 8px; font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 600; color: rgba(243,240,243,0.7); transition: color 160ms ease; position: relative; }
.game-back:hover { color: #F3F0F3; }
.game-page-title { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; text-transform: none; }
/* Field labels and mechanics tags in the site's own font (no mono micro-labels). */
.game-label { font-family: Archivo, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,240,243,0.6); }
.game-chip { font-family: Archivo, system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243,240,243,0.8);
  border: 1px solid rgba(243,240,243,0.15); border-radius: 999px; padding: 6px 12px; }

/* --- A game's demo page, /games/<slug>/demo ------------------------------- */
/* Under the menu: a bar (back to the game, its name, the tools) and the game as
   large as the screen allows. */
.demo-page { padding: 84px 12px 24px; }
@media (min-width: 768px) { .demo-page { padding: 100px 24px 32px; } }
.demo-bar, .demo-frame { max-width: 1600px; margin-left: auto; margin-right: auto; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.demo-back { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: rgba(243,240,243,0.75); position: relative; }
.demo-back:hover { color: #F3F0F3; }
.demo-title { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.01em; color: #F3F0F3; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.demo-tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(243,240,243,0.18);
  color: rgba(243,240,243,0.85); transition: border-color 160ms ease, color 160ms ease; position: relative; }
.demo-tool:hover { border-color: rgba(243,240,243,0.5); color: #F3F0F3; }
.demo-tool:focus-visible { outline: 2px solid #F3F0F3; outline-offset: 2px; }
.btn-pill.demo-copy { height: 40px; padding: 0 16px; gap: 8px; }
.btn-pill.demo-copy.is-done { border-color: rgba(51,181,82,0.6); color: #F3F0F3; }
.demo-copy-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.demo-copy-field { width: min(60vw, 360px); height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(243,240,243,0.25); background: #1A1E29; color: #F3F0F3; font-size: 13px; }
.demo-frame { position: relative; height: calc(100svh - 84px - 52px - 24px); min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(243,240,243,0.12); background: #000; }
@media (min-width: 768px) { .demo-frame { height: calc(100svh - 100px - 52px - 32px); min-height: 480px; } }
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-wait { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(0.45); transform: scale(1.06); }
@media (max-width: 639px) { .btn-pill.demo-copy span { font-size: 11px; } .demo-tools { width: 100%; justify-content: flex-end; } }

/* Arrows: the Games-page banner arrow buttons (ink fill, hairline, round). */
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: #13161E; border: 1px solid rgba(243,240,243,0.15); color: rgba(243,240,243,0.85);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.gallery-arrow::after { content: ""; position: absolute; inset: -4px; }  /* 44px to tap */
.gallery-arrow:hover { background: #2B2E37; color: #F3F0F3; }
.gallery-arrow:focus-visible { outline: 2px solid #F3F0F3; outline-offset: 2px; }
.gallery-thumb {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(243,240,243,0.12); background: #1A1E29;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Every thumbnail in its own colours (client 2026-10-29: nothing darkened); the shown one is outlined. */
.gallery-thumb:hover { border-color: rgba(243,240,243,0.45); }
.gallery-thumb.is-active { border-color: #F3F0F3; box-shadow: 0 0 0 1px #F3F0F3; }
.gallery-thumb:focus-visible { outline: 2px solid #F3F0F3; outline-offset: 2px; }

/* --- Article body (news drawer) ----------------------------------------- */
.news-body > * + * { margin-top: 1.1em; }
.news-body h2, .news-body h3, .news-body h4 { font-family: 'Clash Display', sans-serif; font-weight: 600; color: #F3F0F3; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; }
.news-body h2 { font-size: 24px; } .news-body h3 { font-size: 20px; } .news-body h4 { font-size: 17px; }
.news-body ul { list-style: disc; padding-left: 1.25em; }
.news-body ol { list-style: decimal; padding-left: 1.4em; }
.news-body li + li { margin-top: 0.35em; }
.news-body a { color: #33AEE6; text-decoration: underline; text-underline-offset: 2px; }
.news-body strong, .news-body b { color: #F3F0F3; font-weight: 700; }

/* --- Admin toolbar (signed-in editors only) ------------------------------ */
body.has-adminbar nav.nav { top: 44px; }
body.has-adminbar nav.nav > .fixed { margin-top: 44px; }

/* --- Game card actions in long languages --------------------------------- */
/* Labels never break inside a button; when "Play demo" + "More" do not fit
   side by side (FR / DE on narrow cards) the link moves to its own line. */
.btn-glass, .gcard-more { white-space: nowrap; }
.gcard-actions { flex-wrap: wrap; row-gap: 10px; }

/* --- Carousel dots: own hit areas ----------------------------------------- */
/* 44px tall but only 3px wider on each side, so neighbouring dots (6px apart)
   never cover each other the way the shared 44px square did. */
.dot-hit::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; transform: translateY(-50%); }

/* --- iPhone: no zoom when a field gets focus ------------------------------ */
/* iOS Safari zooms into any field whose text is under 16px; only there the
   fields get 16px (other phones and desktops keep the design sizes). */
@supports (-webkit-touch-callout: none) {
  .input-line, .games-search, .news-search { font-size: 16px !important; }
}

/* --- Reduced motion -------------------------------------------------------- */
/* The prototype's reduced-motion rules sit before the star/orbit animations
   they are meant to stop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .stars-a, .stars-b, .orbit-a, .orbit-b, .star-pulse, .sticky-cta { animation: none !important; }
}

/* --- Partner logos strip -------------------------------------------------- */
/* Keyboard users can stop the strip to read a focused logo; with reduced
   motion it does not move, so it can be scrolled sideways instead. */
.partners-strip:focus-within .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .partners-strip { overflow-x: auto; } }

/* --- Client review 2026-10 ---------------------------------------------- */
/* The page background is a flat #13161E (the prototype's dot grain is off). */
html { background: #13161E; }
body.ink-grain { background-image: none; }
/* Client 2026-10-27: thin stars behind the whole site (stars.js). The page
   colour sits on <html>, so <body> stays see-through and the star canvas
   (behind everything) shows. */
html body, html body.ink-grain { background: transparent; }
#site-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Dark button with a light label ("Schedule a call" on the light band). */
.btn-ink-amber { background: #13161E; border-color: #13161E; color: #F3F0F3; }
.btn-ink-amber:hover { background: #1A1E29; border-color: #1A1E29; color: #F3F0F3; box-shadow: 0 10px 28px -12px rgba(19,22,30,.55); }
.btn-ink-amber:focus-visible { outline: 2px solid #13161E; outline-offset: 3px; }

/* Status tag on the Games page banners: in the text column above the name,
   larger than on the cards. */
.gcard-tag.banner-tag { position: static; height: 34px; padding: 0 16px; font-size: 12px; gap: 9px; }
.gcard-tag.banner-tag .status-dot { width: 7px; height: 7px; }
@media (min-width: 768px) { .gcard-tag.banner-tag { height: 40px; padding: 0 20px; font-size: 13.5px; } .gcard-tag.banner-tag .status-dot { width: 8px; height: 8px; } }

/* --- Home hero: the planet (client 2026-10-27) ----------------------------
   The design's grid and planet (design-shared.css: .hero-grid, .pl-*), with
   room for the 72 / 88px menu, the stacked layout on portrait tablets too (the
   layout the client chose for iPad mini) and the hero buttons' existing size. */
.hero-planet { padding-top: 96px; padding-bottom: 8px; }
@media (min-width: 768px) { .hero-planet { padding-top: 120px; padding-bottom: 24px; } }
.hero-orbs.is-still .pl-body, .hero-orbs.is-still .pl-glow, .hero-orbs.is-still .pl-moon { animation: none; }
.hero-title { line-height: 0.98; text-transform: none; text-wrap: balance; }   /* "ALGOL Games", as written */
.hero-lede { margin-top: 16px; font-size: clamp(15px, 1.7vw, 26px); line-height: 1.45; max-width: 21em; text-wrap: pretty; }
.hero-btns { margin-top: 24px; }
@media (min-width: 768px) { .hero-lede { margin-top: 26px; } .hero-btns { margin-top: 32px; } }
.hero-grid.is-art-only { grid-template-columns: minmax(0, 1fr); }
.hero-grid.is-art-only .hero-art { grid-area: 1 / 1; justify-self: center; }
/* Stacked: phones and portrait tablets. The sphere itself is centred (the box
   also holds the moon on its right). */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; min-height: 0; }
  .hero-art { grid-area: 1 / 1; justify-self: center; }
  .hero-copy { grid-area: 2 / 1; text-align: center; }
  .hero-orbs { --s: min(84vw, 360px); translate: 8.03% 0; }
  .hero-lede { margin-left: auto; margin-right: auto; max-width: 30em; text-wrap: balance; }
  .hero-btns.btn-pair { max-width: 34rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hero-planet { padding-top: 128px; }
  .hero-grid { row-gap: 40px; }
  .hero-orbs { --s: min(60vw, 480px); }
  .hero-title { font-size: clamp(40px, 6vw, 58px); }
  .hero-lede { font-size: clamp(17px, 2.4vw, 22px); }
  /* the buttons share the text's width (as on phones), at most 34rem */
  .hero-btns.btn-pair { display: flex; width: auto; }
  .hero-btns.btn-pair > * { min-width: max-content; }
  .hero-btns.btn-pair[data-stack] > * { flex-basis: 100%; }
}
/* Hero buttons: their size from before (36px on phones with a 44px touch area,
   44px from 768px, 50px from 1024px). */
.btn-pill.hero-btn { height: 36px; padding: 0 12px; font-size: 10px; letter-spacing: .06em; position: relative; }
.btn-pill.hero-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
@media (min-width: 768px) { .btn-pill.hero-btn { height: 44px; padding: 0 22px; font-size: 12.5px; letter-spacing: .08em; } }
@media (min-width: 1024px) { .btn-pill.hero-btn { height: 50px; padding: 0 28px; font-size: 14px; } }

/* --- Client 2026-10-27: small labels in the site's own font ----------------- */
.news-date { font-family: Archivo, system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.roadmap-date { font-family: Archivo, system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243,240,243,0.6); }
.news-featured { font-family: Archivo, system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,240,243,0.7); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(243,240,243,0.2); }
/* A news article's page: its picture (cover, or the stripes and orb) on top. */
.news-article-art { height: 240px; }
@media (min-width: 768px) { .news-article-art { height: 360px; } }
/* "We Offer:" between the Why ALGOL? text and its list. */
.why-offer { font-family: Archivo, system-ui, sans-serif; font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); color: #F3F0F3; text-align: center; margin: 0 0 20px; }
@media (min-width: 768px) { .why-offer { margin-bottom: 28px; } }

/* --- Games page banners (client 2026-10-27 and 2026-10-29) ----------------- */
/* Large screens. A single picture lies behind the text (the left 7 of 12
   columns). With game art in front, the art and the text share the row (the
   art on the side chosen in the admin) and the text is centred to the art, as
   the Home page's text is to the planet; the background fills the banner. */
.banner-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 64px; align-items: center; min-height: 340px; }
.banner-copy { grid-column: 1 / span 7; }
.banner-art { display: none; }
.banner-hero.is-layered .banner-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
.banner-hero.is-layered .banner-art { display: grid; place-items: center; grid-column: 1; grid-row: 1; }
.banner-hero.is-layered .banner-copy { grid-column: 2; grid-row: 1; }
.banner-hero.is-layered.art-right .banner-art { grid-column: 2; }
.banner-hero.is-layered.art-right .banner-copy { grid-column: 1; }
/* The art always whole, never cut; the banners' arts share one place so the banner keeps its height. */
.banner-art-img { grid-area: 1 / 1; display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(260px, 30vw, 440px); object-fit: contain; user-select: none; }
.banner-pic-m { display: none; }
/* Landscape tablets: a single wide picture keeps the side chosen in the admin in view. */
@media (max-width: 1023px) { .banner-bg > img, .banner-bg > video { object-position: var(--focus, 50% 50%); } }
.banner-bg.is-layer > img, .banner-bg.is-layer > video { object-position: 50% 50%; }
/* Phones and portrait tablets (the Home page's stacked layout): the art, or a
   single picture, above the text; the text and buttons centred. */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .banner-grid, .banner-hero.is-layered .banner-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; min-height: 0; }
  .banner-copy, .banner-hero.is-layered .banner-copy, .banner-hero.is-layered.art-right .banner-copy { grid-column: 1; grid-row: auto; min-height: 236px; text-align: center; }
  .banner-hero.is-layered .banner-art, .banner-hero.is-layered.art-right .banner-art { grid-column: 1; grid-row: 1; }
  .banner-art-img { max-height: clamp(220px, 58vw, 400px); }
  .banner-lede { margin-left: auto; margin-right: auto; text-wrap: balance; }
  .banner-copy .btn-pair { margin-left: auto; margin-right: auto; max-width: 34rem; }
  /* A single picture: above the text, edge to edge - on portrait tablets the
     wide picture whole, on phones 4:3 (its phone picture, or the chosen side). */
  .banner-hero.is-single .banner-bg { display: none; }
  .banner-hero.is-single .banner-pic-m { display: block; position: relative; aspect-ratio: 1470 / 570; overflow: hidden; background: #1A1E29; }
}
@media (max-width: 767px) {
  .banner-hero.is-single .banner-pic-m { aspect-ratio: 4 / 3; }
}

/* --- Cookie notice (client 2026-10-27: a small rectangle in the design's colours) */
.cookie-notice { position: fixed; z-index: 90; left: 24px; bottom: 24px; width: min(380px, calc(100vw - 48px)); padding: 18px 18px 16px; border-radius: 16px;
  background: #1A1E29; border: 1px solid rgba(243,240,243,0.14); box-shadow: 0 18px 50px -12px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(10px); transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,1,.36,1); }
.cookie-notice.is-in { opacity: 1; transform: none; }
.cookie-text { font-family: Archivo, system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: rgba(243,240,243,0.78); }
.cookie-link { color: #F3F0F3; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-actions { display: flex; gap: 8px; margin-top: 14px; }
.cookie-actions > .btn-pill.cookie-btn { flex: 1 1 0; height: 40px; padding: 0 14px; }
@media (max-width: 639px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; width: auto; }
  /* The scroll-to-top button would sit on the notice: it waits until it is answered. */
  body.has-cookie-notice .sticky-cta { opacity: 0 !important; pointer-events: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cookie-notice { transition: none; } }

/* --- About (client 2026-10-27) ------------------------------------------- */
/* The intro's first line: ordinary text (it was a small mono caps label). */
.about-kicker { font-family: Archivo, system-ui, sans-serif; font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; line-height: 1.4; color: rgba(243,240,243,0.7); }
/* "Two Stars, Shining as One": the text on the right, centred like "What We Do"
   above it (client 2026-10-29); the left half is kept for a picture or
   animation (Admin -> Page text -> About). On phones that picture lies behind
   the text, dimmed, so the text stays readable. */
.two-stars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.two-stars-visual { position: relative; align-self: stretch; min-height: 280px; }
.two-stars-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.two-stars-text { grid-column: 2; text-align: center; }
.two-stars-text p { text-wrap: pretty; }
@media (max-width: 767px) {
  .two-stars { grid-template-columns: minmax(0, 1fr); position: relative; }
  .two-stars-visual { position: absolute; inset: 0; min-height: 0; z-index: 0; opacity: 0.22; pointer-events: none; }
  .two-stars-media { object-fit: cover; }
  .two-stars-text { grid-column: 1; position: relative; z-index: 1; }
}

/* --- Button colours chosen in Admin -> Buttons --------------------------- */
/* The chosen fill / text / border replace the design's colours in every state
   (doubled class: stronger than the design's hover rules, e.g. the light
   game-card hover). Hover keeps the colours and only lifts with a shadow. */
.btn-custom.btn-custom, .btn-custom.btn-custom:hover, .btn-custom.btn-custom:focus-visible, .gcard:hover .btn-custom.btn-custom {
  background: var(--btn-bg); border-color: var(--btn-bd); color: var(--btn-fg);
}
.btn-custom.btn-custom:hover { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8); }
.btn-custom.btn-custom:focus-visible { outline: 2px solid #F3F0F3; outline-offset: 2px; }
.bg-amber .btn-custom.btn-custom:focus-visible { outline-color: #13161E; outline-offset: 3px; }
.btn-custom-text.btn-custom-text, .btn-custom-text.btn-custom-text:hover { color: var(--btn-fg); }

/* A 44px touch area for small controls that are already positioned (absolute
   or relative): the visible size stays as designed. */
.hit-ext::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* Two buttons of the same size (client 2026-10-13): side by side at the wider
   one's width; on phones they share the row equally (or each takes a row when
   they don't fit side by side). */
.btn-pair { display: flex; flex-wrap: wrap; }
.btn-pair > * { flex: 1 1 0; min-width: max-content; }
.btn-pair[data-stack] > * { flex-basis: 100%; }
@media (max-width: 639px) { .btn-pair > .btn-pill:not(.hero-btn) { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 768px) {
  .btn-pair { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; }
  .btn-pair > * { min-width: 0; }
  .btn-pair[data-stack] { grid-auto-flow: row; width: 100%; }
  .btn-pair.is-centred { margin-left: auto; margin-right: auto; }
}

/* --- Client 2026-10-29 ----------------------------------------------------- */
/* Section headings and the line under them spread wider ("to this rectangle"),
   so on large screens most of them take one line; on smaller screens the width
   of the screen sets it. */
.sec-wide { max-width: 60rem; }
/* Game cards show their picture as uploaded (no darkening over it); a slight
   shadow under the letters keeps the name and the link readable on any picture. */
.gcard-title, .gcard-more { text-shadow: 0 1px 3px rgba(19,22,30,0.55); }
/* News pictures whole (no cropping on any screen): on the list's cards in one
   shared frame, so the cards line up, the picture fitted inside on the card's
   own colour; on the featured card and the article page in their own shape. */
.news-pic { display: block; width: 100%; height: auto; }
/* (one column on phones: each picture in its own shape there) */
@media (min-width: 640px) {
  .news-pic-box { aspect-ratio: 16 / 10; }
  .news-pic-box > picture { position: absolute; inset: 0; }
  .news-pic-box .news-pic { width: 100%; height: 100%; object-fit: contain; }
}
.news-featured-pic { display: flex; align-items: center; }
.news-featured-pic > picture { width: 100%; }
.news-article-pic { background: #1A1E29; }
.news-article-pic .news-pic { width: auto; max-width: 100%; max-height: min(80vh, 720px); margin: 0 auto; }
/* Client 2026-10-27 / 2026-10-29 ("remove the fine texts"): the small functional labels
   (form labels, filters, counters, language codes) in the site's own font at a
   readable size - no mono micro-labels. */
html .fig { font-family: Archivo, system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
.ui-label { font-family: Archivo, system-ui, sans-serif; font-weight: 600; letter-spacing: 0.06em; }