@import url("https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css");:root{--padding: 3rem;--header-height: 5rem;--color-base-black: #000000;--color-base-white: #ffffff;--color-accent-100: #e9effc;--color-accent-200: #b7cbf5;--color-accent-300: #86a8ee;--color-accent-400: #5384e6;--color-accent-500: #205fdc;--color-accent-600: #16439c;--color-error-100: #fee5ee;--color-error-200: #fbb6cf;--color-error-300: #f884ae;--color-error-400: #f54383;--color-error-500: #d30b53;--color-error-600: #9c083e;--color-success-100: #eef6e9;--color-success-200: #bcdbaa;--color-success-300: #88c06c;--color-success-400: #4da42a;--color-success-500: #278500;--color-success-600: #006500;--color-neutral-100: #F4F6F9;--color-neutral-200: #E6E8F0;--color-neutral-300: #C7CBD8;--color-neutral-400: #9CA1B3;--color-neutral-500: #707689;--color-neutral-600: #4F5464;--color-neutral-700: #32343F;--color-neutral-800: #1F1F26;--color-neutral-900: #151519;--color-neutral-darken-100: #002F750A;--color-neutral-darken-200: #0014661A;--color-neutral-darken-300: #00124D38;--color-neutral-darken-400: #06113763;--color-neutral-darken-500: #0F131F8F;--color-neutral-darken-600: #0D0E12B0;--color-neutral-darken-700: #070708CC;--color-neutral-darken-800: #050505E0;--color-neutral-darken-900: #020203EB;--color-neutral-lighten-100: #FCFCFDFA;--color-neutral-lighten-200: #FAFAFAF0;--color-neutral-lighten-300: #F4F4F6D9;--color-neutral-lighten-400: #EDEEF2B2;--color-neutral-lighten-500: #E0E4F08A;--color-neutral-lighten-600: #CDD8F963;--color-neutral-lighten-700: #CCD6FF40;--color-neutral-lighten-800: #D1D1FF26;--color-neutral-lighten-900: #D6D6FF1A;--color-text-icon-placeholder: var(--color-neutral-400);--color-text-icon-muted: var(--color-neutral-500);--color-text-icon-default: var(--color-neutral-700);--color-text-icon-strong: var(--color-neutral-900);--color-background-surface: var(--color-base-white);--color-background-overlay: var(--color-neutral-darken-600);--color-background-default: var(--color-neutral-100);--color-background-default-alpha: var(--color-neutral-darken-100);--color-background-default-alpha-inverted: var(--color-neutral-lighten-900);--color-border-default: var(--color-neutral-200);--color-border-default-alpha: var(--color-neutral-darken-200);--color-border-default-alpha-inverted: var(--color-neutral-lighten-800);--family-sans-serif: 'Inter', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;--family-code: 'DM Mono', monospace;--effect-elevation-4dp: inset 0px -1px 0px var(--color-neutral-darken-100), 0px 0px 2px var(--color-neutral-darken-200), 0px 8px 20px var(--color-neutral-darken-200);--effect-elevation-3dp: inset 0px -1px 0px var(--color-neutral-darken-100), 0px 0px 1px var(--color-neutral-darken-300), 0px 2px 12px var(--color-neutral-darken-200);--effect-elevation-2dp: inset 0px -1px 0px var(--color-neutral-darken-100), 0px 0px 1px var(--color-neutral-darken-300), 0px 2px 6px var(--color-neutral-darken-200);--effect-elevation-1dp: inset 0px -1px 0px var(--color-neutral-darken-100), 0px 0px 1px var(--color-neutral-darken-300), 0px 1px 4px var(--color-neutral-darken-200);--effect-elevation-inset-1dp: inset 0px 1px 0px var(--color-neutral-darken-200), inset 0px 0px 1px var(--color-neutral-darken-300), inset 0px 1px 4px var(--color-neutral-darken-200);--effect-border-left: inset 1px 0px 0px var(--color-border-default-alpha);--effect-border-top: inset 0px 1px 0px var(--color-border-default-alpha);--effect-border-right: inset -1px 0px 0px var(--color-border-default-alpha);--effect-border-bottom: inset 0px -1px 0px var(--color-border-default-alpha);--effect-border-top-bottom: inset 0px -1px 0px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default);--radius-small: 4px;--radius-medium: 8px;--radius-large: 12px;--animation-timing: 200ms;--animation-easing: cubic-bezier(0.17, 0.84, 0.44, 1);--slider-input-height: .25rem;--slider-input-thumb-height: 1.5rem}@media (prefers-color-scheme: dark){:root{--color-text-icon-placeholder: var(--color-neutral-600);--color-text-icon-muted: var(--color-neutral-500);--color-text-icon-default: var(--color-neutral-300);--color-text-icon-strong: var(--color-neutral-100);--color-background-surface: var(--color-neutral-800);--color-background-default: var(--color-neutral-900);--color-background-default-alpha: var(--color-neutral-lighten-900);--color-background-default-alpha-inverted: var(--color-neutral-darken-100);--color-border-default: var(--color-neutral-800);--color-border-default-alpha: var(--color-neutral-lighten-900);--color-border-default-alpha-inverted: var(--color-neutral-darken-200)}}@media (prefers-color-scheme: dark){:root{--effect-elevation-4dp: 0px 2px 4px var(--color-neutral-darken-600), 0px 8px 24px var(--color-neutral-darken-600), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);--effect-elevation-3dp: 0px 1px 2px var(--color-neutral-darken-800), 0px 6px 12px var(--color-neutral-darken-800), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);--effect-elevation-2dp: 0px 1px 1px var(--color-neutral-darken-800), 0px 4px 10px -2px var(--color-neutral-darken-800), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);--effect-elevation-1dp: 0px 2px 12px -6px var(--color-neutral-darken-900), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px 0px var(--color-border-default-alpha);--effect-elevation-inset-1dp: inset 0px 1px 0px var(--color-neutral-lighten-800), inset 0px 0px 1px var(--color-neutral-darken-300), inset 0px 1px 4px var(--color-neutral-darken-200);--effect-border-left: inset 1px 0px 0px var(--color-border-default-alpha);--effect-border-top: inset 0px 1px 0px var(--color-border-default-alpha);--effect-border-right: inset -1px 0px 0px var(--color-border-default-alpha);--effect-border-bottom: inset 0px -1px 0px var(--color-border-default-alpha)}}.h900{font-family:var(--family-sans-serif);font-size:4rem;font-weight:700;line-height:1.25;letter-spacing:0;text-transform:none;color:var(--color-text-icon-strong)}.h800{font-family:var(--family-sans-serif);font-size:3rem;font-weight:700;line-height:1.166;letter-spacing:0;text-transform:none;color:var(--color-text-icon-strong)}.h700{font-family:var(--family-sans-serif);font-size:2.25rem;font-weight:700;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-strong)}.h600{font-family:var(--family-sans-serif);font-size:1.5rem;font-weight:700;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-strong)}.h500{font-family:var(--family-sans-serif);font-size:1.125rem;font-weight:700;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-strong)}.h400{font-family:var(--family-sans-serif);font-size:0.875rem;font-weight:700;line-height:1.429;letter-spacing:0.005em;text-transform:none;color:var(--color-text-icon-strong)}.h300{font-family:var(--family-sans-serif);font-size:0.75rem;font-weight:600;line-height:1.333;letter-spacing:0.02em;text-transform:uppercase;color:var(--color-text-icon-strong)}.h200{font-family:var(--family-sans-serif);font-size:0.625rem;font-weight:600;line-height:1.2;letter-spacing:0.04m;text-transform:uppercase;color:var(--color-text-icon-strong)}.t500{font-family:var(--family-sans-serif);font-size:1.125rem;font-weight:400;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-default)}.t400,body,.input,.textarea,.toast{font-family:var(--family-sans-serif);font-size:0.875rem;font-weight:400;line-height:1.429;letter-spacing:0.005em;text-transform:none;color:var(--color-text-icon-default)}.t300,.color-swatch__figcaption,.slider__legend,.form-field__header__caption,.tooltip:after{font-family:var(--family-sans-serif);font-size:0.75rem;font-weight:400;line-height:1.333;letter-spacing:0.01em;text-transform:none;color:var(--color-text-icon-muted)}.t500-strong{font-family:var(--family-sans-serif);font-size:1.125rem;font-weight:600;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-default)}.t400-strong,.button,.form-field__header__label{font-family:var(--family-sans-serif);font-size:0.875rem;font-weight:600;line-height:1.429;letter-spacing:0.005em;text-transform:none;color:var(--color-text-icon-default)}.t300-strong,.segmented-control__label,.slider__legend output,.form-field__header__label--secondary{font-family:var(--family-sans-serif);font-size:0.75rem;font-weight:600;line-height:1.333;letter-spacing:0.01em;text-transform:none;color:var(--color-text-icon-muted)}.c500{font-family:var(--family-code);font-size:1.125rem;font-weight:400;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-default)}.c400,.color-output{font-family:var(--family-code);font-size:0.875rem;font-weight:400;line-height:1.429;letter-spacing:0.005em;text-transform:none;color:var(--color-text-icon-default)}.c300,.textarea--code,.color-row__output__text{font-family:var(--family-code);font-size:0.75rem;font-weight:400;line-height:1.333;letter-spacing:0.01em;text-transform:none;color:var(--color-text-icon-muted)}.c500-strong{font-family:var(--family-code);font-size:1.125rem;font-weight:500;line-height:1.333;letter-spacing:0;text-transform:none;color:var(--color-text-icon-default)}.c400-strong{font-family:var(--family-code);font-size:0.875rem;font-weight:500;line-height:1.429;letter-spacing:0.005em;text-transform:none;color:var(--color-text-icon-default)}.c300-strong{font-family:var(--family-code);font-size:0.75rem;font-weight:500;line-height:1.333;letter-spacing:0.01em;text-transform:none;color:var(--color-text-icon-muted)}body{max-width:1440px;min-width:1024px;margin:0 auto;perspective:500px;background:var(--color-background-default);color:var(--color-text-icon-default)}*:focus-visible,.input--color-combo:focus-within,.background-control:focus-within{outline-color:var(--color-accent-500);outline-offset:2px;outline-width:2px;outline-style:solid}svg{fill:currentColor}a,a:visited{text-decoration:none;color:var(--color-accent-500)}a:hover,a:visited:hover{color:var(--color-accent-400)}a.button,a:visited.button{color:inherit}.dialog{border:none;width:100%;max-width:30rem;height:32rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;gap:1rem;border-radius:var(--radius-large);background:var(--color-background-surface);padding:1.5rem;box-shadow:var(--effect-elevation-4dp);color:inherit;animation:dialogSlideIn var(--animation-timing) var(--animation-easing)}.dialog::backdrop{background-color:#06113763}@media (prefers-color-scheme: dark){.dialog::backdrop{background-color:#0F131F8F}}.dialog--alert{max-width:20rem;height:fit-content;gap:1.5rem}.dialog--alert>.dialog__body{align-items:center;text-align:center}.dialog__body__text{display:flex;flex-direction:column;gap:.5rem;text-align:center}.dialog:not([open]){display:none;pointer-events:none;opacity:0}.dialog__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem}.dialog__body{display:flex;flex-direction:column;gap:1rem;flex-grow:1}.dialog__footer{display:inline-flex;gap:.75rem}.dialog__footer>*{flex-grow:1}@keyframes dialogSlideIn{from{opacity:0;transform:scale(0.95) rotateX(-2deg)}}.dialog--welcome{height:fit-content;padding:1rem;gap:0}.dialog--welcome>.dialog__body{padding:1.5rem;align-items:center;flex-grow:initial;gap:1.5rem}.dialog-welcome__logo{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-medium);box-shadow:var(--effect-elevation-2dp)}.dialog__body--illustration{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:3rem 2rem 3rem !important;gap:1rem;background-color:var(--color-background-default);border-radius:var(--radius-medium)}.color-swatch{display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:5rem}.color-swatch__color{position:relative;padding:1rem;border-radius:var(--radius-large);background:white;overflow:hidden;box-shadow:var(--effect-elevation-2dp)}.color-swatch__color:after{content:'';position:absolute;z-index:0;top:0;bottom:0;right:0;width:50%;background:url("../src/checker-grid.svg");background-size:auto;box-shadow:var(--effect-border-left)}.color-swatch__color>div{position:relative;z-index:2;width:3rem;height:3rem;border-radius:var(--radius-medium)}.color-swatch__figcaption{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--color-text-icon-muted)}.color-swatch__figcaption__hex{font-size:.625rem;font-weight:600;color:var(--color-accent-500)}.button{position:relative;display:inline-flex;justify-content:center;gap:.5rem;border:none;padding:.5rem .75rem;border-radius:var(--radius-medium);background:var(--color-accent-500);color:var(--color-base-white);box-shadow:var(--effect-elevation-1dp);cursor:pointer;transition:background var(--animation-timing) var(--animation-easing),transform var(--animation-timing) var(--animation-easing)}.button:hover{background:var(--color-accent-400)}.button:active{transform:scale(0.95)}.button:disabled{font-weight:400;cursor:default}.button:disabled:hover{background-color:inherit}.button--icon-only{padding:.5rem}.button--outline{background:var(--color-background-surface);color:var(--color-text-icon-default)}.button--outline .button__icon{color:var(--color-text-icon-muted)}.button--outline:hover{background:var(--color-background-default)}.button--outline:hover .button__icon{color:inherit}.button__icon{transition:color var(--animation-timing) var(--animation-easing)}.button--ghost{background:none;color:var(--color-text-icon-default);box-shadow:none}.button--ghost .button__icon{color:var(--color-text-icon-muted)}.button--ghost:hover{background:var(--color-background-default-alpha)}.button--ghost:hover .button__icon{color:inherit}.button--ghost:disabled{color:var(--color-text-icon-placeholder)}.button--ghost:disabled:hover{background-color:initial}.button-group{display:flex;align-items:center;gap:.5rem}.button-group--reverse{flex-direction:column}.input{border:none;padding:.5rem .75rem;border-radius:var(--radius-medium);background:var(--color-background-surface);color:var(--color-text-icon-default);box-shadow:var(--effect-elevation-1dp)}.input::placeholder{color:var(--color-text-icon-placeholder)}.input--error{animation-name:shakeX;animation-duration:0.5s;animation-timing-function:ease-in-out}.input--select{appearance:none;background-image:url("../src/select-chevron.svg");background-repeat:no-repeat;background-position:center right .75rem}@media (prefers-color-scheme: dark){.input--select{background-image:url("../src/select-chevron-dark.svg")}}.color-output{padding:.5rem .75rem;border-radius:var(--radius-medium);color:var(--color-base-white);cursor:copy}.color-output:hover{background:var(--color-background-default-alpha-inverted);box-shadow:inset 0 0 0 1px var(--color-border-default-alpha-inverted)}@media (prefers-color-scheme: dark){.color-output:hover{background:var(--color-background-default-alpha);box-shadow:inset 0 0 0 1px var(--color-border-default-alpha)}}.color-output:active{transform:scale(0.95)}.color-output--invert{color:var(--color-base-black)}.color-output--invert:hover{background:var(--color-background-default-alpha);box-shadow:inset 0 0 0 1px var(--color-border-default-alpha)}@media (prefers-color-scheme: dark){.color-output--invert:hover{background:var(--color-background-default-alpha-inverted);box-shadow:inset 0 0 0 1px var(--color-border-default-alpha-inverted)}}.color-output__callout{padding:.25rem;border-radius:var(--radius-small);box-shadow:inset 0 0 0 1px var(--color-border-default-alpha-inverted)}@media (prefers-color-scheme: dark){.color-output__callout{box-shadow:inset 0 0 0 1px var(--color-border-default-alpha)}}.color-output--invert .color-output__callout{box-shadow:inset 0 0 0 1px var(--color-border-default-alpha)}@media (prefers-color-scheme: dark){.color-output--invert .color-output__callout{box-shadow:inset 0 0 0 1px var(--color-border-default-alpha-inverted)}}input[type="color"]{padding:0;background:transparent;border:none;overflow:hidden}input[type="color"]::-webkit-color-swatch-wrapper{padding:0px;border:none}input[type="color"]::-webkit-color-swatch{border:none;border-radius:0}input[type="color"]::-moz-color-swatch{border:none;border-radius:0}.input--color-combo{display:flex;flex-direction:row;align-items:stretch;padding:0}.input--color-combo__text{flex:1;padding-left:.5rem;box-shadow:none;background:unset}.input--color-combo__text:focus-visible{outline:none}.input--color-combo__color{position:relative;height:1.75rem;width:1.75rem;margin:.25rem;align-self:stretch;border-radius:var(--radius-small)}.input--color-combo__color:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--color-border-default-alpha)}.input--color-combo__color:focus-visible{outline:none}@keyframes shakeX{from,to{transform:translate3d(0, 0, 0)}20%,60%{transform:translate3d(-10px, 0, 0)}40%,80%{transform:translate3d(10px, 0, 0)}}.textarea{resize:none;border:none;padding:1rem;border-radius:var(--radius-medium);background:var(--color-background-surface);color:var(--color-text-icon-default);box-shadow:var(--effect-elevation-1dp)}.textarea::placeholder{color:var(--color-text-icon-placeholder)}.textarea:read-only{box-shadow:none;background:var(--color-background-default)}.textarea--full{flex-grow:1}.textarea--read-only{flex-grow:1;position:relative}.textarea--read-only__child{width:100%;height:100%}.textarea--read-only__button{position:absolute !important;top:1rem;right:1rem}.segmented-control{position:relative;display:flex;align-items:stretch;gap:.125rem;padding:.125rem;border-radius:var(--radius-medium);background:var(--color-background-default-alpha)}.segmented-control__button{position:relative;width:100%;height:2rem}.segmented-control__label{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;align-items:center;padding:.5rem;border-radius:6px;color:var(--color-text-icon-default);text-align:center;transition:all var(--animation-timing) var(--animation-easing)}.segmented-control__label:hover{background:var(--color-background-default-alpha);color:var(--color-text-icon-strong);cursor:pointer}.segmented-control__label:active{transform:scale(0.95)}.segmented-control__radio{position:absolute;appearance:none;top:0;left:0;right:0;bottom:0;border-radius:6px}.segmented-control__radio:checked+.segmented-control__label{background:var(--color-background-surface);box-shadow:var(--effect-elevation-1dp)}.slider{display:grid;gap:.5rem}.slider__input{-webkit-appearance:none;appearance:none;margin:calc((var(--slider-input-thumb-height) - var(--slider-input-height)) / 2) 0;width:100%;height:var(--slider-input-height);border-radius:999px;background:linear-gradient(to right, var(--color-accent-500) 0%, var(--color-accent-500) 50%, var(--color-border-default-alpha) 50%, var(--color-border-default-alpha) 100%);transition:background 450ms ease-in}.slider__input::-webkit-slider-thumb{border:none;appearance:none;position:relative;width:var(--slider-input-thumb-height);height:var(--slider-input-thumb-height);background-color:var(--color-background-surface);background-image:url("/src/slider-thumb.svg");background-position:center center;background-size:auto;background-repeat:no-repeat;border-radius:999px;box-shadow:var(--effect-elevation-1dp);cursor:pointer;transition:all var(--animation-timing) var(--animation-easing)}@media (prefers-color-scheme: dark){.slider__input::-webkit-slider-thumb{background-image:url("/src/slider-thumb-dark.svg")}}.slider__input::-webkit-slider-thumb:hover{transform:scale(1.05);box-shadow:var(--effect-elevation-3dp)}.slider__input::-webkit-slider-thumb:active{transform:scale(0.95)}.slider__input::-moz-range-thumb{border:none;appearance:none;position:relative;width:var(--slider-input-thumb-height);height:var(--slider-input-thumb-height);background-color:var(--color-background-surface);background-image:url("/src/slider-thumb.svg");background-position:center center;background-size:auto;background-repeat:no-repeat;border-radius:999px;box-shadow:var(--effect-elevation-1dp);cursor:pointer}@media (prefers-color-scheme: dark){.slider__input::-moz-range-thumb{background-image:url("/src/slider-thumb-dark.svg")}}.slider__legend{display:flex;justify-content:space-between;color:var(--color-text-icon-muted)}.slider__legend output{color:var(--color-text-icon-default)}.toast{z-index:999;position:fixed;bottom:var(--padding);left:50%;transform:translateX(-50%);padding:0.5rem .75rem;color:var(--color-text-icon-default);background-color:var(--color-background-surface);border-radius:var(--radius-medium);box-shadow:var(--effect-elevation-2dp);animation:showHideToast var(--animation-timing) var(--animation-easing) forwards}@keyframes showHideToast{from{transform:translateX(-50%);opacity:1}to{transform:translateX(-50%) translateY(4rem) scale(0.95);opacity:0}}.color-row{z-index:1;display:grid;grid-template-columns:1fr 1fr;--color-row-height: 4rem;min-height:var(--color-row-height);overflow:hidden;border-radius:var(--radius-large)}.color-row--empty:hover{background-color:var(--color-background-default-alpha)}@media (prefers-color-scheme: dark){.color-row--empty:hover{background-color:var(--color-background-default-alpha-inverted)}}.color-row--empty--invert:hover{background-color:var(--color-background-default-alpha-inverted)}@media (prefers-color-scheme: dark){.color-row--empty--invert:hover{background-color:var(--color-background-default-alpha)}}.color-row__input,.color-row__output{position:relative;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem}.color-row__output{justify-content:end}.color-row__output__text{color:white}.color-row__icon{z-index:1;box-sizing:content-box;position:absolute;left:0;padding:.25rem;transform:translateX(-50%);border-radius:999px;color:var(--color-neutral-lighten-700)}.color-row--invert .color-row__icon,.color-row--invert .color-row__icon{color:var(--color-neutral-darken-300)}.color-row--animated{animation-duration:var(--animation-timing);animation-timing-function:var(--animation-easing);animation-fill-mode:forwards}.color-row--animated-in{animation:fadeInUp 500ms var(--animation-easing) backwards}@keyframes fadeInUp{from{transform:translateY(2rem);opacity:0}}@keyframes moveUp{from{margin-top:var(--color-row-height)}}@keyframes moveDown{from{margin-top:calc(var(--color-row-height) * -1)}}@keyframes scaleDown{from{transform:scale(1.05);opacity:.75}}.form-field{display:flex;flex-direction:column;gap:1rem}.form-field--group{gap:2rem}.form-field__header{display:flex;flex-direction:column;gap:.25rem}.form-field__header__label{color:var(--color-text-icon-default)}.form-field__header__label--secondary{color:var(--color-text-icon-muted)}.form-field__header__caption{color:var(--color-text-icon-muted)}.tooltip{position:relative;--tooltip-offset: .5rem}.tooltip:after{content:attr(data-title);position:absolute;opacity:0;visibility:hidden;z-index:9999;padding:0.25rem 0.5rem;background:var(--color-background-surface);border-radius:var(--radius-small);color:var(--color-text-icon-muted);box-shadow:var(--effect-elevation-2dp);white-space:nowrap}.tooltip:hover:after,.tooltip:focus-visible{opacity:1;visibility:visible;transition:opacity var(--animation-timing) var(--animation-easing) 250ms}.tooltip:active:after{opacity:0;visibility:hidden;transition:none}.tooltip--bottom:after{top:100%;left:50%;transform:translateX(-50%)}.tooltip--bottom:hover:after{top:calc(100% + var(--tooltip-offset))}.tooltip--right:after{top:50%;left:100%;transform:translateY(-50%)}.tooltip--right:hover:after{left:calc(100% + var(--tooltip-offset))}.tooltip--left:after{top:50%;right:100%;transform:translateY(-50%)}.tooltip--left:hover:after{right:calc(100% + var(--tooltip-offset))}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:var(--header-height);padding:0 calc(var(--padding) * (1 / 2))}.header__start{display:flex;flex-direction:row;align-items:center;gap:0.5rem}.header__end{display:inline-flex;gap:.75rem;align-items:center}.logo__title{display:flex;flex-direction:row;align-items:baseline;gap:0.5rem}.logo__title h1{color:var(--color-text-icon-strong)}.logo__title span{color:var(--color-text-icon-muted)}.main{position:relative;display:flex;height:calc(100vh - var(--header-height))}.aside{display:flex;flex-direction:column}.aside--settings{max-width:25rem;gap:2rem;overflow:auto;padding:var(--padding)}.aside--toolbar{justify-content:space-between;gap:1rem;padding:calc(var(--padding) / 3)}.divider{height:1px;background-color:var(--color-border-default-alpha);border:none}.divider--vertical{height:1.5rem;width:1px}.background-control{display:grid;border-radius:var(--radius-medium);background:var(--color-background-surface);overflow:hidden;box-shadow:var(--effect-elevation-1dp)}.background-control__color{position:relative;height:100%;width:2.25rem;aspect-ratio:1 / 1;border:0;padding:0;margin:0;background-color:transparent;border:none;border-collapse:collapse;border-radius:0;outline:none;overflow:hidden}.background-control__color:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background:url("../src/checker-grid.svg");background-size:auto;opacity:1}.background-control__color:hover:before{opacity:.5}.viewport{flex:1;overflow:auto;padding:var(--padding);border-radius:var(--radius-large) var(--radius-large) 0 0;box-shadow:var(--effect-elevation-1dp)}.viewport:hover{background-image:url("../src/checker-grid.svg");background-size:auto}.viewport--inverted:hover{background-image:url("../src/checker-grid-dark.svg")}.color-list{display:flex;flex-direction:column;--color-list-gap: 0.5rem;gap:var(--color-list-gap);list-style:none}
/*# sourceMappingURL=main.css.map */