:root{--nm-backdrop-color: rgb(0 0 0 / .7);--nm-backdrop-filter: blur(10px);--nm-backdrop-z-index: 1;--nm-scrollbar-track-color: transparent;--nm-scrollbar-thumb-color: rgb(255 255 255 / .5);--nm-radius: 20px;--nm-max-width: 50rem;--nm-background: white;--nm-duration: .35s;--nm-close-top: 0;--nm-close-margin: 0;--nm-scrollbar-width: 0;--nm-scroll-position: 0}.nano-modal,.nano-modal__backdrop,.nano-modal__wrapper,.nano-modal__content,.nano-modal__close-button{padding:0;margin:0;box-sizing:border-box}.nano-modal{width:100%;height:100%;max-width:100%;max-height:100%;border:none;background:none;color:inherit;touch-action:auto;outline:none;overscroll-behavior:none;transition:opacity var(--nm-duration);position:fixed;inset:0;scrollbar-width:thin;scrollbar-color:var(--nm-scrollbar-thumb-color) var(--nm-scrollbar-track-color)}.nano-modal--closing[open]{opacity:.999}.nano-modal::backdrop{opacity:0;background-color:transparent}.nano-modal__backdrop{background:var(--nm-backdrop-color);-webkit-backdrop-filter:var(--nm-backdrop-filter);backdrop-filter:var(--nm-backdrop-filter);opacity:1;display:none;transition:opacity var(--nm-duration),transform var(--nm-duration),backdrop-filter var(--nm-duration);position:fixed;inset:0;z-index:var(--nm-backdrop-z-index)}body:has(.nano-modal--closing[open]) .nano-modal__backdrop{opacity:0}html:has(.nano-modal[open]){touch-action:none;overflow:hidden;height:100%}body:has(.nano-modal[open]){touch-action:none;overflow:hidden;position:fixed;inset:0;inset-inline-end:var(--nm-scrollbar-width);inset-block-start:var(--nm-negative-margin)}body:has(.nano-modal[open]) .nano-modal__backdrop{display:block}.nano-modal__wrapper{pointer-events:none}.nano-modal__content{background:var(--nm-background);max-width:var(--nm-max-width);pointer-events:all;z-index:0;will-change:transform,opacity;margin-inline:auto;transition:opacity var(--nm-duration),transform var(--nm-duration)}.nano-modal__close-button{color:inherit;background:inherit;z-index:1;float:inline-end;position:sticky;top:var(--nm-close-top);margin:var(--nm-close-margin);border:none;cursor:pointer}@starting-style{body:has(.nano-modal[open]) .nano-modal__backdrop{opacity:0}}@starting-style{.nano-modal[open] .nano-modal__content{opacity:0}}.nano-modal--closing[open] .nano-modal__content{opacity:0}:root{--nm-close-top: 1rem}@starting-style{.nano-modal[open] .nano-modal__content{transform:translateY(3rem)}}.nano-modal--closing[open] .nano-modal__content{transform:translateY(3rem)}.nano-modal__wrapper{margin-block-start:10vh;margin-block-start:10dvh;min-height:90vh;min-height:90dvh;display:flex;flex-direction:column;justify-content:flex-end;margin-inline:auto}@media (min-width: 600px){.nano-modal__wrapper{padding-inline:2rem;margin-block:4rem;min-height:calc(100vh - 8rem);min-height:calc(100dvh - 8rem);justify-content:center}}@media (min-width: 900px){.nano-modal__wrapper{padding-inline:4rem;margin-block:6rem;min-height:calc(100vh - 12rem);min-height:calc(100dvh - 12rem)}}.nano-modal__content{border-start-start-radius:var(--nm-radius);border-start-end-radius:var(--nm-radius)}@media (min-width: 600px){.nano-modal__content{border-radius:var(--nm-radius)}}.nano-modal__close-button{padding:.5rem}:root{--ctp-rosewater: #dc8a78;--ctp-flamingo: #dd7878;--ctp-pink: #ea76cb;--ctp-mauve: #8839ef;--ctp-red: #d20f39;--ctp-maroon: #e64553;--ctp-peach: #fe640b;--ctp-yellow: #df8e1d;--ctp-green: #40a02b;--ctp-teal: #179299;--ctp-sky: #04a5e5;--ctp-sapphire: #209fb5;--ctp-blue: #1e66f5;--ctp-lavender: #7287fd;--ctp-text: #4c4f69;--ctp-subtext1: #5c5f77;--ctp-subtext0: #6c6f85;--ctp-overlay2: #7c7f93;--ctp-overlay1: #8c8fa1;--ctp-overlay0: #9ca0b0;--ctp-surface2: #acb0be;--ctp-surface1: #bcc0cc;--ctp-surface0: #ccd0da;--ctp-base: #eff1f5;--ctp-mantle: #e6e9ef;--ctp-crust: #dce0e8}@media (prefers-color-scheme: dark){:root{--ctp-rosewater: #f4dbd6;--ctp-flamingo: #f0c6c6;--ctp-pink: #f5bde6;--ctp-mauve: #c6a0f6;--ctp-red: #ed8796;--ctp-maroon: #ee99a0;--ctp-peach: #f5a97f;--ctp-yellow: #eed49f;--ctp-green: #a6da95;--ctp-teal: #8bd5ca;--ctp-sky: #91d7e3;--ctp-sapphire: #7dc4e4;--ctp-blue: #8aadf4;--ctp-lavender: #b7bdf8;--ctp-text: #cad3f5;--ctp-subtext1: #b8c0e0;--ctp-subtext0: #a5adcb;--ctp-overlay2: #939ab7;--ctp-overlay1: #8087a2;--ctp-overlay0: #6e738d;--ctp-surface2: #5b6078;--ctp-surface1: #494d64;--ctp-surface0: #363a4f;--ctp-base: #24273a;--ctp-mantle: #1e2030;--ctp-crust: #181926}}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--ctp-overlay1)}.token.punctuation{color:var(--ctp-overlay2)}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:var(--ctp-mauve)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--ctp-green)}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--ctp-peach);background:color-mix(in oklab,var(--ctp-base) 50%,transparent)}.token.atrule,.token.attr-value,.token.keyword{color:var(--ctp-sapphire)}.token.function,.token.class-name{color:var(--ctp-mauve)}.token.regex,.token.important,.token.variable{color:var(--ctp-yellow)}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--bg: #fdfdff;--fg: #223;--fg-light: #445;--fg-white: #fff;--accent-1: oklch(.64 .23 5);--accent-2: oklch(.68 .25 250);--stripes-color-1: oklch(.64 .23 5 / .03);--stripes-color-2: oklch(.64 .23 5 / .07);--stripes-thickness: 10px;--scrollbar-thumb: rgb(0 0 0 / .25);--fg-nav: #778;--border-color: #eee;--bg-code: #f7f8fb;--fg-code: #3c3f49}@media (prefers-color-scheme: dark){:root{--bg: #131315;--fg: #fff6f6;--fg-light: #faeef6;--fg-white: #faeef6;--accent-1: oklch(.6 .23 5);--accent-2: oklch(.68 .25 250);--stripes-color-1: rgb(140 50 80 / .2);--stripes-color-2: rgb(140 50 80 / .3);--stripes-thickness: 10px;--scrollbar-thumb: rgb(255 255 255 / .35);--fg-nav: #99a;--border-color: #222222;--bg-code: #16171b;--fg-code: #cdd6f4;--nm-backdrop-color: rgb(50 50 55 / .3);--nm-background: #131315}.btn{--accent-1: oklch(.48 .2 5)}}*{padding:0;margin:0;box-sizing:border-box}*:focus-visible{outline:2px solid var(--accent-1);outline-offset:2px}html{scrollbar-color:var(--scrollbar-thumb) transparent}body{font-family:system-ui,Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;line-height:1.5;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-weight:500;font-size:1rem}@media (min-width: 600px){body{font-size:1.125rem}}@media (min-width: 900px){body{font-size:1.25rem}}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{background:none;border:none;cursor:pointer}a{color:inherit}a:hover{color:var(--accent-1)}ul,ol{padding-left:1.15em}li::marker{color:var(--accent-1)}h1,h2,h3{overflow-wrap:break-word;font-weight:700;letter-spacing:-.03em;line-height:1.1;padding:0;margin:0;text-wrap:balance;text-wrap:pretty;font-size:1.75rem}@media (min-width: 600px){h1,h2,h3{font-size:2rem}}@media (min-width: 900px){h1,h2,h3{font-size:2.25rem}}h3{font-size:1.25rem}@media (min-width: 600px){h3{font-size:1.5rem}}@media (min-width: 900px){h3{font-size:1.75rem}}p,li{color:var(--fg-light)}pre{max-width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;color:var(--fg-code);line-height:1.3;padding:.75rem;border-radius:8px;background-color:var(--bg-code);border:1px solid var(--border-color)}code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;font-size:.875em;color:var(--fg-code)}p code,li code{color:var(--accent-1)}pre code{font-size:.875em}@media (min-width: 600px){pre code{font-size:1rem}}.h1{font-size:2.5rem;margin-bottom:.5em;line-height:1}@media (min-width: 600px){.h1{font-size:3.5rem}}@media (min-width: 900px){.h1{font-size:5rem}}.h2{font-size:1.75rem;color:var(--fg-light);margin-bottom:.5em;line-height:1}@media (min-width: 600px){.h2{font-size:2.25rem}}@media (min-width: 900px){.h2{font-size:3rem}}.h2 code{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;font-size:.75em}.accent-1{color:var(--accent-1)}.accent-2{color:var(--accent-2)}.btn{background:var(--accent-1);padding:.375rem .5rem;line-height:1;color:var(--fg-white);font-weight:700;font-size:.875rem;border-radius:4px;transition:background .25s}.btn:hover{background:#000}.btn--accent-2{background:var(--accent-2)}.btn--lg{padding:.75rem 1rem;font-size:1rem;border-radius:8px}@media (min-width: 600px){.btn--lg{padding:1rem 1.25rem}}#debug{display:none;position:fixed;left:.5rem;top:.5rem}#debug:target{display:flex;flex-wrap:wrap;gap:.25rem}.nano-modal__content p+p{margin-top:1em}.mb{margin-bottom:1rem}.stripe{position:fixed;top:0;height:.25rem;width:100%;background:var(--accent-1)}.nav{display:none}@media (min-width: 900px){.nav{display:block;align-self:flex-start;position:sticky;top:2rem;margin-top:calc(-1 * var(--nm-negative-margin))}}.nav__link,.nav__link-external{color:var(--fg-nav);text-decoration:none;display:block;font-size:1rem;padding:.375rem 0;font-weight:600}.nav__link:hover,.nav__link-external:hover{color:var(--fg)}.nav__logo{background:var(--accent-1);text-decoration:none;color:var(--accent-1);width:4em;height:3em;display:grid;place-items:center;border-radius:.5em;font-weight:900;margin-bottom:1em;line-height:1}.nav__logo span{background:var(--fg-white);border-radius:.25em;padding:.25em .75em}.nav__trigger{position:fixed;top:1.75rem;right:1.25rem;background:var(--accent-1);color:var(--fg-white);border-radius:.25em;font-weight:900;padding:.5em .75em;transition:background .25s}body:has(.nano-modal[open]) .nav__trigger{right:calc(1.25rem + var(--nm-scrollbar-width))}.nav__trigger:hover{background-color:#000}@media (min-width: 900px){.nav__trigger{display:none}}.nav__trigger svg{width:1em}#modal-nav .nano-modal__content{width:100%}.page{max-width:60rem;margin:0 auto;padding:1.25rem}@media (min-width: 600px){.page{padding:1.5rem}}@media (min-width: 900px){.page{padding:2rem}}@media (min-width: 900px){.page{display:grid;gap:2rem;grid-template-columns:10rem 1fr}}.main{min-width:0}.content>*+*{margin-top:1em}.content h2,.content h3{margin-top:.5em;padding-top:1em}.demo-modal-trigger{padding:2.5em 0;display:grid;place-items:center;max-width:24rem;border-radius:8px;border:1px solid var(--stripes-color-2);background:repeating-linear-gradient(35deg,var(--stripes-color-1),var(--stripes-color-1) var(--stripes-thickness),var(--stripes-color-2) var(--stripes-thickness),var(--stripes-color-2) calc(var(--stripes-thickness) * 2))}.nano-modal--base .nano-modal__content{padding:1.25rem}@media (min-width: 600px){.nano-modal--base .nano-modal__content{padding:1.5rem}}@media (min-width: 900px){.nano-modal--base .nano-modal__content{padding:2rem}}.nano-modal--base h2{margin-bottom:1rem}.nano-modal--base .nano-modal__close-button{font-size:.875em;font-weight:500;line-height:1}:root:has(.custom-modal[open]){--nm-backdrop-color: oklch(.64 .2 5 / .05);--nm-backdrop-filter: blur(100px)}.custom-modal{--nm-close-top: 1rem;--nm-duration: .5s;--nm-max-width: 30rem;--nm-radius: 0}.custom-modal h2{margin-bottom:1.25rem}@starting-style{.custom-modal[open] .nano-modal__content{transform:rotate(180deg) scale(.7)}}.custom-modal.nano-modal--closing[open] .nano-modal__content{transform:rotate(-180deg) scale(.7)}.custom-modal .nano-modal__wrapper{display:flex;flex-direction:column;margin-inline:auto;padding-inline:2rem;margin-block:4rem;min-height:calc(100vh - 8rem);min-height:calc(100dvh - 8rem);justify-content:center}.custom-modal .nano-modal__content{padding:1.25rem;border:2px solid var(--accent-1);background-color:var(--bg);background-image:repeating-linear-gradient(35deg,var(--stripes-color-1),var(--stripes-color-1) var(--stripes-thickness),var(--stripes-color-2) var(--stripes-thickness),var(--stripes-color-2) calc(var(--stripes-thickness) * 2))}@media (min-width: 600px){.custom-modal .nano-modal__content{padding:2rem}}.custom-modal .nano-modal__close-button{padding:.5rem}.footer{margin-top:6rem;font-family:.875em}[data-nm-open],.destroy{filter:grayscale(1)}body:has([data-nm-init=true]) [data-nm-open],body:has([data-nm-init=true]) .destroy{filter:none}.hidden{display:none}.thin-scrollbar{scrollbar-width:thin}