/* ===== HTML ===== */
         html{
            scrollbar-gutter: stable;
            -webkit-text-size-adjust:100%;
         }

         :target{
            scroll-margin-top:16px;
         }
         
         /* ===== BODY ===== */
         body{
            animation:fadeIn .4s ease;
            background:#f1f5f9;
            background:var(--bg-page);
            color:#0f172a;
            color:var(--text-main);
            font-family:Segoe UI,system-ui,sans-serif;
            overflow-x:hidden;
            margin:0;
         }

         .skip-link{
            background:#0f172a;
            border-radius:999px;
            color:#ffffff;
            left:12px;
            padding:10px 14px;
            position:absolute;
            text-decoration:none;
            top:12px;
            transform:translateY(-180%);
            transition:transform .18s ease;
            z-index:5000;
         }

         .skip-link:focus-visible{
            transform:translateY(0);
         }

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

         :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
            outline:3px solid #0f766e;
            outline-offset:3px;
         }

         main:focus{
            outline:none;
         }

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

            body{
               animation:none;
            }
         }

         /* ===== SITE-HEADER ===== */
         /* Reserve space for the async injected header, hero bar, and settings bar. */
         #site-header{
            display:block;
            min-height:134px;
         }

         @media (max-width: 680px){
            #site-header{
               min-height:168px;
            }
         }

         /* ===============================
         LAYOUT – MAIN CONTAINER
         =============================== */
         .container{
            margin:0 auto;          /* no vertical gap below header */
            max-width:970px;
            padding:2px 2px;     /* controlled spacing */
         }

         /* ===============================
         TYPOGRAPHY – HEADINGS
         ================================ */
         /* Page title */
         h1{
            color:#0f172a;
            font-size:28px;
            font-weight:800;
            margin:-8px 0px 8px;
         }
         /* Section headings */
         h2{
            font-size:22px;
            font-weight:700;
            color:#0f172a;
            margin:6px 0 10px;
         }
         /* Sub-sections */
         h3{
            font-size:18px;
            font-weight:700;
            color:#1e293b;
            margin:12px 0 6px;
         }
         /* Minor headings */
         h4{
            font-size:15px;
            font-weight:600;
            color:#334155;
            margin:10px 0 4px;
         }