From 478527c0bbb437bb75c846ae39dc60d6d36289ae Mon Sep 17 00:00:00 2001 From: Adam Laki Date: Wed, 1 May 2024 19:58:05 +0200 Subject: [PATCH] Viktor fix? --- src/css/main.css | 4179 +++++++++++++++++++++++++++++++++++++++++++- src/scss/main.scss | 3 +- 2 files changed, 4180 insertions(+), 2 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 53b79a8..53da172 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1 +1,4178 @@ -@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:400;src:url("../../font/inter-v13-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:500;src:url("../../font/inter-v13-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:700;src:url("../../font/inter-v13-latin-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Figtree";font-style:normal;font-weight:400;src:url("../../font/figtree-v5-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Figtree";font-style:normal;font-weight:500;src:url("../../font/figtree-v5-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Figtree";font-style:normal;font-weight:700;src:url("../../font/figtree-v5-latin-700.woff2") format("woff2")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;block-size:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-inline-size:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{block-size:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spruce-alert-color-danger: hsl(0, 71%, 51%);--spruce-alert-color-info: hsl(195, 100%, 42%);--spruce-alert-color-success: hsl(150, 100%, 33%);--spruce-alert-color-warning: hsl(48, 89%, 55%)}:root{--spruce-base-color-background: hsl(0, 0%, 100%);--spruce-base-color-blockquote-border: hsl(262, 71%, 49%);--spruce-base-color-border: hsl(215, 63%, 93%);--spruce-base-color-code-background: #f6f2fd;--spruce-base-color-code-foreground: hsl(260, 70%, 6%);--spruce-base-color-heading: hsl(260, 70%, 6%);--spruce-base-color-link: hsl(262, 71%, 49%);--spruce-base-color-link-hover: #511dab;--spruce-base-color-mark-background: hsl(50, 100%, 80%);--spruce-base-color-mark-foreground: hsl(260, 70%, 6%);--spruce-base-color-marker: hsl(262, 71%, 49%);--spruce-base-color-primary: hsl(262, 71%, 49%);--spruce-base-color-secondary: hsl(227, 92%, 55%);--spruce-base-color-strong: hsl(260, 70%, 6%);--spruce-base-color-text: hsl(208, 9%, 42%);--spruce-base-color-code-tab-background: hsl(222, 100%, 98%);--spruce-base-color-primary-dark: hsl(261, 52%, 35%);--spruce-base-color-primary-darkest: hsl(272, 100%, 9%);--spruce-base-color-primary-lightest: hsl(259, 53%, 94%)}:root{--spruce-btn-color-primary-background: hsl(262, 71%, 49%);--spruce-btn-color-primary-background-hover: #511daa;--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);--spruce-btn-color-primary-shadow: #ceb9f3;--spruce-btn-color-secondary-background: hsl(227, 92%, 55%);--spruce-btn-color-secondary-background-hover: #0937dc;--spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%);--spruce-btn-color-secondary-shadow: #ced8fd;--spruce-btn-color-dark-background: hsl(260, 70%, 6%);--spruce-btn-color-dark-background-hover: hsl(260, 70%, 12%);--spruce-btn-color-dark-foreground: hsl(0, 0%, 100%);--spruce-btn-color-decline-background: hsl(207, 39%, 17%);--spruce-btn-color-decline-foreground: hsl(0, 0%, 100%);--spruce-btn-color-discrete-background: hsla(206, 40%, 17%, 0.1);--spruce-btn-color-discrete-background-hover: hsl(262, 71%, 49%);--spruce-btn-color-discrete-foreground: hsl(0, 0%, 10%);--spruce-btn-color-discrete-foreground-hover: hsl(0, 0%, 100%);--spruce-btn-color-install-background: hsl(0, 0%, 95%);--spruce-btn-color-install-background-hover: hsl(0, 0%, 90%);--spruce-btn-color-install-foreground: hsl(0, 0%, 10%);--spruce-btn-color-pagination-background: hsl(263, 40%, 96%);--spruce-btn-color-pagination-background-hover: hsl(262, 71%, 49%);--spruce-btn-color-pagination-focus-ring: hsl(262, 71%, 49%);--spruce-btn-color-pagination-foreground: hsl(262, 71%, 49%);--spruce-btn-color-pagination-foreground-hover: hsl(0, 0%, 100%)}:root{--spruce-form-color-background: hsl(0, 0%, 100%);--spruce-form-color-background-disabled: hsl(0, 0%, 95%);--spruce-form-color-border: hsl(260, 4%, 70%);--spruce-form-color-border-disabled: hsl(215, 63%, 93%);--spruce-form-color-border-focus: hsl(262, 71%, 49%);--spruce-form-color-check-background: hsl(262, 71%, 49%);--spruce-form-color-check-focus-ring: hsl(262, 71%, 49%);--spruce-form-color-check-foreground: hsl(0, 0%, 100%);--spruce-form-color-group-label-background: hsl(210, 60%, 98%);--spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);--spruce-form-color-invalid: hsl(0, 71%, 51%);--spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25);--spruce-form-color-label: hsl(260, 70%, 6%);--spruce-form-color-legend: hsl(260, 70%, 6%);--spruce-form-color-placeholder: hsl(208, 7%, 40%);--spruce-form-color-range-thumb-background: hsl(262, 71%, 49%);--spruce-form-color-range-thumb-focus-ring: hsl(262, 71%, 49%);--spruce-form-color-range-track-background: hsl(215, 63%, 93%);--spruce-form-color-ring-focus: rgba(101, 36, 214, 0.25);--spruce-form-color-select-foreground: hsl(260, 70%, 6%);--spruce-form-color-text: hsl(208, 9%, 42%);--spruce-form-color-valid: hsl(150, 100%, 33%);--spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25)}:root{--spruce-selection-color-foreground: hsl(0, 0%, 100%);--spruce-selection-color-background: hsl(262, 71%, 49%)}:root{--spruce-scrollbar-color-thumb-background: hsla(0, 0%, 0%, 0.15);--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);--spruce-scrollbar-color-track-background: hsla(0, 0%, 0%, 0.05)}:root{--spruce-table-color-border: hsl(215, 63%, 93%);--spruce-table-color-caption: hsl(208, 9%, 42%);--spruce-table-color-heading: hsl(260, 70%, 6%);--spruce-table-color-hover: hsla(0, 0%, 0%, 0.05);--spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025);--spruce-table-color-text: hsl(208, 9%, 42%)}:root{--spruce-breadcrumb-color-separator: hsla(0, 0%, 0%, 0.1)}:root{--spruce-cookie-color-background: hsl(207, 95%, 8%);--spruce-cookie-color-foreground: hsl(0, 0%, 100%)}:root{--spruce-footer-color-background: hsl(260, 70%, 6%)}:root{--spruce-ide-color-header-background: hsl(0, 0%, 100%)}:root{--spruce-hero-color-gradient-end: hsl(0, 0%, 100%);--spruce-hero-color-gradient-start: hsl(210, 100%, 98%);--spruce-hero-color-note-background: hsl(210, 100%, 97%);--spruce-hero-color-note-color: hsl(216, 50%, 44%)}:root{--spruce-navigation-color-icon-background: hsl(259, 53%, 94%);--spruce-navigation-color-icon-background-hover: hsl(262, 71%, 49%);--spruce-navigation-color-icon-foreground: hsl(262, 71%, 49%);--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%)}:root{--spruce-modal-color-background: hsla(210, 60%, 98%, 0.7)}:root{--spruce-prism-color-background: hsl(0, 0%, 98%);--spruce-prism-color-boolean: hsl(0, 44%, 53%);--spruce-prism-color-class-name: hsl(0, 0%, 7%);--spruce-prism-color-color: hsl(243, 14%, 29%);--spruce-prism-color-comment: hsl(225, 14%, 46%);--spruce-prism-color-constant: hsl(221, 57%, 52%);--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);--spruce-prism-color-namespace: hsl(173, 100%, 24%);--spruce-prism-color-number: hsl(315, 90%, 35%);--spruce-prism-color-punctuation: hsl(279, 50%, 53%);--spruce-prism-color-regex: hsl(1, 66%, 47%)}:root{--spruce-search-color-icon: hsl(259, 53%, 94%)}:root{--spruce-border-radius: 0.425rem;--spruce-font-family-base: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--spruce-font-family-heading: Avenir, Avenir Next LT Pro, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;--spruce-font-size-base: 1rem;--spruce-font-size-lead: clamp(1.15rem, 2vw, 1.35rem);--spruce-font-size-lg: 1.125rem;--spruce-font-size-ratio: 1.25;--spruce-font-size-sm: 0.875rem;--spruce-font-weight-heading: 700;--spruce-inline-padding: 0.1em 0.3em;--spruce-line-height-base: 1.8;--spruce-line-height-heading: calc(2px + 2ex + 2px);--spruce-line-height-lg: 1.8;--spruce-line-height-md: 1.5;--spruce-line-height-sm: 1.2;--spruce-border-radius-lg: 0.925rem;--spruce-border-radius-sm: 0.425rem;--spruce-container-inline-size: 94rem;--spruce-page-margin: 2cm;--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"]}@media(prefers-reduced-motion: no-preference){:root{--spruce-duration: 0.15s;--spruce-timing-function: ease-in-out}}.sr-only{block-size:1px !important;border:0 !important;clip:rect(0, 0, 0, 0) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}[tabindex="-1"]:focus{outline:none !important}::selection{background-color:var(--spruce-selection-color-background);color:var(--spruce-selection-color-foreground);text-shadow:none}html{box-sizing:border-box}@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}*,::before,::after{box-sizing:inherit}body{background:var(--spruce-base-color-background);color:var(--spruce-base-color-text)}a{color:var(--spruce-base-color-link);text-decoration:underline;transition-duration:var(--spruce-duration);transition-property:color;transition-timing-function:var(--spruce-timing-function)}a:hover{color:var(--spruce-base-color-link-hover)}button{color:inherit}a,button{touch-action:manipulation}hr{border:0;border-block-start:1px solid var(--spruce-base-color-border)}img{block-size:auto;display:block;max-inline-size:100%;user-select:none}iframe{block-size:100%;display:block;inline-size:100%}figure{margin-inline:0}figure figcaption{margin-block-start:.5rem;text-align:center}.table-responsive{--inline-size: 40rem;-webkit-overflow-scrolling:touch;overflow-x:auto}.table-responsive table{min-inline-size:var(--inline-size)}.table{--spruce-line-height: 1.5;--spruce-padding: 1rem;--spruce-responsive-inline-size: 40rem;border-collapse:collapse;color:var(--spruce-table-color-text);inline-size:100%}.table caption{color:var(--spruce-table-color-caption);margin-block-end:1rem}.table th,.table td{border-block-end:1px solid var(--spruce-table-color-border);line-height:var(--spruce-line-height);padding:var(--spruce-padding)}.table th{color:var(--spruce-table-color-heading);text-align:inherit;text-align:-webkit-match-parent}.table--striped>tbody>tr:nth-child(odd){background-color:var(--spruce-table-color-stripe)}.table--hover>tbody>tr:hover{background:var(--spruce-table-color-hover)}.table--clear-border th,.table--clear-border td{border:0}.table--in-line th:first-child,.table--in-line td:first-child{padding-inline-start:0}.table--in-line th:last-child,.table--in-line td:last-child{padding-inline-end:0}.table--sm{--spruce-padding: 0.5rem}.table--sm th,.table--sm td{padding:var(--spruce-padding)}.table--rounded th:first-child,.table--rounded td:first-child{border-end-start-radius:var(--spruce-border-radius-sm);border-start-start-radius:var(--spruce-border-radius-sm)}.table--rounded th:last-child,.table--rounded td:last-child{border-end-end-radius:var(--spruce-border-radius-sm);border-start-end-radius:var(--spruce-border-radius-sm)}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:var(--spruce-font-family-base);font-size:var(--spruce-font-size-base);line-height:var(--spruce-line-height-base)}p,li,h1,h2,h3,h4,h5,h6{hyphens:auto;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--spruce-base-color-heading);font-family:var(--spruce-font-family-heading);font-weight:var(--spruce-font-weight-heading);line-height:var(--spruce-line-height-heading)}h1{font-size:clamp(2.0751953125rem,2vw + 1rem,2.44140625rem)}h2{font-size:clamp(1.66015625rem,2vw + 1rem,1.953125rem)}h3{font-size:clamp(1.328125rem,2vw + 1rem,1.5625rem)}h4{font-size:clamp(1.0625rem,2vw + 1rem,1.25rem)}h5{font-size:1rem}h6{font-size:1rem}ul,ol{list-style-position:inside}ul>*,ol>*{margin-block-end:0;margin-block-start:0}ul>*+*,ol>*+*{margin-block-start:.25rem}ul li,ol li{list-style-position:outside}ul li::marker,ol li::marker{color:var(--spruce-base-color-marker)}li>ul,li>ol{margin-block-start:.25rem}dl dt{color:var(--spruce-base-color-heading);font-weight:bold}dl dd{margin:0}dl dd+dt{margin-block-start:1rem}.quote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);padding-inline-start:1.5rem}.quote>*{margin-block-end:0;margin-block-start:0}.quote>*+*{margin-block-start:.5rem}.quote blockquote{border-inline-start:0;padding-inline-start:0}.quote figcaption{text-align:start}blockquote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);margin-inline-start:0;padding-inline-start:1.5rem}blockquote>*{margin-block-end:0;margin-block-start:0}blockquote>*+*{margin-block-start:.5rem}abbr[title]{border-block-end:1px dotted;cursor:help;text-decoration:none}mark{background-color:var(--spruce-base-color-mark-background);border-radius:var(--spruce-border-radius);color:var(--spruce-base-color-mark-foreground);padding:var(--spruce-inline-padding)}code,kbd,samp{background-color:var(--spruce-base-color-code-background);border-radius:var(--spruce-border-radius);color:var(--spruce-base-color-code-foreground);padding:var(--spruce-inline-padding)}strong{color:var(--spruce-base-color-strong)}.lead{font-size:var(--spruce-font-size-lead)}.hidden,[hidden]{display:none !important}.h1{font-size:clamp(2.0751953125rem,2vw + 1rem,2.44140625rem)}.h2{font-size:clamp(1.66015625rem,2vw + 1rem,1.953125rem)}.h3{font-size:clamp(1.328125rem,2vw + 1rem,1.5625rem)}.h4{font-size:clamp(1.0625rem,2vw + 1rem,1.25rem)}.h5{font-size:1rem}.h6{font-size:1rem}.btn{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-font-weight: 500;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.75em;--spruce-icon-size: 1em;--spruce-padding: 0.75em 1em;--spruce-shadow-size: 0.25rem;align-items:center;border-radius:var(--spruce-border-radius);border-style:solid;border-width:var(--spruce-border-width);cursor:pointer;display:inline-flex;font-size:var(--spruce-font-size);font-weight:var(--spruce-font-weight);gap:var(--spruce-gap);justify-content:center;line-height:1;padding:var(--spruce-padding);text-align:start;text-decoration:none;transition-duration:var(--spruce-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--spruce-timing-function)}.btn:focus{outline-color:rgba(0,0,0,0);outline-style:solid}.btn:disabled{opacity:.5;pointer-events:none}.btn--icon{padding:var(--spruce-icon-padding)}.btn--icon.btn--sm{padding:var(--spruce-icon-padding)}.btn--icon.btn--lg{padding:var(--spruce-icon-padding)}.btn__icon{block-size:var(--spruce-icon-size);flex-shrink:0;inline-size:var(--spruce-icon-size);pointer-events:none}.btn__icon--sm{block-size:var(--spruce-icon-size);inline-size:var(--spruce-icon-size)}.btn--sm{--spruce-font-size: 0.8rem;--spruce-gap: 0.25rem;--spruce-icon-padding: 0.5em;--spruce-icon-size: 0.8rem;--spruce-padding: 0.5em 0.75em;font-size:var(--spruce-font-size);gap:var(--spruce-gap);padding:var(--spruce-padding)}.btn--lg{--spruce-font-size: 1.15rem;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.9em;--spruce-padding: 0.9em 1.15em}.btn--block{inline-size:100%}.btn--primary{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--primary:hover{background-color:var(--spruce-btn-color-primary-background-hover);border-color:var(--spruce-btn-color-primary-background-hover);color:var(--spruce-btn-color-primary-foreground)}.btn--primary-shadow{box-shadow:0 .55em 1em -0.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-primary-shadow)}.btn--secondary{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--secondary:hover{background-color:var(--spruce-btn-color-secondary-background-hover);border-color:var(--spruce-btn-color-secondary-background-hover);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary-shadow{box-shadow:0 .55em 1em -0.2em var(--spruce-btn-color-secondary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-secondary-shadow)}.btn--outline-primary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-background)}.btn--outline-primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--outline-primary:hover{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--outline-secondary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-background)}.btn--outline-secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--outline-secondary:hover{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.form-file::file-selector-button{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-font-weight: 500;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.75em;--spruce-icon-size: 1em;--spruce-padding: 0.75em 1em;--spruce-shadow-size: 0.25rem;align-items:center;border-radius:var(--spruce-border-radius);border-style:solid;border-width:var(--spruce-border-width);cursor:pointer;display:inline-flex;font-size:var(--spruce-font-size);font-weight:var(--spruce-font-weight);gap:var(--spruce-gap);justify-content:center;line-height:1;padding:var(--spruce-padding);text-align:start;text-decoration:none;transition-duration:var(--spruce-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--spruce-timing-function)}.form-file:focus{outline-color:rgba(0,0,0,0);outline-style:solid}.form-file:disabled{opacity:.5;pointer-events:none}.form-file--sm::file-selector-button{--spruce-font-size: 0.8rem;--spruce-gap: 0.25rem;--spruce-icon-padding: 0.5em;--spruce-icon-size: 0.8rem;--spruce-padding: 0.5em 0.75em;font-size:var(--spruce-font-size);gap:var(--spruce-gap);padding:var(--spruce-padding)}.form-file--lg::file-selector-button{--spruce-font-size: 1.15rem;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.9em;--spruce-padding: 0.9em 1.15em}.form-file--block::file-selector-button{inline-size:100%}.form-file{display:block}.form-file:focus{outline:revert}.form-file:focus-within::file-selector-button{background-color:var(--spruce-btn-color-primary-background-hover)}.form-file::file-selector-button{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground);margin-inline-end:1rem}.form-file::file-selector-button:hover{background-color:var(--spruce-btn-color-primary-background-hover);border-color:var(--spruce-btn-color-primary-background-hover);color:var(--spruce-btn-color-primary-foreground)}.form-file::file-selector-button-shadow{box-shadow:0 .55em 1em -0.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -0.185em var(--spruce-btn-color-primary-shadow)}.form-label{color:var(--spruce-form-color-label);line-height:1.5;text-align:start}.form-control{--webkit-date-line-height: 1.375;--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-line-height: 1.5;--spruce-padding: 0.5em 0.75em;--spruce-textarea-block-size: 6rem;appearance:none;background-color:var(--spruce-form-color-background);border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:var(--spruce-border-radius);box-sizing:border-box;color:var(--spruce-form-color-text);display:block;font-size:var(--spruce-font-size);inline-size:100%;line-height:var(--spruce-line-height);padding:var(--spruce-padding);transition-duration:var(--spruce-duration);transition-property:border,box-shadow;transition-timing-function:var(--spruce-timing-function)}.form-control::placeholder{color:var(--spruce-form-color-placeholder)}.form-control::-webkit-datetime-edit{line-height:var(--webkit-date-line-height)}.form-control:focus{border-color:var(--spruce-form-color-border-focus);box-shadow:0 0 0 .25rem var(--spruce-form-color-ring-focus);outline:2px solid rgba(0,0,0,0)}.form-control[type=color]{--spruce-aspect-ratio: 1;--spruce-block-size: 100%;--spruce-inline-size: 2.625rem;--spruce-padding: 0.5em;aspect-ratio:var(--spruce-aspect-ratio);block-size:var(--spruce-block-size);inline-size:var(--spruce-inline-size);padding:var(--spruce-padding)}.form-control[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-control[type=color]::-moz-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.form-control[type=color]::-webkit-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.form-control[disabled],.form-control[disabled=true]{background-color:var(--spruce-form-color-background-disabled);border-color:var(--spruce-form-color-border-disabled);cursor:not-allowed}textarea.form-control{block-size:var(--spruce-textarea-block-size);min-block-size:var(--spruce-textarea-block-size);resize:vertical}.form-control--valid,.form-control--invalid{background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] .form-control--valid,html[dir=rtl] .form-control--invalid{background-position:center left .5em}.form-control--valid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:hsl%28150, 100%, 33%%29;"/%3e%3c/svg%3e');border-color:var(--spruce-alert-color-success)}.form-control--valid:focus{border-color:var(--spruce-form-color-valid);box-shadow:0 0 0 .25rem var(--spruce-form-color-valid-focus-ring);outline:2px solid rgba(0,0,0,0)}.form-control--invalid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:hsl%280, 71%, 51%%29;"/%3e%3c/svg%3e');border-color:var(--spruce-alert-color-danger)}.form-control--invalid:focus{border-color:var(--spruce-form-color-invalid);box-shadow:0 0 0 .25rem var(--spruce-form-color-invalid-focus-ring);outline:2px solid rgba(0,0,0,0)}.form-control--sm{--webkit-date-line-height: 1.36;--spruce-border-radius: 0.35em;--spruce-padding: 0.25em 0.75em}.form-control--sm[type=color]{--spruce-aspect-ratio: 1;--spruce-block-size: 100%;--spruce-inline-size: 1.925rem;--spruce-padding: 0.25em}.form-control--lg{--webkit-date-line-height: 1.387;--spruce-padding: 0.65em 1em}.form-control--lg[type=color]{--spruce-aspect-ratio: 1;--spruce-block-size: 100%;--spruce-inline-size: 3.204rem;--spruce-padding: 0.5em}select.form-control:not([multiple]):not([size]){background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28260, 70%, 6%%29;"/%3e%3c/svg%3e');background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] select.form-control:not([multiple]):not([size]){background-position:center left .5em}.form-check{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1.125rem;--spruce-line-height: 1.5;--spruce-margin-block: 0.1em;--spruce-vertical-alignment: center;align-items:var(--spruce-vertical-alignment);display:inline-flex;gap:.5rem}.form-check--vertical-center{align-items:center}.form-check--vertical-start{align-items:flex-start}.form-check--sm{--spruce-border-radius: 0.35em;--spruce-padding: 0.25em 0.75em}.form-check--sm .form-check__control{font-size:var(--spruce-font-size)}.form-check--lg{--spruce-padding: 0.65em 1em}.form-check__control{appearance:none;background-color:var(--spruce-form-color-background);background-position:center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--spruce-border-width) solid var(--spruce-form-color-border);flex-shrink:0;font-size:var(--spruce-font-size);inline-size:1em;line-height:1;margin-block:var(--spruce-margin-block);transition-duration:var(--spruce-duration);transition-property:border,box-shadow;transition-timing-function:var(--spruce-timing-function)}.form-check__control[type=radio]{border-radius:50%}.form-check__control[type=checkbox]{border-radius:var(--spruce-border-radius)}.form-check__control:focus-visible{outline:2px solid var(--spruce-form-color-check-focus-ring);outline-offset:2px}.form-check__control:checked{background-color:var(--spruce-form-color-check-background);border-color:var(--spruce-form-color-check-background)}.form-check__control:checked[type=radio]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:checked[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:indeterminate[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--spruce-form-color-check-background);border-color:var(--spruce-form-color-check-background)}.form-check__control:disabled,.form-check__control.disabled{background-color:var(--spruce-form-color-background-disabled);border-color:var(--spruce-form-color-border-disabled);cursor:not-allowed}.form-check__control:disabled+.form-check__label,.form-check__control.disabled+.form-check__label{opacity:.5}.form-check__label{line-height:var(--spruce-line-height)}.form-switch{--spruce-border-width: 1px;--spruce-font-size: 1.125rem;--spruce-line-height: 1.5;--spruce-margin-block: 0.15em;--spruce-vertical-alignment: center;align-items:var(--spruce-vertical-alignment);display:inline-flex;gap:.5rem}.form-switch--block{inline-size:100%;justify-content:space-between}.form-switch--vertical-center{align-items:center}.form-switch--vertical-start{align-items:flex-start}.form-switch--sm{--spruce-font-size: 1rem}.form-switch--lg{--spruce-font-size: clamp(1.15rem, 2vw, 1.35rem)}.form-switch__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%28260, 4%, 70%%29;"/%3e%3c/svg%3e');appearance:none;background-color:var(--spruce-form-color-background);background-position:left center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:2em;flex-shrink:0;font-size:var(--spruce-font-size);inline-size:2em;line-height:1;margin-block:var(--spruce-margin-block);transition-duration:var(--spruce-duration);transition-property:background-position,border,box-shadow;transition-timing-function:var(--spruce-timing-function)}.form-switch__control:checked{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--spruce-form-color-check-background);background-position:right center;border-color:var(--spruce-form-color-check-background)}.form-switch__control:disabled{background-color:var(--spruce-form-color-background-disabled);border-color:var(--spruce-form-color-border-disabled);cursor:not-allowed}.form-switch__control:disabled+.form-switch__label{opacity:.5}[dir=rtl] .form-switch__control{background-position:right center}[dir=rtl] .form-switch__control:checked{background-position:left center}.form-switch__label{line-height:var(--spruce-line-height)}fieldset{--spruce-layout-gap: 1rem;--spruce-legend-font-size: clamp(1rem, 5vw, 1.25rem);--spruce-legend-font-weight: 700;border:0;margin:0;padding:0}fieldset>*{margin-block-end:0;margin-block-start:0}fieldset>*+*{margin-block-start:var(--spruce-layout-gap)}fieldset+fieldset{margin-block-start:3rem}legend{color:var(--spruce-form-color-legend);font-size:var(--spruce-legend-font-size);font-weight:var(--spruce-legend-font-weight)}.form-group-label{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;align-items:center;background-color:var(--spruce-form-color-group-label-background);border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:var(--spruce-border-radius);color:var(--spruce-form-color-group-label-foreground);display:flex;padding-inline:1rem}.form-group{--spruce-gap: 0.5rem;display:flex;flex-direction:column;gap:var(--spruce-gap)}.form-group--horizontal-check{--spruce-gap: 1rem;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--spruce-gap)}.form-group--vertical-check{--spruce-gap: 1rem;align-items:start;flex-direction:column;gap:var(--spruce-gap)}.form-group--row{--spruce-container-inline-size: 38rem;--spruce-gap: 0.25rem 1rem;--spruce-label-inline-size: 10rem;--spruce-vertical-alignment: center;align-items:var(--spruce-vertical-alignment);display:grid;gap:var(--spruce-gap);grid-template-columns:minmax(0, 1fr)}.form-group--row\:vertical-center{align-items:center}.form-group--row\:vertical-start{align-items:flex-start}@container form-group-container (inline-size > 38rem){.form-group--row{grid-template-columns:minmax(0, var(--spruce-label-inline-size)) minmax(0, 1fr)}}@container form-group-container (inline-size > 38rem){.form-group--row .form-description,.form-group--row .field-feedback{grid-column-start:2}}.form-group--stacked{display:flex}.form-group--stacked>*+*{border-radius:0;margin-inline-start:-1px}.form-group--stacked>*:first-child{border-start-end-radius:0;border-start-start-radius:var(--spruce-border-radius);border-end-end-radius:0;border-end-start-radius:var(--spruce-border-radius)}.form-group--stacked>*:last-child{border-start-end-radius:var(--spruce-border-radius);border-start-start-radius:0;border-end-end-radius:var(--spruce-border-radius);border-end-start-radius:0}.form-group--stacked>*:only-child{border-radius:var(--spruce-border-radius)}.form-group--stacked>*:focus{z-index:2}.form-group-container{container:form-group-container/inline-size}.form-row--mixed{--inline-size: 20ch;display:flex;flex-wrap:wrap;gap:1rem}.form-row--mixed>*{flex:1 1 var(--inline-size)}.field-feedback{display:block;line-height:1.5}.field-feedback--valid{color:var(--spruce-alert-color-success)}.field-feedback--invalid{color:var(--spruce-alert-color-danger)}.form-range{--spruce-focus-ring-box-shadow-type: outside;--spruce-focus-ring-offset: 2px;--spruce-focus-ring-size: 2px;--spruce-focus-ring-type: outline;--spruce-thumb-block-size: 1rem;--spruce-thumb-border-radius: 0.5rem;--spruce-thumb-inline-size: 1rem;--spruce-track-block-size: 0.25rem;--spruce-track-border-radius: 0.15rem;appearance:none;margin-block-start:calc(var(--spruce-thumb-block-size)/2 - var(--spruce-track-block-size)/2)}.form-range:focus-visible{outline:none}.form-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--spruce-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range:focus-visible::-moz-range-thumb{outline:2px solid var(--spruce-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range::-webkit-slider-runnable-track{background-color:var(--spruce-form-color-range-track-background);block-size:var(--spruce-track-block-size);border-radius:var(--spruce-track-border-radius)}.form-range::-moz-range-track{background-color:var(--spruce-form-color-range-track-background);block-size:var(--spruce-track-block-size);border-radius:var(--spruce-track-border-radius)}.form-range::-webkit-slider-thumb{appearance:none;background-color:var(--spruce-form-color-range-thumb-background);block-size:var(--spruce-thumb-block-size);border-radius:var(--spruce-thumb-border-radius);inline-size:var(--spruce-thumb-inline-size);margin-block-start:calc(var(--spruce-track-block-size)/2 - var(--spruce-thumb-block-size)/2)}.form-range::-moz-range-thumb{background-color:var(--spruce-form-color-range-thumb-background);block-size:var(--spruce-thumb-block-size);border:0;border-radius:var(--spruce-thumb-border-radius);inline-size:var(--spruce-thumb-inline-size)}.form-range:disabled{cursor:not-allowed;opacity:.5}.form-description{--spruce-font-size: 1em;--spruce-font-weight: 400;color:var(--spruce-form-color-text);display:block;font-size:var(--spruce-font-size);font-weight:var(--spruce-font-weight);line-height:var(--spruce-line-height-md)}:root[data-theme-mode=dark]{--spruce-base-color-background: hsl(206, 100%, 7%);--spruce-base-color-blockquote-border: hsl(261, 54%, 70%);--spruce-base-color-border: hsla(0, 0%, 100%, 0.08);--spruce-base-color-code-background: hsl(207, 64%, 18%);--spruce-base-color-code-foreground: hsl(0, 0%, 95%);--spruce-base-color-code-tab-background: hsla(0, 0%, 0%, 0.15);--spruce-base-color-heading: hsl(0, 0%, 95%);--spruce-base-color-link: hsl(261, 54%, 70%);--spruce-base-color-link-hover: #b8a1e3;--spruce-base-color-mark-background: hsl(50, 100%, 80%);--spruce-base-color-mark-foreground: hsl(206, 100%, 7%);--spruce-base-color-marker: hsl(261, 54%, 70%);--spruce-base-color-primary: hsl(261, 54%, 70%);--spruce-base-color-secondary: hsl(227, 92%, 55%);--spruce-base-color-strong: hsl(0, 0%, 97%);--spruce-base-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--spruce-breadcrumb-color-separator: hsla(0, 0%, 100%, 0.1)}:root[data-theme-mode=dark]{--spruce-btn-color-discrete-background-hover: hsl(261, 52%, 59%);--spruce-btn-color-discrete-foreground: hsl(0, 0%, 100%);--spruce-btn-color-discrete-foreground-hover: hsl(0, 0%, 100%);--spruce-btn-color-install-background: hsl(207, 39%, 17%);--spruce-btn-color-install-background-hover: hsl(207, 23%, 26%);--spruce-btn-color-install-foreground: hsl(0, 0%, 100%);--spruce-btn-color-discrete-background: hsla(0, 0%, 96%, 0.1);--spruce-btn-color-primary-background: hsl(261, 52%, 59%);--spruce-btn-color-primary-background-hover: hsl(261, 52%, 65%);--spruce-btn-color-primary-foreground: hsl(0, 0%, 95%);--spruce-btn-color-primary-shadow: #6035b1;--spruce-btn-color-secondary-background: hsl(227, 92%, 55%);--spruce-btn-color-secondary-background-hover: #3b64f7;--spruce-btn-color-secondary-foreground: hsl(0, 0%, 95%);--spruce-btn-color-secondary-shadow: #072bab}:root[data-theme-mode=dark]{--spruce-form-color-background: #00223b;--spruce-form-color-background-disabled: hsl(206, 100%, 7%);--spruce-form-color-border: hsla(0, 0%, 100%, 0.08);--spruce-form-color-border-disabled: hsla(0, 0%, 100%, 0.08);--spruce-form-color-border-focus: hsl(261, 54%, 70%);--spruce-form-color-check-background: hsl(261, 54%, 70%);--spruce-form-color-check-focus-ring: hsl(261, 54%, 70%);--spruce-form-color-check-foreground: hsl(206, 100%, 7%);--spruce-form-color-invalid: hsl(0, 71%, 51%);--spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25);--spruce-form-color-label: hsl(0, 0%, 95%);--spruce-form-color-legend: hsl(0, 0%, 95%);--spruce-form-color-placeholder: hsl(0, 0%, 60%);--spruce-form-color-range-thumb-background: hsl(261, 54%, 70%);--spruce-form-color-range-thumb-focus-ring: hsl(261, 54%, 70%);--spruce-form-color-range-track-background: hsla(0, 0%, 100%, 0.08);--spruce-form-color-ring-focus: rgba(166, 137, 220, 0.25);--spruce-form-color-select-foreground: hsl(0, 0%, 100%);--spruce-form-color-text: hsl(0, 0%, 97%);--spruce-form-color-valid: hsl(150, 100%, 33%);--spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25)}:root[data-theme-mode=dark]{--spruce-hero-color-note-color: hsl(0, 0%, 100%);--spruce-hero-color-note-background: hsl(207, 64%, 16%);--spruce-hero-color-gradient-start: hsl(206, 100%, 6%);--spruce-hero-color-gradient-end: hsl(206, 100%, 7%)}:root[data-theme-mode=dark]{--spruce-ide-color-header-background: hsl(0, 0%, 0%)}:root[data-theme-mode=dark]{--spruce-navigation-color-icon-background: hsl(207, 23%, 26%);--spruce-navigation-color-icon-background-hover: hsl(207, 39%, 17%);--spruce-navigation-color-icon-foreground: hsl(0, 0%, 100%);--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%)}:root[data-theme-mode=dark]{--spruce-modal-color-background: hsla(206, 100%, 3%, 0.7)}:root[data-theme-mode=dark]{--spruce-prism-color-color: hsl(217, 34%, 88%);--spruce-prism-color-background: hsl(207, 83%, 10%);--spruce-prism-color-comment: hsl(180, 9%, 55%);--spruce-prism-color-punctuation: hsl(276, 68%, 75%);--spruce-prism-color-namespace: hsl(197, 31%, 77%);--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);--spruce-prism-color-boolean: hsl(350, 100%, 67%);--spruce-prism-color-number: hsl(14, 90%, 70%);--spruce-prism-color-constant: hsl(221, 100%, 75%);--spruce-prism-color-class-name: hsl(33, 100%, 77%);--spruce-prism-color-regex: hsl(217, 34%, 88%)}:root[data-theme-mode=dark]{--spruce-selection-color-background: hsl(261, 54%, 70%);--spruce-selection-color-foreground: hsl(0, 0%, 95%)}:root[data-theme-mode=dark]{--spruce-scrollbar-color-thumb-background: hsla(0, 0%, 100%, 0.15);--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, 0.25);--spruce-scrollbar-color-track-background: hsla(0, 0%, 100%, 0.05)}:root[data-theme-mode=dark]{--spruce-table-color-border: hsla(0, 0%, 100%, 0.08);--spruce-table-color-caption: hsl(0, 0%, 97%);--spruce-table-color-heading: hsl(0, 0%, 95%);--spruce-table-color-hover: hsla(0, 0%, 100%, 0.05);--spruce-table-color-text: hsl(0, 0%, 97%);--spruce-table-color-stripe: hsla(0, 0%, 100%, 0.025)}[data-theme-mode=dark]{color-scheme:dark}[data-theme-mode=dark] select.form-control:not([multiple]):not([size]){background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.skip-link{inset:-50vh auto auto 1.5rem;position:fixed}.skip-link:focus{inset-block-start:1.5rem}.site-navigation{font-family:var(--doc-body-font-family)}@media(min-width: 80em){.site-navigation__btn{display:none}}.site-navigation__btn[aria-expanded=true]+ul{display:flex}.site-navigation ul{background-color:var(--spruce-base-color-background);display:none;flex-direction:column;gap:1rem;inset:100% 0 auto;list-style:none;margin:0;padding-block:1.5rem;padding-inline:clamp(1.5rem,5vw,3rem);position:absolute}@media(min-width: 80em){.site-navigation ul{align-items:center;background-color:rgba(0,0,0,0);display:flex !important;flex-direction:row;flex-wrap:wrap;gap:clamp(1.5rem,5vw,3rem);inset:auto;padding:0;position:relative}}.site-navigation li{margin-block:0}.site-navigation a{align-items:center;color:var(--spruce-base-color-heading);display:flex;gap:.5rem;text-decoration:none}.site-navigation a:hover{color:var(--spruce-base-color-primary)}.site-navigation a[aria-current=page]{color:var(--spruce-base-color-primary);font-weight:700}.cookie-consent-helper{display:flex;inset:auto 1.5rem 1.5rem 1.5rem;justify-content:center;pointer-events:none;position:fixed;z-index:25}.cookie-consent{--spruce-base-color-text:hsl(0, 0%, 97%);--spruce-base-color-link:hsl(261, 54%, 70%);--spruce-base-color-link-hover:#b8a1e3;align-items:center;background-color:#0c051a;border-radius:var(--spruce-border-radius-lg);box-shadow:0 0 3rem rgba(0,0,0,.1);color:var(--spruce-base-color-text);display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:center;padding:1rem;pointer-events:all;text-align:center;transform:translateY(200%)}.cookie-consent--slidein{animation:slidein var(--spruce-duration) forwards}.cookie-consent--slideout{animation:slideout var(--spruce-duration) forwards}.cookie-consent__caption>*{margin-block-end:0;margin-block-start:0}.cookie-consent__caption>*+*{margin-block-start:.5rem}.cookie-consent__btns{display:flex;gap:1rem}@keyframes slidein{from{transform:translateY(200%)}to{transform:translateY(0)}}@keyframes slideout{from{transform:translateY(0)}to{transform:translateY(200%)}}.theme-switcher{color:var(--spruce-base-color-text);display:inline-flex;position:relative}.theme-switcher[data-theme-mode=system] .theme-switcher__system-mode{display:flex}.theme-switcher[data-theme-mode=light] .theme-switcher__light-mode{display:flex}.theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode{display:flex}.theme-switcher button{display:none}.theme-switcher button>*{pointer-events:none}.heading{margin-block-end:3rem}.heading>*{margin-block-end:0;margin-block-start:0}.heading>*+*{margin-block-start:.5rem}.heading--center{text-align:center}.heading--center .heading__description{margin-inline:auto}.heading__title{font-size:clamp(2.1rem,2vw + 1rem,3rem)}.heading__description{font-size:clamp(1rem,0.5rem + 1vw,1.25rem);line-height:var(--spruce-line-height-md);max-inline-size:50ch}.breadcrumb-list{list-style:none;margin:0;padding:0;align-items:center;display:flex;max-inline-size:100%;overflow-x:auto;white-space:nowrap}.breadcrumb-list>li{align-items:center;display:inline-flex;margin-block:0}.breadcrumb-list>li+li::before{block-size:.4em;border-block-end:2px solid var(--spruce-breadcrumb-color-separator);border-inline-end:2px solid var(--spruce-breadcrumb-color-separator);content:"";display:inline-flex;inline-size:.4em;margin-inline:.75em;transform:rotate(-45deg)}[dir=rtl] .breadcrumb-list>li+li::before{transform:rotate(45deg)}.breadcrumb-list [aria-current=page]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-inline-size:20ch;text-align:start}.accordion-list>*{margin-block-end:0;margin-block-start:0}.accordion-list>*+*{margin-block-start:1rem}.getting-started-card{position:relative;align-items:flex-start;background-color:var(--spruce-base-color-background);border-radius:var(--spruce-border-radius-lg);display:flex;gap:1.5rem}.getting-started-card__link::before{content:"";inset:0;position:absolute}.getting-started-card__caption>*{margin-block-end:0;margin-block-start:0}.getting-started-card__caption>*+*{margin-block-start:.5rem}.getting-started-card picture{--size: 5rem;block-size:var(--size);flex-shrink:0;inline-size:var(--size)}.getting-started-card__link{font-size:var(--spruce-font-size-sm);font-weight:700;text-decoration:none;text-transform:uppercase}.accordion-card{background-color:var(--spruce-base-color-background);border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-lg)}.accordion-card__title{font-size:clamp(1.0625rem,2vw + 1rem,1.25rem);margin-block:0;padding:1.5rem}.accordion-card__title:has(.accordion-card__toggle){padding:0}.accordion-card__toggle{background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;align-items:center;display:flex;gap:1.5rem;inline-size:100%;justify-content:space-between;padding:1.5rem;text-align:start}.accordion-card__toggle:focus-visible .accordion-card__icon{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.accordion-card__toggle[aria-expanded=true] svg{rotate:90deg}.accordion-card__toggle[aria-expanded=true] .horizontal-line{opacity:0}.accordion-card__icon{--size: 1.75rem;align-items:center;background-color:var(--spruce-btn-color-primary-background);block-size:var(--size);border-radius:var(--spruce-border-radius-sm);color:var(--spruce-btn-color-primary-foreground);display:flex;flex-shrink:0;inline-size:var(--size);justify-content:center}.accordion-card__icon svg{--size: 1.25rem;transition-duration:var(--spruce-duration);transition-property:all;transition-timing-function:var(--spruce-timing-function);block-size:var(--size);inline-size:var(--size)}.accordion-card__icon .horizontal-line{transition-duration:var(--spruce-duration);transition-property:all;transition-timing-function:var(--spruce-timing-function)}.accordion-card__content{transition-duration:var(--spruce-duration);transition-property:grid-template-rows;transition-timing-function:var(--spruce-timing-function);display:grid;padding-inline:1.5rem}.accordion-card__content[aria-hidden=true]{grid-template-rows:0fr}.accordion-card__content[aria-hidden=false]{grid-template-rows:1fr;padding-block-end:1.5rem}.accordion-card__content>div{overflow:hidden}.accordion-card__content>div>*{margin-block-end:0;margin-block-start:0}.accordion-card__content>div>*+*{margin-block-start:.5rem}.accordion-card__content>div *+h2,.accordion-card__content>div *+h3,.accordion-card__content>div *+h4,.accordion-card__content>div *+h5{margin-block-start:1rem}.blog-card{position:relative}.blog-card__link::before{content:"";inset:0;position:absolute}.blog-card>*{margin-block-end:0;margin-block-start:0}.blog-card>*+*{margin-block-start:1rem}.blog-card picture,.blog-card img{border-radius:var(--doc-border-radius-sm)}.blog-card__meta{column-gap:1.5rem;display:flex;flex-wrap:wrap;row-gap:.5rem}.blog-card__meta a{position:relative;z-index:10}.blog-card__title{font-size:clamp(1.328125rem,2vw + 1rem,1.5625rem);margin-block-start:.5rem}.blog-card__link{color:var(--spruce-base-color-heading);text-decoration:none}.blog-card__link:hover,.blog-card__link:focus{color:var(--spruce-base-color-heading)}.blog-card .tags__title{block-size:1px !important;border:0 !important;clip:rect(0, 0, 0, 0) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.template-card{position:relative}.template-card__link::before{content:"";inset:0;position:absolute}.template-card>*{margin-block-end:0;margin-block-start:0}.template-card>*+*{margin-block-start:.5rem}.template-card__title{font-size:clamp(1.875rem,2vw + 1rem,2.5rem);margin-block-start:2rem}.template-card__link{color:var(--spruce-base-color-heading);text-decoration:none}.template-card__link:hover,.template-card__link:focus{color:var(--spruce-base-color-heading)}.template-card__description{font-size:clamp(0.99rem,1vw + 0.55rem,1.2rem)}.template-card__meta{column-gap:1.5rem;display:flex;flex-wrap:wrap;margin-block-start:1rem;row-gap:.5rem}.template-card__tags{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.color-card{align-items:start;display:flex;gap:1.5rem}.color-card--bordered .color-card__color{box-shadow:0 0 0 1px var(--spruce-base-color-border) inset}.color-card__color{block-size:3rem;border-radius:var(--spruce-border-radius-lg);flex-shrink:0;inline-size:3rem}.color-card__caption{display:flex;flex-direction:column;line-height:var(--spruce-line-height-md)}.color-card__name{color:var(--spruce-base-color-heading);font-weight:700}.color-card__value{font-weight:300}.post-author{--avatar-size: 2.5rem;align-items:center;display:flex;gap:.5rem;text-decoration:none}.post-author__avatar{block-size:var(--avatar-size);border-radius:calc(var(--avatar-size)/2);inline-size:var(--avatar-size)}.post-author__name{color:var(--spruce-base-color-text)}.text-btn{align-items:center;display:inline-flex;gap:.25rem;line-height:1}.text-btn__icon{--dimension: 0.65em;block-size:var(--dimension);inline-size:var(--dimension)}.form-group-wrapper>*{margin-block-end:0;margin-block-start:0}.form-group-wrapper>*+*{margin-block-start:1rem}.pagination a{--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-font-weight: 500;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.75em;--spruce-icon-size: 1em;--spruce-padding: 0.75em 1em;--spruce-shadow-size: 0.25rem;align-items:center;border-radius:var(--spruce-border-radius);border-style:solid;border-width:var(--spruce-border-width);cursor:pointer;display:inline-flex;font-size:var(--spruce-font-size);font-weight:var(--spruce-font-weight);gap:var(--spruce-gap);justify-content:center;line-height:1;padding:var(--spruce-padding);text-align:start;text-decoration:none;transition-duration:var(--spruce-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--spruce-timing-function)}.pagination a:focus{outline-color:rgba(0,0,0,0);outline-style:solid}.pagination a:disabled{opacity:.5;pointer-events:none}.pagination a--sm{--spruce-font-size: 0.8rem;--spruce-gap: 0.25rem;--spruce-icon-padding: 0.5em;--spruce-icon-size: 0.8rem;--spruce-padding: 0.5em 0.75em;font-size:var(--spruce-font-size);gap:var(--spruce-gap);padding:var(--spruce-padding)}.pagination a--lg{--spruce-font-size: 1.15rem;--spruce-gap: 0.5rem;--spruce-icon-padding: 0.9em;--spruce-padding: 0.9em 1.15em}.pagination a--block{inline-size:100%}.pagination{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-block-start:3rem}.pagination>*+*{margin-block-start:0}.pagination a{background-color:var(--spruce-btn-color-pagination-background);border-color:var(--spruce-btn-color-pagination-background);color:var(--spruce-btn-color-pagination-foreground);--spruce-padding:1em 1.25em;border-radius:var(--doc-border-radius-md);font-size:.91375rem;font-weight:700;text-transform:uppercase}.pagination a:focus-visible{outline:2px solid var(--spruce-btn-color-pagination-focus-ring);outline-offset:2px}.pagination a:hover{background-color:var(--spruce-btn-color-pagination-background-hover);border-color:var(--spruce-btn-color-pagination-background-hover);color:var(--spruce-btn-color-pagination-foreground-hover)}.pagination a[aria-current=page]{background:var(--spruce-btn-color-pagination-background-hover);border-color:var(--spruce-btn-color-pagination-background-hover);color:var(--spruce-btn-color-pagination-foreground-hover)}.pagination a--sm{min-inline-size:1.75rem}.pagefind-ui__search-input{--webkit-date-line-height: 1.375;--spruce-border-radius: 0.425rem;--spruce-border-width: 1px;--spruce-font-size: 1rem;--spruce-line-height: 1.5;--spruce-padding: 0.5em 0.75em;--spruce-textarea-block-size: 6rem;appearance:none;background-color:var(--spruce-form-color-background);border:var(--spruce-border-width) solid var(--spruce-form-color-border);border-radius:var(--spruce-border-radius);box-sizing:border-box;color:var(--spruce-form-color-text);display:block;font-size:var(--spruce-font-size);inline-size:100%;line-height:var(--spruce-line-height);padding:var(--spruce-padding);transition-duration:var(--spruce-duration);transition-property:border,box-shadow;transition-timing-function:var(--spruce-timing-function)}.pagefind-ui__search-input::placeholder{color:var(--spruce-form-color-placeholder)}.pagefind-ui__search-input::-webkit-datetime-edit{line-height:var(--webkit-date-line-height)}.pagefind-ui__search-input:focus{border-color:var(--spruce-form-color-border-focus);box-shadow:0 0 0 .25rem var(--spruce-form-color-ring-focus);outline:2px solid rgba(0,0,0,0)}.pagefind-ui__search-input[type=color]{--spruce-aspect-ratio: 1;--spruce-block-size: 100%;--spruce-inline-size: 2.625rem;--spruce-padding: 0.5em;aspect-ratio:var(--spruce-aspect-ratio);block-size:var(--spruce-block-size);inline-size:var(--spruce-inline-size);padding:var(--spruce-padding)}.pagefind-ui__search-input[type=color]::-webkit-color-swatch-wrapper{padding:0}.pagefind-ui__search-input[type=color]::-moz-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.pagefind-ui__search-input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--spruce-border-radius)}.pagefind-ui__search-input[disabled],.pagefind-ui__search-input[disabled=true]{background-color:var(--spruce-form-color-background-disabled);border-color:var(--spruce-form-color-border-disabled);cursor:not-allowed}textarea.pagefind-ui__search-input{block-size:var(--spruce-textarea-block-size);min-block-size:var(--spruce-textarea-block-size);resize:vertical}.pagefind-ui{position:relative}.pagefind-ui__search-input{border:0;border-block-end:1px solid var(--spruce-base-color-border);border-end-end-radius:0;border-end-start-radius:0;padding:1rem 4.5rem 1rem 2.75rem !important}.pagefind-ui__search-input:focus{border-block-end:1px solid var(--spruce-base-color-border);box-shadow:none}.pagefind-ui__form>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__form>*+*{margin-block-start:1.5rem}.pagefind-ui__form::before{--size: 1em;background-image:url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3e%3cpath d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z" style="fill:hsl%28259, 53%, 94%%29;"/%3e%3c/svg%3e');background-size:var(--size);block-size:var(--size);content:"";display:inline-flex;inline-size:var(--size);inset:1.25em auto auto 1rem;position:absolute}.pagefind-ui__search-clear{background:none;border:0;font-size:.7rem;font-weight:700;inset-block-start:2em;inset-inline-end:1rem;margin-block-start:0;position:absolute;text-transform:uppercase}.pagefind-ui__drawer{margin:1rem 1rem 1.5rem;max-block-size:20rem;overflow-y:auto;padding-inline:1rem}.pagefind-ui__drawer::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.pagefind-ui__drawer::-webkit-scrollbar-thumb{background:var(--spruce-scrollbar-color-thumb-background);border-radius:var(--spruce-border-radius-sm)}.pagefind-ui__drawer::-webkit-scrollbar-thumb:hover{background:var(--spruce-scrollbar-color-thumb-background-hover)}.pagefind-ui__drawer::-webkit-scrollbar-track{background:var(--spruce-scrollbar-color-track-background);border-radius:var(--spruce-border-radius-sm)}.pagefind-ui__results{list-style:none;margin:0;padding:0;padding-inline-end:1.5rem}.pagefind-ui__results>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__results>*+*{margin-block-start:1rem}.pagefind-ui__results:empty{display:none}.pagefind-ui__results-area>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__results-area>*+*{margin-block-start:.5rem}.pagefind-ui__result-inner>*{margin-block-end:0;margin-block-start:0}.pagefind-ui__result-inner>*+*{margin-block-start:.25rem}.pagefind-ui__result-title{font-weight:700}.pagefind-ui__button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;color:var(--spruce-base-color-link);margin-block-start:1rem;text-decoration:underline}.pagefind-ui__button:hover,.pagefind-ui__button:focus{color:var(--spruce-base-color-link-hover)}.pagefind-ui__hidden{align-items:center;display:flex;justify-content:center;margin-block-start:0;min-block-size:10rem}.pagefind-ui__hidden::before{content:"No recent searches"}.modal-backdrop{align-items:start;backdrop-filter:blur(0.15rem);background-color:var(--spruce-modal-color-background);display:none;inset:0;justify-content:center;overflow-y:auto;padding:1rem;position:fixed;z-index:25}.modal-backdrop--open{display:flex}.modal{background-color:var(--spruce-base-color-background);border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);box-shadow:0 0 .25rem rgba(23,101,143,.05);inline-size:40rem;margin-block:7rem;margin-inline:auto;max-inline-size:100%;outline:0;position:relative}.template-preview{background-color:#f7f7f7;border-radius:var(--doc-border-radius-sm);display:flex;padding:clamp(1rem,5vw,2rem)}.template-preview img{border-radius:var(--doc-border-radius-sm);box-shadow:0 0 1.25rem rgba(0,0,0,.05)}.template-tag{background-color:var(--spruce-btn-color-dark-background);border-radius:var(--spruce-border-radius-sm);color:var(--spruce-btn-color-dark-foreground);font-size:var(--spruce-font-size-sm);font-weight:700;padding:.25rem 1rem;text-transform:uppercase}.template-tag--free{background-color:#dbffed;color:#005c2e}.template-actions{--columns: 1;display:grid;gap:1.5rem;grid-template-columns:repeat(var(--columns), minmax(0, 1fr))}@media(min-width: 64em){.template-actions{--columns: 2}}.template-meta{list-style:none;margin:0;padding:0;border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);padding:1.5rem}.template-meta>*+*{border-block-start:1px dashed var(--spruce-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.template-meta__item{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}.template-meta__item--tags{justify-content:end}.template-meta__item strong{color:var(--spruce-base-color-heading)}.notification{border-radius:var(--spruce-border-radius-sm);display:block;font-size:1rem;padding:1rem 1.5rem;position:relative}.notification code,.notification kbd,.notification samp{border:1px solid}.notification--info{background-color:rgba(0,161,214,.1);border-block-start:.5rem solid var(--spruce-alert-color-info)}.notification--info .notification__icon{color:var(--spruce-alert-color-info)}.notification--info code,.notification--info kbd,.notification--info samp{border-color:rgba(0,161,214,.5)}.notification--good{background-color:rgba(0,168,84,.1);border-block-start:.5rem solid var(--spruce-alert-color-success)}.notification--good .notification__icon{color:var(--spruce-alert-color-success)}.notification--good code,.notification--good kbd,.notification--good samp{border-color:rgba(0,168,84,.5)}.notification--bad{background-color:rgba(219,41,41,.1);border-block-start:.5rem solid var(--spruce-alert-color-danger)}.notification--bad .notification__icon{color:var(--spruce-alert-color-danger)}.notification--bad code,.notification--bad kbd,.notification--bad samp{border-color:rgba(219,41,41,.5)}.notification__content>*{margin-block-end:0;margin-block-start:0}.notification__content>*+*{margin-block-start:.25rem}.notification__icon{background-color:var(--spruce-base-color-background);block-size:2rem;border:4px solid var(--spruce-base-color-background);border-radius:1rem;inline-size:2rem;inset:calc(-1rem - 4px) -1rem auto auto;position:absolute}.open-search{position:relative;align-items:center;display:none;gap:.5rem}.open-search__btn::before{content:"";inset:0;position:absolute}@media(min-width: 80em){.open-search{display:flex}}.open-search__icon{--size: 1rem;block-size:var(--size);color:var(--spruce-search-color-icon);inline-size:var(--size)}.tags{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.tags__title{margin-block:0}.tags__list{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.tags__list>*+*{margin-block-start:0}.ide-wrapper{margin-inline:auto;max-inline-size:74rem;padding-block-end:var(--spruce-section-gap)}.ide{background-color:var(--spruce-base-color-background);border:1px solid var(--spruce-base-color-border);border-radius:var(--doc-border-radius-md);box-shadow:0 0 3rem rgba(0,0,0,.1);font-size:.9375rem;margin-inline:auto}.ide__header{align-items:center;background-color:var(--spruce-ide-color-header-background);border-block-end:1px solid var(--spruce-base-color-border);border-radius:var(--doc-border-radius-md) var(--doc-border-radius-md) 0 0;display:flex;gap:1rem;padding:.45rem 1.25rem}.ide__controls{display:flex;gap:.5rem}.ide__control{--dimension: 0.75rem;block-size:var(--dimension);border-radius:50%;inline-size:var(--dimension)}.ide__inner{display:grid;grid-template-columns:minmax(0, 1fr);overflow:hidden;position:relative}@media(min-width: 64em){.ide__inner{grid-template-columns:minmax(0, 16.5rem) minmax(0, 1fr)}}.ide__toggle{border-end-start-radius:0 !important;border-start-end-radius:0 !important;inset:auto 0 0 auto;position:absolute}@media(min-width: 64em){.ide__toggle{display:none;position:relative}}.ide__sidebar{background-color:var(--spruce-base-color-background);border-end-end-radius:var(--doc-border-radius-md);border-end-start-radius:var(--doc-border-radius-md);inset:0 0 0 auto;position:absolute;z-index:2}@media(min-width: 64em){.ide__sidebar{border-end-end-radius:0;position:relative}}.ide__sidebar-helper{block-size:100%;overflow-y:auto;padding:2rem}.ide__sidebar-helper>*{margin-block-end:0;margin-block-start:0}.ide__sidebar-helper>*+*{margin-block-start:1rem}@media(min-width: 64em){.ide__sidebar-helper{display:block !important}}.ide__editor,.ide__editor>pre,.ide__editor>pre>code{block-size:100%;border-end-start-radius:var(--doc-border-radius-md);margin-block:0;max-block-size:28rem}@media(min-width: 64em){.ide__editor,.ide__editor>pre,.ide__editor>pre>code{border-end-start-radius:0}}.ide pre[class*=language-]{border-radius:0 0 var(--doc-border-radius-md);padding:2rem 2.25rem}.ide-section{display:flex;flex-direction:column;gap:.85em}.ide-section__title{align-items:center;display:flex;font-size:.9375rem;font-weight:700;gap:.5rem;line-height:1;margin-block:0}.ide-section__title svg{--dimension: 0.9rem;block-size:var(--dimension);color:#42a5f5;flex-shrink:0;inline-size:var(--dimension)}.ide-section__list{list-style:none;margin:0;padding:0}.ide-section__list>*{margin-block-end:0;margin-block-start:0}.ide-section__list>*+*{margin-block-start:.85em}.ide-section__list--border{border-inline-start:1px solid var(--spruce-base-color-border);margin-inline-start:.5rem;padding-inline-start:1rem}.ide-section button{align-items:center;background:none;border:0;cursor:pointer;display:flex;font-family:var(--doc-heading-font-family);gap:.5rem;line-height:1;padding:0;text-align:start}.ide-section button svg{--dimension: 0.85rem;block-size:var(--dimension);color:#cf6399;flex-shrink:0;inline-size:var(--dimension)}.ide-section .active{color:var(--spruce-base-color-heading);font-weight:700}.code-tab{border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);overflow:hidden}.code-tab__header{align-items:center;background-color:var(--spruce-base-color-code-tab-background);border-block-end:1px solid var(--spruce-base-color-border);border-start-end-radius:var(--spruce-border-radius-sm);border-start-start-radius:var(--spruce-border-radius-sm);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding:1rem}.code-tab__header .copy-btn>span{display:inline-flex}.code-tab__title{color:var(--spruce-base-color-heading);font-family:var(--spruce-font-family-heading);font-size:1rem;font-weight:var(--spruce-font-weight-heading);line-height:var(--spruce-line-height-heading);margin-block:0}.code-tab__open-new{align-items:center;display:flex;font-size:var(--spruce-font-size-sm);gap:.5rem;line-height:1}.code-tab__open-new svg{block-size:.85em;inline-size:.85em}.code-tab__group{list-style:none;margin:0;padding:0;align-items:center;display:flex;flex-wrap:wrap;gap:.25rem .5rem}.code-tab__group>*+*{margin-block-start:0}.code-tab__group--title{gap:.25rem 1rem}@media(min-width: 48em){.code-tab__group--tabs{margin-inline-start:auto}}.code-tab__group--tabs li{display:inline-flex}.code-tab__body [class^=language-]{margin-block:0;max-block-size:40rem}.code-tab__body iframe{border:0}.preview{border:1px solid var(--spruce-base-color-border);border-radius:var(--spruce-border-radius-sm);font-size:1rem;padding:1.5rem}.preview>*{margin-block-end:0;margin-block-start:0}.preview>*+*{margin-block-start:1.5rem !important}.preview>*{font-family:var(--spruce-font-family-base)}.preview ul>li>p{margin-block:0}.button-grid{align-items:flex-start;display:flex;gap:1.5rem}.button-grid--stacked{flex-wrap:wrap}.inline-text-element-list{list-style:none;margin:0;padding:0}.inline-text-element-list>*{margin-block-end:0;margin-block-start:0}.inline-text-element-list>*+*{margin-block-start:1rem}@media(min-width: 48em){.inline-text-element-list{column-gap:3rem;columns:2 auto}}.sidebar-section__title{color:var(--spruce-base-color-heading);font-size:var(--spruce-font-size-base);margin-block:0}.sidebar-section__navigation{border-inline-start:1px solid var(--spruce-base-color-border);font-size:1rem;margin-block-start:1rem;padding-inline-start:1rem}.sidebar-section__navigation ul{list-style:none;margin:0;padding:0}.sidebar-section__navigation ul>*{margin-block-end:0;margin-block-start:0}.sidebar-section__navigation ul>*+*{margin-block-start:.65rem}.sidebar-section__navigation li{line-height:var(--spruce-line-height-md)}.sidebar-section__navigation a{color:var(--spruce-base-color-text);text-decoration:none}.sidebar-section__navigation a[data-state=active]{color:var(--spruce-base-color-heading);font-weight:700;position:relative}.sidebar-section__navigation a[data-state=active]::before{background-color:var(--spruce-base-color-primary);border-radius:0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm) 0;content:"";inline-size:.3rem;inset-block:0;inset-inline-start:-1rem;position:absolute}@media(min-width: 80em){.toc{max-block-size:calc(100vh - 4rem);overflow-x:hidden;overflow-y:auto}.toc::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.toc::-webkit-scrollbar-thumb{background:var(--spruce-scrollbar-color-thumb-background);border-radius:var(--spruce-border-radius-sm)}.toc::-webkit-scrollbar-thumb:hover{background:var(--spruce-scrollbar-color-thumb-background-hover)}.toc::-webkit-scrollbar-track{background:var(--spruce-scrollbar-color-track-background);border-radius:var(--spruce-border-radius-sm)}}.toc__title{color:var(--spruce-base-color-heading);font-size:var(--spruce-font-size-base);margin-block:0}.toc__navigation{border-inline-start:1px solid var(--spruce-base-color-border);margin-block-start:1rem;padding-inline-start:1rem}.toc__navigation ol{list-style:none;margin:0;padding:0;max-inline-size:95%}.toc__navigation ol>*{margin-block-end:0;margin-block-start:0}.toc__navigation ol>*+*{margin-block-start:.5rem}.toc__navigation .toc-level-h3 a{padding-inline-start:1rem}.toc__navigation a{color:var(--spruce-base-color-text);display:inline-flex;line-height:var(--spruce-line-height-md);text-decoration:none}.toc__navigation a:hover{color:var(--spruce-base-color-primary)}.toc__navigation .active{color:var(--spruce-base-color-heading);font-weight:700;position:relative}.toc__navigation .active::before{background-color:var(--spruce-base-color-primary);border-radius:0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm) 0;content:"";inline-size:.3rem;inset-block:0;inset-inline-start:-1rem;position:absolute}.post-navigation{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}.post-navigation-item{align-items:center;display:flex;gap:1rem;text-decoration:none}.post-navigation-item:hover .post-navigation-item__icon{background-color:var(--spruce-navigation-color-icon-background-hover);color:var(--spruce-navigation-color-icon-foreground-hover)}.post-navigation-item--next{margin-inline-start:auto;text-align:end}.post-navigation-item__icon{transition-duration:var(--spruce-duration);transition-property:all;transition-timing-function:var(--spruce-timing-function);align-items:center;background-color:var(--spruce-navigation-color-icon-background);block-size:3rem;border-radius:var(--doc-border-radius-md);color:var(--spruce-navigation-color-icon-foreground);display:flex;flex-shrink:0;inline-size:3rem;justify-content:center}.post-navigation-item__icon svg{--size: 1.15rem;block-size:var(--size);inline-size:var(--size)}[dir=rtl] .post-navigation-item__icon svg{transform:rotate(180deg)}.post-navigation-item__caption{color:var(--spruce-base-color-text);line-height:var(--spruce-line-height-md)}.post-navigation-item__title{color:var(--spruce-base-color-primary);display:flex;font-weight:700}code[class*=language-],pre[class*=language-]{border-radius:var(--spruce-border-radius-sm);color:var(--spruce-prism-color-color);font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:.9375rem;hyphens:none;line-height:1.5;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{display:grid;overflow:auto;padding:1.5rem}pre[class*=language-] code{background-color:rgba(0,0,0,0);padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--spruce-prism-color-background);overflow-x:auto}.token.comment,.token.prolog,.token.cdata{color:var(--spruce-prism-color-comment);font-style:italic}.token.punctuation{color:var(--spruce-prism-color-punctuation)}.namespace{color:var(--spruce-prism-color-namespace)}.token.deleted{color:var(--spruce-prism-color-deleted);font-style:italic}.token.symbol,.token.operator,.token.keyword,.token.property{color:var(--spruce-prism-color-namespace)}.token.tag{color:var(--spruce-prism-color-punctuation)}.token.boolean{color:var(--spruce-prism-color-boolean)}.token.number{color:var(--spruce-prism-color-number)}.token.constant,.token.builtin,.token.string,.token.url,.token.entity,.language-css .token.string,.style .token.string,.token.char{color:var(--spruce-prism-color-constant)}.token.selector,.token.function,.token.doctype{color:var(--spruce-prism-color-punctuation);font-style:italic}.token.attr-name,.token.inserted{color:var(--spruce-prism-color-constant);font-style:italic}.token.class-name,.token.atrule{color:var(--spruce-prism-color-class-name)}.token.regex,.token.important,.token.variable{color:var(--spruce-prism-color-regex)}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.anchor-heading{align-items:center;display:flex;gap:1rem;justify-content:space-between;position:relative}.anchor-heading:hover .anchor-heading__link,.anchor-heading:focus-within .anchor-heading__link{opacity:1}.anchor-heading h2,.anchor-heading h3{margin-block:0}.anchor-heading__link{transition-duration:var(--spruce-duration);transition-property:all;transition-timing-function:var(--spruce-timing-function);display:inline-flex;flex-shrink:0;opacity:0}.anchor-heading__link svg{--size: 0.65em;block-size:var(--size);inline-size:var(--size)}.site-header{position:relative;z-index:10}.site-header__inner{--block-size: 5rem;align-items:center;block-size:var(--block-size);display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,3rem);justify-content:space-between}@media(min-width: 64em){.site-header__inner{--block-size: 6rem}}.site-header__logo{align-items:center;display:flex}.site-header__logo a{display:inline-flex}.site-header__logo svg{block-size:1.725rem;bottom:-0.1em;inline-size:auto;position:relative}.site-header__logo--ui svg{block-size:2.1rem}.site-header__column{align-items:center;display:flex;flex-grow:1;gap:clamp(1rem,5vw,3rem)}.site-header__actions{display:flex;gap:1rem}@media(min-width: 80em){.site-header__actions{gap:3rem}}.site-header__socials{display:flex;gap:1rem}.site-header__socials .btn:last-child{display:none}@media(min-width: 64em){.site-header__socials .btn:last-child{display:inline-flex}}@media(min-width: 80em){.site-header__search-btn{display:none}}.site-header__navigation{margin-inline-start:auto}@media(min-width: 80em){.site-header__navigation{margin-inline-start:0}}.site-header__navigation ul{border-block-start:1px solid var(--spruce-base-color-border)}@media(min-width: 80em){.site-header__navigation ul{border-block-start:none}}.hero-wrapper{background:linear-gradient(0deg, var(--spruce-hero-color-gradient-start) 0%, var(--spruce-hero-color-gradient-end) 100%)}.hero__caption{margin-inline:auto;max-inline-size:52rem;padding-block:var(--spruce-section-gap-half);text-align:center}@media(min-width: 64em){.hero__caption{padding-block:calc(var(--spruce-section-gap-half)/1.25) var(--spruce-section-gap-half)}}.hero__note{background-color:var(--spruce-hero-color-note-background);border-radius:var(--spruce-border-radius-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--spruce-hero-color-note-color);display:inline;font-size:1rem;isolation:isolate;line-height:var(--spruce-line-height-md);padding:.5em .8em .5em .65em;text-decoration:none}.hero__note:hover,.hero__note:focus{color:var(--spruce-hero-color-note-color)}.hero__note svg{--size: 1em;block-size:var(--size);color:#ffbf00;inline-size:var(--size);inset-block-end:-0.15em;position:relative}.hero__note+*{margin-block-start:1.5rem !important}.hero__title{font-size:clamp(2.75rem,4vw + 1rem,5rem);font-weight:400;letter-spacing:-0.035em;margin-block:0;margin-inline:auto;max-inline-size:15ch;text-wrap:balance}.hero__title span{font-weight:700}.hero__description{font-size:clamp(0.945rem,1vw + 0.85rem,1.35rem);margin-block:1.25rem 0;margin-inline:auto;max-inline-size:45ch}.hero__btns{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:2.15rem}.post-heading{align-items:center;display:grid;gap:1rem;grid-template-columns:minmax(0, 1fr);justify-content:center;padding-block:clamp(3rem,10vw,5rem) clamp(4.5rem,10vw,7rem);text-align:center}@media(min-width: 64em){.post-heading{grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);justify-content:flex-start;text-align:start}}.post-heading--center{grid-template-columns:minmax(0, 1fr);justify-content:center;padding-block:clamp(5rem,10vw + 1rem,7rem) 4.5rem;text-align:center}.post-heading--center .breadcrumb-list{margin-inline:auto}.post-heading--center .post-heading__title{font-size:clamp(2.55rem,4vw + 1rem,4.25rem);margin-inline:auto}.post-heading--center .post-heading__description{margin-inline:auto}.post-heading__title{font-size:clamp(2.4rem,4vw + 1rem,4rem);letter-spacing:-2px;line-height:1;margin-block:0;margin-inline:auto;max-inline-size:20ch;text-wrap:balance}@media(min-width: 64em){.post-heading__title{margin-inline:0}}.post-heading__breadcrumb{display:flex;margin-block-start:1rem}.post-heading__description{font-size:clamp(0.875rem,1vw + 0.75rem,1.25rem);margin:1.5rem 0 0;margin-block:0;margin-inline:auto;max-inline-size:50ch;text-wrap:balance}@media(min-width: 64em){.post-heading__description{margin-inline:0}}.post-heading__meta{align-items:center;column-gap:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;margin-block-start:3rem;row-gap:.5rem}.post-content>*{margin-block-end:0;margin-block-start:0}.post-content>*+*{margin-block-start:1.5rem}@media(min-width: 64em){.post-content{font-size:1.0375rem}}.post-content--blog :is(dd,dl,dl,h1,h2,h3,h4,h5,h6,hr,ul,ol,p:not(p:has(img)),blockquote,form,pre,[class*=language-],.notification,.anchor-heading){inline-size:100%;margin-inline:auto;max-inline-size:45rem}.post-content *+h2,.post-content *+h3,.post-content *+.anchor-heading{margin-block-start:3rem}.post-content img,.post-content iframe{border-radius:var(--doc-border-radius-sm)}.post-content iframe{aspect-ratio:16/10;block-size:auto;inline-size:100}.post-content>picture:first-child+*{margin-block-start:3rem}.post-content .anchor-heading h2,.post-content .anchor-heading h3{scroll-margin-top:1.5rem}.post-content pre[class*=language-]{position:relative}.post-content pre[class*=language-]::before{border-radius:0 0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm);color:var(--spruce-prism-color-comment);content:attr(data-language);display:inline-block;font-family:var(--doc-heading-font-family);font-size:.6rem;font-weight:500;inset:1rem 1rem auto auto;line-height:1;pointer-events:none;position:absolute;text-transform:uppercase}.post-content a[href*=youtube] img{aspect-ratio:16/9;inline-size:100%;object-fit:cover;object-position:center}.cta{background-color:var(--spruce-footer-color-background);border-block-end:1px solid rgba(255,255,255,.08);padding-block:var(--spruce-section-gap-half)}.cta__inner{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between}.cta__caption>*{margin-block-end:0;margin-block-start:0}.cta__caption>*+*{margin-block-start:1rem}.cta .heading{margin-block-end:0}.cta *{color:#fff}.cta p{font-size:clamp(1.02rem,2vw + 1rem,1.2rem);max-inline-size:55ch}.site-footer{background-color:var(--spruce-footer-color-background);color:rgba(255,255,255,.85);font-size:1rem}.site-footer a{color:#a689dc}.site-footer a:hover,.site-footer a:focus{color:#b8a1e3}.site-footer__slogen{color:#fff;font-family:var(--doc-heading-font-family);font-size:clamp(2.1rem,4vw + 1rem,3rem);font-weight:700;grid-auto-rows:auto;line-height:calc(var(--spruce-line-height-heading)*1.15);margin-block:0 2rem}.site-footer__top{--gtc: minmax(0, 1fr);display:grid;gap:3rem;grid-template-columns:var(--gtc);padding-block:var(--spruce-section-gap)}@media(min-width: 64em){.site-footer__top{--gtc: minmax(0, 2.5fr) repeat(3, minmax(0, 1fr))}}.site-footer__logo{display:inline-flex;opacity:.15}.site-footer__logo svg{block-size:auto;inline-size:2.5rem}.site-footer__title{color:#fff;font-size:clamp(1.0625rem,2vw + 1rem,1.25rem);margin-block:0 1.5rem}.site-footer strong{color:#fff}.site-footer__navigation{list-style:none;margin:0;padding:0;font-size:1rem}.site-footer__navigation>*{margin-block-end:0;margin-block-start:0}.site-footer__navigation>*+*{margin-block-start:.5rem}.site-footer__navigation a{color:rgba(255,255,255,.85);text-decoration:none}.site-footer__navigation a:hover,.site-footer__navigation a:focus,.site-footer__navigation a:active,.site-footer__navigation a[aria-current=page]{color:#b8a1e3}.site-footer__navigation a[aria-current=page]{font-weight:700}.site-footer__navigation a span{margin-inline-end:.5rem}.site-footer__bottom{border-block-start:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:1rem 1.5rem;padding-block:clamp(1.5rem,5vw,3rem)}@media(min-width: 64em){.site-footer__bottom{align-items:center;flex-direction:row;justify-content:space-between}}.site-footer__cone-logo{align-items:center;display:inline-flex;margin-inline-end:.5rem}.site-footer__cone-logo svg{--size: 1.5rem;block-size:var(--size);inline-size:var(--size)}.site-footer__copyright{margin-block:0}.container{--inline-size: var(--spruce-container-inline-size);--gap: clamp(1.5rem, 5vw, 3rem);inline-size:100%;margin-inline:auto;max-inline-size:var(--inline-size);padding-inline:var(--gap)}.container--narrow{--inline-size: 60rem}.container--narrower{--inline-size: 50rem}.l-documentation{padding-block:clamp(1.5rem,5vw,3rem) clamp(3rem,5vw,4.5rem)}.l-documentation--code{padding-block:0 clamp(3rem,5vw,4.5rem)}.l-documentation__inner{display:grid;gap:4.5rem;grid-template-columns:minmax(0, 1fr)}@media(min-width: 48em){.l-documentation__inner{grid-template-columns:minmax(0, 15rem) minmax(0, 1fr)}}@media(min-width: 64em){.l-documentation__inner{grid-template-columns:minmax(0, 16.5rem) minmax(0, 1fr)}}.l-documentation__sidebar{inset-block-start:2rem;overflow-y:auto;padding-inline-end:1.5rem}.l-documentation__sidebar>*{margin-block-end:0;margin-block-start:0}.l-documentation__sidebar>*+*{margin-block-start:1.5rem}.l-documentation__sidebar::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.l-documentation__sidebar::-webkit-scrollbar-thumb{background:var(--spruce-scrollbar-color-thumb-background);border-radius:.15rem}.l-documentation__sidebar::-webkit-scrollbar-thumb:hover{background:var(--spruce-scrollbar-color-thumb-background-hover)}.l-documentation__sidebar::-webkit-scrollbar-track{background:var(--spruce-scrollbar-color-track-background);border-radius:.15rem}@media(min-width: 48em){.l-documentation__sidebar{max-block-size:calc(100vh - 4rem);position:sticky}}.l-documentation__body-helper{order:-1}@media(min-width: 48em){.l-documentation__body-helper{order:2}}.l-documentation__body{column-gap:4.5rem;display:grid;grid-auto-rows:min-content;grid-template-columns:minmax(0, 1fr);row-gap:1.5rem}@media(min-width: 80em){.l-documentation__body{grid-template-columns:minmax(0, 1fr) minmax(0, 15rem)}}.l-documentation__table-of-content{inset-block-start:2rem;margin-inline:auto;max-inline-size:45rem;position:sticky}@media(min-width: 80em){.l-documentation__table-of-content-helper{grid-column:2/3;order:2}}@media(min-width: 80em){.l-documentation__content{grid-column:1/2}}.l-documentation__content .post-content{margin-inline:auto;max-inline-size:45rem}.l-documentation__title{font-size:clamp(2.3925rem,3vw + 1rem,3.3rem);margin-block:0;margin-inline:auto;max-inline-size:45rem}@media(min-width: 80em){.l-documentation__title{grid-column:1/2}}.l-documentation__navigation-top{border-block-end:1px solid var(--spruce-base-color-border);margin-block-end:clamp(3rem,5vw,4.5rem);padding-block:1.5rem}.l-documentation__navigation-bottom{border-block-start:1px solid var(--spruce-base-color-border);margin-block-start:4.5rem;padding-block-start:1.5rem}.l-post__inner{display:flex;flex-direction:column;padding-block-end:var(--spruce-section-gap)}.l-faq{padding-block:var(--spruce-section-gap-half) var(--spruce-section-gap)}.l-getting-started{padding-block:3rem}.l-getting-started--border-block-end{border-block-end:1px solid var(--spruce-base-color-border)}.l-getting-started--border-block-start{border-block-start:1px solid var(--spruce-base-color-border)}.l-getting-started__inner{align-items:flex-start;display:grid;gap:3rem}@supports(inline-size: min(20rem, 100%)){.l-getting-started__inner{grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr))}}.l-blog{padding-block:0 clamp(4.5rem,8vw,7rem)}.l-blog__inner{--column: 1;display:grid;gap:3rem;grid-template-columns:repeat(var(--column), minmax(0, 2fr))}@media(min-width: 48em){.l-blog__inner{--column: 2}}@media(min-width: 80em){.l-blog__inner{--column: 3}}.l-template{padding-block:0 clamp(4.5rem,8vw,7rem)}.l-template__inner{display:grid;gap:clamp(3rem,5vw,4.5rem);grid-template-columns:minmax(0, 2fr);margin-block-start:clamp(4.5rem,5vw,7rem)}@media(min-width: 64em){.l-template__inner{grid-template-columns:minmax(0, 2fr) 28rem}}@media(min-width: 80em){.l-template__inner{grid-template-columns:minmax(0, 2fr) 32rem}}.l-template__sidebar{order:-1}.l-template__sidebar>*{margin-block-end:0;margin-block-start:0}.l-template__sidebar>*+*{margin-block-start:3rem}@media(min-width: 64em){.l-template__sidebar{order:0}}.l-template__previews{display:flex;flex-direction:column;gap:3rem}@media(min-width: 64em){.l-template__previews{flex-direction:row}}.l-template__preview{background-color:#f7f7f7;border-radius:var(--spruce-border-radius-sm);padding:2rem}.l-template__preview img{border-radius:var(--spruce-border-radius-sm);box-shadow:0 0 1.25rem rgba(0,0,0,.05)}.l-color>*{margin-block-end:0;margin-block-start:0}.l-color>*+*{margin-block-start:1.5rem}.l-color__inner{display:grid;gap:1.5rem}@supports(inline-size: min(15rem, 100%)){.l-color__inner{grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr))}}.l-color+.l-color{margin-block-start:3rem}.l-templates{padding-block:0 clamp(4.5rem,8vw,7rem)}.l-templates__inner{--columns: 1;display:grid;gap:3rem;grid-template-columns:repeat(var(--columns), minmax(0, 2fr))}@media(min-width: 48em){.l-templates__inner{--columns: 2}}.l-404{border-block-end:1px solid var(--spruce-base-color-border);padding-block:var(--spruce-section-gap)}.l-404__inner{display:flex;flex-direction:column;gap:1.5rem;text-align:center}.l-404__image{margin-inline:auto;max-inline-size:12rem}.l-404__caption{margin-inline:auto;max-inline-size:40rem;text-align:center;text-wrap:balance}.l-404__caption>*{margin-block-end:0;margin-block-start:0}.l-404__caption>*+*{margin-block-start:1.5rem}.l-404__title{font-size:clamp(2.275rem,5vw + 1rem,3.5rem)}.btn--rounded{border-radius:var(--doc-border-radius-md)}.btn--rounded:not(.btn--icon){font-size:.91375rem;font-weight:700;text-transform:uppercase}.btn--rounded.btn--lg{padding:1.05em 1.25em}@media(min-width: 64em){.btn--rounded.btn--lg{padding:1.25em 1.5em}}.btn--install{background-color:var(--spruce-btn-color-install-background);border-color:var(--spruce-btn-color-install-background);color:var(--spruce-btn-color-install-foreground)}.btn--install:focus-visible{outline:2px solid var(--spruce-btn-color-install-background);outline-offset:2px}.btn--install:hover{background-color:var(--spruce-btn-color-install-background-hover);border-color:var(--spruce-btn-color-install-background-hover);color:var(--spruce-btn-color-install-foreground)}.btn--decline{background-color:var(--spruce-btn-color-decline-background);border-color:var(--spruce-btn-color-decline-background);color:var(--spruce-btn-color-decline-foreground)}.btn--decline:focus-visible{outline:2px solid var(--spruce-btn-color-decline-background);outline-offset:2px}.btn--decline:hover{background-color:#0b1319;border-color:#0b1319;color:var(--spruce-btn-color-decline-foreground)}.btn--discrete{background-color:var(--spruce-btn-color-discrete-background);border-color:var(--spruce-btn-color-discrete-background);color:var(--spruce-btn-color-discrete-foreground)}.btn--discrete:focus-visible{outline:2px solid var(--spruce-btn-color-discrete-background);outline-offset:2px}.btn--discrete:hover{background-color:var(--spruce-btn-color-discrete-background-hover);border-color:var(--spruce-btn-color-discrete-background-hover);color:var(--spruce-btn-color-discrete-foreground-hover)}.btn--dark{background-color:var(--spruce-btn-color-dark-background);border-color:var(--spruce-btn-color-dark-background);color:var(--spruce-btn-color-dark-foreground)}.btn--dark:focus-visible{outline:2px solid var(--spruce-btn-color-dark-background);outline-offset:2px}.btn--dark:hover{background-color:var(--spruce-btn-color-dark-background-hover);border-color:var(--spruce-btn-color-dark-background-hover);color:var(--spruce-btn-color-dark-foreground)}.table--font-size-reset{font-size:1rem}.table th,.table td{min-inline-size:10rem}.m-block\:0{margin-block:0 !important}:root{--spruce-section-gap:clamp(5rem, 8vw, 9rem);--spruce-section-gap-half:clamp(3.5rem, 8vw, 6rem)}body{--doc-heading-font-family: "Figtree", sans-serif;--doc-body-font-family: "Inter", sans-serif;--doc-border-radius-sm: 0.5rem;--doc-border-radius-md: 0.925rem;--doc-border-radius-lg: 2rem;font-family:var(--doc-body-font-family);overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--doc-heading-font-family)}[x-cloak]{display:none !important} +@font-face { + font-display: swap; + font-family: "Inter"; + font-style: normal; + font-weight: 400; + src: url("../../font/inter-v13-latin-regular.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-family: "Inter"; + font-style: normal; + font-weight: 500; + src: url("../../font/inter-v13-latin-500.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-family: "Inter"; + font-style: normal; + font-weight: 700; + src: url("../../font/inter-v13-latin-700.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-family: "Figtree"; + font-style: normal; + font-weight: 400; + src: url("../../font/figtree-v5-latin-regular.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-family: "Figtree"; + font-style: normal; + font-weight: 500; + src: url("../../font/figtree-v5-latin-500.woff2") format("woff2"); +} +@font-face { + font-display: swap; + font-family: "Figtree"; + font-style: normal; + font-weight: 700; + src: url("../../font/figtree-v5-latin-700.woff2") format("woff2"); +} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** +* 1. Correct the line height in all browsers. +* 2. Prevent adjustments of font size after orientation changes in iOS. +*/ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ +/** +* Remove the margin in all browsers. +*/ +body { + margin: 0; +} + +/** +* Render the `main` element consistently in IE. +*/ +main { + display: block; +} + +/** +* Correct the font size and margin on `h1` elements within `section` and +* `article` contexts in Chrome, Firefox, and Safari. +*/ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** +* 1. Add the correct box sizing in Firefox. +* 2. Show the overflow in Edge and IE. +*/ +hr { + box-sizing: content-box; /* 1 */ + block-size: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** +* 1. Correct the inheritance and scaling of font size in all browsers. +* 2. Correct the odd `em` font sizing in all browsers. +*/ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** +* Remove the gray background on active links in IE 10. +*/ +a { + background-color: transparent; +} + +/** +* 1. Remove the bottom border in Chrome 57- +* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +*/ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** +* Add the correct font weight in Chrome, Edge, and Safari. +*/ +b, +strong { + font-weight: bolder; +} + +/** +* 1. Correct the inheritance and scaling of font size in all browsers. +* 2. Correct the odd `em` font sizing in all browsers. +*/ +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +* Add the correct font size in all browsers. +*/ +small { + font-size: 80%; +} + +/** +* Prevent `sub` and `sup` elements from affecting the line height in +* all browsers. +*/ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** +* Remove the border on images inside links in IE 10. +*/ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** +* 1. Change the font styles in all browsers. +* 2. Remove the margin in Firefox and Safari. +*/ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +* Show the overflow in IE. +* 1. Show the overflow in Edge. +*/ +button, +input { /* 1 */ + overflow: visible; +} + +/** +* Remove the inheritance of text transform in Edge, Firefox, and IE. +* 1. Remove the inheritance of text transform in Firefox. +*/ +button, +select { /* 1 */ + text-transform: none; +} + +/** +* Correct the inability to style clickable types in iOS and Safari. +*/ +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/** +* Remove the inner border and padding in Firefox. +*/ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +* Restore the focus styles unset by the previous rule. +*/ +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +* Correct the padding in Firefox. +*/ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** +* 1. Correct the text wrapping in Edge and IE. +* 2. Correct the color inheritance from `fieldset` elements in IE. +* 3. Remove the padding so developers are not caught out when they zero out +* `fieldset` elements in all browsers. +*/ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-inline-size: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** +* Add the correct vertical alignment in Chrome, Firefox, and Opera. +*/ +progress { + vertical-align: baseline; +} + +/** +* Remove the default vertical scrollbar in IE 10+. +*/ +textarea { + overflow: auto; +} + +/** +* 1. Add the correct box sizing in IE 10. +* 2. Remove the padding in IE 10. +*/ +[type=checkbox], +[type=radio] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** +* Correct the cursor style of increment and decrement buttons in Chrome. +*/ +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + block-size: auto; +} + +/** +* 1. Correct the odd appearance in Chrome and Safari. +* 2. Correct the outline style in Safari. +*/ +[type=search] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +* Remove the inner padding in Chrome and Safari on macOS. +*/ +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +* 1. Correct the inability to style clickable types in iOS and Safari. +* 2. Change font properties to `inherit` in Safari. +*/ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* +* Add the correct display in Edge, IE 10+, and Firefox. +*/ +details { + display: block; +} + +/* +* Add the correct display in all browsers. +*/ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** +* Add the correct display in IE 10+. +*/ +template { + display: none; +} + +/** +* Add the correct display in IE 10. +*/ +[hidden] { + display: none; +} + +:root { + --spruce-alert-color-danger: hsl(0, 71%, 51%); + --spruce-alert-color-info: hsl(195, 100%, 42%); + --spruce-alert-color-success: hsl(150, 100%, 33%); + --spruce-alert-color-warning: hsl(48, 89%, 55%); +} + +:root { + --spruce-base-color-background: hsl(0, 0%, 100%); + --spruce-base-color-blockquote-border: hsl(262, 71%, 49%); + --spruce-base-color-border: hsl(215, 63%, 93%); + --spruce-base-color-code-background: #f6f2fd; + --spruce-base-color-code-foreground: hsl(260, 70%, 6%); + --spruce-base-color-heading: hsl(260, 70%, 6%); + --spruce-base-color-link: hsl(262, 71%, 49%); + --spruce-base-color-link-hover: #511dab; + --spruce-base-color-mark-background: hsl(50, 100%, 80%); + --spruce-base-color-mark-foreground: hsl(260, 70%, 6%); + --spruce-base-color-marker: hsl(262, 71%, 49%); + --spruce-base-color-primary: hsl(262, 71%, 49%); + --spruce-base-color-secondary: hsl(227, 92%, 55%); + --spruce-base-color-strong: hsl(260, 70%, 6%); + --spruce-base-color-text: hsl(208, 9%, 42%); + --spruce-base-color-code-tab-background: hsl(222, 100%, 98%); + --spruce-base-color-primary-dark: hsl(261, 52%, 35%); + --spruce-base-color-primary-darkest: hsl(272, 100%, 9%); + --spruce-base-color-primary-lightest: hsl(259, 53%, 94%); +} + +:root { + --spruce-btn-color-primary-background: hsl(262, 71%, 49%); + --spruce-btn-color-primary-background-hover: #511daa; + --spruce-btn-color-primary-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-primary-shadow: #ceb9f3; + --spruce-btn-color-secondary-background: hsl(227, 92%, 55%); + --spruce-btn-color-secondary-background-hover: #0937dc; + --spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-secondary-shadow: #ced8fd; + --spruce-btn-color-dark-background: hsl(260, 70%, 6%); + --spruce-btn-color-dark-background-hover: hsl(260, 70%, 12%); + --spruce-btn-color-dark-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-decline-background: hsl(207, 39%, 17%); + --spruce-btn-color-decline-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-discrete-background: hsla(206, 40%, 17%, 0.1); + --spruce-btn-color-discrete-background-hover: hsl(262, 71%, 49%); + --spruce-btn-color-discrete-foreground: hsl(0, 0%, 10%); + --spruce-btn-color-discrete-foreground-hover: hsl(0, 0%, 100%); + --spruce-btn-color-install-background: hsl(0, 0%, 95%); + --spruce-btn-color-install-background-hover: hsl(0, 0%, 90%); + --spruce-btn-color-install-foreground: hsl(0, 0%, 10%); + --spruce-btn-color-pagination-background: hsl(263, 40%, 96%); + --spruce-btn-color-pagination-background-hover: hsl(262, 71%, 49%); + --spruce-btn-color-pagination-focus-ring: hsl(262, 71%, 49%); + --spruce-btn-color-pagination-foreground: hsl(262, 71%, 49%); + --spruce-btn-color-pagination-foreground-hover: hsl(0, 0%, 100%); +} + +:root { + --spruce-form-color-background: hsl(0, 0%, 100%); + --spruce-form-color-background-disabled: hsl(0, 0%, 95%); + --spruce-form-color-border: hsl(260, 4%, 70%); + --spruce-form-color-border-disabled: hsl(215, 63%, 93%); + --spruce-form-color-border-focus: hsl(262, 71%, 49%); + --spruce-form-color-check-background: hsl(262, 71%, 49%); + --spruce-form-color-check-focus-ring: hsl(262, 71%, 49%); + --spruce-form-color-check-foreground: hsl(0, 0%, 100%); + --spruce-form-color-group-label-background: hsl(210, 60%, 98%); + --spruce-form-color-group-label-foreground: hsl(208, 9%, 42%); + --spruce-form-color-invalid: hsl(0, 71%, 51%); + --spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25); + --spruce-form-color-label: hsl(260, 70%, 6%); + --spruce-form-color-legend: hsl(260, 70%, 6%); + --spruce-form-color-placeholder: hsl(208, 7%, 40%); + --spruce-form-color-range-thumb-background: hsl(262, 71%, 49%); + --spruce-form-color-range-thumb-focus-ring: hsl(262, 71%, 49%); + --spruce-form-color-range-track-background: hsl(215, 63%, 93%); + --spruce-form-color-ring-focus: rgba(101, 36, 214, 0.25); + --spruce-form-color-select-foreground: hsl(260, 70%, 6%); + --spruce-form-color-text: hsl(208, 9%, 42%); + --spruce-form-color-valid: hsl(150, 100%, 33%); + --spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25); +} + +:root { + --spruce-selection-color-foreground: hsl(0, 0%, 100%); + --spruce-selection-color-background: hsl(262, 71%, 49%); +} + +:root { + --spruce-scrollbar-color-thumb-background: hsla(0, 0%, 0%, 0.15); + --spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25); + --spruce-scrollbar-color-track-background: hsla(0, 0%, 0%, 0.05); +} + +:root { + --spruce-table-color-border: hsl(215, 63%, 93%); + --spruce-table-color-caption: hsl(208, 9%, 42%); + --spruce-table-color-heading: hsl(260, 70%, 6%); + --spruce-table-color-hover: hsla(0, 0%, 0%, 0.05); + --spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025); + --spruce-table-color-text: hsl(208, 9%, 42%); +} + +:root { + --spruce-breadcrumb-color-separator: hsla(0, 0%, 0%, 0.1); +} + +:root { + --spruce-cookie-color-background: hsl(207, 95%, 8%); + --spruce-cookie-color-foreground: hsl(0, 0%, 100%); +} + +:root { + --spruce-footer-color-background: hsl(260, 70%, 6%); +} + +:root { + --spruce-ide-color-header-background: hsl(0, 0%, 100%); +} + +:root { + --spruce-hero-color-gradient-end: hsl(0, 0%, 100%); + --spruce-hero-color-gradient-start: hsl(210, 100%, 98%); + --spruce-hero-color-note-background: hsl(210, 100%, 97%); + --spruce-hero-color-note-color: hsl(216, 50%, 44%); +} + +:root { + --spruce-navigation-color-icon-background: hsl(259, 53%, 94%); + --spruce-navigation-color-icon-background-hover: hsl(262, 71%, 49%); + --spruce-navigation-color-icon-foreground: hsl(262, 71%, 49%); + --spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%); +} + +:root { + --spruce-modal-color-background: hsla(210, 60%, 98%, 0.7); +} + +:root { + --spruce-prism-color-background: hsl(0, 0%, 98%); + --spruce-prism-color-boolean: hsl(0, 44%, 53%); + --spruce-prism-color-class-name: hsl(0, 0%, 7%); + --spruce-prism-color-color: hsl(243, 14%, 29%); + --spruce-prism-color-comment: hsl(225, 14%, 46%); + --spruce-prism-color-constant: hsl(221, 57%, 52%); + --spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56); + --spruce-prism-color-namespace: hsl(173, 100%, 24%); + --spruce-prism-color-number: hsl(315, 90%, 35%); + --spruce-prism-color-punctuation: hsl(279, 50%, 53%); + --spruce-prism-color-regex: hsl(1, 66%, 47%); +} + +:root { + --spruce-search-color-icon: hsl(259, 53%, 94%); +} + +:root { + --spruce-border-radius: 0.425rem; + --spruce-font-family-base: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif; + --spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace; + --spruce-font-family-heading: Avenir, Avenir Next LT Pro, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif; + --spruce-font-size-base: 1rem; + --spruce-font-size-lead: clamp(1.15rem, 2vw, 1.35rem); + --spruce-font-size-lg: 1.125rem; + --spruce-font-size-ratio: 1.25; + --spruce-font-size-sm: 0.875rem; + --spruce-font-weight-heading: 700; + --spruce-inline-padding: 0.1em 0.3em; + --spruce-line-height-base: 1.8; + --spruce-line-height-heading: calc(2px + 2ex + 2px); + --spruce-line-height-lg: 1.8; + --spruce-line-height-md: 1.5; + --spruce-line-height-sm: 1.2; + --spruce-border-radius-lg: 0.925rem; + --spruce-border-radius-sm: 0.425rem; + --spruce-container-inline-size: 94rem; + --spruce-page-margin: 2cm; + --spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"]; +} +@media (prefers-reduced-motion: no-preference) { + :root { + --spruce-duration: 0.15s; + --spruce-timing-function: ease-in-out; + } +} + +.sr-only { + block-size: 1px !important; + border: 0 !important; + clip: rect(0, 0, 0, 0) !important; + inline-size: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; +} + +[tabindex="-1"]:focus { + outline: none !important; +} + +::selection { + background-color: var(--spruce-selection-color-background); + color: var(--spruce-selection-color-foreground); + text-shadow: none; +} + +html { + box-sizing: border-box; +} +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + +*, +::before, +::after { + box-sizing: inherit; +} + +body { + background: var(--spruce-base-color-background); + color: var(--spruce-base-color-text); +} + +a { + color: var(--spruce-base-color-link); + text-decoration: underline; + transition-duration: var(--spruce-duration); + transition-property: color; + transition-timing-function: var(--spruce-timing-function); +} +a:hover { + color: var(--spruce-base-color-link-hover); +} + +button { + color: inherit; +} + +a, +button { + touch-action: manipulation; +} + +hr { + border: 0; + border-block-start: 1px solid var(--spruce-base-color-border); +} + +img { + block-size: auto; + display: block; + max-inline-size: 100%; + user-select: none; +} + +iframe { + block-size: 100%; + display: block; + inline-size: 100%; +} + +figure { + margin-inline: 0; +} +figure figcaption { + margin-block-start: 0.5rem; + text-align: center; +} + +.table-responsive { + --inline-size: 40rem; + -webkit-overflow-scrolling: touch; + overflow-x: auto; +} +.table-responsive table { + min-inline-size: var(--inline-size); +} + +.table { + --spruce-line-height: 1.5; + --spruce-padding: 1rem; + --spruce-responsive-inline-size: 40rem; + border-collapse: collapse; + color: var(--spruce-table-color-text); + inline-size: 100%; +} +.table caption { + color: var(--spruce-table-color-caption); + margin-block-end: 1rem; +} +.table th, +.table td { + border-block-end: 1px solid var(--spruce-table-color-border); + line-height: var(--spruce-line-height); + padding: var(--spruce-padding); +} +.table th { + color: var(--spruce-table-color-heading); + text-align: inherit; + text-align: -webkit-match-parent; +} +.table--striped > tbody > tr:nth-child(odd) { + background-color: var(--spruce-table-color-stripe); +} +.table--hover > tbody > tr:hover { + background: var(--spruce-table-color-hover); +} +.table--clear-border th, +.table--clear-border td { + border: 0; +} +.table--in-line th:first-child, +.table--in-line td:first-child { + padding-inline-start: 0; +} +.table--in-line th:last-child, +.table--in-line td:last-child { + padding-inline-end: 0; +} +.table--sm { + --spruce-padding: 0.5rem; +} +.table--sm th, +.table--sm td { + padding: var(--spruce-padding); +} +.table--rounded th:first-child, +.table--rounded td:first-child { + border-end-start-radius: var(--spruce-border-radius-sm); + border-start-start-radius: var(--spruce-border-radius-sm); +} +.table--rounded th:last-child, +.table--rounded td:last-child { + border-end-end-radius: var(--spruce-border-radius-sm); + border-start-end-radius: var(--spruce-border-radius-sm); +} + +html { + -webkit-tap-highlight-color: hsla(0, 0%, 0%, 0); +} + +body { + font-family: var(--spruce-font-family-base); + font-size: var(--spruce-font-size-base); + line-height: var(--spruce-line-height-base); +} + +p, +li, +h1, +h2, +h3, +h4, +h5, +h6 { + hyphens: auto; + overflow-wrap: break-word; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--spruce-base-color-heading); + font-family: var(--spruce-font-family-heading); + font-weight: var(--spruce-font-weight-heading); + line-height: var(--spruce-line-height-heading); +} + +h1 { + font-size: clamp(2.0751953125rem, 2vw + 1rem, 2.44140625rem); +} + +h2 { + font-size: clamp(1.66015625rem, 2vw + 1rem, 1.953125rem); +} + +h3 { + font-size: clamp(1.328125rem, 2vw + 1rem, 1.5625rem); +} + +h4 { + font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem); +} + +h5 { + font-size: 1rem; +} + +h6 { + font-size: 1rem; +} + +ul, +ol { + list-style-position: inside; +} +ul > *, +ol > * { + margin-block-end: 0; + margin-block-start: 0; +} +ul > * + *, +ol > * + * { + margin-block-start: 0.25rem; +} +ul li, +ol li { + list-style-position: outside; +} +ul li::marker, +ol li::marker { + color: var(--spruce-base-color-marker); +} + +li > ul, +li > ol { + margin-block-start: 0.25rem; +} + +dl dt { + color: var(--spruce-base-color-heading); + font-weight: bold; +} +dl dd { + margin: 0; +} +dl dd + dt { + margin-block-start: 1rem; +} + +.quote { + border-inline-start: 0.5rem solid var(--spruce-base-color-blockquote-border); + padding-inline-start: 1.5rem; +} +.quote > * { + margin-block-end: 0; + margin-block-start: 0; +} +.quote > * + * { + margin-block-start: 0.5rem; +} +.quote blockquote { + border-inline-start: 0; + padding-inline-start: 0; +} +.quote figcaption { + text-align: start; +} + +blockquote { + border-inline-start: 0.5rem solid var(--spruce-base-color-blockquote-border); + margin-inline-start: 0; + padding-inline-start: 1.5rem; +} +blockquote > * { + margin-block-end: 0; + margin-block-start: 0; +} +blockquote > * + * { + margin-block-start: 0.5rem; +} + +abbr[title] { + border-block-end: 1px dotted; + cursor: help; + text-decoration: none; +} + +mark { + background-color: var(--spruce-base-color-mark-background); + border-radius: var(--spruce-border-radius); + color: var(--spruce-base-color-mark-foreground); + padding: var(--spruce-inline-padding); +} + +code, +kbd, +samp { + background-color: var(--spruce-base-color-code-background); + border-radius: var(--spruce-border-radius); + color: var(--spruce-base-color-code-foreground); + padding: var(--spruce-inline-padding); +} + +strong { + color: var(--spruce-base-color-strong); +} + +.lead { + font-size: var(--spruce-font-size-lead); +} + +.hidden, +[hidden] { + display: none !important; +} + +.h1 { + font-size: clamp(2.0751953125rem, 2vw + 1rem, 2.44140625rem); +} + +.h2 { + font-size: clamp(1.66015625rem, 2vw + 1rem, 1.953125rem); +} + +.h3 { + font-size: clamp(1.328125rem, 2vw + 1rem, 1.5625rem); +} + +.h4 { + font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem); +} + +.h5 { + font-size: 1rem; +} + +.h6 { + font-size: 1rem; +} + +.btn { + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1rem; + --spruce-font-weight: 500; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.75em; + --spruce-icon-size: 1em; + --spruce-padding: 0.75em 1em; + --spruce-shadow-size: 0.25rem; + align-items: center; + border-radius: var(--spruce-border-radius); + border-style: solid; + border-width: var(--spruce-border-width); + cursor: pointer; + display: inline-flex; + font-size: var(--spruce-font-size); + font-weight: var(--spruce-font-weight); + gap: var(--spruce-gap); + justify-content: center; + line-height: 1; + padding: var(--spruce-padding); + text-align: start; + text-decoration: none; + transition-duration: var(--spruce-duration); + transition-property: background-color, border-color, box-shadow, color; + transition-timing-function: var(--spruce-timing-function); +} + +.btn:focus { + outline-color: transparent; + outline-style: solid; +} + +.btn:disabled { + opacity: 0.5; + pointer-events: none; +} + +.btn--icon { + padding: var(--spruce-icon-padding); +} +.btn--icon.btn--sm { + padding: var(--spruce-icon-padding); +} +.btn--icon.btn--lg { + padding: var(--spruce-icon-padding); +} + +.btn__icon { + block-size: var(--spruce-icon-size); + flex-shrink: 0; + inline-size: var(--spruce-icon-size); + pointer-events: none; +} +.btn__icon--sm { + block-size: var(--spruce-icon-size); + inline-size: var(--spruce-icon-size); +} + +.btn--sm { + --spruce-font-size: 0.8rem; + --spruce-gap: 0.25rem; + --spruce-icon-padding: 0.5em; + --spruce-icon-size: 0.8rem; + --spruce-padding: 0.5em 0.75em; + font-size: var(--spruce-font-size); + gap: var(--spruce-gap); + padding: var(--spruce-padding); +} + +.btn--lg { + --spruce-font-size: 1.15rem; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.9em; + --spruce-padding: 0.9em 1.15em; +} + +.btn--block { + inline-size: 100%; +} + +.btn--primary { + background-color: var(--spruce-btn-color-primary-background); + border-color: var(--spruce-btn-color-primary-background); + color: var(--spruce-btn-color-primary-foreground); +} +.btn--primary:focus-visible { + outline: 2px solid var(--spruce-btn-color-primary-background); + outline-offset: 2px; +} +.btn--primary:hover { + background-color: var(--spruce-btn-color-primary-background-hover); + border-color: var(--spruce-btn-color-primary-background-hover); + color: var(--spruce-btn-color-primary-foreground); +} +.btn--primary-shadow { + box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-primary-shadow); +} + +.btn--secondary { + background-color: var(--spruce-btn-color-secondary-background); + border-color: var(--spruce-btn-color-secondary-background); + color: var(--spruce-btn-color-secondary-foreground); +} +.btn--secondary:focus-visible { + outline: 2px solid var(--spruce-btn-color-secondary-background); + outline-offset: 2px; +} +.btn--secondary:hover { + background-color: var(--spruce-btn-color-secondary-background-hover); + border-color: var(--spruce-btn-color-secondary-background-hover); + color: var(--spruce-btn-color-secondary-foreground); +} +.btn--secondary-shadow { + box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-secondary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-secondary-shadow); +} + +.btn--outline-primary { + background-color: transparent; + border-color: var(--spruce-btn-color-primary-background); + color: var(--spruce-btn-color-primary-background); +} +.btn--outline-primary:focus-visible { + outline: 2px solid var(--spruce-btn-color-primary-background); + outline-offset: 2px; +} +.btn--outline-primary:hover { + background-color: var(--spruce-btn-color-primary-background); + border-color: var(--spruce-btn-color-primary-background); + color: var(--spruce-btn-color-primary-foreground); +} + +.btn--outline-secondary { + background-color: transparent; + border-color: var(--spruce-btn-color-secondary-background); + color: var(--spruce-btn-color-secondary-background); +} +.btn--outline-secondary:focus-visible { + outline: 2px solid var(--spruce-btn-color-secondary-background); + outline-offset: 2px; +} +.btn--outline-secondary:hover { + background-color: var(--spruce-btn-color-secondary-background); + border-color: var(--spruce-btn-color-secondary-background); + color: var(--spruce-btn-color-secondary-foreground); +} + +.form-file::file-selector-button { + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1rem; + --spruce-font-weight: 500; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.75em; + --spruce-icon-size: 1em; + --spruce-padding: 0.75em 1em; + --spruce-shadow-size: 0.25rem; + align-items: center; + border-radius: var(--spruce-border-radius); + border-style: solid; + border-width: var(--spruce-border-width); + cursor: pointer; + display: inline-flex; + font-size: var(--spruce-font-size); + font-weight: var(--spruce-font-weight); + gap: var(--spruce-gap); + justify-content: center; + line-height: 1; + padding: var(--spruce-padding); + text-align: start; + text-decoration: none; + transition-duration: var(--spruce-duration); + transition-property: background-color, border-color, box-shadow, color; + transition-timing-function: var(--spruce-timing-function); +} + +.form-file:focus { + outline-color: transparent; + outline-style: solid; +} + +.form-file:disabled { + opacity: 0.5; + pointer-events: none; +} + +.form-file--sm::file-selector-button { + --spruce-font-size: 0.8rem; + --spruce-gap: 0.25rem; + --spruce-icon-padding: 0.5em; + --spruce-icon-size: 0.8rem; + --spruce-padding: 0.5em 0.75em; + font-size: var(--spruce-font-size); + gap: var(--spruce-gap); + padding: var(--spruce-padding); +} + +.form-file--lg::file-selector-button { + --spruce-font-size: 1.15rem; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.9em; + --spruce-padding: 0.9em 1.15em; +} + +.form-file--block::file-selector-button { + inline-size: 100%; +} + +.form-file { + display: block; +} +.form-file:focus { + outline: revert; +} +.form-file:focus-within::file-selector-button { + background-color: var(--spruce-btn-color-primary-background-hover); +} +.form-file::file-selector-button { + background-color: var(--spruce-btn-color-primary-background); + border-color: var(--spruce-btn-color-primary-background); + color: var(--spruce-btn-color-primary-foreground); + margin-inline-end: 1rem; +} +.form-file::file-selector-button:hover { + background-color: var(--spruce-btn-color-primary-background-hover); + border-color: var(--spruce-btn-color-primary-background-hover); + color: var(--spruce-btn-color-primary-foreground); +} +.form-file::file-selector-button-shadow { + box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-primary-shadow); +} + +.form-label { + color: var(--spruce-form-color-label); + line-height: 1.5; + text-align: start; +} + +.form-control { + --webkit-date-line-height: 1.375; + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1rem; + --spruce-line-height: 1.5; + --spruce-padding: 0.5em 0.75em; + --spruce-textarea-block-size: 6rem; + appearance: none; + background-color: var(--spruce-form-color-background); + border: var(--spruce-border-width) solid var(--spruce-form-color-border); + border-radius: var(--spruce-border-radius); + box-sizing: border-box; + color: var(--spruce-form-color-text); + display: block; + font-size: var(--spruce-font-size); + inline-size: 100%; + line-height: var(--spruce-line-height); + padding: var(--spruce-padding); + transition-duration: var(--spruce-duration); + transition-property: border, box-shadow; + transition-timing-function: var(--spruce-timing-function); +} +.form-control::placeholder { + color: var(--spruce-form-color-placeholder); +} +.form-control::-webkit-datetime-edit { + line-height: var(--webkit-date-line-height); +} +.form-control:focus { + border-color: var(--spruce-form-color-border-focus); + box-shadow: 0 0 0 0.25rem var(--spruce-form-color-ring-focus); + outline: 2px solid transparent; +} +.form-control[type=color] { + --spruce-aspect-ratio: 1; + --spruce-block-size: 100%; + --spruce-inline-size: 2.625rem; + --spruce-padding: 0.5em; + aspect-ratio: var(--spruce-aspect-ratio); + block-size: var(--spruce-block-size); + inline-size: var(--spruce-inline-size); + padding: var(--spruce-padding); +} +.form-control[type=color]::-webkit-color-swatch-wrapper { + padding: 0; +} +.form-control[type=color]::-moz-color-swatch { + border: 0; + border-radius: var(--spruce-border-radius); +} +.form-control[type=color]::-webkit-color-swatch { + border: 0; + border-radius: var(--spruce-border-radius); +} +.form-control[disabled], .form-control[disabled=true] { + background-color: var(--spruce-form-color-background-disabled); + border-color: var(--spruce-form-color-border-disabled); + cursor: not-allowed; +} +textarea.form-control { + block-size: var(--spruce-textarea-block-size); + min-block-size: var(--spruce-textarea-block-size); + resize: vertical; +} + +.form-control--valid, .form-control--invalid { + background-position: center right 0.5em; + background-repeat: no-repeat; + background-size: 1.25em auto; + padding-inline-end: 2em; +} +html[dir=rtl] .form-control--valid, html[dir=rtl] .form-control--invalid { + background-position: center left 0.5em; +} +.form-control--valid { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:hsl%28150, 100%, 33%%29;"/%3e%3c/svg%3e'); + border-color: var(--spruce-alert-color-success); +} +.form-control--valid:focus { + border-color: var(--spruce-form-color-valid); + box-shadow: 0 0 0 0.25rem var(--spruce-form-color-valid-focus-ring); + outline: 2px solid transparent; +} +.form-control--invalid { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:hsl%280, 71%, 51%%29;"/%3e%3c/svg%3e'); + border-color: var(--spruce-alert-color-danger); +} +.form-control--invalid:focus { + border-color: var(--spruce-form-color-invalid); + box-shadow: 0 0 0 0.25rem var(--spruce-form-color-invalid-focus-ring); + outline: 2px solid transparent; +} +.form-control--sm { + --webkit-date-line-height: 1.36; + --spruce-border-radius: 0.35em; + --spruce-padding: 0.25em 0.75em; +} +.form-control--sm[type=color] { + --spruce-aspect-ratio: 1; + --spruce-block-size: 100%; + --spruce-inline-size: 1.925rem; + --spruce-padding: 0.25em; +} +.form-control--lg { + --webkit-date-line-height: 1.387; + --spruce-padding: 0.65em 1em; +} +.form-control--lg[type=color] { + --spruce-aspect-ratio: 1; + --spruce-block-size: 100%; + --spruce-inline-size: 3.204rem; + --spruce-padding: 0.5em; +} + +select.form-control:not([multiple]):not([size]) { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28260, 70%, 6%%29;"/%3e%3c/svg%3e'); + background-position: center right 0.5em; + background-repeat: no-repeat; + background-size: 1.25em auto; + padding-inline-end: 2em; +} +html[dir=rtl] select.form-control:not([multiple]):not([size]) { + background-position: center left 0.5em; +} + +.form-check { + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1.125rem; + --spruce-line-height: 1.5; + --spruce-margin-block: 0.1em; + --spruce-vertical-alignment: center; + align-items: var(--spruce-vertical-alignment); + display: inline-flex; + gap: 0.5rem; +} + +.form-check--vertical-center { + align-items: center; +} + +.form-check--vertical-start { + align-items: flex-start; +} + +.form-check--sm { + --spruce-border-radius: 0.35em; + --spruce-padding: 0.25em 0.75em; +} +.form-check--sm .form-check__control { + font-size: var(--spruce-font-size); +} + +.form-check--lg { + --spruce-padding: 0.65em 1em; +} +.form-check__control { + appearance: none; + background-color: var(--spruce-form-color-background); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + block-size: 1em; + border: var(--spruce-border-width) solid var(--spruce-form-color-border); + flex-shrink: 0; + font-size: var(--spruce-font-size); + inline-size: 1em; + line-height: 1; + margin-block: var(--spruce-margin-block); + transition-duration: var(--spruce-duration); + transition-property: border, box-shadow; + transition-timing-function: var(--spruce-timing-function); +} +.form-check__control[type=radio] { + border-radius: 50%; +} +.form-check__control[type=checkbox] { + border-radius: var(--spruce-border-radius); +} +.form-check__control:focus-visible { + outline: 2px solid var(--spruce-form-color-check-focus-ring); + outline-offset: 2px; +} +.form-check__control:checked { + background-color: var(--spruce-form-color-check-background); + border-color: var(--spruce-form-color-check-background); +} +.form-check__control:checked[type=radio] { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e'); +} +.form-check__control:checked[type=checkbox] { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e'); +} +.form-check__control:indeterminate[type=checkbox] { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e'); + background-color: var(--spruce-form-color-check-background); + border-color: var(--spruce-form-color-check-background); +} +.form-check__control:disabled, .form-check__control.disabled { + background-color: var(--spruce-form-color-background-disabled); + border-color: var(--spruce-form-color-border-disabled); + cursor: not-allowed; +} +.form-check__control:disabled + .form-check__label, .form-check__control.disabled + .form-check__label { + opacity: 0.5; +} + +.form-check__label { + line-height: var(--spruce-line-height); +} + +.form-switch { + --spruce-border-width: 1px; + --spruce-font-size: 1.125rem; + --spruce-line-height: 1.5; + --spruce-margin-block: 0.15em; + --spruce-vertical-alignment: center; + align-items: var(--spruce-vertical-alignment); + display: inline-flex; + gap: 0.5rem; +} +.form-switch--block { + inline-size: 100%; + justify-content: space-between; +} + +.form-switch--vertical-center { + align-items: center; +} + +.form-switch--vertical-start { + align-items: flex-start; +} + +.form-switch--sm { + --spruce-font-size: 1rem; +} + +.form-switch--lg { + --spruce-font-size: clamp(1.15rem, 2vw, 1.35rem); +} + +.form-switch__control { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%28260, 4%, 70%%29;"/%3e%3c/svg%3e'); + appearance: none; + background-color: var(--spruce-form-color-background); + background-position: left center; + background-repeat: no-repeat; + background-size: contain; + block-size: 1em; + border: var(--spruce-border-width) solid var(--spruce-form-color-border); + border-radius: 2em; + flex-shrink: 0; + font-size: var(--spruce-font-size); + inline-size: 2em; + line-height: 1; + margin-block: var(--spruce-margin-block); + transition-duration: var(--spruce-duration); + transition-property: background-position, border, box-shadow; + transition-timing-function: var(--spruce-timing-function); +} +.form-switch__control:checked { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e'); + background-color: var(--spruce-form-color-check-background); + background-position: right center; + border-color: var(--spruce-form-color-check-background); +} +.form-switch__control:disabled { + background-color: var(--spruce-form-color-background-disabled); + border-color: var(--spruce-form-color-border-disabled); + cursor: not-allowed; +} +.form-switch__control:disabled + .form-switch__label { + opacity: 0.5; +} + +[dir=rtl] .form-switch__control { + background-position: right center; +} +[dir=rtl] .form-switch__control:checked { + background-position: left center; +} + +.form-switch__label { + line-height: var(--spruce-line-height); +} + +fieldset { + --spruce-layout-gap: 1rem; + --spruce-legend-font-size: clamp(1rem, 5vw, 1.25rem); + --spruce-legend-font-weight: 700; + border: 0; + margin: 0; + padding: 0; +} +fieldset > * { + margin-block-end: 0; + margin-block-start: 0; +} +fieldset > * + * { + margin-block-start: var(--spruce-layout-gap); +} +fieldset + fieldset { + margin-block-start: 3rem; +} + +legend { + color: var(--spruce-form-color-legend); + font-size: var(--spruce-legend-font-size); + font-weight: var(--spruce-legend-font-weight); +} + +.form-group-label { + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + align-items: center; + background-color: var(--spruce-form-color-group-label-background); + border: var(--spruce-border-width) solid var(--spruce-form-color-border); + border-radius: var(--spruce-border-radius); + color: var(--spruce-form-color-group-label-foreground); + display: flex; + padding-inline: 1rem; +} + +.form-group { + --spruce-gap: 0.5rem; + display: flex; + flex-direction: column; + gap: var(--spruce-gap); +} +.form-group--horizontal-check { + --spruce-gap: 1rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spruce-gap); +} +.form-group--vertical-check { + --spruce-gap: 1rem; + align-items: start; + flex-direction: column; + gap: var(--spruce-gap); +} +.form-group--row { + --spruce-container-inline-size: 38rem; + --spruce-gap: 0.25rem 1rem; + --spruce-label-inline-size: 10rem; + --spruce-vertical-alignment: center; + align-items: var(--spruce-vertical-alignment); + display: grid; + gap: var(--spruce-gap); + grid-template-columns: minmax(0, 1fr); +} +.form-group--row\:vertical-center { + align-items: center; +} +.form-group--row\:vertical-start { + align-items: flex-start; +} +@container form-group-container (inline-size > 38rem) { + .form-group--row { + grid-template-columns: minmax(0, var(--spruce-label-inline-size)) minmax(0, 1fr); + } +} +@container form-group-container (inline-size > 38rem) { + .form-group--row .form-description, + .form-group--row .field-feedback { + grid-column-start: 2; + } +} +.form-group--stacked { + display: flex; +} +.form-group--stacked > * + * { + border-radius: 0; + margin-inline-start: -1px; +} +.form-group--stacked > *:first-child { + border-start-end-radius: 0; + border-start-start-radius: var(--spruce-border-radius); + border-end-end-radius: 0; + border-end-start-radius: var(--spruce-border-radius); +} +.form-group--stacked > *:last-child { + border-start-end-radius: var(--spruce-border-radius); + border-start-start-radius: 0; + border-end-end-radius: var(--spruce-border-radius); + border-end-start-radius: 0; +} +.form-group--stacked > *:only-child { + border-radius: var(--spruce-border-radius); +} +.form-group--stacked > *:focus { + z-index: 2; +} +.form-group-container { + container: form-group-container/inline-size; +} + +.form-row--mixed { + --inline-size: 20ch; + display: flex; + flex-wrap: wrap; + gap: 1rem; +} +.form-row--mixed > * { + flex: 1 1 var(--inline-size); +} + +.field-feedback { + display: block; + line-height: 1.5; +} +.field-feedback--valid { + color: var(--spruce-alert-color-success); +} +.field-feedback--invalid { + color: var(--spruce-alert-color-danger); +} + +.form-range { + --spruce-focus-ring-box-shadow-type: outside; + --spruce-focus-ring-offset: 2px; + --spruce-focus-ring-size: 2px; + --spruce-focus-ring-type: outline; + --spruce-thumb-block-size: 1rem; + --spruce-thumb-border-radius: 0.5rem; + --spruce-thumb-inline-size: 1rem; + --spruce-track-block-size: 0.25rem; + --spruce-track-border-radius: 0.15rem; + appearance: none; + margin-block-start: calc(var(--spruce-thumb-block-size) / 2 - var(--spruce-track-block-size) / 2); +} +.form-range:focus-visible { + outline: none; +} +.form-range:focus-visible::-webkit-slider-thumb { + outline: 2px solid var(--spruce-form-color-range-thumb-focus-ring); + outline-offset: 2px; +} +.form-range:focus-visible::-moz-range-thumb { + outline: 2px solid var(--spruce-form-color-range-thumb-focus-ring); + outline-offset: 2px; +} +.form-range::-webkit-slider-runnable-track { + background-color: var(--spruce-form-color-range-track-background); + block-size: var(--spruce-track-block-size); + border-radius: var(--spruce-track-border-radius); +} +.form-range::-moz-range-track { + background-color: var(--spruce-form-color-range-track-background); + block-size: var(--spruce-track-block-size); + border-radius: var(--spruce-track-border-radius); +} +.form-range::-webkit-slider-thumb { + appearance: none; + background-color: var(--spruce-form-color-range-thumb-background); + block-size: var(--spruce-thumb-block-size); + border-radius: var(--spruce-thumb-border-radius); + inline-size: var(--spruce-thumb-inline-size); + margin-block-start: calc(var(--spruce-track-block-size) / 2 - var(--spruce-thumb-block-size) / 2); +} +.form-range::-moz-range-thumb { + background-color: var(--spruce-form-color-range-thumb-background); + block-size: var(--spruce-thumb-block-size); + border: 0; /*Removes extra border that FF applies*/ + border-radius: var(--spruce-thumb-border-radius); + inline-size: var(--spruce-thumb-inline-size); +} +.form-range:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +.form-description { + --spruce-font-size: 1em; + --spruce-font-weight: 400; + color: var(--spruce-form-color-text); + display: block; + font-size: var(--spruce-font-size); + font-weight: var(--spruce-font-weight); + line-height: var(--spruce-line-height-md); +} + +:root[data-theme-mode=dark] { + --spruce-base-color-background: hsl(206, 100%, 7%); + --spruce-base-color-blockquote-border: hsl(261, 54%, 70%); + --spruce-base-color-border: hsla(0, 0%, 100%, 0.08); + --spruce-base-color-code-background: hsl(207, 64%, 18%); + --spruce-base-color-code-foreground: hsl(0, 0%, 95%); + --spruce-base-color-code-tab-background: hsla(0, 0%, 0%, 0.15); + --spruce-base-color-heading: hsl(0, 0%, 95%); + --spruce-base-color-link: hsl(261, 54%, 70%); + --spruce-base-color-link-hover: #b8a1e3; + --spruce-base-color-mark-background: hsl(50, 100%, 80%); + --spruce-base-color-mark-foreground: hsl(206, 100%, 7%); + --spruce-base-color-marker: hsl(261, 54%, 70%); + --spruce-base-color-primary: hsl(261, 54%, 70%); + --spruce-base-color-secondary: hsl(227, 92%, 55%); + --spruce-base-color-strong: hsl(0, 0%, 97%); + --spruce-base-color-text: hsl(0, 0%, 97%); +} + +:root[data-theme-mode=dark] { + --spruce-breadcrumb-color-separator: hsla(0, 0%, 100%, 0.1); +} + +:root[data-theme-mode=dark] { + --spruce-btn-color-discrete-background-hover: hsl(261, 52%, 59%); + --spruce-btn-color-discrete-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-discrete-foreground-hover: hsl(0, 0%, 100%); + --spruce-btn-color-install-background: hsl(207, 39%, 17%); + --spruce-btn-color-install-background-hover: hsl(207, 23%, 26%); + --spruce-btn-color-install-foreground: hsl(0, 0%, 100%); + --spruce-btn-color-discrete-background: hsla(0, 0%, 96%, 0.1); + --spruce-btn-color-primary-background: hsl(261, 52%, 59%); + --spruce-btn-color-primary-background-hover: hsl(261, 52%, 65%); + --spruce-btn-color-primary-foreground: hsl(0, 0%, 95%); + --spruce-btn-color-primary-shadow: #6035b1; + --spruce-btn-color-secondary-background: hsl(227, 92%, 55%); + --spruce-btn-color-secondary-background-hover: #3b64f7; + --spruce-btn-color-secondary-foreground: hsl(0, 0%, 95%); + --spruce-btn-color-secondary-shadow: #072bab; +} + +:root[data-theme-mode=dark] { + --spruce-form-color-background: #00223b; + --spruce-form-color-background-disabled: hsl(206, 100%, 7%); + --spruce-form-color-border: hsla(0, 0%, 100%, 0.08); + --spruce-form-color-border-disabled: hsla(0, 0%, 100%, 0.08); + --spruce-form-color-border-focus: hsl(261, 54%, 70%); + --spruce-form-color-check-background: hsl(261, 54%, 70%); + --spruce-form-color-check-focus-ring: hsl(261, 54%, 70%); + --spruce-form-color-check-foreground: hsl(206, 100%, 7%); + --spruce-form-color-invalid: hsl(0, 71%, 51%); + --spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25); + --spruce-form-color-label: hsl(0, 0%, 95%); + --spruce-form-color-legend: hsl(0, 0%, 95%); + --spruce-form-color-placeholder: hsl(0, 0%, 60%); + --spruce-form-color-range-thumb-background: hsl(261, 54%, 70%); + --spruce-form-color-range-thumb-focus-ring: hsl(261, 54%, 70%); + --spruce-form-color-range-track-background: hsla(0, 0%, 100%, 0.08); + --spruce-form-color-ring-focus: rgba(166, 137, 220, 0.25); + --spruce-form-color-select-foreground: hsl(0, 0%, 100%); + --spruce-form-color-text: hsl(0, 0%, 97%); + --spruce-form-color-valid: hsl(150, 100%, 33%); + --spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25); +} + +:root[data-theme-mode=dark] { + --spruce-hero-color-note-color: hsl(0, 0%, 100%); + --spruce-hero-color-note-background: hsl(207, 64%, 16%); + --spruce-hero-color-gradient-start: hsl(206, 100%, 6%); + --spruce-hero-color-gradient-end: hsl(206, 100%, 7%); +} + +:root[data-theme-mode=dark] { + --spruce-ide-color-header-background: hsl(0, 0%, 0%); +} + +:root[data-theme-mode=dark] { + --spruce-navigation-color-icon-background: hsl(207, 23%, 26%); + --spruce-navigation-color-icon-background-hover: hsl(207, 39%, 17%); + --spruce-navigation-color-icon-foreground: hsl(0, 0%, 100%); + --spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%); +} + +:root[data-theme-mode=dark] { + --spruce-modal-color-background: hsla(206, 100%, 3%, 0.7); +} + +:root[data-theme-mode=dark] { + --spruce-prism-color-color: hsl(217, 34%, 88%); + --spruce-prism-color-background: hsl(207, 83%, 10%); + --spruce-prism-color-comment: hsl(180, 9%, 55%); + --spruce-prism-color-punctuation: hsl(276, 68%, 75%); + --spruce-prism-color-namespace: hsl(197, 31%, 77%); + --spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56); + --spruce-prism-color-boolean: hsl(350, 100%, 67%); + --spruce-prism-color-number: hsl(14, 90%, 70%); + --spruce-prism-color-constant: hsl(221, 100%, 75%); + --spruce-prism-color-class-name: hsl(33, 100%, 77%); + --spruce-prism-color-regex: hsl(217, 34%, 88%); +} + +:root[data-theme-mode=dark] { + --spruce-selection-color-background: hsl(261, 54%, 70%); + --spruce-selection-color-foreground: hsl(0, 0%, 95%); +} + +:root[data-theme-mode=dark] { + --spruce-scrollbar-color-thumb-background: hsla(0, 0%, 100%, 0.15); + --spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, 0.25); + --spruce-scrollbar-color-track-background: hsla(0, 0%, 100%, 0.05); +} + +:root[data-theme-mode=dark] { + --spruce-table-color-border: hsla(0, 0%, 100%, 0.08); + --spruce-table-color-caption: hsl(0, 0%, 97%); + --spruce-table-color-heading: hsl(0, 0%, 95%); + --spruce-table-color-hover: hsla(0, 0%, 100%, 0.05); + --spruce-table-color-text: hsl(0, 0%, 97%); + --spruce-table-color-stripe: hsla(0, 0%, 100%, 0.025); +} + +[data-theme-mode=dark] { + color-scheme: dark; + /* stylelint-disable-next-line selector-no-qualifying-type */ +} +[data-theme-mode=dark] select.form-control:not([multiple]):not([size]) { + background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e'); +} + +.skip-link { + inset: -50vh auto auto 1.5rem; + position: fixed; +} +.skip-link:focus { + inset-block-start: 1.5rem; +} + +.site-navigation { + font-family: var(--doc-body-font-family); +} +@media (min-width: 80em) { + .site-navigation__btn { + display: none; + } +} +.site-navigation__btn[aria-expanded=true] + ul { + display: flex; +} +.site-navigation ul { + background-color: var(--spruce-base-color-background); + display: none; + flex-direction: column; + gap: 1rem; + inset: 100% 0 auto; + list-style: none; + margin: 0; + padding-block: 1.5rem; + padding-inline: clamp(1.5rem, 5vw, 3rem); + position: absolute; +} +@media (min-width: 80em) { + .site-navigation ul { + align-items: center; + background-color: transparent; + display: flex !important; + flex-direction: row; + flex-wrap: wrap; + gap: clamp(1.5rem, 5vw, 3rem); + inset: auto; + padding: 0; + position: relative; + } +} +.site-navigation li { + margin-block: 0; +} +.site-navigation a { + align-items: center; + color: var(--spruce-base-color-heading); + display: flex; + gap: 0.5rem; + text-decoration: none; +} +.site-navigation a:hover { + color: var(--spruce-base-color-primary); +} +.site-navigation a[aria-current=page] { + color: var(--spruce-base-color-primary); + font-weight: 700; +} + +.cookie-consent-helper { + display: flex; + inset: auto 1.5rem 1.5rem 1.5rem; + justify-content: center; + pointer-events: none; + position: fixed; + z-index: 25; +} + +.cookie-consent { + --spruce-base-color-text: hsl(0, 0%, 97%); + --spruce-base-color-link: hsl(261, 54%, 70%); + --spruce-base-color-link-hover: #b8a1e3; + align-items: center; + background-color: hsl(260, 70%, 6%); + border-radius: var(--spruce-border-radius-lg); + box-shadow: 0 0 3rem hsla(0, 0%, 0%, 0.1); + color: var(--spruce-base-color-text); + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem 1.5rem; + justify-content: center; + padding: 1rem; + pointer-events: all; + text-align: center; + transform: translateY(200%); +} +.cookie-consent--slidein { + animation: slidein var(--spruce-duration) forwards; +} +.cookie-consent--slideout { + animation: slideout var(--spruce-duration) forwards; +} +.cookie-consent__caption > * { + margin-block-end: 0; + margin-block-start: 0; +} +.cookie-consent__caption > * + * { + margin-block-start: 0.5rem; +} +.cookie-consent__btns { + display: flex; + gap: 1rem; +} + +@keyframes slidein { + from { + transform: translateY(200%); + } + to { + transform: translateY(0); + } +} +@keyframes slideout { + from { + transform: translateY(0); + } + to { + transform: translateY(200%); + } +} +.theme-switcher { + color: var(--spruce-base-color-text); + display: inline-flex; + position: relative; +} +.theme-switcher[data-theme-mode=system] .theme-switcher__system-mode { + display: flex; +} +.theme-switcher[data-theme-mode=light] .theme-switcher__light-mode { + display: flex; +} +.theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode { + display: flex; +} +.theme-switcher button { + display: none; +} +.theme-switcher button > * { + pointer-events: none; +} + +.heading { + margin-block-end: 3rem; +} +.heading > * { + margin-block-end: 0; + margin-block-start: 0; +} +.heading > * + * { + margin-block-start: 0.5rem; +} +.heading--center { + text-align: center; +} +.heading--center .heading__description { + margin-inline: auto; +} +.heading__title { + font-size: clamp(2.1rem, 2vw + 1rem, 3rem); +} +.heading__description { + font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem); + line-height: var(--spruce-line-height-md); + max-inline-size: 50ch; +} + +.breadcrumb-list { + list-style: none; + margin: 0; + padding: 0; + align-items: center; + display: flex; + max-inline-size: 100%; + overflow-x: auto; + white-space: nowrap; +} +.breadcrumb-list > li { + align-items: center; + display: inline-flex; + margin-block: 0; +} +.breadcrumb-list > li + li::before { + block-size: 0.4em; + border-block-end: 2px solid var(--spruce-breadcrumb-color-separator); + border-inline-end: 2px solid var(--spruce-breadcrumb-color-separator); + content: ""; + display: inline-flex; + inline-size: 0.4em; + margin-inline: 0.75em; + transform: rotate(-45deg); +} +[dir=rtl] .breadcrumb-list > li + li::before { + transform: rotate(45deg); +} + +.breadcrumb-list [aria-current=page] { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + max-inline-size: 20ch; + text-align: start; +} + +.accordion-list > * { + margin-block-end: 0; + margin-block-start: 0; +} +.accordion-list > * + * { + margin-block-start: 1rem; +} + +.getting-started-card { + position: relative; + align-items: flex-start; + background-color: var(--spruce-base-color-background); + border-radius: var(--spruce-border-radius-lg); + display: flex; + gap: 1.5rem; +} +.getting-started-card__link::before { + content: ""; + inset: 0; + position: absolute; +} + +.getting-started-card__caption > * { + margin-block-end: 0; + margin-block-start: 0; +} +.getting-started-card__caption > * + * { + margin-block-start: 0.5rem; +} +.getting-started-card picture { + --size: 5rem; + block-size: var(--size); + flex-shrink: 0; + inline-size: var(--size); +} +.getting-started-card__link { + font-size: var(--spruce-font-size-sm); + font-weight: 700; + text-decoration: none; + text-transform: uppercase; +} + +.accordion-card { + background-color: var(--spruce-base-color-background); + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--spruce-border-radius-lg); +} +.accordion-card__title { + font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem); + margin-block: 0; + padding: 1.5rem; +} +.accordion-card__title:has(.accordion-card__toggle) { + padding: 0; +} +.accordion-card__toggle { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font: inherit; + outline: inherit; + padding: 0; + align-items: center; + display: flex; + gap: 1.5rem; + inline-size: 100%; + justify-content: space-between; + padding: 1.5rem; + text-align: start; +} +.accordion-card__toggle:focus-visible .accordion-card__icon { + outline: 2px solid var(--spruce-btn-color-primary-background); + outline-offset: 2px; +} +.accordion-card__toggle[aria-expanded=true] svg { + rotate: 90deg; +} +.accordion-card__toggle[aria-expanded=true] .horizontal-line { + opacity: 0; +} +.accordion-card__icon { + --size: 1.75rem; + align-items: center; + background-color: var(--spruce-btn-color-primary-background); + block-size: var(--size); + border-radius: var(--spruce-border-radius-sm); + color: var(--spruce-btn-color-primary-foreground); + display: flex; + flex-shrink: 0; + inline-size: var(--size); + justify-content: center; +} +.accordion-card__icon svg { + --size: 1.25rem; + transition-duration: var(--spruce-duration); + transition-property: all; + transition-timing-function: var(--spruce-timing-function); + block-size: var(--size); + inline-size: var(--size); +} +.accordion-card__icon .horizontal-line { + transition-duration: var(--spruce-duration); + transition-property: all; + transition-timing-function: var(--spruce-timing-function); +} +.accordion-card__content { + transition-duration: var(--spruce-duration); + transition-property: grid-template-rows; + transition-timing-function: var(--spruce-timing-function); + display: grid; + padding-inline: 1.5rem; +} +.accordion-card__content[aria-hidden=true] { + grid-template-rows: 0fr; +} +.accordion-card__content[aria-hidden=false] { + grid-template-rows: 1fr; + padding-block-end: 1.5rem; +} +.accordion-card__content > div { + overflow: hidden; +} +.accordion-card__content > div > * { + margin-block-end: 0; + margin-block-start: 0; +} +.accordion-card__content > div > * + * { + margin-block-start: 0.5rem; +} +.accordion-card__content > div * + h2, +.accordion-card__content > div * + h3, +.accordion-card__content > div * + h4, +.accordion-card__content > div * + h5 { + margin-block-start: 1rem; +} + +.blog-card { + position: relative; +} +.blog-card__link::before { + content: ""; + inset: 0; + position: absolute; +} + +.blog-card > * { + margin-block-end: 0; + margin-block-start: 0; +} +.blog-card > * + * { + margin-block-start: 1rem; +} +.blog-card picture, +.blog-card img { + border-radius: var(--doc-border-radius-sm); +} +.blog-card__meta { + column-gap: 1.5rem; + display: flex; + flex-wrap: wrap; + row-gap: 0.5rem; +} +.blog-card__meta a { + position: relative; + z-index: 10; +} +.blog-card__title { + font-size: clamp(1.328125rem, 2vw + 1rem, 1.5625rem); + margin-block-start: 0.5rem; +} +.blog-card__link { + color: var(--spruce-base-color-heading); + text-decoration: none; +} +.blog-card__link:hover, .blog-card__link:focus { + color: var(--spruce-base-color-heading); +} +.blog-card .tags__title { + block-size: 1px !important; + border: 0 !important; + clip: rect(0, 0, 0, 0) !important; + inline-size: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; +} + +.template-card { + position: relative; +} +.template-card__link::before { + content: ""; + inset: 0; + position: absolute; +} + +.template-card > * { + margin-block-end: 0; + margin-block-start: 0; +} +.template-card > * + * { + margin-block-start: 0.5rem; +} +.template-card__title { + font-size: clamp(1.875rem, 2vw + 1rem, 2.5rem); + margin-block-start: 2rem; +} +.template-card__link { + color: var(--spruce-base-color-heading); + text-decoration: none; +} +.template-card__link:hover, .template-card__link:focus { + color: var(--spruce-base-color-heading); +} +.template-card__description { + font-size: clamp(0.99rem, 1vw + 0.55rem, 1.2rem); +} +.template-card__meta { + column-gap: 1.5rem; + display: flex; + flex-wrap: wrap; + margin-block-start: 1rem; + row-gap: 0.5rem; +} +.template-card__tags { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.color-card { + align-items: start; + display: flex; + gap: 1.5rem; +} +.color-card--bordered .color-card__color { + box-shadow: 0 0 0 1px var(--spruce-base-color-border) inset; +} +.color-card__color { + block-size: 3rem; + border-radius: var(--spruce-border-radius-lg); + flex-shrink: 0; + inline-size: 3rem; +} +.color-card__caption { + display: flex; + flex-direction: column; + line-height: var(--spruce-line-height-md); +} +.color-card__name { + color: var(--spruce-base-color-heading); + font-weight: 700; +} +.color-card__value { + font-weight: 300; +} + +.post-author { + --avatar-size: 2.5rem; + align-items: center; + display: flex; + gap: 0.5rem; + text-decoration: none; +} +.post-author__avatar { + block-size: var(--avatar-size); + border-radius: calc(var(--avatar-size) / 2); + inline-size: var(--avatar-size); +} +.post-author__name { + color: var(--spruce-base-color-text); +} + +.text-btn { + align-items: center; + display: inline-flex; + gap: 0.25rem; + line-height: 1; +} +.text-btn__icon { + --dimension: 0.65em; + block-size: var(--dimension); + inline-size: var(--dimension); +} + +.form-group-wrapper > * { + margin-block-end: 0; + margin-block-start: 0; +} +.form-group-wrapper > * + * { + margin-block-start: 1rem; +} + +.pagination a { + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1rem; + --spruce-font-weight: 500; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.75em; + --spruce-icon-size: 1em; + --spruce-padding: 0.75em 1em; + --spruce-shadow-size: 0.25rem; + align-items: center; + border-radius: var(--spruce-border-radius); + border-style: solid; + border-width: var(--spruce-border-width); + cursor: pointer; + display: inline-flex; + font-size: var(--spruce-font-size); + font-weight: var(--spruce-font-weight); + gap: var(--spruce-gap); + justify-content: center; + line-height: 1; + padding: var(--spruce-padding); + text-align: start; + text-decoration: none; + transition-duration: var(--spruce-duration); + transition-property: background-color, border-color, box-shadow, color; + transition-timing-function: var(--spruce-timing-function); +} + +.pagination a:focus { + outline-color: transparent; + outline-style: solid; +} + +.pagination a:disabled { + opacity: 0.5; + pointer-events: none; +} + +.pagination a--sm { + --spruce-font-size: 0.8rem; + --spruce-gap: 0.25rem; + --spruce-icon-padding: 0.5em; + --spruce-icon-size: 0.8rem; + --spruce-padding: 0.5em 0.75em; + font-size: var(--spruce-font-size); + gap: var(--spruce-gap); + padding: var(--spruce-padding); +} + +.pagination a--lg { + --spruce-font-size: 1.15rem; + --spruce-gap: 0.5rem; + --spruce-icon-padding: 0.9em; + --spruce-padding: 0.9em 1.15em; +} + +.pagination a--block { + inline-size: 100%; +} + +.pagination { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin-block-start: 3rem; +} +.pagination > * + * { + margin-block-start: 0; +} +.pagination a { + background-color: var(--spruce-btn-color-pagination-background); + border-color: var(--spruce-btn-color-pagination-background); + color: var(--spruce-btn-color-pagination-foreground); + --spruce-padding: 1em 1.25em; + border-radius: var(--doc-border-radius-md); + font-size: 0.91375rem; + font-weight: 700; + text-transform: uppercase; +} +.pagination a:focus-visible { + outline: 2px solid var(--spruce-btn-color-pagination-focus-ring); + outline-offset: 2px; +} +.pagination a:hover { + background-color: var(--spruce-btn-color-pagination-background-hover); + border-color: var(--spruce-btn-color-pagination-background-hover); + color: var(--spruce-btn-color-pagination-foreground-hover); +} +.pagination a[aria-current=page] { + background: var(--spruce-btn-color-pagination-background-hover); + border-color: var(--spruce-btn-color-pagination-background-hover); + color: var(--spruce-btn-color-pagination-foreground-hover); +} +.pagination a--sm { + min-inline-size: 1.75rem; +} + +.pagefind-ui__search-input { + --webkit-date-line-height: 1.375; + --spruce-border-radius: 0.425rem; + --spruce-border-width: 1px; + --spruce-font-size: 1rem; + --spruce-line-height: 1.5; + --spruce-padding: 0.5em 0.75em; + --spruce-textarea-block-size: 6rem; + appearance: none; + background-color: var(--spruce-form-color-background); + border: var(--spruce-border-width) solid var(--spruce-form-color-border); + border-radius: var(--spruce-border-radius); + box-sizing: border-box; + color: var(--spruce-form-color-text); + display: block; + font-size: var(--spruce-font-size); + inline-size: 100%; + line-height: var(--spruce-line-height); + padding: var(--spruce-padding); + transition-duration: var(--spruce-duration); + transition-property: border, box-shadow; + transition-timing-function: var(--spruce-timing-function); +} +.pagefind-ui__search-input::placeholder { + color: var(--spruce-form-color-placeholder); +} +.pagefind-ui__search-input::-webkit-datetime-edit { + line-height: var(--webkit-date-line-height); +} +.pagefind-ui__search-input:focus { + border-color: var(--spruce-form-color-border-focus); + box-shadow: 0 0 0 0.25rem var(--spruce-form-color-ring-focus); + outline: 2px solid transparent; +} +.pagefind-ui__search-input[type=color] { + --spruce-aspect-ratio: 1; + --spruce-block-size: 100%; + --spruce-inline-size: 2.625rem; + --spruce-padding: 0.5em; + aspect-ratio: var(--spruce-aspect-ratio); + block-size: var(--spruce-block-size); + inline-size: var(--spruce-inline-size); + padding: var(--spruce-padding); +} +.pagefind-ui__search-input[type=color]::-webkit-color-swatch-wrapper { + padding: 0; +} +.pagefind-ui__search-input[type=color]::-moz-color-swatch { + border: 0; + border-radius: var(--spruce-border-radius); +} +.pagefind-ui__search-input[type=color]::-webkit-color-swatch { + border: 0; + border-radius: var(--spruce-border-radius); +} +.pagefind-ui__search-input[disabled], .pagefind-ui__search-input[disabled=true] { + background-color: var(--spruce-form-color-background-disabled); + border-color: var(--spruce-form-color-border-disabled); + cursor: not-allowed; +} +textarea.pagefind-ui__search-input { + block-size: var(--spruce-textarea-block-size); + min-block-size: var(--spruce-textarea-block-size); + resize: vertical; +} + +.pagefind-ui { + position: relative; +} +.pagefind-ui__search-input { + border: 0; + border-block-end: 1px solid var(--spruce-base-color-border); + border-end-end-radius: 0; + border-end-start-radius: 0; + padding: 1rem 4.5rem 1rem 2.75rem !important; +} +.pagefind-ui__search-input:focus { + border-block-end: 1px solid var(--spruce-base-color-border); + box-shadow: none; +} +.pagefind-ui__form > * { + margin-block-end: 0; + margin-block-start: 0; +} +.pagefind-ui__form > * + * { + margin-block-start: 1.5rem; +} +.pagefind-ui__form::before { + --size: 1em; + background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3e%3cpath d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z" style="fill:hsl%28259, 53%, 94%%29;"/%3e%3c/svg%3e'); + background-size: var(--size); + block-size: var(--size); + content: ""; + display: inline-flex; + inline-size: var(--size); + inset: 1.25em auto auto 1rem; + position: absolute; +} +.pagefind-ui__search-clear { + background: none; + border: 0; + font-size: 0.7rem; + font-weight: 700; + inset-block-start: 2em; + inset-inline-end: 1rem; + margin-block-start: 0; + position: absolute; + text-transform: uppercase; +} +.pagefind-ui__drawer { + margin: 1rem 1rem 1.5rem; + max-block-size: 20rem; + overflow-y: auto; + padding-inline: 1rem; +} +.pagefind-ui__drawer::-webkit-scrollbar { + block-size: 0.5rem; + inline-size: 0.5rem; +} +.pagefind-ui__drawer::-webkit-scrollbar-thumb { + background: var(--spruce-scrollbar-color-thumb-background); + border-radius: var(--spruce-border-radius-sm); +} +.pagefind-ui__drawer::-webkit-scrollbar-thumb:hover { + background: var(--spruce-scrollbar-color-thumb-background-hover); +} +.pagefind-ui__drawer::-webkit-scrollbar-track { + background: var(--spruce-scrollbar-color-track-background); + border-radius: var(--spruce-border-radius-sm); +} +.pagefind-ui__results { + list-style: none; + margin: 0; + padding: 0; + padding-inline-end: 1.5rem; +} +.pagefind-ui__results > * { + margin-block-end: 0; + margin-block-start: 0; +} +.pagefind-ui__results > * + * { + margin-block-start: 1rem; +} +.pagefind-ui__results:empty { + display: none; +} +.pagefind-ui__results-area > * { + margin-block-end: 0; + margin-block-start: 0; +} +.pagefind-ui__results-area > * + * { + margin-block-start: 0.5rem; +} +.pagefind-ui__result-inner > * { + margin-block-end: 0; + margin-block-start: 0; +} +.pagefind-ui__result-inner > * + * { + margin-block-start: 0.25rem; +} +.pagefind-ui__result-title { + font-weight: 700; +} +.pagefind-ui__button { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font: inherit; + outline: inherit; + padding: 0; + color: var(--spruce-base-color-link); + margin-block-start: 1rem; + text-decoration: underline; +} +.pagefind-ui__button:hover, .pagefind-ui__button:focus { + color: var(--spruce-base-color-link-hover); +} +.pagefind-ui__hidden { + align-items: center; + display: flex; + justify-content: center; + margin-block-start: 0; + min-block-size: 10rem; +} +.pagefind-ui__hidden::before { + content: "No recent searches"; +} + +.modal-backdrop { + align-items: start; + backdrop-filter: blur(0.15rem); + background-color: var(--spruce-modal-color-background); + display: none; + inset: 0; + justify-content: center; + overflow-y: auto; + padding: 1rem; + position: fixed; + z-index: 25; +} +.modal-backdrop--open { + display: flex; +} + +.modal { + background-color: var(--spruce-base-color-background); + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--spruce-border-radius-sm); + box-shadow: 0 0 0.25rem hsla(201.15, 72.03%, 32.71%, 0.05); + inline-size: 40rem; + margin-block: 7rem; + margin-inline: auto; + max-inline-size: 100%; + outline: 0; + position: relative; +} + +.template-preview { + background-color: hsl(0, 0%, 97%); + border-radius: var(--doc-border-radius-sm); + display: flex; + padding: clamp(1rem, 5vw, 2rem); +} +.template-preview img { + border-radius: var(--doc-border-radius-sm); + box-shadow: 0 0 1.25rem hsla(0, 0%, 0%, 0.05); +} + +.template-tag { + background-color: var(--spruce-btn-color-dark-background); + border-radius: var(--spruce-border-radius-sm); + color: var(--spruce-btn-color-dark-foreground); + font-size: var(--spruce-font-size-sm); + font-weight: 700; + padding: 0.25rem 1rem; + text-transform: uppercase; +} +.template-tag--free { + background-color: #dbffed; + color: #005c2e; +} + +.template-actions { + --columns: 1; + display: grid; + gap: 1.5rem; + grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); +} +@media (min-width: 64em) { + .template-actions { + --columns: 2; + } +} + +.template-meta { + list-style: none; + margin: 0; + padding: 0; + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--spruce-border-radius-sm); + padding: 1.5rem; +} +.template-meta > * + * { + border-block-start: 1px dashed var(--spruce-base-color-border); + margin-block-start: 1rem; + padding-block-start: 1rem; +} +.template-meta__item { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: space-between; +} +.template-meta__item--tags { + justify-content: end; +} +.template-meta__item strong { + color: var(--spruce-base-color-heading); +} + +.notification { + border-radius: var(--spruce-border-radius-sm); + display: block; + font-size: 1rem; + padding: 1rem 1.5rem; + position: relative; +} +.notification code, +.notification kbd, +.notification samp { + border: 1px solid; +} +.notification--info { + background-color: rgba(0, 161, 214, 0.1); + border-block-start: 0.5rem solid var(--spruce-alert-color-info); +} +.notification--info .notification__icon { + color: var(--spruce-alert-color-info); +} +.notification--info code, +.notification--info kbd, +.notification--info samp { + border-color: rgba(0, 161, 214, 0.5); +} +.notification--good { + background-color: rgba(0, 168, 84, 0.1); + border-block-start: 0.5rem solid var(--spruce-alert-color-success); +} +.notification--good .notification__icon { + color: var(--spruce-alert-color-success); +} +.notification--good code, +.notification--good kbd, +.notification--good samp { + border-color: rgba(0, 168, 84, 0.5); +} +.notification--bad { + background-color: rgba(219, 41, 41, 0.1); + border-block-start: 0.5rem solid var(--spruce-alert-color-danger); +} +.notification--bad .notification__icon { + color: var(--spruce-alert-color-danger); +} +.notification--bad code, +.notification--bad kbd, +.notification--bad samp { + border-color: rgba(219, 41, 41, 0.5); +} +.notification__content > * { + margin-block-end: 0; + margin-block-start: 0; +} +.notification__content > * + * { + margin-block-start: 0.25rem; +} +.notification__icon { + background-color: var(--spruce-base-color-background); + block-size: 2rem; + border: 4px solid var(--spruce-base-color-background); + border-radius: 1rem; + inline-size: 2rem; + inset: calc(-1rem - 4px) -1rem auto auto; + position: absolute; +} + +.open-search { + position: relative; + align-items: center; + display: none; + gap: 0.5rem; +} +.open-search__btn::before { + content: ""; + inset: 0; + position: absolute; +} + +@media (min-width: 80em) { + .open-search { + display: flex; + } +} +.open-search__icon { + --size: 1rem; + block-size: var(--size); + color: var(--spruce-search-color-icon); + inline-size: var(--size); +} + +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.tags__title { + margin-block: 0; +} +.tags__list { + list-style: none; + margin: 0; + padding: 0; + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} +.tags__list > * + * { + margin-block-start: 0; +} + +.ide-wrapper { + margin-inline: auto; + max-inline-size: 74rem; + padding-block-end: var(--spruce-section-gap); +} + +.ide { + background-color: var(--spruce-base-color-background); + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--doc-border-radius-md); + box-shadow: 0 0 3rem hsla(0, 0%, 0%, 0.1); + font-size: 0.9375rem; + margin-inline: auto; +} +.ide__header { + align-items: center; + background-color: var(--spruce-ide-color-header-background); + border-block-end: 1px solid var(--spruce-base-color-border); + border-radius: var(--doc-border-radius-md) var(--doc-border-radius-md) 0 0; + display: flex; + gap: 1rem; + padding: 0.45rem 1.25rem; +} +.ide__controls { + display: flex; + gap: 0.5rem; +} +.ide__control { + --dimension: 0.75rem; + block-size: var(--dimension); + border-radius: 50%; + inline-size: var(--dimension); +} +.ide__inner { + display: grid; + grid-template-columns: minmax(0, 1fr); + overflow: hidden; + position: relative; +} +@media (min-width: 64em) { + .ide__inner { + grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); + } +} +.ide__toggle { + border-end-start-radius: 0 !important; + border-start-end-radius: 0 !important; + inset: auto 0 0 auto; + position: absolute; +} +@media (min-width: 64em) { + .ide__toggle { + display: none; + position: relative; + } +} +.ide__sidebar { + background-color: var(--spruce-base-color-background); + border-end-end-radius: var(--doc-border-radius-md); + border-end-start-radius: var(--doc-border-radius-md); + inset: 0 0 0 auto; + position: absolute; + z-index: 2; +} +@media (min-width: 64em) { + .ide__sidebar { + border-end-end-radius: 0; + position: relative; + } +} +.ide__sidebar-helper { + block-size: 100%; + overflow-y: auto; + padding: 2rem; +} +.ide__sidebar-helper > * { + margin-block-end: 0; + margin-block-start: 0; +} +.ide__sidebar-helper > * + * { + margin-block-start: 1rem; +} +@media (min-width: 64em) { + .ide__sidebar-helper { + display: block !important; + } +} +.ide__editor, .ide__editor > pre, .ide__editor > pre > code { + block-size: 100%; + border-end-start-radius: var(--doc-border-radius-md); + margin-block: 0; + max-block-size: 28rem; +} +@media (min-width: 64em) { + .ide__editor, .ide__editor > pre, .ide__editor > pre > code { + border-end-start-radius: 0; + } +} +.ide pre[class*=language-] { + border-radius: 0 0 var(--doc-border-radius-md); + padding: 2rem 2.25rem; +} + +.ide-section { + display: flex; + flex-direction: column; + gap: 0.85em; +} +.ide-section__title { + align-items: center; + display: flex; + font-size: 0.9375rem; + font-weight: 700; + gap: 0.5rem; + line-height: 1; + margin-block: 0; +} +.ide-section__title svg { + --dimension: 0.9rem; + block-size: var(--dimension); + color: hsl(207, 90%, 61%); + flex-shrink: 0; + inline-size: var(--dimension); +} +.ide-section__list { + list-style: none; + margin: 0; + padding: 0; +} +.ide-section__list > * { + margin-block-end: 0; + margin-block-start: 0; +} +.ide-section__list > * + * { + margin-block-start: 0.85em; +} +.ide-section__list--border { + border-inline-start: 1px solid var(--spruce-base-color-border); + margin-inline-start: 0.5rem; + padding-inline-start: 1rem; +} +.ide-section button { + align-items: center; + background: none; + border: 0; + cursor: pointer; + display: flex; + font-family: var(--doc-heading-font-family); + gap: 0.5rem; + line-height: 1; + padding: 0; + text-align: start; +} +.ide-section button svg { + --dimension: 0.85rem; + block-size: var(--dimension); + color: hsl(330, 53%, 60%); + flex-shrink: 0; + inline-size: var(--dimension); +} +.ide-section .active { + color: var(--spruce-base-color-heading); + font-weight: 700; +} + +.code-tab { + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--spruce-border-radius-sm); + overflow: hidden; +} +.code-tab__header { + align-items: center; + background-color: var(--spruce-base-color-code-tab-background); + border-block-end: 1px solid var(--spruce-base-color-border); + border-start-end-radius: var(--spruce-border-radius-sm); + border-start-start-radius: var(--spruce-border-radius-sm); + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.5rem; + justify-content: space-between; + padding: 1rem; +} +.code-tab__header .copy-btn > span { + display: inline-flex; +} +.code-tab__title { + color: var(--spruce-base-color-heading); + font-family: var(--spruce-font-family-heading); + font-size: 1rem; + font-weight: var(--spruce-font-weight-heading); + line-height: var(--spruce-line-height-heading); + margin-block: 0; +} +.code-tab__open-new { + align-items: center; + display: flex; + font-size: var(--spruce-font-size-sm); + gap: 0.5rem; + line-height: 1; +} +.code-tab__open-new svg { + block-size: 0.85em; + inline-size: 0.85em; +} +.code-tab__group { + list-style: none; + margin: 0; + padding: 0; + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.25rem 0.5rem; +} +.code-tab__group > * + * { + margin-block-start: 0; +} +.code-tab__group--title { + gap: 0.25rem 1rem; +} +@media (min-width: 48em) { + .code-tab__group--tabs { + margin-inline-start: auto; + } +} +.code-tab__group--tabs li { + display: inline-flex; +} +.code-tab__body [class^=language-] { + margin-block: 0; + max-block-size: 40rem; +} +.code-tab__body iframe { + border: 0; +} + +.preview { + border: 1px solid var(--spruce-base-color-border); + border-radius: var(--spruce-border-radius-sm); + font-size: 1rem; + padding: 1.5rem; +} +.preview > * { + margin-block-end: 0; + margin-block-start: 0; +} +.preview > * + * { + margin-block-start: 1.5rem !important; +} +.preview > * { + font-family: var(--spruce-font-family-base); +} +.preview ul > li > p { + margin-block: 0; +} + +.button-grid { + align-items: flex-start; + display: flex; + gap: 1.5rem; +} +.button-grid--stacked { + flex-wrap: wrap; +} + +.inline-text-element-list { + list-style: none; + margin: 0; + padding: 0; +} +.inline-text-element-list > * { + margin-block-end: 0; + margin-block-start: 0; +} +.inline-text-element-list > * + * { + margin-block-start: 1rem; +} +@media (min-width: 48em) { + .inline-text-element-list { + column-gap: 3rem; + columns: 2 auto; + } +} + +.sidebar-section__title { + color: var(--spruce-base-color-heading); + font-size: var(--spruce-font-size-base); + margin-block: 0; +} +.sidebar-section__navigation { + border-inline-start: 1px solid var(--spruce-base-color-border); + font-size: 1rem; + margin-block-start: 1rem; + padding-inline-start: 1rem; +} +.sidebar-section__navigation ul { + list-style: none; + margin: 0; + padding: 0; +} +.sidebar-section__navigation ul > * { + margin-block-end: 0; + margin-block-start: 0; +} +.sidebar-section__navigation ul > * + * { + margin-block-start: 0.65rem; +} +.sidebar-section__navigation li { + line-height: var(--spruce-line-height-md); +} +.sidebar-section__navigation a { + color: var(--spruce-base-color-text); + text-decoration: none; +} +.sidebar-section__navigation a[data-state=active] { + color: var(--spruce-base-color-heading); + font-weight: 700; + position: relative; +} +.sidebar-section__navigation a[data-state=active]::before { + background-color: var(--spruce-base-color-primary); + border-radius: 0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm) 0; + content: ""; + inline-size: 0.3rem; + inset-block: 0; + inset-inline-start: -1rem; + position: absolute; +} + +@media (min-width: 80em) { + .toc { + max-block-size: calc(100vh - 4rem); + overflow-x: hidden; + overflow-y: auto; + } + .toc::-webkit-scrollbar { + block-size: 0.5rem; + inline-size: 0.5rem; + } + .toc::-webkit-scrollbar-thumb { + background: var(--spruce-scrollbar-color-thumb-background); + border-radius: var(--spruce-border-radius-sm); + } + .toc::-webkit-scrollbar-thumb:hover { + background: var(--spruce-scrollbar-color-thumb-background-hover); + } + .toc::-webkit-scrollbar-track { + background: var(--spruce-scrollbar-color-track-background); + border-radius: var(--spruce-border-radius-sm); + } +} +.toc__title { + color: var(--spruce-base-color-heading); + font-size: var(--spruce-font-size-base); + margin-block: 0; +} +.toc__navigation { + border-inline-start: 1px solid var(--spruce-base-color-border); + margin-block-start: 1rem; + padding-inline-start: 1rem; +} +.toc__navigation ol { + list-style: none; + margin: 0; + padding: 0; + max-inline-size: 95%; +} +.toc__navigation ol > * { + margin-block-end: 0; + margin-block-start: 0; +} +.toc__navigation ol > * + * { + margin-block-start: 0.5rem; +} +.toc__navigation .toc-level-h3 a { + padding-inline-start: 1rem; +} +.toc__navigation a { + color: var(--spruce-base-color-text); + display: inline-flex; + line-height: var(--spruce-line-height-md); + text-decoration: none; +} +.toc__navigation a:hover { + color: var(--spruce-base-color-primary); +} +.toc__navigation .active { + color: var(--spruce-base-color-heading); + font-weight: 700; + position: relative; +} +.toc__navigation .active::before { + background-color: var(--spruce-base-color-primary); + border-radius: 0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm) 0; + content: ""; + inline-size: 0.3rem; + inset-block: 0; + inset-inline-start: -1rem; + position: absolute; +} + +.post-navigation { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: space-between; +} + +.post-navigation-item { + align-items: center; + display: flex; + gap: 1rem; + text-decoration: none; +} +.post-navigation-item:hover .post-navigation-item__icon { + background-color: var(--spruce-navigation-color-icon-background-hover); + color: var(--spruce-navigation-color-icon-foreground-hover); +} +.post-navigation-item--next { + margin-inline-start: auto; + text-align: end; +} +.post-navigation-item__icon { + transition-duration: var(--spruce-duration); + transition-property: all; + transition-timing-function: var(--spruce-timing-function); + align-items: center; + background-color: var(--spruce-navigation-color-icon-background); + block-size: 3rem; + border-radius: var(--doc-border-radius-md); + color: var(--spruce-navigation-color-icon-foreground); + display: flex; + flex-shrink: 0; + inline-size: 3rem; + justify-content: center; +} +.post-navigation-item__icon svg { + --size: 1.15rem; + block-size: var(--size); + inline-size: var(--size); +} +[dir=rtl] .post-navigation-item__icon svg { + transform: rotate(180deg); +} + +.post-navigation-item__caption { + color: var(--spruce-base-color-text); + line-height: var(--spruce-line-height-md); +} +.post-navigation-item__title { + color: var(--spruce-base-color-primary); + display: flex; + font-weight: 700; +} + +code[class*=language-], +pre[class*=language-] { + border-radius: var(--spruce-border-radius-sm); + color: var(--spruce-prism-color-color); + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 0.9375rem; + hyphens: none; + line-height: 1.5; + tab-size: 4; + text-align: left; + white-space: pre; + word-break: normal; + word-spacing: normal; + word-wrap: normal; +} + +@media print { + code[class*=language-], + pre[class*=language-] { + text-shadow: none; + } +} +/* Code blocks */ +pre[class*=language-] { + display: grid; + overflow: auto; + padding: 1.5rem; +} + +pre[class*=language-] code { + background-color: transparent; + padding: 0; +} + +:not(pre) > code[class*=language-], +pre[class*=language-] { + background: var(--spruce-prism-color-background); + overflow-x: auto; +} + +.token.comment, +.token.prolog, +.token.cdata { + color: var(--spruce-prism-color-comment); + font-style: italic; +} + +.token.punctuation { + color: var(--spruce-prism-color-punctuation); +} + +.namespace { + color: var(--spruce-prism-color-namespace); +} + +.token.deleted { + color: var(--spruce-prism-color-deleted); + font-style: italic; +} + +.token.symbol, +.token.operator, +.token.keyword, +.token.property { + color: var(--spruce-prism-color-namespace); +} + +.token.tag { + color: var(--spruce-prism-color-punctuation); +} + +.token.boolean { + color: var(--spruce-prism-color-boolean); +} + +.token.number { + color: var(--spruce-prism-color-number); +} + +.token.constant, +.token.builtin, +.token.string, +.token.url, +.token.entity, +.language-css .token.string, +.style .token.string, +.token.char { + color: var(--spruce-prism-color-constant); +} + +.token.selector, +.token.function, +.token.doctype { + color: var(--spruce-prism-color-punctuation); + font-style: italic; +} + +.token.attr-name, +.token.inserted { + color: var(--spruce-prism-color-constant); + font-style: italic; +} + +.token.class-name, +.token.atrule { + color: var(--spruce-prism-color-class-name); +} + +.token.regex, +.token.important, +.token.variable { + color: var(--spruce-prism-color-regex); +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.anchor-heading { + align-items: center; + display: flex; + gap: 1rem; + justify-content: space-between; + position: relative; +} +.anchor-heading:hover .anchor-heading__link, .anchor-heading:focus-within .anchor-heading__link { + opacity: 1; +} +.anchor-heading h2, +.anchor-heading h3 { + margin-block: 0; +} +.anchor-heading__link { + transition-duration: var(--spruce-duration); + transition-property: all; + transition-timing-function: var(--spruce-timing-function); + display: inline-flex; + flex-shrink: 0; + opacity: 0; +} +.anchor-heading__link svg { + --size: 0.65em; + block-size: var(--size); + inline-size: var(--size); +} + +.site-header { + position: relative; + z-index: 10; +} +.site-header__inner { + --block-size: 5rem; + align-items: center; + block-size: var(--block-size); + display: flex; + flex-wrap: wrap; + gap: clamp(1rem, 3vw, 3rem); + justify-content: space-between; +} +@media (min-width: 64em) { + .site-header__inner { + --block-size: 6rem; + } +} +.site-header__logo { + align-items: center; + display: flex; +} +.site-header__logo a { + display: inline-flex; +} +.site-header__logo svg { + block-size: 1.725rem; + bottom: -0.1em; + inline-size: auto; + position: relative; +} +.site-header__logo--ui svg { + block-size: 2.1rem; +} +.site-header__column { + align-items: center; + display: flex; + flex-grow: 1; + gap: clamp(1rem, 5vw, 3rem); +} +.site-header__actions { + display: flex; + gap: 1rem; +} +@media (min-width: 80em) { + .site-header__actions { + gap: 3rem; + } +} +.site-header__socials { + display: flex; + gap: 1rem; +} +.site-header__socials .btn:last-child { + display: none; +} +@media (min-width: 64em) { + .site-header__socials .btn:last-child { + display: inline-flex; + } +} +@media (min-width: 80em) { + .site-header__search-btn { + display: none; + } +} +.site-header__navigation { + margin-inline-start: auto; +} +@media (min-width: 80em) { + .site-header__navigation { + margin-inline-start: 0; + } +} +.site-header__navigation ul { + border-block-start: 1px solid var(--spruce-base-color-border); +} +@media (min-width: 80em) { + .site-header__navigation ul { + border-block-start: none; + } +} + +.hero-wrapper { + background: linear-gradient(0deg, var(--spruce-hero-color-gradient-start) 0%, var(--spruce-hero-color-gradient-end) 100%); +} + +.hero__caption { + margin-inline: auto; + max-inline-size: 52rem; + padding-block: var(--spruce-section-gap-half); + text-align: center; +} +@media (min-width: 64em) { + .hero__caption { + padding-block: calc(var(--spruce-section-gap-half) / 1.25) var(--spruce-section-gap-half); + } +} +.hero__note { + background-color: var(--spruce-hero-color-note-background); + border-radius: var(--spruce-border-radius-sm); + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + color: var(--spruce-hero-color-note-color); + display: inline; + font-size: 1rem; + isolation: isolate; + line-height: var(--spruce-line-height-md); + padding: 0.5em 0.8em 0.5em 0.65em; + text-decoration: none; +} +.hero__note:hover, .hero__note:focus { + color: var(--spruce-hero-color-note-color); +} +.hero__note svg { + --size: 1em; + block-size: var(--size); + color: hsl(45, 100%, 50%); + inline-size: var(--size); + inset-block-end: -0.15em; + position: relative; +} +.hero__note + * { + margin-block-start: 1.5rem !important; +} +.hero__title { + font-size: clamp(2.75rem, 4vw + 1rem, 5rem); + font-weight: 400; + letter-spacing: -0.035em; + margin-block: 0; + margin-inline: auto; + max-inline-size: 15ch; + text-wrap: balance; +} +.hero__title span { + font-weight: 700; +} +.hero__description { + font-size: clamp(0.945rem, 1vw + 0.85rem, 1.35rem); + margin-block: 1.25rem 0; + margin-inline: auto; + max-inline-size: 45ch; +} +.hero__btns { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; + margin-top: 2.15rem; +} + +.post-heading { + align-items: center; + display: grid; + gap: 1rem; + grid-template-columns: minmax(0, 1fr); + justify-content: center; + padding-block: clamp(3rem, 10vw, 5rem) clamp(4.5rem, 10vw, 7rem); + text-align: center; +} +@media (min-width: 64em) { + .post-heading { + grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); + justify-content: flex-start; + text-align: start; + } +} +.post-heading--center { + grid-template-columns: minmax(0, 1fr); + justify-content: center; + padding-block: clamp(5rem, 10vw + 1rem, 7rem) 4.5rem; + text-align: center; +} +.post-heading--center .breadcrumb-list { + margin-inline: auto; +} +.post-heading--center .post-heading__title { + font-size: clamp(2.55rem, 4vw + 1rem, 4.25rem); + margin-inline: auto; +} +.post-heading--center .post-heading__description { + margin-inline: auto; +} +.post-heading__title { + font-size: clamp(2.4rem, 4vw + 1rem, 4rem); + letter-spacing: -2px; + line-height: 1; + margin-block: 0; + margin-inline: auto; + max-inline-size: 20ch; + text-wrap: balance; +} +@media (min-width: 64em) { + .post-heading__title { + margin-inline: 0; + } +} +.post-heading__breadcrumb { + display: flex; + margin-block-start: 1rem; +} +.post-heading__description { + font-size: clamp(0.875rem, 1vw + 0.75rem, 1.25rem); + margin: 1.5rem 0 0; + margin-block: 0; + margin-inline: auto; + max-inline-size: 50ch; + text-wrap: balance; +} +@media (min-width: 64em) { + .post-heading__description { + margin-inline: 0; + } +} +.post-heading__meta { + align-items: center; + column-gap: 1.5rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-block-start: 3rem; + row-gap: 0.5rem; +} + +.post-content > * { + margin-block-end: 0; + margin-block-start: 0; +} +.post-content > * + * { + margin-block-start: 1.5rem; +} +@media (min-width: 64em) { + .post-content { + font-size: 1.0375rem; + } +} +.post-content--blog :is(dd, dl, dl, h1, h2, h3, h4, h5, h6, hr, ul, ol, p:not(p:has(img)), blockquote, form, pre, [class*=language-], .notification, .anchor-heading) { + inline-size: 100%; + margin-inline: auto; + max-inline-size: 45rem; +} +.post-content * + h2, +.post-content * + h3, +.post-content * + .anchor-heading { + margin-block-start: 3rem; +} +.post-content img, +.post-content iframe { + border-radius: var(--doc-border-radius-sm); +} +.post-content iframe { + aspect-ratio: 16/10; + block-size: auto; + inline-size: 100; +} +.post-content > picture:first-child + * { + margin-block-start: 3rem; +} +.post-content .anchor-heading h2, +.post-content .anchor-heading h3 { + scroll-margin-top: 1.5rem; +} +.post-content pre[class*=language-] { + position: relative; +} +.post-content pre[class*=language-]::before { + border-radius: 0 0 var(--spruce-border-radius-sm) var(--spruce-border-radius-sm); + color: var(--spruce-prism-color-comment); + content: attr(data-language); + display: inline-block; + font-family: var(--doc-heading-font-family); + font-size: 0.6rem; + font-weight: 500; + inset: 1rem 1rem auto auto; + line-height: 1; + pointer-events: none; + position: absolute; + text-transform: uppercase; +} +.post-content a[href*=youtube] img { + aspect-ratio: 16/9; + inline-size: 100%; + object-fit: cover; + object-position: center; +} + +.cta { + background-color: var(--spruce-footer-color-background); + border-block-end: 1px solid hsla(0, 0%, 100%, 0.08); + padding-block: var(--spruce-section-gap-half); +} +.cta__inner { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.5rem 3rem; + justify-content: space-between; +} +.cta__caption > * { + margin-block-end: 0; + margin-block-start: 0; +} +.cta__caption > * + * { + margin-block-start: 1rem; +} +.cta .heading { + margin-block-end: 0; +} +.cta * { + color: hsl(0, 0%, 100%); +} +.cta p { + font-size: clamp(1.02rem, 2vw + 1rem, 1.2rem); + max-inline-size: 55ch; +} + +.site-footer { + background-color: var(--spruce-footer-color-background); + color: hsla(0, 0%, 100%, 0.85); + font-size: 1rem; +} +.site-footer a { + color: hsl(261, 54%, 70%); +} +.site-footer a:hover, .site-footer a:focus { + color: #b8a1e3; +} +.site-footer__slogen { + color: hsl(0, 0%, 100%); + font-family: var(--doc-heading-font-family); + font-size: clamp(2.1rem, 4vw + 1rem, 3rem); + font-weight: 700; + grid-auto-rows: auto; + line-height: calc(var(--spruce-line-height-heading) * 1.15); + margin-block: 0 2rem; +} +.site-footer__top { + --gtc: minmax(0, 1fr); + display: grid; + gap: 3rem; + grid-template-columns: var(--gtc); + padding-block: var(--spruce-section-gap); +} +@media (min-width: 64em) { + .site-footer__top { + --gtc: minmax(0, 2.5fr) repeat(3, minmax(0, 1fr)); + } +} +.site-footer__logo { + display: inline-flex; + opacity: 0.15; +} +.site-footer__logo svg { + block-size: auto; + inline-size: 2.5rem; +} +.site-footer__title { + color: hsl(0, 0%, 100%); + font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem); + margin-block: 0 1.5rem; +} +.site-footer strong { + color: hsl(0, 0%, 100%); +} +.site-footer__navigation { + list-style: none; + margin: 0; + padding: 0; + font-size: 1rem; +} +.site-footer__navigation > * { + margin-block-end: 0; + margin-block-start: 0; +} +.site-footer__navigation > * + * { + margin-block-start: 0.5rem; +} +.site-footer__navigation a { + color: hsla(0, 0%, 100%, 0.85); + text-decoration: none; +} +.site-footer__navigation a:hover, .site-footer__navigation a:focus, .site-footer__navigation a:active, .site-footer__navigation a[aria-current=page] { + color: #b8a1e3; +} +.site-footer__navigation a[aria-current=page] { + font-weight: 700; +} +.site-footer__navigation a span { + margin-inline-end: 0.5rem; +} +.site-footer__bottom { + border-block-start: 1px solid hsla(0, 0%, 100%, 0.08); + display: flex; + flex-direction: column; + gap: 1rem 1.5rem; + padding-block: clamp(1.5rem, 5vw, 3rem); +} +@media (min-width: 64em) { + .site-footer__bottom { + align-items: center; + flex-direction: row; + justify-content: space-between; + } +} +.site-footer__cone-logo { + align-items: center; + display: inline-flex; + margin-inline-end: 0.5rem; +} +.site-footer__cone-logo svg { + --size: 1.5rem; + block-size: var(--size); + inline-size: var(--size); +} +.site-footer__copyright { + margin-block: 0; +} + +.container { + --inline-size: var(--spruce-container-inline-size); + --gap: clamp(1.5rem, 5vw, 3rem); + inline-size: 100%; + margin-inline: auto; + max-inline-size: var(--inline-size); + padding-inline: var(--gap); +} +.container--narrow { + --inline-size: 60rem; +} +.container--narrower { + --inline-size: 50rem; +} + +.l-documentation { + padding-block: clamp(1.5rem, 5vw, 3rem) clamp(3rem, 5vw, 4.5rem); +} +.l-documentation--code { + padding-block: 0 clamp(3rem, 5vw, 4.5rem); +} +.l-documentation__inner { + display: grid; + gap: 4.5rem; + grid-template-columns: minmax(0, 1fr); +} +@media (min-width: 48em) { + .l-documentation__inner { + grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); + } +} +@media (min-width: 64em) { + .l-documentation__inner { + grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); + } +} +.l-documentation__sidebar { + inset-block-start: 2rem; + overflow-y: auto; + padding-inline-end: 1.5rem; +} +.l-documentation__sidebar > * { + margin-block-end: 0; + margin-block-start: 0; +} +.l-documentation__sidebar > * + * { + margin-block-start: 1.5rem; +} +.l-documentation__sidebar::-webkit-scrollbar { + block-size: 0.5rem; + inline-size: 0.5rem; +} +.l-documentation__sidebar::-webkit-scrollbar-thumb { + background: var(--spruce-scrollbar-color-thumb-background); + border-radius: 0.15rem; +} +.l-documentation__sidebar::-webkit-scrollbar-thumb:hover { + background: var(--spruce-scrollbar-color-thumb-background-hover); +} +.l-documentation__sidebar::-webkit-scrollbar-track { + background: var(--spruce-scrollbar-color-track-background); + border-radius: 0.15rem; +} +@media (min-width: 48em) { + .l-documentation__sidebar { + max-block-size: calc(100vh - 4rem); + position: sticky; + } +} +.l-documentation__body-helper { + order: -1; +} +@media (min-width: 48em) { + .l-documentation__body-helper { + order: 2; + } +} +.l-documentation__body { + column-gap: 4.5rem; + display: grid; + grid-auto-rows: min-content; + grid-template-columns: minmax(0, 1fr); + row-gap: 1.5rem; +} +@media (min-width: 80em) { + .l-documentation__body { + grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); + } +} +.l-documentation__table-of-content { + inset-block-start: 2rem; + margin-inline: auto; + max-inline-size: 45rem; + position: sticky; +} +@media (min-width: 80em) { + .l-documentation__table-of-content-helper { + grid-column: 2/3; + order: 2; + } +} +@media (min-width: 80em) { + .l-documentation__content { + grid-column: 1/2; + } +} +.l-documentation__content .post-content { + margin-inline: auto; + max-inline-size: 45rem; +} +.l-documentation__title { + font-size: clamp(2.3925rem, 3vw + 1rem, 3.3rem); + margin-block: 0; + margin-inline: auto; + max-inline-size: 45rem; +} +@media (min-width: 80em) { + .l-documentation__title { + grid-column: 1/2; + } +} +.l-documentation__navigation-top { + border-block-end: 1px solid var(--spruce-base-color-border); + margin-block-end: clamp(3rem, 5vw, 4.5rem); + padding-block: 1.5rem; +} +.l-documentation__navigation-bottom { + border-block-start: 1px solid var(--spruce-base-color-border); + margin-block-start: 4.5rem; + padding-block-start: 1.5rem; +} + +.l-post__inner { + display: flex; + flex-direction: column; + padding-block-end: var(--spruce-section-gap); +} + +.l-faq { + padding-block: var(--spruce-section-gap-half) var(--spruce-section-gap); +} + +.l-getting-started { + padding-block: 3rem; +} +.l-getting-started--border-block-end { + border-block-end: 1px solid var(--spruce-base-color-border); +} +.l-getting-started--border-block-start { + border-block-start: 1px solid var(--spruce-base-color-border); +} +.l-getting-started__inner { + align-items: flex-start; + display: grid; + gap: 3rem; +} +@supports (inline-size: min(20rem, 100%)) { + .l-getting-started__inner { + grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); + } +} + +.l-blog { + padding-block: 0 clamp(4.5rem, 8vw, 7rem); +} +.l-blog__inner { + --column: 1; + display: grid; + gap: 3rem; + grid-template-columns: repeat(var(--column), minmax(0, 2fr)); +} +@media (min-width: 48em) { + .l-blog__inner { + --column: 2; + } +} +@media (min-width: 80em) { + .l-blog__inner { + --column: 3; + } +} + +.l-template { + padding-block: 0 clamp(4.5rem, 8vw, 7rem); +} +.l-template__inner { + display: grid; + gap: clamp(3rem, 5vw, 4.5rem); + grid-template-columns: minmax(0, 2fr); + margin-block-start: clamp(4.5rem, 5vw, 7rem); +} +@media (min-width: 64em) { + .l-template__inner { + grid-template-columns: minmax(0, 2fr) 28rem; + } +} +@media (min-width: 80em) { + .l-template__inner { + grid-template-columns: minmax(0, 2fr) 32rem; + } +} +.l-template__sidebar { + order: -1; +} +.l-template__sidebar > * { + margin-block-end: 0; + margin-block-start: 0; +} +.l-template__sidebar > * + * { + margin-block-start: 3rem; +} +@media (min-width: 64em) { + .l-template__sidebar { + order: 0; + } +} +.l-template__previews { + display: flex; + flex-direction: column; + gap: 3rem; +} +@media (min-width: 64em) { + .l-template__previews { + flex-direction: row; + } +} +.l-template__preview { + background-color: hsl(0, 0%, 97%); + border-radius: var(--spruce-border-radius-sm); + padding: 2rem; +} +.l-template__preview img { + border-radius: var(--spruce-border-radius-sm); + box-shadow: 0 0 1.25rem hsla(0, 0%, 0%, 0.05); +} + +.l-color > * { + margin-block-end: 0; + margin-block-start: 0; +} +.l-color > * + * { + margin-block-start: 1.5rem; +} +.l-color__inner { + display: grid; + gap: 1.5rem; +} +@supports (inline-size: min(15rem, 100%)) { + .l-color__inner { + grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); + } +} +.l-color + .l-color { + margin-block-start: 3rem; +} + +.l-templates { + padding-block: 0 clamp(4.5rem, 8vw, 7rem); +} +.l-templates__inner { + --columns: 1; + display: grid; + gap: 3rem; + grid-template-columns: repeat(var(--columns), minmax(0, 2fr)); +} +@media (min-width: 48em) { + .l-templates__inner { + --columns: 2; + } +} + +.l-404 { + border-block-end: 1px solid var(--spruce-base-color-border); + padding-block: var(--spruce-section-gap); +} +.l-404__inner { + display: flex; + flex-direction: column; + gap: 1.5rem; + text-align: center; +} +.l-404__image { + margin-inline: auto; + max-inline-size: 12rem; +} +.l-404__caption { + margin-inline: auto; + max-inline-size: 40rem; + text-align: center; + text-wrap: balance; +} +.l-404__caption > * { + margin-block-end: 0; + margin-block-start: 0; +} +.l-404__caption > * + * { + margin-block-start: 1.5rem; +} +.l-404__title { + font-size: clamp(2.275rem, 5vw + 1rem, 3.5rem); +} + +.btn--rounded { + border-radius: var(--doc-border-radius-md); +} + +.btn--rounded:not(.btn--icon) { + font-size: 0.91375rem; + font-weight: 700; + text-transform: uppercase; +} + +.btn--rounded.btn--lg { + padding: 1.05em 1.25em; +} +@media (min-width: 64em) { + .btn--rounded.btn--lg { + padding: 1.25em 1.5em; + } +} + +.btn--install { + background-color: var(--spruce-btn-color-install-background); + border-color: var(--spruce-btn-color-install-background); + color: var(--spruce-btn-color-install-foreground); +} +.btn--install:focus-visible { + outline: 2px solid var(--spruce-btn-color-install-background); + outline-offset: 2px; +} +.btn--install:hover { + background-color: var(--spruce-btn-color-install-background-hover); + border-color: var(--spruce-btn-color-install-background-hover); + color: var(--spruce-btn-color-install-foreground); +} + +.btn--decline { + background-color: var(--spruce-btn-color-decline-background); + border-color: var(--spruce-btn-color-decline-background); + color: var(--spruce-btn-color-decline-foreground); +} +.btn--decline:focus-visible { + outline: 2px solid var(--spruce-btn-color-decline-background); + outline-offset: 2px; +} +.btn--decline:hover { + background-color: #0b1319; + border-color: #0b1319; + color: var(--spruce-btn-color-decline-foreground); +} + +.btn--discrete { + background-color: var(--spruce-btn-color-discrete-background); + border-color: var(--spruce-btn-color-discrete-background); + color: var(--spruce-btn-color-discrete-foreground); +} +.btn--discrete:focus-visible { + outline: 2px solid var(--spruce-btn-color-discrete-background); + outline-offset: 2px; +} +.btn--discrete:hover { + background-color: var(--spruce-btn-color-discrete-background-hover); + border-color: var(--spruce-btn-color-discrete-background-hover); + color: var(--spruce-btn-color-discrete-foreground-hover); +} + +.btn--dark { + background-color: var(--spruce-btn-color-dark-background); + border-color: var(--spruce-btn-color-dark-background); + color: var(--spruce-btn-color-dark-foreground); +} +.btn--dark:focus-visible { + outline: 2px solid var(--spruce-btn-color-dark-background); + outline-offset: 2px; +} +.btn--dark:hover { + background-color: var(--spruce-btn-color-dark-background-hover); + border-color: var(--spruce-btn-color-dark-background-hover); + color: var(--spruce-btn-color-dark-foreground); +} + +.table--font-size-reset { + font-size: 1rem; +} +.table th, +.table td { + min-inline-size: 10rem; +} + +.m-block\:0 { + margin-block: 0 !important; +} + +:root { + --spruce-section-gap: clamp(5rem, 8vw, 9rem); + --spruce-section-gap-half: clamp(3.5rem, 8vw, 6rem); + --spruce-duration: 0.15s; +} + +body { + --doc-heading-font-family: "Figtree", sans-serif; + --doc-body-font-family: "Inter", sans-serif; + --doc-border-radius-sm: 0.5rem; + --doc-border-radius-md: 0.925rem; + --doc-border-radius-lg: 2rem; + font-family: var(--doc-body-font-family); + overflow-x: hidden; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--doc-heading-font-family); +} + +[x-cloak] { + display: none !important; +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 2219eb6..e8e8877 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -11,7 +11,8 @@ :root { @include set-css-variable(( --section-gap: clamp(5rem, 8vw, 9rem), - --section-gap-half: clamp(3.5rem, 8vw, 6rem) + --section-gap-half: clamp(3.5rem, 8vw, 6rem), + --duration: 0.15s, )); }