@layer components{.build{--build-bar-h:4.75rem}.build-frame{aspect-ratio:4/3;background:var(--color-navy);position:relative;overflow:hidden}@media (min-aspect-ratio:4/5){.build-frame{top:calc(var(--header-h) + .5rem);height:calc(100svh - var(--header-h) - 1.5rem);aspect-ratio:auto;position:sticky}}.build-shot{opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out), visibility 0s linear .7s}.build-shot.is-shown{opacity:1;visibility:visible;transition:opacity .7s var(--ease-out)}.build-caption{background:linear-gradient(to top, color-mix(in oklab, var(--color-navy-deep) 85%, transparent), transparent)}.build-card{border:1px solid var(--cat-rule);background:color-mix(in oklab, var(--cat-ink) 2%, transparent);cursor:pointer;transition:border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);gap:1rem;padding:1.1rem 1.15rem;display:flex;position:relative}.build-card:has(:checked){border-color:var(--cat-accent);background:color-mix(in oklab, var(--cat-ink) 6%, transparent);box-shadow:inset 0 0 0 1px var(--cat-accent)}.build-card:has(:focus-visible){outline:2px solid var(--cat-accent);outline-offset:3px}@media (hover:hover) and (pointer:fine){.build-card:hover:not(:has(:checked)){border-color:color-mix(in oklab, var(--cat-ink) 45%, transparent)}}.build-card .scheme-swatch{width:2.25rem;box-shadow:0 0 0 1px color-mix(in oklab, var(--cat-ink) 22%, transparent);flex:none}.build-bar{z-index:30;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--cat-rule);background:color-mix(in oklab, var(--color-navy-deep) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:fixed;inset:auto 0 0}.build-bar .scheme-swatch{cursor:default;width:1.75rem}@media (prefers-reduced-motion:no-preference){.build-rise{animation:fade-up .9s var(--ease-out) both;animation-delay:calc(.1s + var(--i,0) * 80ms)}}}