*,*:before,*:after{box-sizing:border-box}:root{--bg: #ffffff;--bg-alt: #eee;--fg: #000000;--border: rgba(0,0,0,.125);--border-solid: rgba(0,0,0,1);--border-alt: rgba(255,255,255,.25);--border-solid-alt: rgba(255,255,255,1);--bg-transparent: rgba(255,255,255,.125);--bg-transparent-2: rgba(255,255,255,.4);--logo: rgba(0,0,0,.3);--glass-tint: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .22);--glass-inner: rgba(255, 255, 255, .12);--theme-bg: #34f623}html.dark{--bg: #000000;--bg-alt: #111;--fg: #ffffff;--border: rgba(255,255,255,.125);--border-solid: rgba(255,255,255,1);--border-alt: rgba(0,0,0,.125);--border-solid-alt: rgba(0,0,0,1);--bg-transparent: rgba(0,0,0,.0125);--bg-transparent-2: rgba(0,0,0,.2);--logo: rgba(255,255,255,.25);--glass-tint: rgba(0, 0, 0, .18);--glass-border: rgba(255, 255, 255, .16);--glass-inner: rgba(255, 255, 255, .12);--theme-bg: #34f623}html,body{background:var(--theme-bg);color:var(--fg);transition:background .3s ease,color .3s ease;padding:0;margin:0;min-height:100dvh}.theme{background:transparent;color:var(--fg);border:none;padding:0;cursor:pointer;font-size:20px}.palette-card{border:1px solid transparent;padding:8px;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;background:transparent;isolation:isolate}.palette-card__title{font-size:12px;font-weight:400;margin:0 0 10px;opacity:.95}.palette-card__swatches{display:flex;flex-wrap:nowrap;gap:4px}.palette-card__swatch{width:20px;height:20px;aspect-ratio:1;border-radius:9999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 65%,transparent)}.palette-card__loading{height:22px;display:flex;align-items:center}.liquid-glass .liquid-glass__inner{position:relative;z-index:3;border-radius:12px;padding:12px;background:var(--glass-inner);-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15);box-shadow:inset 2px 2px 0 -2px #ffffff73,inset 0 0 3px 1px #ffffff38}.palette-card.liquid-glass:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden;box-shadow:inset 2px 2px 0 -2px #ffffffb3,inset 0 0 3px 1px #ffffff59;background-color:#ffffff1a}.palette-card.liquid-glass:after{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);-webkit-filter:url(#card-glass);filter:url(#card-glass);isolation:isolate;background:transparent;border:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glass-border) 55%,transparent)}.palette-card.liquid-glass:hover{transform:translateY(-1px)}.palette-card.liquid-glass{transition:transform .18s ease,box-shadow .18s ease}@media (prefers-color-scheme: dark){html:not(.light):not(.dark){--bg: #000000;--fg: #ffffff;--border: rgba(255,255,255,.125);--bg-transparent: rgba(0,0,0,.0125);--bg-transparent-2: rgba(0,0,0,.2)}}.skeleton{display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:400% 400%;animation:shimmer 1.2s ease infinite}@keyframes shimmer{0%{background-position:0 0}to{background-position:200% 0}}.spin:after{content:"";width:16px;height:16px;border:2px solid var(--fg);border-top-color:transparent;border-radius:50%;display:inline-block;animation:rot .8s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}.palette-card.selected{box-shadow:inset 0 0 0 .5px var(--bg-transparent),0 0 8px 1px var(--bg-transparent-2),}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.grid-1-2{grid-template-columns:1fr 2fr}.grid-1{grid-template-columns:repeat(1,1fr)}.upload-height{aspect-ratio:1.5/1;width:100%}.main-grid{grid-template-columns:1fr}.preview-layout{display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:96px;min-height:calc(100dvh - 96px)}.preview-card{width:min(860px,92vw);padding:48px;border-radius:32px}.preview-card.liquid-glass:hover{transform:none}.preview-card__inner{width:100%;display:flex;flex-direction:column;gap:14px;border-radius:20px!important}.preview-image-frame.preview-image-frame.preview-image-frame{width:100%;aspect-ratio:1.5 / 1;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #0000001a;background:var(--bg-alt)}.preview-image-frame--interactive{cursor:pointer;user-select:none;border:0}.preview-image-frame--interactive:focus-visible{border:4px solid red!important;outline:2px solid color-mix(in srgb,var(--fg) 65%,transparent);outline-offset:3px}.preview-image-frame--interactive:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 60%,transparent),0 0 24px color-mix(in srgb,var(--fg) 12%,transparent)}.preview-image{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01)}.preview-meta{display:flex;flex-direction:column;align-items:center;gap:10px}.preview-title{font-size:12px;font-weight:400;opacity:.95;text-align:center;line-height:1.2}.preview-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.preview-swatch{width:22px;height:22px;border-radius:9999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 65%,transparent)}.preview-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.preview-btn{font-family:monospace;font-size:11px;padding:8px 12px;background:transparent;border:1px solid var(--border);border-radius:9999px;cursor:pointer;color:var(--fg)}.preview-btn:disabled{opacity:.4;cursor:default}.preview-sep{width:1px;height:16px;background:var(--border);opacity:.7}@media (min-width: 44em){.grid-1-2-l{grid-template-columns:1fr 2fr}.main-grid{grid-template-columns:minmax(320px,1fr) minmax(320px,1fr)}}@media (max-width: 56em){.main-grid{grid-template-columns:1fr}}.hide-child .child{transition:opacity .5s ease;opacity:1}.hide-child:hover .child{opacity:0;transition:none}