billing/app/global.css

/**
 * Hanzo Billing — the whole stylesheet. Plain CSS, no build plugin.
 *
 * TOKENS AND HANDLES both come from @hanzo/ui/styles.css — mono, tnum, paper,
 * row, elevation-1..4, plus @hanzo/design's ladder inlined verbatim (88 tokens,
 * byte-identical values). ONE import, ONE home for colour.
 *
 * ONE token has to be taken back, and only one: --background.
 *
 *   ui/styles.css inlines design's ladder near the top and then, ~160KB later,
 *   the @hanzogui theme runtime redeclares --background for its own themes —
 *   `:root.t_dark` -> var(--t8) = hsla(0,0%,8%), `:root.t_light` -> var(--t189)
 *   = hsla(0,0%,97%) — each with a BARE `:root` fallback beside it, and the
 *   light block comes last. So with no gui class on <html> the ground is
 *   near-white in both themes; billing renders #fafafa ink on it and dark mode
 *   measures 1.03:1.
 *
 *   Re-importing design's colors.css last DOES reclaim it, and that is what
 *   1.0.9 shipped — but only while no gui theme class exists on <html>.
 *   `:root.t_light` is (0,2,0) and design's `.light` is (0,1,0), so the moment
 *   GuiProvider writes its class gui wins on SPECIFICITY and import order stops
 *   mattering. Measured, forcing the class on 1.0.9: dark+t_light = 1.03:1,
 *   light+t_dark = 1.07:1, and even the agreeing pairs drift (t_dark grounds at
 *   #141414, not #0a0a0a). A fix that depends on a separate bug staying
 *   unfixed is not a fix.
 *
 *   --page is the durable answer: a name gui never writes at any specificity,
 *   so nothing can outrank it. It resolves to design's BASE ladder — the rungs
 *   the runtime does not touch — rather than to a second hex. Verified in all
 *   four combinations of {dark,light} x {gui class, none}; the ground holds at
 *   18.97:1 / 19.80:1 in every one. Matches hanzo.industries, which hit this
 *   first; the estate has one downstream answer, not three.
 *
 *   Only --background needs this. Every other token billing reads —
 *   --foreground, --card, --accent, --border*, --primary*, --text-*, --state-*
 *   — was measured unchanged with the gui classes forced on, so they still come
 *   straight from ui's inlined ladder and are NOT restated here.
 *
 *   Removable once @hanzo/ui 8.0.48 lands: it stops ui/gui shadowing design's
 *   --background/--black/--white, after which --page can go back to being
 *   var(--background) and then disappear.
 *
 * Dark is the default (:root is the dark palette) and `.light` retunes it,
 * which is exactly what this app's html.light toggle adds. So the aliases below
 * are ONE ink and ONE ground: each names a design token and nothing more, and
 * the light flip happens because the token underneath changed, not because a
 * second set of literals got restated here and drifted.
 *
 * Design publishes FINISHED colours — hex, and `rgb(255 255 255 / .10)` alpha
 * hairlines. Consume them as `var(--x)`. `hsl(var(--x))` is invalid at
 * computed-value time and the browser drops the whole declaration silently.
 *
 * FONTS are the one thing @hanzo/ui does NOT carry, deliberately: 8.0.47 dropped
 * its @font-face because it duplicated design's and pointed at assets ui does
 * not ship. ui only NAMES the faces — `.mono` is `font-family:'Zen Mono',
 * ui-monospace,...` — so whoever renders must declare them, and design's
 * fonts.css is where they are declared, with urls relative to the package and
 * the two woff2 files alongside (SIL OFL-1.1). Miss that import and nothing
 * fails: the build is green, gui-css-check is green, and every money figure
 * quietly falls back to ui-monospace. Still monospace, still tabular, wrong
 * face, and no screenshot catches it.
 *
 * Everything below the reset is the exact utility vocabulary this app's markup
 * uses, written as ordinary rules. Order is load-bearing in two places, both of
 * which mirror how the classes are actually composed: `.leading-*` sorts after
 * `.text-*`, and `.border-dashed` after the border-width utilities, so the more
 * specific intent wins without any class-merging pass at runtime.
 */
