:root{--color-primary: #0f172a;--color-accent: #646cff;--color-text: #ffffff;--font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--font-size: 1rem;--font-size-sm: .875rem;--space-0: 0;--space-1: .125rem;--space-2: .25rem;--space-3: .5rem;--space-4: .75rem;--space-5: 1rem;--space-6: 1.25rem;--space-7: 2rem;font-family:var(--font-family);line-height:1.5;font-weight:400;color:var(--color-text);background-color:var(--color-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*>*{margin:0;padding:0;box-sizing:border-box}a{font-weight:500;color:var(--color-accent);text-decoration:inherit}a:hover{text-decoration:underline}body{margin:0;display:flex;place-items:stretch;min-width:320px;min-height:100vh}small{font-weight:600;font-size:var(--font-size-sm)}input,button,select,textarea{font-family:inherit;font-weight:inherit;line-height:inherit;color:inherit}input,select,textarea{font-size:14px}button{border:1px solid transparent;padding:var(--space-2) var(--space-3);font-size:smaller;font-weight:500;font-family:inherit;background-color:color-mix(in srgb,var(--color-primary) 100%,#ffffff);cursor:pointer;transition:border-color .25s;vertical-align:baseline}button:hover{background-color:color-mix(in srgb,var(--color-primary) 40%,#000)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:has(svg){padding:var(--space-3);display:flex}h3{margin-bottom:var(--space-6)}#app{width:100%;height:100vh;display:grid;grid:auto-flow / 280px 2fr;margin:0 auto;padding:0}.divider{height:1px;margin:var(--space-4) calc(-1 * var(--space-6));background:color-mix(in srgb,var(--color-primary) 85%,#ffffff)}.divider.divider-l{margin:var(--space-6) calc(-1 * var(--space-7))}.divider.divider-hidden{background:transparent}.icon[data-v-54590c51]{width:15px;height:15px;fill:#fff;pointer-events:none}.input-wrapper[data-v-fb3f5827]{position:relative}.input-icon[data-v-fb3f5827]{position:absolute;top:50%;left:var(--space-3);transform:translateY(-50%)}.input-append[data-v-fb3f5827]{position:absolute;top:50%;right:var(--space-7);text-transform:uppercase;font-size:var(--font-size-sm);line-height:1;transform:translateY(-50%);opacity:.5}input[data-v-fb3f5827]{padding:var(--space-3) var(--space-4);width:100%;background:transparent;box-shadow:inset 0 0 0 1px #fff0;border:none;box-sizing:border-box;transition:all .2s cubic-bezier(.075,.82,.165,1)}input.has-icon[data-v-fb3f5827]{padding-left:var(--space-7)}input[data-v-fb3f5827]:hover{box-shadow:inset 0 0 0 1px #fff3}input[data-v-fb3f5827]:focus{outline:none;box-shadow:inset 0 0 0 1px #ffffff80}.select-wrapper[data-v-c42496e5]{position:relative}.select-icon[data-v-c42496e5],.caret-icon[data-v-c42496e5]{position:absolute;top:50%;left:var(--space-3);transform:translateY(-50%)}.caret-icon[data-v-c42496e5]{left:calc(100% - 23px)}select[data-v-c42496e5]{padding:var(--space-3) var(--space-4);width:100%;background:transparent;border:none;box-shadow:inset 0 0 0 1px #fff0;box-sizing:border-box;transition:all .3s cubic-bezier(.075,.82,.165,1);-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none}select.has-icon[data-v-c42496e5]{padding-left:var(--space-7)}select[data-v-c42496e5]:hover{box-shadow:inset 0 0 0 1px #fff3}select[data-v-c42496e5]:focus{outline:none;box-shadow:inset 0 0 0 1px #ffffff80}.element-padding-wrapper[data-v-df38f08b],.element-margin-wrapper[data-v-df38f08b]{display:flex;align-items:center}.element-wrapper h3[data-v-df38f08b]{margin-bottom:var(--space-3)}.element-padding-wrapper>*[data-v-df38f08b],.element-margin-wrapper>*[data-v-df38f08b]{flex:1 0 auto}#dss-tool-bar[data-v-168a2e48]{overflow-y:auto;padding:var(--space-6);border-right:1px solid color-mix(in srgb,var(--color-primary) 90%,#ffffff)}#dss-tool-bar>div[data-v-168a2e48]{transition:all .1s ease-in-out}.sizes-control-wrapper[data-v-168a2e48]{display:flex;align-items:center}.sizes-control-wrapper>div[data-v-168a2e48]{width:100%}button.add-size[data-v-168a2e48]{margin-top:var(--space-4)}button.add-size .icon[data-v-168a2e48]{margin-right:var(--space-2)}.focused[data-v-168a2e48]{background:color-mix(in srgb,var(--color-primary) 95%,#ffffff);margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-6));padding:var(--space-4) var(--space-6)}.preview[data-v-9e96f055]{background:var(--color-accent);color:var(--color-primary)}.preview.preview-outline[data-v-9e96f055]{border:1px solid var(--color-accent);background:transparent;color:var(--color-accent)}.preview.preview-rounded[data-v-9e96f055]{border-radius:999px}.preview.preview-unstyled[data-v-9e96f055]{background:transparent;color:var(--color-accent)}#dss-preview[data-v-c4d90870]{overflow-y:auto;background:color-mix(in srgb,var(--color-primary) 95%,#ffffff);padding:var(--space-7)}table[data-v-c4d90870]{width:100%}.size-box[data-v-c4d90870]{height:10px;margin-left:10px;border-radius:999px;background:var(--color-accent)}.component-test[data-v-c4d90870]{max-width:900px;margin-inline:auto}