:root{--color-canvas-hue:255deg;--color-canvas-sat:0%;--color-canvas-lit:100%;--color-canvas-hsl:var(--color-canvas-hue) var(--color-canvas-sat) var(--color-canvas-lit);--color-canvas:hsl(var(--color-canvas-hsl));--color-canvas-default:var(--color-canvas);--color-canvas-muted:hsl(calc(var(--color-canvas-hue) - 5deg) calc(var(--color-canvas-sat) + 27%) calc(var(--color-canvas-lit) - 2%));--color-canvas-emphasis:hsl(var(--color-canvas-hue) var(--color-canvas-sat) var(--color-canvas-lit));--color-canvas-emphasis-plus:hsl(calc(var(--color-canvas-hue) - 30deg) calc(var(--color-canvas-sat) + 22%) calc(var(--color-canvas-lit) - 4%));--color-surface-hue:0deg;--color-surface-sat:0%;--color-surface-lit:100%;--color-surface-hsl:var(--color-surface-hue) var(--color-surface-sat) var(--color-surface-lit);--color-surface:hsl(var(--color-surface-hsl));--color-surface-default:var(--color-surface);--color-accent-hue:234deg;--color-accent-sat:56%;--color-accent-lit:60%;--color-accent-hsl:var(--color-accent-hue) var(--color-accent-sat) var(--color-accent-lit);--color-accent:hsl(var(--color-accent-hsl));--color-accent-default:var(--color-accent);--color-accent-emphasis:hsl(var(--color-accent-hue) clamp(0%,calc(var(--color-accent-sat) + 9%),100%) clamp(0%,calc(var(--color-accent-lit) + 6%),100%));--color-canvas-text-hue:225deg;--color-canvas-text-sat:9%;--color-canvas-text-lit:17%;--color-canvas-text-hsl:var(--color-canvas-text-hue) var(--color-canvas-text-sat) var(--color-canvas-text-lit);--color-canvas-text:hsl(var(--color-canvas-text-hsl));--color-canvas-text-default:var(--color-canvas-text);--color-canvas-text-muted:#8b8f98;--color-canvas-text-muted-plus:#63676e;--color-surface-text-hue:221deg;--color-surface-text-sat:6%;--color-surface-text-lit:57%;--color-surface-text-hsl:var(--color-surface-text-hue) var(--color-surface-text-sat) var(--color-surface-text-lit);--color-surface-text:hsl(var(--color-surface-text-hsl));--color-surface-text-default:var(--color-surface-text);--color-accent-text-hue:0deg;--color-accent-text-sat:0%;--color-accent-text-lit:100%;--color-accent-text-hsl:var(--color-accent-text-hue) var(--color-accent-text-sat) var(--color-accent-text-lit);--color-accent-text:hsl(var(--color-accent-text-hsl));--color-accent-text-default:var(--color-accent-text);--color-complementary-hue:0deg;--color-complementary-sat:79%;--color-complementary-lit:63%;--color-complementary-hsl:var(--color-complementary-hue) var(--color-complementary-sat) var(--color-complementary-lit);--color-complementary:hsl(var(--color-complementary-hsl));--color-complementary-default:var(--color-complementary);--color-complementary-emphasis:hsl(var(--color-complementary-hue) clamp(0%,calc(var(--color-complementary-sat) + 9%),100%) clamp(0%,calc(var(--color-complementary-lit) + 6%),100%));--color-border-default:hsl(calc(var(--color-canvas-hue) - 39deg) calc(var(--color-canvas-sat) + 19%) clamp(0%,calc(var(--color-canvas-lit) - 5%),100%));--color-border-emphasis:hsl(calc(var(--color-canvas-hue) - 39deg) calc(var(--color-canvas-sat) + 8%) clamp(0%,calc(var(--color-canvas-lit) - 12%),100%));--color-border-emphasis-plus:hsl(calc(var(--color-canvas-hue) - 45deg) calc(var(--color-canvas-sat) + 4%) calc(var(--color-canvas-lit) - 20%));--color-border-muted:#dee0e3;--color-icon-hue:0deg;--color-icon-sat:0%;--color-icon-lit:0%;--color-icon-alpha:0.44;--color-icon-default:hsla(var(--color-icon-hue) var(--color-icon-sat) var(--color-icon-lit)/var(--color-icon-alpha));--color-dialog-hue:0deg;--color-dialog-sat:0%;--color-dialog-lit:100%;--color-dialog-alpha:0.5;--color-dialog-default:hsla(var(--color-dialog-hue) var(--color-dialog-sat) var(--color-dialog-lit)/var(--color-dialog-alpha));--color-backdrop-filter:blur(12px) saturate(190%) contrast(50%) brightness(130%);--color-state-hover-muted:rgba(0,0,0,.04);accent-color:var(--color-accent)}html{block-size:100%;color-scheme:light;&[data-theme=dark]{--elevation:var(--elevation-1);--color-canvas-hue:225deg;--color-canvas-sat:6%;--color-canvas-lit:13%;--color-canvas-muted:hsl(var(--color-canvas-hue) calc(var(--color-canvas-sat) - 1%) calc(var(--color-canvas-lit) + 3%));--color-canvas-emphasis:hsl(calc(var(--color-canvas-hue) - 5deg) var(--color-canvas-sat) calc(var(--color-canvas-lit) + 7%));--color-canvas-emphasis-plus:hsl(var(--color-canvas-hue) calc(var(--color-canvas-sat) - 2%) calc(var(--color-canvas-lit) + 9%));--color-surface-hue:225deg;--color-surface-sat:6%;--color-surface-lit:13%;--color-canvas-text-hue:180deg;--color-canvas-text-sat:7%;--color-canvas-text-lit:97%;--color-canvas-text-muted:hsl(calc(var(--color-canvas-text-hue) + 39deg) calc(var(--color-canvas-text-sat) - 1%) calc(var(--color-canvas-text-lit) - 40%));--color-surface-text-hue:217deg;--color-surface-text-sat:11%;--color-surface-text-lit:43%;--color-accent-text-hue:0deg;--color-accent-text-sat:0%;--color-accent-text-lit:100%;--color-border-default:hsl(calc(var(--color-canvas-hue) - 5deg) var(--color-canvas-sat) clamp(0%,calc(var(--color-canvas-lit) + 7%),100%));--color-border-emphasis:hsl(calc(var(--color-canvas-hue) - 8deg) var(--color-canvas-sat) clamp(0%,calc(var(--color-canvas-lit) + 12%),100%));--color-border-emphasis-plus:hsl(calc(var(--color-canvas-hue) - 5deg) var(--color-canvas-sat) calc(var(--color-canvas-lit) + 16%));--color-border-muted:rgba(83,83,95,.25);--color-icon-hue:0deg;--color-icon-sat:0%;--color-icon-lit:100%;--color-icon-alpha:0.56;--color-icon-default:hsla(var(--color-icon-hue) var(--color-icon-sat) var(--color-icon-lit)/var(--color-icon-alpha));--color-dialog-hue:255deg;--color-dialog-sat:5%;--color-dialog-lit:16%;--color-dialog-alpha:0.5;--color-dialog-default:hsla(var(--color-dialog-hue) var(--color-dialog-sat) var(--color-dialog-lit)/var(--color-dialog-alpha));--color-backdrop-filter:blur(10px) saturate(190%) contrast(70%) brightness(80%);--color-state-hover-muted:hsla(0,0%,100%,.063);accent-color:var(--color-accent);color-scheme:dark;@supports not (color-scheme:dark){background:#111}}}:root{--base-nav-ideal-width:250px;--ideal-nav:190px,var(--base-nav-ideal-width),50vw;--base-aside-ideal-width:424px;--ideal-aside:320px,var(--base-aside-ideal-width),50vw;--grid-template-areas:"nav header header" "nav content aside";--grid-template-rows:56px 1fr;--grid-template-columns:clamp(var(--ideal-nav)) 1fr auto;--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--stroke-width-thin:1;--stroke-width-medium:1.5}@media (max-width:1023px){:root{--grid-template-areas:"header" "content";--grid-template-columns:1fr}}:root{--transition-duration-normal:250ms;--transition-duration-fast:0s;--transition-duration:var(--transition-duration-normal);--color-highlight:#669cff;--color-success:#61c454;--color-error:#c32828;--color-warning:#f4bc4e;--color-link:#2978c7;--color-link-focus:#3485d5}@media screen and (prefers-color-scheme:dark) and (prefers-contrast:more){:root{--color-canvas-h:0deg;--color-surface-h:0deg;--color-accent-h:0deg}}@media screen and (prefers-reduced-motion:reduce){:root{--transition-duration:var(--transition-duration-fast)}html{scroll-behavior:auto}}@media screen and (prefers-reduced-motion:no-preference){:root{--transition-duration:var(--transition-duration-normal)}}:root{--font-family-standard:-apple-system,system-ui,"Segoe UI",roboto,"Helvetica Neue",helvetica,arial,sans-serif;--font-family-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;--font-size-x-small:1.1rem;--font-size-small:1.2rem;--font-size-medium:1.3rem;--font-size-large:1.6rem;--font-size-x-large:2rem;--font-size-2x-large:2.4rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--leading-none:1;--leading-xsmall:1.125;--leading-small:1.275;--leading-normal:1.5;--leading-large:1.625;--leading-xlarge:2;--tracking-dense:-0.015em;--tracking-normal:normal;--tracking-loose:0.075em;--measure-narrow:45ch;--measure-normal:66ch;--measure-wide:80ch}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-medium);line-height:var(--leading-normal)}h1{font-size:var(--font-size-2x-large)}h2{font-weight:var(--font-size-x-large)}a:active,a:hover,a:link,a:visited{color:var(--color-canvas-text-default);text-decoration:none}textarea{font-family:var(--font-family-standard)}:root{--elevation-1:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);--elevation-2:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);--elevation-3:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);--elevation-4:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);--elevation-5:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);--elevation-6:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);--easing-standard:cubic-bezier(0.4,0,0.2,1);--easing-accelerate:cubic-bezier(0.4,0,1,1);--easing-decelerate:cubic-bezier(0,0,0.2,1);--radius-1:0.2em;--radius-2:0.375em;--radius-3:0.5em;--radius-4:0.8em;--radius-5:1em;--radius-6:1.25em;--radius-round:9999px;--layer-1:10;--layer-2:20;--layer-3:30;--layer-4:40;--layer-5:50;--layer-6:60;--layer-top:2147483647;--spacing-3x-small:0.3rem;--spacing-2x-small:0.6rem;--spacing-x-small:0.8rem;--spacing-small:1rem;--spacing-medium:1.2rem;--spacing-large:1.6rem;--spacing-x-large:2rem;--spacing-2x-large:3.2rem;--spacing-3x-large:4.8rem;--spacing-4x-large:6.4rem;--width-1:320px;--width-2:396px;--width-3:448px;--width-4:512px;--width-5:576px;--width-6:672px;--width-7:768px;--width-8:896px;--width-9:1024px;--width-10:1152px;--width-11:1280px;--width-12:1440px;--gap-00:12px;--gap-0:16px;--gap-1:24px;--gap-2:36px;--gap-3:48px;--gap-4:64px;--gap-5:96px;--gap-6:128px;--gap-offset-00:calc(0px - var(--gap-00));--gap-offset-0:calc(0px - var(--gap-0));--gap-offset-1:calc(0px - var(--gap-1));--gap-offset-2:calc(0px - var(--gap-2));--gap-offset-3:calc(0px - var(--gap-3));--gap-offset-4:calc(0px - var(--gap-4));--gap-offset-5:calc(0px - var(--gap-5));--gap-offset-6:calc(0px - var(--gap-6))}img{vertical-align:middle}ul{list-style-type:none}[data-view]{display:contents}::placeholder{color:var(--color-primary-400)}svg{flex-shrink:0;vertical-align:middle}ul{padding:0}details{margin:var(--spacing-2x-small) 0}summary::-webkit-details-marker{display:none}summary{align-items:baseline;display:flex;font-size:var(--font-size-smallPlus);font-weight:var(--font-weight-bold);justify-content:space-between;text-transform:uppercase}summary:after{padding-inline-start:10px}details[open] summary:after,summary:after{content:url('data:image/svg+xml;utf8, <svg width="12" height="6" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.09521 1.85193L7.09521 7.85193L13.0952 1.85193" stroke="rgb(98 107 122)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')}details[open] summary:after{transform:rotateX(180deg)}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;display:table;margin-bottom:var(--spacing-4x-large);min-width:800px;overflow:auto;width:100%}tr:nth-child(2n){background:var(--color-canvas-muted)}th{padding:var(--spacing-small) var(--spacing-large);text-align:left}td{border-bottom:1px solid var(--color-border-default);border-top:1px solid var(--color-border-default);padding:var(--spacing-large) var(--spacing-large)}td code{background-color:var(--color-canvas-emphasis-plus);border-radius:var(--radius-1);font-family:var(--font-family-mono)}nav li,td code{padding:var(--spacing-3x-small)}.spacing-demo{background-color:var(--color-accent-default)}.css-whe01t{align-content:start;align-items:start;display:flex}.css-15m7nlt{display:flex;flex:0 0 auto;flex-direction:column;height:100%;padding:16px;position:relative}.css-1wquhxw{color:#8a8f98;font-size:12px;font-weight:500;margin-bottom:8px;text-align:left}.dragbar{border-radius:unset;box-shadow:unset;height:100%;margin:0;min-width:unset;opacity:0;position:absolute;top:0;width:4px}.dragbar:hover{cursor:col-resize}@media (max-width:1023px){.dragbar:hover{cursor:auto}}nav .dragbar{border-radius:unset;box-shadow:unset;height:100%;margin:0;min-width:unset;opacity:0;position:absolute;right:0;top:0;width:4px}nav .dragbar:hover{cursor:col-resize}@media (max-width:1023px){nav .dragbar:hover{cursor:auto}}.color-palette{display:grid;gap:1rem var(--spacing-2x-small);grid-template-columns:300px repeat(4,1fr);margin:2rem 0}.color-palette__name{font-size:var(--font-size-medium);font-weight:var(--font-weight-semibold)}.color-palette__name code{display:block}.color-palette__example{font-size:var(--font-size-x-small);text-align:center}.color-palette__swatch{border:1px solid var(--color-border-default);border-radius:var(--radius-1);height:5rem}.color-palette__swatch.color-palette__swatch--text{align-items:center;display:flex;font-size:var(--font-size-large);justify-content:center}ninja-keys{z-index:var(--layer-top)}.code-block{border-radius:6px;margin-bottom:var(--spacing-3x-large);position:relative}.code-block__preview{border:1px solid var(--color-border-default);border-bottom:none;border-top-left-radius:6px;border-top-right-radius:6px;max-width:100%;padding:1.5rem;position:relative}.code-block__source{background-color:var(--color-canvas-muted);border-bottom:1px solid var(--color-border-default);border-radius:0}.code-block__buttons{border:1px solid var(--color-border-default);border-bottom-left-radius:6px;border-bottom-right-radius:6px;display:flex;position:relative}.code-block__button{background:var(--color-canvas-default);border:none;border-radius:0;color:var(--sl-color-neutral-600);cursor:pointer;flex:0 0 auto;font:inherit;font-size:var(--font-size-medium);font-weight:500;min-width:2.5rem;padding:0 1rem;text-transform:uppercase}.code-block__buttons summary{font-size:var(--font-size-x-small);transition:var(--transition-duration) background-color,var(--transition-duration) color,var(--transition-duration) border,var(--transition-duration) box-shadow}.code-block__buttons summary:hover{background-color:var(--color-canvas-emphasis-plus);cursor:pointer}pre{margin:0;white-space:pre-line}pre .token.punctuation{color:#f99157}pre .token.tag{color:#9c9}code{font-family:var(--font-family-mono);font-size:var(--font-size-medium)}pre>code{border-radius:0;display:block;hyphens:none;overflow:auto;padding:var(--spacing-large);tab-size:2}.hljs{background-color:initial;color:initial}pre code.hljs{padding:0 var(--spacing-large)}.icons{grid-row-gap:0;grid-column-gap:0;display:grid;gap:10px;grid-template-columns:repeat(5,1fr)}.icon{align-items:center;aspect-ratio:1;background-color:var(--color-canvas-muted);border:1px solid var(--color-border-default);border-radius:var(--radius-2);display:flex;flex-flow:column;font-size:var(--font-size-2x-large);justify-content:center;justify-content:space-evenly}.icon:active,.icon:focus,.icon:focus-visible{border-color:var(--color-accent);outline:none}.icon__name{font-size:var(--font-size-medium)}form{margin:var(--spacing-large)}fieldset{border:1px solid var(--color-border-default);border-bottom-left-radius:6px;border-bottom-right-radius:6px;margin:0 0 var(--spacing-large);padding:0}legend{background-color:var(--color-canvas-muted);border-top-left-radius:6px;border-top-right-radius:6px;box-sizing:border-box;outline:1px solid var(--color-border-default);padding:1.5rem 3.25rem 1.5rem 1.5rem;width:100%}.fieldset__container{padding:var(--spacing-large)}input[type=text]{background-color:var(--color-canvas-default);color:var(--color-canvas-text-default);outline-color:var(--color-accent-default);outline-width:1px;padding:0 var(--spacing-large)}input[type=color],input[type=text]{border:1px solid var(--color-border-emphasis);border-radius:4px}input[type=color]{-webkit-appearance:none;height:32px;padding:0;width:32px}input[type=color]::-webkit-color-swatch-wrapper{border:none;padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}input[type=color]::-moz-color-swatch{border-radius:3px;border-style:none}input[type=range]{-webkit-appearance:none;background-color:transparent;width:100%}input[type=range]::-webkit-slider-runnable-track{background:var(--color-surface-emphasis-plus);border-radius:4px;height:4px}input[type=range]::-moz-range-track{background:var(--color-surface-emphasis-plus);border-radius:4px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-surface-emphasis);border:1px solid var(--color-border-emphasis-plus);border-radius:50%;height:16px;left:8px;margin-top:-7px;width:16px}input[type=range]::-moz-range-thumb{background:var(--color-surface-emphasis);border:1px solid var(--color-border-emphasis-plus);border-radius:50%;height:16px;left:8px;margin-top:-7px;width:16px}input[type=range]:focus{outline:none}html{font-family:var(--font-family-standard);font-size:62.5%;overflow:hidden;scroll-behavior:smooth;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-canvas-default);color:var(--color-canvas-text-default);display:grid;font-size:var(--font-size-medium);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);height:100dvh;line-height:calc(4px + 2ex);margin:0;text-rendering:optimizeLegibility}header{align-items:center;border-bottom:1px solid var(--color-border-default);grid-area:header;justify-content:space-between;min-height:56px;padding-left:max(var(--spacing-large),env(safe-area-inset-left));padding-right:max(var(--spacing-large),env(safe-area-inset-right));padding-top:env(safe-area-inset-top)}header,nav{box-sizing:border-box;display:flex}nav{background-color:var(--color-surface-default);border-right:1px solid var(--color-border-default);flex-direction:column;grid-area:nav;height:100dvh;height:100vh;padding:0 var(--spacing-medium) max(var(--spacing-large),env(safe-area-inset-bottom)) max(var(--spacing-medium),env(safe-area-inset-left));position:relative;will-change:width;z-index:var(--layer-3)}main{display:flex;grid-area:content;justify-content:center;overflow-x:scroll;padding:var(--spacing-2x-large) max(var(--spacing-large),env(safe-area-inset-right)) max(var(--spacing-large),env(safe-area-inset-bottom)) max(var(--spacing-large),env(safe-area-inset-left))}aside,main{box-sizing:border-box;height:calc(100vh - 56px)}aside{background-color:var(--color-canvas-default);border-left:1px solid var(--color-border-default);box-shadow:var(--elevation,none);content-visibility:auto;grid-area:aside;overflow-y:auto;position:relative;transition:width var(--transition-duration) var(--easing-decelerate),box-shadow .15s var(--easing-decelerate);visibility:hidden;width:0;will-change:width,box-shadow;z-index:var(--layer-1)}aside[data-open]{visibility:visible;width:clamp(var(--ideal-aside))}body:not(:hover) aside{transition:none}@media (min-width:1023px){:where(body[class]) header{background-color:var(--color-canvas-muted);border:1px solid var(--color-border-default);border-radius:var(--radius-3) var(--radius-3) 0 0;box-shadow:var(--elevation);margin:var(--spacing-medium);z-index:var(--layer-1)}:is(body[class]) :where(app-navigation,aside,main) header{background-color:initial;border:none;border-bottom:1px solid var(--color-border-default);border-radius:initial;box-shadow:none;margin:initial}:is(body[class]) :where(aside,main){all:unset}:where(main,app-navigation,aside) header+div{flex-grow:1;overflow-x:hidden;overflow-y:auto}:where(aside) header+div{height:calc(100% - 35px)}:is(body[class]) app-navigation+div{background-color:var(--color-canvas);border:1px solid var(--color-border-default);border-radius:0 0 var(--radius-3) var(--radius-3);border-top:none;box-shadow:var(--elevation);display:flex!important;grid-area:content;height:calc(100vh - 97px);margin:var(--spacing-medium);padding-top:var(--spacing-large);z-index:var(--layer-2)}:is(body[class]) main{background-color:var(--color-canvas-default);border-bottom-left-radius:6px;contain:content;flex:1;padding:0 var(--spacing-large);position:relative}:is(body[class]) aside{background-color:var(--color-canvas-default);border-bottom-right-radius:var(--radius-3);border-left:1px solid var(--color-border-default);overflow-y:auto}:is(body[class]) :where(main,aside) header{align-items:center;justify-content:start;line-height:var(--leading-none);margin:0 var(--spacing-large);min-height:var(--spacing-2x-large);padding:0 0 var(--spacing-large)}:is(body[class]) :where(main) header+div{margin:0 var(--spacing-large)}}@media (max-width:1023px){nav{box-sizing:border-box;height:100dvh;padding-left:max(var(--spacing-medium),env(safe-area-inset-left));padding-right:var(--spacing-medium);position:fixed;transform:translateX(calc(-218px - env(safe-area-inset-left)));transition:transform .25s var(--easing-decelerate);visibility:hidden;width:clamp(190px,220px,50vw);z-index:var(--layer-2)}nav[data-open]{box-shadow:var(--elevation-2);transform:translateX(0);visibility:visible}aside{border-top:none;height:calc(100% - 56px);position:fixed;right:0;top:56px;transform:translateX(100vw);transition:transform .25s var(--easing-decelerate)}aside,aside[data-open]{width:100vw;z-index:var(--layer-1)}aside[data-open]{border-left:none;box-shadow:none;overflow-y:auto;transform:translateX(0);visibility:visible}}