header{text-align:center}header h1{font-size:1.8em;font-size:min(1.8rem,max(1.3rem,calc(1.3rem + calc(8 * calc(calc(100vw - 20rem) / 360)))));margin:.5em 0}header p{font-size:1em;margin:.5em 0}footer{display:flex;padding:3em 0 1em;justify-content:center;gap:15px}footer a{display:inline-flex;border-radius:50px;opacity:.3;transition:opacity .2s}footer a img{width:30px}footer a.inverted{padding:5px;background-color:var(--c-white);filter:invert(1)}footer a.inverted img{width:20px}footer a:hover{opacity:.9}.input-number{position:relative;display:flex;flex-direction:column;gap:4px}.input-number span{_font-size:.8rem}.input-number input{display:flex;width:100%;height:40px;padding:0 65px 0 1em;border:1px solid var(--c-gray);border-radius:5px;-moz-appearance:textfield}.input-number input::-webkit-outer-spin-button,.input-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-number select{position:absolute;right:5px;bottom:5px;height:30px;width:50px;padding:0 0 0 .6rem;margin:0;border:0;border-radius:3px;cursor:pointer;outline:1px solid var(--c-gray);background-color:transparent;font-size:.7rem}.input-number select:not(.disabled):hover{background-color:var(--c-white)}.input-number select.disabled{-moz-appearance:none;-webkit-appearance:none;width:35px;pointer-events:none}.input-number select.disabled::-ms-expand{display:none}.input-checkbox{display:flex;gap:8px;cursor:pointer;align-items:center;margin-top:28px;-webkit-user-select:none;user-select:none;--input-checkbox-size: 16px;--input-checkbox-padding: 4px}.input-checkbox input{display:none}.input-checkbox div{position:relative;display:inline-block;height:var(--input-checkbox-size);width:calc(var(--input-checkbox-size) * 2);border-radius:30px;background-color:var(--c-light-gray);padding:var(--input-checkbox-padding);box-sizing:content-box;transition:.2s}.input-checkbox div:before{content:"";position:absolute;left:var(--input-checkbox-padding);display:inline-block;width:var(--input-checkbox-size);height:var(--input-checkbox-size);border-radius:100%;background-color:var(--c-dark-gray);transition:.2s}.input-checkbox div:has(input:checked){background-color:var(--c-primary)}.input-checkbox div:has(input:checked):before{left:calc(var(--input-checkbox-size) + var(--input-checkbox-padding));background-color:var(--c-white)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:2rem 0}.controls label{width:100%}@media only screen and (max-width: 680px){.controls{grid-template-columns:1fr}}.clipboardButton{position:relative;border:none;display:inline-flex;background-color:transparent;margin:0;padding:.2rem;border-radius:5px;transition:.2s;cursor:pointer;opacity:.5}.clipboardButton img{transition:.1s}.clipboardButton img[data-type]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform:scale(.5)}.clipboardButton[data-clipboard-result=ok] img:first-child{opacity:0;transform:scale(.5)}.clipboardButton[data-clipboard-result=ok] img[data-type=ok]{opacity:1;transform:scale(1)}.clipboardButton[data-clipboard-result=ko] img:first-child{opacity:0;transform:scale(.5)}.clipboardButton[data-clipboard-result=ko] img[data-type=ko]{opacity:1;transform:scale(1)}.clipboardButton:hover{background-color:#0000000d;opacity:1}pre{padding:.5rem .5rem .5rem 1rem;background-color:var(--c-light-gray);border-radius:5px;white-space:collapse;display:flex;align-items:center;align-content:center;justify-content:space-between;gap:1rem}pre code{flex-shrink:1;font-size:.8rem}pre code span[data-style=prop]{font-weight:600;color:var(--c-primary);margin-right:5px}pre code span[data-style=var]{font-weight:600;cursor:help;text-decoration:underline dotted;text-decoration-thickness:2}pre code span[data-style=var]:hover{text-decoration-color:var(--c-primary)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;box-sizing:border-box;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--c-primary: #07a;--c-secondary: #70a;--c-light-gray: #eee;--c-gray: #c3c3c3;--c-dark-gray: #aaa;--c-black: #111;--c-white: #f6f6f6;--c-ok: #0a7;--c-ko: #a00}*{box-sizing:border-box}body{margin:0;padding:30px;display:flex;place-items:center;min-width:320px;min-height:100vh;background:#f9faff}h1{font-size:3.2em;line-height:1.1}#root{width:100%;max-width:900px;min-height:700px;margin:0 auto;padding:3rem;border-radius:30px;box-shadow:15px 15px #0000000a,0 0 0 2px #0000000a;background-color:#fff}@media only screen and (max-width: 680px){body{background:#f2f2f7;padding:0}#root{padding:1.5rem;min-height:100vh;box-shadow:inset 0 0 0 .5rem #f2f2f7}}