@import '@hanzo/ui/styles.css';
@import '@hanzo/design/tokens/fonts.css';

/* ── tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* The page surface. See the header: gui redeclares --background out from
     under us at a specificity we cannot outrank, so the ground reads a name gui
     never writes. --neutral-950 IS design's dark ground (#0A0A0A — the same
     value --background carries), and it is declared exactly once in the whole
     delivered sheet, so no theme runtime can move it. */
  --page: var(--neutral-950);
  /* Brand — the primary-button triple (`bg-brand` + `text-brand-foreground` +
     `hover:bg-brand-hover`, 52 uses between them). It maps to design's PRIMARY
     family, not its --brand family: --primary is the ink of the current theme
     and inverts with everything else, while --brand is a fixed accent that does
     not restate under `.light`. Mapping the base to --brand and only the hover
     to --primary-hover — which is what this file did — gave a light-grey button
     on a white page whose hover was one shade off itself. Muted is the same ink
     at 10%, derived rather than restated, so it inverts for free. */
  --color-brand: var(--primary);
  --color-brand-foreground: var(--primary-foreground);
  --color-brand-hover: var(--primary-hover);
  --color-brand-muted: color-mix(in oklab, var(--primary) 10%, transparent);

  /* Semantic surfaces and text. The two that were --background read --page;
     card and elevated keep their design tokens, which gui leaves alone. */
  --color-bg: var(--page);
  --color-bg-card: var(--card);
  --color-bg-elevated: var(--accent);
  --color-bg-input: var(--page);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-text: var(--foreground);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-tertiary);
  --color-text-dim: var(--text-disabled);

  /* Status — error/success come from design; warning/info have no design token
     yet, so the literals stay until the ladder grows them. */
  --color-success: var(--state-success);
  --color-warning: #f59e0b;
  --color-danger: var(--state-error);
  --color-info: #3b82f6;
}

/* The light ground. --pure-white is design's own #FFFFFF and, like
   --neutral-950, is declared once in the delivered sheet — the gui runtime
   never restates either, which is exactly why the ground reads them. */
.light {
  --page: var(--pure-white);
}

html {
  scrollbar-gutter: stable;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  -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;
  text-decoration: inherit;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp, pre {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:-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 {
  display: block;
  vertical-align: middle;
}
img, video {
  max-width: 100%;
  height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
: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)) {
      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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}
::-webkit-calendar-picker-indicator {
  line-height: 1;
}
:-moz-ui-invalid {
  box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
  appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* ── page ────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background-color: color-mix(in oklab, var(--color-text) 20%, transparent);
  color: var(--color-text);
}

/* Theme toggle paints a transition class on <html> for the duration of a flip. */
html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

/* ── Apple Pay ───────────────────────────────────────────────────────────── */
/* The mark is WebKit's own (-webkit-appearance), never a hand-drawn logo, and
   the element stays empty. Only rendered when ApplePaySession says the device
   can pay AND Square accepted this origin — which is Safari, the one engine
   that implements the appearance. Sized to the sheet's generic submit (40px,
   radius 8) so the two states of the pay action share one control scale.
   Wallet style follows the ground: white mark on the dark theme, black on
   light — the same inversion the brand pair makes. */

.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: pay;
  -apple-pay-button-style: white;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  margin-top: 4px;
  cursor: pointer;
}
.apple-pay-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.light .apple-pay-button {
  -apple-pay-button-style: black;
}

/* ── utilities ───────────────────────────────────────────────────────────── */

.pointer-events-none {
  pointer-events: none;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0;
}
.inset-y-0 {
  inset-block: 0;
}
.start {
  inset-inline-start: 0.25rem;
}
.end {
  inset-inline-end: 0.25rem;
}
.-top-3 {
  top: -0.75rem;
}
.-top-12 {
  top: -3rem;
}
.-top-px {
  top: -1px;
}
.top-1\/2 {
  top: 50%;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}
