/* ============================================================
   ALKACALM — Tailwind-equivalent utility layer (hand-written)
   ------------------------------------------------------------
   Every class token used in a `className` string across the V3
   source (app/ + components/) is implemented here with Tailwind
   v4 semantics, verified rule-by-rule AND in-browser against the
   app's compiled Tailwind output (.next dev CSS chunk of
   app/globals.css).

   Load order: link this file AFTER css/site.css on every page.

   Cascade design (verified against the V3 compiled CSS in a real
   browser — reproduce, do not "fix"):
   1. In V3, utilities live in `@layer utilities` while the
      globals.css custom classes (.btn, .glass, .section …) and
      `* { border-color: var(--color-border) }` are UNLAYERED, so
      the custom CSS always beats utilities on shared properties.
      Verified V3 renders reproduced here:
      - ALL border-color utilities (static, hover:, focus:) are
        overridden by `* { border-color }` → every border renders
        var(--color-border) unless a custom class colours it.
        Those utilities are therefore emitted inside
        `@layer utilities` at the end of this file, so the
        unlayered site.css rule keeps beating them, exactly as in
        V3. (e.g. the media dropzone renders a 1px SOLID hairline
        despite `border-2 border-dashed border-white/12`.)
      - `btn h-10 px-4 text-sm` renders at .btn's own
        3rem / 0 1.6rem / 0.9rem; `section pt-32`,
        `container-lux max-w-3xl`, `holo-ring rounded-full`
        likewise keep the custom-class value. Reproduced by the
        "cascade-parity tail" at the very end of this file.
   2. site.css's preflight is unlayered (unlike V3's, which is in
      `@layer base`), so the main utilities here are UNLAYERED
      too: class specificity beats the preflight's element/
      universal selectors, and the few zero-specificity rules
      (:where(...) for space-y/divide-y) win their ties against
      the preflight by source order (this file loads later).

   Conventions:
   - Selectors are escaped exactly as Tailwind emits them
     (.md\:flex, .bg-white\/5, .text-\[var\(--color-silver\)\]).
   - Spacing unit: 0.25rem (values inlined: gap-3 = 0.75rem …).
   - White/black alpha shorthands use rgba(255,255,255,N/100) /
     rgba(0,0,0,N/100). Palette + var() alpha shorthands get an
     sRGB fallback first, then a color-mix(in oklab, …) override
     (same progressive enhancement Tailwind v4 ships).
   - rounded-xl / rounded-2xl honour the project @theme overrides
     via var(--radius-xl) = 1.25rem, var(--radius-2xl) = 1.75rem
     (defined in site.css).
   - Breakpoints (min-width): sm 40rem (640px) · md 48rem (768px)
     · lg 64rem (1024px). Only breakpoints actually used are
     emitted; max-sm: uses `@media not (min-width: 40rem)`
     exactly like Tailwind v4.
   - `.group` is a marker class only — Tailwind generates no CSS
     for it; it exists purely as a hook for group-hover variants.

   Order: variable defaults → keyframes → base utilities (in
   Tailwind's canonical property order) → state variants
   (group-hover / first / last / hover / focus / focus-visible /
   active / disabled) → responsive media blocks → layered
   border-color utilities (V3 quirk) → cascade-parity tail.
   ============================================================ */

/* ---------- Palette + font tokens used by utilities ----------
   (site.css owns the brand tokens; these are the Tailwind
   default-theme values this app consumes, with the same lab()
   progressive enhancement the compiled output ships.) */
