@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700;900&family=Cinzel+Decorative:wght@700;900&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&family=Space+Mono:wght@400;700&family=Caveat:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Special+Elite&display=swap');/* ============================================================
   KABAL SANCTUM — Game console hub (Shop / Open / Inventory / Achievements)
   Scoped under .ksanctum so styles do not leak to other pages.
   Adapted from dropbox/styles.css prototype shipped by the coordinator.
   ============================================================ */

/* Tokens (inlined — was @import jk-tokens.css in prototype) */

.ksanctum {
  --jk-gold:    #F5A623;
  --jk-gold-2:  #FFD037;
  --jk-gold-3:  #C88415;
  --jk-fg-1: #fff;
  --jk-fg-3: #cccccc;
  --jk-fg-muted: #888;
  --jk-fg-dim: #555;
  --jk-bg-1: #0A0A0A;
  --jk-bg-2: #0D0D0D;
  --jk-font-sans: 'Inter', system-ui, sans-serif;
  --jk-font-serif: 'Cinzel', serif;
  --jk-font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --jk-font-mono: 'Space Mono', monospace;

  position: fixed; inset: 0;
  background: #000;
  color: #fff;
  font-family: var(--jk-font-sans);
  overflow: hidden;
  z-index: 1;
}

.ksanctum *,
.ksanctum *::before,
.ksanctum *::after { box-sizing: border-box; }

.ksanctum button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }

.ksanctum button:focus-visible { outline: 1px solid var(--jk-gold); outline-offset: 2px; }

.ksanctum ::-webkit-scrollbar { width: 4px; height: 4px; }

.ksanctum ::-webkit-scrollbar-track { background: transparent; }

.ksanctum ::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.3); border-radius: 2px; }

@keyframes sanctumTarotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); }
  50%      { box-shadow: 0 0 0 6px rgba(250,204,21,0.18); }
}

/* Screen-to-screen transition (Shop ↔ Open ↔ Inventory ↔ Achievements) */

@keyframes sanctumScreenIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* KR balance flash on credit/debit change */

@keyframes sanctumKrFlash {
  0%   { transform: scale(1);    background: rgba(8,8,8,0.7); }
  35%  { transform: scale(1.06); background: rgba(250,204,21,0.35); }
  100% { transform: scale(1);    background: rgba(8,8,8,0.7); }
}

@keyframes sanctumDockPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes sanctumChipFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.04); }
}

@keyframes sanctumWelcomePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245,166,35,0.3); transform: scale(1); }
  50%      { box-shadow: 0 0 40px rgba(245,166,35,0.7), 0 0 60px rgba(245,166,35,0.3); transform: scale(1.03); }
}

/* Pack tile lift — used inline on tiles for polished hover */

.ksanctum .pack-tile {
  cursor: pointer;
}

.ksanctum .pack-tile:hover {
  transform: translateY(-12px);
}

.ksanctum .pack-tile:active {
  transform: translateY(-6px) scale(0.98);
  transition: all 80ms ease;
}

/* Smooth fade-in on first Sanctum mount — applied to .app-shell */

@keyframes sanctumMountFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ksanctum .app-shell {
  animation: sanctumMountFade 0.5s ease both;
}

/* HUD pills hover — subtle inner glow */

.ksanctum .hud-pill {
  transition: all 200ms ease;
}

.ksanctum .hud-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245,166,35,0.18);
}

/* Avatar hover lift */

.ksanctum .hud-avatar:hover {
  transform: scale(1.06);
}

/* Inv-cell hover scale-in for owned cells */

.ksanctum .inv-cell:not(.locked):hover {
  transform: translateY(-2px) scale(1.04);
  z-index: 2;
}

/* Smooth dock pill press */

.ksanctum .dock-btn {
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ksanctum .dock-btn:not(.active):hover {
  transform: translateY(-2px);
}

.ksanctum .dock-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Modal cards — subtle entrance lift on every modal */

.ksanctum .modal-card,
.modal-back .modal-card {
  animation: sanctumModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sanctumModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scrollbar polish — gold-tinted in modal scrolls */

.ksanctum .modal-card *::-webkit-scrollbar { width: 6px; height: 6px; }

.ksanctum .modal-card *::-webkit-scrollbar-track { background: transparent; }

.ksanctum .modal-card *::-webkit-scrollbar-thumb {
  background: rgba(245,166,35,0.35); border-radius: 99px;
}

.ksanctum .modal-card *::-webkit-scrollbar-thumb:hover {
  background: rgba(245,166,35,0.55);
}

/* Buttons — generic hover for all .btn-prim and .btn-ghost in Sanctum */

.ksanctum .btn-prim, .ksanctum .btn-ghost {
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ksanctum .btn-prim:not(:disabled):hover,
.ksanctum .btn-ghost:not(:disabled):hover {
  transform: translateY(-1px);
}

.ksanctum .btn-prim:not(:disabled):active,
.ksanctum .btn-ghost:not(:disabled):active {
  transform: translateY(0) scale(0.97);
}

/* Reduce motion preference — kill animations for users who prefer no motion */

@media (prefers-reduced-motion: reduce) {
  .ksanctum *, .ksanctum *::before, .ksanctum *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── App shell ─────────────────────────────────────────── */

.app-shell {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* ── Top HUD (currencies + profile) ─────────────────────── */

.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 22px 32px;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent);
  pointer-events: none;
}

.hud-top > * { pointer-events: auto; }

.hud-logo {
  display: flex; align-items: center; gap: 12px;
}

.hud-logo img {
  width: 38px; height: 38px;
  filter: drop-shadow(0 0 14px rgba(245,166,35,0.5));
}

.hud-logo .name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.hud-logo img {
  width: 30px !important; height: 30px !important;
}

.hud-stats {
  display: flex; gap: 14px; align-items: center;
}

.hud-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(8,8,8,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 999px;
  font-family: var(--jk-font-serif);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 13px;
  text-transform: uppercase;
  transition: border-color 200ms;
}

.hud-pill:hover { border-color: rgba(245,166,35,0.6); }

.hud-pill .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 11px;
  color: #0A0A0A;
}

.hud-pill.ka .ico {
  background: linear-gradient(135deg, #FFE066, #F5A623);
  box-shadow: 0 0 14px rgba(245,166,35,0.6);
}

.hud-pill.kr .ico {
  background: linear-gradient(135deg, #F6ECD2, #C88415);
}

.hud-pill .num { color: #fff; }

.hud-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6B461A, #20160C);
  border: 1.5px solid rgba(245,166,35,0.5);
  display: grid; place-items: center;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--jk-gold);
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 200ms;
}

.hud-avatar:hover { border-color: var(--jk-gold); box-shadow: 0 0 20px rgba(245,166,35,0.4); }

/* ── Bottom dock menu ───────────────────────────────────── */

.dock {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; gap: 6px;
  padding: 10px;
  background: rgba(5,5,5,0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7),
              inset 0 1px 0 rgba(245,166,35,0.1);
}

.dock-btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-btn:hover { color: rgba(255,255,255,0.85); }

.dock-btn .glyph { font-size: 18px; line-height: 1; }

.dock-btn.active {
  color: #0A0A0A;
  background: linear-gradient(135deg, #FFE066, #F5A623);
  box-shadow: 0 0 30px rgba(245,166,35,0.5),
              inset 0 1px 0 rgba(255,255,255,0.4);
}

.dock-btn .badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #EF4444;
  color: #fff;
  font-size: 9px; font-weight: 900;
  display: grid; place-items: center;
  letter-spacing: 0;
  box-shadow: 0 0 10px rgba(239,68,68,0.6);
}

/* ── Screen container with full-bleed background ──────── */

.screen {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.screen-bg {
  position: absolute; inset: 0;
  z-index: 0;
}

.screen-bg img {
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  -o-object-position: center 90%;
     object-position: center 90%;
  opacity: 0.55;
}

.screen-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(5,5,5,0.96) 22%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.5) 60%, rgba(0,0,0,0.92) 90%, #000 100%),
    radial-gradient(ellipse 80% 50% at 50% 50%, transparent, rgba(0,0,0,0.5) 100%);
}

.screen-bg.bg-flat img { display: none; }

.screen-bg.bg-open img {
  -o-object-position: center 130%;
     object-position: center 130%;
  opacity: 0.5;
}

.screen-bg.bg-flat::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60,40,18,0.35), transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(245,166,35,0.10), transparent 60%),
    #0a0805;
}

/* Subtle ember particles */

.embers {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ember {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--jk-gold);
  box-shadow: 0 0 6px var(--jk-gold);
  animation: emberRise var(--dur, 8s) linear infinite;
  animation-delay: var(--del, 0s);
  opacity: 0;
}

@keyframes emberRise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translate(var(--x, 30px), -100vh) scale(0.2); opacity: 0; }
}

.screen-content {
  position: relative;
  z-index: 5;
  width: 100%; height: 100%;
  padding: 96px 32px 130px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  gap: 10px;
}

/* Ensure all immediate children of screen-content respect flex-shrink */

.screen-content > * { flex-shrink: 0; }

/* Page title is compact at the top */

.screen-content > .page-title { margin: 0 0 4px; }

.page-eyebrow { margin-bottom: 6px; }

.page-headline { font-size: clamp(28px, 3.6vw, 44px); padding: 0 12px; }

/* ── Page title block ─────────────────────────────────── */

.page-title {
  text-align: center;
  margin: 12px 0 24px;
  flex-shrink: 0;
}

.page-eyebrow {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--jk-gold);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  line-height: 1;
}

.page-eyebrow::before, .page-eyebrow::after {
  content: ""; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jk-gold));
}

.page-eyebrow::after {
  background: linear-gradient(-90deg, transparent, var(--jk-gold));
}

.page-headline {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  background: linear-gradient(135deg, #FFE066 0%, #FDBB2A 35%, #F5A623 65%, #C88415 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
  padding: 0 12px;
}

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

:root {
  --rar-common-1: #8a8a8a; --rar-common-2: #cccccc;
  --rar-rare-1: #2E81A0; --rar-rare-2: #7AC0DA;
  --rar-epic-1: #8C4FEB; --rar-epic-2: #C9A4FF;
  --rar-legend-1: #F5A623; --rar-legend-2: #FFD037;
  --rar-myth-1: #FF4500; --rar-myth-2: #FFA060;
}

.rar-common  { --rar1: var(--rar-common-1); --rar2: var(--rar-common-2); }

.rar-rare    { --rar1: var(--rar-rare-1);   --rar2: var(--rar-rare-2); }

.rar-epic    { --rar1: var(--rar-epic-1);   --rar2: var(--rar-epic-2); }

.rar-legend  { --rar1: var(--rar-legend-1); --rar2: var(--rar-legend-2); }

.rar-myth    { --rar1: var(--rar-myth-1);   --rar2: var(--rar-myth-2); }

/* ── SHOP — pack tiles row ────────────────────────────── */

.shop-row {
  display: flex;
  gap: clamp(10px, 2vw, 24px);
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 8px 0;
  min-height: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

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

.tabs { margin: 0 auto 8px; }

.pack-tile .pack-img { max-height: min(28vh, 220px); -o-object-fit: contain; object-fit: contain; flex: 0 1 auto; min-height: 100px; }

.pack-tile {
  position: relative;
  width: clamp(150px, 18vw, 210px);
  flex-shrink: 1;
  flex-grow: 0;
  cursor: pointer;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.pack-tile:hover {
  transform: translateY(-12px);
}

.pack-tile .pack-img {
  width: 100%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.7));
  transition: filter 380ms;
}

.pack-tile:hover .pack-img {
  filter: drop-shadow(0 40px 70px var(--rar1)) drop-shadow(0 0 30px var(--rar2));
}

.pack-tile .pack-aura {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--rar1), transparent 65%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 380ms;
  z-index: -1;
}

.pack-tile:hover .pack-aura { opacity: 0.9; }

.pack-meta {
  margin-top: 12px;
  text-align: center;
  flex-shrink: 0;
  flex-grow: 0;
  min-height: 130px;
}

.pack-rar-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rar2);
  padding: 3px 10px;
  border: 1px solid var(--rar1);
  border-radius: 999px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.5);
}

.pack-name {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.pack-sub {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pack-buy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(255,224,102,0.15), rgba(245,166,35,0.10));
  border: 1px solid var(--rar1);
  border-radius: 999px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 240ms;
}

.pack-tile:hover .pack-buy {
  background: linear-gradient(135deg, var(--rar2), var(--rar1));
  color: #0A0A0A;
  box-shadow: 0 0 24px var(--rar1);
}

/* ── Sub-tabs (free/paid) ─────────────────────────────── */

.tabs {
  display: inline-flex;
  background: rgba(8,8,8,0.7);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 0 auto 24px;
}

.tabs button {
  padding: 10px 24px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  border-radius: 999px;
  transition: all 240ms;
  display: flex; align-items: center; gap: 8px;
}

.tabs button.active {
  background: linear-gradient(135deg, rgba(255,208,55,0.15), rgba(245,166,35,0.20));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(245,166,35,0.4);
}

.tabs-wrap {
  display: flex; justify-content: center;
}

/* ── PACK OPENING — full screen booster ───────────────── */

.opening-stage {
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
}

.opening-pack {
  position: relative;
  height: min(58vh, 600px);
  cursor: pointer;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.opening-pack img {
  height: 100%;
  filter: drop-shadow(0 40px 80px rgba(245,166,35,0.5));
  animation: floatPack 5s ease-in-out infinite;
}

@keyframes floatPack {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

.opening-pack:hover img {
  filter: drop-shadow(0 40px 80px rgba(245,166,35,0.9))
          drop-shadow(0 0 30px rgba(255,224,102,0.6));
}

.runic-circle {
  position: absolute;
  width: 90vh; height: 90vh;
  max-width: 900px; max-height: 900px;
  border: 1px solid rgba(245,166,35,0.15);
  border-radius: 50%;
  pointer-events: none;
}

.runic-circle.r2 { width: 60vh; height: 60vh; max-width: 600px; max-height: 600px; border-color: rgba(245,166,35,0.25); border-style: dashed; }

.runic-circle.r3 { width: 40vh; height: 40vh; max-width: 400px; max-height: 400px; border-color: rgba(245,166,35,0.4); }

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

.runic-circle.spin-cw { animation: spinSlow 60s linear infinite; }

.runic-circle.spin-ccw { animation: spinSlow 80s linear infinite reverse; }

.tap-hint {
  position: absolute;
  top: 8%;
  bottom: auto;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 6px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(245,166,35,0.7);
  animation: pulseFade 2.4s ease-in-out infinite;
}

@keyframes pulseFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Pack rip animation */

@keyframes packBurst {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  30% { transform: scale(1.15); filter: brightness(1.6); }
  60% { transform: scale(1.5); filter: brightness(3) blur(4px); opacity: 0.7; }
  100% { transform: scale(2.4); filter: brightness(5) blur(20px); opacity: 0; }
}

.bursting img { animation: packBurst 1.4s cubic-bezier(0.4, 0, 0.6, 1) forwards !important; }

/* Reveal cards spread */

.reveal-spread {
  display: flex; gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.kard {
  width: 180px; height: 270px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--rar1), rgba(0,0,0,0.95));
  border: 2px solid var(--rar2);
  padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 0 50px var(--rar1), inset 0 0 30px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.kard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}

@keyframes kardIn {
  0% { transform: rotateY(180deg) scale(0.4); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.kard.appearing { animation: kardIn 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.kard-rar {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--rar2);
  text-transform: uppercase;
}

.kard-art {
  display: grid; place-items: center;
  font-size: 70px;
  color: var(--rar2);
  filter: drop-shadow(0 0 16px var(--rar1));
}

.kard-name {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.kard-stat {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--rar2);
}

/* ── INVENTORY ────────────────────────────────────────── */

.inv-shell {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr minmax(220px, 280px);
  gap: 16px;
  flex: 1;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.inv-panel {
  background: rgba(8,8,8,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 18px;
  padding: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.inv-panel-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--jk-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,166,35,0.12);
}

/* Equipped avatar in middle column */

.avatar-stage {
  flex: 1;
  display: grid; place-items: center;
  position: relative;
}

.avatar-frame {
  width: min(360px, 100%);
  aspect-ratio: 3/4;
  max-height: 100%;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at center, rgba(245,166,35,0.20), transparent 70%),
    linear-gradient(180deg, rgba(60,40,20,0.4), rgba(0,0,0,0.9));
  border: 1px solid rgba(245,166,35,0.28);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}

.avatar-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(245,166,35,0.4), transparent 60%);
  pointer-events: none;
}

.avatar-glyph {
  font-size: 180px;
  background: linear-gradient(135deg, #FFE066, #F5A623, #6B461A);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(245,166,35,0.5));
}

.avatar-name {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.avatar-tag {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jk-gold);
}

/* Equip slots floating around avatar (left column) */

.equip-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.equip-slots-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.inv-panel-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(245,166,35,0.12);
  flex-shrink: 0;
}

.equip-slot {
  aspect-ratio: 1;
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,20,20,0.5), rgba(0,0,0,0.8));
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
  position: relative;
  cursor: pointer;
  transition: all 240ms;
}

