.fragment{padding-inline:2rem;.inner{height:100%;&.grid{display:grid;grid-column-gap:2rem;&.halfs{grid-template-columns:1fr 1fr}&.thirds{grid-template-columns:1fr 2fr}}}@media (min-width: 1440px){.inner{max-width:1296px;margin:0 auto;padding-inline:0rem}}}pre.shiki{position:relative;padding:1rem;overflow-x:auto;--icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");--icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");--diff-add: rgba(var(--oc-green-2-rgb), .1);--diff-del: rgba(var(--oc-red-2-rgb), .1);span.code-meta{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;align-items:center;background-color:transparent!important;span{background-color:transparent!important}}.code-lang{user-select:none;pointer-events:none;font-size:.875rem;color:var(--text-2);opacity:.5;z-index:6}.code-copy{padding:1rem;background-image:var(--icon-copy);background-position:50%;background-size:1rem;background-repeat:no-repeat;border:2px solid var(--surface-1);border-radius:.5rem;position:relative;height:1.5rem;width:1.5rem;display:flex;align-items:center;&.copied{background-image:var(--icon-copied);&:before{opacity:1}}&:failed{&:before{content:"failed!";color:var(--failure)}}&:before{position:absolute;content:"copied!";left:-4rem;z-index:7;opacity:0;transition:opacity .15s ease-in-out}}code{font-size:.875rem;display:block;tab-size:4}border-radius:.5rem}pre.shiki.has-diff{span.line.diff{--size: .875rem;display:inline-block;margin-inline-start:-2rem;padding-inline-start:2.5rem;width:calc(100% + 3rem);span{background:none!important}&:before{position:absolute;left:.5rem;user-select:none}&.add{background-color:var(--diff-add)!important;&:before{content:"+";color:var(--oc-green-8)}}&.remove{background-color:var(--diff-del)!important;&:before{content:"-";color:var(--oc-red-8)}}}}@media (prefers-color-scheme: dark){pre.shiki{--diff-add: rgba(var(--oc-green-8-rgb), .1);--diff-del: rgba(var(--oc-red-8-rgb), .1)}.shiki,.shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}[color-scheme=dark]{pre.shiki{--diff-add: rgba(var(--oc-green-8-rgb), .1);--diff-del: rgba(var(--oc-red-8-rgb), .1)}.shiki,.shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}h1{font-family:var(--font-serif)}.ctas{display:flex;gap:1rem;button{background:var(--surface-3);color:var(--text-1)}button.cta{display:flex;align-items:center;gap:1rem;text-transform:capitalize;.icon{display:grid;place-items:center;translate:0 0;scale:1;transition:scale,translate .2s ease-in-out}&:hover{.icon{translate:.25rem 0rem;scale:1.2}}}}.gridbg{position:relative;&:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");background-position:bottom;background-repeat:repeat;mask-image:linear-gradient(to top,transparent,black);@media (prefers-color-scheme: light){background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")}}&.circular{&:before{mask-image:radial-gradient(black,transparent)}}}main.lmain{padding-block-start:4rem;section{padding:3rem;&.odd{background-color:var(--surface-2)}&.short{min-height:45vh}}h1.heading{font-size:2.67rem;max-width:25rem;font-weight:400;line-height:3.5rem;text-transform:lowercase;&:first-letter{text-transform:capitalize}}.tagline{opacity:.8;font-size:1.2rem;padding-block:1rem;max-width:30rem;text-transform:capitalize;font-weight:400;line-height:normal}.cta{padding:.375rem 1.2rem;background:var(--brand);color:var(--surface-1);text-transform:capitalize;border-radius:.375rem;display:inline-block;cursor:pointer;user-select:none;a{color:var(--surface-1)!important}}a{&:hover,&:focus{text-decoration:underline;color:var(--brand)}}.pic{display:flex;justify-content:center;align-items:center}}