:root {
    --theme-canvas: #f8faf9;
    --theme-surface-1: #ffffff;
    --theme-surface-2: #f6f9f7;
    --theme-surface-3: #eef4f0;
    --theme-text-strong: #111827;
    --theme-text-body: #4b5563;
    --theme-text-muted: #6b7280;
    --theme-border: #e5e7eb;
    --theme-border-strong: #cbd5e1;
    --theme-accent: #006b3f;
    --theme-accent-bright: #008c52;
    --theme-accent-soft: #e9f8f0;
    --theme-nav: rgba(255, 255, 255, 0.9);
    --theme-footer: #111827;
    --theme-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
    --theme-shadow-md: 0 14px 32px rgba(15, 23, 42, 0.1);
    --theme-focus: rgba(0, 140, 82, 0.4);
}

html[data-theme="dark"] {
    color-scheme: dark;
    accent-color: #34d399;
    --theme-canvas: #06110c;
    --theme-surface-1: #0e1b15;
    --theme-surface-2: #13231b;
    --theme-surface-3: #1a2d23;
    --theme-text-strong: #f4f9f6;
    --theme-text-body: #d2ddd7;
    --theme-text-muted: #a5b8ad;
    --theme-border: #31483c;
    --theme-border-strong: #486456;
    --theme-accent: #56e6a0;
    --theme-accent-bright: #34d399;
    --theme-accent-soft: #143526;
    --theme-nav: rgba(8, 24, 16, 0.92);
    --theme-footer: #030906;
    --theme-shadow-sm: 0 7px 20px rgba(0, 0, 0, 0.24);
    --theme-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.32);
    --theme-focus: rgba(52, 211, 153, 0.5);
    background: var(--theme-canvas);
}

html[data-theme="dark"] body {
    background-color: var(--theme-canvas) !important;
    background-image:
        radial-gradient(circle at 12% 4%, rgba(16, 185, 129, 0.09), transparent 28rem),
        radial-gradient(circle at 88% 26%, rgba(20, 184, 166, 0.06), transparent 32rem);
    background-attachment: fixed;
    color: var(--theme-text-strong) !important;
}