.mx-auto {
  margin-inline: auto;
}
.my-2 {
  margin-block: 0.5rem;
}
.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;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.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-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-10 {
  height: 2.5rem;
}
.h-14 {
  height: 3.5rem;
}
.h-32 {
  height: 8rem;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-72 {
  max-height: 18rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.3333%;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-32 {
  width: 8rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.min-w-0 {
  min-width: 0;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[250px\] {
  min-width: 250px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  translate: -50%;
}
.translate-x-1 {
  translate: 0.25rem;
}
.translate-x-6 {
  translate: 1.5rem;
}
.-translate-y-1\/2 {
  translate: 0 -50%;
}
.rotate-180 {
  rotate: 180deg;
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.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));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.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-\[2px\] {
  gap: 2px;
}
.space-y-1 {
  :where(& > :not(:last-child)) {
    margin-block-end: 0.25rem;
  }
}
.space-y-1\.5 {
  :where(& > :not(:last-child)) {
    margin-block-end: 0.375rem;
  }
}
.space-y-2 {
  :where(& > :not(:last-child)) {
    margin-block-end: 0.5rem;
  }
}
.space-y-3 {
  :where(& > :not(:last-child)) {
    margin-block-end: 0.75rem;
  }
}
.space-y-4 {
  :where(& > :not(:last-child)) {
    margin-block-end: 1rem;
  }
}
.space-y-5 {
  :where(& > :not(:last-child)) {
    margin-block-end: 1.25rem;
  }
}
.space-y-6 {
  :where(& > :not(:last-child)) {
    margin-block-end: 1.5rem;
  }
}
.divide-x {
  :where(& > :not(:last-child)) {
    border-inline-style: solid;
    border-inline-end-width: 1px;
  }
}
.divide-y {
  :where(& > :not(:last-child)) {
    border-top-style: solid;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
}
.divide-border {
  :where(& > :not(:last-child)) {
    border-color: var(--color-border);
  }
}
.divide-ink\/\[0\.04\] {
  :where(& > :not(:last-child)) {
    border-color: color-mix(in oklab, var(--color-text) 4%, transparent);
  }
}
.divide-ink\/\[0\.05\] {
  :where(& > :not(:last-child)) {
    border-color: color-mix(in oklab, var(--color-text) 5%, transparent);
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.25rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-style: solid;
  border-width: 1px;
}
.border-2 {
  border-style: solid;
  border-width: 2px;
}
.border-t {
  border-top-style: solid;
  border-top-width: 1px;
}
.border-r {
  border-right-style: solid;
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-500\/25 {
  border-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 25%, transparent);
}
.border-border {
  border-color: var(--color-border);
}
.border-brand {
  border-color: var(--color-brand);
}
.border-emerald-500\/20 {
  border-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 20%, transparent);
}
.border-emerald-500\/25 {
  border-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 25%, transparent);
}
.border-emerald-500\/30 {
  border-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 30%, transparent);
}
.border-red-500\/20 {
  border-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 20%, transparent);
}
.border-rose-500\/30 {
  border-color: color-mix(in oklab, oklch(64.5% 0.246 16.439) 30%, transparent);
}
.border-sky-500\/20 {
  border-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 20%, transparent);
}
.border-sky-500\/25 {
  border-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 25%, transparent);
}
.border-success\/20 {
  border-color: color-mix(in oklab, var(--color-success) 20%, transparent);
}
.border-text-dim {
  border-color: var(--color-text-dim);
}
.border-warning\/30 {
  border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
}
.border-ink\/10 {
  border-color: color-mix(in oklab, var(--color-text) 10%, transparent);
}
.border-ink\/\[0\.1\] {
  border-color: color-mix(in oklab, var(--color-text) 10%, transparent);
}
.border-ink\/\[0\.2\] {
  border-color: color-mix(in oklab, var(--color-text) 20%, transparent);
}
.border-ink\/\[0\.04\] {
  border-color: color-mix(in oklab, var(--color-text) 4%, transparent);
}
.border-ink\/\[0\.06\] {
  border-color: color-mix(in oklab, var(--color-text) 6%, transparent);
}
.border-ink\/\[0\.07\] {
  border-color: color-mix(in oklab, var(--color-text) 7.000000000000001%, transparent);
}
.border-ink\/\[0\.08\] {
  border-color: color-mix(in oklab, var(--color-text) 8%, transparent);
}
.border-ink\/\[0\.12\] {
  border-color: color-mix(in oklab, var(--color-text) 12%, transparent);
}
.border-ink\/\[0\.25\] {
  border-color: color-mix(in oklab, var(--color-text) 25%, transparent);
}
.border-t-brand {
  border-top-color: var(--color-brand);
}
.border-t-ink\/50 {
  border-top-color: color-mix(in oklab, var(--color-text) 50%, transparent);
}
.border-t-ink\/60 {
  border-top-color: color-mix(in oklab, var(--color-text) 60%, transparent);
}
.bg-\[\#0d0d10\] {
  background-color: #0d0d10;
}
.bg-\[\#09090b\] {
  background-color: #09090b;
}
.bg-\[\#141419\] {
  background-color: #141419;
}
.bg-amber-500 {
  background-color: oklch(76.9% 0.188 70.08);
}
.bg-amber-500\/10 {
  background-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 10%, transparent);
}
.bg-amber-500\/15 {
  background-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 15%, transparent);
}
.bg-amber-500\/20 {
  background-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 20%, transparent);
}
.bg-amber-500\/\[0\.06\] {
  background-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 6%, transparent);
}
.bg-bg {
  background-color: var(--color-bg);
}
.bg-bg-card {
  background-color: var(--color-bg-card);
}
.bg-bg-elevated {
  background-color: var(--color-bg-elevated);
}
.bg-bg-input {
  background-color: var(--color-bg-input);
}
.bg-black\/30 {
  background-color: color-mix(in oklab, #000 30%, transparent);
}
.bg-black\/60 {
  background-color: color-mix(in oklab, #000 60%, transparent);
}
.bg-blue-500 {
  background-color: oklch(62.3% 0.214 259.815);
}
.bg-border-strong {
  background-color: var(--color-border-strong);
}
.bg-brand {
  background-color: var(--color-brand);
}
.bg-brand-foreground {
  background-color: var(--color-brand-foreground);
}
.bg-brand-muted {
  background-color: var(--color-brand-muted);
}
.bg-brand\/10 {
  background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
}
.bg-brand\/20 {
  background-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
}
.bg-danger {
  background-color: var(--color-danger);
}
.bg-emerald-500 {
  background-color: oklch(69.6% 0.17 162.48);
}
.bg-emerald-500\/5 {
  background-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 5%, transparent);
}
.bg-emerald-500\/10 {
  background-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 10%, transparent);
}
.bg-emerald-500\/15 {
  background-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 15%, transparent);
}
.bg-emerald-500\/\[0\.06\] {
  background-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 6%, transparent);
}
.bg-gray-500 {
  background-color: oklch(55.1% 0.027 264.364);
}
.bg-indigo-500 {
  background-color: oklch(58.5% 0.233 277.117);
}
.bg-red-500\/10 {
  background-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 10%, transparent);
}
.bg-red-500\/15 {
  background-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 15%, transparent);
}
.bg-red-500\/\[0\.06\] {
  background-color: color-mix(in oklab, oklch(63.7% 0.237 25.331) 6%, transparent);
}
.bg-rose-500\/5 {
  background-color: color-mix(in oklab, oklch(64.5% 0.246 16.439) 5%, transparent);
}
.bg-rose-500\/10 {
  background-color: color-mix(in oklab, oklch(64.5% 0.246 16.439) 10%, transparent);
}
.bg-rose-600 {
  background-color: oklch(58.6% 0.253 17.585);
}
.bg-sky-500 {
  background-color: oklch(68.5% 0.169 237.323);
}
.bg-sky-500\/10 {
  background-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 10%, transparent);
}
.bg-sky-500\/15 {
  background-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 15%, transparent);
}
.bg-sky-500\/20 {
  background-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 20%, transparent);
}
.bg-sky-500\/\[0\.05\] {
  background-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 5%, transparent);
}
.bg-success {
  background-color: var(--color-success);
}
.bg-success\/5 {
  background-color: color-mix(in oklab, var(--color-success) 5%, transparent);
}
.bg-teal-500 {
  background-color: oklch(70.4% 0.14 182.503);
}
.bg-text {
  background-color: var(--color-text);
}
.bg-text-dim\/10 {
  background-color: color-mix(in oklab, var(--color-text-dim) 10%, transparent);
}
.bg-text-dim\/20 {
  background-color: color-mix(in oklab, var(--color-text-dim) 20%, transparent);
}
.bg-violet-500 {
  background-color: oklch(60.6% 0.25 292.717);
}
.bg-warning {
  background-color: var(--color-warning);
}
.bg-warning\/5 {
  background-color: color-mix(in oklab, var(--color-warning) 5%, transparent);
}
.bg-warning\/10 {
  background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
}
.bg-warning\/15 {
  background-color: color-mix(in oklab, var(--color-warning) 15%, transparent);
}
.bg-ink\/10 {
  background-color: color-mix(in oklab, var(--color-text) 10%, transparent);
}
.bg-ink\/\[0\.02\] {
  background-color: color-mix(in oklab, var(--color-text) 2%, transparent);
}
.bg-ink\/\[0\.03\] {
  background-color: color-mix(in oklab, var(--color-text) 3%, transparent);
}
.bg-ink\/\[0\.04\] {
  background-color: color-mix(in oklab, var(--color-text) 4%, transparent);
}
.bg-ink\/\[0\.05\] {
  background-color: color-mix(in oklab, var(--color-text) 5%, transparent);
}
.bg-ink\/\[0\.06\] {
  background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
}
.bg-ink\/\[0\.07\] {
  background-color: color-mix(in oklab, var(--color-text) 7.000000000000001%, transparent);
}
.bg-ink\/\[0\.08\] {
  background-color: color-mix(in oklab, var(--color-text) 8%, transparent);
}
.bg-ink\/\[0\.12\] {
  background-color: color-mix(in oklab, var(--color-text) 12%, transparent);
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.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-8 {
  padding: 2rem;
}
.px-2 {
  padding-inline: 0.5rem;
}
.px-3 {
  padding-inline: 0.75rem;
}
.px-3\.5 {
  padding-inline: 0.875rem;
}
.px-4 {
  padding-inline: 1rem;
}
.px-5 {
  padding-inline: 1.25rem;
}
.px-6 {
  padding-inline: 1.5rem;
}
.px-8 {
  padding-inline: 2rem;
}
.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-8 {
  padding-block: 2rem;
}
.py-10 {
  padding-block: 2.5rem;
}
.py-16 {
  padding-block: 4rem;
}
.py-20 {
  padding-block: 5rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 1.333333;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 1.2;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 1.111111;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.555556;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.428571;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.4;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1.333333;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[22px\] {
  font-size: 22px;
}
.leading-relaxed {
  line-height: 1.625;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.break-all {
  word-break: break-all;
}
.text-amber-300 {
  color: oklch(87.9% 0.169 91.605);
}
.text-amber-400 {
  color: oklch(82.8% 0.189 84.429);
}
.text-amber-500 {
  color: oklch(76.9% 0.188 70.08);
}
.text-bg {
  color: var(--color-bg);
}
.text-black {
  color: #000;
}
.text-brand {
  color: var(--color-brand);
}
.text-brand-foreground {
  color: var(--color-brand-foreground);
}
.text-danger {
  color: var(--color-danger);
}
.text-emerald-400 {
  color: oklch(76.5% 0.177 163.223);
}
.text-emerald-500 {
  color: oklch(69.6% 0.17 162.48);
}
.text-red-400 {
  color: oklch(70.4% 0.191 22.216);
}
.text-rose-400 {
  color: oklch(71.2% 0.194 13.428);
}
.text-rose-500 {
  color: oklch(64.5% 0.246 16.439);
}
.text-sky-300 {
  color: oklch(82.8% 0.111 230.318);
}
.text-sky-400 {
  color: oklch(74.6% 0.16 232.661);
}
.text-sky-500 {
  color: oklch(68.5% 0.169 237.323);
}
.text-success {
  color: var(--color-success);
}
.text-text {
  color: var(--color-text);
}
.text-text-dim {
  color: var(--color-text-dim);
}
.text-text-muted {
  color: var(--color-text-muted);
}
.text-text-secondary {
  color: var(--color-text-secondary);
}
.text-violet-400 {
  color: oklch(70.2% 0.183 293.541);
}
.text-violet-500 {
  color: oklch(60.6% 0.25 292.717);
}
.text-warning {
  color: var(--color-warning);
}
.text-white {
  color: #fff;
}
.text-ink\/20 {
  color: color-mix(in oklab, var(--color-text) 20%, transparent);
}
.text-ink\/25 {
  color: color-mix(in oklab, var(--color-text) 25%, transparent);
}
.text-ink\/30 {
  color: color-mix(in oklab, var(--color-text) 30%, transparent);
}
.text-ink\/35 {
  color: color-mix(in oklab, var(--color-text) 35%, transparent);
}
.text-ink\/40 {
  color: color-mix(in oklab, var(--color-text) 40%, transparent);
}
.text-ink\/50 {
  color: color-mix(in oklab, var(--color-text) 50%, transparent);
}
.text-ink\/60 {
  color: color-mix(in oklab, var(--color-text) 60%, transparent);
}
.text-ink\/70 {
  color: color-mix(in oklab, var(--color-text) 70%, transparent);
}
.text-ink\/80 {
  color: color-mix(in oklab, var(--color-text) 80%, transparent);
}
.uppercase {
  text-transform: uppercase;
}
.underline {
  text-decoration-line: underline;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-50 {
  opacity: 50%;
}
.opacity-60 {
  opacity: 60%;
}
.shadow-\[0_0_20px_rgba\(52\,211\,153\,0\.15\)\] {
  box-shadow: 0 0 20px var(--shadow-color, rgba(52,211,153,0.15));
}
.shadow-\[0_0_20px_rgba\(56\,189\,248\,0\.15\)\] {
  box-shadow: 0 0 20px var(--shadow-color, rgba(56,189,248,0.15));
}
.shadow-\[0_0_20px_rgba\(167\,139\,250\,0\.15\)\] {
  box-shadow: 0 0 20px var(--shadow-color, rgba(167,139,250,0.15));
}
.shadow-\[0_0_20px_rgba\(251\,191\,36\,0\.15\)\] {
  box-shadow: 0 0 20px var(--shadow-color, rgba(251,191,36,0.15));
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px var(--shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--shadow-color, rgb(0 0 0 / 0.1));
}
.ring-1 {
  box-shadow: 0 0 0 1px var(--ring-color, currentcolor);
}
.shadow-brand\/20 {
  --shadow-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
}
.ring-amber-500\/20 {
  --ring-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 20%, transparent);
}
.ring-emerald-500\/20 {
  --ring-color: color-mix(in oklab, oklch(69.6% 0.17 162.48) 20%, transparent);
}
.ring-rose-500\/20 {
  --ring-color: color-mix(in oklab, oklch(64.5% 0.246 16.439) 20%, transparent);
}
.ring-sky-500\/20 {
  --ring-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 20%, transparent);
}
.ring-text-dim\/20 {
  --ring-color: color-mix(in oklab, var(--color-text-dim) 20%, transparent);
}
.outline {
  outline-style: solid;
  outline-width: 1px;
}
.blur {
  filter: blur(8px);
}
.blur-2xl {
  filter: blur(40px);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --shadow-color, --ring-color, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --shadow-color, --ring-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.outline-none {
  outline-style: none;
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.group-hover\:text-text-muted {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: var(--color-text-muted);
    }
  }
}
.group-hover\:text-ink\/40 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 40%, transparent);
    }
  }
}
.group-hover\:text-ink\/50 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 50%, transparent);
    }
  }
}
.group-hover\:text-ink\/60 {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 60%, transparent);
    }
  }
}
.placeholder\:text-text-dim {
  &::placeholder {
    color: var(--color-text-dim);
  }
}
.last\:border-0 {
  &:last-child {
    border-style: solid;
    border-width: 0px;
  }
}
.hover\:border-border-strong {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-border-strong);
    }
  }
}
.hover\:border-brand\/40 {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
    }
  }
}
.hover\:border-ink\/\[0\.2\] {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in oklab, var(--color-text) 20%, transparent);
    }
  }
}
.hover\:border-ink\/\[0\.12\] {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in oklab, var(--color-text) 12%, transparent);
    }
  }
}
.hover\:border-ink\/\[0\.14\] {
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in oklab, var(--color-text) 14.000000000000002%, transparent);
    }
  }
}
.hover\:bg-\[\#16161c\] {
  &:hover {
    @media (hover: hover) {
      background-color: #16161c;
    }
  }
}
.hover\:bg-amber-400 {
  &:hover {
    @media (hover: hover) {
      background-color: oklch(82.8% 0.189 84.429);
    }
  }
}
.hover\:bg-bg-card {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-bg-card);
    }
  }
}
.hover\:bg-bg-elevated {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-bg-elevated);
    }
  }
}
.hover\:bg-brand-hover {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-brand-hover);
    }
  }
}
.hover\:bg-emerald-400 {
  &:hover {
    @media (hover: hover) {
      background-color: oklch(76.5% 0.177 163.223);
    }
  }
}
.hover\:bg-rose-500 {
  &:hover {
    @media (hover: hover) {
      background-color: oklch(64.5% 0.246 16.439);
    }
  }
}
.hover\:bg-rose-500\/10 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, oklch(64.5% 0.246 16.439) 10%, transparent);
    }
  }
}
.hover\:bg-sky-400 {
  &:hover {
    @media (hover: hover) {
      background-color: oklch(74.6% 0.16 232.661);
    }
  }
}
.hover\:bg-sky-500\/30 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, oklch(68.5% 0.169 237.323) 30%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.02\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 2%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.03\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 3%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.04\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 4%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.05\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 5%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.06\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.12\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 12%, transparent);
    }
  }
}
.hover\:bg-ink\/\[0\.14\] {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, var(--color-text) 14.000000000000002%, transparent);
    }
  }
}
.hover\:text-rose-500 {
  &:hover {
    @media (hover: hover) {
      color: oklch(64.5% 0.246 16.439);
    }
  }
}
.hover\:text-sky-300 {
  &:hover {
    @media (hover: hover) {
      color: oklch(82.8% 0.111 230.318);
    }
  }
}
.hover\:text-text {
  &:hover {
    @media (hover: hover) {
      color: var(--color-text);
    }
  }
}
.hover\:text-text-secondary {
  &:hover {
    @media (hover: hover) {
      color: var(--color-text-secondary);
    }
  }
}
.hover\:text-text {
  &:hover {
    @media (hover: hover) {
      color: var(--color-text);
    }
  }
}
.hover\:text-ink\/60 {
  &:hover {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 60%, transparent);
    }
  }
}
.hover\:text-ink\/70 {
  &:hover {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 70%, transparent);
    }
  }
}
.hover\:opacity-80 {
  &:hover {
    @media (hover: hover) {
      opacity: 80%;
    }
  }
}
.hover\:brightness-110 {
  &:hover {
    @media (hover: hover) {
      filter: brightness(110%);
    }
  }
}
.focus\:border-brand {
  &:focus {
    border-color: var(--color-brand);
  }
}
.focus\:border-rose-500 {
  &:focus {
    border-color: oklch(64.5% 0.246 16.439);
  }
}
.focus\:border-warning {
  &:focus {
    border-color: var(--color-warning);
  }
}
.focus\:ring-1 {
  &:focus {
    box-shadow: 0 0 0 1px var(--ring-color, currentcolor);
  }
}
.focus\:ring-brand {
  &:focus {
    --ring-color: var(--color-brand);
  }
}
.focus\:ring-warning {
  &:focus {
    --ring-color: var(--color-warning);
  }
}
.active\:scale-\[0\.96\] {
  &:active {
    scale: 0.96;
  }
}
.active\:scale-\[0\.97\] {
  &:active {
    scale: 0.97;
  }
}
.active\:scale-\[0\.98\] {
  &:active {
    scale: 0.98;
  }
}
.active\:scale-\[0\.99\] {
  &:active {
    scale: 0.99;
  }
}
.disabled\:cursor-not-allowed {
  &:disabled {
    cursor: not-allowed;
  }
}
.disabled\:bg-ink\/\[0\.06\] {
  &:disabled {
    background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
  }
}
.disabled\:text-ink\/30 {
  &:disabled {
    color: color-mix(in oklab, var(--color-text) 30%, transparent);
  }
}
.disabled\:opacity-30 {
  &:disabled {
    opacity: 30%;
  }
}
.disabled\:opacity-40 {
  &:disabled {
    opacity: 40%;
  }
}
.disabled\:opacity-60 {
  &:disabled {
    opacity: 60%;
  }
}
.sm\:grid-cols-3 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sm\:grid-cols-6 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.md\:col-span-2 {
  @media (width >= 48rem) {
    grid-column: span 2 / span 2;
  }
}
.md\:col-span-3 {
  @media (width >= 48rem) {
    grid-column: span 3 / span 3;
  }
}
.md\:block {
  @media (width >= 48rem) {
    display: block;
  }
}
.md\:hidden {
  @media (width >= 48rem) {
    display: none;
  }
}
.md\:grid-cols-2 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.md\:grid-cols-3 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.md\:grid-cols-4 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lg\:grid-cols-6 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.xl\:col-span-2 {
  @media (width >= 80rem) {
    grid-column: span 2 / span 2;
  }
}
.xl\:col-span-3 {
  @media (width >= 80rem) {
    grid-column: span 3 / span 3;
  }
}
.xl\:grid-cols-3 {
  @media (width >= 80rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.xl\:grid-cols-4 {
  @media (width >= 80rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.xl\:grid-cols-5 {
  @media (width >= 80rem) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── @hanzogui/shell chrome ──────────────────────────────────────────────── */
/* TenantHeader and its dropdowns ship bare class strings and no stylesheet,
   so these rules are the header's half of the vocabulary. They were absent
   from every build before this one: Tailwind's scanner skips node_modules,
   which is why the app chrome only ever picked up the classes it happened to
   share with this app's own markup. */

.top-0 {
  top: 0;
}
.top-10 {
  top: 2.5rem;
}
.z-\[9999\] {
  z-index: 9999;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.w-72 {
  width: 18rem;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.bg-black {
  background-color: #000;
}
.bg-black\/90 {
  background-color: color-mix(in oklab, #000 90%, transparent);
}
.object-cover {
  object-fit: cover;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.text-ink\/\[0\.15\] {
  color: color-mix(in oklab, var(--color-text) 15%, transparent);
}
.capitalize {
  text-transform: capitalize;
}
.shadow {
  box-shadow: 0 1px 3px 0 var(--shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--shadow-color, rgb(0 0 0 / 0.1));
}
.shadow-2xl {
  box-shadow: 0 25px 50px -12px var(--shadow-color, rgb(0 0 0 / 0.25));
}
.shadow-black\/60 {
  --shadow-color: color-mix(in oklab, #000 60%, transparent);
}
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.hover\:text-red-400\/70 {
  &:hover {
    @media (hover: hover) {
      color: color-mix(in oklab, oklch(70.4% 0.191 22.216) 70%, transparent);
    }
  }
}
.hover\:text-ink\/80 {
  &:hover {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 80%, transparent);
    }
  }
}
.hover\:text-ink\/90 {
  &:hover {
    @media (hover: hover) {
      color: color-mix(in oklab, var(--color-text) 90%, transparent);
    }
  }
}
.focus-visible\:ring-2 {
  &:focus-visible {
    box-shadow: 0 0 0 2px var(--ring-color, currentcolor);
  }
}
.focus-visible\:ring-ink\/20 {
  &:focus-visible {
    --ring-color: color-mix(in oklab, var(--color-text) 20%, transparent);
  }
}
.focus-visible\:outline-none {
  &:focus-visible {
    outline-style: none;
  }
}
.sm\:block {
  @media (width >= 40rem) {
    display: block;
  }
}
.sm\:flex {
  @media (width >= 40rem) {
    display: flex;
  }
}

/* The rail is desktop chrome. 240px of navigation on a 390px phone is most of
   the screen, and every link it carries is already in the footer — so below
   `md` the page is the page and nothing else. */
.hz-rail { display: flex; }
@media (max-width: 767px) {
  .hz-rail { display: none; }
}