:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--color-gunmetal: #1b2937;--color-lapis: #345e83;--color-munsel: #1995a9;--color-blue: #7cbcc5;--color-alice: #e6ecef;--color-white: #f9fafa;--color-coral: #f17474;--color-macaroni: #fdb67c;--border-radius: .333em;color:var(--color-white);background-color:var(--color-gunmetal)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;line-height:1.4}main{margin-bottom:3em}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:.666em 0 1em}pre{padding:1em}.toggle{border:1px solid white;text-transform:uppercase;letter-spacing:.2em;line-height:1}select{display:block;font-size:1em;font-family:inherit;font-weight:700;line-height:1.3;padding:.6em 1.4em .5em .8em;width:100%;max-width:100%;box-sizing:border-box;margin:0 0 1em;box-shadow:0 1px 0 1px #0000000a;border-radius:var(--border-radius);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-repeat:no-repeat,repeat;background-position:right .7em top 50%,0 0;background-size:13px auto,100%}select::-ms-expand{display:none}select:focus{box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}select option{font-weight:400}button{background-image:none;background-color:transparent;border-radius:var(--border-radius);box-shadow:none;-webkit-appearance:none;border:none;padding:1em 2em;margin:0 0 1em;font-family:inherit;text-transform:uppercase;letter-spacing:.1em;font-weight:600}input{padding:.5em;font-size:1rem;box-shadow:none;border-radius:var(--border-radius)}input[type=checkbox]+label{padding-left:.5ch;bottom:.125em}@media (prefers-color-scheme: light){:root{color:var(--color-gunmetal);background-color:var(--color-white);--default-color: var(--color-munsel)}a:hover{color:var(--color-munsel)}button{background-color:var(--color-lapis);color:var(--color-white)}.controls__panel,.code-wrap{background-color:var(--color-alice);border:1px solid var(--color-lapis)}pre{background:var(--color-gunmetal);color:var(--color-alice)}.toggle{background-color:var(--color-alice);border-color:var(--color-lapis);color:var(--color-gunmetal)}fieldset{border-color:var(--color-alice)}input[type=range]{accent-color:var(--color-munsel)}select{color:var(--color-gunmetal);border:1px solid var(--color-blue);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2213px%22%20height%3D%227px%22%20viewBox%3D%220%200%2013%207%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Triangle%22%20fill%3D%22%234A4A4A%22%20transform%3D%22translate(6.500000%2C%203.250000)%20rotate(-180.000000)%20translate(-6.500000%2C%20-3.250000)%20%22%20points%3D%226.5%201.13686838e-13%2013%206.5%200%206.5%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),linear-gradient(to bottom,var(--color-white) 0%,var(--color-white) 100%);background-color:var(--color-white)}select:hover{border-color:var(--color-lapis)}select:focus{border-color:var(--color-coral);box-shadow:0 0 1px 3px var(--color-alice)}input{background-color:var(--color-white);border:1px solid var(--color-blue)}input:focus{border-color:var(--color-coral)}footer{background-color:var(--color-alice);color:var(--color-gunmetal)}.button--toggle{background-color:var(--color-alice)}}@media (prefers-color-scheme: dark){:root{color:var(--color-white);background-color:var(--color-gunmetal);--default-color: var(--color-gunmetal)}a:hover{color:var(--color-munsel)}button{background-color:var(--color-blue);color:var(--color-gunmetal)}.controls__panel,.code-wrap{background-color:var(--color-gunmetal);border:1px solid var(--color-lapis)}pre{color:var(--color-gunmetal);background:var(--color-alice)}.toggle{background-color:var(--color-gunmetal);border-color:var(--color-lapis);color:var(--color-alice)}fieldset{border-color:var(--color-lapis)}input[type=range]{accent-color:var(--color-lapis)}select{color:var(--color-alice);border:1px solid var(--color-gunmetal);background-color:var(--color-lapis);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2213px%22%20height%3D%227px%22%20viewBox%3D%220%200%2013%207%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Triangle%22%20fill%3D%22%23e6ecef%22%20transform%3D%22translate(6.500000%2C%203.250000)%20rotate(-180.000000)%20translate(-6.500000%2C%20-3.250000)%20%22%20points%3D%226.5%201.13686838e-13%2013%206.5%200%206.5%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),linear-gradient(to bottom,var(--color-lapis) 0%,var(--color-lapis) 100%)}select:hover{border-color:var(--color-munsel)}select:focus{border-color:var(--color-coral);box-shadow:0 0 1px 3px var(--color-lapis)}input{background-color:var(--color-lapis);border:1px solid var(--color-gunmetal)}input:focus{border-color:var(--color-coral)}footer{background-color:var(--color-lapis);color:var(--color-white)}.button--toggle{background-color:var(--color-gunmetal)}}.controls__slider{display:flex;flex-direction:column}.controls__slider>div{margin-bottom:1em}.controls__slider>div>span{font-weight:500;font-style:italic;margin-left:1ch;display:inline-block}.controls__panel{display:flex;flex-direction:column;position:relative;padding:1em;transform:translate(calc(-100% + 1em));transition:transform .3s ease-in-out;border-left:0;border-top:0}.controls__panel--open{transform:translate(0)}.controls__toggle{position:fixed;top:6em;right:calc(-7em + 2px);height:3em;transform:rotate(90deg);border-bottom:0;border-radius:var(--border-radius) var(--border-radius) 0 0;padding:0 1em}.controls__toggle span{font-size:1.5em;position:relative;top:.125em}fieldset{box-shadow:none;position:relative;padding-top:2em;margin-bottom:2em;margin-top:1em}fieldset.collapse>div{display:none}legend{position:absolute;top:-9999px;left:-9999px;pointer-events:none;visibility:hidden;opacity:0}label{font-size:.875rem}.button--toggle{position:absolute;top:-.666em;right:0;padding:0 .25em 0 .5em;color:var(--default-light);font-size:1.5em;margin-bottom:.5em;font-weight:500;text-transform:none;letter-spacing:0}.button--toggle>span{padding-left:.5em}.text{max-width:69ch;line-height:var(--body-line-height);font-family:var(--body-font)}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{line-height:var(--header-line-height);font-family:var(--header-font)}.text p{font-size:clamp(var(--body-size-min),calc(1rem + var(--body-size-fluid)),var(--body-size-max))}.text h1{font-size:clamp(var(--header-size-min),calc(1rem + var(--header-size-fluid)),var(--header-size-max))}.text h2{font-size:clamp(var(--h2-size-min),calc(1rem + var(--h2-size-fluid)),var(--h2-size-max))}.text h3{font-size:clamp(var(--h3-size-min),calc(1rem + var(--h3-size-fluid)),var(--h3-size-max))}.text h4{font-size:clamp(var(--h4-size-min),calc(1rem + var(--h4-size-fluid)),var(--h4-size-max))}.text h5{font-size:clamp(var(--h5-size-min),calc(1rem + var(--h5-size-fluid)),var(--h5-size-max))}.text h6{font-size:clamp(var(--h6-size-min),calc(1rem + var(--h6-size-fluid)),var(--h6-size-max))}.code-wrap__wrapper{display:flex;justify-content:center;align-items:center;position:fixed;inset:0}.code-wrap{transform:scale(0);transition:transform .3s ease-in-out;border:1px solid var(--color-white);padding:1em;z-index:101}.code-wrap__screen{background-color:var(--color-gunmetal);opacity:.5;position:fixed;inset:0;width:100%;height:100%;z-index:100}.code-wrap--visible{transform:scale(1)}.code-wrap--toggle{position:absolute;bottom:calc(-3em + 2px);left:3em;padding:0 1em;height:3em;border-top:0;border-radius:0 0 var(--border-radius) var(--border-radius)}.code-wrap__buton-wrapper{padding:2em 0}footer>div{padding:2em;max-width:76ch}main[data-v-bc10e9de]{display:grid;grid-template-columns:1fr 3fr 1fr;gap:2em}