@property --fs-gloss{syntax:"<number>";inherits:true;initial-value:.22}@property --fs-size{syntax:"<percentage>";inherits:true;initial-value:46%}@property --fs-streak{syntax:"<number>";inherits:true;initial-value:.12}@property --fs-lx{syntax:"<percentage>";inherits:true;initial-value:34%}@property --fs-ly{syntax:"<percentage>";inherits:true;initial-value:26%}.fx-fs{--door:var(--fs-c0);align-items:center;gap:clamp(1.5rem,4vw,3rem);transition:--fs-gloss .6s,--fs-size .6s,--fs-streak .6s;display:grid;container-type:inline-size}.fx-fs:has(input[value=mate]:checked){--fs-gloss:.05;--fs-size:75%;--fs-streak:0}.fx-fs:has(input[value=satinado]:checked){--fs-gloss:.2;--fs-size:48%;--fs-streak:.1}.fx-fs:has(input[value=brillo]:checked){--fs-gloss:.62;--fs-size:20%;--fs-streak:.42}.fx-fs:has(input[data-ci="0"]:checked){--door:var(--fs-c0)}.fx-fs:has(input[data-ci="1"]:checked){--door:var(--fs-c1)}.fx-fs:has(input[data-ci="2"]:checked){--door:var(--fs-c2)}.fx-fs:has(input[data-ci="3"]:checked){--door:var(--fs-c3)}.fx-fs:has(input[data-ci="4"]:checked){--door:var(--fs-c4)}.fx-fs:has(input[data-ci="5"]:checked){--door:var(--fs-c5)}.fx-fs:has(input[data-ci="6"]:checked){--door:var(--fs-c6)}.fx-fs:has(input[data-ci="7"]:checked){--door:var(--fs-c7)}.fx-fs:has(input[data-ci="8"]:checked){--door:var(--fs-c8)}.fx-fs:has(input[data-ci="9"]:checked){--door:var(--fs-c9)}.fx-fs:has(input[data-ci="10"]:checked){--door:var(--fs-c10)}.fx-fs:has(input[data-ci="11"]:checked){--door:var(--fs-c11)}.fx-fs__stage{aspect-ratio:4/5;background:radial-gradient(120% 80% at 30% 10%,#ffffff8c,#fff0 60%),linear-gradient(#ece7df,#dcd5ca);border-radius:18px;place-items:end center;padding-top:7%;display:grid;position:relative;overflow:clip}.fx-fs__floor{background:linear-gradient(#b99876,#a68462);height:8%;position:absolute;inset:auto 0 0;box-shadow:0 -1px #ffffff80}.fx-fs__door{z-index:1;aspect-ratio:.42;background:var(--door);width:46%;transition:background-color .6s var(--ease-out,cubic-bezier(.22,1,.36,1));box-shadow:0 0 0 clamp(6px, 3.2cqi, 14px) var(--door), 0 0 0 calc(clamp(6px, 3.2cqi, 14px) + 1px) #17181c1f, clamp(8px, 4cqi, 22px) clamp(10px, 4cqi, 22px) clamp(20px, 8cqi, 46px) #17181c38, inset 0 0 0 1px #0000001a;isolation:isolate;border-radius:2px;margin-bottom:8%;position:relative;overflow:hidden}.fx-fs__panel{border-radius:1px;position:absolute;left:14%;right:14%;box-shadow:inset 2px 2px #ffffff47,inset -2px -2px #00000029,inset 4px 4px 6px #0000001a,0 0 0 2px #0000000d}.fx-fs__panel--top{height:46%;top:8%}.fx-fs__panel--bottom{height:28%;bottom:7%}.fx-fs__handle{aspect-ratio:1;z-index:2;background:radial-gradient(circle at 35% 30%,#fafafa,#9a9ea3 70%,#6d7176);border-radius:50%;width:7%;position:absolute;top:52%;right:9%;box-shadow:0 2px 4px #00000059}.fx-fs__handle i{background:linear-gradient(#f5f5f5,#a7abb0 60%,#7d8186);border-radius:99px;width:360%;height:40%;position:absolute;top:30%;right:40%;box-shadow:0 3px 5px #0000004d}.fx-fs__spec{pointer-events:none;z-index:1;background:radial-gradient(circle at var(--fs-lx) var(--fs-ly), rgb(255 255 255/var(--fs-gloss)), rgb(255 255 255/calc(var(--fs-gloss) * .25)) calc(var(--fs-size) * .45), #fff0 var(--fs-size)), linear-gradient(105deg, #fff0 calc(var(--fs-lx) - 26%), rgb(255 255 255/var(--fs-streak)) calc(var(--fs-lx) - 18%), rgb(255 255 255/calc(var(--fs-streak) * .2)) calc(var(--fs-lx) - 12%), rgb(255 255 255/var(--fs-streak)) calc(var(--fs-lx) - 8%), #fff0 calc(var(--fs-lx) + 2%)), linear-gradient(180deg, rgb(255 255 255/calc(var(--fs-gloss) * .2)), rgb(0 0 0/calc(.06 + var(--fs-gloss) * .1)));position:absolute;inset:0}.fx-fs:has(input[value=mate]:checked) .fx-fs__door{filter:saturate(.94)}.fx-fs:has(input[value=brillo]:checked) .fx-fs__door{filter:saturate(1.06)contrast(1.03)}.fx-fs__controls{gap:1.4rem;display:grid}.fx-fs__group{border:0;min-width:0;margin:0;padding:0}.fx-fs__legend{font:600 .78rem/1 var(--f-body,system-ui, sans-serif);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--c-ink,#17181c) 65%, transparent);margin-bottom:.7rem;padding:0}.fx-fs__chips{flex-wrap:wrap;gap:.5rem;display:flex}.fx-fs__chip{cursor:pointer;position:relative}.fx-fs__chip input,.fx-fs__swatch input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.fx-fs__chip span{border:1.5px solid color-mix(in srgb, var(--c-ink,#17181c) 16%, transparent);background:color-mix(in srgb, var(--c-plaster,#f4f1ec) 60%, #fff);border-radius:12px;gap:.15rem;min-width:6.5rem;padding:.7rem 1rem;transition:border-color .2s,background-color .2s,box-shadow .2s;display:grid}.fx-fs__chip b{font-weight:650}.fx-fs__chip small{color:color-mix(in srgb, var(--c-ink,#17181c) 62%, transparent);font-size:.78rem}.fx-fs__chip:hover span{border-color:color-mix(in srgb, var(--c-ink,#17181c) 40%, transparent)}.fx-fs__chip input:checked+span{border-color:var(--c-ink,#17181c);background:var(--c-ink,#17181c);color:var(--c-plaster,#f4f1ec)}.fx-fs__chip input:checked+span small{color:color-mix(in srgb, var(--c-plaster,#f4f1ec) 75%, transparent)}.fx-fs__chip input:focus-visible+span,.fx-fs__swatch input:focus-visible+.fx-fs__dot{outline:3px solid var(--c-blue,#3d8bff);outline-offset:3px}.fx-fs__swatches{flex-wrap:wrap;gap:.65rem;display:flex}.fx-fs__swatch{cursor:pointer;width:2.75rem;height:2.75rem;position:relative}.fx-fs__dot{background:radial-gradient(circle at 32% 28%, #ffffff73, #fff0 45%), var(--sw);width:100%;height:100%;transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1)), box-shadow .2s;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #17181c2e}.fx-fs__swatch:hover .fx-fs__dot{transform:scale(1.06)}.fx-fs__swatch input:checked+.fx-fs__dot{box-shadow:inset 0 0 0 1px #17181c2e, 0 0 0 3px var(--c-plaster,#f4f1ec), 0 0 0 5px var(--c-ink,#17181c)}.fx-fs__sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.fx-fs__out{color:color-mix(in srgb, var(--c-ink,#17181c) 75%, transparent);margin:0;font-size:.95rem}.fx-fs__out-f{color:var(--c-ink,#17181c);font-weight:650}@container (width>=640px){.fx-fs__stage{aspect-ratio:4/4.6}}@media (width>=760px){.fx-fs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.fx-fs,.fx-fs__door,.fx-fs__dot{transition:none}}