body {
            background-color: #ffffff;
            color: #0f172a;
            font-family: 'Inter', sans-serif;
        }
        .hero-section {
            position: relative;
            isolation: isolate;
            display: flex;
            min-height: calc(100vh - 10rem);
            min-height: calc(100svh - 10rem);
            flex-direction: column;
            justify-content: center;
        }
        .hero-content {
            width: 100%;
            max-width: 56rem;
        }
        .hero-collage {
            position: absolute;
            z-index: -1;
            inset-block: 0;
            left: calc((100% - 100vw) / 2);
            width: 100vw;
            overflow: hidden;
            pointer-events: none;
        }
        .hero-collage::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgb(255 255 255 / 82%) 0%,
                rgb(255 255 255 / 72%) 50%,
                rgb(255 255 255 / 82%) 100%
            );
            content: "";
        }
        .hero-collage-track,
        .hero-collage-set {
            display: flex;
            width: max-content;
            height: 100%;
        }
        .hero-collage-track {
            animation: hero-collage-scroll 90s linear infinite;
        }
        .hero-collage-set img {
            display: block;
            width: clamp(280px, 32vw, 520px);
            height: 100%;
            flex: 0 0 auto;
            object-fit: cover;
            opacity: 0.75;
        }
        @keyframes hero-collage-scroll {
            to {
                transform: translateX(-50%);
            }
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #ffffff;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .lightbox-panel {
            display: flex;
            width: fit-content;
            max-width: calc(100vw - 32px);
            max-height: 90vh;
            flex-direction: column;
            align-items: stretch;
            overflow: hidden;
            border-radius: 0.75rem;
            background: #ffffff;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 35%);
        }

        .lightbox-image-stage {
            position: relative;
            display: flex;
            width: 100%;
            flex: 0 1 auto;
            min-height: 0;
            justify-content: center;
            overflow: visible;
            padding: 12px;
            background: #ffffff;
        }

        .lightbox-image-window {
            position: relative;
            display: flex;
            width: min(calc(100vw - 64px), 96vh, calc(105vh - 36px));
            aspect-ratio: 3 / 2;
            max-width: 100%;
            flex: 0 0 auto;
            justify-content: center;
            overflow: hidden;
            isolation: isolate;
            border-radius: 0.5rem;
            background: #ffffff;
        }

        .lightbox-image {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            touch-action: pan-y;
            cursor: pointer;
            will-change: transform;
        }

        .lightbox-image-next {
            position: absolute;
            z-index: 2;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        .lightbox-explanation {
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            max-height: 20vh;
            flex: 0 1 auto;
            overflow-y: auto;
            overflow-wrap: anywhere;
            overscroll-behavior: contain;
            padding: 4px 20px 20px;
            background: #ffffff;
        }

        .lightbox-image-next[hidden] {
            display: none;
        }

        .lightbox-slide-out-next {
            animation: lightbox-slide-out-next 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        .lightbox-slide-in-next {
            animation: lightbox-slide-in-next 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        .lightbox-slide-out-previous {
            animation: lightbox-slide-out-previous 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        .lightbox-slide-in-previous {
            animation: lightbox-slide-in-previous 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        @keyframes lightbox-slide-out-next {
            to {
                transform: translateX(-100%);
            }
        }

        @keyframes lightbox-slide-in-next {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes lightbox-slide-out-previous {
            to {
                transform: translateX(100%);
            }
        }

        @keyframes lightbox-slide-in-previous {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .gallery-image-current,
        .gallery-image-next {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            will-change: transform;
        }

        .gallery-image-next {
            pointer-events: none;
        }

        .gallery-image-frame {
            aspect-ratio: 16 / 9;
        }

        .gallery-image-next[hidden] {
            display: none;
        }

        .gallery-slide-out-next,
        .gallery-slide-in-next,
        .gallery-slide-out-previous,
        .gallery-slide-in-previous {
            animation-duration: 360ms;
            animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            animation-fill-mode: both;
        }

        .gallery-slide-out-next {
            animation-name: gallery-slide-out-next;
        }

        .gallery-slide-in-next {
            animation-name: gallery-slide-in-next;
        }

        .gallery-slide-out-previous {
            animation-name: gallery-slide-out-previous;
        }

        .gallery-slide-in-previous {
            animation-name: gallery-slide-in-previous;
        }

        @keyframes gallery-slide-out-next {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }

        @keyframes gallery-slide-in-next {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }

        @keyframes gallery-slide-out-previous {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(100%);
            }
        }

        @keyframes gallery-slide-in-previous {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        html,
        body,
        header,
        footer,
        .bg-white,
        .bg-slate-50,
        .bg-slate-100,
        .text-slate-900,
        .text-slate-800,
        .text-slate-700,
        .text-slate-600,
        .text-slate-500,
        .text-slate-400,
        .border-slate-100,
        .border-slate-200,
        .border-slate-300,
        .lightbox-panel,
        .lightbox-image-stage,
        .lightbox-image-window,
        .lightbox-explanation,
        #lb-counter {
            transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease;
        }

        .theme-toggle {
            display: inline-flex;
            position: relative;
            width: 3.25rem;
            height: 1.875rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: flex-start;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            padding: 0.125rem;
            background: #e2e8f0;
            color: #475569;
            cursor: pointer;
            transition: border-color 280ms ease, background-color 280ms ease, color 280ms ease;
        }

        .theme-toggle:hover {
            color: #0f172a;
        }

        .theme-toggle:focus-visible {
            outline: 3px solid #c2410c;
            outline-offset: 3px;
        }

        .theme-toggle-thumb {
            display: grid;
            width: 1.375rem;
            height: 1.375rem;
            place-items: center;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 3px rgb(15 23 42 / 20%);
            transform: translateX(0);
            transition: background-color 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .theme-toggle-thumb svg {
            width: 0.875rem;
            height: 0.875rem;
            grid-area: 1 / 1;
            transition: color 280ms ease, opacity 160ms ease, transform 280ms ease;
        }

        .theme-toggle-thumb .icon-moon {
            color: #475569;
            opacity: 0;
            transform: rotate(-35deg) scale(0.7);
        }

        .theme-toggle-thumb .icon-sun {
            color: #b45309;
            opacity: 1;
            transform: rotate(0) scale(1);
        }

        html[data-theme="dark"],
        html[data-theme="dark"] body {
            color-scheme: dark;
            background-color: #050505;
            color: #e4e4e7;
        }

        html[data-theme="dark"] header {
            border-color: #292929;
            background-color: rgb(5 5 5 / 92%);
        }

        html[data-theme="dark"] footer,
        html[data-theme="dark"] .bg-white {
            border-color: #292929;
            background-color: #0d0d0d;
        }

        html[data-theme="dark"] .bg-slate-50 {
            background-color: #18181b;
        }

        html[data-theme="dark"] .bg-slate-100 {
            background-color: #27272a;
        }

        html[data-theme="dark"] .text-slate-900,
        html[data-theme="dark"] .text-slate-800,
        html[data-theme="dark"] .text-slate-700 {
            color: #f4f4f5;
        }

        html[data-theme="dark"] .text-slate-600,
        html[data-theme="dark"] .text-slate-500 {
            color: #a1a1aa;
        }

        html[data-theme="dark"] .text-slate-400 {
            color: #a1a1aa;
        }

        html[data-theme="dark"] .text-slate-300 {
            color: #71717a;
        }

        html[data-theme="dark"] .border-slate-100,
        html[data-theme="dark"] .border-slate-200,
        html[data-theme="dark"] .border-slate-300 {
            border-color: #292929;
        }

        html[data-theme="dark"] .bg-white\/90 {
            background-color: rgb(5 5 5 / 92%);
        }

        html[data-theme="dark"] .theme-toggle {
            border-color: #3f3f46;
            background: #27272a;
            color: #f4f4f5;
        }

        html[data-theme="dark"] .theme-toggle:hover {
            background: #3f3f46;
            color: #ffffff;
        }

        html[data-theme="dark"] .theme-toggle-thumb {
            background: #18181b;
            transform: translateX(1.375rem);
        }

        html[data-theme="dark"] .theme-toggle-thumb .icon-moon {
            color: #e4e4e7;
            opacity: 1;
            transform: rotate(0) scale(1);
        }

        html[data-theme="dark"] .theme-toggle-thumb .icon-sun {
            opacity: 0;
            transform: rotate(35deg) scale(0.7);
        }

        html[data-theme="dark"] .hero-collage::after {
            background: linear-gradient(
                90deg,
                rgb(5 5 5 / 84%) 0%,
                rgb(5 5 5 / 72%) 50%,
                rgb(5 5 5 / 84%) 100%
            );
        }

        html[data-theme="dark"] #lightbox-modal {
            background-color: rgb(0 0 0 / 88%);
        }

        html[data-theme="dark"] .lightbox-panel,
        html[data-theme="dark"] .lightbox-explanation {
            background-color: #18181b;
        }

        html[data-theme="dark"] .lightbox-image-stage {
            background-color: #18181b;
        }

        html[data-theme="dark"] .lightbox-image-window {
            background-color: #18181b;
        }

        html[data-theme="dark"] #lb-counter {
            background-color: #18181b;
            color: #f4f4f5;
        }

        html[data-theme="dark"] .cad-viewer-stage {
            background-color: #334155;
        }

        html[data-theme="dark"] .cad-viewer-loading {
            color: #e2e8f0;
        }

        html[data-theme="dark"] .cad-viewer-help {
            border-color: #64748b;
            background-color: rgb(15 23 42 / 88%);
            color: #e2e8f0;
        }

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

        html[data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: #3f3f46;
        }

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

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: 160ms !important;
            }
        }