html.theme-ready body,
html.theme-ready .glass-nav,
html.theme-ready .theme-toggle,
html.theme-ready input,
html.theme-ready textarea,
html.theme-ready select {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

html[data-theme="dark"] ::selection {
    background: #087a49;
    color: #ffffff;
}

html[data-theme="dark"] {
    scrollbar-color: #426454 #0c1812;
    scrollbar-width: thin;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0c1812;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #426454;
    border: 3px solid #0c1812;
    border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #5b7d6c;
}

/* Surface hierarchy */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90 {
    background-color: var(--theme-surface-1) !important;
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/50 {
    background-color: var(--theme-surface-2) !important;
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-100\/50,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-slate-100 {
    background-color: var(--theme-surface-3) !important;
}

html[data-theme="dark"] .bg-gray-400 {
    background-color: #547062 !important;
}

html[data-theme="dark"] .bg-gray-900 {
    background-color: var(--theme-footer) !important;
}

html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .bg-emerald-50\/60,
html[data-theme="dark"] .bg-emerald-50\/70,
html[data-theme="dark"] .bg-emerald-500\/5,
html[data-theme="dark"] .bg-emerald-500\/10,
html[data-theme="dark"] .bg-emerald-300\/10,
html[data-theme="dark"] .bg-hmiGreen\/5,
html[data-theme="dark"] .bg-hmiGreen\/10,
html[data-theme="dark"] .bg-hmiGreenLight\/20 {
    background-color: var(--theme-accent-soft) !important;
}

html[data-theme="dark"] .bg-hmiGreen,
html[data-theme="dark"] .bg-emerald-600 {
    background-color: #087a49 !important;
}

html[data-theme="dark"] .bg-hmiDark {
    background-color: #075235 !important;
}

/* Dark semantic badge palettes */
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100 { background-color: #3d2a0e !important; }
html[data-theme="dark"] .bg-sky-100 { background-color: #102f40 !important; }
html[data-theme="dark"] .bg-blue-100 { background-color: #152d4b !important; }
html[data-theme="dark"] .bg-cyan-100 { background-color: #0c3539 !important; }
html[data-theme="dark"] .bg-teal-100 { background-color: #0d3530 !important; }
html[data-theme="dark"] .bg-indigo-100 { background-color: #26264d !important; }
html[data-theme="dark"] .bg-purple-100 { background-color: #352042 !important; }
html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-rose-100 { background-color: #401d2a !important; }
html[data-theme="dark"] .bg-red-50 { background-color: #421d1d !important; }
html[data-theme="dark"] .bg-orange-100 { background-color: #432815 !important; }

/* Typography hierarchy */
html[data-theme="dark"] .text-gray-950,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-black {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-slate-700 {
    color: var(--theme-text-body) !important;
}

html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-gray-200 {
    color: #c4d2ca !important;
}

html[data-theme="dark"] .text-white {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-hmiDark,
html[data-theme="dark"] .text-hmiGreen,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800 {
    color: var(--theme-accent) !important;
}

html[data-theme="dark"] .text-amber-500,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800 { color: #facc54 !important; }
html[data-theme="dark"] .text-sky-400,
html[data-theme="dark"] .text-sky-600,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-sky-800 { color: #7dd3fc !important; }
html[data-theme="dark"] .text-blue-500,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
html[data-theme="dark"] .text-cyan-600,
html[data-theme="dark"] .text-cyan-700 { color: #67e8f9 !important; }
html[data-theme="dark"] .text-teal-600,
html[data-theme="dark"] .text-teal-700 { color: #5eead4 !important; }
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800 { color: #a5b4fc !important; }
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-700 { color: #d8b4fe !important; }
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-pink-500 { color: #fda4af !important; }
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }

/* Borders, dividers, shadows */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-100\/50,
html[data-theme="dark"] .border-gray-150,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-200\/80,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .border-gray-700,
html[data-theme="dark"] .border-gray-800 {
    border-color: #25392f !important;
}

html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-emerald-100\/50 {
    border-color: #286247 !important;
}

html[data-theme="dark"] .shadow-sm { box-shadow: var(--theme-shadow-sm) !important; }
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg { box-shadow: var(--theme-shadow-md) !important; }
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl {
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38) !important;
}

/* Tailwind light gradient stops */
html[data-theme="dark"] .from-gray-50 {
    --tw-gradient-from: #13231b var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(19 35 27 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .from-gray-100 {
    --tw-gradient-from: #1a2d23 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(26 45 35 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .to-white { --tw-gradient-to: #0e1b15 var(--tw-gradient-to-position) !important; }
html[data-theme="dark"] .via-white {
    --tw-gradient-to: rgb(14 27 21 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), #0e1b15 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .to-gray-100 { --tw-gradient-to: #1a2d23 var(--tw-gradient-to-position) !important; }
html[data-theme="dark"] .to-gray-200 { --tw-gradient-to: #22382c var(--tw-gradient-to-position) !important; }
html[data-theme="dark"] .from-emerald-50 {
    --tw-gradient-from: #103526 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(16 53 38 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .to-emerald-100,
html[data-theme="dark"] .to-green-100 { --tw-gradient-to: #174a36 var(--tw-gradient-to-position) !important; }
html[data-theme="dark"] .from-amber-50 {
    --tw-gradient-from: #3b2608 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(59 38 8 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .to-amber-100 { --tw-gradient-to: #51370d var(--tw-gradient-to-position) !important; }
html[data-theme="dark"] .from-sky-50 {
    --tw-gradient-from: #082f49 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(8 47 73 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="dark"] .to-sky-100 { --tw-gradient-to: #0c4a6e var(--tw-gradient-to-position) !important; }

/* Navigation, hero, cards and content components */
html[data-theme="dark"] .glass-nav,
html[data-theme="dark"] .glass-nav.top-nav,
html[data-theme="dark"] nav.glass-nav {
    background: var(--theme-nav) !important;
    border: 1px solid rgba(86, 230, 160, 0.16);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .hero-section {
    background:
        radial-gradient(circle at 85% 12%, rgba(110, 231, 183, 0.18), transparent 17rem),
        linear-gradient(135deg, #0b4b32 0%, #0f766e 52%, #14532d 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(167, 243, 208, 0.18);
}

html[data-theme="dark"] .hero-stat {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .bg-pattern {
    background:
        linear-gradient(135deg, rgba(4, 25, 16, 0.94), rgba(3, 13, 9, 0.95)),
        url("https://www.transparenttextures.com/patterns/cubes.png") !important;
}

html[data-theme="dark"] .nav-item.active {
    background: rgba(52, 211, 153, 0.13) !important;
    border-bottom-color: var(--theme-accent-bright) !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .featured-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .program-card,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .cabang-card {
    background: var(--theme-surface-1) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .hover-card,
html[data-theme="dark"] .cabang-card,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .program-card {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), var(--theme-shadow-sm) !important;
}

html[data-theme="dark"] .hover-card:hover,
html[data-theme="dark"] .cabang-card:hover,
html[data-theme="dark"] .news-card:hover,
html[data-theme="dark"] .program-card:hover {
    border-color: rgba(86, 230, 160, 0.38) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(52, 211, 153, 0.08) !important;
}

html[data-theme="dark"] .brand-title,
html[data-theme="dark"] .news-title,
html[data-theme="dark"] .section-title {
    color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .news-summary,
html[data-theme="dark"] .list-check {
    color: var(--theme-text-body) !important;
}

html[data-theme="dark"] .news-meta,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .empty-state {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .chip,
html[data-theme="dark"] .progress-bar {
    background: var(--theme-surface-3) !important;
    color: var(--theme-text-body) !important;
}

html[data-theme="dark"] .progress-fill {
    filter: brightness(1.45) saturate(0.9);
}

html[data-theme="dark"] .featured-image {
    background: linear-gradient(135deg, #123326, #164735) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .filter-btn {
    color: var(--theme-text-body) !important;
}

html[data-theme="dark"] .filter-btn.active {
    background: #006b3f !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .roadmap-item { border-color: var(--theme-border) !important; }
html[data-theme="dark"] .roadmap-item.active { border-color: var(--theme-accent-bright) !important; }
html[data-theme="dark"] .search-box input { background: transparent !important; }
html[data-theme="dark"] .footer-shell,
html[data-theme="dark"] footer.bg-gray-900 {
    background: var(--theme-footer) !important;
    border-top-color: #20342a !important;
}

html[data-theme="dark"] .modal-content::-webkit-scrollbar-track { background: var(--theme-surface-3); }
html[data-theme="dark"] .modal-content::-webkit-scrollbar-thumb { background: #4d7562; }
html[data-theme="dark"] svg path[fill="#ffffff"] { fill: var(--theme-canvas); }

/* Forms, tables, code and native controls */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] option {
    background-color: var(--theme-surface-2) !important;
    color: var(--theme-text-strong) !important;
    border-color: var(--theme-border-strong) !important;
    caret-color: var(--theme-accent-bright);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--theme-text-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--theme-text-strong) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface-2) inset !important;
    caret-color: var(--theme-accent-bright);
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

html[data-theme="dark"] table {
    background: var(--theme-surface-1);
    color: var(--theme-text-body);
}

html[data-theme="dark"] thead,
html[data-theme="dark"] th {
    background: var(--theme-surface-3) !important;
    color: var(--theme-text-strong) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] td,
html[data-theme="dark"] tr {
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] tbody tr:hover {
    background: rgba(52, 211, 153, 0.055) !important;
}

html[data-theme="dark"] hr {
    border-color: var(--theme-border);
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code {
    background: #09140f;
    color: #c9f7df;
    border-color: var(--theme-border);
}

html[data-theme="dark"] iframe {
    background: var(--theme-surface-2);
    border-color: var(--theme-border) !important;
    filter: brightness(0.84) contrast(1.08) saturate(0.9);
    transition: filter 180ms ease;
}

html[data-theme="dark"] iframe:hover,
html[data-theme="dark"] iframe:focus {
    filter: brightness(0.92) contrast(1.04) saturate(0.95);
}

/* Explicit interactive variants: base utility rules use !important. */
html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .hover\:bg-gray-200:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: #22382c !important;
}

html[data-theme="dark"] .hover\:bg-green-50:hover,
html[data-theme="dark"] .hover\:bg-emerald-50:hover,
html[data-theme="dark"] .hover\:bg-emerald-100:hover {
    background-color: #1b4834 !important;
}

html[data-theme="dark"] .hover\:bg-white:hover {
    background-color: #ecfdf5 !important;
}

html[data-theme="dark"] .hover\:bg-white:hover.hover\:text-hmiGreen,
html[data-theme="dark"] .hover\:bg-white:hover.hover\:text-hmiDark {
    color: #065f46 !important;
}

html[data-theme="dark"] .hover\:bg-hmiDark:hover { background-color: #075235 !important; }
html[data-theme="dark"] .hover\:bg-hmiGreen:hover { background-color: #087a49 !important; }
html[data-theme="dark"] .hover\:text-hmiGreen:hover,
html[data-theme="dark"] .hover\:text-hmiDark:hover { color: #86efac !important; }
html[data-theme="dark"] .hover\:text-white:hover { color: #ffffff !important; }
html[data-theme="dark"] .hover\:text-amber-800:hover { color: #fde68a !important; }
html[data-theme="dark"] .hover\:text-blue-500:hover { color: #93c5fd !important; }
html[data-theme="dark"] .hover\:text-emerald-800:hover { color: #6ee7b7 !important; }
html[data-theme="dark"] .hover\:text-pink-500:hover { color: #f9a8d4 !important; }
html[data-theme="dark"] .hover\:text-red-500:hover,
html[data-theme="dark"] .hover\:text-red-700:hover { color: #fca5a5 !important; }
html[data-theme="dark"] .hover\:text-sky-400:hover { color: #7dd3fc !important; }
html[data-theme="dark"] .hover\:border-hmiGreen:hover { border-color: var(--theme-accent-bright) !important; }

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .filter-btn:hover {
    background: #1b4834 !important;
    color: #86efac !important;
}

html[data-theme="dark"] [class~="aspect-[3/4]"][class~="border-white"] {
    border-color: var(--theme-border-strong) !important;
}

html[data-theme="dark"] body.bg-gray-50,
html[data-theme="dark"] body.bg-slate-50 {
    background-color: var(--theme-canvas) !important;
}

html[data-theme="dark"] body.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

html[data-theme="dark"] :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--theme-focus) !important;
    outline-offset: 3px;
    --tw-ring-offset-color: var(--theme-canvas) !important;
}

/* Theme control */
.theme-toggle {
    min-height: 42px;
    min-width: 42px;
    position: relative;
    isolation: isolate;
}

.theme-toggle i {
    transition: transform 220ms ease;
}

.theme-toggle:hover i {
    transform: rotate(12deg) scale(1.08);
}

html[data-theme="dark"] .theme-toggle {
    background: #16271e !important;
    border-color: #496758 !important;
    color: #e8f7ee !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: #1d3428 !important;
    border-color: var(--theme-accent-bright) !important;
    color: #ffffff !important;
}

.theme-fab {
    position: fixed !important;
    left: 1rem;
    bottom: 1rem;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    padding: 0.65rem 0.9rem;
    background: var(--theme-surface-1);
    color: var(--theme-text-body);
    box-shadow: var(--theme-shadow-md);
    font: 700 0.82rem/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.theme-fab::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--theme-accent-bright);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12);
}

.theme-fab-mobile {
    display: none !important;
}

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

@media (max-width: 767px) {
    .theme-fab {
        left: 0.75rem;
        bottom: 0.75rem;
        padding: 0.7rem;
    }

    .theme-fab-mobile {
        display: inline-flex !important;
    }

    .theme-fab span {
        display: none;
    }
}

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

/* Page Transition System */
html.js-ready body {
    opacity: 0;
}
html.js-ready body.page-loaded {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
html.js-ready body.page-exit {
    opacity: 0 !important;
    transition: opacity 0.22s ease-in !important;
}