html {
            scroll-behavior: smooth;
        }

        body {
            background: #392a22;
            color: #e8d5bc;
        }

        body nav,
        body footer {
            background-color: #392a22;
            color: #e8d5bc;
        }

        body nav {
            border-color: transparent;
        }

        .navbar-shell {
            min-height: 76px;
        }

        body footer {
            border-color: #5c4635;
        }

        body nav #site-menu ul {
            border-color: #614a38;
        }

        body nav a:not(.warm-action),
        body nav button {
            color: #e8d5bc;
        }

        body nav a:hover:not(.warm-action),
        body footer a:hover {
            color: #fff;
        }

        body footer .text-stone-500 {
            color: #c5ad93;
        }

        body .text-stone-600,
        body .text-stone-500,
        body .text-stone-400 {
            color: #c5ad93;
        }

        body .text-ink {
            color: #e8d5bc;
        }

        body .text-moss {
            color: #d7b38c;
        }

        body .border-line {
            border-color: #5c4635;
        }

        .paper-shadow:not(.dashboard-preview) .text-stone-600,
        .paper-shadow:not(.dashboard-preview) .text-stone-500,
        .paper-shadow:not(.dashboard-preview) .text-stone-400 {
            color: #8d7a68;
        }

        body nav .bg-\[\#e4c9a7\].text-ink,
        body footer .bg-\[\#e4c9a7\].text-ink {
            color: #392a22;
        }

        body .hero-grid {
            background-image: radial-gradient(#b79a7b 0.7px, transparent 0.7px);
            background-size: 19px 19px;
        }

        body .paper-shadow {
            box-shadow: 0 24px 70px -32px rgba(18, 11, 7, .55), 0 4px 16px -8px rgba(18, 11, 7, .3);
        }

        body .thread-line {
            background: linear-gradient(#725940, #725940) no-repeat 7px 12px / 1px calc(100% - 24px);
        }

        .hero-title {
            text-wrap: balance;
        }

        .hero-title em {
            color: #e2c6a5;
            font-style: normal;
        }

        .hero-preview {
            transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
            transform-origin: center;
        }

        .hero-float {
            animation: float 6s ease-in-out infinite;
        }

        .hero-float-delayed {
            animation: float 7s ease-in-out 1s infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .feature-ribbon {
            background: linear-gradient(100deg, #503a2b 0%, #634831 48%, #503a2b 100%);
        }

        .story-step {
            min-height: 65vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 16px;
        }

        .story-step.is-active .story-index {
            background: #30231c;
            color: #f3e4cf;
        }

        body #workflow {
            background-color: #453328;
            border-color: #5c4635;
        }

        body #workflow article {
            background-color: #503c2f;
            border-color: #654d39;
        }

        body #workflow .story-index {
            background-color: #5c4533;
            color: #e8d5bc;
        }

        body #about>div {
            background-color: #30231c;
            border-color: #5c4635;
            color: #e8d5bc;
        }

        body #about>div p.text-\[\#645344\] {
            color: #c5ad93;
        }

        body #about>div .text-\[\#79583f\] {
            color: #d7b38c;
        }

        body #about>div .text-\[\#a66a48\] {
            color: #d29a70;
        }

        body #interest-form {
            background-color: #48362a;
            border-color: #654d39;
            color: #e8d5bc;
        }

        body #interest-form label,
        body #interest-form legend {
            color: #e8d5bc;
        }

        body #interest-form p.text-\[\#756250\] {
            color: #c5ad93;
        }

        body #interest-form input,
        body #interest-form select {
            background-color: #f6efe5;
            color: #392a22;
            border-color: #9c8062;
        }

        body #interest-form input::placeholder {
            color: #8d755d;
        }

        body #interest-form input:focus,
        body #interest-form select:focus {
            border-color: #d7b38d;
            --tw-ring-color: rgb(215 179 141 / .32);
        }

        body #interest-form option {
            background-color: #f6efe5;
            color: #392a22;
        }

        .dashboard-preview {
            --dash-bg: #f7f1e8;
            --dash-panel: #fffdf9;
            --dash-text: #392a22;
            --dash-muted: #8d7a68;
            --dash-border: #e8dbca;
            --dash-accent: #79583f;
            --dash-soft: #efe3d2;
        }

        .dashboard-preview[data-theme="dark"] {
            --dash-bg: #211914;
            --dash-panel: #30251e;
            --dash-text: #f6ecde;
            --dash-muted: #c0aa94;
            --dash-border: #4a382c;
            --dash-accent: #e1b987;
            --dash-soft: #49372b;
        }

        .dashboard-preview,
        .dashboard-preview [data-ui="surface"] {
            background-color: var(--dash-bg);
            color: var(--dash-text);
            border-color: var(--dash-border);
        }

        .dashboard-preview [data-ui="panel"] {
            background-color: var(--dash-panel);
            color: var(--dash-text);
            border-color: var(--dash-border);
        }

        .dashboard-preview [data-ui="muted"] {
            color: var(--dash-muted);
        }

        .dashboard-preview [data-ui="accent"] {
            color: var(--dash-accent);
        }

        .dashboard-preview [data-ui="soft"] {
            background-color: var(--dash-soft);
            color: var(--dash-accent);
        }

        .dashboard-preview [data-theme-toggle] {
            color: var(--dash-text);
            border-color: var(--dash-border);
        }

        .dashboard-preview [data-theme-toggle]:hover {
            background-color: var(--dash-soft);
        }

        .dashboard-preview [data-dashboard-panel] {
            display: none;
        }

        .dashboard-preview [data-dashboard-panel].is-visible {
            display: block;
        }

        .dashboard-preview .text-stone-600,
        .dashboard-preview .text-stone-500,
        .dashboard-preview .text-stone-400 {
            color: var(--dash-muted);
        }

        .warm-action {
            background-color: #79583f;
            color: #f0dfc8;
            transition: background-color .2s ease, color .2s ease;
        }

        .warm-action:hover,
        .warm-action:focus-visible {
            background-color: #241912;
            color: #fff;
        }

        .warm-action svg,
        .warm-action span {
            color: inherit;
        }

        .warm-action .cta-arrow {
            transition: transform .2s ease;
        }

        .warm-action:hover .cta-arrow,
        .warm-action:focus-visible .cta-arrow {
            transform: translate(2px, -2px);
        }


        @media (max-width: 767px) {
            .story-step {
                min-height: auto;
                padding-block: 2rem;
            }
        }

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