main.section{padding:1em;background-color:var(--ice-blue)}article.content{background:var(--white);padding:4em;margin:1em 13em;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1);position:relative;overflow:hidden;.lottie-container { position: absolute; top: -180px; right:-170px; width: 700px; height: 700px; opacity: 0.3; pointer-events: none; z-index: 1; } .content-wrapper { position: relative; z-index: 2; } .badge { display: inline-flex!important; align-items: center!important; justify-content: center!important; background-color: rgba(59, 130, 246, 0.1)!important; color: var(--brand-blue)!important; font-family: 'Inter', sans-serif!important; font-size: 0.75rem!important; font-weight: 500!important; line-height: 1!important; padding: 0.375rem 0.75rem!important; border-radius: 9999px!important; white-space: nowrap!important; text-transform: uppercase!important; letter-spacing: 0.025em!important; border: 1px solid rgba(59, 130, 246, 0.2)!important; } .article-meta { margin-bottom: 2rem!important; display: flex!important; flex-direction: column!important; gap: 0.5rem!important; } .article-meta .byline { font-family: 'Inter', sans-serif!important; font-size: 0.8rem!important; color: #6b7280!important; margin-bottom: 0!important; } .article-meta .last-updated { font-family: 'Inter', sans-serif!important; font-size: 0.8rem!important; color: #6b7280!important; margin-bottom: 0!important; } hr { border: none!important; height: 2px!important; background-color: rgba(59, 130, 246, 0.2)!important; margin: 2em 0!important; } h1.title.is-1 { font-family: 'Sora', sans-serif; font-size: 2rem; line-height: 1.2; font-weight: 400; margin-bottom: 1rem; color: var(--brand-blue)!important; text-align: left; max-width: 75%!important; } h2 { font-family: 'Sora', sans-serif; font-size: 1.5rem!important; line-height: 1.3!important; font-weight: 500!important; margin-top: 2rem!important; margin-bottom: 1rem!important; color: var(--brand-blue)!important; } ol > li > h4 { font-size: 1.4em!important; } h4 { color: var(--deep-navy) !important; font-weight: 600 !important; font-size: 1.1em !important; margin-bottom: 1.5em !important; margin-top: 3em !important; position: relative; text-align: left; } h4::before { content: ""; display: inline-block; background-image: var(--bullet-icon); background-size: 40px 40px; background-repeat: no-repeat; width: 40px; height: 40px; position: absolute; left: 20px; top: -40px; transform: translateX(-50%); opacity: 0.5; } h5 { font-size: .8em!important; font-weight: 600!important; color: var(--deep-navy)!important; } h2:first-of-type { max-width: 65%!important; font-weight: 700!important; font-size: 1.8rem!important; color: var(--brand-blue)!important; line-height: 1.4!important; margin-bottom: 1.5rem!important; padding-bottom: 0.5rem!important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)!important; position: relative!important; } strong { font-weight: 600!important; color: var(--brand-blue)!important; } h3 { font-size: 1.25rem !important; line-height: 1.3 !important; font-weight: 300 !important; margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; color: #4b5563 !important; background-color: var(--ice-blue) !important; padding: 0.75rem 1.25rem !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important; border: 1px solid var(--light-blue) !important; transition: all 0.2s ease-in-out !important; } p { font-family: 'Inter', sans-serif; font-size: 1rem!important; line-height: 1.7!important; margin-bottom: 1.5em!important; color: #4a4a4a!important; } p:first-of-type { max-width: 65%!important; font-size: 0.9rem!important; } p:has(+ hr) { font-size: 0.9rem!important; max-width: 100%!important; } p:first-of-type:has(+ hr) { max-width: 65%!important; } h3 + p { padding-left: 1.5rem !important; padding-right: 1rem !important; margin-top: 0.5rem !important; } .highlight { margin-bottom: 2rem !important; padding: 1.5rem !important; } .highlight + * { margin-top: 2rem !important; } ul, ol { margin: 1.25em 0!important; padding-left: 1em!important; list-style: none!important; } ul li { margin-bottom: 0.75em!important; line-height: 1.6!important; color: #4a4a4a!important; font-size: 1rem!important; position: relative!important; padding-left: 1.5em!important; } ul li::before { content: ""!important; position: absolute!important; left: 0!important; top: 0.6em!important; width: 6px!important; height: 6px!important; background-color: var(--brand-blue)!important; border-radius: 10%!important; } ul li::after { content: ""!important; position: absolute!important; left: 0!important; top: 0.6em!important; width: 6px!important; height: 6px!important; background-color: rgba(59, 130, 246, 0.3)!important; border-radius: 10%!important; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite!important; } ol { counter-reset: item!important; padding-left: 2em!important; } ol li { margin-bottom: 2em!important; position: relative!important; padding-left: 0.5em!important; color: #4a4a4a!important; font-size: 1rem!important; line-height: 1.6!important; } ol li::before { counter-increment: item!important; content: counter(item)!important; position: absolute!important; left: -2em!important; width: 1.5em!important; top:-.1em!important; height: 1.5em!important; background-color: var(--deep-navy)!important; border-radius: 10%!important; color: var(--white)!important; font-weight: 600!important; font-size: 1.1rem!important; display: flex!important; align-items: center!important; justify-content: center!important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important; } ol li p, ol li strong { margin-bottom: 0.5em!important; } ol li strong { color: var(--brand-blue)!important; font-weight: 600!important; font-size: 1.1rem!important; display: block!important; } @keyframes pulse { 0% { transform: scale(1)!important; opacity: 1!important; } 70% { transform: scale(2)!important; opacity: 0!important; } 100% { transform: scale(1)!important; opacity: 0!important; } } a { color: #b57c00!important; text-decoration: none!important; } a:hover { text-decoration: underline!important; } pre { border-radius: 6px!important; font-size: 0.8em!important; overflow-x: auto!important; background-color: var(--deep-navy)!important; margin-bottom: 2.5em!important; color: var(--ice-blue)!important; } p > em { font-size: 0.8rem!important; } hr + h2 { max-width: 65%!important; font-weight: 700!important; font-size: 1.8rem!important; color: var(--brand-blue)!important; line-height: 1.4!important; margin-bottom: 1.5rem!important; padding-bottom: 0.5rem!important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)!important; position: relative!important; } p > code { color: var(--brand-blue)!important; padding-left: 20px; }}@media(max-width:768px){article.content{padding:2em!important;margin:1em!important;.lottie-container { width: 600px; height: 600px; opacity: 0.2; left:-40px; top: -120px; } h2:first-of-type { max-width: 100%!important; } p:first-of-type, p:has(+ hr) { max-width: 100%!important; } h1.title.is-1 { font-size: 1.75rem!important; max-width: 100%!important; } h2 { font-size: 1.25rem!important; } h3 { font-size: 1.25rem!important; } p, ul li, ol li { font-size: 0.95rem!important; } ul li::before, ul li::after { top: 0.5em!important; } ol { padding-left: 1.5em!important; } ol li { margin-bottom: 2em!important; } ol li::before { left: -1.75em!important; width: 1.75em!important; height: 1.75em!important; font-size: 0.9rem!important; top: 20!important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)!important; } ol li strong { font-size: 1rem!important; } h4 { font-size: 1.2rem!important; margin-bottom: 1.5em!important; margin-top: 4em!important; line-height: 1.5em!important; } ol > li > h4 { padding-left: 0.5rem!important; } .highlight { margin-bottom: 1.5rem !important; padding: 1rem !important; } .highlight + * { margin-top: 1.5rem !important; } hr + h2 { max-width: 100%!important; font-weight: 700!important; font-size: 1.8rem!important; color: var(--brand-blue)!important; line-height: 1.4!important; margin-bottom: 1.5rem!important; padding-bottom: 0.5rem!important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2)!important; position: relative!important; } code { font-size: 0.8em!important; }}}