:root{font-family:Roboto,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--md-sys-color-on-surface);background-color:var(--base-color, var(--md-sys-color-surface));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--md-sys-color-primary);text-decoration:inherit}a:hover{color:var(--md-sys-color-secondary)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.card{padding:2em}#app{max-width:1440px;margin:0 auto;padding:2rem}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;position:relative;font:inherit;font-weight:500;background:none;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;--_shadow-color-1: color-mix(in oklab, transparent, var(--md-sys-color-shadow) 30%);--_shadow-color-2: color-mix(in oklab, transparent, var(--md-sys-color-shadow) 15%);box-shadow:0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0 var(--_shadow-color-1),0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color-2);transition:.35s border-radius cubic-bezier(.42,1.67,.21,.9),.35s box-shadow ease,.35s background ease,.35s color ease}button:before{content:"";pointer-events:none;border-radius:inherit;position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;opacity:0;transition:75ms opacity linear}button:hover:before{opacity:var(--md-sys-state-hover-state-layer-opacity, .08)}button:active:before{opacity:var(--md-sys-state-pressed-state-layer-opacity, .1)}button.xs:after,button.sm:after{content:"";pointer-events:all;position:absolute;height:48px;right:0;bottom:0;left:0;top:50%;transform:translateY(-50%);outline:1px dashed var(--debug-element-color, transparent)}button.xs{padding:0 12px;height:32px;line-height:20px;font-size:14px}button.xs.round{border-radius:16px}button.xs.square{border-radius:12px}button.xs:active{border-radius:8px}button.sm{padding:0 16px;height:40px;line-height:20px;font-size:14px}button.sm.round{border-radius:20px}button.sm.square{border-radius:12px}button.sm:active{border-radius:8px}button.md{padding:0 24px;height:56px;line-height:24px;font-size:16px}button.md.round{border-radius:28px}button.md.square{border-radius:16px}button.md:active{border-radius:12px}button.lg{padding:0 48px;height:96px;font-weight:400;line-height:32px;font-size:24px}button.lg.round{border-radius:48px}button.lg.square{border-radius:28px}button.lg:active{border-radius:16px}button.xl{padding:0 64px;height:136px;font-weight:400;line-height:40px;font-size:32px}button.xl.round{border-radius:68px}button.xl.square{border-radius:28px}button.xl:active{border-radius:16px}button.elevated{--_level: 1;background-color:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-primary)}button.elevated:hover{--_level: 2}button.elevated:active{--_level: 1}button.filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}button.tonal{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}button.outlined{border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant)}button.text{color:var(--md-sys-color-primary);outline:1px dashed var(--debug-element-color, transparent)}button:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:3px}aside{z-index:90;background-color:var(--md-sys-color-surface-container);max-width:500px;padding:12px;border-radius:24px;--_shadow-color-1: color-mix(in oklab, transparent, var(--md-sys-color-shadow) 30%);--_shadow-color-2: color-mix(in oklab, transparent, var(--md-sys-color-shadow) 15%);--_level: 3;box-shadow:0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0 var(--_shadow-color-1),0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color-2)}@media only screen and (min-width: 600px){aside{inset-inline-end:32px;position:fixed}}*{transition:.35s background ease,.35s color ease;-webkit-tap-highlight-color:rgba(0,0,0,0)}.container.svelte-msujol{display:flex;flex-direction:column;gap:12px}h2.svelte-msujol{margin:0 4px}hr.svelte-msujol{width:100%;background-color:var(--md-sys-color-outline-variant);border-color:var(--md-sys-color-outline-variant);margin-block:-2px}label.svelte-msujol{padding-inline:12px;border-radius:12px;background-color:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);--md-slider-inactive-track-color: var(--md-sys-color-on-surface-variant)}#hex.svelte-msujol{background-color:var(--md-sys-color-primary-container)}.input-group.svelte-msujol{display:flex;padding:8px 12px;align-items:center}.input-group.svelte-msujol .label:where(.svelte-msujol){flex-grow:1}.input-group.svelte-msujol .input-wrapper:where(.svelte-msujol){overflow-x:auto;width:40px;height:40px;box-sizing:border-box;border:1px solid var(--md-sys-color-on-secondary-container);position:relative;border-radius:50%;display:flex;align-items:center;justify-content:flex-end}.overflow.svelte-msujol{width:100%;height:100%;overflow:hidden;border-radius:inherit;display:flex;align-items:center;justify-content:center}.input-group.svelte-msujol input[type=color]:where(.svelte-msujol){min-width:200%;min-height:200%}.input-group.svelte-msujol input[type=checkbox]:where(.svelte-msujol){min-width:110%;min-height:110%}.input-group.svelte-msujol select:where(.svelte-msujol),.input-group.svelte-msujol input[type=number]:where(.svelte-msujol){font:inherit;background-color:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline);border-radius:12px;padding:0 8px;height:40px;font-family:monospace;max-width:200px}.input-group.svelte-msujol select:where(.svelte-msujol):focus,.input-group.svelte-msujol input[type=number]:where(.svelte-msujol):focus{outline:3px solid var(--md-sys-color-primary);outline-offset:-3px}.buttons.svelte-rg8oie{display:flex;flex-direction:column;align-items:flex-start;gap:24px;list-style:none;padding-inline:0}.buttons.svelte-rg8oie>h3:where(.svelte-rg8oie){margin-block:-.25em}.wrapper.svelte-rg8oie{display:flex;flex-direction:row;flex-wrap:wrap;gap:24px}#go-to-top{position:fixed;z-index:50;bottom:24px;right:24px;--_level: 2}