:root {
            --color-bg: #eef3fb;
            --color-bg-soft: #f7faff;
            --color-surface: #ffffff;
            --color-surface-soft: #f9fbff;
            --color-border: #d8e4f0;
            --color-text: #1e293b;
            --color-muted: #5a6a7f;
            --color-brand: #df8f2d;
            --color-brand-strong: #c06d14;
            --color-primary: #1f6feb;
            --color-primary-dark: #184fa8;
            --color-teal: #0f766e;
            --color-shadow: 0 18px 40px rgba(18, 38, 63, 0.09);
            --hero-bg-start: #fff5df;
            --hero-bg-end: #ecf4ff;
            --hero-border: #dfeaf7;
            --hero-title: #a55f17;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: radial-gradient(1150px 380px at -12% -10%, rgba(31, 111, 235, 0.16), transparent 58%), radial-gradient(980px 360px at 112% -12%, rgba(223, 143, 45, 0.2), transparent 58%), linear-gradient(180deg, #f3f7fc 0%, var(--color-bg) 100%);
            color: var(--color-text);
            font-family: "Source Sans 3", "Segoe UI", sans-serif;
            letter-spacing: 0.002em;
            margin: 0;
            min-height: 100vh;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: "Manrope", "Segoe UI", sans-serif;
            letter-spacing: -0.015em;
            line-height: 1.2;
        }

        h1 {
            color: var(--hero-title);
            font-weight: 800;
        }

        a {
            color: var(--color-primary);
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
        }

        a:hover,
        a:focus {
            color: var(--color-primary-dark);
        }

        :focus-visible {
            outline: 3px solid rgba(223, 143, 45, 0.5);
            outline-offset: 2px;
        }

        #top.navbar {
            background: linear-gradient(125deg, #10233c 0%, #163e6b 64%, #1f6feb 100%) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow: 0 12px 30px rgba(9, 20, 37, 0.26);
            margin-bottom: 1.4rem !important;
            padding-bottom: 0.6rem;
            padding-top: 0.6rem;
        }

        #top .navbar-brand {
            color: #fff;
            font-family: "Manrope", "Segoe UI", sans-serif;
            font-weight: 800;
            letter-spacing: 0.01em;
        }

        #top .navbar-nav .nav-link {
            border-radius: 0.5rem;
            color: rgba(241, 246, 255, 0.9);
            font-weight: 600;
            margin-right: 0.25rem;
            padding: 0.4rem 0.68rem;
            transition: all 0.2s ease;
        }

        #top .navbar-nav .nav-link:hover,
        #top .navbar-nav .nav-link:focus {
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
        }

        #top .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.45);
        }

        .site-main {
            padding-bottom: 1rem;
        }

        .site-main .container {
            background: rgba(255, 255, 255, 0.68);
            border: 1px solid var(--color-border);
            border-radius: 1rem;
            box-shadow: var(--color-shadow);
            margin-bottom: 1.5rem;
            padding: 0.85rem 1rem 1.2rem;
        }

        .page-hero,
        header.bg-light {
            background: linear-gradient(120deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%) !important;
            border: 1px solid var(--hero-border);
            border-radius: 0.95rem;
            box-shadow: 0 12px 30px rgba(38, 66, 102, 0.08);
            padding: 2rem !important;
            margin-bottom: 1.4rem !important;
        }

        .page-hero h1,
        header.bg-light h1 {
            color: var(--hero-title);
            margin-bottom: 0.75rem;
        }

        .container > h1:first-of-type,
        .container .col-md-9 > h1:first-of-type,
        .container .col-md-12 > h1:first-of-type,
        .container .col-lg-9 > h1:first-of-type,
        .container .col-lg-12 > h1:first-of-type {
            background: linear-gradient(120deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%);
            border: 1px solid var(--hero-border);
            border-radius: 0.95rem;
            box-shadow: 0 12px 30px rgba(38, 66, 102, 0.08);
            color: var(--hero-title);
            margin-bottom: 1rem;
            padding: 1.25rem 1.5rem;
        }

        .container > h1:first-of-type + .lead,
        .container .col-md-9 > h1:first-of-type + .lead,
        .container .col-md-12 > h1:first-of-type + .lead,
        .container .col-lg-9 > h1:first-of-type + .lead,
        .container .col-lg-12 > h1:first-of-type + .lead {
            margin-top: -0.25rem;
        }

        .article-content {
            font-size: 1.03rem;
            line-height: 1.72;
        }

        .article-content .lead {
            color: #2f4359;
        }

        .article-content section {
            scroll-margin-top: 88px;
        }

        .article-content h2 {
            border-bottom: 1px solid #e6edf6;
            color: #23415f;
            font-size: 1.55rem;
            margin-bottom: 0.8rem;
            margin-top: 1.75rem;
            padding-bottom: 0.35rem;
        }

        .article-content h3 {
            color: #32506f;
            font-size: 1.2rem;
            margin-bottom: 0.55rem;
            margin-top: 1.2rem;
        }

        .article-content p,
        .article-content ul,
        .article-content ol,
        .article-content .table-responsive {
            margin-bottom: 1rem;
        }

        .article-content ul,
        .article-content ol {
            padding-left: 1.25rem;
        }

        .article-content li {
            margin-bottom: 0.25rem;
        }

        .article-content .card {
            border: 1px solid #dfe8f3;
            border-radius: 0.88rem;
            box-shadow: 0 10px 24px rgba(26, 44, 67, 0.07);
            overflow: hidden;
            transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }

        .article-content .card .card-body {
            padding: 1.05rem;
        }

        .article-content .card::before {
            background: linear-gradient(90deg, var(--color-brand), var(--color-primary));
            content: "";
            display: block;
            height: 4px;
            width: 100%;
        }

        .article-content .alert {
            border: 1px solid #dce6f1;
            border-radius: 0.9rem;
            box-shadow: 0 8px 20px rgba(36, 54, 77, 0.06);
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .article-content .alert-warning {
            background: linear-gradient(120deg, #fff9ed 0%, #fff3d9 100%);
            border-left: 4px solid var(--color-brand);
        }

        .article-content .alert-info {
            background: linear-gradient(120deg, #eef7ff 0%, #e5f0ff 100%);
            border-left: 4px solid var(--color-primary);
        }

        .article-content .alert-success {
            background: linear-gradient(120deg, #effbf7 0%, #e5f7f2 100%);
            border-left: 4px solid var(--color-teal);
        }

        .article-content .btn {
            border-radius: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            padding: 0.5rem 0.95rem;
        }

        .article-content .btn-primary,
        .btn.btn-primary {
            background: linear-gradient(125deg, var(--color-brand) 0%, var(--color-brand-strong) 100%);
            border-color: var(--color-brand-strong);
            color: #fff;
        }

        .article-content .btn-primary:hover,
        .btn.btn-primary:hover {
            background: linear-gradient(125deg, #cb7a1b 0%, #af5f08 100%);
            border-color: #9f5406;
        }

        .article-content .btn-outline-secondary,
        .btn.btn-outline-secondary {
            border-color: #c7d7ea;
            color: #335572;
        }

        .article-content .btn-outline-secondary:hover,
        .btn.btn-outline-secondary:hover {
            background: #ecf3ff;
            border-color: #aec6e2;
            color: #21415f;
        }

        .article-content .btn-link.btn-lg {
            border: 1px solid #d9e3ef;
            border-radius: 0.65rem;
            padding: 0.5rem 0.85rem;
            text-decoration: none;
        }

        .article-content .ratio {
            border: 1px solid #e7ecf2;
            border-radius: 0.65rem;
            overflow: hidden;
        }

        .article-content .table {
            font-size: 0.97rem;
        }

        .article-content .table thead th {
            background-color: #f8fafc;
            white-space: nowrap;
        }

        .article-content .table > :not(caption) > * > * {
            border-color: #e3ebf5;
            vertical-align: middle;
        }

        .article-content .display-1 {
            font-size: clamp(2.25rem, 7vw, 4.4rem);
        }

        .article-content .table th {
            background-color: #f8fafc;
        }

        .article-content .alert h2,
        .article-content .alert h3 {
            border: none;
            margin-top: 0;
            padding-bottom: 0;
        }

        .article-sidebar .shadow,
        .article-sidebar .p-3 {
            border-radius: 0.65rem;
        }

        .page-breadcrumb-wrap {
            background: linear-gradient(120deg, #f8fbff 0%, #f1f6fd 100%);
            border: 1px solid #dfeaf5;
            border-radius: 0.75rem;
            margin-bottom: 1rem;
            margin-top: 0.25rem;
            padding: 0.55rem 0.8rem;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .page-breadcrumb-wrap nav {
            margin: 0;
        }

        .page-breadcrumb-wrap .breadcrumb {
            margin-bottom: 0;
            font-size: 0.92rem;
        }

        .page-breadcrumb-wrap .breadcrumb-item a {
            text-decoration: none;
            color: #3e648a;
        }

        .page-breadcrumb-wrap .breadcrumb-item.active {
            color: #425b76;
            font-weight: 500;
        }

        .surface-panel {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 0.95rem;
            box-shadow: 0 10px 24px rgba(26, 44, 67, 0.07);
            padding: 1rem;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .section-band {
            background: linear-gradient(120deg, #f5f9ff 0%, #eff5ff 100%);
            border: 1px solid #dce8f6;
            border-radius: 0.9rem;
            padding: 1rem;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .kicker {
            color: #476c92;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .topic-badge {
            background: #e8f0fb;
            border: 1px solid #d2e2f5;
            border-radius: 999px;
            color: #2b4f73;
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 0.2rem 0.62rem;
        }

        .cta-strip {
            background: linear-gradient(130deg, #fff4df 0%, #ffeac7 45%, #ecf4ff 100%);
            border: 1px solid #e1e6ef;
            border-radius: 1rem;
            box-shadow: 0 10px 26px rgba(35, 61, 94, 0.08);
            padding: 1.1rem;
        }

        .article-content .card:hover {
            border-color: #c9daee;
            box-shadow: 0 14px 28px rgba(20, 41, 67, 0.12);
            transform: translateY(-2px);
        }

        .article-content .alert:hover,
        .page-breadcrumb-wrap:hover,
        .surface-panel:hover,
        .section-band:hover {
            border-color: #c9daee;
            box-shadow: 0 12px 24px rgba(20, 41, 67, 0.1);
        }

        @media (max-width: 768px) {
            .page-hero,
            header.bg-light {
                padding: 1.25rem !important;
            }

            .container > h1:first-of-type,
            .container .col-md-9 > h1:first-of-type,
            .container .col-md-12 > h1:first-of-type,
            .container .col-lg-9 > h1:first-of-type,
            .container .col-lg-12 > h1:first-of-type {
                padding: 1rem;
            }

            .article-content {
                font-size: 1rem;
                line-height: 1.64;
            }

            .article-content h2 {
                font-size: 1.35rem;
                margin-top: 1.35rem;
            }

            .article-content h3 {
                font-size: 1.12rem;
            }

            .article-content .btn {
                width: 100%;
            }

            .site-main .container {
                border-radius: 0.85rem;
                margin-bottom: 1rem;
                padding: 0.75rem 0.75rem 1rem;
            }

            #top .navbar-nav .nav-link {
                margin-right: 0;
                margin-top: 0.25rem;
            }

            .article-content .card:hover,
            .article-content .alert:hover,
            .page-breadcrumb-wrap:hover,
            .surface-panel:hover,
            .section-band:hover {
                box-shadow: 0 10px 20px rgba(20, 41, 67, 0.09);
                transform: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

        .footer {
            font-size: 0.95rem;
        }

        .footer .bg-dark {
            background: linear-gradient(135deg, #0f233b 0%, #132f52 55%, #1d4f83 100%) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .footer a {
            color: rgba(226, 236, 255, 0.84);
            text-decoration: none;
        }

        .footer a:hover,
        .footer a:focus {
            color: #fff;
            text-decoration: underline;
        }

        .footer-title {
            color: #fff;
            font-weight: 700;
            letter-spacing: .02em;
            font-size: 1rem;
        }