@font-face {
            font-family: "Manrope";
            src: url("assets/fonts/manrope-latin-400.woff2") format("woff2");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Manrope";
            src: url("assets/fonts/manrope-latin-600.woff2") format("woff2");
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Manrope";
            src: url("assets/fonts/manrope-latin-700.woff2") format("woff2");
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Manrope";
            src: url("assets/fonts/manrope-latin-800.woff2") format("woff2");
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        :root {
            color-scheme: dark;
            --bg-top: #1E1B4B;
            --bg-bottom: #4C1D95;
            --bg-deep: #0F0A23;
            --surface: #16122B;
            --surface-raised: #221B3F;
            --text: #FFFFFF;
            --text-secondary: #E2E8F0;
            --text-muted: #C7D2FE;
            --accent: #F472B6;
            --accent-deep: #DB2777;
            --border: rgba(199, 210, 254, 0.18);
            --focus: #FDE68A;
            --shadow: 0 24px 64px rgba(15, 10, 35, 0.55);
            --radius: 20px;
            --space-1: 0.5rem;
            --space-2: 1rem;
            --space-3: 1.5rem;
            --space-4: 2.5rem;
            --space-5: 4rem;
            --max: 52rem;
            --ease: cubic-bezier(0.22, 1, 0.36, 1);
        }

        @media (prefers-color-scheme: light) {
            :root {
                color-scheme: light;
                --bg-top: #EEF2FF;
                --bg-bottom: #F5F3FF;
                --bg-deep: #E0E7FF;
                --surface: #FFFFFF;
                --surface-raised: #F8FAFC;
                --text: #0F0A23;
                --text-secondary: #1E1B4B;
                --text-muted: #5B21B6;
                --accent: #DB2777;
                --accent-deep: #9D174D;
                --border: rgba(30, 27, 75, 0.12);
                --focus: #7C3AED;
                --shadow: 0 18px 48px rgba(30, 27, 75, 0.12);
            }
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            min-height: 100vh;
            font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
            color: var(--text);
            background:
                radial-gradient(1200px 600px at 12% -10%, rgba(244, 114, 182, 0.22), transparent 55%),
                radial-gradient(900px 500px at 100% 0%, rgba(76, 29, 149, 0.45), transparent 50%),
                linear-gradient(165deg, var(--bg-top), var(--bg-bottom) 55%, var(--bg-deep));
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: var(--accent);
            text-decoration-thickness: 1px;
            text-underline-offset: 0.18em;
            transition: color 160ms var(--ease), opacity 160ms var(--ease);
        }
        a:hover { color: var(--accent-deep); }
        a:focus-visible {
            outline: 2px solid var(--focus);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .shell {
            width: min(100% - 2.5rem, 56rem);
            margin: 0 auto;
            padding: var(--space-4) 0 var(--space-5);
            position: relative;
        }

        .shell::before {
            content: "";
            position: absolute;
            inset: 4% auto auto -12%;
            width: min(48vw, 32rem);
            height: min(48vw, 32rem);
            border-radius: 50%;
            background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
            pointer-events: none;
            z-index: 0;
            filter: blur(4px);
            opacity: 0.9;
        }

        .shell > * { position: relative; z-index: 1; }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
            animation: rise 700ms var(--ease) both;
        }

        .brand {
            display: inline-flex;
            align-items: baseline;
            gap: 0.55rem;
            color: var(--text);
            text-decoration: none;
            font-weight: 800;
            letter-spacing: -0.03em;
            font-size: 1.15rem;
        }
        .brand span {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text-muted);
            letter-spacing: 0;
        }

        .nav-home {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0.65rem 1.1rem;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--surface) 78%, transparent);
            color: var(--text);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            backdrop-filter: blur(10px);
            transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
        }
        .nav-home:hover {
            transform: translateY(-1px);
            background: var(--surface-raised);
            border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
            color: var(--text);
        }
        .nav-home:active { transform: translateY(0); }
        .nav-home:focus-visible {
            outline: 2px solid var(--focus);
            outline-offset: 3px;
        }

        .hero {
            max-width: var(--max);
            margin-bottom: var(--space-3);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border);
            animation: rise 800ms var(--ease) 60ms both;
        }
        .eyebrow {
            display: inline-block;
            margin-bottom: var(--space-2);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .hero h1 {
            font-size: clamp(2.25rem, 4.5vw, 3.35rem);
            line-height: 1.08;
            letter-spacing: -0.035em;
            font-weight: 800;
            margin-bottom: var(--space-2);
        }
        .hero .lede {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 38rem;
        }

        .panel {
            max-width: var(--max);
            background: color-mix(in srgb, var(--surface) 92%, transparent);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.35rem, 2.6vw, 2rem);
            backdrop-filter: blur(14px);
            animation: rise 900ms var(--ease) 120ms both;
        }

        .panel + .panel { margin-top: var(--space-3); }

        h2 {
            font-size: 1.35rem;
            letter-spacing: -0.02em;
            font-weight: 700;
            margin-bottom: var(--space-2);
        }
        h3 {
            font-size: 1.05rem;
            font-weight: 700;
            margin: var(--space-3) 0 var(--space-1);
        }

        p { margin-bottom: var(--space-2); color: var(--text-secondary); }
        p:last-child { margin-bottom: 0; }

        .feature-list {
            list-style: none;
            display: grid;
            gap: var(--space-2);
            margin: var(--space-2) 0 0;
        }
        .feature-list li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.85rem;
            align-items: start;
            padding: 0.95rem 0;
            border-bottom: 1px solid var(--border);
            background: transparent;
        }
        .feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
        .feature-list li:first-child { padding-top: 0.25rem; }
        .feature-list .mark {
            width: 0.55rem;
            height: 0.55rem;
            margin-top: 0.55rem;
            border-radius: 999px;
            background: var(--accent);
            box-shadow: none;
        }
        .feature-list strong {
            display: block;
            color: var(--text);
            font-weight: 700;
            margin-bottom: 0.2rem;
        }
        .feature-list span {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .steps {
            list-style: none;
            counter-reset: step;
            display: grid;
            gap: 0.85rem;
            margin-top: var(--space-2);
        }
        .steps li {
            counter-increment: step;
            position: relative;
            padding: 0.55rem 0.25rem 0.55rem 2.75rem;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: var(--text-secondary);
        }
        .steps li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0.45rem;
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            display: grid;
            place-items: center;
            font-size: 0.8rem;
            font-weight: 800;
            color: #0F0A23;
            background: var(--accent);
        }
        .steps code, .howto kbd, kbd {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.92em;
            padding: 0.1em 0.35em;
            border-radius: 6px;
            background: color-mix(in srgb, var(--bg-deep) 35%, transparent);
            border: 1px solid var(--border);
            color: var(--text);
        }

        .limits {
            border-left: 3px solid var(--accent);
            padding-left: 1rem;
            margin-top: var(--space-2);
        }

        .site-footer {
            max-width: var(--max);
            margin-top: var(--space-4);
            padding-top: var(--space-3);
            border-top: 1px solid var(--border);
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem 1.25rem;
            color: var(--text-muted);
            font-size: 0.92rem;
            animation: rise 900ms var(--ease) 180ms both;
        }
        .site-footer a {
            color: var(--text-secondary);
            text-decoration: none;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }
        .site-footer a:hover { color: var(--accent); }

        @keyframes rise {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .topbar, .hero, .panel, .site-footer { animation: none; }
            .nav-home, a { transition: none; }
            .nav-home:hover { transform: none; }
        }

        @media (max-width: 520px) {
            .shell { width: min(100% - 1.5rem, 56rem); padding-top: var(--space-3); }
            .topbar { flex-wrap: wrap; }
            .nav-home { margin-left: auto; }
            .brand { flex: 1 1 auto; }
            .shell::before { inset: 0 auto auto -30%; opacity: 0.7; }
        }

        /* Legal-page extensions (privacy / terms) */
        .lede-meta {
            margin-top: var(--space-2);
            color: var(--text-muted);
            font-size: 0.95rem;
            font-style: normal;
        }
        .panel h2:first-child { margin-top: 0; }
        .panel ul {
            margin: 0 0 var(--space-2) 1.25rem;
            color: var(--text-secondary);
        }
        .panel li { margin-bottom: 0.45rem; }
        .panel li::marker { color: var(--accent); }
        .callout {
            margin-top: var(--space-2);
            padding: 1rem 1.1rem;
            border-radius: 14px;
            border: 1px solid var(--border);
            background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
        }
        .callout strong { color: var(--text); }
        .summary-list {
            list-style: none;
            margin: var(--space-2) 0 0;
            display: grid;
            gap: 0.75rem;
        }
        .summary-list li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.75rem;
            align-items: start;
            margin: 0;
            color: var(--text-secondary);
        }
        .summary-list .mark {
            width: 0.55rem;
            height: 0.55rem;
            margin-top: 0.55rem;
            border-radius: 999px;
            background: var(--accent);
        }
        .edition + .edition {
            margin-top: var(--space-3);
            padding-top: var(--space-3);
            border-top: 1px solid var(--border);
        }
        .edition h3 {
            margin-top: 0;
            margin-bottom: var(--space-1);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text);
        }

        /* Continuous legal reading surface (avoids card-stack fatigue) */
        .doc-panel {
            max-width: 56rem;
            background: color-mix(in srgb, var(--surface) 92%, transparent);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(1.35rem, 2.6vw, 2.15rem);
            backdrop-filter: blur(14px);
            animation: rise 900ms var(--ease) 120ms both;
        }
        .doc-panel > section + section {
            margin-top: 1.35rem;
            padding-top: 1.35rem;
            border-top: 1px solid var(--border);
        }
        .doc-panel h2 {
            margin-bottom: 0.85rem;
        }
        .hero {
            max-width: 56rem;
            margin-bottom: var(--space-3);
        }
        .shell::before {
            opacity: 1;
            width: min(56vw, 38rem);
            height: min(56vw, 38rem);
        }
        .site-footer {
            max-width: 56rem;
        }
        @media (prefers-color-scheme: light) {
            :root {
                --text-muted: #6B7280;
            }
            .eyebrow,
            .lede-meta {
                color: #6D28D9;
            }
        }
        @media (max-width: 520px) {
            .hero {
                margin-bottom: var(--space-2);
                padding-bottom: var(--space-2);
            }
            .hero h1 {
                font-size: clamp(1.85rem, 8vw, 2.4rem);
            }
            .hero .lede {
                font-size: 1.02rem;
            }
            .doc-panel {
                padding: 1.15rem 1.05rem;
            }
        }