body{margin:0;background:#FFFFFF}
a{color:#1D2330}a:hover{color:#000}
html{scroll-behavior:smooth}
.btn{display:inline-block;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .38s cubic-bezier(.34,1.9,.5,1)}
@media (min-width:1024px) and (hover:hover){
.btn-dark:hover{background-color:#F9F6F3 !important;color:#1D2330 !important;box-shadow:inset 0 0 0 2px #1D2330;transform:translateY(-2px) scale(1.04)}
.btn-light:hover{background-color:#1D2330 !important;color:#F9F6F3 !important;transform:translateY(-2px) scale(1.04)}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mark{from{background-size:0% 100%}to{background-size:100% 100%}}
header{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.intro > *{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.intro > :nth-child(2){animation-delay:.1s}
.intro > :nth-child(3){animation-delay:.2s}
.hero-img{animation:rise .8s cubic-bezier(.2,.8,.2,1) .3s both}
.hl{background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mark .8s cubic-bezier(.65,0,.25,1) .7s both}
.prose > :first-child{margin-top:0}
.prose h2{margin:56px 0 0;font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:700;font-size:34px;line-height:1.3;letter-spacing:-0.015em;color:#1D2330;scroll-margin-top:110px}
.prose h3{margin:40px 0 0;font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:700;font-size:25px;line-height:1.38;color:#1D2330}
.prose p,.prose ul,.prose ol{margin:20px 0 0;font-size:19px;line-height:1.75;color:#2C3242}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:8px;padding-left:4px}
.prose strong{font-weight:800;color:#1D2330}
.prose a{font-weight:700;text-decoration-color:#93B8F0;text-decoration-thickness:3px;text-underline-offset:4px}
.prose .btnrow{display:flex;flex-wrap:wrap;gap:10px}
.prose .btnrow a{text-decoration:none;border-radius:999px;padding:14px 24px;font-weight:800;font-size:16px}
.prose blockquote{margin:36px 0 0;padding:4px 0 4px 28px;position:relative;font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 0;font-weight:600;font-size:25px;line-height:1.5;color:#1D2330}
.prose blockquote::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:999px;background:var(--quote-accent,#EAF3FF)}
.prose blockquote p{margin:0;font:inherit;color:inherit}
.prose figure{margin:40px 0 0}
.prose figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:20px;box-shadow:0 0 0 1px #ECE6DD}
.prose pre{margin:28px 0 0;background:#1D2330;color:#E8ECF4;border-radius:24px;padding:24px 28px;overflow:auto;max-height:640px;font-size:14px;line-height:1.7}
.prose pre code{font-family:'JetBrains Mono',monospace;background:none;padding:0;font-size:inherit;color:inherit}
.prose hr{border:0;height:2px;background:#ECE6DD;margin:32px 0 0;border-radius:2px}
.demo-show{border:0;border-radius:999px;background:#1D2330;color:#F9F6F3;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;padding:10px 18px;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.9,.5,1)}
.demo-show:hover{transform:scale(1.05)}
.prose .code-hl{color:#FFE97A}
@media (max-width:640px){.prose h2{font-size:28px}.prose p,.prose ul,.prose ol{font-size:18px}.prose blockquote{font-size:22px}}
@media (prefers-reduced-motion: reduce){*{animation:none !important}html{scroll-behavior:auto}}