:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*,:before,:after{box-sizing:border-box}html,body{min-width:20rem;min-height:100%}body{margin:0}textarea{color:inherit;font:inherit}:root{--initial-page-color:#eee9df;--initial-foreground-color:#191916;--page-color:var(--initial-page-color);--foreground-color:var(--initial-foreground-color);--surface-color:color-mix(in srgb, var(--page-color), transparent 10%);--muted-foreground-color:color-mix(in srgb, var(--foreground-color), transparent 35%);--border-color:color-mix(in srgb, var(--foreground-color), transparent 62%);--result-slot-height:3.25rem;--message-slot-height:2.625rem;--transition-duration:.72s}.page{background-color:var(--page-color);min-height:100dvh;color:var(--foreground-color);transition:background-color var(--transition-duration) cubic-bezier(.22, 1, .36, 1), color var(--transition-duration) ease;justify-content:center;align-items:center;display:flex}.color-converter{justify-content:center;align-items:center;width:min(38rem,100% - 3rem);min-height:31rem;display:flex}.color-converter__form{flex-direction:column;gap:1rem;width:100%;display:flex}.color-converter__label{letter-spacing:.2em;text-transform:uppercase;align-self:flex-start;font-size:clamp(.75rem,1.6vw,.875rem);font-weight:700}.color-converter__input{resize:vertical;border:1px solid var(--border-color);background-color:var(--surface-color);width:100%;min-height:12rem;caret-color:var(--foreground-color);transition:border-color .18s ease, box-shadow .18s ease, background-color var(--transition-duration) ease;border-radius:1.25rem;outline:0;padding:1.5rem;font-size:clamp(1.25rem,4vw,2rem);font-weight:400;line-height:1.55;box-shadow:0 1.5rem 4rem #0000001f}.color-converter__input::placeholder{color:var(--muted-foreground-color)}.color-converter__input:focus-visible{border-color:var(--foreground-color);box-shadow:0 0 0 .2rem color-mix(in srgb, var(--foreground-color), transparent 78%), 0 1.5rem 4rem #0000001f}.color-converter__result{width:100%;height:var(--result-slot-height);letter-spacing:.08em;text-transform:uppercase;justify-content:center;align-self:center;align-items:center;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:clamp(1.75rem,6vw,3.25rem);font-weight:600;line-height:1;display:flex}.color-converter__message{width:100%;height:var(--message-slot-height);color:inherit;text-align:center;justify-content:center;align-items:flex-start;margin:0;font-size:.875rem;line-height:1.5;display:flex;overflow:hidden}@media (width<=40rem){.color-converter{width:calc(100% - 2rem)}.color-converter__input{min-height:10rem;padding:1.25rem}}@media (prefers-reduced-motion:reduce){.page,.color-converter__input{transition-duration:.01ms}}