.equip-slot:hover {
  border-color: var(--rar1, var(--jk-gold));
  transform: translateY(-2px);
}

.equip-slot.empty {
  border-style: dashed;
  border-color: rgba(245,166,35,0.12);
}

.equip-slot.empty .glyph { opacity: 0.2; }

.equip-slot .label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jk-fg-muted);
  font-weight: 700;
}

.equip-slot .glyph {
  font-size: 36px;
  text-align: center;
  color: var(--rar2, var(--jk-gold));
  filter: drop-shadow(0 0 8px var(--rar1));
}

.equip-slot .item-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rar2, #fff);
}

/* Inventory grid (right column) */

.inv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  align-content: start;
}

.inv-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(245,166,35,0.15);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,20,20,0.6), rgba(0,0,0,0.9));
  display: grid; place-items: center;
  position: relative;
  cursor: pointer;
  transition: all 180ms;
}

.inv-cell:hover {
  border-color: var(--rar1, var(--jk-gold));
  transform: scale(1.04);
}

.inv-cell .ico {
  font-size: 24px;
  color: var(--rar2);
  filter: drop-shadow(0 0 4px var(--rar1));
}

.inv-cell .qty {
  position: absolute;
  bottom: 4px; right: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.8);
  padding: 1px 5px;
  border-radius: 4px;
}

.inv-cell.locked {
  opacity: 0.3;
  border-style: dashed;
}

/* Stats section */

.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,166,35,0.06);
}

.stat-row:last-child { border-bottom: none; }

.stat-row .label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.stat-row .value {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--jk-gold);
  letter-spacing: 1px;
}

/* ── SUCCESS / ACHIEVEMENTS ───────────────────────────── */

.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 4px 20px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  align-content: start;
}

.ach-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15,15,15,0.65), rgba(0,0,0,0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245,166,35,0.18);
  border-radius: 14px;
  padding: 18px;
  display: flex; gap: 14px;
  align-items: flex-start;
  transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ach-card:hover {
  transform: translateY(-4px);
  border-color: var(--rar1);
  box-shadow: 0 16px 40px var(--rar1);
}

.ach-card.locked {
  opacity: 0.5;
  filter: grayscale(0.6);
}

.ach-card.completed {
  border-color: var(--rar1);
  background: linear-gradient(180deg, rgba(15,15,15,0.65), rgba(0,0,0,0.85)),
              linear-gradient(135deg, var(--rar1), transparent 60%);
  background-blend-mode: normal, overlay;
}

.ach-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rar1), rgba(0,0,0,0.6));
  border: 1px solid var(--rar2);
  display: grid; place-items: center;
  font-size: 22px;
  filter: drop-shadow(0 0 10px var(--rar1));
}

.ach-body { flex: 1; min-width: 0; }

.ach-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.ach-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}

.ach-progress {
  height: 4px;
  background: rgba(245,166,35,0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ach-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rar1), var(--rar2));
  box-shadow: 0 0 8px var(--rar1);
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ach-progress-text {
  display: flex; justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.ach-progress-text .pct { color: var(--rar2); font-weight: 700; }

.ach-progress-text .reward { color: rgba(255,255,255,0.4); }

/* ── Modal (shop pack confirm) ────────────────────────── */

.modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  display: grid; place-items: center;
  animation: fadeIn 240ms ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: min(440px, 90vw);
  background: linear-gradient(180deg, rgba(15,15,15,0.95), rgba(0,0,0,0.98));
  border: 1px solid rgba(245,166,35,0.4);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(245,166,35,0.15);
  animation: popIn 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast on equip / unlock */

.toast-stack {
  position: fixed;
  top: 86px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--rar1, var(--jk-gold));
  border-radius: 999px;
  box-shadow: 0 0 30px var(--rar1, rgba(245,166,35,0.4));
  animation: toastIn 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  0% { transform: translateY(-24px); opacity: 0; }
  10%, 88% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-24px); opacity: 0; }
}

.toast .ico {
  font-size: 18px;
  color: var(--rar2, var(--jk-gold));
}

.toast .txt {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}

/* Buttons */

.btn-prim {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #FFE066, #F5A623);
  color: #0A0A0A;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 11px;
  border-radius: 999px;
  transition: all 280ms;
  box-shadow: 0 0 20px rgba(245,166,35,0.3);
}

.btn-prim:hover {
  background: #fff;
  box-shadow: 0 0 50px rgba(245,166,35,0.6);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid rgba(245,166,35,0.4);
  color: var(--jk-gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 10px;
  border-radius: 999px;
  transition: all 240ms;
}

.btn-ghost:hover {
  border-color: var(--jk-gold);
  background: rgba(245,166,35,0.08);
}

/* Pack sliders for shop horizontal scroll */

.shop-track {
  display: flex; gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 40px 24px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.shop-track::-webkit-scrollbar { height: 4px; }

.shop-track > * { scroll-snap-align: center; }

@media (max-width: 900px) {
  .inv-shell { grid-template-columns: 1fr; gap: 14px; overflow-y: auto; }
  .inv-panel { min-height: 240px; }
  .dock-btn { padding: 12px 16px; font-size: 10px; letter-spacing: 1.5px; }
  .dock-btn span:not(.glyph) { display: none; }
  .hud-top { padding: 14px 18px; }
  .hud-logo .name { display: none; }
  .screen-content { padding: 76px 16px 100px; }
  .pack-tile { width: clamp(140px, 38vw, 180px); }
  .pack-tile .pack-img { max-height: 22vh; }
  .page-headline { font-size: clamp(28px, 8vw, 38px); }
}

@media (max-width: 480px) {
  .hud-pill { padding: 8px 12px; font-size: 11px; }
  .hud-pill .num { font-size: 12px; }
  .hud-avatar { width: 36px; height: 36px; font-size: 11px; }
  .dock { gap: 2px; padding: 6px; }
  .dock-btn { padding: 10px 12px; }
  .shop-row { gap: 10px; padding: 8px 0; }
  .pack-meta { min-height: auto; }
  .pack-name { font-size: 14px; }
  .runic-circle { display: none; }
  .runic-circle.r2 { display: block; }
  .runic-circle.r3 { display: block; }
  .opening-pack { height: min(48vh, 400px); }
  /* Stack 6-stat grid into 3x2 on small phones */
  .modal-card { padding: 22px 18px; }
}

/* ── KAMP screen — zone tiles + foyer flame ─────────── */

.ksanctum .kamp-zone {
  font-family: inherit;
}

.ksanctum .kamp-zone:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.85), 0 0 22px rgba(245,166,35,0.25) !important;
}

.ksanctum .kamp-zone:active {
  transform: translateY(-1px);
}

.ksanctum .kamp-flame {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255,140,0,0.85))
          drop-shadow(0 0 36px rgba(255,80,0,0.55));
  animation: kampFlameFlicker 1.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes kampFlameFlicker {
  0%   { transform: scale(1)    rotate(-2deg); opacity: 1;    }
  25%  { transform: scale(1.06) rotate( 1deg); opacity: 0.92; }
  50%  { transform: scale(0.96) rotate(-1deg); opacity: 1;    }
  75%  { transform: scale(1.04) rotate( 2deg); opacity: 0.95; }
  100% { transform: scale(1)    rotate(-2deg); opacity: 1;    }
}

@keyframes kampSkollDrift {
  0%   { transform: translateX(-50%) translate(0, 0)     scale(1);    }
  25%  { transform: translateX(-50%) translate(-18px, -6px) scale(1.04); }
  50%  { transform: translateX(-50%) translate(0, -12px) scale(1.02); }
  75%  { transform: translateX(-50%) translate(20px, -4px)  scale(1.04); }
  100% { transform: translateX(-50%) translate(0, 0)     scale(1);    }
}

/* ── Carte au Trésor — X marker draw-in + pulse glow ─────────── */

@keyframes carteTreasureDraw {
  0%   { stroke-dashoffset: 5; }
  100% { stroke-dashoffset: 0; }
}

@keyframes carteTreasurePulse {
  0%   { transform: scale(1);    opacity: 0.18; }
  50%  { transform: scale(1.15); opacity: 0.32; }
  100% { transform: scale(1);    opacity: 0.18; }
}

@keyframes carteKoloPulse {
  0%   { opacity: 0.55; }
  50%  { opacity: 1; }
  100% { opacity: 0.55; }
}

@keyframes carteAttackDash {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2; }
}

/* ── Kamp ambience — chimney smoke + interior embers ─────── */

@keyframes kampSmoke {
  0%   { opacity: 0;    transform: translate(0, 0)     scale(0.6); }
  20%  { opacity: 0.8;  transform: translate(-4px, -16px) scale(0.85); }
  60%  { opacity: 0.45; transform: translate(8px, -42px)  scale(1.3); }
  100% { opacity: 0;    transform: translate(-6px, -72px) scale(1.7); }
}

@keyframes kampEmberRise {
  0%   { opacity: 0;    transform: translate(0, 0)        scale(1);   }
  10%  { opacity: 0.9;  transform: translate(2px, -4px)   scale(1);   }
  60%  { opacity: 0.7;  transform: translate(-3px, -32px) scale(0.9); }
  100% { opacity: 0;    transform: translate(4px, -68px)  scale(0.6); }
}

/* ── Controllable Kabalien — walking + idle bob ─────────── */

