.look-card,.look-page{--look-fill:var(--card);background:linear-gradient(var(--border), var(--border)) border-box, var(--look-fill);border:1px solid #0000}.look-card[data-themed],.look-page[data-themed]{--look-fill:color-mix(in oklab, var(--look-top) 20%, var(--card));background:linear-gradient(180deg, var(--look-top), var(--look-bottom)) border-box}.look-body{background:var(--look-fill)}[data-themed]>.look-body{background:linear-gradient(180deg, color-mix(in oklab, var(--look-top) 20%, var(--card)), color-mix(in oklab, var(--look-bottom) 20%, var(--card)))}.look-inset{background:color-mix(in oklab, var(--background) 60%, transparent)}.look-banner{background:linear-gradient(180deg, var(--look-top), var(--look-bottom))}.look-name[data-name=gradient]{background:linear-gradient(90deg, color-mix(in oklab, var(--look-top,var(--primary)) 55%, var(--foreground)), color-mix(in oklab, var(--look-bottom,var(--primary)) 55%, var(--foreground)));color:#0000;-webkit-background-clip:text;background-clip:text}.look-name[data-name=dress]{color:var(--name-1)}.look-name[data-name=dress][data-gradient]{background-image:linear-gradient(90deg, var(--name-1), var(--name-2));color:#0000;-webkit-background-clip:text;background-clip:text}.look-name[data-font=bangers],.look-name[data-font=luckiest-guy],.look-name[data-font=lilita-one],.look-name[data-font=permanent-marker]{font-weight:400}.look-name[data-font=fredoka]{font-weight:700}.look-name[data-font=source-sans-3]{font-weight:800}.look-name[data-font=big-shoulders]{font-weight:900}.look-name[data-name=glow]{text-shadow:0 0 10px color-mix(in oklab, var(--look-top,var(--primary)) 70%, transparent), 0 0 2px color-mix(in oklab, var(--look-top,var(--primary)) 50%, transparent)}.look-name[data-name=tier],.look-name[data-name=foil],.look-name[data-name=shimmer],.look-name[data-name=split],.look-name[data-name=sundown],.look-name[data-name=rainbow]{color:#0000;-webkit-background-clip:text;background-clip:text}.look-name[data-name=tier]{background-image:linear-gradient(180deg, var(--tier-light), var(--tier-base) 55%, var(--tier-dark))}.look-name[data-name=shimmer]{background-image:linear-gradient(100deg, var(--foreground) 38%, color-mix(in oklab, var(--look-top,var(--primary)) 70%, var(--background)) 50%, var(--foreground) 62%);background-position:100% 0;background-size:250% 100%;transition:background-position .9s cubic-bezier(.2,0,0,1)}:is(:hover,:focus-within)>.look-name[data-name=shimmer]{background-position:0 0}.look-name[data-name=foil]{background-image:linear-gradient(90deg, var(--tier-light), var(--tier-base), var(--tier-dark), var(--tier-light))}.look-name[data-name=pop]{color:color-mix(in oklab, var(--look-top,var(--primary)) 85%, var(--foreground));text-shadow:.07em .07em 0 var(--look-bottom,var(--primary))}.look-name[data-name=toon]{--toon-ink:var(--look-bottom,var(--primary));color:#fff;text-shadow:.055em 0 0 var(--toon-ink), -.055em 0 0 var(--toon-ink), 0 .055em 0 var(--toon-ink), 0 -.055em 0 var(--toon-ink), .04em .04em 0 var(--toon-ink), -.04em .04em 0 var(--toon-ink), .04em -.04em 0 var(--toon-ink), -.04em -.04em 0 var(--toon-ink), 0 .1em 0 var(--toon-ink)}.look-name[data-name=split]{background-image:linear-gradient(180deg, color-mix(in oklab, var(--look-top,var(--primary)) 85%, var(--foreground)) 55%, color-mix(in oklab, var(--look-bottom,var(--primary)) 60%, var(--foreground)) 55%);background-size:100% 1lh}.look-name[data-name=sundown]{background-image:linear-gradient(90deg, var(--name-1,var(--foreground)), var(--name-2,var(--foreground)), var(--name-3,var(--foreground)))}.look-name[data-name=rainbow]{background-image:linear-gradient(90deg, var(--name-1,var(--foreground)), var(--name-2,var(--foreground)), var(--name-3,var(--foreground)), var(--name-4,var(--foreground)), var(--name-5,var(--foreground)), var(--name-6,var(--foreground)))}@supports (color:color(from currentColor srgb clamp(0, r, 1) g b)){.look-name{--name-ink-low:0;--name-ink-high:.38;--name-ink-chroma:.2}.look-name:is(.dark *):not(:where(.dark .light *)){--name-ink-low:.84;--name-ink-high:1}.look-name[data-name=gradient]{background-image:linear-gradient(90deg, oklch(from color-mix(in oklab, var(--look-top,var(--primary)) 55%, var(--foreground)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h), oklch(from color-mix(in oklab, var(--look-bottom,var(--primary)) 55%, var(--foreground)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h))}.look-name[data-name=pop]{color:oklch(from color-mix(in oklab, var(--look-top,var(--primary)) 85%, var(--foreground)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h)}.look-name[data-name=split]{background-image:linear-gradient(180deg, oklch(from color-mix(in oklab, var(--look-top,var(--primary)) 85%, var(--foreground)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h) 55%, oklch(from color-mix(in oklab, var(--look-bottom,var(--primary)) 60%, var(--foreground)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h) 55%)}.look-name[data-name=shimmer]{background-image:linear-gradient(100deg, var(--foreground) 38%, oklch(from color-mix(in oklab, var(--look-top,var(--primary)) 70%, var(--background)) clamp(var(--name-ink-low), l, var(--name-ink-high)) min(c, var(--name-ink-chroma)) h) 50%, var(--foreground) 62%)}.look-name[data-name=toon]{--toon-ink:oklch(from var(--look-bottom,var(--primary)) min(l, .45) c h)}}@media (prefers-reduced-motion:reduce){.look-name[data-name=shimmer]{transition:none}}.look-effect{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.fx-lane{animation:var(--fx-seconds) linear var(--fx-delay) infinite;justify-content:center;display:flex;position:absolute}.fx-lane[data-motion=fall],.fx-lane[data-motion=rise]{top:0;bottom:0}.fx-lane[data-motion=fall]{align-items:flex-end;animation-name:fx-fall}.fx-lane[data-motion=rise]{align-items:flex-start;animation-name:fx-rise}.fx-sway{animation:fx-sway var(--fx-sway) ease-in-out var(--fx-delay) infinite alternate;display:block}.fx-turn{animation:fx-turn var(--fx-seconds) linear var(--fx-delay) infinite;display:block}.fx-turn>svg{display:block;overflow:visible}.fx-ribbon{width:140%;height:26%;animation:fx-ribbon var(--fx-seconds) ease-in-out var(--fx-delay) infinite alternate;position:absolute;left:-20%}@keyframes fx-fall{0%{transform:translateY(-100%)}to{transform:translateY(24px)}}@keyframes fx-rise{0%{transform:translateY(100%)}to{transform:translateY(-24px)}}@keyframes fx-sway{0%{transform:translateX(calc(var(--fx-drift) * -1))}to{transform:translateX(var(--fx-drift))}}@keyframes fx-turn{to{transform:rotate3d(.3, .2, 1, var(--fx-spin))}}@keyframes fx-ribbon{0%{transform:translate(-6%)}to{transform:translate(6%)}}@media (prefers-reduced-motion:reduce){.look-effect .fx-lane,.look-effect .fx-sway,.look-effect .fx-turn,.look-effect .fx-ribbon{animation-play-state:paused}}
