:root{width:100dvw;height:100dvh;min-height:100%;scroll-behavior:auto}body{width:100dvw;height:100dvh}:root{box-sizing:border-box;user-select:none;color-scheme:light dark}*,:before,:after{box-sizing:inherit;user-select:inherit}:before,:after{text-decoration:inherit;vertical-align:inherit}@media (prefers-reduced-motion: reduce){.animation{animation:none}}[color-scheme=dark]{color-scheme:dark}[color-scheme=light]{color-scheme:light}:root{--main-bg-color: steelblue;--icon-fill: #000;--icon-fill-hover: #000}html{font-size:100%}html,body,h1,h2,h3,h4,h5,h6{margin:unset;padding:unset}body{font-size:16px;font-family:"Segoe UI Emoji",Droid Sans,SF Pro,Open Sans,Helvetica,Helvetica Neue,Arial,Liberation Sans,FreeSans,sans-serif;line-height:1.5;font-weight:400}h1,h2,h3,h4,h5,h6{font-family:"Segoe UI Emoji",Droid Sans,SF Pro,Open Sans,Helvetica,Helvetica Neue,Arial,Liberation Sans,FreeSans,sans-serif;font-weight:500;line-height:normal;letter-spacing:.5px}h1{font-size:1.5rem;font-weight:500}h2{font-size:1.5rem}h3{font-size:1.25rem}h4,h5,h6{font-size:1rem}b,strong{font-weight:bolder}big{font-size:120%}small{font-size:80%}pre,code,kbd,samp{font-size:1em;font-family:Monaco,Menlo,Consolas,Droid Sans Mono,SF Mono,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,Liberation Mono,Courier New,monospace}.theme-toggle{width:1.5rem;height:1.5rem;display:grid;place-content:center;background:transparent}.sun-and-moon{stroke-linecap:round;inline-size:100%;block-size:100%}.sun-and-moon>:is(.moon,.sun,.beams){transform-origin:center center}.sun-and-moon>:is(.moon,.sun){fill:currentColor;stroke-width:0}.sun-and-moon>.beams{stroke:currentColor;stroke-width:.125rem}[color-scheme=dark] .sun-and-moon>.sun{transform:scale(1.75)}[color-scheme=dark] .sun-and-moon>.beams{opacity:0}[color-scheme=dark] .sun-and-moon>.moon>circle{transform:translate(-30%)}@supports (cx: 1){[color-scheme=dark] .sun-and-moon>.moon>circle{transform:translate(0);cx:17}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon>.moon>circle{transition:transform .25s var(--ease-out-5)}[color-scheme=dark] .sun-and-moon>.sun{transform:scale(1.75);transition-timing-function:var(--ease-3);transition-duration:.25s}[color-scheme=dark] .sun-and-moon>.beams{transform:rotate(-25deg);transition-duration:.15s}[color-scheme=dark] .sun-and-moon>.moon>circle{transition-delay:.25s;transition-duration:.5s}@supports (cx: 1){.sun-and-moon>.moon>circle{transition:cx .25s var(--ease-out-5)}}}svg{display:inherit;fill:currentColor;stroke:currentColor;width:inherit;height:inherit;place-content:inherit;border-radius:inherit;max-width:100%;max-height:100%}use{pointer-events:none}ico{display:flex;place-content:center;width:1.5rem;height:1.5rem;contain:strict}:where(html){--ease-1: cubic-bezier(.25, 0, .5, 1);--ease-2: cubic-bezier(.25, 0, .4, 1);--ease-3: cubic-bezier(.25, 0, .3, 1);--ease-4: cubic-bezier(.25, 0, .2, 1);--ease-5: cubic-bezier(.25, 0, .1, 1);--ease-in-1: cubic-bezier(.25, 0, 1, 1);--ease-in-2: cubic-bezier(.5, 0, 1, 1);--ease-in-3: cubic-bezier(.7, 0, 1, 1);--ease-in-4: cubic-bezier(.9, 0, 1, 1);--ease-in-5: cubic-bezier(1, 0, 1, 1);--ease-out-1: cubic-bezier(0, 0, .75, 1);--ease-out-2: cubic-bezier(0, 0, .5, 1);--ease-out-3: cubic-bezier(0, 0, .3, 1);--ease-out-4: cubic-bezier(0, 0, .1, 1);--ease-out-5: cubic-bezier(0, 0, 0, 1);--ease-in-out-1: cubic-bezier(.1, 0, .9, 1);--ease-in-out-2: cubic-bezier(.3, 0, .7, 1);--ease-in-out-3: cubic-bezier(.5, 0, .5, 1);--ease-in-out-4: cubic-bezier(.7, 0, .3, 1);--ease-in-out-5: cubic-bezier(.9, 0, .1, 1);--ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);--ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);--ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);--ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);--ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);--ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);--ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);--ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);--ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);--ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);--ease-step-1: steps(2);--ease-step-2: steps(3);--ease-step-3: steps(4);--ease-step-4: steps(7);--ease-step-5: steps(10)}hero{display:grid;place-content:center;background:rgba(255,20,147,.05)}.raw{display:grid;grid:1fr / 1fr;height:calc(100dvh - 3.5rem)}.raw hero{height:5rem;padding:1rem}.raw section{display:grid;place-items:center;padding:1rem}menu{isolation:isolate;appearance:none;display:grid;list-style:none;padding:.25rem;margin:unset;border-radius:.25rem;gap:.25rem;background-color:#333;contain:content;box-shadow:1px 1px 4px #0003}menu a,menu item,menu li{width:inherit;display:flex;gap:.75rem;place-items:center;padding:.75rem;line-height:1.25rem;border-radius:.25rem;white-space:nowrap;text-overflow:ellipsis}menu a:hover,menu item:hover,menu li:hover{background-color:color-mix(in srgb,black 30%,transparent)}menu a:hover ico,menu item:hover ico,menu li:hover ico{opacity:1}menu a.selected,menu item.selected,menu li.selected{color:tomato}menu a ico,menu item ico,menu li ico{opacity:.3}menu hr{margin:0;opacity:.05}field{max-width:30rem;display:flex;flex-direction:column}field label,field output{opacity:.5}control{display:block;position:relative;width:10rem}control input{-webkit-appearance:none;appearance:none}control>menu{position:absolute;z-index:10;transform-origin:top;min-width:100%;box-shadow:0 0 1rem #00000080}.animated{pointer-events:none;touch-action:none}select,textarea,input{font-size:16px}cards{display:grid;gap:1.5rem;padding:1.5rem}cards.XL{grid:auto-flow / repeat(4,1fr)}cards.LG{grid:auto-flow / repeat(3,1fr)}cards.MD{grid:auto-flow / repeat(2,1fr)}demo{display:block;box-sizing:border-box;margin:0;padding:.5rem;border:1px solid black;background-color:#ff00001a;overflow-y:hidden}.HeightAndFade{transform:scale(0) translate(-5rem,-5rem);opacity:0;transition:transform .3s var(--ease-elastic-4)}.HeightAndFade.enter{transform:scale(1) translate(0);opacity:1}:root{--intro-w: 80rem}app{display:grid;grid:minmax(0,auto) minmax(0,1fr) / auto minmax(0,1fr) auto;grid-template-areas:"h h h" "sl m sr"}app>header{grid-area:h;place-items:center;justify-content:space-between}app>sidebar.sl{grid-area:sl}app>main{grid-area:m}app>sidebar.sr{grid-area:sr}header{display:flex;background-color:var(--main-bg-color);padding:0 1rem;gap:1rem;height:3.5rem}main{background-color:#ff63471a;height:calc(100dvh - 3.5rem)}intro{max-width:var(--intro-w);display:grid;grid:auto / minmax(0,1fr) 1.75fr;background-color:color-mix(in srgb,currentColor 5%,transparent)}wrap{container:l-preview / inline-size}preview{display:grid;grid:auto / minmax(0,1fr) minmax(0,1fr);gap:2rem;padding:2rem;background-color:color-mix(in srgb,currentColor 5%,transparent)}a{color:currentColor}tabs{display:grid;grid:auto / auto 1fr}tabs>nav{display:flex;flex-flow:column;background-color:color-mix(in srgb,currentColor 5%,transparent)}tabs>nav>a{color:var(--main-bg-color);display:grid;place-content:center;width:5rem;height:4rem;border-left:.25rem solid transparent;opacity:.5}tabs>nav>a>ico{width:1.75rem;height:1.75rem;aspect-ratio:1/1}tabs>nav>a:hover{opacity:1}tabs>nav>a.active{display:grid;border-left-color:currentColor;opacity:1}tab{display:grid;grid-auto-rows:min-content;gap:1.5rem;padding:2rem}card{display:grid;background-color:color-mix(in srgb,currentColor 5%,transparent);border-radius:.25rem;box-shadow:1px 1px 4px #0003}card media{border-radius:.25rem .25rem 0 0}content{gap:1.5rem;padding:1rem;display:grid}section{display:grid;grid-auto-rows:min-content;padding:0;gap:1.5rem}li{list-style:inherit}media{background-color:var(--main-bg-color);display:grid;place-content:center;aspect-ratio:16/9;position:relative}media badge{display:flex;place-content:center;position:absolute;bottom:1rem;left:1rem;text-transform:uppercase;color:currentColor;font-size:x-small;background-color:indigo;padding:1px .25em;border-radius:.25em}hr{display:block;margin:unset;border:unset;padding:unset;box-shadow:unset;appearance:unset;opacity:.1;height:1px;background:currentColor}h{display:block}card description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}a ico,button ico{aspect-ratio:1/1;width:1.25rem;height:1.25rem}fieldset{display:grid;appearance:unset;border:unset;margin:unset;padding:unset;gap:inherit}.f1{grid:auto / 1fr 1fr}.f2{grid:auto / auto 1fr 1fr}.f3{grid:auto / 1fr 1fr}img{max-width:100%;display:block}progress{display:flex;width:inherit;height:.25rem;border:unset;appearance:unset;border-radius:.25rem}bar{display:flex;place-items:center;justify-content:space-between;line-height:2.5rem}a{width:auto;text-decoration:unset}button{appearance:unset;border:unset;outline:unset;white-space:nowrap;text-decoration:none;font-size:16px;font-family:"Segoe UI Emoji",Droid Sans,SF Pro,Open Sans,Helvetica,Helvetica Neue,Arial,Liberation Sans,FreeSans,sans-serif;display:flex;flex-grow:1;place-items:center;place-content:center;gap:.75rem;padding:.5rem .75rem;line-height:1.5rem;border-radius:.25rem;background-color:var(--main-bg-color);border:.125rem solid var(--main-bg-color);box-shadow:1px 1px 4px #0000001a}.next,.previous{width:2.75rem;height:2.75rem;aspect-ratio:1/1;border-radius:100%}button[disabled],input[type=text][disabled]{background-color:transparent;border-color:currentColor;opacity:.7}input{font-family:"Segoe UI Emoji",Droid Sans,SF Pro,Open Sans,Helvetica,Helvetica Neue,Arial,Liberation Sans,FreeSans,sans-serif;font-size:16px}input[type=text],input[type=number],input[type=range]{width:100%}input[type=text]{display:flex;padding:.5rem .75rem;place-content:center;line-height:1.5rem;appearance:unset;border:unset;outline:unset;border-radius:.25rem;background-color:transparent;border:.125rem solid var(--main-bg-color);box-shadow:1px 1px 4px #0000001a}field{display:flex;place-items:center;gap:.75rem}input[type=checkbox],input[type=radio]{display:block;appearance:unset;width:1.5rem;height:1.5rem;aspect-ratio:1/1;margin:unset;padding:unset;border:.125rem solid currentColor}input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--main-bg-color);background-color:var(--main-bg-color)}.checked{position:absolute;display:flex;place-content:center;place-items:center;width:1.5rem;height:1.5rem;padding:.125rem;fill:currentColor;pointer-events:none;touch-action:none;opacity:0;transform:scale(0);transition:all .15s var(--ease-elastic-1)}input[type=checkbox]:not(.toggle){border-radius:.25rem;place-content:center;place-items:center;transition:all .12s var(--ease-elastic-2)}input[type=checkbox]:not(.toggle):checked+.checked{opacity:1;transform:scale(1)}input[type=radio]{display:flex;border-radius:100%;place-content:center;place-items:center;border:.125rem solid currentColor;transition:all .2s var(--ease-elastic-2)}input[type=radio]:before{color:var(--main-bg-color);display:block;content:"";transform-origin:center center 0;background-color:currentColor;height:.725rem;width:.725rem;border-radius:100%;opacity:0;transform:scale(0);transition:transform .2s var(--ease-elastic-2)}input[type=radio]:checked:before{opacity:1;transform:scale(1)}input[type=radio]:checked{background-color:transparent}*:focus{outline:.125rem solid tomato}input[type=checkbox].toggle{display:grid;place-content:center;place-items:center;width:2.5rem;height:1.5rem;aspect-ratio:1/2;transition:all .12s var(--ease-elastic-2);border-radius:.25rem}input[type=checkbox].toggle:before{display:flex;content:"";transform-origin:0 0 0;background-color:currentColor;height:.75rem;width:.5rem;border-radius:.125rem;overflow:hidden;transform:translate(-120%);transition:transform .15s var(--ease-elastic-2)}input[type=checkbox].toggle:checked:before{transform:translate(120%)}input[type=range]{display:flex;place-items:center;appearance:unset;outline:unset;border:unset;padding:unset;margin:unset;height:1.5rem;max-width:100%;background-color:#0000001a;transition:all .5s var(--ease-elastic-2);overflow:hidden}input[type=range]:focus{box-shadow:none;outline:none}.range-thumb{appearance:unset;border:0;height:1rem;width:1rem;border-radius:100%;background:var(--main-bg-color);cursor:pointer;transition:all .5s var(--ease-elastic-2)}.range-thumb:active{cursor:grabbing}.range-thumb:hover{background:tomato}.range-track{position:relative;appearance:unset;box-shadow:unset;border:unset;background:goldenrod}::-moz-range-thumb{appearance:unset;border:0;height:1rem;width:1rem;border-radius:100%;background:var(--main-bg-color);cursor:pointer;transition:all .5s var(--ease-elastic-2)}::-moz-range-thumb:active{cursor:grabbing}::-moz-range-thumb:hover{background:tomato}::-webkit-slider-thumb{appearance:unset;border:0;height:1rem;width:1rem;border-radius:100%;background:var(--main-bg-color);cursor:pointer;transition:all .5s var(--ease-elastic-2);box-shadow:-80px 0 0 80px #008489}::-webkit-slider-thumb:active{cursor:grabbing}::-webkit-slider-thumb:hover{background:tomato}::-webkit-slider-runnable-track{position:relative;appearance:unset;box-shadow:unset;border:unset;background:goldenrod}::-moz-range-track{position:relative;appearance:unset;box-shadow:unset;border:unset;background:goldenrod}select{display:flex;margin:unset;padding:.5rem .75rem;min-width:10rem;font-size:16px;font-family:"Segoe UI Emoji",Droid Sans,SF Pro,Open Sans,Helvetica,Helvetica Neue,Arial,Liberation Sans,FreeSans,sans-serif;line-height:1.5rem;appearance:none;border:unset;outline:unset;border-radius:.25rem;background-color:transparent;border:.125rem solid var(--main-bg-color);box-shadow:1px 1px 4px #0000001a}optgroup{appearance:none;background-color:red}option{font:inherit;appearance:none;background-color:transparent;border-radius:unset;box-shadow:unset;margin:unset;padding:unset}accent{color:var(--main-bg-color)}badge{font-weight:700;display:flex;place-items:center;gap:.5em;opacity:.8;font-size:small}group{display:flex;gap:inherit}.sr gutter{left:-.25rem}.sr gutter:before{transform:translate(-6px)}.sl gutter{right:-.25rem}gutter{width:1rem;min-height:100%;cursor:ew-resize;display:flex;place-content:flex-end;opacity:1;position:absolute}gutter:before{background-image:linear-gradient(90deg,currentColor,currentColor 1px,transparent 2px,transparent 5px);background-size:.25rem;content:"";display:block;height:2rem;width:10px;opacity:.5;position:sticky;pointer-events:none;top:50%}sidebar.sl{width:10rem}sidebar{display:grid;grid:auto / 1fr;background-color:#ee82ee1a;overflow:hidden;width:15rem;transform:translateZ(0)}sidebar wrap{background-color:#f003;height:inherit}sidebar nav{display:flex;flex-flow:column}sidebar nav a{display:grid;padding:1rem}sidebar nav a:hover{background-color:#0000001a}app>header>group{place-items:center;font-size:14px;font-family:Monaco,Menlo,Consolas,Droid Sans Mono,SF Mono,Roboto Mono,"Ubuntu Monospace",Noto Mono,Oxygen Mono,Liberation Mono,Liberation Mono,Courier New,monospace;gap:.25em}app>header>group a,app>header>group button{display:flex;place-content:center;place-items:center;padding:.25em .5em;background-color:tomato;line-height:1rem;font-size:inherit;font-family:inherit;border-radius:.5em}grid,cards,scrollable{background-color:#4b008233;height:inherit;overflow-y:scroll;will-change:scroll-position;contain:content;contain-intrinsic-size:inherit}table{table-layout:fixed;border-collapse:collapse;contain:content;width:100%}tr{border-left:10px solid rgba(255,20,147,.1);transition:all .15s cubic-bezier(.1,0,.9,1);border-bottom:1px solid rgba(255,255,255,.1);contain:content;user-select:text;content-visibility:auto;contain-intrinsic-size:10rem}td{padding:.5rem 1rem}.intersect{border-left-color:#2e8b57}.overflow{opacity:.4;pointer-events:unset;touch-action:unset;content-visibility:hidden}.cursor-info{position:fixed;top:4rem;right:.5rem;background-color:#1c1b22e6;padding:1rem;margin:0;border:1px dashed var(--main-bg-color);list-style:none;z-index:1000}.cursor-info>li{display:flex;padding:0;margin:0;gap:1em;align-items:center;font-size:14px}.cursor-info>li>span{width:4em;opacity:.8}.scroll-input{max-width:15em}.scroll-input input{border-radius:.25rem}scrollable{display:block;position:relative;overscroll-behavior:contain;isolation:isolate}