@import url(https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800&display=swap);
/* ──────────────────────────────────────────────────────────────────────
 * light-mode-overrides.css
 * Auto-extracted from index.css iter 214 — every `html.light …` ruleset
 * lives here so the base file stays focused on the default dark theme.
 *
 * IMPORTED FROM: index.css   ( @import './light-mode-overrides.css'; )
 *
 * Edit rules here when adjusting light-mode styling. DO NOT add dark-
 * mode rules here.
 * ────────────────────────────────────────────────────────────────────── */

html.light {
  --bg: #F8FAFC;
  --bg-elev: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-2: rgba(226, 232, 240, 0.5);
  --surface-solid: #FFFFFF;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --text: #0F172A;
  --text-muted: #475569;
  --text-dim: #94A3B8;
  --nav-bg: rgba(255, 255, 255, 0.85);
}

html.light body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 500px at 10% -10%, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(800px 450px at 95% 10%, rgba(56, 189, 248, 0.10), transparent 60%);
  color: var(--text);
}

html.light .bg-\[\#0d0d0d\],
html.light .bg-\[\#0e0e10\],
html.light .bg-\[\#101010\],
html.light .bg-\[\#0c0c0c\],
html.light .bg-\[\#0e0e0e\],
html.light .bg-\[\#0f0f0f\] { background-color: var(--bg-elev) !important; }

html.light .bg-\[\#101010\]\/60,
html.light .bg-\[\#121212\]\/60,
html.light .bg-\[\#0a0a0a\]\/80 { background-color: rgba(255,255,255,0.85) !important; }

html.light .border-\[\#1f1f1f\],
html.light .border-\[\#222\],
html.light .border-\[\#1c1c1c\] { border-color: var(--border) !important; }

html.light .grid-pattern { opacity: 0.22 !important; }

html.light [data-testid="languages-bar"] {
  background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%) !important;
  border-color: var(--border) !important;
}

html.light [data-testid="languages-bar"] .border-\[\#262626\] {
  border-color: var(--border-strong) !important;
}

html.light [data-testid="languages-bar"] .text-slate-300 { color: #334155 !important; }

html.light [data-testid="langbar-arrow-left"],
html.light [data-testid="langbar-arrow-right"] {
  background: #F8FAFC !important;
  color: #334155 !important;
}

html.light [data-testid="languages-bar"] > div > div[aria-hidden="true"]:nth-of-type(1) {
  background: linear-gradient(90deg, #F8FAFC 55%, transparent 100%) !important;
}

html.light [data-testid="languages-bar"] > div > div[aria-hidden="true"]:nth-of-type(2) {
  background: linear-gradient(270deg, #F8FAFC 55%, transparent 100%) !important;
}

html.light [data-testid^="hero-stat-"] {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--border) !important;
  border-top-width: 2px !important;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.08);
}

html.light [data-testid^="hero-stat-"] .text-slate-400 { color: #475569 !important; }

html.light [data-testid="home-compiler-row"] {
  background-color: #FFFFFF !important;
  border-color: var(--border) !important;
}

html.light [data-testid^="hero-compiler-"] {
  background-color: #FFFFFF !important;
  border-color: var(--border-strong) !important;
}

html.light [data-testid^="hero-compiler-"] .text-slate-300 { color: #334155 !important; }

html.light [data-testid="home-coach-section"],
html.light [data-testid="home-visualizer-section"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
}

html.light [style*="background: #0a"],
html.light [style*="background: #0d"],
html.light [style*="background: #0e"],
html.light [style*="background: #0f"],
html.light [style*="background: #10"],
html.light [style*="background: #11"],
html.light [style*="background: #12"],
html.light [style*="background:#0a"],
html.light [style*="background:#0d"],
html.light [style*="background:#0e"],
html.light [style*="background:#0f"],
html.light [style*="background:#10"],
html.light [style*="background:#11"],
html.light [style*="background:#12"] {
  background: var(--bg-elev) !important;
}

html.light a[data-testid^="course-card-"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.08);
}

html.light a[data-testid^="course-card-"]:hover {
  border-color: rgba(234, 179, 8, 0.6) !important;
  box-shadow: 0 18px 45px -12px rgba(234, 179, 8, 0.18) !important;
}

html.light a[data-testid^="course-card-"] .border-white\/5 {
  border-color: var(--border) !important;
}

html.light a[data-testid^="course-card-"] .bg-black\/40 {
  background-color: rgba(15, 23, 42, 0.04) !important;
}

html.light .from-\[\#141414\].to-\[\#0e0e0e\],
html.light .from-\[\#121212\].to-\[\#0a0a0a\],
html.light .from-\[\#0f0f0f\].to-\[\#070707\] {
  --tw-gradient-from: #FFFFFF !important;
  --tw-gradient-to:   #F8FAFC !important;
  background-image: linear-gradient(to bottom right, #FFFFFF 0%, #F8FAFC 100%) !important;
}

html.light header[data-testid="navbar"] {
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--border);
}

html.light header[data-testid="navbar"] .text-white,
html.light header[data-testid="navbar"] .text-slate-200,
html.light header[data-testid="navbar"] .text-slate-300 {
  color: var(--text) !important;
}

html.light header[data-testid="navbar"] a[data-testid="navbar-logo"] > div {
  color: #0f172a !important;
}

html.light [data-testid="mobile-menu-toggle"] { color: #0f172a !important; }

html.light [data-testid="certificate-preview"],
html.light [data-testid="sample-certificate"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.12);
}

html.light [data-testid="certificate-preview"] .text-slate-300,
html.light [data-testid="certificate-preview"] .text-slate-400,
html.light [data-testid="sample-certificate"] .text-slate-300,
html.light [data-testid="sample-certificate"] .text-slate-400 {
  color: #475569 !important;
}

html.light [data-testid="lesson-hero-card"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: rgba(234, 179, 8, 0.4) !important;
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

html.light [data-testid="lesson-hero-title"] {
  background-image: linear-gradient(120deg, #0f172a 0%, #d97706 60%, #047857 100%) !important;
}

html.light [data-testid="lesson-hero-card"] + p,
html.light [data-testid="lesson-hero-card"] ~ * .text-slate-300,
html.light [data-testid="lesson-body-with-translation"] .text-slate-300 {
  color: #1e293b !important;
}

html.light [data-testid="lesson-hero-card"] .text-yellow-500 { color: #b45309 !important; }

html.light [data-testid="lesson-hero-card"] .text-emerald-300,
html.light [data-testid="lesson-hero-card"] .text-emerald-400 { color: #047857 !important; }

html.light [data-testid="lesson-hero-card"] .border-emerald-500\/40,
html.light [data-testid="lesson-hero-card"] .border-emerald-500\/30 {
  border-color: rgba(4, 120, 87, 0.4) !important;
}

html.light [data-testid="lesson-hero-card"] .bg-emerald-500\/5,
html.light [data-testid="lesson-hero-card"] .bg-emerald-500\/10 {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

html.light [data-testid="lesson-body-with-translation"],
html.light [data-testid="lesson-body-with-translation"] .prose-invert {
  color: #0f172a;
}

html.light [data-testid="lesson-body-with-translation"] .text-white,
html.light [data-testid="lesson-body-with-translation"] h1,
html.light [data-testid="lesson-body-with-translation"] h2:not(.lesson-h2-badge),
html.light [data-testid="lesson-body-with-translation"] h3:not(.flex):not(.lesson-h3-badge),
html.light [data-testid="lesson-body-with-translation"] h4,
html.light [data-testid="lesson-body-with-translation"] strong,
html.light [data-testid="lesson-body-with-translation"] b {
  color: #0f172a !important;
}

html.light [data-testid="lesson-body-with-translation"] p,
html.light [data-testid="lesson-body-with-translation"] li,
html.light [data-testid="lesson-body-with-translation"] .text-slate-100,
html.light [data-testid="lesson-body-with-translation"] .text-slate-200,
html.light [data-testid="lesson-body-with-translation"] .text-slate-300,
html.light [data-testid="lesson-body-with-translation"] .text-slate-400,
html.light [data-testid="lesson-body-with-translation"] .text-slate-500 {
  color: #1e293b !important;
}

html.light [data-testid="lesson-body-with-translation"] code:not(pre code) {
  background: #f1f5f9 !important;
  color: #047857 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light [data-testid="lesson-body-with-translation"] table th,
html.light [data-testid="lesson-body-with-translation"] table td {
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light [data-testid="lesson-body-with-translation"] table th {
  background: #f1f5f9 !important;
}

html.light [data-testid="lesson-body-with-translation"] .text-slate-600 {
  color: #475569 !important;
}

html.light .lesson-h2-badge {
  background: rgba(34, 197, 94, 0.10) !important;
  border-color: rgba(4, 120, 87, 0.55) !important;
  color: #047857 !important;
}

html.light .lesson-h2-badge .ck-h2-label,
html.light .lesson-h2-badge .ck-h2-version {
  color: #065f46 !important;
}

html.light .lesson-h2-badge .ck-h2-version {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(4, 120, 87, 0.55) !important;
}

html.light .lesson-h2-badge .ck-h2-dot {
  background: #047857 !important;
  opacity: 0.85;
}

html.light .lesson-h3-badge {
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(180, 83, 9, 0.55) !important;
  color: #b45309 !important;
}

html.light .lesson-h3-badge::before {
  background: #b45309 !important;
}

html.light .lesson-h3-badge .ck-h3-label { color: #b45309 !important; }

html.light [data-testid="lesson-quiz-cta"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 100%) !important;
  border-color: rgba(217, 70, 239, 0.5) !important;
  box-shadow: 0 10px 30px -12px rgba(168, 85, 247, 0.18);
}

html.light [data-testid="lesson-quiz-cta"] h3,
html.light [data-testid="lesson-quiz-cta"] .text-white { color: #581c87 !important; }

html.light [data-testid="lesson-quiz-cta"] .text-slate-300 { color: #334155 !important; }

html.light [data-testid="lesson-quiz-cta"] .text-fuchsia-200 { color: #a21caf !important; }

html.light [data-testid="lesson-quiz-cta"] .border-fuchsia-400\/50 { border-color: #c026d3 !important; }

html.light [data-testid="lesson-quiz-cta"] .bg-fuchsia-500\/10 { background-color: rgba(217, 70, 239, 0.08) !important; }

html.light [data-testid="lesson-quiz-loading"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 100%) !important;
  border-color: rgba(217, 70, 239, 0.5) !important;
}

html.light [data-testid="lesson-quiz-loading"] .text-fuchsia-200 { color: #581c87 !important; }

html.light .bg-\[\#121212\] {
  background: #ffffff !important;
  color: var(--text);
}

html.light .bg-\[\#0a0a0a\],
html.light .bg-\[\#050505\],
html.light .bg-\[\#1a1a1a\],
html.light .bg-\[\#16161E\],
html.light .bg-\[\#111\] {
  background: #f8fafc !important;
}

html.light .bg-\[\#1E1E2E\] {
  background: #0f172a !important;
  color: #f1f5f9;
}

html.light .border-\[\#262626\] { border-color: var(--border-strong) !important; }

html.light .border-\[\#1a1a1a\] { border-color: var(--border) !important; }

html.light .text-slate-400 { color: #475569 !important; }

html.light .text-slate-500 { color: #64748b !important; }

html.light .text-slate-300 { color: #334155 !important; }

html.light .text-slate-200 { color: #1e293b !important; }

html.light .text-slate-100,
html.light .text-white { color: #0f172a !important; }

html.light .bg-\[\#1E1E2E\] *,
html.light .bg-\[\#1E1E2E\] {
  color: #f1f5f9 !important;
}

html.light .bg-\[\#1E1E2E\] .text-slate-400 { color: #94a3b8 !important; }

html.light .bg-\[\#1E1E2E\] .text-slate-500 { color: #64748b !important; }

html.light [data-testid$="-textarea"],
html.light pre, html.light code {
  color: #f1f5f9;
}

html.light .btn-brutal,
html.light button.btn-brutal { color: #000 !important; }

html.light .btn-brutal:hover { color: #fff !important; }

html.light .bg-emerald-500 .text-white,
html.light .bg-emerald-500.text-white,
html.light .bg-yellow-400 .text-black,
html.light .bg-yellow-500 .text-black { color: inherit !important; }

html.light a[data-testid^="lesson-cta-"] {
  background: linear-gradient(to right, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 50%, rgba(248,250,252,1) 100%) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12) !important;
}

html.light a[data-testid="lesson-cta-dsaVisualizer"]      { background: linear-gradient(to right, #ECFEFF, #FFFFFF, #ECFEFF) !important; border-color: rgba(34, 211, 238, 0.4) !important; }

html.light a[data-testid="lesson-cta-bootstrapCoach"]     { background: linear-gradient(to right, #FFF7ED, #FFFFFF, #FFF7ED) !important; border-color: rgba(251, 146, 60, 0.4) !important; }

html.light a[data-testid="lesson-cta-compareLanguages"]   { background: linear-gradient(to right, #ECFDF5, #FFFFFF, #ECFDF5) !important; border-color: rgba(16, 185, 129, 0.4) !important; }

html.light a[data-testid="lesson-cta-terminology"]        { background: linear-gradient(to right, #EEF2FF, #FFFFFF, #EEF2FF) !important; border-color: rgba(99, 102, 241, 0.4) !important; }

html.light a[data-testid="lesson-cta-concepts"]           { background: linear-gradient(to right, #F5F3FF, #FFFFFF, #F5F3FF) !important; border-color: rgba(139, 92, 246, 0.4) !important; }

html.light a[data-testid="lesson-cta-didYouKnow"]         { background: linear-gradient(to right, #FEFCE8, #FFFFFF, #FEFCE8) !important; border-color: rgba(234, 179, 8, 0.4) !important; }

html.light a[data-testid="lesson-cta-blog"]               { background: linear-gradient(to right, #FDF2F8, #FFFFFF, #FDF2F8) !important; border-color: rgba(236, 72, 153, 0.4) !important; }

html.light a[data-testid="lesson-cta-practice"]           { background: linear-gradient(to right, #FFF7ED, #FFFFFF, #FFF7ED) !important; border-color: rgba(251, 146, 60, 0.4) !important; }

html.light a[data-testid^="lesson-cta-"] .text-white  { color: #0f172a !important; }

html.light a[data-testid^="lesson-cta-"] .text-slate-400 { color: #475569 !important; }

html.light a[data-testid^="lesson-cta-"] .text-cyan-300    { color: #0891b2 !important; }

html.light a[data-testid^="lesson-cta-"] .text-emerald-300 { color: #047857 !important; }

html.light a[data-testid^="lesson-cta-"] .text-orange-300  { color: #c2410c !important; }

html.light a[data-testid^="lesson-cta-"] .text-violet-300  { color: #6d28d9 !important; }

html.light a[data-testid^="lesson-cta-"] .text-indigo-300  { color: #4338ca !important; }

html.light a[data-testid^="lesson-cta-"] .text-yellow-300  { color: #b45309 !important; }

html.light a[data-testid="lesson-examples-cta"] {
  background: linear-gradient(to right, #ECFDF5, #FFFFFF, #ECFDF5) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12) !important;
}

html.light a[data-testid="lesson-ds-c-cta"] {
  background: linear-gradient(to right, #F5F3FF, #FFFFFF, #F5F3FF) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12) !important;
}

html.light a[data-testid="lesson-examples-cta"] .text-white,
html.light a[data-testid="lesson-ds-c-cta"] .text-white { color: #0f172a !important; }

html.light a[data-testid="lesson-examples-cta"] .text-slate-400,
html.light a[data-testid="lesson-ds-c-cta"] .text-slate-400 { color: #475569 !important; }

html.light a[data-testid="lesson-examples-cta"] .text-emerald-300,
html.light a[data-testid="lesson-examples-cta"] .text-emerald-400 { color: #047857 !important; }

html.light a[data-testid="lesson-ds-c-cta"] .text-purple-300,
html.light a[data-testid="lesson-ds-c-cta"] .text-purple-400 { color: #6d28d9 !important; }

html.light nav .absolute.left-0.right-0.top-full,
html.light header .absolute.left-0.right-0.top-full {
  background: #FFFFFF !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 16px 48px -16px rgba(15, 23, 42, 0.18) !important;
}

html.light nav .absolute.right-0.top-full,
html.light header .absolute.right-0.top-full {
  background: #FFFFFF !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 16px 48px -16px rgba(15, 23, 42, 0.18) !important;
}

html.light nav .absolute.right-0.top-full .border-b,
html.light nav .absolute.right-0.top-full .bg-\[\#101010\] {
  background-color: #F8FAFC !important;
  border-bottom-color: var(--border) !important;
}

html.light [data-testid="tyvis-page"] > section:first-of-type {
  background-image: linear-gradient(to bottom, #F8FAFC 0%, #FFFFFF 60%, #F8FAFC 100%) !important;
}

html.light [data-testid="tyvis-page"] .text-slate-300 { color: #334155 !important; }

html.light [data-testid="tyvis-page"] .text-emerald-400\/80,
html.light [data-testid="tyvis-page"] .text-emerald-400 { color: #047857 !important; }

html.light [data-testid="tyvis-logo-wrap"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
}

html.light [data-testid="beyond-expectations"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(234,179,8,0.08), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(16,185,129,0.06), transparent 55%),
    #FFFFFF !important;
}

html.light [data-testid="beyond-expectations"] .text-slate-400 { color: #475569 !important; }

html.light [data-testid="google-rating-card"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.12);
}

html.light [data-testid="beyond-expectations"] [data-testid^="testimonial-card-"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.10);
}

html.light [data-testid="beyond-expectations"] [data-testid^="testimonial-card-"] .text-slate-300,
html.light [data-testid="beyond-expectations"] [data-testid^="testimonial-card-"] .text-slate-400 { color: #334155 !important; }

html.light .ck-be-fade {
  background-image: none !important;
  background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
}

html.light [data-testid="be-fade-right"].ck-be-fade {
  background: linear-gradient(to left, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
}

html.light [data-testid="blog-page"] h1 .text-slate-500 { color: #475569 !important; }

html.light [data-testid="newsletter-signup"] {
  background: linear-gradient(180deg, #FEFCE8 0%, #FFFFFF 100%) !important;
  border-color: rgba(234, 179, 8, 0.4) !important;
}

html.light [data-testid="newsletter-signup"] .text-slate-300 { color: #334155 !important; }

html.light [data-testid="newsletter-signup-email"] {
  background: #FFFFFF !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

html.light [data-testid="blog-search-input"] {
  background: #FFFFFF !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

html.light [data-testid="blog-category-chips"] button {
  background: #FFFFFF !important;
  border-color: var(--border-strong) !important;
  color: #334155 !important;
}

html.light [data-testid="blog-category-chips"] button.text-yellow-300,
html.light [data-testid="blog-category-chips"] button.border-yellow-500\/60 {
  border-color: rgba(234, 179, 8, 0.7) !important;
  color: #b45309 !important;
  background: rgba(234, 179, 8, 0.08) !important;
}

html.light body {
  background: var(--bg);
}

html.light [data-testid="chatbot-panel"] {
  background: #ffffff !important;
  border-color: var(--border-strong) !important;
}

html.light .ck-bullets > li::before {
  color: #a16207 !important;            /* amber-700 — readable on white */
  background: rgba(202, 138, 4, 0.10) !important;
  border-color: rgba(202, 138, 4, 0.55) !important;
}

html.light .ck-bullets > li:hover::before {
  color: #ffffff !important;
  background: #ca8a04 !important;       /* amber-600 */
  border-color: #ca8a04 !important;
}

html.light .ck-bullets ul > li::before {
  color: #334155 !important;            /* slate-700 */
  background: rgba(51, 65, 85, 0.08) !important;
  border-color: rgba(51, 65, 85, 0.45) !important;
}

html.light .lesson-markdown ol.ck-numbered > li::before {
  color: #a16207 !important;
  background: rgba(202, 138, 4, 0.10) !important;
  border-color: rgba(202, 138, 4, 0.55) !important;
}

html.light [data-testid$="-copy"],
html.light [data-testid$="-run"],
html.light [data-testid="lesson-body-with-translation"] .bg-\[\#16161E\] *,
html.light .lesson-markdown pre + * {
  /* No-op — handled by specific rules below. */
}

html.light [data-testid="lesson-body-with-translation"] [aria-label="Copy code"] {
  color: #cbd5e1 !important;            /* slate-300 — visible on dark header */
  border-color: #262626 !important;
}

html.light [data-testid="lesson-body-with-translation"] [aria-label="Copy code"]:hover {
  color: #fbbf24 !important;            /* yellow-400 hover */
  border-color: rgba(250, 204, 21, 0.6) !important;
}

html.light [data-testid="lesson-body-with-translation"] [aria-label="Copy code"] svg {
  color: inherit !important;
}

html.light [data-testid="compiler-copy"],
html.light [data-testid="compiler-share"],
html.light [data-testid="compiler-fork"],
html.light [data-testid="compiler-download"] {
  color: #cbd5e1 !important;
}

html.light [data-testid="compiler-copy"]:hover,
html.light [data-testid="compiler-share"]:hover {
  color: #fbbf24 !important;
}

html.light [data-testid="lesson-body-with-translation"] .bg-\[\#16161E\] .text-slate-500 {
  color: #94a3b8 !important;
}

html.light [data-testid="languages-bar"] a.bg-yellow-500\/10,
html.light [data-testid="languages-bar"] .border-yellow-500.text-yellow-400 {
  background: #fef3c7 !important;       /* amber-100 */
  color: #92400e !important;            /* amber-800 — strong contrast */
  border-color: #ca8a04 !important;     /* amber-600 */
}

html.light [data-testid="languages-bar"] a:not(.border-yellow-500) {
  color: #334155 !important;            /* slate-700 — readable */
  border-color: #cbd5e1 !important;
}

html.light [data-testid="languages-bar"] a:not(.border-yellow-500):hover {
  color: #a16207 !important;
  border-color: #ca8a04 !important;
}

html.light [data-testid="langbar-section-tutorials"],
html.light [data-testid="langbar-section-compilers"] {
  color: #a16207 !important;            /* amber-700 — strong on light bar */
  opacity: 1 !important;
}

html.light [data-testid="diagram-step-strip"] button {
  color: #334155 !important;            /* slate-700 — readable on white */
  border-color: #cbd5e1 !important;
}

html.light [data-testid="diagram-step-strip"] button.bg-yellow-500\/10,
html.light [data-testid="diagram-step-strip"] button.text-yellow-300 {
  background: #fef3c7 !important;       /* amber-100 */
  color: #92400e !important;            /* amber-800 */
  border-color: #ca8a04 !important;     /* amber-600 */
}

html.light [data-testid="diagram-step-strip"] button:hover {
  border-color: #ca8a04 !important;
  color: #a16207 !important;
}

html.light footer .text-slate-100,
html.light footer .text-slate-200,
html.light footer .text-slate-300,
html.light footer .text-slate-400,
html.light footer .text-slate-500,
html.light [data-testid="footer"] .text-slate-100,
html.light [data-testid="footer"] .text-slate-200,
html.light [data-testid="footer"] .text-slate-300,
html.light [data-testid="footer"] .text-slate-400,
html.light [data-testid="footer"] .text-slate-500 {
  color: #cbd5e1 !important;            /* slate-300 — light on dark footer */
}

html.light footer h4,
html.light footer .font-display,
html.light footer .text-white,
html.light [data-testid="footer"] h4,
html.light [data-testid="footer"] .font-display,
html.light [data-testid="footer"] .text-white {
  color: #ffffff !important;
}

html.light footer a,
html.light [data-testid="footer"] a {
  color: #cbd5e1 !important;
}

html.light footer a:hover,
html.light [data-testid="footer"] a:hover {
  color: #fbbf24 !important;            /* amber-400 — branded hover */
}

html.light [data-testid="footer-verify-strip"] {
  color: #cbd5e1 !important;
}

html.light [data-testid="footer-verify-strip"] .text-white,
html.light [data-testid="footer-verify-strip"] .font-display {
  color: #ffffff !important;
}

html.light [data-testid="footer-verify-strip"] .text-slate-300,
html.light [data-testid="footer-verify-strip"] .text-slate-400 {
  color: #cbd5e1 !important;
}

html.light [data-testid="lesson-body-with-translation"] pre {
  background: #16161E !important;
  color: #e2e8f0 !important;
}

html.light [data-testid="lesson-body-with-translation"] pre code,
html.light [data-testid="lesson-body-with-translation"] pre * {
  color: #e2e8f0 !important;
  background: transparent !important;
}

html.light [data-testid^="info-section-"][data-testid$="-tip"],
html.light [data-testid="lesson-body-with-translation"] .bg-emerald-500\/10.text-emerald-200,
html.light .bg-emerald-500\/10.text-emerald-200 {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #065f46 !important;             /* emerald-800 — readable on white */
  border: 1px solid rgba(5, 150, 105, 0.45) !important;
}

html.light .ck-cta-band {
  background: #f8fafd !important;        /* user-spec light-mode color (iter 201) */
}

html.light [data-testid="footer-app-nav"] .text-slate-800,
html.light [data-testid="footer-app-nav"] span,
html.light [data-testid="footer-app-nav"] a {
  color: #0f172a !important;             /* slate-900 / near-black */
}

html.light .ck-tooltip::before {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
}

html.light .ck-tooltip::after {
  border-top-color: #ffffff;
}

html.light [data-testid="contact-email-chip"] {
  color: #a16207 !important;             /* amber-700 */
  background: rgba(202, 138, 4, 0.10) !important;
  border-color: rgba(202, 138, 4, 0.55) !important;
}

html.light [data-testid="contact-sla-chip"] {
  color: #065f46 !important;             /* emerald-800 */
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(5, 150, 105, 0.45) !important;
}

html.light [data-testid="contact-region-chip"] {
  color: #155e75 !important;             /* cyan-800 */
  background: rgba(8, 145, 178, 0.10) !important;
  border-color: rgba(8, 145, 178, 0.45) !important;
}

html.light [data-testid="contact-topics-grid"] .text-slate-400 {
  color: #334155 !important;             /* slate-700 — readable on light card */
}

html.light [data-testid="contact-topics-grid"] button {
  background: #ffffff !important;
  background-image: none !important;
}

html.light [data-testid="footer-app-nav"] span,
html.light [data-testid="footer-app-nav"] a {
  color: #0f172a !important;             /* slate-900 / near-black */
}

html.light [data-testid="home-latest-blog"] .text-slate-300,
html.light [data-testid="home-latest-blog"] .text-slate-400 {
  color: #334155 !important;
}

html.light [data-testid="home-latest-blog"] .featured-card,
html.light [data-testid="home-latest-blog"] [data-testid="latest-blog-featured"] {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 100%) !important;
}

html.light [data-testid="home-latest-blog"] [data-testid="latest-blog-featured"] * {
  color: #ffffff !important;
}

html.light [data-testid="home-testimonials"],
html.light [data-testid="beyond-expectations"] {
  background: #f1f5f9 !important;        /* slate-100 — cards pop on this */
}

html.light [data-testid="home-testimonials"] .text-slate-300,
html.light [data-testid="home-testimonials"] .text-slate-400 {
  color: #334155 !important;
}

html.light [data-testid="footer-app-nav"] a[class*="bg-emerald-500"],
html.light [data-testid="footer-app-nav"] a .bg-emerald-500,
html.light [data-testid="footer-app-nav"] .bg-emerald-500 {
  background-color: #34d399 !important;  /* emerald-400 — softer */
}

html.light [data-testid="footer-app-nav"] svg,
html.light [data-testid="footer-app-nav"] a .text-white {
  color: #064e3b !important;             /* emerald-900 */
}

html.light [data-testid="course-detail-page"] .text-white,
html.light [data-testid="course-detail-page"] h1,
html.light [data-testid="course-detail-page"] h2,
html.light [data-testid="course-detail-page"] h3,
html.light [data-testid="course-detail-page"] strong {
  color: #0f172a !important;
}

html.light [data-testid="course-detail-page"] .text-slate-300,
html.light [data-testid="course-detail-page"] .text-slate-400,
html.light [data-testid="course-detail-page"] .text-slate-500 {
  color: #334155 !important;
}

html.light [data-sonner-toaster] [data-sonner-toast] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
}

html.light [data-sonner-toaster] [data-sonner-toast] [data-title],
html.light [data-sonner-toaster] [data-sonner-toast] [data-description],
html.light [data-sonner-toaster] [data-sonner-toast] [data-content] {
  color: #0f172a !important;
}

html.light [data-sonner-toaster] [data-sonner-toast][data-type="success"] {
  border-color: #10b981 !important;
}

html.light [data-sonner-toaster] [data-sonner-toast][data-type="error"] {
  border-color: #ef4444 !important;
}

html.light [data-testid="admin-page"] .text-slate-100,
html.light [data-testid="admin-page"] .text-slate-200,
html.light [data-testid="admin-page"] .text-slate-300,
html.light [data-testid="admin-page"] .text-slate-400,
html.light [data-testid="admin-page"] .text-slate-500 {
  color: #334155 !important;
}

html.light [data-testid="admin-page"] td {
  color: #1e293b !important;
}

html.light table tbody tr:hover,
html.light table tbody tr:hover td,
html.light table tbody tr:hover th {
  background-color: #f1f5f9 !important;  /* slate-100 */
  color: #0f172a !important;
}

html.light table tbody tr:hover a {
  color: #a16207 !important;             /* amber-700 for visible links */
}

html.light [data-testid="lang-toggle"] button:hover,
html.light [data-testid="lang-toggle-en"]:hover,
html.light [data-testid="lang-toggle-hi"]:hover,
html.light [data-testid="navbar-lang-switch"] button:hover {
  background-color: #fef3c7 !important;  /* amber-100 */
  color: #92400e !important;             /* amber-800 */
}

html.light [data-testid="compiler-page"],
html.light [data-testid^="compiler-"] [data-testid="compiler-output"],
html.light [data-testid="compiler-stdin"],
html.light [data-testid^="inline-compiler-"],
html.light [data-testid^="inline-compiler-"] textarea,
html.light [data-testid^="inline-compiler-"] pre,
html.light [data-testid^="compiler-"] .monaco-editor,
html.light [data-testid="compiler-page"] textarea,
html.light [data-testid="compiler-page"] pre {
  background-color: #0a0e1a !important;
  color: #e2e8f0 !important;
}

html.light [data-testid="compiler-output"],
html.light [data-testid="compiler-output"] *,
html.light [data-testid^="inline-compiler-"] pre,
html.light [data-testid^="inline-compiler-"] pre * {
  color: #e2e8f0 !important;
  background-color: #0b1220 !important;
}

html.light [data-testid="compiler-page"] .text-yellow-500 {
  color: #facc15 !important;
}

html.light button svg.lucide-copy,
html.light button svg.lucide-check,
html.light [data-testid$="-copy"] svg,
html.light [data-testid="code-block-copy"] svg,
html.light button[aria-label="Copy code"] svg,
html.light button[aria-label="Copy snippet"] svg,
html.light button[aria-label="Copy answer"] svg,
html.light button[data-copy="true"] svg,
html.light .copy-btn svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

html.light button:hover svg.lucide-copy {
  color: #ca8a04 !important;
  stroke: #ca8a04 !important;
}

html.light button[aria-label="Copy code"],
html.light button[aria-label="Copy snippet"],
html.light button[aria-label="Copy answer"],
html.light button[data-testid$="-copy"],
html.light [data-testid="code-block-copy"],
html.light button[data-copy="true"] {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  background-color: #ffffff !important;
}

html.light button[aria-label="Copy code"]:hover,
html.light button[aria-label="Copy snippet"]:hover,
html.light button[aria-label="Copy answer"]:hover,
html.light button[data-testid$="-copy"]:hover,
html.light [data-testid="code-block-copy"]:hover,
html.light button[data-copy="true"]:hover {
  color: #ca8a04 !important;
  border-color: rgba(234, 179, 8, 0.55) !important;
  background-color: #fefce8 !important;
}

html.light .copy-btn,
html.light [class*="copy-button"] {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

html.light .copy-btn:hover,
html.light [class*="copy-button"]:hover {
  color: #ca8a04 !important;
  background: #fefce8 !important;
}

html.light [data-testid="home-testimonials"] article,
html.light [data-testid="home-testimonials"] [class*="rounded-xl"][class*="bg-["] {
  box-shadow: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light [data-testid="home-testimonials"] [class*="bg-gradient"],
html.light [data-testid="home-testimonials"] [class*="shadow"] {
  box-shadow: none !important;
}

html.light .ck-sub-page {
  background: #fbfaf7 !important;
}

html.light body:has([data-testid="subscription-page"]) {
  background: #fbfaf7 !important;
}

html.light [data-testid="home-coach-visualizer-section"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light [data-testid="home-coach-visualizer-section"] .ck-coach-glow-1,
html.light [data-testid="home-coach-visualizer-section"] .ck-coach-glow-2 {
  display: none;  /* dark-mode glow blobs look muddy on white */
}

html.light [data-testid="home-coach-section"] h1,
html.light [data-testid="home-coach-section"] h2,
html.light [data-testid="home-coach-section"] .font-display,
html.light [data-testid="home-visualizer-copy"] h2,
html.light [data-testid="home-visualizer-copy"] .font-display {
  color: #0f172a !important;
}

html.light [data-testid="home-coach-section"] p,
html.light [data-testid="home-visualizer-copy"] p {
  color: #334155 !important;
}

html.light [data-testid="home-coach-section"] em,
html.light [data-testid="home-visualizer-copy"] em {
  color: #a16207 !important;
}

html.light [data-testid="home-coach-visualizer-section"] .grid {
  align-items: stretch;
}

html.light [data-testid="home-coach-section"],
html.light [data-testid="home-visualizer-copy"] {
  height: 100%;
}

html.light [data-testid="navbar-resources-mega"] {
  background-color: #0a0a0a !important;
  color: #f8fafc !important;
}

html.light [data-testid="navbar-resources-mega"] .font-display,
html.light [data-testid="navbar-resources-mega"] a > div > div:first-child {
  color: #ffffff !important;
}

html.light [data-testid="navbar-resources-mega"] a div.text-\[10\.5px\],
html.light [data-testid="navbar-resources-mega"] a .text-slate-500,
html.light [data-testid="navbar-resources-mega"] a p {
  color: #94a3b8 !important;
}

html.light [data-testid="navbar-resources-mega"] a:hover .font-display,
html.light [data-testid="navbar-resources-mega"] a:hover > div > div:first-child {
  color: #facc15 !important;
}

html.light [data-testid="navbar-resources-mega"] a:hover .text-slate-500,
html.light [data-testid="navbar-resources-mega"] a:hover p {
  color: #cbd5e1 !important;
}

html.light [data-testid="resources-mega-practice-featured"] .text-emerald-400 {
  color: #10b981 !important;
}

html.light .ck-geo-hero { background: #fbfaf7; }

html.light [data-testid="language-toggle"] {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light [data-testid="language-toggle"]:hover {
  color: #ca8a04 !important;
  border-color: rgba(234, 179, 8, 0.55) !important;
}

html.light [data-testid="language-menu"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

html.light [data-testid="language-menu"] button {
  color: #334155 !important;
}

html.light [data-testid="language-menu"] button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light [data-testid="language-menu"] button[data-testid^="language-option-"].text-yellow-400,
html.light [data-testid="language-menu"] .text-yellow-400 {
  color: #ca8a04 !important;
}

html.light [data-testid="language-menu"] > div:last-child {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
  color: #64748b !important;
}


/* ───────────────────────────────────────────────────────────────────────
   Compiler editor — light mode FIX
   The blanket textarea/pre rule above gives the textarea an OPAQUE dark
   background which sits on top of the highlighted <pre>, hiding the
   syntax-highlighted code completely. The fix is two-fold:
   1. Force the textarea fully transparent so the <pre> behind it shows.
   2. Restore Prism token colors (the `.bg-[#1E1E2E] *` rule above
      blanket-overrides every descendant to off-white, killing rainbow
      syntax highlighting). The editor body itself stays dark navy
      (matches the "IDE" aesthetic in both themes).
   ──────────────────────────────────────────────────────────────────── */
html.light [data-testid="compiler-page"] textarea.ck-editor-textarea,
html.light [data-testid="compiler-embed"] textarea.ck-editor-textarea,
html.light textarea.ck-editor-textarea {
  background: transparent !important;
  color: rgba(0, 0, 0, 0) !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0) !important;
  caret-color: #10b981 !important;
}
html.light [data-testid="compiler-page"] pre.ck-editor-pre,
html.light [data-testid="compiler-embed"] pre.ck-editor-pre,
html.light pre.ck-editor-pre {
  background: transparent !important;
  color: #f1f5f9 !important;
}
html.light .ck-editor-pre .token.keyword,
html.light .ck-editor-pre .token.selector,
html.light .ck-editor-pre .token.important,
html.light .ck-editor-pre .token.atrule,
html.light .ck-editor-pre .token.attr-name { color: #c792ea !important; }
html.light .ck-editor-pre .token.function { color: #82aaff !important; }
html.light .ck-editor-pre .token.string,
html.light .ck-editor-pre .token.char,
html.light .ck-editor-pre .token.attr-value { color: #c3e88d !important; }
html.light .ck-editor-pre .token.number,
html.light .ck-editor-pre .token.boolean,
html.light .ck-editor-pre .token.constant { color: #f78c6c !important; }
html.light .ck-editor-pre .token.comment,
html.light .ck-editor-pre .token.prolog,
html.light .ck-editor-pre .token.doctype,
html.light .ck-editor-pre .token.cdata { color: #94a3b8 !important; font-style: italic; }
html.light .ck-editor-pre .token.operator,
html.light .ck-editor-pre .token.punctuation { color: #89ddff !important; }
html.light .ck-editor-pre .token.class-name,
html.light .ck-editor-pre .token.builtin { color: #ffcb6b !important; }
html.light .ck-editor-pre .token.tag,
html.light .ck-editor-pre .token.property { color: #f07178 !important; }

/* iter 214 — light-mode overrides extracted into separate file */

*, ::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 */ /* 3 */
  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::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;
}

:root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 217 33% 17%;
    --card-foreground: 210 40% 98%;
    --popover: 217 33% 17%;
    --popover-foreground: 210 40% 98%;
    --primary: 160 84% 39%;
    --primary-foreground: 0 0% 0%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    --muted: 215 25% 27%;
    --muted-foreground: 215 20% 65%;
    --accent: 198 93% 60%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 62.8% 45%;
    --destructive-foreground: 210 40% 98%;
    --border: 215 25% 27%;
    --input: 215 25% 27%;
    --ring: 160 84% 39%;
    --radius: 14px;
  }

html.light {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
  }
.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;
  }
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.\!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: -webkit-sticky;
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-1{
  inset: 0.25rem;
}
.inset-2{
  inset: 0.5rem;
}
.inset-3{
  inset: 0.75rem;
}
.inset-4{
  inset: 1rem;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-bottom-12{
  bottom: -3rem;
}
.-bottom-20{
  bottom: -5rem;
}
.-bottom-24{
  bottom: -6rem;
}
.-bottom-28{
  bottom: -7rem;
}
.-bottom-32{
  bottom: -8rem;
}
.-bottom-40{
  bottom: -10rem;
}
.-bottom-6{
  bottom: -1.5rem;
}
.-bottom-8{
  bottom: -2rem;
}
.-left-10{
  left: -2.5rem;
}
.-left-12{
  left: -3rem;
}
.-left-20{
  left: -5rem;
}
.-left-24{
  left: -6rem;
}
.-left-32{
  left: -8rem;
}
.-left-\[27px\]{
  left: -27px;
}
.-right-0\.5{
  right: -0.125rem;
}
.-right-1{
  right: -0.25rem;
}
.-right-12{
  right: -3rem;
}
.-right-16{
  right: -4rem;
}
.-right-20{
  right: -5rem;
}
.-right-24{
  right: -6rem;
}
.-right-32{
  right: -8rem;
}
.-right-6{
  right: -1.5rem;
}
.-right-8{
  right: -2rem;
}
.-top-0\.5{
  top: -0.125rem;
}
.-top-1{
  top: -0.25rem;
}
.-top-12{
  top: -3rem;
}
.-top-16{
  top: -4rem;
}
.-top-20{
  top: -5rem;
}
.-top-3{
  top: -0.75rem;
}
.-top-32{
  top: -8rem;
}
.-top-40{
  top: -10rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-2\.5{
  bottom: 0.625rem;
}
.bottom-20{
  bottom: 5rem;
}
.bottom-24{
  bottom: 6rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-44{
  bottom: 11rem;
}
.bottom-6{
  bottom: 1.5rem;
}
.bottom-\[88px\]{
  bottom: 88px;
}
.left-0{
  left: 0px;
}
.left-1{
  left: 0.25rem;
}
.left-1\.5{
  left: 0.375rem;
}
.left-1\/2{
  left: 50%;
}
.left-1\/4{
  left: 25%;
}
.left-2{
  left: 0.5rem;
}
.left-2\.5{
  left: 0.625rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.left-6{
  left: 1.5rem;
}
.left-\[50\%\]{
  left: 50%;
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-1\/4{
  right: 25%;
}
.right-2{
  right: 0.5rem;
}
.right-2\.5{
  right: 0.625rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-6{
  right: 1.5rem;
}
.top-0{
  top: 0px;
}
.top-1{
  top: 0.25rem;
}
.top-1\.5{
  top: 0.375rem;
}
.top-1\/2{
  top: 50%;
}
.top-12{
  top: 3rem;
}
.top-16{
  top: 4rem;
}
.top-2{
  top: 0.5rem;
}
.top-20{
  top: 5rem;
}
.top-28{
  top: 7rem;
}
.top-3{
  top: 0.75rem;
}
.top-3\.5{
  top: 0.875rem;
}
.top-32{
  top: 8rem;
}
.top-4{
  top: 1rem;
}
.top-44{
  top: 11rem;
}
.top-60{
  top: 15rem;
}
.top-\[1px\]{
  top: 1px;
}
.top-\[50\%\]{
  top: 50%;
}
.top-\[60\%\]{
  top: 60%;
}
.top-full{
  top: 100%;
}
.-z-10{
  z-index: -10;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[10000\]{
  z-index: 10000;
}
.z-\[100\]{
  z-index: 100;
}
.z-\[1\]{
  z-index: 1;
}
.z-\[60\]{
  z-index: 60;
}
.z-\[9999\]{
  z-index: 9999;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.m-0{
  margin: 0px;
}
.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5{
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-5{
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-1\.5{
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-7{
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-1{
  margin-bottom: -0.25rem;
}
.-mb-5{
  margin-bottom: -1.25rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-ml-4{
  margin-left: -1rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-2{
  margin-top: -0.5rem;
}
.-mt-4{
  margin-top: -1rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-12{
  margin-bottom: 3rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-7{
  margin-bottom: 1.75rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-0\.5{
  margin-right: 0.125rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.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-12{
  margin-top: 3rem;
}
.mt-14{
  margin-top: 3.5rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-20{
  margin-top: 5rem;
}
.mt-24{
  margin-top: 6rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-auto{
  margin-top: auto;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.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;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.aspect-\[1\.25\/1\]{
  aspect-ratio: 1.25/1;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.aspect-video{
  aspect-ratio: 16 / 9;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.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-44{
  height: 11rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: 1.25rem;
}
.h-56{
  height: 14rem;
}
.h-6{
  height: 1.5rem;
}
.h-60{
  height: 15rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-72{
  height: 18rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[1px\]{
  height: 1px;
}
.h-\[28rem\]{
  height: 28rem;
}
.h-\[3px\]{
  height: 3px;
}
.h-\[40vh\]{
  height: 40vh;
}
.h-\[420px\]{
  height: 420px;
}
.h-\[460px\]{
  height: 460px;
}
.h-\[480px\]{
  height: 480px;
}
.h-\[520px\]{
  height: 520px;
}
.h-\[600px\]{
  height: 600px;
}
.h-\[640px\]{
  height: 640px;
}
.h-\[760px\]{
  height: 760px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\]{
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\]{
  height: var(--radix-select-trigger-height);
}
.h-auto{
  height: auto;
}
.h-fit{
  height: -webkit-fit-content;
  height: fit-content;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.max-h-44{
  max-height: 11rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-\[--radix-context-menu-content-available-height\]{
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\]{
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[260px\]{
  max-height: 260px;
}
.max-h-\[300px\]{
  max-height: 300px;
}
.max-h-\[420px\]{
  max-height: 420px;
}
.max-h-\[45vh\]{
  max-height: 45vh;
}
.max-h-\[60vh\]{
  max-height: 60vh;
}
.max-h-\[70vh\]{
  max-height: 70vh;
}
.max-h-\[88vh\]{
  max-height: 88vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-\[calc\(100vh-5rem\)\]{
  max-height: calc(100vh - 5rem);
}
.max-h-\[calc\(100vh-8rem\)\]{
  max-height: calc(100vh - 8rem);
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-full{
  max-height: 100%;
}
.max-h-screen{
  max-height: 100vh;
}
.min-h-\[100px\]{
  min-height: 100px;
}
.min-h-\[140px\]{
  min-height: 140px;
}
.min-h-\[180px\]{
  min-height: 180px;
}
.min-h-\[260px\]{
  min-height: 260px;
}
.min-h-\[280px\]{
  min-height: 280px;
}
.min-h-\[38px\]{
  min-height: 38px;
}
.min-h-\[420px\]{
  min-height: 420px;
}
.min-h-\[60px\]{
  min-height: 60px;
}
.min-h-\[60vh\]{
  min-height: 60vh;
}
.min-h-\[70vh\]{
  min-height: 70vh;
}
.min-h-\[calc\(100vh-5rem\)\]{
  min-height: calc(100vh - 5rem);
}
.min-h-screen{
  min-height: 100vh;
}
.w-0\.5{
  width: 0.125rem;
}
.w-1\.5{
  width: 0.375rem;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-3\/4{
  width: 75%;
}
.w-32{
  width: 8rem;
}
.w-4{
  width: 1rem;
}
.w-44{
  width: 11rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-52{
  width: 13rem;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-60{
  width: 15rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[100px\]{
  width: 100px;
}
.w-\[1200px\]{
  width: 1200px;
}
.w-\[1px\]{
  width: 1px;
}
.w-\[28rem\]{
  width: 28rem;
}
.w-\[340px\]{
  width: 340px;
}
.w-\[3px\]{
  width: 3px;
}
.w-\[420px\]{
  width: 420px;
}
.w-\[460px\]{
  width: 460px;
}
.w-\[480px\]{
  width: 480px;
}
.w-\[520px\]{
  width: 520px;
}
.w-\[600px\]{
  width: 600px;
}
.w-\[60vw\]{
  width: 60vw;
}
.w-\[min\(380px\2c calc\(100vw-2rem\)\)\]{
  width: min(380px, calc(100vw - 2rem));
}
.w-full{
  width: 100%;
}
.w-max{
  width: -webkit-max-content;
  width: max-content;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-10{
  min-width: 2.5rem;
}
.min-w-8{
  min-width: 2rem;
}
.min-w-9{
  min-width: 2.25rem;
}
.min-w-\[12rem\]{
  min-width: 12rem;
}
.min-w-\[16px\]{
  min-width: 16px;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[220px\]{
  min-width: 220px;
}
.min-w-\[260px\]{
  min-width: 260px;
}
.min-w-\[8rem\]{
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\]{
  min-width: var(--radix-select-trigger-width);
}
.min-w-full{
  min-width: 100%;
}
.min-w-max{
  min-width: -webkit-max-content;
  min-width: max-content;
}
.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-\[100px\]{
  max-width: 100px;
}
.max-w-\[120px\]{
  max-width: 120px;
}
.max-w-\[140px\]{
  max-width: 140px;
}
.max-w-\[160px\]{
  max-width: 160px;
}
.max-w-\[18rem\]{
  max-width: 18rem;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[220px\]{
  max-width: 220px;
}
.max-w-\[85\%\]{
  max-width: 85%;
}
.max-w-\[88\%\]{
  max-width: 88%;
}
.max-w-\[95vw\]{
  max-width: 95vw;
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-max{
  max-width: -webkit-max-content;
  max-width: max-content;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.grow{
  flex-grow: 1;
}
.grow-0{
  flex-grow: 0;
}
.basis-full{
  flex-basis: 100%;
}
.caption-bottom{
  caption-side: bottom;
}
.border-collapse{
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\]{
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\]{
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\]{
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\]{
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\]{
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\]{
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\]{
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-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-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\]{
  --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-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90{
  --tw-rotate: -90deg;
  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));
}
.rotate-180{
  --tw-rotate: 180deg;
  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));
}
.rotate-45{
  --tw-rotate: 45deg;
  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));
}
.rotate-90{
  --tw-rotate: 90deg;
  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 ping{

  75%, 100%{
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping{
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse{

  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-col-resize{
  cursor: col-resize;
}
.cursor-default{
  cursor: default;
}
.cursor-grab{
  cursor: grab;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-wait{
  cursor: wait;
}
.touch-none{
  touch-action: none;
}
.select-none{
  -webkit-user-select: none;
          user-select: none;
}
.resize-none{
  resize: none;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.snap-x{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory{
  --tw-scroll-snap-strictness: mandatory;
}
.snap-center{
  scroll-snap-align: center;
}
.scroll-mt-28{
  scroll-margin-top: 7rem;
}
.scroll-mt-40{
  scroll-margin-top: 10rem;
}
.scroll-mt-44{
  scroll-margin-top: 11rem;
}
.list-outside{
  list-style-position: outside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.auto-rows-fr{
  grid-auto-rows: minmax(0, 1fr);
}
.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-\[120px_1fr\]{
  grid-template-columns: 120px 1fr;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.place-items-center{
  place-items: center;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.justify-around{
  justify-content: space-around;
}
.gap-0{
  gap: 0px;
}
.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-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[2px\]{
  gap: 2px;
}
.gap-\[3px\]{
  gap: 3px;
}
.gap-px{
  gap: 1px;
}
.gap-x-3{
  column-gap: 0.75rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * 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-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * 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-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * 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));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]){
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[\#1a1a1a\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(26 26 26 / 1);
  border-color: rgb(26 26 26 / var(--tw-divide-opacity, 1));
}
.divide-\[\#1f1f1f\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(31 31 31 / 1);
  border-color: rgb(31 31 31 / var(--tw-divide-opacity, 1));
}
.divide-\[\#222\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(34 34 34 / 1);
  border-color: rgb(34 34 34 / var(--tw-divide-opacity, 1));
}
.divide-\[\#262626\] > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(38 38 38 / 1);
  border-color: rgb(38 38 38 / var(--tw-divide-opacity, 1));
}
.divide-\[var\(--border\)\] > :not([hidden]) ~ :not([hidden]){
  border-color: rgba(148, 163, 184, 0.14);
  border-color: var(--border);
}
.self-start{
  align-self: flex-start;
}
.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;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.overscroll-contain{
  overscroll-behavior: contain;
}
.scroll-smooth{
  scroll-behavior: smooth;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre{
  white-space: pre;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-\[10px\]{
  border-radius: 10px;
}
.rounded-\[14px\]{
  border-radius: 14px;
}
.rounded-\[2px\]{
  border-radius: 2px;
}
.rounded-\[3px\]{
  border-radius: 3px;
}
.rounded-\[4px\]{
  border-radius: 4px;
}
.rounded-\[5px\]{
  border-radius: 5px;
}
.rounded-\[6px\]{
  border-radius: 6px;
}
.rounded-\[8px\]{
  border-radius: 8px;
}
.rounded-\[inherit\]{
  border-radius: inherit;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 14px;
  border-radius: var(--radius);
}
.rounded-md{
  border-radius: calc(14px - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm{
  border-radius: calc(14px - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-r-\[5px\]{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[10px\]{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-tl-sm{
  border-top-left-radius: calc(14px - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-\[6px\]{
  border-width: 6px;
}
.border-x{
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-0{
  border-bottom-width: 0px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-dashed{
  border-style: dashed;
}
.\!border-yellow-500\/40{
  border-color: rgb(234 179 8 / 0.4) !important;
}
.border-\[\#0a0a0a\]{
  --tw-border-opacity: 1;
  border-color: rgb(10 10 10 / 1);
  border-color: rgb(10 10 10 / var(--tw-border-opacity, 1));
}
.border-\[\#1a1a1a\]{
  --tw-border-opacity: 1;
  border-color: rgb(26 26 26 / 1);
  border-color: rgb(26 26 26 / var(--tw-border-opacity, 1));
}
.border-\[\#1c1c1c\]{
  --tw-border-opacity: 1;
  border-color: rgb(28 28 28 / 1);
  border-color: rgb(28 28 28 / var(--tw-border-opacity, 1));
}
.border-\[\#1f1f1f\]{
  --tw-border-opacity: 1;
  border-color: rgb(31 31 31 / 1);
  border-color: rgb(31 31 31 / var(--tw-border-opacity, 1));
}
.border-\[\#222\]{
  --tw-border-opacity: 1;
  border-color: rgb(34 34 34 / 1);
  border-color: rgb(34 34 34 / var(--tw-border-opacity, 1));
}
.border-\[\#262626\]{
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / 1);
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.border-\[var\(--border\)\]{
  border-color: rgba(148, 163, 184, 0.14);
  border-color: var(--border);
}
.border-amber-500\/40{
  border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/60{
  border-color: rgb(245 158 11 / 0.6);
}
.border-amber-600\/50{
  border-color: rgb(217 119 6 / 0.5);
}
.border-blue-500\/40{
  border-color: rgb(59 130 246 / 0.4);
}
.border-cyan-400{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / 1);
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.border-cyan-400\/40{
  border-color: rgb(34 211 238 / 0.4);
}
.border-cyan-400\/50{
  border-color: rgb(34 211 238 / 0.5);
}
.border-cyan-500{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / 1);
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.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-500\/50{
  border-color: rgb(6 182 212 / 0.5);
}
.border-destructive{
  border-color: hsl(0 62.8% 45%);
  border-color: hsl(var(--destructive));
}
.border-destructive\/50{
  border-color: hsl(0 62.8% 45% / 0.5);
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-400{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.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-500{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-emerald-500\/15{
  border-color: rgb(16 185 129 / 0.15);
}
.border-emerald-500\/20{
  border-color: rgb(16 185 129 / 0.2);
}
.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-500\/60{
  border-color: rgb(16 185 129 / 0.6);
}
.border-emerald-500\/70{
  border-color: rgb(16 185 129 / 0.7);
}
.border-emerald-700{
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / 1);
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.border-emerald-700\/30{
  border-color: rgb(4 120 87 / 0.3);
}
.border-emerald-700\/50{
  border-color: rgb(4 120 87 / 0.5);
}
.border-fuchsia-400\/50{
  border-color: rgb(232 121 249 / 0.5);
}
.border-fuchsia-500\/30{
  border-color: rgb(217 70 239 / 0.3);
}
.border-fuchsia-500\/40{
  border-color: rgb(217 70 239 / 0.4);
}
.border-fuchsia-500\/50{
  border-color: rgb(217 70 239 / 0.5);
}
.border-indigo-500{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / 1);
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}
.border-indigo-500\/40{
  border-color: rgb(99 102 241 / 0.4);
}
.border-indigo-500\/50{
  border-color: rgb(99 102 241 / 0.5);
}
.border-input{
  border-color: hsl(215 25% 27%);
  border-color: hsl(var(--input));
}
.border-lime-500\/40{
  border-color: rgb(132 204 22 / 0.4);
}
.border-orange-500{
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-orange-500\/40{
  border-color: rgb(249 115 22 / 0.4);
}
.border-orange-500\/50{
  border-color: rgb(249 115 22 / 0.5);
}
.border-pink-500{
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / 1);
  border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
}
.border-pink-500\/40{
  border-color: rgb(236 72 153 / 0.4);
}
.border-pink-500\/50{
  border-color: rgb(236 72 153 / 0.5);
}
.border-primary{
  border-color: hsl(#10B981);
  border-color: hsl(var(--primary));
}
.border-primary\/50{
  border-color: hsl(#10B981 / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-purple-500{
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / 1);
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/40{
  border-color: rgb(168 85 247 / 0.4);
}
.border-purple-500\/60{
  border-color: rgb(168 85 247 / 0.6);
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40{
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50{
  border-color: rgb(239 68 68 / 0.5);
}
.border-red-500\/60{
  border-color: rgb(239 68 68 / 0.6);
}
.border-red-900\/60{
  border-color: rgb(127 29 29 / 0.6);
}
.border-rose-500\/40{
  border-color: rgb(244 63 94 / 0.4);
}
.border-rose-500\/50{
  border-color: rgb(244 63 94 / 0.5);
}
.border-rose-500\/60{
  border-color: rgb(244 63 94 / 0.6);
}
.border-slate-300\/50{
  border-color: rgb(203 213 225 / 0.5);
}
.border-slate-300\/60{
  border-color: rgb(203 213 225 / 0.6);
}
.border-slate-500\/40{
  border-color: rgb(100 116 139 / 0.4);
}
.border-slate-600{
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / 1);
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-slate-600\/40{
  border-color: rgb(71 85 105 / 0.4);
}
.border-slate-700{
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / 1);
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-700\/70{
  border-color: rgb(51 65 85 / 0.7);
}
.border-slate-700\/80{
  border-color: rgb(51 65 85 / 0.8);
}
.border-slate-800{
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / 1);
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-slate-800\/60{
  border-color: rgb(30 41 59 / 0.6);
}
.border-teal-500\/40{
  border-color: rgb(20 184 166 / 0.4);
}
.border-transparent{
  border-color: transparent;
}
.border-violet-500{
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / 1);
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.border-violet-500\/40{
  border-color: rgb(139 92 246 / 0.4);
}
.border-violet-500\/50{
  border-color: rgb(139 92 246 / 0.5);
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/5{
  border-color: rgb(255 255 255 / 0.05);
}
.border-yellow-300{
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / 1);
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.border-yellow-400\/60{
  border-color: rgb(250 204 21 / 0.6);
}
.border-yellow-400\/70{
  border-color: rgb(250 204 21 / 0.7);
}
.border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/10{
  border-color: rgb(234 179 8 / 0.1);
}
.border-yellow-500\/20{
  border-color: rgb(234 179 8 / 0.2);
}
.border-yellow-500\/30{
  border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-500\/40{
  border-color: rgb(234 179 8 / 0.4);
}
.border-yellow-500\/50{
  border-color: rgb(234 179 8 / 0.5);
}
.border-yellow-500\/60{
  border-color: rgb(234 179 8 / 0.6);
}
.border-zinc-800{
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-l-transparent{
  border-left-color: transparent;
}
.border-t-transparent{
  border-top-color: transparent;
}
.\!bg-\[\#1a1a1a\]{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(26 26 26 / 1) !important;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-emerald-500{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(16 185 129 / 1) !important;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#050505\]{
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / 1);
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.bg-\[\#050505\]\/80{
  background-color: rgb(5 5 5 / 0.8);
}
.bg-\[\#050505\]\/90{
  background-color: rgb(5 5 5 / 0.9);
}
.bg-\[\#050505\]\/95{
  background-color: rgb(5 5 5 / 0.95);
}
.bg-\[\#070707\]{
  --tw-bg-opacity: 1;
  background-color: rgb(7 7 7 / 1);
  background-color: rgb(7 7 7 / var(--tw-bg-opacity, 1));
}
.bg-\[\#080808\]{
  --tw-bg-opacity: 1;
  background-color: rgb(8 8 8 / 1);
  background-color: rgb(8 8 8 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0a0a0a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / 1);
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0a0a0a\]\/80{
  background-color: rgb(10 10 10 / 0.8);
}
.bg-\[\#0a0a0a\]\/95{
  background-color: rgb(10 10 10 / 0.95);
}
.bg-\[\#0a0e1a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 14 26 / 1);
  background-color: rgb(10 14 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0a1020\]{
  --tw-bg-opacity: 1;
  background-color: rgb(10 16 32 / 1);
  background-color: rgb(10 16 32 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0b1220\]{
  --tw-bg-opacity: 1;
  background-color: rgb(11 18 32 / 1);
  background-color: rgb(11 18 32 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0c0c0c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(12 12 12 / 1);
  background-color: rgb(12 12 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0c0c0d\]\/80{
  background-color: rgb(12 12 13 / 0.8);
}
.bg-\[\#0d0d0d\]{
  --tw-bg-opacity: 1;
  background-color: rgb(13 13 13 / 1);
  background-color: rgb(13 13 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e0e0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 14 14 / 1);
  background-color: rgb(14 14 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e0e10\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 14 16 / 1);
  background-color: rgb(14 14 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e1014\]{
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 20 / 1);
  background-color: rgb(14 16 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f0f0f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / 1);
  background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));
}
.bg-\[\#101010\]{
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / 1);
  background-color: rgb(16 16 16 / var(--tw-bg-opacity, 1));
}
.bg-\[\#101010\]\/60{
  background-color: rgb(16 16 16 / 0.6);
}
.bg-\[\#111\]{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / 1);
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#121212\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / 1);
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-\[\#121212\]\/60{
  background-color: rgb(18 18 18 / 0.6);
}
.bg-\[\#141414\]{
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / 1);
  background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#161616\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 22 / 1);
  background-color: rgb(22 22 22 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16161E\]{
  --tw-bg-opacity: 1;
  background-color: rgb(22 22 30 / 1);
  background-color: rgb(22 22 30 / var(--tw-bg-opacity, 1));
}
.bg-\[\#181824\]{
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 36 / 1);
  background-color: rgb(24 24 36 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1E1E2E\]{
  --tw-bg-opacity: 1;
  background-color: rgb(30 30 46 / 1);
  background-color: rgb(30 30 46 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1a1a1a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / 1);
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1c1a0e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(28 26 14 / 1);
  background-color: rgb(28 26 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1f1f1f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(31 31 31 / 1);
  background-color: rgb(31 31 31 / var(--tw-bg-opacity, 1));
}
.bg-\[\#262626\]{
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / 1);
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0ece4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(240 236 228 / 1);
  background-color: rgb(240 236 228 / var(--tw-bg-opacity, 1));
}
.bg-accent{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/5{
  background-color: rgb(245 158 11 / 0.05);
}
.bg-background{
  background-color: hsl(222 47% 11%);
  background-color: hsl(var(--background));
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.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\/90{
  background-color: rgb(0 0 0 / 0.9);
}
.bg-blue-500\/5{
  background-color: rgb(59 130 246 / 0.05);
}
.bg-border{
  background-color: hsl(rgba(148, 163, 184, 0.14));
  background-color: hsl(var(--border));
}
.bg-card{
  background-color: hsl(217 33% 17%);
  background-color: hsl(var(--card));
}
.bg-cyan-300{
  --tw-bg-opacity: 1;
  background-color: rgb(103 232 249 / 1);
  background-color: rgb(103 232 249 / var(--tw-bg-opacity, 1));
}
.bg-cyan-400{
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / 1);
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / 1);
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500\/15{
  background-color: rgb(6 182 212 / 0.15);
}
.bg-cyan-500\/5{
  background-color: rgb(6 182 212 / 0.05);
}
.bg-destructive{
  background-color: hsl(0 62.8% 45%);
  background-color: hsl(var(--destructive));
}
.bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / 1);
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 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\/30{
  background-color: rgb(16 185 129 / 0.3);
}
.bg-emerald-500\/5{
  background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-500\/60{
  background-color: rgb(16 185 129 / 0.6);
}
.bg-emerald-500\/70{
  background-color: rgb(16 185 129 / 0.7);
}
.bg-emerald-500\/80{
  background-color: rgb(16 185 129 / 0.8);
}
.bg-emerald-500\/\[0\.03\]{
  background-color: rgb(16 185 129 / 0.03);
}
.bg-emerald-500\/\[0\.04\]{
  background-color: rgb(16 185 129 / 0.04);
}
.bg-emerald-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-900\/30{
  background-color: rgb(6 78 59 / 0.3);
}
.bg-foreground{
  background-color: hsl(210 40% 98%);
  background-color: hsl(var(--foreground));
}
.bg-fuchsia-500\/10{
  background-color: rgb(217 70 239 / 0.1);
}
.bg-fuchsia-500\/5{
  background-color: rgb(217 70 239 / 0.05);
}
.bg-fuchsia-950\/20{
  background-color: rgb(74 4 78 / 0.2);
}
.bg-indigo-500\/15{
  background-color: rgb(99 102 241 / 0.15);
}
.bg-indigo-500\/5{
  background-color: rgb(99 102 241 / 0.05);
}
.bg-lime-500\/5{
  background-color: rgb(132 204 22 / 0.05);
}
.bg-muted{
  background-color: hsl(215 25% 27%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50{
  background-color: hsl(215 25% 27% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-orange-500\/10{
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/15{
  background-color: rgb(249 115 22 / 0.15);
}
.bg-orange-500\/5{
  background-color: rgb(249 115 22 / 0.05);
}
.bg-pink-500\/15{
  background-color: rgb(236 72 153 / 0.15);
}
.bg-pink-500\/5{
  background-color: rgb(236 72 153 / 0.05);
}
.bg-popover{
  background-color: hsl(217 33% 17%);
  background-color: hsl(var(--popover));
}
.bg-primary{
  background-color: hsl(#10B981);
  background-color: hsl(var(--primary));
}
.bg-primary\/10{
  background-color: hsl(#10B981 / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20{
  background-color: hsl(#10B981 / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / 1);
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10{
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/5{
  background-color: rgb(168 85 247 / 0.05);
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15{
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/5{
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-500\/80{
  background-color: rgb(239 68 68 / 0.8);
}
.bg-red-900\/40{
  background-color: rgb(127 29 29 / 0.4);
}
.bg-rose-900\/30{
  background-color: rgb(136 19 55 / 0.3);
}
.bg-rose-950\/20{
  background-color: rgb(76 5 25 / 0.2);
}
.bg-rose-950\/30{
  background-color: rgb(76 5 25 / 0.3);
}
.bg-secondary{
  background-color: hsl(#EAB308);
  background-color: hsl(var(--secondary));
}
.bg-slate-500\/10{
  background-color: rgb(100 116 139 / 0.1);
}
.bg-slate-500\/5{
  background-color: rgb(100 116 139 / 0.05);
}
.bg-slate-600{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / 1);
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/60{
  background-color: rgb(51 65 85 / 0.6);
}
.bg-slate-800{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / 1);
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/50{
  background-color: rgb(15 23 42 / 0.5);
}
.bg-slate-900\/60{
  background-color: rgb(15 23 42 / 0.6);
}
.bg-slate-900\/70{
  background-color: rgb(15 23 42 / 0.7);
}
.bg-slate-900\/80{
  background-color: rgb(15 23 42 / 0.8);
}
.bg-slate-950{
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / 1);
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/40{
  background-color: rgb(2 6 23 / 0.4);
}
.bg-slate-950\/50{
  background-color: rgb(2 6 23 / 0.5);
}
.bg-slate-950\/60{
  background-color: rgb(2 6 23 / 0.6);
}
.bg-slate-950\/70{
  background-color: rgb(2 6 23 / 0.7);
}
.bg-teal-500\/5{
  background-color: rgb(20 184 166 / 0.05);
}
.bg-transparent{
  background-color: transparent;
}
.bg-violet-500\/15{
  background-color: rgb(139 92 246 / 0.15);
}
.bg-violet-500\/5{
  background-color: rgb(139 92 246 / 0.05);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/15{
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5{
  background-color: rgb(255 255 255 / 0.05);
}
.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / 1);
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / 1);
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/0{
  background-color: rgb(234 179 8 / 0);
}
.bg-yellow-500\/10{
  background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-500\/15{
  background-color: rgb(234 179 8 / 0.15);
}
.bg-yellow-500\/20{
  background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-500\/5{
  background-color: rgb(234 179 8 / 0.05);
}
.bg-yellow-500\/80{
  background-color: rgb(234 179 8 / 0.8);
}
.bg-yellow-500\/\[0\.04\]{
  background-color: rgb(234 179 8 / 0.04);
}
.bg-zinc-900\/50{
  background-color: rgb(24 24 27 / 0.5);
}
.bg-\[radial-gradient\(120\%_100\%_at_50\%_0\%\2c rgba\(0\2c 0\2c 0\2c 0\)_40\%\2c rgba\(0\2c 0\2c 0\2c \.55\)_100\%\)\]{
  background-image: radial-gradient(120% 100% at 50% 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
}
.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-\[\#042030\]{
  --tw-gradient-from: #042030 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(4 32 48 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#050505\]\/80{
  --tw-gradient-from: rgb(5 5 5 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 5 5 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#052219\]{
  --tw-gradient-from: #052219 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 34 25 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#080808\]{
  --tw-gradient-from: #080808 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 8 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0b1220\]{
  --tw-gradient-from: #0b1220 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(11 18 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0c1410\]{
  --tw-gradient-from: #0c1410 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 20 16 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0e0e0e\]{
  --tw-gradient-from: #0e0e0e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 14 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#101010\]{
  --tw-gradient-from: #101010 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 16 16 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#120f2e\]{
  --tw-gradient-from: #120f2e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 15 46 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#121212\]{
  --tw-gradient-from: #121212 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(18 18 18 / 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-\[\#1a0f2e\]{
  --tw-gradient-from: #1a0f2e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 15 46 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#1a1a2e\]{
  --tw-gradient-from: #1a1a2e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(26 26 46 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#2a0423\]{
  --tw-gradient-from: #2a0423 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 4 35 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#2a1604\]{
  --tw-gradient-from: #2a1604 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 22 4 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#2a2204\]{
  --tw-gradient-from: #2a2204 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 34 4 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-400\/20{
  --tw-gradient-from: rgb(251 191 36 / 0.2) 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-700\/30{
  --tw-gradient-from: rgb(180 83 9 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(180 83 9 / 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-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-400\/20{
  --tw-gradient-from: rgb(34 211 238 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500{
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/15{
  --tw-gradient-from: rgb(6 182 212 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-400{
  --tw-gradient-from: #34d399 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-400\/20{
  --tw-gradient-from: rgb(52 211 153 / 0.2) 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-500\/10{
  --tw-gradient-from: rgb(16 185 129 / 0.1) 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-500\/15{
  --tw-gradient-from: rgb(16 185 129 / 0.15) 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-600{
  --tw-gradient-from: #059669 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);
}
.from-emerald-950\/40{
  --tw-gradient-from: rgb(2 44 34 / 0.4) 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-400{
  --tw-gradient-from: #e879f9 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-500{
  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-950\/30{
  --tw-gradient-from: rgb(74 4 78 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 4 78 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-950\/40{
  --tw-gradient-from: rgb(74 4 78 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 4 78 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-400\/20{
  --tw-gradient-from: rgb(129 140 248 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-400\/20{
  --tw-gradient-from: rgb(251 146 60 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500{
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-400\/20{
  --tw-gradient-from: rgb(244 114 182 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-500\/15{
  --tw-gradient-from: rgb(236 72 153 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/15{
  --tw-gradient-from: rgb(168 85 247 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/15{
  --tw-gradient-from: rgb(239 68 68 / 0.15) 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-500{
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-400\/20{
  --tw-gradient-from: rgb(56 189 248 / 0.2) 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-slate-400\/20{
  --tw-gradient-from: rgb(148 163 184 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-700{
  --tw-gradient-from: #334155 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent{
  --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);
}
.from-violet-500{
  --tw-gradient-from: #8b5cf6 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-yellow-400{
  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/10{
  --tw-gradient-from: rgb(234 179 8 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/15{
  --tw-gradient-from: rgb(234 179 8 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/20{
  --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/30{
  --tw-gradient-from: rgb(234 179 8 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#050505\]\/85{
  --tw-gradient-to: rgb(5 5 5 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 5 5 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#0a0a0a\]{
  --tw-gradient-to: rgb(10 10 10 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0a0a0a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#16162b\]{
  --tw-gradient-to: rgb(22 22 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #16162b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/55{
  --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.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-950{
  --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #020617 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-400{
  --tw-gradient-to: rgb(250 204 21 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#042030\]{
  --tw-gradient-to: #042030 var(--tw-gradient-to-position);
}
.to-\[\#050505\]{
  --tw-gradient-to: #050505 var(--tw-gradient-to-position);
}
.to-\[\#050505\]\/40{
  --tw-gradient-to: rgb(5 5 5 / 0.4) var(--tw-gradient-to-position);
}
.to-\[\#052219\]{
  --tw-gradient-to: #052219 var(--tw-gradient-to-position);
}
.to-\[\#0a0a0a\]{
  --tw-gradient-to: #0a0a0a var(--tw-gradient-to-position);
}
.to-\[\#0b1220\]{
  --tw-gradient-to: #0b1220 var(--tw-gradient-to-position);
}
.to-\[\#0d0d0d\]{
  --tw-gradient-to: #0d0d0d var(--tw-gradient-to-position);
}
.to-\[\#0e0e0e\]{
  --tw-gradient-to: #0e0e0e var(--tw-gradient-to-position);
}
.to-\[\#100c14\]{
  --tw-gradient-to: #100c14 var(--tw-gradient-to-position);
}
.to-\[\#101010\]{
  --tw-gradient-to: #101010 var(--tw-gradient-to-position);
}
.to-\[\#120f2e\]{
  --tw-gradient-to: #120f2e var(--tw-gradient-to-position);
}
.to-\[\#1a0f2e\]{
  --tw-gradient-to: #1a0f2e var(--tw-gradient-to-position);
}
.to-\[\#2a0423\]{
  --tw-gradient-to: #2a0423 var(--tw-gradient-to-position);
}
.to-\[\#2a1604\]{
  --tw-gradient-to: #2a1604 var(--tw-gradient-to-position);
}
.to-\[\#2a2204\]{
  --tw-gradient-to: #2a2204 var(--tw-gradient-to-position);
}
.to-amber-400{
  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
}
.to-amber-400\/0{
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
}
.to-amber-500\/5{
  --tw-gradient-to: rgb(245 158 11 / 0.05) var(--tw-gradient-to-position);
}
.to-amber-700\/30{
  --tw-gradient-to: rgb(180 83 9 / 0.3) var(--tw-gradient-to-position);
}
.to-cyan-400{
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-cyan-400\/0{
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
}
.to-emerald-400\/0{
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
}
.to-emerald-500{
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.to-indigo-400\/0{
  --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position);
}
.to-orange-400\/0{
  --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
}
.to-orange-900\/30{
  --tw-gradient-to: rgb(124 45 18 / 0.3) var(--tw-gradient-to-position);
}
.to-pink-400{
  --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);
}
.to-pink-400\/0{
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
}
.to-purple-400{
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}
.to-red-400{
  --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}
.to-sky-400\/0{
  --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position);
}
.to-slate-500{
  --tw-gradient-to: #64748b var(--tw-gradient-to-position);
}
.to-slate-600\/20{
  --tw-gradient-to: rgb(71 85 105 / 0.2) var(--tw-gradient-to-position);
}
.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.to-teal-400{
  --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position);
}
.to-transparent{
  --tw-gradient-to: transparent 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-yellow-500\/0{
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
}
.to-yellow-500\/10{
  --tw-gradient-to: rgb(234 179 8 / 0.1) var(--tw-gradient-to-position);
}
.to-yellow-500\/5{
  --tw-gradient-to: rgb(234 179 8 / 0.05) var(--tw-gradient-to-position);
}
.to-yellow-600{
  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.fill-\[\#fbbc04\]{
  fill: #fbbc04;
}
.fill-black{
  fill: #000;
}
.fill-current{
  fill: currentColor;
}
.fill-primary{
  fill: hsl(#10B981);
  fill: hsl(var(--primary));
}
.fill-white{
  fill: #fff;
}
.object-contain{
  object-fit: contain;
}
.object-cover{
  object-fit: cover;
}
.\!p-3{
  padding: 0.75rem !important;
}
.p-0{
  padding: 0px;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-10{
  padding: 2.5rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-3\.5{
  padding: 0.875rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-7{
  padding: 1.75rem;
}
.p-8{
  padding: 2rem;
}
.p-\[1px\]{
  padding: 1px;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.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-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.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{
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-32{
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.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-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-1\.5{
  padding-bottom: 0.375rem;
}
.pb-12{
  padding-bottom: 3rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-28{
  padding-bottom: 7rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-5{
  padding-bottom: 1.25rem;
}
.pl-0{
  padding-left: 0px;
}
.pl-10{
  padding-left: 2.5rem;
}
.pl-12{
  padding-left: 3rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-2\.5{
  padding-left: 0.625rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-8{
  padding-left: 2rem;
}
.pl-9{
  padding-left: 2.25rem;
}
.pl-\[3px\]{
  padding-left: 3px;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-2\.5{
  padding-right: 0.625rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pr-8{
  padding-right: 2rem;
}
.pr-9{
  padding-right: 2.25rem;
}
.pr-\[3px\]{
  padding-right: 3px;
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-10{
  padding-top: 2.5rem;
}
.pt-12{
  padding-top: 3rem;
}
.pt-16{
  padding-top: 4rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.pt-\[12vh\]{
  padding-top: 12vh;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.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-\[0\.85em\]{
  font-size: 0.85em;
}
.text-\[0\.8rem\]{
  font-size: 0.8rem;
}
.text-\[0\.9em\]{
  font-size: 0.9em;
}
.text-\[10\.5px\]{
  font-size: 10.5px;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12\.5px\]{
  font-size: 12.5px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13\.5px\]{
  font-size: 13.5px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.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-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;
}
.normal-case{
  text-transform: none;
}
.italic{
  font-style: italic;
}
.not-italic{
  font-style: normal;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-7{
  line-height: 1.75rem;
}
.leading-8{
  line-height: 2rem;
}
.leading-\[1\.05\]{
  line-height: 1.05;
}
.leading-\[1\.15\]{
  line-height: 1.15;
}
.leading-\[1\.1\]{
  line-height: 1.1;
}
.leading-\[1\.55\]{
  line-height: 1.55;
}
.leading-\[1\.75\]{
  line-height: 1.75;
}
.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\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-\[0\.15em\]{
  letter-spacing: 0.15em;
}
.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\]{
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\]{
  letter-spacing: 0.24em;
}
.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}
.tracking-\[0\.28em\]{
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}
.tracking-\[0\.5em\]{
  letter-spacing: 0.5em;
}
.tracking-\[0\.6em\]{
  letter-spacing: 0.6em;
}
.tracking-normal{
  letter-spacing: 0em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-tighter{
  letter-spacing: -0.05em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.\!text-yellow-500{
  --tw-text-opacity: 1 !important;
  color: rgb(234 179 8 / 1) !important;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#fbbc04\]{
  --tw-text-opacity: 1;
  color: rgb(251 188 4 / 1);
  color: rgb(251 188 4 / var(--tw-text-opacity, 1));
}
.text-accent-foreground{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.text-amber-200{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 1);
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 1);
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-card-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--card-foreground));
}
.text-current{
  color: currentColor;
}
.text-cyan-200{
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / 1);
  color: rgb(165 243 252 / var(--tw-text-opacity, 1));
}
.text-cyan-300{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / 1);
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / 1);
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-cyan-600{
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / 1);
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-destructive{
  color: hsl(0 62.8% 45%);
  color: hsl(var(--destructive));
}
.text-destructive-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--destructive-foreground));
}
.text-emerald-100{
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / 1);
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200{
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / 1);
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-200\/60{
  color: rgb(167 243 208 / 0.6);
}
.text-emerald-200\/70{
  color: rgb(167 243 208 / 0.7);
}
.text-emerald-200\/90{
  color: rgb(167 243 208 / 0.9);
}
.text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-300\/70{
  color: rgb(110 231 183 / 0.7);
}
.text-emerald-300\/80{
  color: rgb(110 231 183 / 0.8);
}
.text-emerald-300\/90{
  color: rgb(110 231 183 / 0.9);
}
.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-400\/70{
  color: rgb(52 211 153 / 0.7);
}
.text-emerald-400\/80{
  color: rgb(52 211 153 / 0.8);
}
.text-emerald-400\/90{
  color: rgb(52 211 153 / 0.9);
}
.text-emerald-50{
  --tw-text-opacity: 1;
  color: rgb(236 253 245 / 1);
  color: rgb(236 253 245 / var(--tw-text-opacity, 1));
}
.text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.text-foreground\/50{
  color: hsl(210 40% 98% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-fuchsia-200{
  --tw-text-opacity: 1;
  color: rgb(245 208 254 / 1);
  color: rgb(245 208 254 / var(--tw-text-opacity, 1));
}
.text-fuchsia-300{
  --tw-text-opacity: 1;
  color: rgb(240 171 252 / 1);
  color: rgb(240 171 252 / var(--tw-text-opacity, 1));
}
.text-fuchsia-400{
  --tw-text-opacity: 1;
  color: rgb(232 121 249 / 1);
  color: rgb(232 121 249 / var(--tw-text-opacity, 1));
}
.text-fuchsia-600{
  --tw-text-opacity: 1;
  color: rgb(192 38 211 / 1);
  color: rgb(192 38 211 / var(--tw-text-opacity, 1));
}
.text-indigo-300{
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / 1);
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-indigo-400{
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / 1);
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-lime-400{
  --tw-text-opacity: 1;
  color: rgb(163 230 53 / 1);
  color: rgb(163 230 53 / var(--tw-text-opacity, 1));
}
.text-muted{
  color: hsl(215 25% 27%);
  color: hsl(var(--muted));
}
.text-muted-foreground{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.text-orange-300{
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / 1);
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-pink-300{
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / 1);
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-pink-400{
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / 1);
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-popover-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--popover-foreground));
}
.text-primary{
  color: hsl(#10B981);
  color: hsl(var(--primary));
}
.text-primary-foreground{
  color: hsl(0 0% 0%);
  color: hsl(var(--primary-foreground));
}
.text-purple-200{
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / 1);
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-300{
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / 1);
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / 1);
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / 1);
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / 1);
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-rose-100{
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / 1);
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}
.text-rose-200{
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / 1);
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-200\/90{
  color: rgb(254 205 211 / 0.9);
}
.text-rose-300{
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400{
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / 1);
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-secondary{
  color: hsl(#EAB308);
  color: hsl(var(--secondary));
}
.text-secondary-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--secondary-foreground));
}
.text-sky-300{
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / 1);
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-slate-100{
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / 1);
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 1);
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800{
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / 1);
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-950{
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / 1);
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.text-teal-400{
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / 1);
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}
.text-transparent{
  color: transparent;
}
.text-violet-300{
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / 1);
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-violet-400{
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / 1);
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/85{
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-100\/80{
  color: rgb(254 249 195 / 0.8);
}
.text-yellow-200{
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / 1);
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / 1);
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-300\/70{
  color: rgb(253 224 71 / 0.7);
}
.text-yellow-300\/80{
  color: rgb(253 224 71 / 0.8);
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-400\/70{
  color: rgb(250 204 21 / 0.7);
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 1);
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-500\/70{
  color: rgb(234 179 8 / 0.7);
}
.text-yellow-500\/80{
  color: rgb(234 179 8 / 0.8);
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / 1);
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / 1);
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-zinc-100{
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / 1);
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-200{
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300{
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-400{
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.underline{
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.line-through{
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.decoration-emerald-500\/40{
  -webkit-text-decoration-color: rgb(16 185 129 / 0.4);
          text-decoration-color: rgb(16 185 129 / 0.4);
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.placeholder-slate-500::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.caret-emerald-400{
  caret-color: #34d399;
}
.accent-emerald-500{
  accent-color: #10b981;
}
.accent-yellow-500{
  accent-color: #eab308;
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-80{
  opacity: 0.8;
}
.opacity-90{
  opacity: 0.9;
}
.opacity-\[0\.04\]{
  opacity: 0.04;
}
.opacity-\[0\.06\]{
  opacity: 0.06;
}
.opacity-\[0\.07\]{
  opacity: 0.07;
}
.mix-blend-screen{
  mix-blend-mode: screen;
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.04\)\2c 0_20px_60px_-20px_rgba\(234\2c 179\2c 8\2c 0\.15\)\]{
  --tw-shadow: 0 0 0 1px rgba(255,255,255,0.04),0 20px 60px -20px rgba(234,179,8,0.15);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 20px 60px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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\(16\2c 185\2c 129\2c 0\.4\)\]{
  --tw-shadow: 0 0 20px rgba(16,185,129,0.4);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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\(239\2c 68\2c 68\2c 0\.4\)\]{
  --tw-shadow: 0 0 20px rgba(239,68,68,0.4);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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\(16\2c 185\2c 129\2c 0\.55\)\]{
  --tw-shadow: 0 0 30px rgba(16,185,129,0.55);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_36px_rgba\(234\2c 179\2c 8\2c 0\.55\)\]{
  --tw-shadow: 0 0 36px rgba(234,179,8,0.55);
  --tw-shadow-colored: 0 0 36px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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\(250\2c 204\2c 21\2c 0\.15\)\]{
  --tw-shadow: 0 0 60px rgba(250,204,21,0.15);
  --tw-shadow-colored: 0 0 60px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_-5px_rgba\(234\2c 179\2c 8\2c 0\.5\)\]{
  --tw-shadow: 0 10px 30px -5px rgba(234,179,8,0.5);
  --tw-shadow-colored: 0 10px 30px -5px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_-5px_rgba\(250\2c 204\2c 21\2c 0\.55\)\]{
  --tw-shadow: 0 10px 30px -5px rgba(250,204,21,0.55);
  --tw-shadow-colored: 0 10px 30px -5px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_-20px_rgba\(0\2c 0\2c 0\2c 0\.8\)\]{
  --tw-shadow: 0 20px 60px -20px rgba(0,0,0,0.8);
  --tw-shadow-colored: 0 20px 60px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_25px_70px_-15px_rgba\(250\2c 204\2c 21\2c 0\.25\)\]{
  --tw-shadow: 0 25px 70px -15px rgba(250,204,21,0.25);
  --tw-shadow-colored: 0 25px 70px -15px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_60px_-30px_rgba\(16\2c 185\2c 129\2c 0\.25\)\]{
  --tw-shadow: 0 30px 60px -30px rgba(16,185,129,0.25);
  --tw-shadow-colored: 0 30px 60px -30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_80px_-20px_rgba\(0\2c 0\2c 0\2c 0\.8\)\]{
  --tw-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  --tw-shadow-colored: 0 30px 80px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_80px_-20px_rgba\(234\2c 179\2c 8\2c 0\.35\)\]{
  --tw-shadow: 0 30px 80px -20px rgba(234,179,8,0.35);
  --tw-shadow-colored: 0 30px 80px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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\(250\2c 204\2c 21\2c 0\.35\)\]{
  --tw-shadow: 0 8px 24px rgba(250,204,21,0.35);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[6px_6px_0_0_\#10b981\]{
  --tw-shadow: 6px 6px 0 0 #10b981;
  --tw-shadow-colored: 6px 6px 0 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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-cyan-500\/20{
  --tw-shadow-color: rgb(6 182 212 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/20{
  --tw-shadow-color: rgb(16 185 129 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-pink-500\/20{
  --tw-shadow-color: rgb(236 72 153 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20{
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/20{
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-yellow-500\/20{
  --tw-shadow-color: rgb(234 179 8 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-yellow-500\/5{
  --tw-shadow-color: rgb(234 179 8 / 0.05);
  --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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0{
  --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), 0 0 #0000;
  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), 0 0 #0000;
  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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#0a0a0a\]{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(10 10 10 / var(--tw-ring-opacity, 1));
}
.ring-current{
  --tw-ring-color: currentColor;
}
.ring-orange-400\/50{
  --tw-ring-color: rgb(251 146 60 / 0.5);
}
.ring-red-500\/40{
  --tw-ring-color: rgb(239 68 68 / 0.4);
}
.ring-ring{
  --tw-ring-color: hsl(var(--ring));
}
.ring-slate-700{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1));
}
.ring-yellow-500\/60{
  --tw-ring-color: rgb(234 179 8 / 0.6);
}
.ring-offset-2{
  --tw-ring-offset-width: 2px;
}
.ring-offset-\[\#0a0a0a\]{
  --tw-ring-offset-color: #0a0a0a;
}
.ring-offset-background{
  --tw-ring-offset-color: hsl(var(--background));
}
.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-2xl{
  --tw-blur: blur(40px);
  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-\[120px\]{
  --tw-blur: blur(120px);
  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-\[140px\]{
  --tw-blur: blur(140px);
  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-xl{
  --tw-blur: blur(24px);
  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_8px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]{
  --tw-drop-shadow: drop-shadow(0 0 8px 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);
}
.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);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl{
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter{
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\]{
  transition-property: width;
  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, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  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-1000{
  transition-duration: 1000ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.duration-700{
  transition-duration: 700ms;
}
.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);
}
@keyframes enter{

  from{
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit{

  to{
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0{
  --tw-enter-opacity: 0;
}
.zoom-in-95{
  --tw-enter-scale: .95;
}
.duration-1000{
  animation-duration: 1000ms;
}
.duration-200{
  animation-duration: 200ms;
}
.duration-300{
  animation-duration: 300ms;
}
.duration-500{
  animation-duration: 500ms;
}
.duration-700{
  animation-duration: 700ms;
}
.ease-in-out{
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running{
  animation-play-state: running;
}
.\!paused{
  animation-play-state: paused !important;
}
.paused{
  animation-play-state: paused;
}
.\[backface-visibility\:hidden\]{
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.\[perspective\:1200px\]{
  perspective: 1200px;
}
.\[transform-style\:preserve-3d\]{
  transform-style: preserve-3d;
}
.\[transform\:rotateY\(180deg\)\]{
  transform: rotateY(180deg);
}

:root {
  /* Dark theme — VS Code–inspired slate palette */
  --bg: #0f172a;                 /* slate-900 */
  --bg-elev: #111b2e;            /* slightly lighter */
  --surface: rgba(30, 41, 59, 0.6);   /* slate-800 @ 60% */
  --surface-2: rgba(51, 65, 85, 0.35);
  --surface-solid: #1e293b;
  --surface-code: #0b1220;
  --primary: #10B981;
  --primary-hover: #34D399;
  --secondary: #EAB308;
  --accent: #38bdf8;             /* sky-400 */
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.22);
  --text: #f1f5f9;               /* slate-100 */
  --text-muted: #94a3b8;         /* slate-400 */
  --text-dim: #64748b;            /* slate-500 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px -15px rgba(0, 0, 0, 0.55);
  --glow: 0 0 30px rgba(56, 189, 248, 0.12);
  --nav-bg: rgba(15, 23, 42, 0.75);
  --topbar-bg: rgba(255, 232, 214, 1);
  --topbar-text: #0f172a;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --font-display: 'Jost', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  background: #0f172a;
  background: var(--bg);
  color: #f1f5f9;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* Smooth scrolling for anchor-link jumps + programmatic scrolls. Opted
     out for users who have `prefers-reduced-motion: reduce` so we respect
     vestibular-disorder accessibility preferences. Modern mobile Safari
     (17+) and Chrome handle this without hurting native momentum. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  /* Solid base color only — large gradient backgrounds were moved to a
     fixed-position pseudo-layer below so they do not repaint on every
     scroll tick (huge mobile perf win). */
  background: #0a0a0a;
  background-attachment: fixed;
}

/* Decorative gradient layer pinned to the viewport so it only paints once
   per resize, never on scroll. Sits behind every section. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(16, 185, 129, 0.09), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(234, 179, 8, 0.05), transparent 60%);
}


/* Catch sections / cards that hardcoded the original dark bases.
   These are the highest-traffic dark backgrounds (220+ uses combined).  */


/* Hero / inline-styled tiles often use solid 0.6 opacity bg — soften for light. */


/* Borders */


/* Make the dark-grid-pattern fade in light mode so it doesn't read as soot. */


/* ===== Light-mode inline-style overrides (Iteration 172) =====
   Inline styles win over class CSS unless we use !important, so the
   following rules target elements with `style="background: …"` baked
   into JSX. Specificity is intentionally high.                       */

/* LanguagesBar — the dark scroll strip below the navbar.  */


/* The fade-out gradients flanking the strip need to fade to LIGHT, not dark. */


/* Hero stat tiles — the inline-styled border-top tiles can render as dark
   semi-transparent slate cards over a now-light body. Soften to white tile. */


/* Home compiler row — section + each compiler box. */


/* Bootstrap Coach + DSA visualizer + Features + Blog — sections that have
   data-testid get content-visibility, but their inner cards often hardcode
   dark inline gradients. Reset card backgrounds. */


/* Catch-all for sections that hide behind inline `style="background: …"`
   solid dark hex values via descendant selectors. */


/* CourseCard — Tailwind `bg-gradient-to-br from-[#141414] to-[#0e0e0e]`. */


/* Course icon tile inside the card uses `bg-black/40` — flip to a tinted soft tile. */


/* Generic dark Tailwind gradients reused on other tiles. */


code, pre, .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono); }

.font-display {
  font-family: 'Jost', sans-serif;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.font-body { font-family: 'Nunito', sans-serif; font-family: var(--font-body); }

::selection { background: #10B981; color: #fff; }

/* ============ Glassmorphism utilities ============ */
.glass {
  background: rgba(30, 41, 59, 0.6);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  box-shadow: var(--shadow-md);
}
.glass-strong {
  background: rgba(30, 41, 59, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.55);
  box-shadow: var(--shadow-lg);
}
.glass-soft {
  background: rgba(51, 65, 85, 0.35);
  background: var(--surface-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border: 1px solid var(--border);
  border-radius: 10px;
  border-radius: var(--radius-sm);
}

/* Override existing surfaces that still use hex classes -> glassmorphism (sharp edges, cards keep explicit radius) */
.bg-\[\#121212\] {
  background: rgba(30, 41, 59, 0.6) !important;
  background: var(--surface) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.bg-\[\#0a0a0a\] {
  background: rgba(17, 27, 46, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-\[\#050505\] { background: #0f172a !important; background: var(--bg) !important; }
.bg-\[\#1a1a1a\], .bg-\[\#16161E\], .bg-\[\#111\] {
  background: rgba(30, 41, 59, 0.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-\[\#1E1E2E\] {
  background: rgba(11, 18, 32, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.border-\[\#262626\] { border-color: rgba(148, 163, 184, 0.22) !important; border-color: var(--border-strong) !important; }
.border-\[\#1a1a1a\] { border-color: rgba(148, 163, 184, 0.14) !important; border-color: var(--border) !important; }

/* Layout elements: sharp edges (no radius) */
header[data-testid="navbar"],
[data-testid="footer"],
[data-testid="top-bar"],
main,
section {
  border-radius: 0 !important;
}

/* Sticky glass navbar — sharp edges, no bottom border */
header[data-testid="navbar"] {
  background: rgba(15, 23, 42, 0.75) !important;
  background: var(--nav-bg) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 0 !important;
}


.surface-card {
  background: rgba(30, 41, 59, 0.6);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border: 1px solid var(--border);
  color: #f1f5f9;
  color: var(--text);
  border-radius: 14px;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.surface-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 30px rgba(56, 189, 248, 0.12);
  box-shadow: var(--shadow-md), var(--glow);
  border-color: rgba(148, 163, 184, 0.22);
  border-color: var(--border-strong);
}
.surface-alt {
  background: #111b2e;
  background: var(--bg-elev);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-radius: var(--radius);
}
.text-primary { color: #f1f5f9; color: var(--text); }
.text-muted { color: #94a3b8; color: var(--text-muted); }
.text-dim { color: #64748b; color: var(--text-dim); }

/* Scrollbar — sharp edges */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111b2e; background: var(--bg-elev); }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.5); }

/* Grid patterns */
.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.grid-pattern-sm {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }

/* Entrance animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s cubic-bezier(.22,.61,.36,1) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.7s ease-out both; }

/* Social icon animations */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  100% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
}
.social-icon {
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.3), background-color 0.2s, color 0.2s;
  animation: floaty 4s ease-in-out infinite;
}
.social-icon:hover {
  transform: translateY(-4px) scale(1.1) rotate(-4deg);
  animation: pulseRing 1s ease-out infinite;
}

/* Buttons — original brutal (sharp, flat, high-contrast) */
.btn-brutal {
  font-family: 'Jost', sans-serif;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #000;
  background: #EAB308;
  color: #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
}
.btn-brutal:hover {
  background: #10B981;
  color: #fff;
  transform: translate(-3px, -3px);
  /* Yellow halo on hover — primary brand colour */
  box-shadow: 7px 7px 0 0 #EAB308;
}
.btn-brutal:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 0 #EAB308;
}
.btn-ghost {
  font-family: 'Jost', sans-serif;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #EAB308;
  background: transparent;
  color: #EAB308;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.btn-ghost:hover {
  background: #EAB308;
  color: #000;
  transform: translateY(-1px);
}

/* AI gradient keyword — animated gradient text */
@keyframes ai-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ai-gradient {
  background: linear-gradient(
    90deg,
    #10B981 0%,
    #38bdf8 25%,
    #a78bfa 50%,
    #f472b6 75%,
    #10B981 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-shift 6s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(167, 139, 250, 0.35);
}

/* Link underline */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: #38bdf8;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Lesson markdown notes — tighten spacing for readability */
.lesson-notes > :first-child { margin-top: 0 !important; }
.lesson-notes h2 {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  position: relative;
  padding-left: 14px;
}
.lesson-notes h2::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 14px;
  width: 4px;
  background: linear-gradient(180deg, #eab308, #10b981);
  border-radius: 2px;
}
.lesson-notes h3 { color: #f1f5f9; }
.lesson-notes table th { background: rgba(10, 10, 10, 0.8); }
/* All bold text inside lesson notes / blog body uses the brand emerald —
   strong + b + table cell <strong> all unified. */
.lesson-notes :where(strong, b),
.lesson-notes :where(p, li, td, dd) :where(strong, b) {
  color: #34d399 !important;
  font-weight: 700;
}
.lesson-notes blockquote {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(234,179,8,0.05));
  border-left: 3px solid #10b981;
  padding: 14px 18px;
  margin: 18px 0;
  color: #cbd5e1;
}
.lesson-notes blockquote p { margin: 0; }
/* Code-block label tinting (last fence line "Output:" recognised) */
.lesson-notes pre {
  position: relative;
}
.lesson-notes pre code {
  display: block;
}

/* Horizontal carousel scrollbar — minimal */
[data-testid="features-carousel"]::-webkit-scrollbar { display: none; }
[data-testid="features-carousel"] { scrollbar-width: none; -ms-overflow-style: none; }
[data-testid="testimonials-carousel"]::-webkit-scrollbar { display: none; }

/* W3Schools-like top language pill bar — hide scrollbar but keep the swipe */
.ck-langbar-scroll::-webkit-scrollbar { height: 0; display: none; }
.ck-langbar-scroll { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
/* Lift the language bar above the floating mobile compiler chip etc. */
.ck-languages-bar { box-shadow: 0 1px 0 rgba(0,0,0,0.4); }

/* Force the Footer "Verify Certificate" badge & app-nav icons to be wider
   on every screen — your design asked for a 5rem (80px) tile so the badge
   feels substantial next to the headline. */
.w-14 {
  width: 5rem;
}
@media (min-width: 768px) {
  .md\:w-14 {
    width: 5rem;
  }
}

/* Brand logo — pinned to its native 56px regardless of the .w-14 override */
.ck-logo-img {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border: none !important;
  outline: none !important;
}

/* Chatbot launcher — slow continuous logo spin + soft glow pulse so the
   button reads as alive without distracting from the page content. */
@keyframes ck-chatbot-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ck-chatbot-spin {
  animation: ck-chatbot-spin 8s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ck-chatbot-glow {
  0%, 100% { box-shadow: 0 0 28px rgba(234, 179, 8, 0.45), 0 0 60px rgba(16, 185, 129, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(234, 179, 8, 0.7),  0 0 84px rgba(16, 185, 129, 0.5); }
}
.ck-chatbot-launcher > span:nth-of-type(3) {
  animation: ck-chatbot-glow 2.6s ease-in-out infinite;
}
[data-testid="navbar-logo"]:focus,
[data-testid="navbar-logo"]:focus-visible,
[data-testid="navbar-logo"] img:focus,
[data-testid="navbar-logo"] img:focus-visible,
[data-testid="navbar-logo"] img {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Footer app-nav tiles — force 5rem on every screen, including mobile. */
[data-testid="app-nav-icon"] {
  width: 5rem !important;
  height: 5rem !important;
}

/* Mouse-bubble cursor trail — codekilla.com style */
.ck-mouse-bubble {
  position: fixed;
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.85;
  pointer-events: none;
  animation: ck-bubble-pop 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes ck-bubble-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0;    }
  20%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.9;  }
  100% {
    transform: translate(calc(-50% + 0), calc(-50% + 0)) scale(0.2);
    transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0.2);
    opacity: 0;
  }
}

/* Sonner toaster — emerald top progress bar so success / info / error
   notifications pop with our brand green. */
[data-sonner-toaster] [data-sonner-toast] {
  position: relative;
  overflow: hidden;
}
[data-sonner-toaster] [data-sonner-toast]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
  opacity: 0.95;
}
/* For toasts that the user-marks as error / warning, keep the
   "indicator" green but accent with a hint of yellow — still on-brand. */
[data-sonner-toaster] [data-sonner-toast][data-type="error"]::before {
  background: linear-gradient(90deg, #ef4444 0%, #facc15 50%, #ef4444 100%);
}

/* Prism-based Compiler editor — override the tomorrow theme to fit our dark glass look */
.ck-editor-textarea, .ck-editor-pre {
  background: transparent !important;
  outline: none !important;
}
.ck-editor-textarea {
  caret-color: #10b981;
}
.ck-editor-pre code,
.ck-editor-pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
pre[class*="language-"], code[class*="language-"] {
  background: transparent !important;
  text-shadow: none !important;
}
/* Tomorrow theme colour tweaks (emerald/yellow highlights) */
.token.keyword, .token.selector, .token.important, .token.atrule { color: #c792ea !important; }
.token.function { color: #82aaff !important; }
.token.string, .token.char { color: #c3e88d !important; }
.token.number, .token.boolean, .token.constant { color: #f78c6c !important; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #546e7a !important; font-style: italic; }
.token.operator, .token.punctuation { color: #89ddff !important; }
.token.class-name, .token.builtin { color: #ffcb6b !important; }
.token.tag, .token.property { color: #f07178 !important; }
.token.attr-name { color: #c792ea !important; }
.token.attr-value { color: #c3e88d !important; }

/* Drag-to-scroll carousel cursor */
.carousel-drag {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.carousel-drag.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}
.carousel-drag img { -webkit-user-drag: none; user-drag: none; }
.carousel-drag {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.carousel-drag.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}
.carousel-drag img { -webkit-user-drag: none; user-drag: none; }

/* Codekilla-logo pagination indicator — spin on hover */
@keyframes ck-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Continuous, smooth Emergent-style logo spin — gentle 360° loop. */
@keyframes ck-logo-loop {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ck-logo-loop {
  animation: ck-logo-loop 6s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ck-logo-loop { animation: none; }
}
.ck-pag-logo img {
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), opacity 0.25s;
  filter: grayscale(1) brightness(0.9);
}
.ck-pag-logo:hover img {
  animation: ck-spin 1.1s linear infinite;
  filter: none;
}

/* Numbered "bullets" for lesson markdown lists — replaces the old logo image
   approach with auto-counter numbers (e.g. 01, 02, 03) styled in mono yellow.
   Chip is sized exactly to the li line-height so the number aligns perfectly
   with the first line of text — no more vertical drift. */
.ck-bullets {
  list-style: none;
  padding-left: 0;
  counter-reset: ck-num;
}
.ck-bullets > li {
  position: relative;
  padding-left: 48px;
  min-height: 1.75rem;
  line-height: 1.75rem;
  counter-increment: ck-num;
}
.ck-bullets > li::before {
  content: counter(ck-num, upper-roman);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 36px;
  padding: 0 6px;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(250, 204, 21, 0.95);
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.35);
}
.ck-bullets > li:hover::before {
  color: #0a0a0a;
  background: rgba(250, 204, 21, 0.95);
  border-color: rgba(250, 204, 21, 0.95);
}
/* Nested ul -> smaller numbered bullets, same alignment trick */
.ck-bullets ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
  counter-reset: ck-sub;
}
.ck-bullets ul > li {
  position: relative;
  padding-left: 40px;
  min-height: 1.6rem;
  line-height: 1.6rem;
  counter-increment: ck-sub;
}
.ck-bullets ul > li::before {
  content: counter(ck-sub, upper-alpha);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  min-width: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  line-height: 1;
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Inline SVG diagram block inside lesson body. */
.ck-diagram { width: 100%; height: auto; max-width: 720px; display: block; margin: 0 auto; }
.ck-diagram text { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; }

/* Lesson section badge — h2 rendered as a green rectangle "v2.0 · BEGINNER FRIENDLY" tag */
.lesson-h2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(34, 197, 94, 0.07);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #bbf7d0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
}
.lesson-h2-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #22c55e;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.lesson-h2-badge .ck-h2-version {
  color: #dcfce7;
  background: rgba(34, 197, 94, 0.18);
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(34, 197, 94, 0.55);
  font-weight: 700;
}
.lesson-h2-badge .ck-h2-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #bbf7d0;
  opacity: 0.6;
}
.lesson-h2-badge .ck-h2-label {
  color: #bbf7d0;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) {
  .lesson-h2-badge .ck-h2-label {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
}

/* H3 sub-section badge — yellow rectangle for `###` headings inside markdown */
.lesson-h3-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 0.32rem 0.7rem;
  margin-top: 1.6rem;
  margin-bottom: 0.7rem;
  background: rgba(250, 204, 21, 0.07);
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: #fde68a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.1;
}
.lesson-h3-badge::before {
  content: "";
  width: 4px;
  height: 4px;
  background: #facc15;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22);
}

/* Numbered list rendering inside lesson markdown — each "1." marker gets a
   filled yellow rectangle background so numbers visually echo the section
   badge cards. Using counter() so we work for both raw <ol> and tailwind's
   list-decimal markers. */
.lesson-markdown ol.ck-numbered {
  list-style: none;
  padding-left: 0;
  counter-reset: ck-num;
}
.lesson-markdown ol.ck-numbered > li {
  counter-increment: ck-num;
  position: relative;
  padding-left: 3.1rem;
  min-height: 1.9rem;
  margin-bottom: 0.6rem;
  line-height: 1.7;
}
.lesson-markdown ol.ck-numbered > li::before {
  content: counter(ck-num, upper-roman);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.55);
  color: #facc15;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Nested ordered list inside a numbered lesson list -> lower-alpha (a, b, c…) */
.lesson-markdown ol.ck-numbered ol {
  list-style: lower-alpha !important;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
  counter-reset: none;
}
.lesson-markdown ol.ck-numbered ol > li {
  counter-increment: none;
  position: static;
  padding-left: 0;
  min-height: auto;
  margin-bottom: 0.25rem;
}
.lesson-markdown ol.ck-numbered ol > li::before {
  content: none;
}

/* Lesson SVG diagram card — polished container around inline ```svg fences. */
.ck-lesson-svg {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.55) 100%);
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 1.2rem 1rem;
  position: relative;
  /* Prevent oversized SVGs from breaking layout; allow horizontal scroll if
     a diagram is intrinsically wider than the lesson column. */
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
.ck-lesson-svg::before {
  content: "// visual";
  position: absolute;
  top: -10px;
  left: 14px;
  background: #0a0a0a;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border: 1px solid #262626;
}
.ck-lesson-svg svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
/* Normalize curriculum-authored SVGs so every diagram renders cleanly
   regardless of how the LLM generated it. Shapes become outline-only,
   text is force-colored to a high-contrast slate, and stroke widths are
   uniform. SVGs with class="ck-svg-raw" are designed by us and opt OUT
   of these resets so their gradients / fills come through unmodified. */
.ck-lesson-svg svg:not(.ck-svg-raw) rect,
.ck-lesson-svg svg:not(.ck-svg-raw) circle,
.ck-lesson-svg svg:not(.ck-svg-raw) ellipse,
.ck-lesson-svg svg:not(.ck-svg-raw) path[d]:not([fill="none"]),
.ck-lesson-svg svg:not(.ck-svg-raw) polygon {
  fill: none !important;
  stroke-width: 1.6 !important;
  vector-effect: non-scaling-stroke;
}
.ck-lesson-svg svg:not(.ck-svg-raw) text,
.ck-lesson-svg svg:not(.ck-svg-raw) tspan {
  fill: #e2e8f0 !important;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace !important;
  font-size: 13px;
  font-weight: 500;
  paint-order: stroke;
  stroke: rgba(2, 6, 23, 0.85);
  stroke-width: 0.9px;
}
.ck-lesson-svg svg:not(.ck-svg-raw) line,
.ck-lesson-svg svg:not(.ck-svg-raw) path[d][fill="none"] {
  stroke-width: 1.6 !important;
  vector-effect: non-scaling-stroke;
}

/* SVG click-highlight states (used by LessonSvgFigure for elements
   marked with class="ck-svg-part" or data-part="..."). */
.ck-lesson-svg .ck-svg-part,
.ck-lesson-svg [data-part] {
  cursor: pointer;
  transition: opacity .25s ease, filter .25s ease;
}
.ck-lesson-svg .ck-svg-active {
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, .85)) drop-shadow(0 0 24px rgba(251, 191, 36, .4));
}
.ck-lesson-svg .ck-svg-dim {
  opacity: 0.32;
}
.ck-lesson-svg .ck-svg-clickwrap { width: 100%; display: flex; justify-content: center; }

/* Global smooth transitions on interactive surfaces */
a, button, input, textarea, select {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

/* Rounded inputs & textareas -> sharp */
/* Inputs — sharp edges for minimal dev-tool aesthetic */
input, textarea, select {
  border-radius: 0;
}

/* ============ LIGHT MODE OVERRIDES ============ */
/* Navbar: flip from dark to light surface + dark text */


/* Footer: PER USER SPEC (iter 194) — keep the footer DARK even in light
 * mode so it matches the dark-mode look. We deliberately don't override
 * background/text colors here; the inline `style={{background:'#16191c'}}`
 * + the dark text classes on each row already provide the dark look. */
/* (intentional no-op — previous overrides removed) */

/* Verify-cert pill — keep brand tone for the verify pill bg, but no longer
 * lighten the strip background (footer stays dark per user spec). */

/* Certificate preview cards in Verify / Profile / Certificate pages. */


/* Lesson page — hero card uses `rgba(30,41,59,0.6)` inline gradient that
   renders as a muddy olive on light bg.  The H1 also uses a white→amber→
   emerald bg-clip-text gradient — the white stop becomes invisible.   */


/* Lesson body — the description and ProseMirror-style paragraphs use
   the standard `prose` colors. Make sure regular `.text-slate-300/400`
   inside the lesson body remain clearly readable. Catch the description
   sitting right below the hero card (text-slate-300 with mt-3). */


/* Generic catch-all for inline-styled cards using the same `rgba(30,41,59,...)`
   muddy semi-transparent dark slate gradient elsewhere on the site. */
html.light [style*="rgba(30,41,59"],
html.light [style*="rgba(30, 41, 59"],
html.light [style*="rgba(15,23,42"],
html.light [style*="rgba(15, 23, 42"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.10) !important;
}

/* Lesson page LESSON_BODY: ReactMarkdown emits `prose prose-invert` — the
   `prose-invert` class assumes a dark bg.  In light mode, flip to default
   prose colors so headings + paragraphs read clearly on white.
   NOTE: the wrapper element uses `data-testid="lesson-body-with-translation"`
   (not a `.lesson-body` class), so we anchor every rule on the testid. */


/* Inline-code chips inside paragraphs (e.g. `printf("%d")` in the body).
   The base style sets `bg-[#161616] text-emerald-300` which is invisible
   on white. Flip to a tinted chip with deep teal text. */

/* Tables — `border-collapse` cells render as gray on dark gray; flip to
   a soft slate border + dark text for read-clarity. */


/* Lesson-quiz inline answer hint + completion banner muted text. */


/* Lesson section H2 + H3 badges — defaults use very light emerald/yellow
   text (#bbf7d0 / #fde68a) which are invisible on light backgrounds.
   In light mode, deepen them to forest-emerald / amber-700 + give the
   pill a soft white interior. */


/* LessonQuiz "Quick recap quiz?" CTA — uses dark fuchsia gradient + white
   heading.  In light mode the white heading on dark-purple bg becomes a
   "Quick recap quiz?" that washes out.  Flip whole card to white with
   fuchsia accent border + dark fuchsia heading. */


/* Light mode: swap dark hex surfaces to light */


/* Slate text -> darker in light mode for readability */


/* Code surfaces keep dark bg + light text even in light mode */


/* Preserve intentional dark text on yellow `.btn-brutal` (yellow bg + black
   text is brand-consistent in BOTH modes). The previous rule forced white
   which made "Mark complete" invisible on the yellow button. */

  /* still emerald-on-hover */


/* LessonCTA gradient cards use Tailwind arbitrary dark hex stops like
   `from-[#042030]`, `via-[#0a0a0a]`, `to-[#052219]`.  In light mode these
   render the card mostly-dark while the global `text-white -> slate-900`
   override makes the title slate-900 -> so dark text on dark gradient =
   invisible (exactly what was reported). Flip the card to a light tint
   of the same accent so the existing colored icon + slate-900 title read
   beautifully. */

/* Light-mode tint per accent color (gives each card a faint identity). */


/* Inside the CTA card, make the title slate-900 (covered by global rule
   anyway) and the description slate-600 — confirming for safety. */


/* The right-side pill: keep colored border + colored text so the brand
   accent stays. Hover state already darkens via Tailwind. */


/* Same treatment for the two "sibling" CTAs that aren't in LessonCTA.jsx —
   `lesson-examples-cta` (// EXAMPLE LIBRARY) and `lesson-ds-c-cta`
   (// SUGGESTED COMPANION COURSE). Each uses the same Tailwind arbitrary
   dark hex gradient pattern. Flip to a light tint of the brand accent. */


/* ============================================================
   Iteration 179 — Light-mode fixes (user reported)
   ============================================================
   Targets: navbar mega-menu dropdowns, Tyvis hero, Beyond Expectations,
   Blog page hero + newsletter strip + search box + category chips.
   The previous batch missed these because they use either Tailwind
   class-based gradients or inline `style="background: …#080808"` etc.   */

/* --- Navbar mega-menu dropdowns (4 panels: Tutorials / Examples /
       Resources / Compiler) all use `bg-[#0a0a0a]` with `border-y
       border-[#262626]`.  In light, render as a soft white card with
       subtle shadow.  Body text + accents already covered by global
       `.text-white` / `.text-slate-*` overrides. */


/* User / admin dropdown (right-side floating menu w/ `w-64`). */


/* Tyvis hero — uses Tailwind `bg-gradient-to-b from-[#0a0a0a] via-[#0a0a0a]
   to-[#050505]`.  Override with a soft slate→white gradient.  The H1
   already gets dark text via global rule, just need the section bg. */


/* Beyond Expectations section — inline `background: …#080808` so we
   need !important + attribute selector to win. */


/* Testimonial cards inside Beyond Expectations — use accent-colored
   semi-transparent dark gradients.  Flip to white with a soft tint of
   the accent border. */


/* Marquee fade-out shadows on the left & right of the testimonial scroll.
   Default uses `from-[#080808]` which renders as dark columns even in
   light mode (and overpowers the cards on small phones in dark mode).
   In light mode the fade should ramp to white instead of black. */


@media (max-width: 640px) {
  .ck-be-fade { opacity: 0.35 !important; }
}

/* Blog page — H1 second line "Fresh tutorials." uses `.text-slate-500`
   on top of the bigger heading; soften to slate-600 for legibility. */


/* Newsletter signup strip — uses `bg-gradient-to-b from-[#141414] to-[#0a0a0a]`.
   Flip to a soft yellow tint card so it stays prominent on light bg. */


/* Blog search box + category chips — `bg-[#0a0a0a]` defaults to dark. */


/* Body background pattern softer */


/* Chatbot panel in light mode */


/* Top bar stays warm regardless */


/* ---------------------------------------------------------------
   Global border-radius normalisation — every rounded surface uses
   exactly 8px. Keeps the brand consistent and avoids the mishmash
   of rounded-md / rounded-lg / rounded-xl / rounded-2xl scattered
   across components.

   Pills (chips, avatars, social icons) intentionally keep their
   `rounded-full` pill shape via the `:not(.rounded-full)` guard.
   --------------------------------------------------------------- */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 8px !important;
}
.rounded-t,
.rounded-t-sm,
.rounded-t-md,
.rounded-t-lg,
.rounded-t-xl,
.rounded-t-2xl { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.rounded-b,
.rounded-b-sm,
.rounded-b-md,
.rounded-b-lg,
.rounded-b-xl,
.rounded-b-2xl { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.rounded-l,
.rounded-l-sm,
.rounded-l-md,
.rounded-l-lg,
.rounded-l-xl,
.rounded-l-2xl { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.rounded-r,
.rounded-r-sm,
.rounded-r-md,
.rounded-r-lg,
.rounded-r-xl,
.rounded-r-2xl { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }


/* ---------------------------------------------------------------
   Mobile responsiveness fixes
   --------------------------------------------------------------- */
/* Universal: never let any element push the document horizontally.
   Use `overflow-x: clip` (not hidden) so descendants with
   `position: sticky` keep working. */
html, body { overflow-x: clip; max-width: 100vw; }

/* Long URLs / unbroken strings inside lesson markdown should wrap. */
.lesson-markdown p,
.lesson-markdown li,
.lesson-markdown h1,
.lesson-markdown h2,
.lesson-markdown h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Reserve space at the bottom of every page on mobile so content
   isn't hidden behind the fixed MobileBottomNav (~64-72px). */
@media (max-width: 767px) {
  body { padding-bottom: 72px; }

  /* Hero headlines were sized for desktop; rein them in on phones. */
  h1, .h1 { font-size: clamp(1.75rem, 6.5vw, 2.5rem) !important; line-height: 1.15; }
  .text-4xl, .text-5xl, .text-6xl, .text-7xl { font-size: clamp(1.75rem, 6.5vw, 2.25rem) !important; line-height: 1.15; }
  .text-3xl { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }

  /* Make code blocks horizontally scrollable rather than overflowing. */
  pre, code { max-width: 100%; overflow-x: auto; }
  pre { white-space: pre; }

  /* Tables get horizontal scroll instead of breaking the page. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* iter 224 — removed `.py-32, .py-28, .py-24, .py-20 { padding: 3rem !important }`
   * mobile override per user request — Tailwind utilities now decide spacing. */

  /* Top bar tagline can be a touch smaller on phones. */
  [data-testid="top-bar"] > div { font-size: 0.85rem !important; padding-top: 4px !important; padding-bottom: 4px !important; }

  /* Footer mobile-nav strip — already small, but cut to 3 cols on tiny phones. */
  [data-testid="footer-app-nav"] > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* CSS-grid items don't shrink past their content by default —
     min-w-0 lets them. Apply globally to common wrappers. */
  main, main > *, [data-testid$="-page"] { min-width: 0; }
}

/* Sonner toaster progress bar — shrinks from full -> empty over the toast
   duration, signalling time-to-dismiss. The toast itself exposes its
   duration as the `--duration` CSS variable. */
[data-sonner-toast].ck-sonner-toast::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #15b480, #facc15);
  transform-origin: left center;
  animation: ck-toast-progress 4s linear forwards;
  animation: ck-toast-progress var(--duration, 4s) linear forwards;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
[data-sonner-toast].ck-sonner-toast[data-type="success"]::after { background: linear-gradient(90deg, #15b480, #10b981); }
[data-sonner-toast].ck-sonner-toast[data-type="error"]::after   { background: linear-gradient(90deg, #ef4444, #f97316); }
[data-sonner-toast].ck-sonner-toast[data-type="warning"]::after { background: linear-gradient(90deg, #facc15, #f97316); }
[data-sonner-toast].ck-sonner-toast[data-type="info"]::after    { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
@keyframes ck-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* Pause the progress bar when the user hovers the toast (Sonner sets data-expanded). */
[data-sonner-toaster][data-expanded="true"] [data-sonner-toast].ck-sonner-toast::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  [data-sonner-toast].ck-sonner-toast::after { animation: none; transform: scaleX(0); }
}


/* react-simple-code-editor + Prism (Tomorrow theme) overrides for Examples */
.ck-prism-editor { position: relative; }
.ck-prism-editor pre.ck-prism-pre,
.ck-prism-editor textarea.ck-prism-textarea {
  background: transparent !important;
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.ck-prism-editor textarea.ck-prism-textarea {
  color: transparent !important;
  caret-color: #34d399 !important;
}
.ck-prism-editor textarea.ck-prism-textarea::selection { background: rgba(16,185,129,0.25); }
/* Prism-tomorrow color tweaks for better contrast on #0a0a0a */
.ck-prism-editor .token.comment,
.ck-prism-editor .token.prolog,
.ck-prism-editor .token.doctype,
.ck-prism-editor .token.cdata { color: #6b7280; font-style: italic; }
.ck-prism-editor .token.punctuation { color: #cbd5e1; }
.ck-prism-editor .token.keyword,
.ck-prism-editor .token.builtin,
.ck-prism-editor .token.boolean,
.ck-prism-editor .token.atrule { color: #f472b6; }
.ck-prism-editor .token.string,
.ck-prism-editor .token.char,
.ck-prism-editor .token.attr-value { color: #fde68a; }
.ck-prism-editor .token.number,
.ck-prism-editor .token.constant { color: #fb923c; }
.ck-prism-editor .token.function,
.ck-prism-editor .token.class-name { color: #34d399; }
.ck-prism-editor .token.operator { color: #38bdf8; }
.ck-prism-editor .token.macro,
.ck-prism-editor .token.directive { color: #a78bfa; }
.ck-prism-editor .token.tag,
.ck-prism-editor .token.entity { color: #fb7185; }

/* Chapter pulse highlight when arriving via #ch-{slug} hash from a Lesson CTA */
@keyframes ck-chapter-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); background: rgba(16,185,129,0.06); }
  60%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); background: rgba(16,185,129,0.04); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0);    background: transparent; }
}
.ck-chapter-pulse {
  scroll-margin-top: 180px;
  border-radius: 8px;
  animation: ck-chapter-pulse 2.4s ease-out;
}


/* ============ Scroll performance — GPU layers + content-visibility ============
   Promote heavy animated sections (marquees, large grids, hero blocks) to
   their own compositor layer so paint is decoupled from page scroll. Adds
   `content-visibility: auto` on offscreen sections so the browser skips
   layout/paint until they enter the viewport. */
.ck-mq-track,
.fade-up,
[data-testid="home-blog-section"],
[data-testid="home-visualizer-section"],
[data-testid="home-career-teaser"] {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
section[data-testid] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Opt-in content-visibility for sections that don't have a data-testid.
   Apply to heavy below-fold sections (FEATURES grid, BLOG magazine row,
   DSA visualizer) so their layout + paint + animations are skipped while
   off-screen. Biggest single perf win on Home page scroll. */
.ck-cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Pause every marquee when its parent section is offscreen so we don't burn
   GPU cycles on a 4800px-wide animated track that nobody is looking at. */
section[data-testid]:not(:is(:hover, :focus-within)) .ck-mq-track {
  /* CSS containment alone doesn't pause CSS keyframes — content-visibility:auto
     does pause animations inside skipped trees, so this rule is mostly a no-op
     that documents intent and lets us tune later if needed. */
}

/* ============ SVG overflow guard — keep every inline SVG inside its parent
   on mobile. Inline SVGs without a width attribute can render at intrinsic
   viewBox size on small viewports and push the page wider than 100vw. */
svg:not(.allow-overflow) {
  max-width: 100%;
  height: auto;
}

/* ============ Hide "Made with Emergent" branding overlay ============
   Removed at user request for production deployment on custom domain. */
#emergent-badge,
[id*="emergent-badge"],
a[href*="emergent.sh"][class*="badge"],
div[class*="EmergentBadge"],
[data-emergent-badge] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Lesson page polish — user feedback iter 187
 * ────────────────────────────────────────────────────────────────────── */

/* All ordered lists on lesson + GEO pages use ROMAN numerals (I, II, III…).
 * Nested ordered lists use lower-roman (i, ii, iii…). Plain unstyled lists
 * (.list-none, [class*="list-none"]) and ordered lists in admin tables
 * keep their default styling. */
[data-testid="lesson-body-with-translation"] ol,
[data-testid="lesson-content"] ol,
[data-testid="geo-detail-body"] ol,
.ck-prose ol {
  list-style-type: upper-roman !important;
}
[data-testid="lesson-body-with-translation"] ol ol,
[data-testid="lesson-content"] ol ol,
[data-testid="geo-detail-body"] ol ol,
.ck-prose ol ol {
  list-style-type: lower-alpha !important;
}
[data-testid="lesson-body-with-translation"] ol ol ol,
[data-testid="lesson-content"] ol ol ol,
[data-testid="geo-detail-body"] ol ol ol,
.ck-prose ol ol ol {
  list-style-type: lower-roman !important;
}

/* Hinglish translation banner — sharp corners (no border-radius) per spec. */
[data-testid="hinglish-banner"] {
  border-radius: 0 !important;
}
[data-testid="hinglish-banner"] button {
  border-radius: 0 !important;
}

/* iter 216 — Removed the iter-189 catch-all `main [class*="max-w-"][class*="mx-auto"][class*="py-"]`
 * normaliser per user request. Page-level padding is now controlled by EITHER
 *   (a) the global `body section { padding: 3rem }` rule (applies to every
 *       <section> element automatically), or
 *   (b) the Tailwind `py-12` utility on a per-page wrapper.
 * Pages that previously used `<div className="…py-20">` should switch to
 * either `<section>` (preferred) or `py-12` to match the global rhythm. */

/* All h1/h2/h3 inside lesson + GEO bodies get EQUAL top + bottom margin so
 * the spacing rhythm above the heading matches the spacing below it.
 *
 * EXCEPTION: the Radix Accordion renders its trigger row as `<h3 class="flex">`
 * which is purely structural (semantic level only). We exclude it here so the
 * 2 rem margin doesn't blow apart the Interview Q&A items. */
[data-testid="lesson-body-with-translation"] h1,
[data-testid="lesson-body-with-translation"] h2,
[data-testid="lesson-body-with-translation"] h3:not(.flex),
[data-testid="geo-detail-body"] h1,
[data-testid="geo-detail-body"] h2,
[data-testid="geo-detail-body"] h3:not(.flex) {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Also kill any inherited h3 margin INSIDE the Interview accordion just in
 * case another rule reaches into it (defence-in-depth). */
[data-testid="lesson-interview-accordion"] h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* User-spec override (iter 193): Tailwind's `mt-10` defaults to 2.5rem which
 * was too airy on the lesson pages. Shrink globally to 1rem. */
.mt-10 {
  margin-top: 1rem !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Light-mode fixes (iter 194)
 *   - Bullet markers (Roman / Alpha pills) were rgba(yellow, 0.95) on
 *     white -> invisible. Darken to amber-700 with stronger border.
 *   - CodeBlock toolbar (still dark bg in light mode) needs LIGHT text so
 *     the copy/run icons remain visible.
 *   - Footer top section + "Follow us" stripe must keep the dark slate
 *     background (per user spec).
 *   - LanguagesBar selected tab needs a visible yellow chip on white.
 *   - Compiler page copy/share buttons need light icons on the dark rail.
 * ────────────────────────────────────────────────────────────────────── */

/* 1. Bullets — outer Roman + inner Alphabet markers darker in light mode. */


/* Numbered (ck-numbered) outer ol markers — same treatment. */


/* 2. CodeBlock toolbar — keep light-on-dark even in light mode. */


/* Compiler page rail buttons */


/* Lang label inside CodeBlock header — keep readable on dark. */


/* 3. Footer top section + Follow-us stripe — PER USER SPEC keep DARK in
 * light mode. Inline `style={{background:'#16191c'}}` on the <footer>
 * already provides this; explicit no-op here documents intent. */

/* 4. LanguagesBar — selected language tab needs strong yellow on white. */


/* 5. "Did this lesson help you?" — REMOVED in iter 195. The previous
 * `border-bottom: 0` rule was making the rater card look visually clipped
 * at the bottom. Now we keep the full 4-side border in both light + dark. */
[data-testid="lesson-rater"] + hr,
[data-testid="lesson-feedback"] + hr,
[data-testid="lesson-rater"] + div[role="separator"],
[data-testid="lesson-feedback"] + div[role="separator"] {
  display: none !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Iter 195 — More light-mode visibility fixes
 *   - LanguagesBar eyebrow label ("// tutorials") darkened from translucent
 *     yellow -> solid amber-700 so it reads on the light gradient bg.
 *   - Diagram step strip buttons (Overview / 1 Table / 2 Row / 3 Column…):
 *     active chip needs darker amber on light bg; inactive chip darkened
 *     slate so the "1 / 2 / 3" labels are readable.
 *   - Footer: keep DARK bg + LIGHT text (verify strip + column links +
 *     follow-us). Previous iter accidentally let the global lesson-body
 *     overrides darken some footer text -> now scoped properly.
 *   - Fenced code blocks INSIDE the lesson body must stay dark with light
 *     text, including unlanguaged blocks like the "Run in MySQL Workbench"
 *     note in SQL lessons.
 * ────────────────────────────────────────────────────────────────────── */

/* 1. LanguagesBar eyebrow ("// tutorials" / "// compiler") */


/* 2. Diagram step strip — active + inactive states */


/* 3. Footer — keep DARK in light mode AND keep its inner text LIGHT.
 *    The footer wrapper has inline `style={{ background: '#16191c' }}`
 *    (dark) but our global lesson-body overrides accidentally darkened
 *    text-slate-* descendants. Scope the global rule out of <footer>. */


/* 3b. Verify-cert strip — dark bg, light text. */


/* 4. Lesson-body fenced code blocks — keep dark even in light mode so
 *    notes like "Run in MySQL Workbench…" remain readable. */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 197 — More light-mode fixes
 *   - Pro Tip blocks (emerald-200 on emerald-500/10) were unreadable on
 *     white; flip to dark-emerald text on a stronger tint.
 *   - InfoPage CTA band default = #0a0a0a (dark); light mode = #f8fafd
 *     per user spec.
 *   - Footer-app-nav (HOME / TUTORIALS / EXAMPLES… tile grid) labels
 *     forced to BLACK in light mode for crisp contrast on the light-blue
 *     bg (some global lesson-body overrides were darkening / lightening
 *     them inconsistently).
 * ────────────────────────────────────────────────────────────────────── */

/* 1. Pro Tip box readability in light mode */


/* 2. InfoPage CTA band */
.ck-cta-band {
  background: #0a0a0a;
}


/* Social-icon glyph color override — Tailwind's `text-emerald-700` utility
 * gets out-cascaded by preflight's `a { color: inherit }`, AND in light
 * mode the iter-195 rule `html.light footer a { color:#cbd5e1 }` (spec
 * 0,2,2) overrode my previous (0,1,1) rule. Match the conflicting spec
 * with `footer [data-testid^=...]` so light mode resolves to emerald.
 * (testing_agent iter-93 finding). */
html footer [data-testid^="footer-social-"],
html [data-testid="footer"] [data-testid^="footer-social-"],
html.light footer [data-testid^="footer-social-"],
html.light [data-testid="footer"] [data-testid^="footer-social-"] {
  color: #047857 !important;             /* emerald-700 */
}
html footer [data-testid^="footer-social-"]:hover,
html [data-testid="footer"] [data-testid^="footer-social-"]:hover,
html.light footer [data-testid^="footer-social-"]:hover,
html.light [data-testid="footer"] [data-testid^="footer-social-"]:hover {
  color: #000000 !important;             /* black on yellow pill on hover */
}

/* 3. Footer app-nav (HOME / TUTORIALS / EXAMPLES…) labels — force BLACK
 * text in light mode so they read on the #ccedff tile bg. */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 198 — Social icon tooltips + Contact page light-mode visibility
 *   - `.ck-tooltip` adds a small dark pill on hover (above the element)
 *     with the value from `data-tooltip`.
 *   - Social icons get a fatter (w-9 h-9) white pill with a darker border
 *     so the colored glyph reads on the dark Follow Us strip in both modes.
 *   - /contact address chips (text-yellow-300 / emerald-300 / cyan-300 on
 *     light bg) flipped to darker tones in light mode.
 *   - /contact topic-card blurb text-slate-400 -> slate-700 in light mode.
 * ────────────────────────────────────────────────────────────────────── */

/* 1. Generic tooltip — works in both themes */
.ck-tooltip {
  position: relative;
}
.ck-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.ck-tooltip::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #0f172a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.ck-tooltip:hover::before,
.ck-tooltip:focus-visible::before,
.ck-tooltip:hover::after,
.ck-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* 2. /contact address chips in light mode — flip light-tone text to
 *    darker tones so they read on the page bg. */


/* 3. /contact topic-card body text */

/* The motion.button cards use `bg-gradient-to-b` w/ low-opacity colored
 * tints — in light mode their text-* colored titles + slate-400 blurb were
 * invisible. Force a clean white-ish card bg + dark text. */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 199 — Hero spacing + light-mode visibility batch
 *   - Hero band on every static info page (incl. /contact) now strict
 *     3 rem top + 3 rem bottom — older pt-20 / pt-10 / pb-24 wrappers
 *     were adding extra space. Force py-12 with no extra pt/pb above.
 *   - "Latest from the Blog" feature card text in light mode (was white
 *     on light bg) flipped to readable dark-on-light or kept dark bg.
 *   - "Beyond Expectations" testimonials section bg darkened slightly
 *     in light mode so the cards stand out.
 *   - Footer-app-nav tiles in light mode: icons emerald-900 on emerald-400
 *     bg for a single-tone polished look (per user-approved enhancement).
 *   - Resources sub-menu boxes equal width via grid auto-rows + h-full.
 *   - Home-page generic section padding normalised to 3 rem in light mode.
 *   - /courses/wordpress + similar pages: ensure text-slate-300/400/500
 *     inherits the light-mode lesson-body override.
 * ────────────────────────────────────────────────────────────────────── */

/* iter 223 — Removed the per-page hero-padding overrides
 *   (`[data-testid="info-hero"|"contact-hero"|"dyk-hero"] > div`,
 *    `[data-testid="contact-hero"] ~ .max-w-7xl`,
 *    `[data-testid="home-page"] > section > div[max-w][mx-auto]`)
 * that were each force-adding 3 rem padding on inner divs. They were
 * stacking on top of `.ck-geo-hero { padding: 3rem 1.5rem }` and the
 * global `body section { padding: 3rem !important }` rule, producing
 * the giant gaps the user has been chasing. Padding is now owned
 * ENTIRELY by those two global rules. */

/* 3. "Latest from the Blog" card text contrast in light mode */
html.light [data-testid="home-latest-blog"] .text-white,
html.light [data-testid="home-latest-blog"] h2,
html.light [data-testid="home-latest-blog"] h3,
html.light section:has(> div h2:where([class*="latest"], [class*="blog"])) h2,
html.light section:has(> div h2:where([class*="latest"], [class*="blog"])) h3 {
  color: #0f172a !important;
}

/* Large featured cover-image card — overlay text on the image. Force the
 * dark gradient so light text remains readable. */


/* 4. "Beyond Expectations" section bg in light mode */


/* 5. Footer-app-nav tile polish in LIGHT mode (user-approved iter 198) */


/* 6. Resources sub-menu equal width/height boxes
 *
 * Note (iter 202): the mega-menu (`navbar-resources-mega`) now controls its
 * own layout via Tailwind (`grid lg:grid-cols-3 auto-rows-fr`). The legacy
 * overrides below remain for the **old** simple dropdowns (`resources-menu`,
 * `navbar-resources-dropdown`) only — applying `display:grid` to the mega
 * wrapper itself broke positioning, so the rule is now scoped away from it.
 */
[data-testid="resources-menu"],
[data-testid="navbar-resources-dropdown"] {
  --rs-cols: 3;
}
[data-testid="resources-menu"] > a,
[data-testid="resources-menu"] > div > a,
[data-testid="navbar-resources-dropdown"] > a,
[data-testid="navbar-resources-dropdown"] > div > a {
  display: flex;
  height: 100%;
  min-height: 4.5rem;
  align-items: flex-start;
}
[data-testid="resources-menu"] > div,
[data-testid="navbar-resources-dropdown"] > div {
  display: grid !important;
  grid-template-columns: repeat(var(--rs-cols), minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
}
/* Mega-menu uniform cell height — let Tailwind own the columns. Iter 205:
 * reduced min-height so all 4 rows fit in a typical 800-900px viewport. */
[data-testid="navbar-resources-mega"] a {
  min-height: 3rem;
}

/* 7. /courses/wordpress + course-detail bodies inherit lesson-body light fixes */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 200 - Sonner toast visibility + width + admin text contrast
 * ────────────────────────────────────────────────────────────────────── */

/* Sonner: dynamic width based on content, never wider than viewport. */
[data-sonner-toaster] {
  width: auto !important;
}
[data-sonner-toaster] [data-sonner-toast] {
  width: auto !important;
  max-width: min(92vw, 560px) !important;
  white-space: normal !important;
}
[data-sonner-toaster] [data-sonner-toast] [data-title],
[data-sonner-toaster] [data-sonner-toast] [data-description],
[data-sonner-toaster] [data-sonner-toast] [data-content],
[data-sonner-toaster] [data-sonner-toast] {
  color: #F8FAFC !important;
}


/* Admin page: in light mode every text-slate-*/h1/h2/h3 across the admin
 * shell + every tab pane needs explicit dark text so it reads on white. */
html.light [data-testid="admin-page"] .text-white,
html.light [data-testid="admin-page"] h1,
html.light [data-testid="admin-page"] h2,
html.light [data-testid="admin-page"] h3,
html.light [data-testid="admin-page"] strong,
html.light [data-testid="admin-page"] th {
  color: #0f172a !important;
}


/* ──────────────────────────────────────────────────────────────────────
 * Iter 201 - Table hover + lang-toggle hover + compiler colors in light
 * ────────────────────────────────────────────────────────────────────── */

/* 1. Tables in light mode: hover row uses light slate bg + dark text. */


/* 2. Language toggle (EN | HI) in navbar - hover text in light mode. */


/* 3. Compilers (main + inline lesson) - keep DARK editor / output / stdin
 * panel in BOTH light and dark modes so syntax-highlighted code reads
 * with the same contrast everywhere. Light mode would otherwise force
 * everything to white via .text-slate-* overrides. */


/* stdin label band */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 203 — User feedback batch
 *   • Light-mode COPY icon: was text-slate-400 on light bg, almost invisible.
 *   • Beyond Expectations testimonial cards: dark drop-shadow looks crusty
 *     on a light background — kill it.
 *   • Home page sections: enforce 3rem (48px) vertical padding everywhere
 *     so the page rhythm matches the merged Coach+Visualizer block.
 * ────────────────────────────────────────────────────────────────────── */

/* 1. Copy icon — make it visible in light mode (lesson code blocks,
 *    BootstrapCoach, Compiler, CompareLanguages, etc). Any button whose
 *    aria-label or data-testid signals it's the copy control gets a
 *    darker stroke + visible border. */
/* 1. Copy icon — make it visible in light mode (lesson code blocks,
 *    BootstrapCoach, Compiler, CompareLanguages, etc).
 *
 *    Iter 208: previous version only targeted buttons by aria-label /
 *    data-testid. But the live copy buttons (e.g. in CodeBlock.jsx) only
 *    use Tailwind `text-slate-400` which beats our parent rule because
 *    the SVG's own stroke is `currentColor`. Now we use much higher
 *    specificity to force the SVG stroke to a dark slate in light mode
 *    regardless of the parent button class. */


/* The wrapping COPY/Copy label text — was text-slate-400 which is fine in
 * dark but invisible on the white pill. */


/* Markdown lesson body code blocks render with a generated `.copy-btn` from
 * the syntax-highlighter wrapper — bump those too. */


/* 2. Beyond Expectations testimonials — strip the heavy drop-shadow in
 *    light mode (it looked muddy on a light page). Use a hairline border
 *    instead for definition. */


/* 3. Home page — section spacing is now applied per-section in the JSX
 *    (Home.jsx) via Tailwind `py-12` so the layout is self-contained and
 *    matches the merged Coach+Visualizer block. The CSS-only override from
 *    earlier was removed at the user's request (iter 204) — they wanted the
 *    padding to come from the markup, not from a global cascade. */

/* ──────────────────────────────────────────────────────────────────────
 * Iter 204 — Subscription page light-mode background
 *
 * User requested the /subscription page background be `#fbfaf7` in light
 * mode (matches the Info / Guidelines / Terms / Refund pages so all
 * static pages share one cream-paper colour).
 *
 * Iter 205 — the user followed up: the HERO TITLE BLOCK specifically
 * should always wear `#fbfaf7` (in both light AND dark mode) so it reads
 * as a tinted hero band. New `.ck-sub-hero` rule below.
 * ────────────────────────────────────────────────────────────────────── */


/* Hero title block — beige band visible in BOTH themes so the title
 * always feels like an intro block.
 *
 * Iter 206: User wants the title bg to span the FULL viewport width on
 * every page (subscription / roadmaps / interview-questions / etc.). We
 * break out of the parent `max-w-*` container using the classic negative-
 * margin + 100vw trick. `calc(-50vw + 50%)` reaches the viewport edge
 * regardless of which max-w wrapper is in play. */
.ck-sub-hero {
  background: #fbfaf7;
  color: #0f172a;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 3rem 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────────
 * Iter 207 — SITEWIDE SECTION PADDING NORMALISATION
 *
 * User insisted: "all section on page, padding should be like Free Coding
 * Courses for beginners section". That section uses `py-12` (= 3 rem).
 *
 * Strategy:
 *   1. Default every `<section>` to 3 rem top + bottom padding.
 *   2. Opt-out via `data-no-pad-norm` on sections that need custom padding
 *      (hero bands, full-bleed CTAs, etc.).
 *   3. Use `!important` so Tailwind utilities (py-20 etc.) can't override.
 *   4. Lesson pages are EXEMPT — those use their own tight spacing
 *      controlled by Lesson.jsx (sidebar + body grid). The exemption is
 *      keyed off `.ck-lesson-page` on the lesson route's root <div>.
 *
 * Iter 216 — user reiterated: ONE site-wide standard for non-lesson pages,
 *   3 rem top / 3 rem bottom on every section, no per-page overrides.
 * ────────────────────────────────────────────────────────────────────── */
/* iter 224 — Removed ALL global section padding rules per user request:
 *   • `body section:not([data-no-pad-norm]):not(.ck-pad-none) { padding: 3rem }`
 *   • `body .ck-main .ck-lesson-page section { padding: 0 }`
 *   • `body section.ck-sub-hero,.ck-geo-hero,[data-no-pad-norm] { padding: 3rem }`
 *   • `body section.ck-pad-none { padding: 0 }`
 *   • `.ck-geo-hero + *:not(section) { margin-top: 3rem }` (also removed below)
 *
 * Spacing on each page now flows ENTIRELY from the JSX Tailwind utilities
 * (e.g. `py-12`) on per-page wrappers. `.ck-geo-hero` still owns its own
 * internal 3 rem padding via its base rule (no `!important` needed). */

.ck-sub-hero .text-muted { color: #475569 !important; }
.ck-sub-hero span.text-muted { color: #64748b !important; }


/* ──────────────────────────────────────────────────────────────────────
 * Iter 208 — Light-mode fixes per user screenshot
 *
 * (a) Home Coach+Visualizer section → white background, proper spacing,
 *     equal-height columns in light mode (was inheriting dark `#0a0a0a`).
 * (b) Resources mega menu → text was light-on-light in light mode.
 * (c) Lucide copy icon stroke fix (handled above).
 * ────────────────────────────────────────────────────────────────────── */

/* (a) Home — Coach + Visualizer section in light mode */


/* Ensure both columns stretch to equal height in light mode too. The
 * outer grid is already `items-stretch` (default), but we re-assert it
 * here so future Tailwind changes can't break it. */


/* (b) Resources mega menu — keep its dark identity (it's an overlay menu
 *     that pops out over any background), but ensure text contrast holds
 *     even when global light-mode rules try to lighten it. */


/* Geo / Roadmaps / Interview-Questions / Coding-Challenges / Case-Studies
 * pages — full-viewport-width centred title band on `#fbfaf7`, same vibe
 * as the subscription hero. Applied via `.ck-geo-hero` class in
 * GeoContent.jsx.
 *
 * Iter 211 — Global page rhythm.
 *   Per-section padding/margin caused mismatches between pages (e.g.
 *   /coach/bootstrap had no bottom space before the footer while
 *   /compare-languages had double padding). We now drive the spacing
 *   from a single `.ck-main` wrapper applied to <main> in App.js, so
 *   every route inherits identical top/bottom rhythm. Hero band keeps
 *   only the *internal* padding it needs to look like a band. */
.ck-geo-hero {
  background: #fbfaf7;
  color: #0f172a;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 3rem 1.5rem;
  text-align: center;
}
.ck-geo-hero h1 { color: #0f172a; }
.ck-geo-hero p  { color: #475569; }


/* HeroBreadcrumbs — chip strip injected at the top of every .ck-geo-hero
 * band by the portal-based <HeroBreadcrumbs/> component mounted in App.js.
 * Renders on top of the cream background, hugging the hero centre. */
.ck-breadcrumbs-slot {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
.ck-breadcrumbs {
  display: inline-flex;
}
.ck-breadcrumbs-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #475569;
}
.ck-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 0.4rem;
}
.ck-breadcrumb-home {
  width: 12px;
  height: 12px;
  margin-right: 0.15rem;
  color: #64748b;
}
.ck-breadcrumb-link {
  color: #475569;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
  padding: 0.05rem 0.1rem;
  border-radius: 4px;
}
.ck-breadcrumb-link:hover {
  color: #a16207;
  background: rgba(234, 179, 8, 0.08);
}
.ck-breadcrumb-current {
  color: #0f172a;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.05rem 0.1rem;
}
.ck-breadcrumb-sep {
  width: 12px;
  height: 12px;
  color: #94a3b8;
}

/* Dark-mode tweak — the band stays cream, but slightly tone down the
 * pill background so it doesn't look pure-white on a light surface
 * stretched over a dark page. */
html:not(.light) .ck-breadcrumbs-list {
  background: rgba(248, 250, 252, 0.7);
}

/* Global page wrapper — ensures every route ends with consistent
 * 3rem bottom space before the footer, and any page that DOESN'T
 * start with a `.ck-geo-hero` still gets a top breathing band.
 *
 * Iter 212 — Language-bar gap fix.
 *   Pages whose first child is a container that wraps a `.ck-geo-hero`
 *   (e.g. /blog, /practice, /terminology) were getting a 1.5 rem dark
 *   strip between the LanguagesBar and the cream band — the wrapper
 *   inherited the breathing padding meant for hero-less pages. We now
 *   use `:has()` to drop that padding when the wrapper's first visible
 *   child IS a hero, so the cream band sits flush under the language
 *   bar as a clean continuous strip. Non-hero pages keep the 2.5 rem. */
/* iter 231 — Removed `.ck-main { padding-bottom: 3rem }` again because it
 * stacked on top of every page's own `<div className="py-12">` post-hero
 * wrapper, producing 96 px of dark space before the footer. Each page
 * now owns its own bottom padding via its JSX `py-12` / `pb-12` class.
 * Pages without a post-hero wrapper (BootstrapCoach, Visualizer) had
 * `pb-12` added directly. */
/* iter 224 — removed `.ck-geo-hero + *:not(section) { margin-top: 3rem }` 
 * per user request. Pages now use their own JSX `mt-*` Tailwind classes
 * to control the gap between the cream hero and the next content block. */


/* ──────────────────────────────────────────────────────────────────────
 * Iter 210 — Light-mode language toggle + dropdown menu fixes.
 *
 * The `LanguageToggle` component uses non-existent Tailwind `light:`
 * variants (Tailwind only ships `dark:` here). In light mode the
 * fallback dark `bg-[#0a0a0a]` paints a near-black surface while the
 * option labels render `text-slate-300` — the text vanishes into the
 * background. Force a proper light surface and dark text so users can
 * read the menu (EN / HI / autotranslate hint).
 * ────────────────────────────────────────────────────────────────────── */



/* ──────────────────────────────────────────────────────────────────────
 * Fallback breadcrumb bar — rendered at the top of <main> when a page
 * does NOT have a `.ck-geo-hero` cream band. Keeps the chip strip
 * visible on every non-suppressed route (e.g. /compiler, /examples,
 * /about, /courses, /privacy) so users always know where they are.
 *
 * Visual: subtle dark strip with the same pill-shaped breadcrumb chip,
 * matching the hero version's typography so the site has ONE
 * breadcrumb language regardless of layout.
 * ────────────────────────────────────────────────────────────────── */
.ck-breadcrumbs-fallback {
  width: 100%;
  display: block;
  border-bottom: 1px solid #1a1a1a;
  background: #0a0a0a;
}
.ck-breadcrumbs-fallback > nav {
  display: block;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.6rem 1rem;
}
@media (min-width: 640px) {
  .ck-breadcrumbs-fallback > nav { padding: 0.6rem 1.5rem; }
}
.ck-breadcrumbs-fallback .ck-breadcrumbs-list {
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  border: 1px solid #1f2937;
}
.ck-breadcrumbs-fallback .ck-breadcrumb-link {
  color: #cbd5e1;
}
.ck-breadcrumbs-fallback .ck-breadcrumb-link:hover {
  color: #facc15;
  background: rgba(234, 179, 8, 0.08);
}
.ck-breadcrumbs-fallback .ck-breadcrumb-current {
  color: #ffffff;
}
.ck-breadcrumbs-fallback .ck-breadcrumb-home,
.ck-breadcrumbs-fallback .ck-breadcrumb-sep {
  color: #94a3b8;
}
/* Light-mode flip for the fallback strip — keep the chip light, dark text. */
html.light .ck-breadcrumbs-fallback {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
html.light .ck-breadcrumbs-fallback .ck-breadcrumbs-list {
  background: rgba(255, 255, 255, 0.85);
  border-color: #e2e8f0;
  color: #475569;
}
html.light .ck-breadcrumbs-fallback .ck-breadcrumb-link {
  color: #475569;
}
html.light .ck-breadcrumbs-fallback .ck-breadcrumb-current {
  color: #0f172a;
}
.marker\:text-yellow-500 *::marker{
  color: rgb(234 179 8 );
}
.marker\:text-yellow-500::marker{
  color: rgb(234 179 8 );
}
.file\:border-0::-webkit-file-upload-button{
  border-width: 0px;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-transparent::-webkit-file-upload-button{
  background-color: transparent;
}
.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}
.file\:text-sm::-webkit-file-upload-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::-webkit-file-upload-button{
  font-weight: 500;
}
.file\:font-medium::file-selector-button{
  font-weight: 500;
}
.file\:text-foreground::-webkit-file-upload-button{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.file\:text-foreground::file-selector-button{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.placeholder\:text-muted-foreground::placeholder{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-slate-600::placeholder{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-y-0::after{
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --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));
}
.first\:rounded-l-md:first-child{
  border-top-left-radius: calc(14px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(14px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child{
  border-left-width: 1px;
}
.last\:mb-0:last-child{
  margin-bottom: 0px;
}
.last\:rounded-r-md:last-child{
  border-top-right-radius: calc(14px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(14px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.focus-within\:relative:focus-within{
  position: relative;
}
.focus-within\:z-20:focus-within{
  z-index: 20;
}
.focus-within\:border-emerald-500:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.focus-within\:border-yellow-500:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.focus-within\:border-yellow-500\/50:focus-within{
  border-color: rgb(234 179 8 / 0.5);
}
.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\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  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\:-translate-y-1\.5:hover{
  --tw-translate-y: -0.375rem;
  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\:translate-y-\[-2px\]:hover{
  --tw-translate-y: -2px;
  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-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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-amber-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.hover\:border-amber-400\/70:hover{
  border-color: rgb(251 191 36 / 0.7);
}
.hover\:border-blue-400\/60:hover{
  border-color: rgb(96 165 250 / 0.6);
}
.hover\:border-cyan-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(103 232 249 / 1);
  border-color: rgb(103 232 249 / var(--tw-border-opacity, 1));
}
.hover\:border-cyan-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / 1);
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.hover\:border-cyan-400\/70:hover{
  border-color: rgb(34 211 238 / 0.7);
}
.hover\:border-emerald-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-400\/60:hover{
  border-color: rgb(52 211 153 / 0.6);
}
.hover\:border-emerald-400\/70:hover{
  border-color: rgb(52 211 153 / 0.7);
}
.hover\:border-emerald-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-500\/40:hover{
  border-color: rgb(16 185 129 / 0.4);
}
.hover\:border-emerald-500\/50:hover{
  border-color: rgb(16 185 129 / 0.5);
}
.hover\:border-emerald-500\/60:hover{
  border-color: rgb(16 185 129 / 0.6);
}
.hover\:border-fuchsia-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(240 171 252 / 1);
  border-color: rgb(240 171 252 / var(--tw-border-opacity, 1));
}
.hover\:border-fuchsia-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(232 121 249 / 1);
  border-color: rgb(232 121 249 / var(--tw-border-opacity, 1));
}
.hover\:border-fuchsia-400\/60:hover{
  border-color: rgb(232 121 249 / 0.6);
}
.hover\:border-indigo-400\/60:hover{
  border-color: rgb(129 140 248 / 0.6);
}
.hover\:border-indigo-400\/70:hover{
  border-color: rgb(129 140 248 / 0.7);
}
.hover\:border-orange-400\/70:hover{
  border-color: rgb(251 146 60 / 0.7);
}
.hover\:border-orange-500\/60:hover{
  border-color: rgb(249 115 22 / 0.6);
}
.hover\:border-pink-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(244 114 182 / 1);
  border-color: rgb(244 114 182 / var(--tw-border-opacity, 1));
}
.hover\:border-pink-400\/70:hover{
  border-color: rgb(244 114 182 / 0.7);
}
.hover\:border-purple-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 1);
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.hover\:border-red-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.hover\:border-red-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.hover\:border-red-500\/50:hover{
  border-color: rgb(239 68 68 / 0.5);
}
.hover\:border-sky-400\/60:hover{
  border-color: rgb(56 189 248 / 0.6);
}
.hover\:border-sky-400\/70:hover{
  border-color: rgb(56 189 248 / 0.7);
}
.hover\:border-slate-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / 1);
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-500\/50:hover{
  border-color: rgb(100 116 139 / 0.5);
}
.hover\:border-slate-600:hover{
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / 1);
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.hover\:border-yellow-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / 1);
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}
.hover\:border-yellow-400:hover{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / 1);
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.hover\:border-yellow-500:hover{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.hover\:border-yellow-500\/40:hover{
  border-color: rgb(234 179 8 / 0.4);
}
.hover\:border-yellow-500\/50:hover{
  border-color: rgb(234 179 8 / 0.5);
}
.hover\:border-yellow-500\/60:hover{
  border-color: rgb(234 179 8 / 0.6);
}
.hover\:border-yellow-500\/70:hover{
  border-color: rgb(234 179 8 / 0.7);
}
.hover\:border-zinc-600:hover{
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / 1);
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#0a0a0a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / 1);
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#0d0d0d\]\/40:hover{
  background-color: rgb(13 13 13 / 0.4);
}
.hover\:bg-\[\#0f0f0f\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / 1);
  background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#101010\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(16 16 16 / 1);
  background-color: rgb(16 16 16 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#111\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / 1);
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#121212\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / 1);
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#141414\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(20 20 20 / 1);
  background-color: rgb(20 20 20 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1a1a1a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / 1);
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent:hover{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.hover\:bg-amber-500\/10:hover{
  background-color: rgb(245 158 11 / 0.1);
}
.hover\:bg-cyan-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / 1);
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / 1);
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-cyan-500\/10:hover{
  background-color: rgb(6 182 212 / 0.1);
}
.hover\:bg-cyan-500\/15:hover{
  background-color: rgb(6 182 212 / 0.15);
}
.hover\:bg-destructive\/80:hover{
  background-color: hsl(0 62.8% 45% / 0.8);
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover{
  background-color: hsl(0 62.8% 45% / 0.9);
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / 1);
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-500\/10:hover{
  background-color: rgb(16 185 129 / 0.1);
}
.hover\:bg-emerald-500\/15:hover{
  background-color: rgb(16 185 129 / 0.15);
}
.hover\:bg-emerald-500\/20:hover{
  background-color: rgb(16 185 129 / 0.2);
}
.hover\:bg-emerald-500\/5:hover{
  background-color: rgb(16 185 129 / 0.05);
}
.hover\:bg-emerald-900\/40:hover{
  background-color: rgb(6 78 59 / 0.4);
}
.hover\:bg-fuchsia-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(232 121 249 / 1);
  background-color: rgb(232 121 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-fuchsia-950\/30:hover{
  background-color: rgb(74 4 78 / 0.3);
}
.hover\:bg-fuchsia-950\/40:hover{
  background-color: rgb(74 4 78 / 0.4);
}
.hover\:bg-muted:hover{
  background-color: hsl(215 25% 27%);
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/50:hover{
  background-color: hsl(215 25% 27% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-primary:hover{
  background-color: hsl(#10B981);
  background-color: hsl(var(--primary));
}
.hover\:bg-primary\/80:hover{
  background-color: hsl(#10B981 / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover{
  background-color: hsl(#10B981 / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-purple-500\/20:hover{
  background-color: rgb(168 85 247 / 0.2);
}
.hover\:bg-red-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/10:hover{
  background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-red-900\/60:hover{
  background-color: rgb(127 29 29 / 0.6);
}
.hover\:bg-secondary:hover{
  background-color: hsl(#EAB308);
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/80:hover{
  background-color: hsl(#EAB308 / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-slate-500\/40:hover{
  background-color: rgb(100 116 139 / 0.4);
}
.hover\:bg-slate-900\/60:hover{
  background-color: rgb(15 23 42 / 0.6);
}
.hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/40:hover{
  background-color: rgb(255 255 255 / 0.4);
}
.hover\:bg-white\/5:hover{
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-yellow-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / 1);
  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / 1);
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / 1);
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-500\/10:hover{
  background-color: rgb(234 179 8 / 0.1);
}
.hover\:bg-yellow-500\/5:hover{
  background-color: rgb(234 179 8 / 0.05);
}
.hover\:bg-yellow-500\/\[0\.03\]:hover{
  background-color: rgb(234 179 8 / 0.03);
}
.hover\:from-emerald-900\/50:hover{
  --tw-gradient-from: rgb(6 78 59 / 0.5) 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);
}
.hover\:from-yellow-500\/20:hover{
  --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-yellow-500\/\[0\.02\]:hover{
  --tw-gradient-to: rgb(234 179 8 / 0.02) var(--tw-gradient-to-position);
}
.hover\:text-accent-foreground:hover{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.hover\:text-amber-200:hover{
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 1);
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.hover\:text-amber-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 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 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-200:hover{
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / 1);
  color: rgb(165 243 252 / var(--tw-text-opacity, 1));
}
.hover\:text-cyan-300:hover{
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / 1);
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-200:hover{
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / 1);
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-300:hover{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-400:hover{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-500:hover{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.hover\:text-fuchsia-100:hover{
  --tw-text-opacity: 1;
  color: rgb(250 232 255 / 1);
  color: rgb(250 232 255 / var(--tw-text-opacity, 1));
}
.hover\:text-fuchsia-200:hover{
  --tw-text-opacity: 1;
  color: rgb(245 208 254 / 1);
  color: rgb(245 208 254 / var(--tw-text-opacity, 1));
}
.hover\:text-fuchsia-300:hover{
  --tw-text-opacity: 1;
  color: rgb(240 171 252 / 1);
  color: rgb(240 171 252 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-200:hover{
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / 1);
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-300:hover{
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / 1);
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.hover\:text-muted-foreground:hover{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.hover\:text-orange-200:hover{
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / 1);
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.hover\:text-pink-200:hover{
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / 1);
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-foreground:hover{
  color: hsl(0 0% 0%);
  color: hsl(var(--primary-foreground));
}
.hover\:text-purple-200:hover{
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / 1);
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.hover\:text-red-300:hover{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-100:hover{
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / 1);
  color: rgb(255 228 230 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-300:hover{
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.hover\:text-sky-200:hover{
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / 1);
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
.hover\:text-sky-300:hover{
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / 1);
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-200:hover{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 1);
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-300:hover{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-400:hover{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-200:hover{
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / 1);
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-300:hover{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / 1);
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-400:hover{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.hover\:text-yellow-500:hover{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 1);
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-300:hover{
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.hover\:no-underline:hover{
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:shadow-\[0_0_45px_-12px_rgba\(234\2c 179\2c 8\2c 0\.45\)\]:hover{
  --tw-shadow: 0 0 45px -12px rgba(234,179,8,0.45);
  --tw-shadow-colored: 0 0 45px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_45px_-8px_rgba\(16\2c 185\2c 129\2c 0\.5\)\]:hover{
  --tw-shadow: 0 0 45px -8px rgba(16,185,129,0.5);
  --tw-shadow-colored: 0 0 45px -8px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_10px_22px_-12px_rgba\(234\2c 179\2c 8\2c 0\.28\)\]:hover{
  --tw-shadow: 0 10px 22px -12px rgba(234,179,8,0.28);
  --tw-shadow-colored: 0 10px 22px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_15px_40px_-5px_rgba\(250\2c 204\2c 21\2c 0\.7\)\]:hover{
  --tw-shadow: 0 15px 40px -5px rgba(250,204,21,0.7);
  --tw-shadow-colored: 0 15px 40px -5px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_18px_40px_-16px_rgba\(234\2c 179\2c 8\2c 0\.25\)\]:hover{
  --tw-shadow: 0 18px 40px -16px rgba(234,179,8,0.25);
  --tw-shadow-colored: 0 18px 40px -16px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_18px_45px_-12px_rgba\(234\2c 179\2c 8\2c 0\.28\)\]:hover{
  --tw-shadow: 0 18px 45px -12px rgba(234,179,8,0.28);
  --tw-shadow-colored: 0 18px 45px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_18px_45px_-18px_rgba\(234\2c 179\2c 8\2c 0\.35\)\]:hover{
  --tw-shadow: 0 18px 45px -18px rgba(234,179,8,0.35);
  --tw-shadow-colored: 0 18px 45px -18px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_8px_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.6\)\]:hover{
  --tw-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[4px_4px_0_0_\#10b981\]:hover{
  --tw-shadow: 4px 4px 0 0 #10b981;
  --tw-shadow-colored: 4px 4px 0 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover{
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-cyan-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(6 182 212 / 1);
  border-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}
.focus\:border-cyan-500\/60:focus{
  border-color: rgb(6 182 212 / 0.6);
}
.focus\:border-emerald-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / 1);
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.focus\:border-purple-500\/60:focus{
  border-color: rgb(168 85 247 / 0.6);
}
.focus\:border-yellow-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.focus\:border-yellow-500\/50:focus{
  border-color: rgb(234 179 8 / 0.5);
}
.focus\:border-yellow-500\/60:focus{
  border-color: rgb(234 179 8 / 0.6);
}
.focus\:bg-accent:focus{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.focus\:bg-primary:focus{
  background-color: hsl(#10B981);
  background-color: hsl(var(--primary));
}
.focus\:text-accent-foreground:focus{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.focus\:text-primary-foreground:focus{
  color: hsl(0 0% 0%);
  color: hsl(var(--primary-foreground));
}
.focus\:opacity-100:focus{
  opacity: 1;
}
.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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus{
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:opacity-100:focus-visible{
  opacity: 1;
}
.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible{
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-1:focus-visible{
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible{
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:translate-y-0\.5:active{
  --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));
}
.active\:scale-\[0\.99\]:active{
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}
.active\:cursor-grabbing:active{
  cursor: grabbing;
}
.active\:bg-yellow-500\/10:active{
  background-color: rgb(234 179 8 / 0.1);
}
.active\:bg-yellow-500\/15:active{
  background-color: rgb(234 179 8 / 0.15);
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:cursor-default:disabled{
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:text-slate-700:disabled{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group[open] .group-open\:rotate-45{
  --tw-rotate: 45deg;
  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\:-translate-y-1{
  --tw-translate-y: -0.25rem;
  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\: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));
}
.group:hover .group-hover\:translate-x-1{
  --tw-translate-x: 0.25rem;
  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\:rotate-12{
  --tw-rotate: 12deg;
  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\: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\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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\:gap-3{
  gap: 0.75rem;
}
.group:hover .group-hover\:border-yellow-500{
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-cyan-500{
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / 1);
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-emerald-400{
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / 1);
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-emerald-500{
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-indigo-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / 1);
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / 1);
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / 1);
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-violet-500{
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / 1);
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / 1);
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-yellow-500\/10{
  background-color: rgb(234 179 8 / 0.1);
}
.group:hover .group-hover\:bg-yellow-500\/15{
  background-color: rgb(234 179 8 / 0.15);
}
.group:hover .group-hover\:text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-500{
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange-200{
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / 1);
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-orange-400{
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / 1);
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 1);
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline{
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.group\/row:hover .group-hover\/row\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-30{
  opacity: 0.3;
}
.group:hover .group-hover\:\[transform\:rotateY\(180deg\)\]{
  transform: rotateY(180deg);
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40{
  border-color: hsl(215 25% 27% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}
.group.toaster .group-\[\.toaster\]\:border-border{
  border-color: hsl(rgba(148, 163, 184, 0.14));
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted{
  background-color: hsl(215 25% 27%);
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary{
  background-color: hsl(#10B981);
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background{
  background-color: hsl(222 47% 11%);
  background-color: hsl(var(--background));
}
.group.destructive .group-\[\.destructive\]\:text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground{
  color: hsl(0 0% 0%);
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\: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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover{
  border-color: hsl(0 62.8% 45% / 0.3);
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover{
  background-color: hsl(0 62.8% 45%);
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover{
  color: hsl(210 40% 98%);
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover{
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus{
  --tw-ring-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus{
  --tw-ring-offset-color: #dc2626;
}
.peer:focus ~ .peer-focus\:text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70{
  opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled){
  opacity: 0.5;
}
.aria-selected\:bg-accent[aria-selected="true"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.aria-selected\:bg-accent\/50[aria-selected="true"]{
  background-color: hsl(#38bdf8 / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.aria-selected\:text-accent-foreground[aria-selected="true"]{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.aria-selected\:text-muted-foreground[aria-selected="true"]{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.aria-selected\:opacity-100[aria-selected="true"]{
  opacity: 1;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"]{
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled]{
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"]{
  --tw-translate-y: 0.25rem;
  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));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"]{
  --tw-translate-x: -0.25rem;
  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));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"]{
  --tw-translate-x: 0.25rem;
  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));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"]{
  --tw-translate-y: -0.25rem;
  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));
}
.data-\[state\=checked\]\:translate-x-4[data-state="checked"]{
  --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));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{
  --tw-translate-x: 0px;
  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));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"]{
  --tw-translate-x: 0px;
  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));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"]{
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  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));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"]{
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  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 accordion-up{

  from{
    height: var(--radix-accordion-content-height);
  }

  to{
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"]{
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down{

  from{
    height: 0;
  }

  to{
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"]{
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{
  flex-direction: column;
}
.data-\[state\=open\]\:border-emerald-500\/40[data-state="open"]{
  border-color: rgb(16 185 129 / 0.4);
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.data-\[state\=active\]\:bg-background[data-state="active"]{
  background-color: hsl(222 47% 11%);
  background-color: hsl(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"]{
  background-color: hsl(#10B981);
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"]{
  background-color: hsl(#38bdf8 / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"]{
  background-color: hsl(#EAB308);
  background-color: hsl(var(--secondary));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"]{
  background-color: hsl(215 25% 27%);
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{
  background-color: hsl(215 25% 27%);
  background-color: hsl(var(--input));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder]{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"]{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"]{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{
  color: hsl(0 0% 0%);
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"]{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"]{
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"]{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"]{
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled]{
  opacity: 0.5;
}
.data-\[state\=active\]\:shadow[data-state="active"]{
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
  transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"]{
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"]{
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"]{
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"]{
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"]{
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"]{
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"]{
  --tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"]{
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"]{
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"]{
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"]{
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"]{
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"]{
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"]{
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"]{
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"]{
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"]{
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"]{
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"]{
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"]{
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"]{
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"]{
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"]{
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"]{
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"]{
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"]{
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"]{
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"]{
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"]{
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"]{
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"]{
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"]{
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"]{
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"]{
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"]{
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"]{
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"]{
  animation-duration: 500ms;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{
  content: var(--tw-content);
  --tw-translate-x: 0px;
  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));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"]{
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{
  --tw-rotate: 180deg;
  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));
}
.dark\:border-\[\#262626\]:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / 1);
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1));
}
.dark\:border-destructive:is(.dark *){
  border-color: hsl(0 62.8% 45%);
  border-color: hsl(var(--destructive));
}
.dark\:bg-\[\#050505\]:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / 1);
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#0a0a0a\]:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / 1);
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#121212\]\/60:is(.dark *){
  background-color: rgb(18 18 18 / 0.6);
}
.dark\:text-slate-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-\[\#121212\]:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / 1);
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px){

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:right-0{
    right: 0px;
  }

  .sm\:right-6{
    right: 1.5rem;
  }

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

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

  .sm\:mb-1{
    margin-bottom: 0.25rem;
  }

  .sm\:mb-2{
    margin-bottom: 0.5rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:mb-5{
    margin-bottom: 1.25rem;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:mt-2{
    margin-top: 0.5rem;
  }

  .sm\:mt-3{
    margin-top: 0.75rem;
  }

  .sm\:mt-5{
    margin-top: 1.25rem;
  }

  .sm\:mt-6{
    margin-top: 1.5rem;
  }

  .sm\:mt-7{
    margin-top: 1.75rem;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:aspect-\[1\.45\/1\]{
    aspect-ratio: 1.45/1;
  }

  .sm\:h-11{
    height: 2.75rem;
  }

  .sm\:h-3\.5{
    height: 0.875rem;
  }

  .sm\:w-11{
    width: 2.75rem;
  }

  .sm\:w-16{
    width: 4rem;
  }

  .sm\:w-3\.5{
    width: 0.875rem;
  }

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

  .sm\:max-w-lg{
    max-width: 32rem;
  }

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

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

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

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

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

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

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

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

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

  .sm\:gap-2\.5{
    gap: 0.625rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\: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)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg{
    border-radius: 14px;
    border-radius: var(--radius);
  }

  .sm\:rounded-none{
    border-radius: 0px;
  }

  .sm\:border-2{
    border-width: 2px;
  }

  .sm\:border-b-0{
    border-bottom-width: 0px;
  }

  .sm\:border-r{
    border-right-width: 1px;
  }

  .sm\:p-10{
    padding: 2.5rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

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

  .sm\:p-7{
    padding: 1.75rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:p-9{
    padding: 2.25rem;
  }

  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

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

  .sm\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

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

  .sm\:pb-8{
    padding-bottom: 2rem;
  }

  .sm\:pt-24{
    padding-top: 6rem;
  }

  .sm\:pt-8{
    padding-top: 2rem;
  }

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

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

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

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

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

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

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

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

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

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

  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

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

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

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

  .sm\:tracking-\[0\.18em\]{
    letter-spacing: 0.18em;
  }

  .sm\:tracking-\[0\.3em\]{
    letter-spacing: 0.3em;
  }

  .sm\:tracking-widest{
    letter-spacing: 0.1em;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"]{
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:inset-3{
    inset: 0.75rem;
  }

  .md\:inset-5{
    inset: 1.25rem;
  }

  .md\:bottom-20{
    bottom: 5rem;
  }

  .md\:bottom-4{
    bottom: 1rem;
  }

  .md\:bottom-40{
    bottom: 10rem;
  }

  .md\:bottom-6{
    bottom: 1.5rem;
  }

  .md\:left-4{
    left: 1rem;
  }

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

  .md\:right-4{
    right: 1rem;
  }

  .md\:right-6{
    right: 1.5rem;
  }

  .md\:top-4{
    top: 1rem;
  }

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

  .md\:mb-10{
    margin-bottom: 2.5rem;
  }

  .md\:mb-14{
    margin-bottom: 3.5rem;
  }

  .md\:mb-16{
    margin-bottom: 4rem;
  }

  .md\:mb-4{
    margin-bottom: 1rem;
  }

  .md\:mb-6{
    margin-bottom: 1.5rem;
  }

  .md\:mb-8{
    margin-bottom: 2rem;
  }

  .md\:ml-2{
    margin-left: 0.5rem;
  }

  .md\:mt-10{
    margin-top: 2.5rem;
  }

  .md\:mt-12{
    margin-top: 3rem;
  }

  .md\:mt-14{
    margin-top: 3.5rem;
  }

  .md\:mt-5{
    margin-top: 1.25rem;
  }

  .md\:mt-8{
    margin-top: 2rem;
  }

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

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

  .md\:hidden{
    display: none;
  }

  .md\:h-10{
    height: 2.5rem;
  }

  .md\:h-12{
    height: 3rem;
  }

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

  .md\:h-16{
    height: 4rem;
  }

  .md\:h-3{
    height: 0.75rem;
  }

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

  .md\:h-32{
    height: 8rem;
  }

  .md\:h-6{
    height: 1.5rem;
  }

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

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

  .md\:w-10{
    width: 2.5rem;
  }

  .md\:w-12{
    width: 3rem;
  }

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

  .md\:w-16{
    width: 4rem;
  }

  .md\:w-20{
    width: 5rem;
  }

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

  .md\:w-3{
    width: 0.75rem;
  }

  .md\:w-3\.5{
    width: 0.875rem;
  }

  .md\:w-32{
    width: 8rem;
  }

  .md\:w-6{
    width: 1.5rem;
  }

  .md\:w-80{
    width: 20rem;
  }

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

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{
    width: var(--radix-navigation-menu-viewport-width);
  }

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

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

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

  .md\:-translate-y-3{
    --tw-translate-y: -0.75rem;
    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));
  }

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

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

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

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

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

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

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

  .md\:gap-3{
    gap: 0.75rem;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:gap-5{
    gap: 1.25rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:gap-7{
    gap: 1.75rem;
  }

  .md\:space-y-16 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4rem * var(--tw-space-y-reverse));
  }

  .md\:border-\[12px\]{
    border-width: 12px;
  }

  .md\:p-10{
    padding: 2.5rem;
  }

  .md\:p-12{
    padding: 3rem;
  }

  .md\:p-16{
    padding: 4rem;
  }

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

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

  .md\:p-7{
    padding: 1.75rem;
  }

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

  .md\:p-9{
    padding: 2.25rem;
  }

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

  .md\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-7{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

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

  .md\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:pl-3{
    padding-left: 0.75rem;
  }

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

  .md\:pr-12{
    padding-right: 3rem;
  }

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

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

  .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-\[11px\]{
    font-size: 11px;
  }

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

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

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

  .md\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .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\:tracking-\[0\.3em\]{
    letter-spacing: 0.3em;
  }
}
@media (min-width: 1024px){

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

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

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

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

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

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

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

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

  .lg\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9{
    grid-column: span 9 / span 9;
  }

  .lg\:block{
    display: block;
  }

  .lg\:inline{
    display: inline;
  }

  .lg\:flex{
    display: flex;
  }

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

  .lg\:hidden{
    display: none;
  }

  .lg\:min-h-0{
    min-height: 0px;
  }

  .lg\:min-h-\[480px\]{
    min-height: 480px;
  }

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

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

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

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

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

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

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

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

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

  .lg\:grid-cols-\[2fr_1fr\]{
    grid-template-columns: 2fr 1fr;
  }

  .lg\:grid-cols-\[360px_1fr\]{
    grid-template-columns: 360px 1fr;
  }

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

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

  .lg\:gap-12{
    gap: 3rem;
  }

  .lg\:gap-3{
    gap: 0.75rem;
  }

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

  .lg\:border-b-0{
    border-bottom-width: 0px;
  }

  .lg\:border-r{
    border-right-width: 1px;
  }

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

  .lg\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

  .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

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

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

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

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

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

  .lg\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }

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

  .lg\:text-\[2\.6rem\]{
    font-size: 2.6rem;
  }

  .lg\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1280px){

  .xl\:block{
    display: block;
  }

  .xl\:inline{
    display: inline;
  }

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

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

  .xl\:gap-5{
    gap: 1.25rem;
  }
}
@media print{

  .print\:hidden{
    display: none;
  }
}
.\[\&\+div\]\:text-xs+div{
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end){
  border-top-right-radius: calc(14px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(14px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start){
  border-top-left-radius: calc(14px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(14px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]){
  border-radius: calc(14px - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]){
  background-color: hsl(#38bdf8);
  background-color: hsl(var(--accent));
}
.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child{
  border-top-left-radius: calc(14px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(14px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child{
  border-top-right-radius: calc(14px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(14px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside){
  background-color: hsl(#38bdf8 / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end){
  border-top-right-radius: calc(14px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(14px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){
  padding-right: 0px;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{
  --tw-translate-y: 2px;
  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));
}
.\[\&\>span\]\:line-clamp-1>span{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
  --tw-translate-y: -3px;
  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));
}
.\[\&\>svg\]\:absolute>svg{
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg{
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg{
  top: 1rem;
}
.\[\&\>svg\]\:size-4>svg{
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-3\.5>svg{
  height: 0.875rem;
}
.\[\&\>svg\]\:w-3\.5>svg{
  width: 0.875rem;
}
.\[\&\>svg\]\:shrink-0>svg{
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-destructive>svg{
  color: hsl(0 62.8% 45%);
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-emerald-400>svg{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-foreground>svg{
  color: hsl(210 40% 98%);
  color: hsl(var(--foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~*{
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr{
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{
  --tw-rotate: 90deg;
  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));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{
  --tw-rotate: 180deg;
  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));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{
  color: hsl(215 20% 65%);
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p{
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg{
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child{
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}

.App {
  min-height: 100vh;
  background: #050505;
  color: #F8FAFC;
}

html.light .App {
  background: var(--bg);
  color: var(--text);
}