:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#202922;background:#f1efe4;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{place-items:center;min-height:100svh;margin:0;padding:2rem;display:grid}main{background:#dce8c8;border:2px solid #202922;width:min(100%,74rem);padding:clamp(1.25rem,4vw,3.5rem);box-shadow:8px 8px #202922}.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;font-weight:700}h1{letter-spacing:-.04em;margin:2rem 0;font-size:clamp(2rem,6vw,4rem);line-height:1.08}p{line-height:1.6}ol{padding-left:1.25rem;line-height:1.6}li{margin:.5rem 0}a{color:#202922}.button{background:#f1efe4;border:2px solid #202922;padding:.75rem 1.25rem;font-weight:700;text-decoration:none;display:inline-block}.small{font-size:.875rem}h2{margin:2.5rem 0 .75rem;font-size:1.25rem}ul{padding-left:1.25rem;line-height:1.6}.actions{flex-wrap:wrap;gap:.75rem;display:flex}.button.secondary{background:0 0}.intro{max-width:46rem}#examples{scroll-margin-top:1.5rem}.examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:1.5rem 0;display:grid}.example{background:#f1efe4;border:1px solid #202922;min-width:0;padding:1rem}.example .eyebrow{letter-spacing:.07em;margin-top:0}.example video{aspect-ratio:9/16;background:#101710;width:100%;display:block}.example h3{margin:1rem 0 .5rem;font-size:1.1rem;line-height:1.3}.example p{font-size:.875rem}.source{border-top:1px solid #9da88b;margin-top:1rem}.source a{overflow-wrap:anywhere}a:focus-visible,video:focus-visible{outline-offset:4px;outline:3px solid #202922}.button:hover{background:#fffdf3}@media (max-width:760px){body{padding:1rem}main{box-shadow:4px 4px #202922}.examples{grid-template-columns:1fr}.example{width:100%;max-width:26rem;margin-inline:auto}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}