@font-face{font-family:"Source Sans 3";src:url(/fonts/SourceSans3-VariableFont_wght.ttf);font-style:normal}@font-face{font-family:"Source Sans 3";src:url(/fonts/SourceSans3-Italic-VariableFont_wght.ttf);font-style:italic}:root{--clr-neutral-200: #e0e0e0;--clr-neutral-300: #b3b3b3;--clr-neutral-500: #3c3c3c;--clr-neutral-700: #2a2a2a;--clr-neutral-900: #1c1c1c;--clr-accent: #00b4b8;--gradient-primary: linear-gradient( 90deg, var(--clr-accent) 0%, var(--clr-neutral-700) 100% );--gradient-secondary: linear-gradient( 90deg, var(--clr-neutral-500) 0%, var(--clr-neutral-700) 100% );--bg-primary: var(--clr-neutral-900);--bg-secondary: var(--clr-neutral-700);--text-primary: var(--clr-neutral-200);--text-secondary: var(--clr-neutral-300);--text-dark: var(--clr-neutral-900);--border-color: var(--clr-neutral-500);--ff-primary: "Source Sans 3", sans-serif;--ff-mono: monospace;--fs-400: 1rem;--fs-500: 1.125rem;--fs-600: 1.5rem;--fs-700: 2rem;--fs-800: 2.5rem;--fw-bold: 700;--fw-semi: 600;--fw-normal: 400;--br-md: .5rem;--br-lg: .75rem}*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p{margin:0}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}html{color-scheme:dark}body{font-family:var(--ff-primary);background-color:var(--bg-primary);color:var(--text-secondary)}button{cursor:pointer}ul:where([role=list]),ol:where([role=list]){list-style:none;padding-left:0;margin:0}abbr{text-decoration:none;cursor:help}.container{max-width:100rem;width:100%;padding-inline:clamp(1rem,4vw,3rem);margin-inline:auto}.flow{--_flow-space: 1rem;display:grid;gap:var(--_flow-space)}.flow[data-flow-space=sm]{--_flow-space: .5rem}.flow[data-flow-space=lg]{--_flow-space: 1.5rem}.flow[data-flow-space=xl]{--_flow-space: 2rem}.main-title{font-size:var(--fs-800);font-weight:var(--fw-bold);color:var(--text-primary)}.section-title{font-size:var(--fs-600);font-weight:var(--fw-bold);color:var(--text-primary)}.text-highlight{background-image:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.divider{width:100%;height:1px;background-image:var(--gradient-primary);border:none}.button{display:inline-flex;min-height:3rem;align-items:center;gap:.75rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);padding:.75em 1.125em;color:var(--text-primary);border-radius:var(--br-md);cursor:pointer;line-height:1.1;text-decoration:none;transition:transform .2s ease}.button:is(:hover,:focus-visible){border-color:var(--clr-accent)}.button--icon{min-height:unset;display:inline-flex;align-items:center;justify-content:center;background-color:transparent;border:none;padding:.5em}.search-field{display:inline-flex;align-items:center;min-height:3rem;gap:.75rem;border:1px solid var(--border-color);border-radius:var(--br-md);padding:.75em 1.125em}.search-field:is(:hover,:focus-within){border-color:var(--clr-accent)}.search-field>input{background-color:transparent;border:none}.search-field>input:focus{outline:none}.selector{position:relative;width:100%}.selector__button{width:100%;font-size:var(--fs-500);font-weight:var(--fw-bold);padding:.5em 1em;background-color:transparent;border:1px solid var(--border-color);border-radius:var(--br-md);cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center}.selector__value{display:flex;gap:.5em;align-items:center}.selector__value img{width:30px}.selector__arrow{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--text-primary);transition:transform .1s ease}.selector--open .selector__arrow{transform:rotate(180deg)}.selector__dropdown{display:grid;gap:.25rem;position:absolute;width:100%;max-height:15rem;overflow-y:auto;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--br-md);margin-top:.5rem;padding:.5rem;font-size:var(--fs-400);list-style:none;box-shadow:0 10px 25px #0003}.selector__dropdown:focus-within{border-color:var(--clr-accent)}.selector__item{position:relative;cursor:pointer;display:flex;gap:1rem;align-items:center;border-radius:var(--br-md)}.selector__item label{width:100%;padding:.25em .75em;cursor:pointer;border-radius:var(--br-md);display:flex;gap:1em;align-items:center;color:var(--text-primary)}.selector__item label img{width:35px}.selector__item:hover{background-image:var(--gradient-secondary)}.selector__item.selected label{background-color:var(--clr-accent);color:var(--text-dark);font-weight:var(--fw-bold)}.selector__item input[type=radio]{position:absolute;left:0;opacity:0}.logo{display:inline-flex;gap:.25em;color:var(--text-primary);text-decoration:none}.logo>span{font-size:var(--fs-600);font-weight:var(--fw-bold)}.header{padding-block:1rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}.primary-nav{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem}.heading{display:grid;gap:.5em;padding-bottom:1rem;text-align:center}.main{display:grid;gap:2rem;align-items:start;min-height:60vh}@media (width > 50em){.main{grid-template-columns:2fr 6fr}}.categories{display:grid;background-color:var(--bg-secondary);padding:1.25rem 1.25rem 2rem;border-radius:var(--br-lg)}.category{border-bottom:1px solid var(--border-color)}.category__btn{text-decoration:none;background-color:transparent;border:0;color:inherit;border-radius:0;text-align:start;display:inline-block;padding:.75em 1em;width:100%;font-size:var(--fs-500)}.category__btn:is(:hover,:focus-visible):not(.category__btn--active){background-image:var(--gradient-secondary);border-radius:var(--br-md)}.category__btn--active{background-color:var(--clr-accent);border:1px solid var(--border-color);font-weight:var(--fw-bold);color:var(--text-dark);border-radius:var(--br-md)}.snippets{--_gap: 1.5rem;display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}.snippet{width:100%;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--br-lg);padding:.75em;filter:grayscale(100%);text-align:start}.snippet:is(:hover,:focus-visible){outline:3px solid var(--clr-neutral-500);filter:grayscale(0)}.snippet__preview{width:100%;overflow:hidden;aspect-ratio:10 / 3;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--br-md);position:relative;padding-inline:1em;display:grid;place-items:center}.snippet__title{color:var(--text-primary)}body:has(.modal-overlay){overflow:hidden}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;overflow:hidden}.modal{background-color:var(--bg-secondary);padding:2rem;width:90%;max-width:800px;border-radius:var(--br-lg);box-shadow:0 4px 12px #0000004d;position:relative;gap:1rem}.modal__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.code-preview{border:1px solid var(--border-color);border-radius:var(--br-md);width:100%;overflow-x:auto;position:relative}.modal__copy{position:absolute;top:.5em;right:1.2em;z-index:10;isolation:isolate}.modal__copy:hover{background:var(--bg-primary)}.modal__tags{display:flex;gap:.5em;flex-wrap:wrap}.modal__tag{padding:.5em 1em;border:1px solid var(--border-color);border-radius:var(--br-md);text-transform:lowercase;font-family:var(--ff-mono);font-weight:var(--fw-bold)}.footer{display:grid;gap:clamp(1rem,2vw,2rem);grid-template-columns:1fr;grid-template-areas:"content" "nav1" "nav2";padding-bottom:3rem}@media (width > 40rem){.footer{grid-template-columns:3fr 2fr;grid-template-areas:"content nav1" "content nav2"}}@media (width > 70rem){.footer{grid-template-columns:2fr 1fr 1fr;grid-template-areas:"content nav1 nav2"}}.styled-link{color:var(--text-primary);text-decoration:none;font-weight:600}.styled-link:is(:hover,:focus-visible){color:var(--clr-accent)}.footer__nav:first-child{grid-area:nav1;width:100%}.footer__nav:last-child{grid-area:nav2}.footer__content{grid-area:content;max-width:60ch}