:is(.value-hero,.hero-filters,.hero-dock,.hero-panel){--hero-tile:4.5rem;--hero-gap:.75rem;--hero-radius:18px;--hero-tile-face:linear-gradient(160deg, rgb(var(--landing-white-rgb) / .075), rgb(var(--landing-white-rgb) / .015) 62%);--hero-tile-edge:rgb(var(--landing-white-rgb) / .07);--hero-tile-shadow:inset 0 1px 0 rgb(var(--landing-white-rgb) / .07), 0 18px 28px -18px rgb(var(--landing-black-rgb) / .9);--hero-lit-edge:color-mix(in oklab, var(--brand-ink) 55%, transparent);--hero-lit-glow:0 0 30px -6px color-mix(in oklab, var(--brand-ink) 55%, transparent);--hero-art-light:color-mix(in oklab, var(--brand-ink) 34%, transparent);--hero-sunk:rgb(var(--landing-white-rgb) / .02);--hero-sunk-shadow:inset 0 2px 8px rgb(var(--landing-black-rgb) / .45);--hero-bloom:color-mix(in oklab, var(--brand-ink) 24%, transparent);--hero-accent:linear-gradient(180deg, var(--value-accent-night) 10%, var(--brand-ink) 90%);--hero-picture-shadow:drop-shadow(0 8px 10px rgb(var(--landing-black-rgb) / .45));--hero-corner-face:var(--hero-tile-face);--hero-corner-edge:var(--hero-tile-edge);--hero-corner-dim:.38;--hero-x:0;--hero-y:0;--hero-lean:0}.value-hero{z-index:20;isolation:isolate;position:relative}:is(.value-hero,.hero-filters,.hero-dock,.hero-panel):not(.dark *){--hero-tile-face:linear-gradient(160deg, #fff, var(--value-tile-foot));--hero-tile-edge:var(--value-rim);--hero-tile-shadow:inset 0 1px 0 #fff, 0 14px 24px -16px rgb(var(--landing-ink-rgb) / .28);--hero-lit-glow:0 0 26px -8px color-mix(in oklab, var(--brand-ink) 45%, transparent);--hero-art-light:color-mix(in oklab, var(--brand-ink) 20%, transparent);--hero-sunk:rgb(var(--landing-ink-rgb) / .03);--hero-sunk-shadow:inset 0 2px 6px rgb(var(--landing-ink-rgb) / .07);--hero-bloom:color-mix(in oklab, var(--brand-ink) 12%, transparent);--hero-accent:linear-gradient(180deg, color-mix(in oklab, var(--brand-ink) 70%, white), var(--brand-ink) 80%);--hero-picture-shadow:drop-shadow(0 6px 8px rgb(var(--landing-ink-rgb) / .18));--hero-corner-face:radial-gradient(circle at 50% 58%, color-mix(in oklab, var(--brand-ink) 14%, transparent), transparent 70%), linear-gradient(160deg, var(--value-tile-foot), color-mix(in oklab, var(--brand-ink) 7%, var(--value-tile-foot)));--hero-corner-edge:color-mix(in oklab, var(--brand-ink) 14%, var(--value-rim));--hero-corner-dim:.62}@media (min-width:48rem){.value-hero:not([data-size=list]){--hero-tile:6.25rem;--hero-gap:1rem}}.value-hero-stage{pointer-events:none;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 14% 80%,#0000),linear-gradient(90deg,#0000,#000 6% 94%,#0000);mask-image:linear-gradient(#0000,#000 14% 80%,#0000),linear-gradient(90deg,#0000,#000 6% 94%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.value-hero-wall{grid-template-columns:repeat(var(--hero-columns,14), var(--hero-tile));gap:var(--hero-gap);transform:translate(-50%, -50%) perspective(1600px) rotateX(18deg) rotateZ(-9deg) translate3d(calc(var(--hero-x) * var(--hero-lean) * -14px), calc(var(--hero-y) * var(--hero-lean) * -10px), 0);transition:transform .7s cubic-bezier(.2,.7,.2,1);display:grid;position:absolute;top:50%;left:50%}.value-hero[data-size=tool]{min-height:13.75rem;display:flex}@media (min-width:48rem){.value-hero[data-size=tool]{min-height:18.75rem}}.value-hero[data-size=tool] .value-hero-stage{-webkit-mask-image:linear-gradient(#0000,#000 10% 84%,#0000),linear-gradient(90deg,#0000,#000 5% 95%,#0000);mask-image:linear-gradient(#0000,#000 10% 84%,#0000),linear-gradient(90deg,#0000,#000 5% 95%,#0000)}.value-hero-backdrop{opacity:.35;width:60%;position:absolute;inset-block:0;inset-inline-end:0;-webkit-mask-image:linear-gradient(270deg,#000 30%,#0000);mask-image:linear-gradient(270deg,#000 30%,#0000)}.value-hero-backdrop>*,.value-hero-backdrop img{object-fit:cover;width:100%;height:100%}.value-hero-tile{width:var(--hero-tile);height:var(--hero-tile);border:1px solid var(--hero-tile-edge);border-radius:var(--hero-radius);background:var(--hero-tile-face);box-shadow:var(--hero-tile-shadow);place-items:center;display:grid}.value-hero-tile[data-tile=empty]{box-shadow:none;background:0 0}.value-hero-tile[data-tile=sunk]{background:var(--hero-sunk);box-shadow:var(--hero-sunk-shadow);border-color:#0000}.value-hero-tile[data-tile=lit]{border-color:var(--hero-lit-edge);box-shadow:var(--hero-tile-shadow), var(--hero-lit-glow)}.value-hero-tile[data-tile=art]{border-color:color-mix(in oklab, var(--hero-lit-edge) 60%, var(--hero-tile-edge));background:radial-gradient(circle at 50% 58%, var(--hero-art-light), transparent 68%), var(--hero-tile-face)}.value-hero-picture{object-fit:contain;width:74%;height:74%;filter:var(--hero-picture-shadow);display:block}.value-hero[data-size=corners]{display:flex}.value-hero[data-size=corners] .value-hero-stage{-webkit-mask-image:none;mask-image:none}.value-hero-corner{border-color:var(--hero-corner-edge);border-radius:var(--radius-2xl);background:var(--hero-corner-face);width:5.75rem;height:5.75rem;opacity:var(--hero-corner-dim);display:none;position:absolute}.value-hero-corner[data-corner="0"]{inset-inline-start:0;top:1.125rem;rotate:-8deg}.value-hero-corner[data-corner="1"]{inset-inline-start:7.25rem;top:3.5rem;rotate:6deg}.value-hero-corner[data-corner="2"]{inset-inline-end:0;top:.875rem;rotate:7deg}.value-hero-corner[data-corner="3"]{inset-inline-end:7.375rem;top:3.625rem;rotate:-8deg}@media (min-width:48rem){.value-hero-corner:is([data-corner="0"],[data-corner="2"]){display:grid}}@media (min-width:80rem){.value-hero-corner:is([data-corner="1"],[data-corner="3"]){display:grid}}.value-hero-veil{background:radial-gradient(ellipse 34% 46% at 50% 38%, var(--hero-bloom), transparent 72%), radial-gradient(ellipse 85% 70% at 50% 50%, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 86%, transparent) 55%, color-mix(in oklab, var(--background) 55%, transparent) 85%, color-mix(in oklab, var(--background) 30%, transparent));position:absolute;inset:0}@media (min-width:48rem){.value-hero-veil{background:radial-gradient(ellipse 30% 46% at 50% 36%, var(--hero-bloom), transparent 72%), radial-gradient(ellipse 52% 70% at 50% 50%, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 88%, transparent) 50%, color-mix(in oklab, var(--background) 50%, transparent) 80%, color-mix(in oklab, var(--background) 20%, transparent))}}.value-hero[data-size=tool][data-align=center] .value-hero-veil{background:radial-gradient(ellipse 40% 50% at 50% 42%, var(--hero-bloom), transparent 72%), radial-gradient(ellipse 100% 60% at 50% 50%, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 90%, transparent) 50%, color-mix(in oklab, var(--background) 50%, transparent) 80%, color-mix(in oklab, var(--background) 20%, transparent))}@media (min-width:48rem){.value-hero[data-size=tool][data-align=center] .value-hero-veil{background:radial-gradient(ellipse 30% 50% at 50% 40%, var(--hero-bloom), transparent 72%), radial-gradient(ellipse 46% 72% at 50% 50%, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 86%, transparent) 50%, color-mix(in oklab, var(--background) 45%, transparent) 80%, color-mix(in oklab, var(--background) 15%, transparent))}}.value-hero[data-align=start] .value-hero-veil{background:radial-gradient(ellipse 50% 40% at 24% 36%, var(--hero-bloom), transparent 72%), linear-gradient(to right, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 92%, transparent) 55%, color-mix(in oklab, var(--background) 60%, transparent) 82%, color-mix(in oklab, var(--background) 35%, transparent))}@media (min-width:48rem){.value-hero[data-align=start] .value-hero-veil{background:radial-gradient(ellipse 26% 50% at 38% 40%, var(--hero-bloom), transparent 72%), radial-gradient(ellipse 48% 76% at 42% 50%, color-mix(in oklab, var(--background) 96%, transparent), color-mix(in oklab, var(--background) 86%, transparent) 50%, color-mix(in oklab, var(--background) 45%, transparent) 80%, color-mix(in oklab, var(--background) 15%, transparent))}}.hero-pick{border:1px solid var(--hero-tile-edge);background:var(--hero-tile-face);box-shadow:var(--hero-tile-shadow)}.hero-pick-art{filter:var(--hero-picture-shadow)}.value-hero-accent{background:var(--hero-accent);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-category{border-color:var(--hero-tile-edge);background:var(--hero-tile-face);box-shadow:var(--hero-tile-shadow)}.hero-category[aria-pressed=true]{border-color:var(--brand-ink);background:radial-gradient(circle at 50% 30%, var(--hero-art-light), transparent 70%), color-mix(in oklab, var(--brand-ink) 12%, transparent);box-shadow:var(--hero-tile-shadow), var(--hero-lit-glow)}.hero-category-art{filter:var(--hero-picture-shadow)}.hero-count{background:var(--hero-hover);color:var(--muted-foreground)}.hero-check{background:var(--brand-ink)}.hero-tier{border-color:var(--browse-tile-border);background:var(--browse-tile-surface);box-shadow:var(--browse-tile-rest)}.hero-tier[aria-pressed=true]{border-color:var(--pick,var(--brand-ink));background:color-mix(in oklab, var(--pick,var(--brand-ink)) 12%, transparent)}.hero-tier-mark{background:color-mix(in oklab, var(--pick,var(--brand-ink)) 14%, transparent);color:var(--pick,var(--brand-ink))}.hero-tier-check{background:var(--pick,var(--brand-ink));color:#fff}.hero-glyph{background:color-mix(in oklab, var(--brand-ink) 14%, transparent);color:var(--brand-ink)}[aria-checked=true]>.hero-glyph{background:rgb(var(--landing-white-rgb) / .2);color:#fff}.hero-pill-art,.hero-tier-art{filter:var(--hero-picture-shadow)}.hero-fan>span:first-child{translate:-.75rem .125rem;rotate:-14deg}.hero-fan>span:nth-child(3){translate:.75rem .125rem;rotate:14deg}.hero-fan>span:nth-child(2){z-index:1}@media (hover:hover){.hero-category:hover,.hero-tier:hover{border-color:color-mix(in oklab, var(--pick,var(--brand-ink)) 45%, var(--hero-tile-edge))}.hero-category:not([aria-pressed=true]):hover{translate:0 -2px}}@media (prefers-reduced-motion:no-preference){.value-hero{--hero-lean:1}:root:not([data-lite]) .value-hero-tile{animation:.56s cubic-bezier(.2,.7,.2,1) both value-hero-tile;animation-delay:calc(var(--at,0) * 12ms)}.hero-tier,.hero-glyph{transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}.hero-category{transition:background-color .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out,translate .2s cubic-bezier(.2,.7,.2,1)}.hero-category-art{transition:transform .2s ease-out}@media (hover:hover){.hero-category:hover .hero-category-art{transform:translateY(-3px)rotate(-6deg)scale(1.06)}}:root:not([data-lite]) .value-hero-drift{animation:48s ease-in-out infinite alternate value-hero-drift}.hero-pick{transition:translate .2s cubic-bezier(.2,.7,.2,1),border-color .2s ease-out}@media (hover:hover){.hero-pick:hover{border-color:var(--hero-lit-edge);translate:0 -2px}}}@keyframes value-hero-drift{0%{translate:calc((var(--hero-tile) + var(--hero-gap)) * -.5) 0}to{translate:calc((var(--hero-tile) + var(--hero-gap)) * .5) 0}}@keyframes value-hero-tile{0%{opacity:0;scale:.9}}.value-hero [data-slot=wfl-tabs] [data-slot=tabs-list]{background:linear-gradient(var(--tabs-well), var(--tabs-well)), var(--background)}:root[data-lite] :is(.value-hero,.hero-filters,.hero-dock,.hero-panel){--hero-picture-shadow:none}