.fx-wall{background:#e9e3d8;width:100%;height:100%;position:relative;overflow:clip}.fx-wall>*{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.fx-wall__sheen{opacity:clamp(0, 1 - var(--s), 1);mix-blend-mode:screen;background:linear-gradient(118deg,#fff0 20%,#d6e6ff57 42%,#fff0 64%)}.fx-wall__putty{opacity:clamp(0, var(--s), 1)}.fx-wall__sanded{opacity:clamp(0, var(--s) - 1, 1);background:radial-gradient(70% 60% at 30% 35%,#ffffff80,#fff0 70%),linear-gradient(160deg,#f1ede6,#e6e0d6)}.fx-wall__raking{opacity:clamp(0, var(--s) - 2, 1);filter:brightness(1.1)}.fx-wall__beam{opacity:clamp(0, var(--s) - 2, 1);background:linear-gradient(90deg,#fff8e6e6,#fff8e673 18%,#fff8e614 46%,#28241e1f)}.fx-wall__paint{background:repeating-linear-gradient(90deg, #ffffff0d 0 2px, transparent 2px 9px, #00000006 9px 11px, transparent 11px 17px), linear-gradient(160deg, #ffffff2e, #fff0 55%), var(--ps-paint);opacity:clamp(0, var(--s) - 3, 1)}.fx-ps__pin{gap:clamp(1.8rem,5vw,3rem);padding-block:clamp(3.5rem,9vw,6rem);display:grid}.fx-ps__visual,.fx-ps__progress{display:none}.fx-ps__rail{overflow:visible}.fx-ps__list{gap:clamp(2rem,6vw,3.5rem);margin:0;padding:0;list-style:none;display:grid}.fx-ps__step{gap:1.1rem;display:grid}.fx-ps__fig{aspect-ratio:4/3;background:#e9e3d8;border-radius:14px;overflow:clip}.fx-ps__fig>:is(img,picture),.fx-ps__fig picture img{object-fit:cover;width:100%;height:100%;display:block}.fx-ps__num{color:var(--vp-magenta-700,#b01e46);margin-bottom:.6rem;line-height:0;display:block}@media (width>=900px){.fx-ps__step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,4.5rem)}.fx-ps__step:nth-child(2n) .fx-ps__fig{order:2}.fx-ps__fig{aspect-ratio:3/2}}.fx-ps__title{margin:0 0 .5rem;font-size:clamp(1.35rem,1.1rem + 1vw,2rem);line-height:1.1}.fx-ps__text{max-width:38ch;margin:0}@media (width>=900px) and (prefers-reduced-motion:no-preference){html.js:not(.motion-off) .fx-ps:not(.fx-failed){& .fx-ps__pin{height:calc(100svh - var(--header-h,0px));box-sizing:border-box;grid-template-rows:auto 1fr auto;align-content:center;gap:clamp(1rem,2.5vh,2rem);min-height:520px;max-height:1000px;padding-block:clamp(1.5rem,5vh,3.5rem);display:grid}& .fx-ps__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);min-height:0;display:grid}& .fx-ps__visual{background:#e9e3d8;border-radius:18px;min-height:0;display:block;position:relative;overflow:clip}& .fx-ps__layer{--q:clamp(0, var(--p) - var(--k) + 1, 1);clip-path:polygon(0 0, calc(var(--q) * 135%) 0, calc(var(--q) * 135% - 35%) 100%, 0 100%);position:absolute;inset:0}& .fx-ps__layer:first-child{clip-path:none}& .fx-ps__layer>:is(img,picture),& .fx-ps__layer picture img{object-fit:cover;width:100%;height:100%;display:block}& .fx-ps__count{z-index:2;font:600 .8rem/1 var(--f-body,system-ui, sans-serif);letter-spacing:.12em;color:var(--c-plaster,#f4f1ec);background:#17181c99;border-radius:999px;padding:.55em .8em;position:absolute;bottom:1rem;left:1rem}& .fx-ps__count b{font-weight:700}& .fx-ps__rail{align-self:center;overflow:clip}& .fx-ps__list{transform:translateX(calc(var(--p) * -100%));will-change:transform;gap:0;display:flex}& .fx-ps__step{box-sizing:border-box;flex:0 0 100%;padding-right:2rem}& .fx-ps__fig{display:none}& .fx-ps__num{color:var(--vp-magenta-700,#b01e46);margin-bottom:1rem;line-height:0}& .fx-ps__title{font-size:clamp(1.8rem,1.2rem + 1.6vw,2.8rem)}& .fx-ps__text{font-size:1.08rem}& .fx-ps__progress{background:color-mix(in srgb, var(--c-ink,#17181c) 10%, transparent);border-radius:4px;height:4px;display:block;overflow:clip}& .fx-ps__progress span{background:linear-gradient(90deg, var(--c-blue,#3d8bff) 0 33.3%, var(--c-magenta,#e8365f) 33.3% 66.6%, var(--c-amber,#f5b800) 66.6%);transform-origin:0;height:100%;transform:scaleX(calc((var(--p) + 1) / var(--n)));display:block}}}.fx-fan{margin:0}.fx-fan__stage{aspect-ratio:16/9;perspective:1400px;perspective-origin:50% 30%;position:relative;container-type:inline-size}.fx-fan__deck{--spread:1;--rx:16deg;--ry:0deg;--h:min(46cqi, 30rem);--w:calc(var(--h) * .27);width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));margin:0;padding:0;list-style:none;position:absolute;bottom:7%;left:50%}.fx-fan__card{--a:calc((var(--i) - (var(--n) - 1) / 2) * var(--fan) * var(--fan-k,1) / max(1, var(--n) - 1) * var(--spread));left:calc(var(--w) * -.5);bottom:calc(var(--w) * -.5);width:var(--w);height:var(--h);border-radius:calc(var(--w) * .09);background:radial-gradient(circle at 50% calc(100% - var(--w) * .5), #0000008c 0 calc(var(--w) * .075), transparent calc(var(--w) * .08)), linear-gradient(to top, #fbfaf7 0 calc(var(--w) * .95), transparent 0), var(--c);box-shadow:inset 0 0 0 1px #17181c14, 0 1px 1px #17181c14, calc(var(--w) * -.04) calc(var(--w) * .08) calc(var(--w) * .22) #17181c2e;transform-origin:50% calc(100% - var(--w) * .5);transform:rotate(var(--a)) translateZ(calc(var(--i) * .6px));transition:transform .45s var(--ease-out,cubic-bezier(.22,1,.36,1));position:absolute;overflow:hidden}.fx-fan__card:after{content:"";pointer-events:none;background:linear-gradient(100deg,#ffffff29,#fff0 40%,#0000000f);position:absolute;inset:0}.fx-fan__text{top:calc(var(--w) * .16);left:calc(var(--w) * .12);writing-mode:vertical-rl;color:var(--t);font-size:clamp(9px, calc(var(--w) * .15), 15px);white-space:nowrap;max-height:calc(var(--h) - var(--w) * 1.4);align-items:baseline;gap:.6em;line-height:1.1;display:flex;position:absolute;overflow:hidden;transform:rotate(180deg)}.fx-fan__name{letter-spacing:.01em;font-weight:650}.fx-fan__code{opacity:.75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}@container (width<=560px){.fx-fan__deck{--h:56cqi;--fan-k:.8}}@media (width<=600px){.fx-fan__stage{aspect-ratio:4/3}}.fx-fan__caption{text-align:center;color:color-mix(in srgb, var(--c-ink,#17181c) 70%, transparent);margin-top:.5rem;font-size:.9rem}@media (hover:hover) and (pointer:fine){.fx-fan__card:hover{transform:rotate(var(--a)) translateZ(calc(var(--i) * .6px + 6px)) translateY(-7%)}}html.js .fx-fan.is-live .fx-fan__card{transition:transform .45s var(--ease-out,cubic-bezier(.22,1,.36,1))}html.js .fx-fan.is-scrubbing .fx-fan__card{transition:none}@media (prefers-reduced-motion:reduce){.fx-fan__card{transition:none}.fx-fan__card:hover{transform:rotate(var(--a)) translateZ(calc(var(--i) * .6px))}}