:root {
  --color-black: #000;
  --color-red-200: #ffcaca;
  --color-red-300: #ffa3a3;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-amber-300: #ffd236;
  --color-amber-400: #fcbb00;
  --color-amber-500: #f99c00;
  --color-emerald-300: #5ee9b5;
  --color-emerald-400: #00d294;
  --color-emerald-500: #00bb7f;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
@supports (color: lab(0% 0 0)) {
  :root {
    --color-red-200: lab(86.017% 19.8815 7.75869);
    --color-red-300: lab(76.5514% 36.4219 15.5335);
    --color-red-400: lab(63.7053% 60.7449 31.3109);
    --color-red-500: lab(55.4814% 75.0732 48.8528);
    --color-amber-300: lab(86.4156% 6.13147 78.3961);
    --color-amber-400: lab(80.1641% 16.6016 99.2089);
    --color-amber-500: lab(72.7183% 31.8672 97.9407);
    --color-emerald-300: lab(83.9203% -48.7124 13.8849);
    --color-emerald-400: lab(75.0771% -60.7313 19.4146);
    --color-emerald-500: lab(66.9756% -58.27 19.5419);
  }
}

@layer utilities;

/* ---------- Composition-variable defaults ----------
   Set on every element (like Tailwind's property fallbacks) so
   composable utilities (translate, border style, shadows/rings,
   gradients, transitions, line-height) behave order-independently
   and never leak via custom-property inheritance. Zero
   specificity: every utility below overrides these. */
*,
::before,
::after,
::backdrop {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-border-style: solid;
  --tw-leading: initial;
  --tw-shadow: 0 0 #0000;
  --tw-inset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-color: initial;
  --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-duration: initial;
  --tw-ease: initial;
}

/* ---------- Keyframes (animate-spin / animate-ping) ---------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/* ============================================================
   Interactivity / accessibility
   ============================================================ */
.pointer-events-none {
  pointer-events: none;
}
.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

/* ============================================================
   Position / inset / z-index
   ============================================================ */
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0;
}
.inset-\[6\%\] {
  inset: 6%;
}
.inset-x-0 {
  inset-inline: 0;
}
.inset-y-0 {
  inset-block: 0;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.top-0 {
  top: 0;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-7 {
  top: 1.75rem;
}
.top-\[3px\] {
  top: 3px;
}
.-right-1 {
  right: -0.25rem;
}
.right-0 {
  right: 0;
}
.right-1 {
  right: 0.25rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-5 {
  right: 1.25rem;
}
.bottom-0 {
  bottom: 0;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[22px\] {
  left: 22px;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[90\] {
  z-index: 90;
}
.z-\[120\] {
  z-index: 120;
}
.z-\[200\] {
  z-index: 200;
}

/* ============================================================
   Margin
   ============================================================ */
.mx-auto {
  margin-inline: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-auto {
  margin-top: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-auto {
  margin-left: auto;
}

/* ============================================================
   Display / line-clamp
   ============================================================ */
.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}

/* ============================================================
   Aspect / sizing
   ============================================================ */
.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}
.h-0 {
  height: 0;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-20 {
  height: 5rem;
}
.h-32 {
  height: 8rem;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[40vh\] {
  height: 40vh;
}
.h-auto {
  height: auto;
}
.h-fit {
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-72 {
  max-height: 18rem;
}
.min-h-\[20rem\] {
  min-height: 20rem;
}
.min-h-\[24rem\] {
  min-height: 24rem;
}
.min-h-\[26rem\] {
  min-height: 26rem;
}
.min-h-dvh {
  min-height: 100dvh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-40 {
  width: 10rem;
}
.w-60 {
  width: 15rem;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[50\%\] {
  width: 50%;
}
.w-\[78\%\] {
  width: 78%;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[190px\] {
  max-width: 190px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.min-w-0 {
  min-width: 0;
}
.min-w-4 {
  min-width: 1rem;
}
.min-w-36 {
  min-width: 9rem;
}
.min-w-48 {
  min-width: 12rem;
}
.min-w-\[520px\] {
  min-width: 520px;
}

/* ============================================================
   Flex sizing
   ============================================================ */
.flex-1 {
  flex: 1;
}
.shrink-0 {
  flex-shrink: 0;
}

/* ============================================================
   Translate / scale / rotate (native CSS transform properties,
   as Tailwind v4 emits them)
   ============================================================ */
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-full {
  --tw-translate-y: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-\[1\.4\] {
  scale: 1.4;
}
.rotate-180 {
  rotate: 180deg;
}

/* ============================================================
   Animation
   ============================================================ */
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ============================================================
   Cursor / touch / resize / scroll / lists
   ============================================================ */
.cursor-grab {
  cursor: grab;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.resize-none {
  resize: none;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-disc {
  list-style-type: disc;
}

/* ============================================================
   Grid templates
   ============================================================ */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[1fr_90px_150px\] {
  grid-template-columns: 1fr 90px 150px;
}
.grid-cols-\[1fr_110px_90px\] {
  grid-template-columns: 1fr 110px 90px;
}
.grid-cols-\[1fr_130px_80px_96px\] {
  grid-template-columns: 1fr 130px 80px 96px;
}
.grid-cols-\[120px_160px_1fr\] {
  grid-template-columns: 120px 160px 1fr;
}

/* ============================================================
   Flex direction / alignment / gaps
   ============================================================ */
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-baseline {
  align-items: baseline;
}
.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-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-9 {
  gap: 2.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-px {
  gap: 1px;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}

/* ============================================================
   Space-between children (v4: margin on all but last child;
   :where() keeps zero specificity, matching Tailwind — its tie
   against site.css's preflight is won by this file loading later)
   ============================================================ */
:where(.space-y-1 > :not(:last-child)) {
  margin-block-end: 0.25rem;
}
:where(.space-y-3 > :not(:last-child)) {
  margin-block-end: 0.75rem;
}
:where(.space-y-4 > :not(:last-child)) {
  margin-block-end: 1rem;
}

/* ============================================================
   Divide width (v4: bottom border on all but last child).
   The divide COLOR lives in the layered block near the end of
   this file (V3 border-color quirk).
   ============================================================ */
:where(.divide-y > :not(:last-child)) {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}

/* ============================================================
   Overflow / truncation
   ============================================================ */
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}

/* ============================================================
   Border radius (xl/2xl honour the project @theme overrides)
   ============================================================ */
.rounded {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.25rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: var(--radius-xl); /* 1.25rem project override */
}
.rounded-2xl {
  border-radius: var(--radius-2xl); /* 1.75rem project override */
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[var\(--radius-2xl\)\] {
  border-radius: var(--radius-2xl);
}
.rounded-full {
  border-radius: 3.40282e38px;
}

/* ============================================================
   Border width / style (border COLORS live in the layered block
   near the end of this file — V3 quirk)
   ============================================================ */
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}

/* ============================================================
   Background color
   ============================================================ */
.bg-\[\#5c616a\] {
  background-color: #5c616a;
}
.bg-\[\#25D366\] {
  background-color: #25d366;
}
.bg-\[\#25D366\]\/10 {
  background-color: rgba(37, 211, 102, 0.1);
  background-color: lab(74.7716% -60.9649 41.133 / 0.1);
}
.bg-\[rgba\(43\,179\,163\,0\.12\)\] {
  background-color: rgba(43, 179, 163, 0.12);
}
.bg-\[rgba\(43\,179\,163\,0\.13\)\] {
  background-color: rgba(43, 179, 163, 0.13);
}
.bg-\[rgba\(43\,179\,163\,0\.14\)\] {
  background-color: rgba(43, 179, 163, 0.14);
}
.bg-\[rgba\(43\,179\,163\,0\.15\)\] {
  background-color: rgba(43, 179, 163, 0.15);
}
.bg-\[var\(--color-aqua\)\] {
  background-color: var(--color-aqua);
}
.bg-\[var\(--color-ink\)\] {
  background-color: var(--color-ink);
}
.bg-\[var\(--color-ink\)\]\/40 {
  background-color: rgba(19, 19, 24, 0.4);
  background-color: color-mix(in oklab, var(--color-ink) 40%, transparent);
}
.bg-\[var\(--color-ink\)\]\/90 {
  background-color: rgba(19, 19, 24, 0.9);
  background-color: color-mix(in oklab, var(--color-ink) 90%, transparent);
}
.bg-\[var\(--color-obsidian\)\] {
  background-color: var(--color-obsidian);
}
.bg-amber-400 {
  background-color: var(--color-amber-400);
}
.bg-amber-400\/10 {
  background-color: rgba(252, 187, 0, 0.1);
  background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
}
.bg-amber-500\/10 {
  background-color: rgba(249, 156, 0, 0.1);
  background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.2);
}
.bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.3);
}
.bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.5);
}
.bg-black\/70 {
  background-color: rgba(0, 0, 0, 0.7);
}
.bg-emerald-400 {
  background-color: var(--color-emerald-400);
}
.bg-emerald-500\/10 {
  background-color: rgba(0, 187, 127, 0.1);
  background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
}
.bg-red-400 {
  background-color: var(--color-red-400);
}
.bg-red-500\/10 {
  background-color: rgba(251, 44, 54, 0.1);
  background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  background-color: var(--color-white);
}
.bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05);
}
.bg-white\/12 {
  background-color: rgba(255, 255, 255, 0.12);
}
.bg-white\/\[0\.02\] {
  background-color: rgba(255, 255, 255, 0.02);
}
.bg-white\/\[0\.03\] {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   Gradients (Tailwind v4 stop-variable mechanism)
   ============================================================ */
.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-black {
  --tw-gradient-from: var(--color-black);
  --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)
  );
}
.from-black\/50 {
  --tw-gradient-from: rgba(0, 0, 0, 0.5);
  --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)
  );
}
.from-black\/60 {
  --tw-gradient-from: rgba(0, 0, 0, 0.6);
  --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)
  );
}
.via-black\/60 {
  --tw-gradient-via: rgba(0, 0, 0, 0.6);
  --tw-gradient-via-stops: var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.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 fit / position
   ============================================================ */
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}

/* ============================================================
   Padding
   ============================================================ */
.p-0 {
  padding: 0;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-\[3px\] {
  padding: 3px;
}
.px-1 {
  padding-inline: 0.25rem;
}
.px-1\.5 {
  padding-inline: 0.375rem;
}
.px-2 {
  padding-inline: 0.5rem;
}
.px-2\.5 {
  padding-inline: 0.625rem;
}
.px-3 {
  padding-inline: 0.75rem;
}
.px-4 {
  padding-inline: 1rem;
}
.px-5 {
  padding-inline: 1.25rem;
}
.px-6 {
  padding-inline: 1.5rem;
}
.py-0\.5 {
  padding-block: 0.125rem;
}
.py-1 {
  padding-block: 0.25rem;
}
.py-1\.5 {
  padding-block: 0.375rem;
}
.py-2 {
  padding-block: 0.5rem;
}
.py-2\.5 {
  padding-block: 0.625rem;
}
.py-3 {
  padding-block: 0.75rem;
}
.py-3\.5 {
  padding-block: 0.875rem;
}
.py-4 {
  padding-block: 1rem;
}
.py-5 {
  padding-block: 1.25rem;
}
.py-6 {
  padding-block: 1.5rem;
}
.py-8 {
  padding-block: 2rem;
}
.py-12 {
  padding-block: 3rem;
}
.py-16 {
  padding-block: 4rem;
}
.py-28 {
  padding-block: 7rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-36 {
  padding-top: 9rem;
}
.pt-\[12vh\] {
  padding-top: 12vh;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-5 {
  padding-left: 1.25rem;
}

/* ============================================================
   Text alignment / font family
   ============================================================ */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: var(--font-mono);
}
.font-serif {
  font-family: var(--font-serif);
}

/* ============================================================
   Font size (Tailwind v4 scale; line-height yields to any
   leading-* utility via --tw-leading)
   ============================================================ */
.text-xs {
  font-size: 0.75rem;
  line-height: var(--tw-leading, calc(1 / 0.75));
}
.text-sm {
  font-size: 0.875rem;
  line-height: var(--tw-leading, calc(1.25 / 0.875));
}
.text-base {
  font-size: 1rem;
  line-height: var(--tw-leading, calc(1.5 / 1));
}
.text-lg {
  font-size: 1.125rem;
  line-height: var(--tw-leading, calc(1.75 / 1.125));
}
.text-xl {
  font-size: 1.25rem;
  line-height: var(--tw-leading, calc(1.75 / 1.25));
}
.text-2xl {
  font-size: 1.5rem;
  line-height: var(--tw-leading, calc(2 / 1.5));
}
.text-3xl {
  font-size: 1.875rem;
  line-height: var(--tw-leading, calc(2.25 / 1.875));
}
.text-5xl {
  font-size: 3rem;
  line-height: var(--tw-leading, 1);
}
.text-\[0\.5em\] {
  font-size: 0.5em;
}
.text-\[0\.55rem\] {
  font-size: 0.55rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.68rem\] {
  font-size: 0.68rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.72rem\] {
  font-size: 0.72rem;
}
.text-\[1\.2rem\] {
  font-size: 1.2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[clamp\(2\.1rem\,8\.5vw\,3\.1rem\)\] {
  font-size: clamp(2.1rem, 8.5vw, 3.1rem);
}
.text-\[clamp\(2\.2rem\,6vw\,4\.5rem\)\] {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
}
.text-\[clamp\(2\.2rem\,6vw\,5rem\)\] {
  font-size: clamp(2.2rem, 6vw, 5rem);
}
.text-\[clamp\(2\.64rem\,7\.2vw\,5\.7rem\)\] {
  font-size: clamp(2.64rem, 7.2vw, 5.7rem);
}
.text-\[clamp\(2rem\,5vw\,3\.5rem\)\] {
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.text-\[clamp\(2rem\,5vw\,3\.75rem\)\] {
  font-size: clamp(2rem, 5vw, 3.75rem);
}

/* ============================================================
   Line height / font weight / letter spacing
   ============================================================ */
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: 1.625;
  line-height: 1.625;
}
.leading-tight {
  --tw-leading: 1.25;
  line-height: 1.25;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}

/* ============================================================
   Whitespace
   ============================================================ */
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}

/* ============================================================
   Text color
   ============================================================ */
.text-\[var\(--color-aqua\)\] {
  color: var(--color-aqua);
}
.text-\[var\(--color-foreground\)\] {
  color: var(--color-foreground);
}
.text-\[var\(--color-graphite\)\] {
  color: var(--color-graphite);
}
.text-\[var\(--color-heading\)\] {
  color: var(--color-heading);
}
.text-\[var\(--color-platinum\)\] {
  color: var(--color-platinum);
}
.text-\[var\(--color-silver\)\] {
  color: var(--color-silver);
}
.text-amber-300 {
  color: var(--color-amber-300);
}
.text-black {
  color: var(--color-black);
}
.text-emerald-300 {
  color: var(--color-emerald-300);
}
.text-red-300 {
  color: var(--color-red-300);
}

/* ============================================================
   Text transform / style / numerals / decoration
   ============================================================ */
.normal-case {
  text-transform: none;
}
.uppercase {
  text-transform: uppercase;
}
.not-italic {
  font-style: normal;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Opacity / blend
   ============================================================ */
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-\[0\.14\] {
  opacity: 0.14;
}
.mix-blend-screen {
  mix-blend-mode: screen;
}

/* ============================================================
   Box shadow (composes with rings via the --tw-* slots)
   ============================================================ */
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  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_0_26px_5px_rgba\(43\,179\,163\,0\.55\)\] {
  --tw-shadow: 0 0 26px 5px rgba(43, 179, 163, 0.55);
  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_0_70px_-20px_rgba\(43\,179\,163\,0\.5\)\] {
  --tw-shadow: 0 0 70px -20px rgba(43, 179, 163, 0.5);
  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_8px_24px_-6px_rgba\(43\,179\,163\,0\.6\)\] {
  --tw-shadow: 0 8px 24px -6px rgba(43, 179, 163, 0.6);
  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_12px_40px_-8px_rgba\(37\,211\,102\,0\.6\)\] {
  --tw-shadow: 0 12px 40px -8px rgba(37, 211, 102, 0.6);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* ============================================================
   Rings (v4: default width 1px, default color currentColor)
   ============================================================ */
.ring,
.ring-1 {
  --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
  --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-4 {
  --tw-ring-shadow: 0 0 0 4px var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-\[var\(--color-aqua\)\]\/30 {
  --tw-ring-color: rgba(43, 179, 163, 0.3);
}
.ring-\[var\(--color-aqua\)\]\/70 {
  --tw-ring-color: rgba(43, 179, 163, 0.7);
}
.ring-white\/10 {
  --tw-ring-color: rgba(255, 255, 255, 0.1);
}
.ring-white\/70 {
  --tw-ring-color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Outline
   ============================================================ */
.outline-none {
  outline-style: none;
}

/* ============================================================
   Backdrop filters (v4: both `backdrop-blur` and
   `backdrop-blur-sm` resolve to blur(8px) in this app's build)
   ============================================================ */
.backdrop-blur {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ============================================================
   Transitions (duration/ease utilities compose via --tw-*)
   ============================================================ */
.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,
    content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.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, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 0.15s);
}
.duration-150 {
  --tw-duration: 0.15s;
  transition-duration: 0.15s;
}
.duration-300 {
  --tw-duration: 0.3s;
  transition-duration: 0.3s;
}
.duration-500 {
  --tw-duration: 0.5s;
  transition-duration: 0.5s;
}
.duration-700 {
  --tw-duration: 0.7s;
  transition-duration: 0.7s;
}
.ease-out {
  --tw-ease: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================
   User select
   ============================================================ */
.select-none {
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   VARIANTS — group-hover (hover-capable devices only,
   matching Tailwind v4's @media (hover: hover) gate)
   ============================================================ */
@media (hover: hover) {
  .group-hover\:scale-105:is(:where(.group):hover *) {
    scale: 1.05;
  }
  .group-hover\:opacity-90:is(:where(.group):hover *) {
    opacity: 0.9;
  }
}

/* ============================================================
   VARIANTS — structural (first / last)
   ============================================================ */
.first\:border-t-0:first-child {
  border-top-style: var(--tw-border-style);
  border-top-width: 0;
}
.last\:border-b-0:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}

/* ============================================================
   VARIANTS — hover (hover-capable devices only; hover BORDER
   COLOURS live in the layered block below — V3 quirk)
   ============================================================ */
@media (hover: hover) {
  .hover\:scale-105:hover {
    scale: 1.05;
  }
  .hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .hover\:bg-white\/\[0\.03\]:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
  .hover\:text-\[var\(--color-aqua\)\]:hover {
    color: var(--color-aqua);
  }
  .hover\:text-\[var\(--color-platinum\)\]:hover {
    color: var(--color-platinum);
  }
  .hover\:text-\[var\(--color-silver\)\]:hover {
    color: var(--color-silver);
  }
  .hover\:text-red-200:hover {
    color: var(--color-red-200);
  }
  .hover\:text-white:hover {
    color: var(--color-white);
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
  .hover\:brightness-105:hover {
    filter: brightness(105%);
  }
}

/* ============================================================
   VARIANTS — focus (skip-link + form fields; the focus border
   colour lives in the layered block below — V3 quirk)
   ============================================================ */
.focus\:not-sr-only:focus {
  clip-path: none;
  white-space: normal;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: static;
  overflow: visible;
}
.focus\:fixed:focus {
  position: fixed;
}
.focus\:top-4:focus {
  top: 1rem;
}
.focus\:left-4:focus {
  left: 1rem;
}
.focus\:z-\[100\]:focus {
  z-index: 100;
}
.focus\:z-\[130\]:focus {
  z-index: 130;
}
.focus\:rounded-full:focus {
  border-radius: 3.40282e38px;
}
.focus\:bg-white:focus {
  background-color: var(--color-white);
}
.focus\:px-4:focus {
  padding-inline: 1rem;
}
.focus\:py-2:focus {
  padding-block: 0.5rem;
}
.focus\:text-sm:focus {
  font-size: 0.875rem;
  line-height: var(--tw-leading, calc(1.25 / 0.875));
}
.focus\:text-black:focus {
  color: var(--color-black);
}
.focus\:outline-none:focus {
  outline-style: none;
}

/* ============================================================
   VARIANTS — focus-visible
   ============================================================ */
.focus-visible\:ring-2:focus-visible {
  --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-\[var\(--color-aqua\)\]:focus-visible {
  --tw-ring-color: var(--color-aqua);
}

/* ============================================================
   VARIANTS — active / disabled
   ============================================================ */
.active\:scale-95:active {
  scale: 0.95;
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

/* ============================================================
   RESPONSIVE — max-sm (below 640px)
   ============================================================ */
@media not (min-width: 40rem) {
  .max-sm\:w-full {
    width: 100%;
  }
  .max-sm\:flex-col {
    flex-direction: column;
  }
}

/* ============================================================
   RESPONSIVE — sm (min-width 40rem = 640px)
   ============================================================ */
@media (min-width: 40rem) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:min-h-\[15rem\] {
    min-height: 15rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:gap-3 {
    gap: 0.75rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:p-7 {
    padding: 1.75rem;
  }
  .sm\:p-8 {
    padding: 2rem;
  }
  .sm\:p-10 {
    padding: 2.5rem;
  }
  .sm\:p-12 {
    padding: 3rem;
  }
  .sm\:px-10 {
    padding-inline: 2.5rem;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: var(--tw-leading, calc(1.75 / 1.125));
  }
  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: var(--tw-leading, calc(1.75 / 1.25));
  }
  .sm\:text-\[1\.35rem\] {
    font-size: 1.35rem;
  }
}

/* ============================================================
   RESPONSIVE — md (min-width 48rem = 768px)
   ============================================================ */
@media (min-width: 48rem) {
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-cols-\[1fr_1fr_130px\] {
    grid-template-columns: 1fr 1fr 130px;
  }
  .md\:grid-cols-\[190px_1fr\] {
    grid-template-columns: 190px 1fr;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: var(--tw-leading, calc(2.5 / 2.25));
  }
}

/* ============================================================
   RESPONSIVE — lg (min-width 64rem = 1024px)
   ============================================================ */
@media (min-width: 64rem) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:block {
    display: block;
  }
  .lg\:min-h-\[13rem\] {
    min-height: 13rem;
  }
  .lg\:min-h-\[34rem\] {
    min-height: 34rem;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:gap-6 {
    gap: 1.5rem;
  }
  .lg\:border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .lg\:border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  .lg\:px-16 {
    padding-inline: 4rem;
  }
  .lg\:text-left {
    text-align: left;
  }
}

/* ============================================================
   BORDER-COLOUR UTILITIES — V3 cascade quirk (INTENTIONAL).
   In the original app these are inside `@layer utilities` while
   globals.css's `* { border-color: var(--color-border) }` is
   unlayered, so the universal rule ALWAYS wins: every one of
   these classes renders var(--color-border) in V3 (verified in
   a real browser against the compiled V3 CSS). They are kept in
   a layer here so site.css's identical unlayered rule keeps
   beating them. Do NOT move them out of this layer — that would
   change colours the owner has already approved.
   ============================================================ */
@layer utilities {
  .border-\[\#25D366\]\/30 {
    border-color: rgba(37, 211, 102, 0.3);
    border-color: lab(74.7716% -60.9649 41.133 / 0.3);
  }
  .border-\[var\(--color-aqua\)\] {
    border-color: var(--color-aqua);
  }
  .border-\[var\(--color-aqua\)\]\/25 {
    border-color: rgba(43, 179, 163, 0.25);
    border-color: color-mix(in oklab, var(--color-aqua) 25%, transparent);
  }
  .border-\[var\(--color-border\)\] {
    border-color: var(--color-border);
  }
  .border-\[var\(--color-obsidian\)\] {
    border-color: var(--color-obsidian);
  }
  .border-amber-400\/30 {
    border-color: rgba(252, 187, 0, 0.3);
    border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
  }
  .border-red-500\/30 {
    border-color: rgba(251, 44, 54, 0.3);
    border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white\/0 {
    border-color: rgba(255, 255, 255, 0);
  }
  .border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05);
  }
  .border-white\/8 {
    border-color: rgba(255, 255, 255, 0.08);
  }
  .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .border-white\/12 {
    border-color: rgba(255, 255, 255, 0.12);
  }
  .border-white\/15 {
    border-color: rgba(255, 255, 255, 0.15);
  }
  :where(.divide-white\/6 > :not(:last-child)) {
    border-color: rgba(255, 255, 255, 0.06);
  }
  @media (hover: hover) {
    .hover\:border-\[var\(--color-aqua\)\]\/50:hover {
      border-color: rgba(43, 179, 163, 0.5);
      border-color: color-mix(in oklab, var(--color-aqua) 50%, transparent);
    }
    .hover\:border-\[var\(--color-border-strong\)\]:hover {
      border-color: var(--color-border-strong);
    }
    .hover\:border-white\/40:hover {
      border-color: rgba(255, 255, 255, 0.4);
    }
  }
  .focus\:border-\[var\(--color-aqua\)\]\/60:focus {
    border-color: rgba(43, 179, 163, 0.6);
    border-color: color-mix(in oklab, var(--color-aqua) 60%, transparent);
  }
}

/* ============================================================
   CASCADE-PARITY TAIL — reproduces V3's "custom classes beat
   utilities" ordering for the exact combinations that occur in
   the source (verified in a real browser against the compiled
   V3 CSS). Only the conflicting declarations are restated, with
   values verbatim from site.css, placed after the utilities so
   they win the tie exactly as V3's unlayered globals beat its
   layered utilities. Do NOT remove.
   ============================================================ */
/* `btn btn-* h-10/h-11 px-3..6 text-xs/sm` renders at .btn's own
   metrics in V3 (the sizing utilities are layered there). */
.btn {
  height: 3rem;
  padding: 0 1.6rem;
  font-size: 0.9rem;
}
/* `section pt-32` / `section pt-36`: .section's padding-block
   wins in V3. */
.section {
  padding-block: clamp(5rem, 12vh, 10rem);
}
@media (max-width: 640px) {
  .section {
    padding-block: clamp(2.75rem, 8vh, 4.5rem);
  }
}
/* `container-lux max-w-3xl`: stays 80rem in V3. */
.container-lux {
  max-width: 80rem;
}
/* `glass border-2 border-dashed`: the media dropzone renders
   glass's own 1px solid border in V3. */
.glass {
  border-width: 1px;
  border-style: solid;
}
/* `holo-ring rounded-full`: holo-ring's 9999px radius wins. */
.holo-ring {
  border-radius: 9999px;
}