:root{--vt-c-white: #fff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #0f0f0f;--vt-c-black-soft: #222;--vt-c-black-mute: #282828;--vt-c-indigo: rgb(44 62 80);--vt-c-indigo-dark: rgb(26 38 52);--vt-c-gray: #eee;--vt-red: hsl(349.9deg 73.5% 44.3%);--vt-red-1: hsl(350deg 73% 35%);--vt-red-light: var(--vt-red);--vt-red-dark: var(--vt-red-1);--vt-green: hsl(135deg 75% 28%);--vt-green-1: hsl(135deg 69% 26%);--vt-green-light: var(--vt-green);--vt-green-dark: var(--vt-green-1);--vt-c-divider-light-1: rgb(60 60 60 / 29%);--vt-c-divider-light-2: rgb(60 60 60 / 12%);--vt-c-divider-dark-1: rgb(84 84 84 / 65%);--vt-c-divider-dark-2: rgb(84 84 84 / 48%);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgb(60 60 60 / 66%);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgb(235 235 235 / 64%);--vt-c-text-dark-3: rgb(235 235 235 / 70%);--vt-c-text-dark-4: rgb(235 235 235 / 84%);--vt-c-yellow: rgb(244 185 14 / 65%);--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-background-input: var(--vt-c-white);--color-background-input-prefix: var(--vt-c-gray);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--color-button: var(--vt-c-indigo);--color-button-hover: var(--vt-c-indigo-dark);--color-button-text: var(--vt-c-white);--color-input: var(--vt-c-black);--color-input-prefix: var(--vt-c-black-mute);--color-link-text: var(--vt-red-light);--color-outline: var(--vt-c-yellow);--color-placeholder: var(--vt-c-text-light-2);--section-gap: 2rem;--section-half-gap: calc(var(--section-gap) / 2)}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-background-input: var(--vt-c-black);--color-background-input-prefix: var(--vt-c-indigo-dark);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-4);--color-text: var(--vt-c-text-dark-2);--color-link-text: var(--vt-red);--color-placeholder: var(--color-text);--color-input: var(--vt-c-text-dark-4);--color-input-prefix: var(--vt-c-text-dark-3)}*{color-scheme:dark}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}*{font-family:inherit}html{font-size:16px}body{font-size:.875rem}html,body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font-size:inherit}#app,body{width:100vw;height:100vh;margin:0;padding:0}#layout{width:100%;height:100%;margin:0 auto;padding:2rem .25rem;font-weight:400}#layout>:first-child:is(header){display:grid;grid-template-rows:auto 1fr}@media (width < 1024px){.desktop{display:none}#layout>:first-child:is(header){overflow:hidden;transition:all .3s ease-out}#layout:not(.expanded)>:first-child:is(header){padding:0;grid-template-rows:auto 0}#layout:not(.expanded)>.divider{height:0}}h1,h2,h3,h4,h5,h6{color:var(--color-heading)}a,.red{text-decoration:none;color:var(--color-link-text);transition:.4s}a:hover,a:focus{text-decoration:underline}.green{color:var(--vt-green-light)}.horizontal-enter-active,.horizontal-leave-active,.horizontal-enter-from,.horizontal-leave-to *{overflow:hidden!important;transition:all .8s ease-out}.horizontal-enter-active>*{transition:all .3s ease-out}.horizontal-leave-active>*{transition:all .3s cubic-bezier(1,.5,.8,1)}.horizontal-enter-from>*{transform:translate(100vw);opacity:0}.horizontal-enter-to>*{transform:translate(0);opacity:1}.horizontal-leave-from>*{transform:translate(0);opacity:1}.horizontal-leave-to>*{transform:translate(-100vw);opacity:0}.vertical-enter-active,.vertical-leave-active,.vertical-enter-from,.vertical-leave-to *{overflow:hidden!important;transition:all .8s ease-out}.vertical-enter-active>*{transition:all .3s ease-out}.vertical-leave-active>*{transition:all .3s cubic-bezier(1,.5,.8,1)}.vertical-enter-from>*{transform:translateY(-100%);opacity:0}.vertical-enter-to>*{transform:translateY(0);opacity:1}.vertical-leave-from>*{transform:translateY(0);opacity:1}.vertical-leave-to>*{transform:translateY(100vh);opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.text-center{text-align:center}form,.info{margin-bottom:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:.25rem;background-color:var(--color-background-mute)}pre{white-space:pre-wrap}button,.button{padding:.5rem 1rem;background-color:var(--color-button);color:var(--color-button-text);border:0;border-radius:.25rem;text-transform:uppercase;cursor:pointer;font-weight:700}button:hover,button:focus,.button:focus,.button:hover{background-color:var(--color-button-hover)}button.red,.button.red{background:var(--vt-red-dark);color:var(--color-button-text);transition:.4s}button.red:hover,button.red:focus,.button.red:focus,.button.red:hover{background-color:var(--vt-red-light)}button.green,.button.green{background:var(--vt-green-dark);color:var(--color-button-text);transition:.4s}button.green:hover,button.green:focus,.button.green:focus,.button.green:hover{background-color:var(--vt-green-light)}button.label{padding:0;background-color:transparent;color:inherit;border:none;border-radius:unset;text-transform:unset;font-weight:inherit;font-size:inherit;line-height:inherit}button.label.red,.button.label.red{background-color:transparent;color:var(--color-link-text)}button.label:hover,button.label:focus,.button.label:hover,.button.label:focus{text-decoration:underline}label:not(.inline),.label:not(.inline){display:block;margin-bottom:.5rem}.label.inline{display:inline-block}.icon{font-size:2em;line-height:1;font-family:monospace}input,select,.input-group{width:100%;padding:.5rem;margin-bottom:1rem;border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-input);background-color:var(--color-background-input)}input[type=checkbox]{width:initial;margin-right:.5rem}.input-group{display:flex;align-items:stretch;margin-bottom:1rem;padding:0}:focus-visible,.input-group:focus-within{outline:var(--color-outline) auto 1px}.input-group>*{box-sizing:border-box;display:block;font-size:.875rem;line-height:.875rem;padding:.5rem}.input-group span{flex:0 0 fit-content;background-color:var(--color-background-input-prefix);border-right:1px solid var(--color-border);color:var(--color-input-prefix)}.input-group input{margin:0;border:none;border-style:none;font-size:unset;outline:none}p{margin-bottom:1rem}img,video,embed{max-width:100%}@media (width >= 1024px){.mobile{display:none}#app{display:flex;place-items:center}#layout{display:grid;grid-template-columns:.5fr auto 1fr;grid-gap:calc(var(--section-gap) / 2);padding:var(--section-gap) calc(var(--section-gap) / 2);transition:grid-template-columns .3s ease-out}#layout>*{padding-left:calc(var(--section-gap) / 2);padding-right:calc(var(--section-gap) / 2);max-height:100%;max-width:100%;transition:max-height .3s ease-out,max-width .3s ease-out}#layout>.divider{padding:unset}#layout.expanded{grid-template-columns:0fr auto 1fr}#layout.expanded>:first-child:is(header),#layout.expanded>.divider{padding-left:0;padding-right:0;max-height:0;overflow:hidden}}@media (width >= 1280px){#layout{max-width:1280px}}