@keyframes kabalienWalk {
  0%   { transform: translateY(0)    rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(-3deg); }
  50%  { transform: translateY(0)    rotate(0deg); }
  75%  { transform: translateY(-2px) rotate( 3deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

@keyframes kabalienBob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}

@keyframes kabalienJump {
  0%   { transform: translateY(0)    scale(1)   rotate(0deg); }
  35%  { transform: translateY(-22px) scale(1.05) rotate(-6deg); }
  70%  { transform: translateY(-10px) scale(0.96) rotate(3deg);  }
  100% { transform: translateY(0)    scale(1)   rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   FRAME SYSTEM — 6 drop-in container styles
   Use as additive class on any block element. Per the design spec:
   parchment · clean · glass · brutalist · ink · stamp
   ═══════════════════════════════════════════════════════════════════ */

.frame {
  --frame-cream-1: #f3e8c8;
  --frame-cream-2: #ebd9b0;
  --frame-cream-edge: #c9b690;
  --frame-ink-1: #1a1408;
  --frame-ink-2: #3a2410;
  --frame-ink-soft: rgba(60,40,15,0.55);
  --frame-rad: 8px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── PARCHMENT — sketchy paper w/ corner notches + paper noise ── */

.frame-parchment {
  background:
    radial-gradient(circle at 22% 28%, rgba(80,50,20,0.06) 0%, transparent 35%),
    radial-gradient(circle at 78% 72%, rgba(80,50,20,0.07) 0%, transparent 35%),
    radial-gradient(circle at 12% 88%, rgba(80,50,20,0.04) 0%, transparent 30%),
    linear-gradient(135deg, var(--frame-cream-1) 0%, #ead8b5 50%, var(--frame-cream-1) 100%);
  border: 1.5px solid var(--frame-ink-2);
  border-radius: 4px;
  color: var(--frame-ink-1);
  box-shadow:
    0 6px 14px rgba(60,40,15,0.18),
    inset 0 0 24px rgba(120,80,30,0.08);
}

/* Corner notches — 4 ↘ marks */

.frame-parchment::before,
.frame-parchment::after,
.frame-parchment > .corner-tl,
.frame-parchment > .corner-br {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent 6px, var(--frame-ink-2) 6px, var(--frame-ink-2) 7.5px, transparent 7.5px),
    linear-gradient(to right, transparent 6px, var(--frame-ink-2) 6px, var(--frame-ink-2) 7.5px, transparent 7.5px);
  background-size: 14px 14px, 14px 14px;
  background-repeat: no-repeat;
}

.frame-parchment::before { top: 4px;    left: 4px;    transform: rotate(0deg);   }

.frame-parchment::after  { top: 4px;    right: 4px;   transform: rotate(90deg);  }

/* ── CLEAN — solid cream rounded with soft shadow ── */

.frame-clean {
  background: var(--frame-cream-2);
  border: 1px solid var(--frame-ink-2);
  border-radius: 14px;
  color: var(--frame-ink-1);
  box-shadow: 0 6px 14px rgba(60,40,15,0.18);
}

/* ── GLASS — dark green-black solid w/ inner highlight ── */

.frame-glass {
  background:
    linear-gradient(160deg, #1a2a22 0%, #0c1612 100%);
  border: 1px solid rgba(245,166,35,0.28);
  border-radius: 12px;
  color: #fef3c7;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(245,166,35,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* ── BRUTALIST — flat cream + hard offset shadow (no blur) ── */

.frame-brutalist {
  background: var(--frame-cream-2);
  border: 2px solid var(--frame-ink-1);
  border-radius: 6px;
  color: var(--frame-ink-1);
  box-shadow: 6px 6px 0 var(--frame-ink-1);
}

/* ── INK — cream with slightly wobbly hand-drawn border ── */

.frame-ink {
  background: var(--frame-cream-2);
  border: 2px solid var(--frame-ink-1);
  /* Asymmetric border-radius gives a hand-drawn feel */
  border-radius: 18px 16px 22px 14px / 14px 22px 16px 18px;
  color: var(--frame-ink-1);
  box-shadow: 0 4px 12px rgba(60,40,15,0.18);
}

/* ── STAMP — bracket corners + dashed inner border ── */

.frame-stamp {
  background: var(--frame-cream-1);
  border: 1.5px dashed var(--frame-ink-soft);
  border-radius: 4px;
  color: var(--frame-ink-1);
  padding: 18px 20px;
}

.frame-stamp::before,
.frame-stamp::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--frame-ink-1);
  pointer-events: none;
}

.frame-stamp::before { top: 5px;    left: 5px;    border-right: none; border-bottom: none; }

.frame-stamp::after  { bottom: 5px; right: 5px;   border-left: none;  border-top: none;    }

/* ── Frame helper — variant sample card label ── */

.frame-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(60,40,15,0.6);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.frame-eyebrow .diamond {
  color: var(--frame-ink-1);
  font-size: 11px;
}

.frame-glass .frame-eyebrow,
.frame-glass .frame-eyebrow .diamond { color: rgba(245,166,35,0.7); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE PASS — 320px → 2560px polish
   Breakpoints: xs <480 · sm 480-767 · md 768-1023 · lg 1024-1399 · xl ≥1400
   CSS-only — no JSX edits. Some overrides target inline styles via
   attribute selectors (RightRailHUD + CarteTresor) and use !important.
   FLAG: full RightRailHUD drawer toggle needs a JS class hook on the
   rail root; this CSS forces a static bottom-sheet under 768px.
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll across all small viewports */

@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
}

/* ── Modal scroll fix (iOS Safari + all viewports) ── */

.modal-back {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
}

.modal-card {
  max-height: min(90vh, calc(100dvh - 32px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-box,
.modal-inner,
.modal-overlay > * {
  max-height: min(90vh, calc(100dvh - 32px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── CarteTresor SVG: fluid below 1100px (overrides inline maxWidth) ── */

@media (max-width: 1100px) {
  div[style*="max-width: 1100"],
  div[style*="max-width:1100"] {
    max-width: min(1100px, 100vw) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   xs : <480px — Mobile portrait
   ════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
  /* Pack tile 2-column grid (replaces horizontal scroll on tiny screens) */
  .shop-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    flex-wrap: initial !important;
    overflow-x: visible !important;
    padding: 8px 4px !important;
  }
  .pack-tile {
    width: 100% !important;
    min-width: 140px;
  }
  .pack-tile .pack-img { max-height: min(20vh, 180px); }

  /* Hit regions ≥44×44 (Apple HIG) */
  .hud-pill {
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
  }
  .hud-avatar { min-width: 44px; min-height: 44px; }
  .dock-btn { min-height: 44px; min-width: 44px; padding: 12px 14px; }
  .btn-prim, .btn-ghost { min-height: 44px; }
  .inv-cell { min-height: 44px; }

  .modal-card {
    padding: 18px 14px;
    border-radius: 14px;
    max-height: min(92vh, calc(100dvh - 16px));
  }
  .modal-back { padding: 8px; }
}

/* ════════════════════════════════════════════════════════════
   sm : 480–767px — Mobile landscape / small tablet
   ════════════════════════════════════════════════════════════ */

@media (min-width: 480px) and (max-width: 767px) {
  .pack-tile { width: clamp(150px, 32vw, 200px); }
  .modal-card { padding: 22px 18px; }
  .hud-pill { min-height: 44px; }
  .dock-btn { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════
   ≤md : ≤767px — RightRailHUD → bottom-sheet
   Targets the inline-styled rail root (width:260 + position:fixed).
   The collapse toggle button (right:268 + width:24 + height:70) is
   hidden — full drawer toggle requires a JS class hook (flagged).
   ════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  div[style*="position: fixed"][style*="width: 260px"],
  div[style*="position:fixed"][style*="width:260px"] {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: 50dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 2px solid rgba(245,166,35,0.4) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5) !important;
    z-index: 90 !important;
  }
  /* Hide the off-canvas collapse toggle (its absolute right: 268 makes no sense as bottom-sheet) */
  button[style*="right: 268"],
  button[style*="right:268"],
  div[style*="position: fixed"][style*="width: 24px"][style*="height: 70px"],
  div[style*="position:fixed"][style*="width:24px"][style*="height:70px"] {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   md : 768–1023px — Tablet
   ════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  .pack-tile { width: clamp(160px, 24vw, 200px); }
}

/* ════════════════════════════════════════════════════════════
   xl : ≥1400px — Desktop subtle scale-up
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1400px) {
  .page-headline { font-size: clamp(40px, 4vw, 64px); }
}

/* ════════════════════════════════════════════════════════════
   Touch-only — swap hover for tactile :active (P1 #6)
   ════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  .pack-tile:hover,
  .ksanctum .pack-tile:hover,
  .ksanctum .kamp-zone:hover { transform: none; }
  .btn-prim:hover { transform: none; box-shadow: 0 0 28px rgba(245,166,35,0.4); }

  .pack-tile:active { transform: scale(0.97); transition: transform 80ms ease-out; }
  .btn-prim:active,
  .btn-ghost:active { transform: scale(0.98); transition: transform 80ms ease-out; }
  .dock-btn:active { transform: scale(0.95); transition: transform 80ms ease-out; }
  .hud-pill:active { background: rgba(245,166,35,0.12); }
  .hud-avatar:active { transform: scale(0.94); transition: transform 80ms ease-out; }
  .inv-cell:active { transform: scale(0.96); transition: transform 80ms ease-out; }
}

/* ════════════════════════════════════════════════════════════
   Mobile scrollbar — wider + visible (P1 #7)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: rgba(245,166,35,0.45);
    border-radius: 5px;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(245,166,35,0.7); }
  *::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); }
  .shop-track::-webkit-scrollbar { height: 10px; }
}

/* ════════════════════════════════════════════════════════════
   Fluid type + spacing (P2 #8/#9)
   Scoped to known display headlines to avoid breaking 900px rules.
   ════════════════════════════════════════════════════════════ */

.page-headline { font-size: clamp(28px, 4vw + 0.5rem, 56px); }



/* ============================================================
   JUNGLE KABAL — COLORS & TYPE TOKENS
   Single source of truth for palette + typography.
   Two color systems cohabitate:
     1. BRAND (from Brand_Art_Direction_v3.md) — used for all
        illustration, marketing, identity assets.
     2. APP / MISSION CONTROL (from codebase) — used for the
        live Kabal A.I. product surface. The app uses a
        slightly more orange-gold (#F5A623) than the brand's
        Kabal Yellow (#FDBB2A); both are canonical within
        their respective contexts.
   ============================================================ */
/* ── Fonts ────────────────────────────────────────────────── */
/* All families pulled from Google Fonts. Local @font-face for Cinzel /
   JetBrains / Outfit removed — files not yet shipped. Adds Caveat for
   the hand-written numbers/data style spec'd in the design system. */
:root {
  /* ─── BRAND PALETTE ────────────────────────────────────── */
  /* Primaries — non-negociables (4) */
  --jk-kabal-yellow:   #FDBB2A;  /* Eyes, logo, Œil, Ka, sacred accents */
  --jk-kabalian-brown: #6B461A;  /* Kabalian robe base, earth, organic */
  --jk-void-black:     #20160C;  /* Deep background, outlines, shadows */
  --jk-bone-cream:     #F6ECD2;  /* Light, bone, parchment, clarity */

  /* Elemental accents — one max per composition */
  --jk-el-fire:      #FF4500;
  --jk-el-sky:       #159FEB;
  --jk-el-nature:    #005E36;
  --jk-el-arcane:    #8C4FEB;
  --jk-el-blood:     #D72631;
  --jk-el-gold:      #FDBB2A;
  --jk-el-ice:       #7AC0DA;
  --jk-el-poison:    #77B541;
  --jk-el-shadow:    #3D2B56;
  --jk-el-lightning: #FFD800;
  --jk-el-water:     #2E81A0;
  --jk-el-bone:      #F6ECD2;

  /* ─── APP / MISSION CONTROL PALETTE ────────────────────── */
  /* Gold running scale — the working gold used by JKShell & views */
  --jk-gold:    #F5A623;         /* Primary operational gold */
  --jk-gold-2:  #FFD037;         /* Gold highlight / gradient top */
  --jk-gold-3:  #C88415;         /* Gold shadow / gradient bottom */
  --jk-gold-gradient: linear-gradient(135deg, #FFD037, #F5A623, #C88415);

  /* Surfaces */
  --jk-bg-0:       #050507;      /* Marketing site deep canvas */
  --jk-bg-1:       #0A0A0A;      /* App canvas */
  --jk-bg-2:       #0D0D0D;      /* App surface */
  --jk-bg-3:       rgba(20,20,20,0.85);   /* Card (translucent) */
  --jk-bg-4:       rgba(15,15,15,0.6);    /* Glass card */
  --jk-sidebar:    linear-gradient(180deg, #0D0D0D 0%, #0A0E0A 50%, #0D0D0D 100%);

  /* Borders — almost always gold at low alpha */
  --jk-border-1:   rgba(245,166,35,0.08);   /* Faint divider */
  --jk-border-2:   rgba(245,166,35,0.15);   /* Default card border */
  --jk-border-3:   rgba(245,166,35,0.35);   /* Hover / active */
  --jk-border-neutral-1: rgba(255,255,255,0.04);
  --jk-border-neutral-2: rgba(255,255,255,0.06);
  --jk-border-neutral-3: rgba(255,255,255,0.12);

  /* Text */
  --jk-fg-1:    #ffffff;         /* Primary text */
  --jk-fg-2:    #e8e4d9;         /* Marketing body text (bone-tinted) */
  --jk-fg-3:    #cccccc;         /* Secondary */
  --jk-fg-muted:#888888;         /* Muted / meta */
  --jk-fg-dim:  #555555;         /* Dim labels */
  --jk-fg-faint:#333333;         /* Deep dim */

  /* Semantic status */
  --jk-green:    #22C55E;        /* Success, live, PnL positive */
  --jk-red:      #EF4444;        /* Danger, loss, alert */
  --jk-amber:    #F59E0B;        /* Warning, pending */
  --jk-blue:     #3B82F6;        /* Info, build */
  --jk-purple:   #A855F7;        /* Review, arcane */
  --jk-pink:     #EC4899;        /* Content, promotion */
  --jk-cyan:     #06B6D4;        /* Distribution, knowledge */

  /* Agent-family colors (from mission-control/config.js) */
  --jk-family-creation:      #A855F7;
  --jk-family-deploy:        #F59E0B;
  --jk-family-distribution:  #06B6D4;
  --jk-family-trading:       #22C55E;
  --jk-family-promotion:     #EC4899;
  --jk-family-intelligence:  #3B82F6;
  --jk-family-orchestration: #F5A623;
  --jk-family-ops:           #F59E0B;

  /* Glow presets */
  --jk-glow-gold-sm: 0 0 8px rgba(245,166,35,0.40);
  --jk-glow-gold-md: 0 0 40px rgba(245,166,35,0.35);
  --jk-glow-gold-lg: 0 0 80px rgba(245,166,35,0.20);
  --jk-glow-green:   0 0 8px #22C55E;

  /* Elevation / shadow */
  --jk-elev-1: 0 4px 12px rgba(0,0,0,0.35);
  --jk-elev-2: 0 12px 40px rgba(245,166,35,0.08);
  --jk-elev-3: 0 16px 48px rgba(245,166,35,0.15);

  /* Radii */
  --jk-r-sm: 4px;
  --jk-r-md: 8px;
  --jk-r-lg: 14px;
  --jk-r-xl: 20px;
  --jk-r-pill: 999px;

  /* Spacing (4px base) */
  --jk-s-1:  4px;
  --jk-s-2:  8px;
  --jk-s-3:  12px;
  --jk-s-4:  16px;
  --jk-s-5:  20px;
  --jk-s-6:  24px;
  --jk-s-8:  32px;
  --jk-s-10: 40px;
  --jk-s-12: 48px;
  --jk-s-16: 64px;

  /* ─── TYPE FAMILIES ───────────────────────────────────── */
  --jk-font-display:  'Cinzel Decorative', 'Cinzel', serif;  /* Wordmark, biggest stats */
  --jk-font-serif:    'Cinzel', serif;                        /* Headlines, labels, section titles (uppercase + tracked) */
  --jk-font-sans:     'Inter', sans-serif;                    /* App UI body */
  --jk-font-sans-mkt: 'Outfit', sans-serif;                   /* Marketing body + big headlines */
  --jk-font-mono:     'Space Mono', monospace;                /* Marketing labels, tickers, badges */
  --jk-font-code:     'JetBrains Mono', monospace;            /* Code blocks, inline code */
}
/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these via class; they encode the voice of the brand.
   Cinzel headlines are ALWAYS uppercase + tracked.
   ============================================================ */
.jk-wordmark {
  font-family: var(--jk-font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--jk-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.05;
}
.jk-h1 {                                   /* Section title, app-side */
  font-family: var(--jk-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--jk-fg-1);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
.jk-h2 {                                   /* Subsection */
  font-family: var(--jk-font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.jk-h3 {                                   /* Card title */
  font-family: var(--jk-font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--jk-fg-1);
  letter-spacing: 1px;
  line-height: 1.3;
  margin: 0;
}
.jk-eyebrow {                              /* Cinzel tracked micro-label above headings */
  font-family: var(--jk-font-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.jk-stat-number {                          /* Big decorative numbers on stat cards */
  font-family: var(--jk-font-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--jk-gold);
  letter-spacing: 0.5px;
  line-height: 1;
}
.jk-hero-marketing {                       /* JKHome hero headline */
  font-family: var(--jk-font-sans-mkt);
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--jk-fg-2);
}
.jk-mkt-section {                          /* Marketing section heading */
  font-family: var(--jk-font-sans-mkt);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
}
.jk-body {                                 /* App body */
  font-family: var(--jk-font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--jk-fg-3);
}
.jk-body-mkt {                             /* Marketing body */
  font-family: var(--jk-font-sans-mkt);
  font-size: 14px;
  line-height: 1.75;
  color: #6a6a8a;
}
.jk-mono {                                 /* Marketing mono meta-labels */
  font-family: var(--jk-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jk-fg-muted);
}
.jk-mono-sm {
  font-family: var(--jk-font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--jk-fg-dim);
}
.jk-code {                                 /* Inline code / command */
  font-family: var(--jk-font-code);
  font-size: 13px;
  font-weight: 600;
  color: var(--jk-gold);
  background: rgba(245,166,35,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}
.jk-meta {                                 /* Tiny uppercased Cinzel label inside cards */
  font-family: var(--jk-font-serif);
  font-size: 9px;
  font-weight: 700;
  color: var(--jk-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* ── Utility text colors ────────────────────────────────── */
.jk-t-gold    { color: var(--jk-gold); }
.jk-t-green   { color: var(--jk-green); }
.jk-t-red     { color: var(--jk-red); }
.jk-t-muted   { color: var(--jk-fg-muted); }
.jk-t-dim     { color: var(--jk-fg-dim); }
.jk-t-cream   { color: var(--jk-bone-cream); }
/* ── Base body reset matching the app ───────────────────── */
.jk-reset,
.jk-reset * { box-sizing: border-box; }
.jk-reset {
  background: var(--jk-bg-1);
  color: var(--jk-fg-1);
  font-family: var(--jk-font-sans);
  -webkit-font-smoothing: antialiased;
}
.jk-reset ::-webkit-scrollbar { width: 4px; height: 4px; }
.jk-reset ::-webkit-scrollbar-track { background: transparent; }
.jk-reset ::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.25); border-radius: 2px; }
/* ════════════════════════════════════════════════════════════
   CREAM THEME — parchment-style theme for Sanctum / Kamp / Carte
   Activate with class .theme-cream on any wrapper. Dark theme is
   default (--jk-bg-1). Cream theme uses bone-cream surfaces +
   void-black ink + Kabal Yellow as primary action color.
   ════════════════════════════════════════════════════════════ */
.theme-cream {
  --kb-bg:        #f0e6cf;          /* page bg */
  --kb-surface:   #f6ecd2;          /* card / modal */
  --kb-surface-2: #ead8b5;          /* deeper variant */
  --kb-ink:       #1a1408;          /* primary text */
  --kb-ink-mute:  rgba(60,40,15,0.6);
  --kb-ink-soft:  rgba(60,40,15,0.85);
  --kb-border:    rgba(60,40,15,0.18);
  --kb-border-2:  rgba(60,40,15,0.45);
  --kb-primary:   #FDBB2A;          /* Kabal Yellow — buttons & CTAs */
  --kb-primary-2: #C88415;          /* Kabal Yellow shadow */
  --kb-shadow-1:  0 4px 12px rgba(60,40,15,0.18);
  --kb-shadow-2:  6px 6px 0 #1a1408;
  --kb-radius:    8px;
  --kb-radius-sm: 4px;
  --kb-radius-lg: 14px;
  --kb-font-display: var(--jk-font-display);
  --kb-font-serif:   var(--jk-font-serif);
  --kb-font-sans:    var(--jk-font-sans);
  --kb-font-mono:    var(--jk-font-mono);
  --kb-font-hand:    'Caveat', 'Brush Script MT', cursive;
  background: var(--kb-bg);
  color: var(--kb-ink);
}
/* ════════════════════════════════════════════════════════════
   FRAME SYSTEM v2 — canonical spec from /dropbox/uiux-wallet
   6 drop-in container variants. Use as additive class:
       <div className="kf kf-parchment">…</div>
   ════════════════════════════════════════════════════════════ */
.kf {
  position: relative;
  --kb-bg:        #0a0a0a;
  --kb-surface:   #f6ecd2;
  --kb-surface-2: #ead8b5;
  --kb-ink:       #1a1408;
  --kb-ink-mute:  rgba(60,40,15,0.6);
  --kb-border:    rgba(60,40,15,0.18);
  --kb-primary:   #FDBB2A;
  --kb-radius:    8px;
  --kb-radius-sm: 4px;
  --kb-shadow-1:  0 4px 12px rgba(60,40,15,0.18);
  font-family: var(--jk-font-sans);
}
/* PARCHMENT — torn cream paper w/ corner flourishes + grain */
.kf-parchment {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, rgba(120,90,40,0.18) 100%),
    radial-gradient(circle at 18% 82%, rgba(160,120,60,0.16) 0%, transparent 25%),
    radial-gradient(circle at 78% 18%, rgba(160,120,60,0.14) 0%, transparent 22%),
    linear-gradient(135deg, #f0e6cf 0%, #ead8b5 50%, #f0e6cf 100%);
  border: 1.4px solid #1a1a1a;
  border-radius: 4px;
  color: var(--kb-ink);
  box-shadow: 2px 3px 6px rgba(120,90,40,0.25);
}
/* Corner flourishes — small ink quill marks */
.kf-parchment::before, .kf-parchment::after,
.kf-parchment > .kf-corner-bl, .kf-parchment > .kf-corner-br {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, #7a5a2a 0, #7a5a2a 6px, transparent 6px),
    linear-gradient(to bottom, #7a5a2a 0, #7a5a2a 6px, transparent 6px);
  background-size: 6px 1.2px, 1.2px 6px;
  background-repeat: no-repeat;
  background-position: 1px 1px, 1px 1px;
  opacity: 0.65;
}
.kf-parchment::before { top: 4px; left: 6px; }
.kf-parchment::after  { top: 4px; right: 6px; transform: scaleX(-1); }
/* CLEAN — minimal stroke + soft shadow */
.kf-clean {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  box-shadow: var(--kb-shadow-1);
}
/* GLASS — frosted dark surface */
.kf-glass {
  background: linear-gradient(135deg, rgba(20,30,25,0.85), rgba(8,12,10,0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245,166,35,0.28);
  border-radius: var(--kb-radius);
  color: #f0e6cf;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(245,166,35,0.18);
}
/* BRUTALIST — flat cream + hard offset shadow */
.kf-brutalist {
  background: var(--kb-surface);
  border: 3px solid #1a1408;
  border-radius: 0;
  color: var(--kb-ink);
  box-shadow: 6px 6px 0 0 #1a1408;
}
/* INK — hand-drawn wobbly border (asymmetric radius) */
.kf-ink {
  background: var(--kb-surface);
  border: 2px solid #1a1408;
  border-radius: 18px 16px 22px 14px / 14px 22px 16px 18px;
  color: var(--kb-ink);
  box-shadow: 0 4px 12px rgba(60,40,15,0.18);
}
/* STAMP — bracket corners + dashed inner */
.kf-stamp {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink);
}
.kf-stamp::before, .kf-stamp::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.4px solid #1a1408;
  pointer-events: none;
}
.kf-stamp::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.kf-stamp::after  { bottom: 4px; right: 4px; border-left: none; border-top: none; }
/* Inner inset on all kf — dashed second border for archival look (optional, opt-in) */
.kf-archival {
  position: relative;
}
.kf-archival > .kf-archival-inset {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px dashed var(--kb-border);
  border-radius: calc(var(--kb-radius-sm) - 2px);
  pointer-events: none;
}
/* ════════════════════════════════════════════════════════════
   KABAL BUTTON — primary CTA (uses Kabal Yellow on cream)
   ════════════════════════════════════════════════════════════ */
.kb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  font-family: var(--jk-font-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-btn-primary {
  background: var(--jk-kabal-yellow);
  color: #1a1408;
  box-shadow: 0 0 0 1px #1a1408, 0 4px 12px rgba(253,187,42,0.35);
}
.kb-btn-primary:hover {
  background: #FFD037;
  box-shadow: 0 0 0 1px #1a1408, 0 6px 18px rgba(253,187,42,0.55);
  transform: translateY(-1px);
}
.kb-btn-ghost {
  background: transparent;
  color: var(--kb-ink, #1a1408);
  box-shadow: 0 0 0 1px var(--kb-border, rgba(60,40,15,0.45));
}
.kb-btn-ghost:hover {
  background: rgba(253,187,42,0.10);
}
/* ════════════════════════════════════════════════════════════
   PAPER TEXTURE OVERLAY — drop on .theme-cream wrapper
   Subtle noise via base64 SVG (tiny, no asset request).
   ════════════════════════════════════════════════════════════ */
.theme-cream::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.20  0 0 0 0 0.10  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
.theme-cream > * { position: relative; z-index: 1; }
/* ════════════════════════════════════════════════════════════
   HAND TYPOGRAPHY — Caveat for numbers/data on cream surfaces
   Use class .kb-hand on any element to swap Space Mono → Caveat
   ════════════════════════════════════════════════════════════ */
.kb-hand {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.kb-hand-strong {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.5px;
}
/* Diamond eyebrow icon */
.kb-eyebrow-diamond {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--jk-font-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--kb-ink-mute, rgba(60,40,15,0.6));
}
.kb-eyebrow-diamond::before {
  content: '◆';
  color: var(--kb-ink, #1a1408);
  font-size: 11px;
}
/* ════════════════════════════════════════════════════════════
   GLOBAL MODAL UPGRADE — auto-parchment for all .modal-card
   that haven't been individually upgraded. Inline `background`
   on a modal-card will still take precedence (escape hatch for
   cinematics like the Mythic toast). To opt out: add
   .modal-card-dark or set inline background.
   ════════════════════════════════════════════════════════════ */
.modal-card:not(.modal-card-dark):not(.kf-parchment):not(.kf) {
  /* Soft parchment treatment as fallback. Inline styles still win
     for components that explicitly choose another look. */
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 50%, rgba(120,90,40,0.16) 100%),
    radial-gradient(circle at 18% 82%, rgba(160,120,60,0.13) 0%, transparent 25%),
    linear-gradient(135deg, #f0e6cf 0%, #ead8b5 50%, #f0e6cf 100%);
  border: 1.4px solid #1a1a1a;
  color: #1a1408;
  box-shadow: 2px 3px 6px rgba(120,90,40,0.25), 0 12px 32px rgba(0,0,0,0.45);
}
/* When the frame override is active, default text + headlines on the
   parchment shouldn't render as light-on-dark anymore */
.modal-card:not(.modal-card-dark):not(.kf-parchment):not(.kf) .page-eyebrow {
  color: #C88415 !important;
}
/* Generic .btn-ghost on parchment — read on cream */
.modal-card:not(.modal-card-dark):not(.kf-parchment):not(.kf) .btn-ghost {
  background: transparent;
  color: #1a1408;
  border: 1px solid rgba(60,40,15,0.45);
}
.modal-card:not(.modal-card-dark):not(.kf-parchment):not(.kf) .btn-ghost:hover {
  background: rgba(253,187,42,0.12);
}
/* ─── SIDE OVERLAY HUD ─────────────────────────────────────────── */
/* Fixed right-edge drawer, persistent across pages.                */
/* Slides via CSS transform, all interactions debounced via React.  */

.kabal-hud {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  align-items: stretch;
  font-family: 'Cinzel', 'Helvetica Neue', sans-serif;
  pointer-events: none;
}

.kabal-hud > * {
  pointer-events: auto;
}

/* ─── Tab handle (always visible, even when collapsed) ─── */
.kabal-hud__tab {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
  border: 1px solid rgba(245, 166, 35, 0.32);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: #facc15;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 9px;
  text-transform: uppercase;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.6), inset 1px 0 0 rgba(245, 166, 35, 0.1);
  transition: all 200ms ease;
  min-width: 36px;
}

.kabal-hud__tab:hover {
  background: linear-gradient(180deg, #2a1c10 0%, #1a0e08 100%);
  border-color: rgba(245, 166, 35, 0.55);
  color: #fff;
}

.kabal-hud__tab-glyph {
  font-size: 14px;
  line-height: 1;
}

.kabal-hud__tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 9px;
  letter-spacing: 3px;
}

.kabal-hud__tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* ─── Drawer body (only mounted when open) ─── */
.kabal-hud__body {
  width: 320px;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(10, 8, 5, 0.97) 0%, rgba(20, 14, 8, 0.97) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 166, 35, 0.32);
  border-right: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.7), inset 1px 0 0 rgba(245, 166, 35, 0.08);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  animation: kabal-hud-slide-in 320ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #fff;
}

@keyframes kabal-hud-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ─── Header ─── */
.kabal-hud__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(245, 166, 35, 0.18);
}

.kabal-hud__brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kabal-hud__brand-glyph {
  font-size: 16px;
  filter: drop-shadow(0 0 6px #facc15);
}

.kabal-hud__brand-name {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  letter-spacing: 3px;
  color: #facc15;
  font-size: 13px;
}

.kabal-hud__kr {
  font-family: 'Space Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  color: #facc15;
  letter-spacing: 0.5px;
}

.kabal-hud__kr em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(245, 166, 35, 0.6);
  margin-left: 2px;
}

/* ─── Sections ─── */
.kabal-hud__section {
  margin-bottom: 14px;
}

.kabal-hud__eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.7);
  margin-bottom: 6px;
}

.kabal-hud__pnl-big {
  font-family: 'Cinzel Decorative', serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 12px currentColor;
  transition: color 300ms;
}

.kabal-hud__sub {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.4px;
}

/* ─── Agents grid ─── */
.kabal-hud__agents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.kabal-hud__agent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 200ms;
}

.kabal-hud__agent--flash {
  background: rgba(245, 166, 35, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.18);
}

.kabal-hud__agent-emoji {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid;
  font-size: 11px;
  flex-shrink: 0;
}

.kabal-hud__agent-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.kabal-hud__agent-id {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 10px;
  flex-shrink: 0;
}

.kabal-hud__agent-pnl {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  margin-left: 8px;
  text-align: right;
  transition: color 300ms;
}

.kabal-hud__agent-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Quick nav ─── */
.kabal-hud__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.kabal-hud__nav button {
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 166, 35, 0.16);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 200ms;
}

.kabal-hud__nav button:hover {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.4);
  color: #facc15;
  transform: translateX(2px);
}

/* ─── Footer ─── */
.kabal-hud__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 166, 35, 0.12);
}

.kabal-hud__footer button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms;
}

.kabal-hud__footer button:hover {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.4);
  color: #facc15;
}

.kabal-hud__footer-hint {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px;
}

/* ─── Mobile responsive (<768px → bottom drawer) ─── */
@media (max-width: 768px) {
  .kabal-hud {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: column;
    align-items: stretch;
  }

  .kabal-hud__tab {
    align-self: center;
    flex-direction: row;
    border-radius: 10px 10px 0 0;
    border-right: 1px solid rgba(245, 166, 35, 0.32);
    border-bottom: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    min-width: auto;
  }

  .kabal-hud__tab-label {
    writing-mode: horizontal-tb;
  }

  .kabal-hud__body {
    width: 100%;
    max-height: 70vh;
    border-radius: 12px 12px 0 0;
    border-right: 1px solid rgba(245, 166, 35, 0.32);
    border-bottom: none;
    animation-name: kabal-hud-slide-in-bottom;
  }

  @keyframes kabal-hud-slide-in-bottom {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .kabal-hud__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ─── MINIMAL CHROME MODE ─────────────────────────────────────── */
/* Toggled by `body.kabal-minimal-chrome` class (set via useMinimalChrome  */
/* hook reading kpo_flags_v1.minimalChrome). Reduces visual clutter:       */
/*   - dim decorative gem/XP badges by 60%                                 */
/*   - hide non-essential level pills                                      */
/*   - tighten font sizes by ~10%                                          */
/*   - remove background gradients on chrome strips                        */
/*                                                                          */
/* Designed to be NON-DESTRUCTIVE — no display:none, just opacity + scale. */
/* User can quickly re-enable Full chrome via the master flag.             */

body.kabal-minimal-chrome {
  /* Custom property tokens overridable per element */
  --kabal-deco-opacity: 0.45;
  --kabal-deco-scale: 0.9;
}

/* Dim decorative gems badges site-wide */
body.kabal-minimal-chrome .agent-badge,
body.kabal-minimal-chrome [data-deco="gems"],
body.kabal-minimal-chrome [data-deco="xp"] {
  opacity: var(--kabal-deco-opacity);
  transition: opacity 250ms;
}

/* Reduce big level/XP rings */
body.kabal-minimal-chrome [data-deco="level-ring"],
body.kabal-minimal-chrome [data-deco="rank-badge"] {
  transform: scale(var(--kabal-deco-scale));
  opacity: 0.7;
}

/* Decorative top-chrome gradients become flat */
body.kabal-minimal-chrome [data-deco="gradient-strip"] {
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Daily quests / challenges blocks dim */
body.kabal-minimal-chrome [data-deco="challenge-block"] {
  opacity: 0.7;
}

/* Sanctum-specific: dim warmth glow + decorative embers */
body.kabal-minimal-chrome .ksanctum [class*="embers"],
body.kabal-minimal-chrome .ksanctum [class*="warmth"] {
  opacity: 0.35;
}

/* Hover restores full opacity */
body.kabal-minimal-chrome [data-deco="gems"]:hover,
body.kabal-minimal-chrome [data-deco="xp"]:hover,
body.kabal-minimal-chrome [data-deco="challenge-block"]:hover,
body.kabal-minimal-chrome [data-deco="level-ring"]:hover {
  opacity: 1;
  transform: scale(1);
  transition: opacity 200ms, transform 200ms;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

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

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

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

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

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

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

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

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

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

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-left-20 {
  left: -5rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-20 {
  right: -5rem;
}
.-right-24 {
  right: -6rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-20 {
  top: -5rem;
}
.-top-8 {
  top: -2rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-0\.5 {
  bottom: 0.125rem;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-8 {
  bottom: 2rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-1\/3 {
  left: 33.333333%;
}
.left-16 {
  left: 4rem;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\/2 {
  right: 50%;
}
.right-16 {
  right: 4rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/3 {
  top: 33.333333%;
}
.top-12 {
  top: 3rem;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-20 {
  top: 5rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-40 {
  top: 10rem;
}
.top-44 {
  top: 11rem;
}
.top-8 {
  top: 2rem;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[55\] {
  z-index: 55;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-full {
  grid-column: 1 / -1;
}
.m-1 {
  margin: 0.25rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.-ml-\[50vw\] {
  margin-left: -50vw;
}
.-mr-\[50vw\] {
  margin-right: -50vw;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.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;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.\!h-24 {
  height: 6rem !important;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[128px\] {
  height: 128px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[70vh\] {
  height: 70vh;
}
.h-\[72px\] {
  height: 72px;
}
.h-full {
  height: 100%;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[56px\] {
  min-height: 56px;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-\[90px\] {
  min-height: 90px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[72px\] {
  width: 72px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[26px\] {
  min-width: 26px;
}
.min-w-\[52px\] {
  min-width: 52px;
}
.min-w-\[72px\] {
  min-width: 72px;
}
.\!max-w-\[280px\] {
  max-width: 280px !important;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-3\.5 {
  --tw-translate-x: 0.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.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-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-content-center {
  place-content: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-40 {
  gap: 10rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-center {
  align-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.scroll-smooth {
  scroll-behavior: smooth;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[16px\] {
  border-radius: 16px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[22px\] {
  border-radius: 22px;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-\[32px\] {
  border-radius: 32px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-\[28px\] {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#1c1c1c\] {
  --tw-border-opacity: 1;
  border-color: rgb(28 28 28 / var(--tw-border-opacity, 1));
}
.border-\[\#1f1f1f\] {
  --tw-border-opacity: 1;
  border-color: rgb(31 31 31 / var(--tw-border-opacity, 1));
}
.border-\[\#2a2a2a\] {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 42 / var(--tw-border-opacity, 1));
}
.border-\[\#2b2b2b\] {
  --tw-border-opacity: 1;
  border-color: rgb(43 43 43 / var(--tw-border-opacity, 1));
}
.border-\[\#ffc300\] {
  --tw-border-opacity: 1;
  border-color: rgb(255 195 0 / var(--tw-border-opacity, 1));
}
.border-\[rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
  border-color: rgba(255,255,255,0.06);
}
.border-amber-200\/20 {
  border-color: rgb(253 230 138 / 0.2);
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-300\/15 {
  border-color: rgb(252 211 77 / 0.15);
}
.border-amber-300\/20 {
  border-color: rgb(252 211 77 / 0.2);
}
.border-amber-300\/25 {
  border-color: rgb(252 211 77 / 0.25);
}
.border-amber-300\/30 {
  border-color: rgb(252 211 77 / 0.3);
}
.border-amber-300\/35 {
  border-color: rgb(252 211 77 / 0.35);
}
.border-amber-300\/40 {
  border-color: rgb(252 211 77 / 0.4);
}
.border-amber-300\/45 {
  border-color: rgb(252 211 77 / 0.45);
}
.border-amber-300\/50 {
  border-color: rgb(252 211 77 / 0.5);
}
.border-amber-300\/60 {
  border-color: rgb(252 211 77 / 0.6);
}
.border-amber-300\/70 {
  border-color: rgb(252 211 77 / 0.7);
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-400\/20 {
  border-color: rgb(251 191 36 / 0.2);
}
.border-amber-400\/25 {
  border-color: rgb(251 191 36 / 0.25);
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}
.border-amber-400\/50 {
  border-color: rgb(251 191 36 / 0.5);
}
.border-amber-400\/60 {
  border-color: rgb(251 191 36 / 0.6);
}
.border-amber-400\/70 {
  border-color: rgb(251 191 36 / 0.7);
}
.border-amber-400\/80 {
  border-color: rgb(251 191 36 / 0.8);
}
.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/50 {
  border-color: rgb(245 158 11 / 0.5);
}
.border-amber-500\/60 {
  border-color: rgb(245 158 11 / 0.6);
}
.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.border-amber-600\/40 {
  border-color: rgb(217 119 6 / 0.4);
}
.border-amber-700\/40 {
  border-color: rgb(180 83 9 / 0.4);
}
.border-amber-700\/50 {
  border-color: rgb(180 83 9 / 0.5);
}
.border-amber-800 {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.border-amber-800\/40 {
  border-color: rgb(146 64 14 / 0.4);
}
.border-amber-900\/40 {
  border-color: rgb(120 53 15 / 0.4);
}
.border-blue-400\/50 {
  border-color: rgb(96 165 250 / 0.5);
}
.border-blue-400\/60 {
  border-color: rgb(96 165 250 / 0.6);
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-500\/40 {
  border-color: rgb(59 130 246 / 0.4);
}
.border-blue-500\/60 {
  border-color: rgb(59 130 246 / 0.6);
}
.border-blue-700\/50 {
  border-color: rgb(29 78 216 / 0.5);
}
.border-cyan-300\/15 {
  border-color: rgb(103 232 249 / 0.15);
}
.border-cyan-300\/20 {
  border-color: rgb(103 232 249 / 0.2);
}
.border-cyan-300\/25 {
  border-color: rgb(103 232 249 / 0.25);
}
.border-cyan-300\/30 {
  border-color: rgb(103 232 249 / 0.3);
}
.border-cyan-300\/35 {
  border-color: rgb(103 232 249 / 0.35);
}
.border-cyan-300\/40 {
  border-color: rgb(103 232 249 / 0.4);
}
.border-cyan-300\/50 {
  border-color: rgb(103 232 249 / 0.5);
}
.border-cyan-300\/60 {
  border-color: rgb(103 232 249 / 0.6);
}
.border-cyan-400\/30 {
  border-color: rgb(34 211 238 / 0.3);
}
.border-cyan-400\/40 {
  border-color: rgb(34 211 238 / 0.4);
}
.border-cyan-500\/30 {
  border-color: rgb(6 182 212 / 0.3);
}
.border-cyan-500\/40 {
  border-color: rgb(6 182 212 / 0.4);
}
.border-cyan-700 {
  --tw-border-opacity: 1;
  border-color: rgb(14 116 144 / var(--tw-border-opacity, 1));
}
.border-cyan-700\/40 {
  border-color: rgb(14 116 144 / 0.4);
}
.border-cyan-700\/50 {
  border-color: rgb(14 116 144 / 0.5);
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-300\/20 {
  border-color: rgb(110 231 183 / 0.2);
}
.border-emerald-300\/30 {
  border-color: rgb(110 231 183 / 0.3);
}
.border-emerald-300\/35 {
  border-color: rgb(110 231 183 / 0.35);
}
.border-emerald-300\/40 {
  border-color: rgb(110 231 183 / 0.4);
}
.border-emerald-300\/50 {
  border-color: rgb(110 231 183 / 0.5);
}
.border-emerald-300\/60 {
  border-color: rgb(110 231 183 / 0.6);
}
.border-emerald-400\/20 {
  border-color: rgb(52 211 153 / 0.2);
}
.border-emerald-400\/25 {
  border-color: rgb(52 211 153 / 0.25);
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-emerald-400\/35 {
  border-color: rgb(52 211 153 / 0.35);
}
.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-400\/50 {
  border-color: rgb(52 211 153 / 0.5);
}
.border-emerald-400\/60 {
  border-color: rgb(52 211 153 / 0.6);
}
.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-500\/50 {
  border-color: rgb(16 185 129 / 0.5);
}
.border-emerald-600\/40 {
  border-color: rgb(5 150 105 / 0.4);
}
.border-emerald-700\/50 {
  border-color: rgb(4 120 87 / 0.5);
}
.border-emerald-800 {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.border-emerald-800\/40 {
  border-color: rgb(6 95 70 / 0.4);
}
.border-emerald-800\/50 {
  border-color: rgb(6 95 70 / 0.5);
}
.border-fuchsia-300\/20 {
  border-color: rgb(240 171 252 / 0.2);
}
.border-fuchsia-300\/25 {
  border-color: rgb(240 171 252 / 0.25);
}
.border-fuchsia-300\/30 {
  border-color: rgb(240 171 252 / 0.3);
}
.border-fuchsia-300\/40 {
  border-color: rgb(240 171 252 / 0.4);
}
.border-lime-400\/20 {
  border-color: rgb(163 230 53 / 0.2);
}
.border-orange-300\/30 {
  border-color: rgb(253 186 116 / 0.3);
}
.border-orange-500\/40 {
  border-color: rgb(249 115 22 / 0.4);
}
.border-orange-700\/40 {
  border-color: rgb(194 65 12 / 0.4);
}
.border-pink-200\/35 {
  border-color: rgb(251 207 232 / 0.35);
}
.border-pink-200\/40 {
  border-color: rgb(251 207 232 / 0.4);
}
.border-pink-500\/40 {
  border-color: rgb(236 72 153 / 0.4);
}
.border-purple-400\/50 {
  border-color: rgb(192 132 252 / 0.5);
}
.border-red-300\/30 {
  border-color: rgb(252 165 165 / 0.3);
}
.border-red-300\/40 {
  border-color: rgb(252 165 165 / 0.4);
}
.border-red-300\/60 {
  border-color: rgb(252 165 165 / 0.6);
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-red-400\/50 {
  border-color: rgb(248 113 113 / 0.5);
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-rose-300\/30 {
  border-color: rgb(253 164 175 / 0.3);
}
.border-rose-300\/35 {
  border-color: rgb(253 164 175 / 0.35);
}
.border-rose-300\/40 {
  border-color: rgb(253 164 175 / 0.4);
}
.border-rose-300\/50 {
  border-color: rgb(253 164 175 / 0.5);
}
.border-rose-300\/60 {
  border-color: rgb(253 164 175 / 0.6);
}
.border-rose-400\/30 {
  border-color: rgb(251 113 133 / 0.3);
}
.border-rose-400\/60 {
  border-color: rgb(251 113 133 / 0.6);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-rose-500\/40 {
  border-color: rgb(244 63 94 / 0.4);
}
.border-rose-600\/50 {
  border-color: rgb(225 29 72 / 0.5);
}
.border-rose-700\/40 {
  border-color: rgb(190 18 60 / 0.4);
}
.border-sky-300 {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.border-sky-300\/20 {
  border-color: rgb(125 211 252 / 0.2);
}
.border-sky-300\/30 {
  border-color: rgb(125 211 252 / 0.3);
}
.border-sky-300\/40 {
  border-color: rgb(125 211 252 / 0.4);
}
.border-sky-300\/50 {
  border-color: rgb(125 211 252 / 0.5);
}
.border-sky-300\/60 {
  border-color: rgb(125 211 252 / 0.6);
}
.border-sky-400\/30 {
  border-color: rgb(56 189 248 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-violet-300\/30 {
  border-color: rgb(196 181 253 / 0.3);
}
.border-violet-300\/40 {
  border-color: rgb(196 181 253 / 0.4);
}
.border-violet-300\/60 {
  border-color: rgb(196 181 253 / 0.6);
}
.border-violet-400 {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.border-violet-400\/20 {
  border-color: rgb(167 139 250 / 0.2);
}
.border-violet-400\/25 {
  border-color: rgb(167 139 250 / 0.25);
}
.border-violet-400\/30 {
  border-color: rgb(167 139 250 / 0.3);
}
.border-violet-400\/40 {
  border-color: rgb(167 139 250 / 0.4);
}
.border-violet-400\/60 {
  border-color: rgb(167 139 250 / 0.6);
}
.border-violet-500\/30 {
  border-color: rgb(139 92 246 / 0.3);
}
.border-violet-500\/40 {
  border-color: rgb(139 92 246 / 0.4);
}
.border-violet-500\/60 {
  border-color: rgb(139 92 246 / 0.6);
}
.border-violet-700 {
  --tw-border-opacity: 1;
  border-color: rgb(109 40 217 / var(--tw-border-opacity, 1));
}
.border-violet-700\/40 {
  border-color: rgb(109 40 217 / 0.4);
}
.border-violet-700\/50 {
  border-color: rgb(109 40 217 / 0.5);
}
.border-violet-800\/40 {
  border-color: rgb(91 33 182 / 0.4);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}
.border-white\/60 {
  border-color: rgb(255 255 255 / 0.6);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.border-yellow-300\/15 {
  border-color: rgb(253 224 71 / 0.15);
}
.border-yellow-300\/35 {
  border-color: rgb(253 224 71 / 0.35);
}
.border-yellow-400\/50 {
  border-color: rgb(250 204 21 / 0.5);
}
.border-zinc-200\/30 {
  border-color: rgb(228 228 231 / 0.3);
}
.border-zinc-300\/30 {
  border-color: rgb(212 212 216 / 0.3);
}
.border-zinc-400\/30 {
  border-color: rgb(161 161 170 / 0.3);
}
.border-zinc-500\/60 {
  border-color: rgb(113 113 122 / 0.6);
}
.border-zinc-600 {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.border-zinc-600\/40 {
  border-color: rgb(82 82 91 / 0.4);
}
.border-zinc-600\/50 {
  border-color: rgb(82 82 91 / 0.5);
}
.border-zinc-700 {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.border-zinc-700\/30 {
  border-color: rgb(63 63 70 / 0.3);
}
.border-zinc-700\/40 {
  border-color: rgb(63 63 70 / 0.4);
}
.border-zinc-700\/50 {
  border-color: rgb(63 63 70 / 0.5);
}
.border-zinc-700\/60 {
  border-color: rgb(63 63 70 / 0.6);
}
.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-zinc-800\/50 {
  border-color: rgb(39 39 42 / 0.5);
}
.border-zinc-800\/60 {
  border-color: rgb(39 39 42 / 0.6);
}
.bg-\[\#060606\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 6 6 / var(--tw-bg-opacity, 1));
}
.bg-\[\#090909\] {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 9 / var(--tw-bg-opacity, 1));
}
.bg-\[\#090c10\] {
  --tw-bg-opacity: 1;
  background-color: rgb(9 12 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0b0c0b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 12 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0d0e0d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 14 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0d0f0d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 15 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f0f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));
}
.bg-\[\#101010\] {
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#111111\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ffc300\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 195 0 / var(--tw-bg-opacity, 1));
}
.bg-amber-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.bg-amber-300\/10 {
  background-color: rgb(252 211 77 / 0.1);
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-400\/15 {
  background-color: rgb(251 191 36 / 0.15);
}
.bg-amber-400\/20 {
  background-color: rgb(251 191 36 / 0.2);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-500\/25 {
  background-color: rgb(245 158 11 / 0.25);
}
.bg-amber-500\/30 {
  background-color: rgb(245 158 11 / 0.3);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-amber-500\/80 {
  background-color: rgb(245 158 11 / 0.8);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.bg-amber-700\/10 {
  background-color: rgb(180 83 9 / 0.1);
}
.bg-amber-700\/40 {
  background-color: rgb(180 83 9 / 0.4);
}
.bg-amber-900\/10 {
  background-color: rgb(120 53 15 / 0.1);
}
.bg-amber-900\/20 {
  background-color: rgb(120 53 15 / 0.2);
}
.bg-amber-900\/25 {
  background-color: rgb(120 53 15 / 0.25);
}
.bg-amber-900\/30 {
  background-color: rgb(120 53 15 / 0.3);
}
.bg-amber-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1));
}
.bg-amber-950\/15 {
  background-color: rgb(69 26 3 / 0.15);
}
.bg-amber-950\/20 {
  background-color: rgb(69 26 3 / 0.2);
}
.bg-amber-950\/25 {
  background-color: rgb(69 26 3 / 0.25);
}
.bg-amber-950\/30 {
  background-color: rgb(69 26 3 / 0.3);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/0 {
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/35 {
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/85 {
  background-color: rgb(0 0 0 / 0.85);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-black\/95 {
  background-color: rgb(0 0 0 / 0.95);
}
.bg-blue-400\/10 {
  background-color: rgb(96 165 250 / 0.1);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-500\/5 {
  background-color: rgb(59 130 246 / 0.05);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-900\/20 {
  background-color: rgb(30 58 138 / 0.2);
}
.bg-cyan-300\/10 {
  background-color: rgb(103 232 249 / 0.1);
}
.bg-cyan-400\/20 {
  background-color: rgb(34 211 238 / 0.2);
}
.bg-cyan-500\/10 {
  background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15);
}
.bg-cyan-500\/20 {
  background-color: rgb(6 182 212 / 0.2);
}
.bg-cyan-500\/5 {
  background-color: rgb(6 182 212 / 0.05);
}
.bg-cyan-600\/30 {
  background-color: rgb(8 145 178 / 0.3);
}
.bg-cyan-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}
.bg-cyan-700\/10 {
  background-color: rgb(14 116 144 / 0.1);
}
.bg-cyan-700\/40 {
  background-color: rgb(14 116 144 / 0.4);
}
.bg-cyan-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(21 94 117 / var(--tw-bg-opacity, 1));
}
.bg-cyan-900\/25 {
  background-color: rgb(22 78 99 / 0.25);
}
.bg-cyan-950\/20 {
  background-color: rgb(8 51 68 / 0.2);
}
.bg-cyan-950\/25 {
  background-color: rgb(8 51 68 / 0.25);
}
.bg-cyan-950\/30 {
  background-color: rgb(8 51 68 / 0.3);
}
.bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/10 {
  background-color: rgb(52 211 153 / 0.1);
}
.bg-emerald-400\/20 {
  background-color: rgb(52 211 153 / 0.2);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/25 {
  background-color: rgb(16 185 129 / 0.25);
}
.bg-emerald-500\/30 {
  background-color: rgb(16 185 129 / 0.3);
}
.bg-emerald-500\/5 {
  background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600\/20 {
  background-color: rgb(5 150 105 / 0.2);
}
.bg-emerald-600\/30 {
  background-color: rgb(5 150 105 / 0.3);
}
.bg-emerald-600\/40 {
  background-color: rgb(5 150 105 / 0.4);
}
.bg-emerald-600\/5 {
  background-color: rgb(5 150 105 / 0.05);
}
.bg-emerald-600\/50 {
  background-color: rgb(5 150 105 / 0.5);
}
.bg-emerald-600\/90 {
  background-color: rgb(5 150 105 / 0.9);
}
.bg-emerald-700\/40 {
  background-color: rgb(4 120 87 / 0.4);
}
.bg-emerald-800\/40 {
  background-color: rgb(6 95 70 / 0.4);
}
.bg-emerald-900\/10 {
  background-color: rgb(6 78 59 / 0.1);
}
.bg-emerald-900\/20 {
  background-color: rgb(6 78 59 / 0.2);
}
.bg-emerald-900\/25 {
  background-color: rgb(6 78 59 / 0.25);
}
.bg-emerald-900\/30 {
  background-color: rgb(6 78 59 / 0.3);
}
.bg-emerald-900\/35 {
  background-color: rgb(6 78 59 / 0.35);
}
.bg-emerald-900\/40 {
  background-color: rgb(6 78 59 / 0.4);
}
.bg-emerald-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
}
.bg-emerald-950\/15 {
  background-color: rgb(2 44 34 / 0.15);
}
.bg-emerald-950\/20 {
  background-color: rgb(2 44 34 / 0.2);
}
.bg-emerald-950\/25 {
  background-color: rgb(2 44 34 / 0.25);
}
.bg-emerald-950\/30 {
  background-color: rgb(2 44 34 / 0.3);
}
.bg-fuchsia-400\/10 {
  background-color: rgb(232 121 249 / 0.1);
}
.bg-fuchsia-400\/20 {
  background-color: rgb(232 121 249 / 0.2);
}
.bg-fuchsia-500\/10 {
  background-color: rgb(217 70 239 / 0.1);
}
.bg-fuchsia-600\/30 {
  background-color: rgb(192 38 211 / 0.3);
}
.bg-lime-950\/20 {
  background-color: rgb(26 46 5 / 0.2);
}
.bg-orange-400\/10 {
  background-color: rgb(251 146 60 / 0.1);
}
.bg-orange-500\/5 {
  background-color: rgb(249 115 22 / 0.05);
}
.bg-orange-700\/40 {
  background-color: rgb(194 65 12 / 0.4);
}
.bg-pink-500\/20 {
  background-color: rgb(236 72 153 / 0.2);
}
.bg-pink-500\/35 {
  background-color: rgb(236 72 153 / 0.35);
}
.bg-pink-500\/5 {
  background-color: rgb(236 72 153 / 0.05);
}
.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1);
}
.bg-red-500\/90 {
  background-color: rgb(239 68 68 / 0.9);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}
.bg-red-950\/70 {
  background-color: rgb(69 10 10 / 0.7);
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-rose-500\/20 {
  background-color: rgb(244 63 94 / 0.2);
}
.bg-rose-500\/30 {
  background-color: rgb(244 63 94 / 0.3);
}
.bg-rose-500\/5 {
  background-color: rgb(244 63 94 / 0.05);
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-rose-600\/35 {
  background-color: rgb(225 29 72 / 0.35);
}
.bg-rose-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.bg-rose-700\/30 {
  background-color: rgb(190 18 60 / 0.3);
}
.bg-rose-700\/40 {
  background-color: rgb(190 18 60 / 0.4);
}
.bg-rose-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1));
}
.bg-rose-900\/20 {
  background-color: rgb(136 19 55 / 0.2);
}
.bg-sky-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
}
.bg-sky-400\/10 {
  background-color: rgb(56 189 248 / 0.1);
}
.bg-sky-400\/20 {
  background-color: rgb(56 189 248 / 0.2);
}
.bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-sky-500\/20 {
  background-color: rgb(14 165 233 / 0.2);
}
.bg-sky-500\/35 {
  background-color: rgb(14 165 233 / 0.35);
}
.bg-sky-500\/40 {
  background-color: rgb(14 165 233 / 0.4);
}
.bg-sky-600\/90 {
  background-color: rgb(2 132 199 / 0.9);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-400\/20 {
  background-color: rgb(167 139 250 / 0.2);
}
.bg-violet-500\/10 {
  background-color: rgb(139 92 246 / 0.1);
}
.bg-violet-500\/15 {
  background-color: rgb(139 92 246 / 0.15);
}
.bg-violet-500\/20 {
  background-color: rgb(139 92 246 / 0.2);
}
.bg-violet-500\/25 {
  background-color: rgb(139 92 246 / 0.25);
}
.bg-violet-500\/30 {
  background-color: rgb(139 92 246 / 0.3);
}
.bg-violet-500\/40 {
  background-color: rgb(139 92 246 / 0.4);
}
.bg-violet-500\/5 {
  background-color: rgb(139 92 246 / 0.05);
}
.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-violet-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.bg-violet-700\/10 {
  background-color: rgb(109 40 217 / 0.1);
}
.bg-violet-700\/40 {
  background-color: rgb(109 40 217 / 0.4);
}
.bg-violet-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
}
.bg-violet-900\/10 {
  background-color: rgb(76 29 149 / 0.1);
}
.bg-violet-900\/20 {
  background-color: rgb(76 29 149 / 0.2);
}
.bg-violet-900\/50 {
  background-color: rgb(76 29 149 / 0.5);
}
.bg-violet-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(46 16 101 / var(--tw-bg-opacity, 1));
}
.bg-violet-950\/10 {
  background-color: rgb(46 16 101 / 0.1);
}
.bg-violet-950\/15 {
  background-color: rgb(46 16 101 / 0.15);
}
.bg-violet-950\/20 {
  background-color: rgb(46 16 101 / 0.2);
}
.bg-violet-950\/25 {
  background-color: rgb(46 16 101 / 0.25);
}
.bg-violet-950\/30 {
  background-color: rgb(46 16 101 / 0.3);
}
.bg-violet-950\/60 {
  background-color: rgb(46 16 101 / 0.6);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/35 {
  background-color: rgb(255 255 255 / 0.35);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-300\/10 {
  background-color: rgb(253 224 71 / 0.1);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200\/5 {
  background-color: rgb(228 228 231 / 0.05);
}
.bg-zinc-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.bg-zinc-600\/40 {
  background-color: rgb(82 82 91 / 0.4);
}
.bg-zinc-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.bg-zinc-700\/50 {
  background-color: rgb(63 63 70 / 0.5);
}
.bg-zinc-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-zinc-800\/30 {
  background-color: rgb(39 39 42 / 0.3);
}
.bg-zinc-800\/40 {
  background-color: rgb(39 39 42 / 0.4);
}
.bg-zinc-800\/50 {
  background-color: rgb(39 39 42 / 0.5);
}
.bg-zinc-800\/60 {
  background-color: rgb(39 39 42 / 0.6);
}
.bg-zinc-800\/80 {
  background-color: rgb(39 39 42 / 0.8);
}
.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900\/40 {
  background-color: rgb(24 24 27 / 0.4);
}
.bg-zinc-900\/50 {
  background-color: rgb(24 24 27 / 0.5);
}
.bg-zinc-900\/60 {
  background-color: rgb(24 24 27 / 0.6);
}
.bg-zinc-900\/70 {
  background-color: rgb(24 24 27 / 0.7);
}
.bg-zinc-900\/80 {
  background-color: rgb(24 24 27 / 0.8);
}
.bg-zinc-900\/90 {
  background-color: rgb(24 24 27 / 0.9);
}
.bg-zinc-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.bg-zinc-950\/80 {
  background-color: rgb(9 9 11 / 0.8);
}
.bg-zinc-950\/95 {
  background-color: rgb(9 9 11 / 0.95);
}
.bg-\[radial-gradient\(circle_at_top\2c _\#231f10_0\%\2c _\#090909_42\%\)\] {
  background-image: radial-gradient(circle at top, #231f10 0%, #090909 42%);
}
.bg-\[radial-gradient\(circle_at_top\2c _\#231f10_0\%\2c _\#090909_50\%\)\] {
  background-image: radial-gradient(circle at top, #231f10 0%, #090909 50%);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#090c10\] {
  --tw-gradient-from: #090c10 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(9 12 16 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0d0f0d\] {
  --tw-gradient-from: #0d0f0d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 15 13 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0f0f0f\] {
  --tw-gradient-from: #0f0f0f var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 15 15 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#141414\] {
  --tw-gradient-from: #141414 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 20 20 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#151515\] {
  --tw-gradient-from: #151515 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 21 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-200\/15 {
  --tw-gradient-from: rgb(253 230 138 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-300 {
  --tw-gradient-from: #fcd34d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-300\/10 {
  --tw-gradient-from: rgb(252 211 77 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-300\/15 {
  --tw-gradient-from: rgb(252 211 77 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-300\/20 {
  --tw-gradient-from: rgb(252 211 77 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400\/10 {
  --tw-gradient-from: rgb(251 191 36 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400\/15 {
  --tw-gradient-from: rgb(251 191 36 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-950\/40 {
  --tw-gradient-from: rgb(8 51 68 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 51 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-300 {
  --tw-gradient-from: #6ee7b7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(110 231 183 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400\/10 {
  --tw-gradient-from: rgb(52 211 153 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-700\/70 {
  --tw-gradient-from: rgb(4 120 87 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-900\/60 {
  --tw-gradient-from: rgb(6 78 59 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-950\/90 {
  --tw-gradient-from: rgb(2 44 34 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 44 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-300 {
  --tw-gradient-from: #f0abfc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 171 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-400\/10 {
  --tw-gradient-from: rgb(232 121 249 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 121 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-400\/15 {
  --tw-gradient-from: rgb(232 121 249 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 121 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-300\/25 {
  --tw-gradient-from: rgb(249 168 212 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-950\/45 {
  --tw-gradient-from: rgb(76 5 25 / 0.45) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(76 5 25 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-400\/10 {
  --tw-gradient-from: rgb(56 189 248 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500\/25 {
  --tw-gradient-from: rgb(139 92 246 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-100\/30 {
  --tw-gradient-from: rgb(244 244 245 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-800 {
  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-800\/80 {
  --tw-gradient-from: rgb(39 39 42 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-900\/90 {
  --tw-gradient-from: rgb(24 24 27 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#090c10\]\/90 {
  --tw-gradient-to: rgb(9 12 16 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(9 12 16 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#0f0f0f\] {
  --tw-gradient-to: rgb(15 15 15 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0f0f0f var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#101010\] {
  --tw-gradient-to: rgb(16 16 16 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #101010 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-100\/5 {
  --tw-gradient-to: rgb(254 243 199 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(254 243 199 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-300 {
  --tw-gradient-to: rgb(252 211 77 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fcd34d var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-300\/10 {
  --tw-gradient-to: rgb(252 211 77 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(252 211 77 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/45 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-fuchsia-400\/10 {
  --tw-gradient-to: rgb(232 121 249 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(232 121 249 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-fuchsia-500\/15 {
  --tw-gradient-to: rgb(217 70 239 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(217 70 239 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-lime-400 {
  --tw-gradient-to: rgb(163 230 53 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #a3e635 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-400 {
  --tw-gradient-to: rgb(251 146 60 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-zinc-900 {
  --tw-gradient-to: rgb(24 24 27 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#090c10\]\/55 {
  --tw-gradient-to: rgb(9 12 16 / 0.55) var(--tw-gradient-to-position);
}
.to-\[\#0b0b0b\] {
  --tw-gradient-to: #0b0b0b var(--tw-gradient-to-position);
}
.to-amber-300 {
  --tw-gradient-to: #fcd34d var(--tw-gradient-to-position);
}
.to-amber-500\/20 {
  --tw-gradient-to: rgb(245 158 11 / 0.2) var(--tw-gradient-to-position);
}
.to-amber-900\/40 {
  --tw-gradient-to: rgb(120 53 15 / 0.4) var(--tw-gradient-to-position);
}
.to-black\/10 {
  --tw-gradient-to: rgb(0 0 0 / 0.1) var(--tw-gradient-to-position);
}
.to-black\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0.3) var(--tw-gradient-to-position);
}
.to-black\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.to-black\/50 {
  --tw-gradient-to: rgb(0 0 0 / 0.5) var(--tw-gradient-to-position);
}
.to-black\/85 {
  --tw-gradient-to: rgb(0 0 0 / 0.85) var(--tw-gradient-to-position);
}
.to-black\/95 {
  --tw-gradient-to: rgb(0 0 0 / 0.95) var(--tw-gradient-to-position);
}
.to-cyan-300 {
  --tw-gradient-to: #67e8f9 var(--tw-gradient-to-position);
}
.to-emerald-900\/80 {
  --tw-gradient-to: rgb(6 78 59 / 0.8) var(--tw-gradient-to-position);
}
.to-rose-500\/35 {
  --tw-gradient-to: rgb(244 63 94 / 0.35) var(--tw-gradient-to-position);
}
.to-sky-300 {
  --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white\/35 {
  --tw-gradient-to: rgb(255 255 255 / 0.35) var(--tw-gradient-to-position);
}
.to-white\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
}
.to-yellow-300 {
  --tw-gradient-to: #fde047 var(--tw-gradient-to-position);
}
.to-yellow-400 {
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.to-zinc-900 {
  --tw-gradient-to: #18181b var(--tw-gradient-to-position);
}
.to-zinc-950 {
  --tw-gradient-to: #09090b var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.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;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-56 {
  padding-bottom: 14rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.05em\] {
  letter-spacing: 0.05em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#ffc300\] {
  --tw-text-opacity: 1;
  color: rgb(255 195 0 / var(--tw-text-opacity, 1));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-400\/60 {
  color: rgb(251 191 36 / 0.6);
}
.text-amber-400\/70 {
  color: rgb(251 191 36 / 0.7);
}
.text-amber-400\/80 {
  color: rgb(251 191 36 / 0.8);
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-500\/70 {
  color: rgb(245 158 11 / 0.7);
}
.text-amber-600\/80 {
  color: rgb(217 119 6 / 0.8);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-cyan-100 {
  --tw-text-opacity: 1;
  color: rgb(207 250 254 / var(--tw-text-opacity, 1));
}
.text-cyan-200 {
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / var(--tw-text-opacity, 1));
}
.text-cyan-200\/80 {
  color: rgb(165 243 252 / 0.8);
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-500 {
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1));
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-fuchsia-200 {
  --tw-text-opacity: 1;
  color: rgb(245 208 254 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-lime-200 {
  --tw-text-opacity: 1;
  color: rgb(217 249 157 / var(--tw-text-opacity, 1));
}
.text-lime-300 {
  --tw-text-opacity: 1;
  color: rgb(190 242 100 / var(--tw-text-opacity, 1));
}
.text-lime-400 {
  --tw-text-opacity: 1;
  color: rgb(163 230 53 / var(--tw-text-opacity, 1));
}
.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-pink-100 {
  --tw-text-opacity: 1;
  color: rgb(252 231 243 / var(--tw-text-opacity, 1));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-rose-100 {
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}
.text-rose-200 {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-sky-100 {
  --tw-text-opacity: 1;
  color: rgb(224 242 254 / var(--tw-text-opacity, 1));
}
.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-violet-100 {
  --tw-text-opacity: 1;
  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
}
.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-amber-400 {
  accent-color: #fbbf24;
}
.accent-emerald-400 {
  accent-color: #34d399;
}
.accent-emerald-500 {
  accent-color: #10b981;
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-12px_60px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 -12px 60px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 -12px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_24px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
  --tw-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 -8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(252\2c 211\2c 77\2c 0\.25\)\] {
  --tw-shadow: 0 0 0 3px rgba(252,211,77,0.25);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_4px_rgba\(52\2c 211\2c 153\2c 0\.15\)\] {
  --tw-shadow: 0 0 0 4px rgba(52,211,153,0.15);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_6px_rgba\(252\2c 211\2c 77\2c 0\.20\)\] {
  --tw-shadow: 0 0 0 6px rgba(252,211,77,0.20);
  --tw-shadow-colored: 0 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(251\2c 191\2c 36\2c 0\.12\)\] {
  --tw-shadow: 0 0 12px rgba(251,191,36,0.12);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(252\2c 211\2c 77\2c 0\.18\)\] {
  --tw-shadow: 0 0 12px rgba(252,211,77,0.18);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_20px_rgba\(251\2c 191\2c 36\2c 0\.2\)\] {
  --tw-shadow: 0 0 20px rgba(251,191,36,0.2);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_25px_rgba\(16\2c 185\2c 129\2c 0\.2\)\] {
  --tw-shadow: 0 0 25px rgba(16,185,129,0.2);
  --tw-shadow-colored: 0 0 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_25px_rgba\(255\2c 195\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 0 25px rgba(255,195,0,0.35);
  --tw-shadow-colored: 0 0 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_26px_rgba\(251\2c 191\2c 36\2c 0\.2\)\] {
  --tw-shadow: 0 0 26px rgba(251,191,36,0.2);
  --tw-shadow-colored: 0 0 26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 0 30px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_30px_rgba\(251\2c 191\2c 36\2c 0\.12\)\] {
  --tw-shadow: 0 0 30px rgba(251,191,36,0.12);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_40px_rgba\(245\2c 158\2c 11\2c 0\.08\)\] {
  --tw-shadow: 0 0 40px rgba(245,158,11,0.08);
  --tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_60px_rgba\(245\2c 158\2c 11\2c 0\.1\)\] {
  --tw-shadow: 0 0 60px rgba(245,158,11,0.1);
  --tw-shadow-colored: 0 0 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_60px_rgba\(245\2c 158\2c 11\2c 0\.16\)\] {
  --tw-shadow: 0 0 60px rgba(245,158,11,0.16);
  --tw-shadow-colored: 0 0 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(251\2c 191\2c 36\2c 0\.6\)\] {
  --tw-shadow: 0 0 8px rgba(251,191,36,0.6);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_14px_30px_rgba\(0\2c 0\2c 0\2c 0\.28\)\] {
  --tw-shadow: 0 14px 30px rgba(0,0,0,0.28);
  --tw-shadow-colored: 0 14px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_45px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
  --tw-shadow: 0 18px 45px rgba(0,0,0,0.4);
  --tw-shadow-colored: 0 18px 45px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_50px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 18px 50px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 18px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 20px 60px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
  --tw-shadow: 0 20px 60px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 20px 60px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 20px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_80px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 20px 80px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 20px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_80px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 20px 80px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 20px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_80px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-shadow: 0 20px 80px rgba(0,0,0,0.65);
  --tw-shadow-colored: 0 20px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_80px_rgba\(0\2c 0\2c 0\2c 0\.7\)\] {
  --tw-shadow: 0 20px 80px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 20px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.65);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_rgba\(0\2c 0\2c 0\2c 0\.7\)\] {
  --tw-shadow: 0 24px 80px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 24px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_80px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 30px 80px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 30px 80px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/40 {
  --tw-shadow-color: rgb(0 0 0 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/60 {
  --tw-shadow-color: rgb(0 0 0 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-amber-300\/20 {
  --tw-ring-color: rgb(252 211 77 / 0.2);
}
.ring-amber-300\/40 {
  --tw-ring-color: rgb(252 211 77 / 0.4);
}
.ring-amber-300\/75 {
  --tw-ring-color: rgb(252 211 77 / 0.75);
}
.ring-amber-400\/30 {
  --tw-ring-color: rgb(251 191 36 / 0.3);
}
.ring-fuchsia-300\/75 {
  --tw-ring-color: rgb(240 171 252 / 0.75);
}
.ring-orange-400\/70 {
  --tw-ring-color: rgb(251 146 60 / 0.7);
}
.ring-red-500\/80 {
  --tw-ring-color: rgb(239 68 68 / 0.8);
}
.ring-rose-400\/70 {
  --tw-ring-color: rgb(251 113 133 / 0.7);
}
.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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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);
}
.blur-\[4px\] {
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_25px_rgba\(255\2c 195\2c 0\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0 0 25px rgba(255,195,0,0.25));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_14px_24px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 14px 24px rgba(0,0,0,0.6));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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 {
  --tw-backdrop-blur: blur(8px);
  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-blur-md {
  --tw-backdrop-blur: blur(12px);
  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-blur-sm {
  --tw-backdrop-blur: blur(4px);
  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 {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.contain-style {
  --tw-contain-style: style;
  contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
}
.\[grid-template-columns\:48px_repeat\(3\2c 72px\)\] {
  grid-template-columns: 48px repeat(3,72px);
}
.placeholder\:text-zinc-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.placeholder\:text-zinc-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.placeholder\:text-zinc-600::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.placeholder\:text-zinc-600::placeholder {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:inset-x-0::before {
  content: var(--tw-content);
  left: 0px;
  right: 0px;
}
.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}
.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}
.before\:bg-gradient-to-r::before {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.before\:via-amber-300\/70::before {
  content: var(--tw-content);
  --tw-gradient-to: rgb(252 211 77 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(252 211 77 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-125:hover {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#ffc300\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 195 0 / var(--tw-border-opacity, 1));
}
.hover\:border-amber-300\/40:hover {
  border-color: rgb(252 211 77 / 0.4);
}
.hover\:border-amber-300\/60:hover {
  border-color: rgb(252 211 77 / 0.6);
}
.hover\:border-amber-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.hover\:border-amber-500\/40:hover {
  border-color: rgb(245 158 11 / 0.4);
}
.hover\:border-amber-500\/50:hover {
  border-color: rgb(245 158 11 / 0.5);
}
.hover\:border-blue-500\/40:hover {
  border-color: rgb(59 130 246 / 0.4);
}
.hover\:border-emerald-400\/50:hover {
  border-color: rgb(52 211 153 / 0.5);
}
.hover\:border-emerald-400\/60:hover {
  border-color: rgb(52 211 153 / 0.6);
}
.hover\:border-violet-400\/50:hover {
  border-color: rgb(167 139 250 / 0.5);
}
.hover\:border-violet-500\/40:hover {
  border-color: rgb(139 92 246 / 0.4);
}
.hover\:border-yellow-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#ffc300\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 195 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#ffd65a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 90 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-300\/20:hover {
  background-color: rgb(252 211 77 / 0.2);
}
.hover\:bg-amber-300\/5:hover {
  background-color: rgb(252 211 77 / 0.05);
}
.hover\:bg-amber-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-400\/10:hover {
  background-color: rgb(251 191 36 / 0.1);
}
.hover\:bg-amber-400\/20:hover {
  background-color: rgb(251 191 36 / 0.2);
}
.hover\:bg-amber-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-500\/25:hover {
  background-color: rgb(245 158 11 / 0.25);
}
.hover\:bg-amber-500\/30:hover {
  background-color: rgb(245 158 11 / 0.3);
}
.hover\:bg-amber-500\/35:hover {
  background-color: rgb(245 158 11 / 0.35);
}
.hover\:bg-amber-500\/5:hover {
  background-color: rgb(245 158 11 / 0.05);
}
.hover\:bg-amber-700\/20:hover {
  background-color: rgb(180 83 9 / 0.2);
}
.hover\:bg-amber-900\/40:hover {
  background-color: rgb(120 53 15 / 0.4);
}
.hover\:bg-black\/65:hover {
  background-color: rgb(0 0 0 / 0.65);
}
.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}
.hover\:bg-black\/75:hover {
  background-color: rgb(0 0 0 / 0.75);
}
.hover\:bg-blue-400\/20:hover {
  background-color: rgb(96 165 250 / 0.2);
}
.hover\:bg-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500\/30:hover {
  background-color: rgb(6 182 212 / 0.3);
}
.hover\:bg-cyan-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-700\/20:hover {
  background-color: rgb(14 116 144 / 0.2);
}
.hover\:bg-cyan-900\/40:hover {
  background-color: rgb(22 78 99 / 0.4);
}
.hover\:bg-emerald-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500\/20:hover {
  background-color: rgb(16 185 129 / 0.2);
}
.hover\:bg-emerald-500\/35:hover {
  background-color: rgb(16 185 129 / 0.35);
}
.hover\:bg-emerald-700\/40:hover {
  background-color: rgb(4 120 87 / 0.4);
}
.hover\:bg-emerald-800\/50:hover {
  background-color: rgb(6 95 70 / 0.5);
}
.hover\:bg-emerald-900\/40:hover {
  background-color: rgb(6 78 59 / 0.4);
}
.hover\:bg-emerald-950\/40:hover {
  background-color: rgb(2 44 34 / 0.4);
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-950\/30:hover {
  background-color: rgb(69 10 10 / 0.3);
}
.hover\:bg-rose-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500\/30:hover {
  background-color: rgb(244 63 94 / 0.3);
}
.hover\:bg-rose-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-700\/50:hover {
  background-color: rgb(190 18 60 / 0.5);
}
.hover\:bg-sky-500\/30:hover {
  background-color: rgb(14 165 233 / 0.3);
}
.hover\:bg-sky-500\/50:hover {
  background-color: rgb(14 165 233 / 0.5);
}
.hover\:bg-violet-500\/30:hover {
  background-color: rgb(139 92 246 / 0.3);
}
.hover\:bg-violet-500\/35:hover {
  background-color: rgb(139 92 246 / 0.35);
}
.hover\:bg-violet-500\/45:hover {
  background-color: rgb(139 92 246 / 0.45);
}
.hover\:bg-violet-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700\/20:hover {
  background-color: rgb(109 40 217 / 0.2);
}
.hover\:bg-violet-950\/20:hover {
  background-color: rgb(46 16 101 / 0.2);
}
.hover\:bg-violet-950\/40:hover {
  background-color: rgb(46 16 101 / 0.4);
}
.hover\:bg-violet-950\/60:hover {
  background-color: rgb(46 16 101 / 0.6);
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-yellow-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-700\/60:hover {
  background-color: rgb(63 63 70 / 0.6);
}
.hover\:bg-zinc-700\/80:hover {
  background-color: rgb(63 63 70 / 0.8);
}
.hover\:bg-zinc-800\/30:hover {
  background-color: rgb(39 39 42 / 0.3);
}
.hover\:bg-zinc-800\/50:hover {
  background-color: rgb(39 39 42 / 0.5);
}
.hover\:bg-zinc-800\/60:hover {
  background-color: rgb(39 39 42 / 0.6);
}
.hover\:from-emerald-600\/80:hover {
  --tw-gradient-from: rgb(5 150 105 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-zinc-700:hover {
  --tw-gradient-from: #3f3f46 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 63 70 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-emerald-800:hover {
  --tw-gradient-to: #065f46 var(--tw-gradient-to-position);
}
.hover\:to-zinc-800:hover {
  --tw-gradient-to: #27272a var(--tw-gradient-to-position);
}
.hover\:text-\[\#ffc300\]:hover {
  --tw-text-opacity: 1;
  color: rgb(255 195 0 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-300:hover {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-300:hover {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.hover\:text-violet-300:hover {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-200:hover {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-300:hover {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-400:hover {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:shadow-\[0_0_20px_rgba\(251\2c 191\2c 36\2c 0\.14\)\]:hover {
  --tw-shadow: 0 0 20px rgba(251,191,36,0.14);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_25px_rgba\(251\2c 191\2c 36\2c 0\.15\)\]:hover {
  --tw-shadow: 0 0 25px rgba(251,191,36,0.15);
  --tw-shadow-colored: 0 0 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-violet-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.focus\:border-violet-400\/50:focus {
  border-color: rgb(167 139 250 / 0.5);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-amber-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-35:disabled {
  opacity: 0.35;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 640px) {

  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .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\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .sm\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}
@media (min-width: 768px) {

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

  .md\:order-2 {
    order: 2;
  }

  .md\:order-3 {
    order: 3;
  }

  .md\:order-4 {
    order: 4;
  }

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

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

  .md\:h-20 {
    height: 5rem;
  }

  .md\:h-36 {
    height: 9rem;
  }

  .md\:h-56 {
    height: 14rem;
  }

  .md\:h-96 {
    height: 24rem;
  }

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

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

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

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

  .md\:max-h-28 {
    max-height: 7rem;
  }

  .md\:w-36 {
    width: 9rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-96 {
    width: 24rem;
  }

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

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

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

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

  .md\:max-w-sm {
    max-width: 24rem;
  }

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

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

  .md\:grid-cols-\[1\.15fr_1fr_1\.15fr\] {
    grid-template-columns: 1.15fr 1fr 1.15fr;
  }

  .md\:grid-cols-\[1\.2fr_1fr_1\.5fr\] {
    grid-template-columns: 1.2fr 1fr 1.5fr;
  }

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

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

  .md\:gap-2 {
    gap: 0.5rem;
  }

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

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

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:\[grid-template-columns\:56px_repeat\(3\2c 84px\)\] {
    grid-template-columns: 56px repeat(3,84px);
  }
}
@media (min-width: 1024px) {

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

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

  .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-\[340px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 340px minmax(0,1fr);
  }

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

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }
}
@media (min-width: 1280px) {

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

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.\[\&\:\:-webkit-media-controls\]\:scale-90::-webkit-media-controls {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* ══════════════════════════════════════════════════════════════════
   ── KABAL GLOBAL STYLES ─────────────────────────────────────────
   Loaded once in main.jsx. Provides smooth scroll, typography,
   signature animations, and base resets for the entire app.
   ══════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

html, body {
  background: #0D0D0D;
  color: #fff;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Scrollbar — Jungle gold ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
  background: rgba(245, 166, 35, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.4);
}

/* ── Selection color ── */
::-moz-selection {
  background: rgba(245, 166, 35, 0.3);
  color: #fff;
}
::selection {
  background: rgba(245, 166, 35, 0.3);
  color: #fff;
}

/* ── Focus ring — accessible gold ── */
:focus-visible {
  outline: 2px solid rgba(245, 166, 35, 0.6);
  outline-offset: 2px;
}

/* ── Typography classes ── */
.font-display { font-family: 'Cinzel Decorative', serif; }
.font-heading { font-family: 'Cinzel', serif; }
.font-body    { font-family: 'Inter', sans-serif; }
.font-data    { font-family: 'JetBrains Mono', 'Space Mono', monospace; }

.text-gold    { color: #F5A623; }
.text-muted   { color: #888; }
.text-subtle  { color: #555; }

/* ── Signature Animations ── */
@keyframes kabal-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kabal-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kabal-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kabal-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kabal-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kabal-gold-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 166, 35, 0.2); }
  50%      { box-shadow: 0 0 40px rgba(245, 166, 35, 0.5); }
}
@keyframes kabal-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.3)); }
  50%      { filter: drop-shadow(0 0 20px rgba(245, 166, 35, 0.6)); }
}
@keyframes kabal-breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes kabal-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes kabal-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.2); }
}
@keyframes kabal-count-flash {
  0%   { color: #F5A623; text-shadow: 0 0 8px rgba(245, 166, 35, 0.6); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes kabal-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes kabal-confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(720deg); opacity: 0; }
}

/* ── Utility classes ── */
.kabal-fade-in   { animation: kabal-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.kabal-fade-up   { animation: kabal-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.kabal-scale-in  { animation: kabal-scale-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.kabal-gold-pulse { animation: kabal-gold-pulse 3s ease-in-out infinite; }
.kabal-glow       { animation: kabal-glow 3s ease-in-out infinite; }
.kabal-breathe    { animation: kabal-breathe 4s ease-in-out infinite; }

/* Staggered fade-in for lists */
.kabal-stagger > * {
  animation: kabal-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.kabal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.kabal-stagger > *:nth-child(2) { animation-delay: 60ms; }
.kabal-stagger > *:nth-child(3) { animation-delay: 120ms; }
.kabal-stagger > *:nth-child(4) { animation-delay: 180ms; }
.kabal-stagger > *:nth-child(5) { animation-delay: 240ms; }
.kabal-stagger > *:nth-child(6) { animation-delay: 300ms; }
.kabal-stagger > *:nth-child(7) { animation-delay: 360ms; }
.kabal-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ── Shimmer loading placeholder ── */
.kabal-shimmer {
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: kabal-shimmer 1.5s ease-in-out infinite;
}

/* ── Live indicator ── */
.kabal-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #EF4444;
  animation: kabal-dot-pulse 1.5s ease-in-out infinite;
  margin-right: 6px;
}

/* ── Gold divider ── */
.kabal-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.3), transparent);
  border: none;
  margin: 24px 0;
}

/* ── Film grain overlay (opt-in) ── */
.kabal-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Responsive helpers ── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ── Button hover glow ── */
.kabal-btn-gold {
  background: #F5A623;
  color: #000;
  border: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
}
.kabal-btn-gold:hover {
  box-shadow: 0 0 40px rgba(245, 166, 35, 0.6);
  transform: translateY(-1px);
}
.kabal-btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 0 15px rgba(245, 166, 35, 0.3);
}



/* ============================================================
   PARCHMENT THEME — overrides applied when
   <body data-brand-theme="parchment"> is set by BrandProvider.
   Loaded globally; falls through to the default jungle theme
   when the attribute is absent (so existing rendering is intact).

   Strategy: don't re-style every component. Override the CSS
   custom properties + a small set of high-impact selectors that
   change the FEEL instantly (page bg, sticky topbar, cards,
   buttons, typography). The rest cascades naturally.

   This is the basis of the "swap to parchment" feature so the
   team can preview the new UX direction without breaking the
   shipped dark theme.
   ============================================================ */
body[data-brand-theme="parchment"] {
  background:
    radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(253,187,42,0.08), transparent 60%),
    radial-gradient(ellipse 900px 500px at 95% 110%, rgba(107,70,26,0.06), transparent 65%),
    #F6ECD2 !important;
  color: #20160C !important;
}
/* Subtle graph-paper grid in faint Kabalian Brown */
body[data-brand-theme="parchment"]::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(107,70,26,0.07) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(107,70,26,0.07) 0 1px, transparent 1px 24px) !important;
  opacity: 1 !important;
}
/* ── RPG admin topbar: parchment + crosshair-ish edges ── */
body[data-brand-theme="parchment"] .rpg-admin-topbar {
  background: linear-gradient(180deg, #ECDFC0, #F6ECD2) !important;
  border-bottom: 1px solid rgba(32,22,12,0.2) !important;
  box-shadow: 0 2px 0 rgba(32,22,12,0.04), 0 4px 12px rgba(32,22,12,0.06) !important;
}
body[data-brand-theme="parchment"] .rpg-admin-topbar h1 {
  font-family: 'Caveat', cursive !important;
  background: none !important;
  -webkit-text-fill-color: #20160C !important;
  color: #20160C !important;
  font-weight: 700 !important;
  font-size: 26px !important;
}
body[data-brand-theme="parchment"] .rpg-admin-topbar span,
body[data-brand-theme="parchment"] .rpg-admin-topbar div {
  color: #20160C !important;
}
/* ── Sections: parchment cards with torn-paper feel ── */
body[data-brand-theme="parchment"] .admin-section {
  background:
    linear-gradient(180deg, #F6ECD2, #ECDFC0) !important;
  border: 1px solid rgba(32,22,12,0.2) !important;
  box-shadow:
    2px 2px 0 rgba(32,22,12,0.06),
    4px 4px 0 rgba(32,22,12,0.03),
    0 1px 2px rgba(32,22,12,0.04) inset !important;
}
body[data-brand-theme="parchment"] .admin-section::before {
  background: linear-gradient(180deg, transparent, rgba(107,70,26,0.4), transparent) !important;
}
body[data-brand-theme="parchment"] .admin-section::after { display: none; }
body[data-brand-theme="parchment"] .admin-section h3 {
  background: none !important;
  -webkit-text-fill-color: #20160C !important;
  color: #20160C !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}
body[data-brand-theme="parchment"] .admin-section h3::before {
  background: #20160C !important;
  box-shadow: none !important;
}
/* ── Inputs: parchment-friendly ── */
body[data-brand-theme="parchment"] .admin-input {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(32,22,12,0.2) !important;
  color: #20160C !important;
  font-family: 'Special Elite', monospace !important;
  box-shadow: 0 1px 2px rgba(32,22,12,0.04) inset !important;
}
body[data-brand-theme="parchment"] .admin-input:focus {
  border-color: rgba(32,22,12,0.5) !important;
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 0 0 3px rgba(32,22,12,0.08), 0 1px 2px rgba(32,22,12,0.06) inset !important;
}
body[data-brand-theme="parchment"] .admin-label { color: #4a3a26 !important; }
/* ── Buttons: solid black pill with handwritten font ── */
body[data-brand-theme="parchment"] .admin-btn {
  background: #20160C !important;
  color: #F6ECD2 !important;
  font-family: 'Caveat', cursive !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: 2px 2px 0 rgba(32,22,12,0.18) !important;
  border: 1px solid rgba(32,22,12,0.3) !important;
}
body[data-brand-theme="parchment"] .admin-btn::after { display: none !important; }
body[data-brand-theme="parchment"] .admin-btn:hover {
  background: #2a1c10 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 rgba(32,22,12,0.22) !important;
}
body[data-brand-theme="parchment"] .admin-btn-ghost {
  background: rgba(32,22,12,0.04) !important;
  color: #20160C !important;
  border: 1px dashed rgba(32,22,12,0.4) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 14px !important;
}
body[data-brand-theme="parchment"] .admin-btn-ghost:hover {
  background: rgba(32,22,12,0.1) !important;
  border-style: solid !important;
}
/* ── Tabs: handwritten underline ── */
body[data-brand-theme="parchment"] .tab-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(32,22,12,0.15) !important;
  border-radius: 0 !important;
}
body[data-brand-theme="parchment"] .tab-btn {
  background: transparent !important;
  color: #6B461A !important;
  font-family: 'Caveat', cursive !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
}
body[data-brand-theme="parchment"] .tab-btn:hover {
  color: #20160C !important;
  background: transparent !important;
  text-shadow: none !important;
}
body[data-brand-theme="parchment"] .tab-btn.active {
  background: transparent !important;
  color: #20160C !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body[data-brand-theme="parchment"] .tab-btn.active::after {
  background: #20160C !important;
  box-shadow: none !important;
  height: 2px !important;
  width: 100% !important;
  bottom: -1px !important;
  border-radius: 0 !important;
  transform: none !important;
  left: 0 !important;
}
/* ── Help block: parchment scroll ── */
body[data-brand-theme="parchment"] .help-block {
  background: rgba(32,22,12,0.05) !important;
  border: 1px solid rgba(32,22,12,0.18) !important;
  border-left: 3px solid rgba(32,22,12,0.5) !important;
  color: #4a3a26 !important;
}
body[data-brand-theme="parchment"] .help-block strong { color: #20160C !important; }
/* ── Toast: parchment note ── */
body[data-brand-theme="parchment"] .toast {
  background: #F6ECD2 !important;
  color: #20160C !important;
  border: 1px solid rgba(32,22,12,0.2) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 16px !important;
  box-shadow: 4px 4px 0 rgba(32,22,12,0.12) !important;
  backdrop-filter: none !important;
}
/* Scrollbar */
body[data-brand-theme="parchment"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6B461A, #4a3014) !important;
}
/* ============================================================
   RPG DASHBOARD — dialogue boxes / trade overlays in parchment
   ============================================================ */
/* Trade detail card — when a player taps an active trade. */
body[data-brand-theme="parchment"] .rpg-trade-card {
  background: linear-gradient(180deg, #F6ECD2, #ECDFC0) !important;
  border: 1px solid rgba(32,22,12,0.25) !important;
  color: #20160C !important;
  box-shadow:
    3px 3px 0 rgba(32,22,12,0.12),
    6px 6px 0 rgba(32,22,12,0.06),
    0 0 0 1px rgba(32,22,12,0.05) inset !important;
  backdrop-filter: none !important;
}
body[data-brand-theme="parchment"] .rpg-trade-card * {
  color: inherit !important;
}
/* Override the cream-on-dark spans inside the card */
body[data-brand-theme="parchment"] .rpg-trade-card div[style*="color: '#F6ECD2'"],
body[data-brand-theme="parchment"] .rpg-trade-card div[style*="color:#F6ECD2"],
body[data-brand-theme="parchment"] .rpg-trade-card div[style*="color: rgba(246,236,210"] {
  color: #20160C !important;
}
body[data-brand-theme="parchment"] .rpg-trade-card .ka-glow,
body[data-brand-theme="parchment"] .rpg-trade-card [style*="rgba(253,187,42"] {
  /* keep gold accents — they're the brand */
}
/* Side panels in PRO view become warm cream cards. */
body[data-brand-theme="parchment"] .jk-pro-view,
body[data-brand-theme="parchment"] .jk-pro-session,
body[data-brand-theme="parchment"] .jk-pro-tabs,
body[data-brand-theme="parchment"] .jk-pro-main,
body[data-brand-theme="parchment"] .jk-pro-sidebar {
  background: #F6ECD2 !important;
  color: #20160C !important;
  border-color: rgba(32,22,12,0.15) !important;
}
/* Generic floating panels (jk-panel) — used for various RPG popovers. */
body[data-brand-theme="parchment"] .jk-panel {
  background: #F6ECD2 !important;
  border: 1px solid rgba(32,22,12,0.22) !important;
  color: #20160C !important;
  box-shadow: 3px 3px 0 rgba(32,22,12,0.1) !important;
  backdrop-filter: none !important;
}
body[data-brand-theme="parchment"] .jk-panel * { color: inherit; }
/* Floating pills (jk-pill) — small status chips. */
body[data-brand-theme="parchment"] .jk-pill {
  background: rgba(32,22,12,0.06) !important;
  border: 1px dashed rgba(32,22,12,0.35) !important;
  color: #20160C !important;
}
/* ============================================================
   PARCHMENT-DARK — burnt scroll variant for night/OLED
   Same hand-drawn ritual feel as parchment, but Bone Cream becomes
   Kabal Yellow ink on a Void Black + Kabalian Brown surface.
   ============================================================ */
body[data-brand-theme="parchment-dark"] {
  background:
    radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(253,187,42,0.06), transparent 60%),
    radial-gradient(ellipse 900px 500px at 95% 110%, rgba(107,70,26,0.12), transparent 65%),
    #20160C !important;
  color: #F6ECD2 !important;
}
body[data-brand-theme="parchment-dark"]::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(253,187,42,0.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(253,187,42,0.05) 0 1px, transparent 1px 24px) !important;
  opacity: 1 !important;
}
/* Topbar */
body[data-brand-theme="parchment-dark"] .rpg-admin-topbar {
  background: linear-gradient(180deg, #2a1f12, #20160C) !important;
  border-bottom: 1px solid rgba(253,187,42,0.25) !important;
  box-shadow: 0 2px 0 rgba(253,187,42,0.06), 0 6px 24px rgba(0,0,0,0.4) !important;
}
body[data-brand-theme="parchment-dark"] .rpg-admin-topbar h1 {
  font-family: 'Caveat', cursive !important;
  background: none !important;
  -webkit-text-fill-color: #FDBB2A !important;
  color: #FDBB2A !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  text-shadow: 0 0 18px rgba(253,187,42,0.4) !important;
}
body[data-brand-theme="parchment-dark"] .rpg-admin-topbar span,
body[data-brand-theme="parchment-dark"] .rpg-admin-topbar div {
  color: #F6ECD2 !important;
}
/* Sections — burnt parchment cards */
body[data-brand-theme="parchment-dark"] .admin-section {
  background:
    linear-gradient(180deg, #36281a, #2a1f12) !important;
  border: 1px solid rgba(253,187,42,0.25) !important;
  box-shadow:
    3px 3px 0 rgba(0,0,0,0.45),
    6px 6px 0 rgba(0,0,0,0.25),
    0 0 0 1px rgba(253,187,42,0.05) inset !important;
}
body[data-brand-theme="parchment-dark"] .admin-section::before {
  background: linear-gradient(180deg, transparent, rgba(253,187,42,0.55), transparent) !important;
}
body[data-brand-theme="parchment-dark"] .admin-section::after { display: none; }
body[data-brand-theme="parchment-dark"] .admin-section h3 {
  background: none !important;
  -webkit-text-fill-color: #FDBB2A !important;
  color: #FDBB2A !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 0 14px rgba(253,187,42,0.35) !important;
}
body[data-brand-theme="parchment-dark"] .admin-section h3::before {
  background: #FDBB2A !important;
  box-shadow: 0 0 10px rgba(253,187,42,0.6) !important;
}
/* Inputs */
body[data-brand-theme="parchment-dark"] .admin-input {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(253,187,42,0.25) !important;
  color: #F6ECD2 !important;
  font-family: 'Special Elite', monospace !important;
}
body[data-brand-theme="parchment-dark"] .admin-input:focus {
  border-color: rgba(253,187,42,0.6) !important;
  background: rgba(253,187,42,0.06) !important;
  box-shadow: 0 0 0 3px rgba(253,187,42,0.1), 0 0 18px rgba(253,187,42,0.18) !important;
}
body[data-brand-theme="parchment-dark"] .admin-label { color: rgba(246,236,210,0.7) !important; }
/* Buttons — solid gold pill (cream looks washed out on dark) */
body[data-brand-theme="parchment-dark"] .admin-btn {
  background: #FDBB2A !important;
  color: #20160C !important;
  font-family: 'Caveat', cursive !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 18px rgba(253,187,42,0.25) !important;
  border: 1px solid rgba(0,0,0,0.3) !important;
}
body[data-brand-theme="parchment-dark"] .admin-btn::after { display: none !important; }
body[data-brand-theme="parchment-dark"] .admin-btn:hover {
  background: #FFD66A !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5), 0 0 28px rgba(253,187,42,0.4) !important;
}
body[data-brand-theme="parchment-dark"] .admin-btn-ghost {
  background: rgba(253,187,42,0.05) !important;
  color: #F6ECD2 !important;
  border: 1px dashed rgba(253,187,42,0.4) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 14px !important;
}
body[data-brand-theme="parchment-dark"] .admin-btn-ghost:hover {
  background: rgba(253,187,42,0.12) !important;
  border-style: solid !important;
}
/* Tabs */
body[data-brand-theme="parchment-dark"] .tab-bar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(253,187,42,0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-brand-theme="parchment-dark"] .tab-btn {
  background: transparent !important;
  color: rgba(246,236,210,0.6) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
}
body[data-brand-theme="parchment-dark"] .tab-btn:hover {
  color: #FDBB2A !important;
  background: transparent !important;
  text-shadow: 0 0 10px rgba(253,187,42,0.3) !important;
}
body[data-brand-theme="parchment-dark"] .tab-btn.active {
  background: transparent !important;
  color: #FDBB2A !important;
  border: none !important;
  text-shadow: 0 0 14px rgba(253,187,42,0.5) !important;
  box-shadow: none !important;
}
body[data-brand-theme="parchment-dark"] .tab-btn.active::after {
  background: #FDBB2A !important;
  box-shadow: 0 0 10px rgba(253,187,42,0.6) !important;
  height: 2px !important;
  width: 100% !important;
  bottom: -1px !important;
  border-radius: 0 !important;
  transform: none !important;
  left: 0 !important;
}
/* Help block */
body[data-brand-theme="parchment-dark"] .help-block {
  background: rgba(253,187,42,0.04) !important;
  border: 1px solid rgba(253,187,42,0.2) !important;
  border-left: 3px solid rgba(253,187,42,0.6) !important;
  color: rgba(246,236,210,0.85) !important;
}
body[data-brand-theme="parchment-dark"] .help-block strong { color: #FDBB2A !important; }
/* Toast */
body[data-brand-theme="parchment-dark"] .toast {
  background: #2a1f12 !important;
  color: #F6ECD2 !important;
  border: 1px solid rgba(253,187,42,0.3) !important;
  font-family: 'Caveat', cursive !important;
  font-size: 16px !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 24px rgba(253,187,42,0.18) !important;
  backdrop-filter: none !important;
}
body[data-brand-theme="parchment-dark"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FDBB2A, #C88415) !important;
}
/* RPG dialog/trade overlays */
body[data-brand-theme="parchment-dark"] .rpg-trade-card {
  background: linear-gradient(180deg, #36281a, #2a1f12) !important;
  border: 1px solid rgba(253,187,42,0.3) !important;
  color: #F6ECD2 !important;
  box-shadow:
    3px 3px 0 rgba(0,0,0,0.5),
    6px 6px 0 rgba(0,0,0,0.25),
    0 0 0 1px rgba(253,187,42,0.06) inset !important;
}
body[data-brand-theme="parchment-dark"] .jk-panel,
body[data-brand-theme="parchment-dark"] .jk-pro-view,
body[data-brand-theme="parchment-dark"] .jk-pro-session,
body[data-brand-theme="parchment-dark"] .jk-pro-tabs,
body[data-brand-theme="parchment-dark"] .jk-pro-main,
body[data-brand-theme="parchment-dark"] .jk-pro-sidebar {
  background: #2a1f12 !important;
  color: #F6ECD2 !important;
  border-color: rgba(253,187,42,0.18) !important;
}
body[data-brand-theme="parchment-dark"] .jk-pill {
  background: rgba(253,187,42,0.08) !important;
  border: 1px dashed rgba(253,187,42,0.4) !important;
  color: #FDBB2A !important;
}

/* ============================================================
   SANCTUM PARCHMENT CONTRAST OVERRIDES
   Force dark ink on all light-parchment frames (and inverse on
   dark-parchment) so text stays readable regardless of inline
   color overrides set on individual children.

   Loaded AFTER sanctum.css and parchment-theme.css so these rules
   win the cascade.
   ============================================================ */

/* ── LIGHT PARCHMENT FRAMES (.frame-parchment / .frame-clean /
      .frame-stamp / .frame-brutalist / .frame-ink) ─
      Background is cream (#f3e8c8 — #ebd9b0). Force dark ink. */
.frame-parchment,
.frame-clean,
.frame-stamp,
.frame-brutalist,
.frame-ink {
  color: #1a1408 !important;
}
.frame-parchment *:not([class*="frame-glass"]):not(.btn-prim):not(.btn-ghost),
.frame-clean *:not([class*="frame-glass"]):not(.btn-prim):not(.btn-ghost),
.frame-stamp *:not([class*="frame-glass"]):not(.btn-prim):not(.btn-ghost),
.frame-brutalist *:not([class*="frame-glass"]):not(.btn-prim):not(.btn-ghost),
.frame-ink *:not([class*="frame-glass"]):not(.btn-prim):not(.btn-ghost) {
  color: inherit;
}
/* Eyebrow / muted variants on parchment — dark soft tone */
.frame-parchment .frame-eyebrow,
.frame-clean .frame-eyebrow,
.frame-stamp .frame-eyebrow,
.frame-brutalist .frame-eyebrow,
.frame-ink .frame-eyebrow {
  color: rgba(60,40,15,0.7) !important;
}
.frame-parchment .frame-eyebrow .diamond,
.frame-clean .frame-eyebrow .diamond,
.frame-stamp .frame-eyebrow .diamond,
.frame-brutalist .frame-eyebrow .diamond,
.frame-ink .frame-eyebrow .diamond {
  color: #1a1408 !important;
}

/* ── DARK PARCHMENT FRAME (.frame-glass) — Bone Cream ink ── */
.frame-glass {
  color: #f6ecd2 !important;
}
.frame-glass .frame-eyebrow {
  color: rgba(245,166,35,0.7) !important;
}

/* ── PARCHMENT THEME SANCTUM — force dark text on cream bg ──
   When body[data-brand-theme="parchment"] is set AND the user is in
   the Sanctum (.ksanctum), the canvas bg is cream. Sanctum's default
   white inline text becomes invisible. Override the inherited
   colors to dark ink so readability is preserved. */
body[data-brand-theme="parchment"] .ksanctum {
  color: #1a1408 !important;
}
body[data-brand-theme="parchment"] .ksanctum .pack-name,
body[data-brand-theme="parchment"] .ksanctum .kard-name,
body[data-brand-theme="parchment"] .ksanctum .ach-title,
body[data-brand-theme="parchment"] .ksanctum .avatar-name,
body[data-brand-theme="parchment"] .ksanctum .item-name,
body[data-brand-theme="parchment"] .ksanctum .stat-row .value,
body[data-brand-theme="parchment"] .ksanctum .equip-slot .item-name {
  color: #1a1408 !important;
  text-shadow: none !important;
}
body[data-brand-theme="parchment"] .ksanctum .pack-sub,
body[data-brand-theme="parchment"] .ksanctum .ach-desc,
body[data-brand-theme="parchment"] .ksanctum .stat-row .label,
body[data-brand-theme="parchment"] .ksanctum .equip-slot .label {
  color: rgba(60,40,15,0.65) !important;
}
body[data-brand-theme="parchment"] .ksanctum .hud-pill .num {
  color: #1a1408 !important;
}
body[data-brand-theme="parchment"] .ksanctum .dock-btn {
  color: rgba(60,40,15,0.55) !important;
}
body[data-brand-theme="parchment"] .ksanctum .dock-btn:hover {
  color: #1a1408 !important;
}
body[data-brand-theme="parchment"] .ksanctum .dock-btn.active {
  color: #1a1408 !important;
}

/* ── Toast on light theme ── */
body[data-brand-theme="parchment"] .ksanctum .toast .txt {
  color: #1a1408 !important;
}