.bg-demo[data-astro-cid-xf6gxpmw]{aspect-ratio:700/448;-webkit-user-select:none;user-select:none;container-type:inline-size}.bg-demo__stage[data-astro-cid-xf6gxpmw]{--u:calc(100cqw / 350);width:100%;height:100%;font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));color:#d1cfd7;perspective:calc(600 * var(--u));position:relative}.bg-demo__panel[data-astro-cid-xf6gxpmw]{left:0;top:calc(73 * var(--u));width:calc(281 * var(--u));gap:calc(8 * var(--u));padding:calc(16 * var(--u));border:calc(1 * var(--u)) solid #ffffff0f;border-radius:calc(16 * var(--u));background:var(--color-main-opposite);box-shadow:calc(1 * var(--u)) calc(1 * var(--u)) calc(6 * var(--u)) #0000001a, calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)) #0000000d;transform:translate3d(calc(var(--mx,0) * 2.5 * var(--u)), calc(var(--my,0) * 2 * var(--u)), 0);flex-direction:column;display:flex;position:absolute}.bg-demo__head[data-astro-cid-xf6gxpmw]{justify-content:space-between;align-items:center;display:flex}.bg-demo__title[data-astro-cid-xf6gxpmw]{font-weight:700}.bg-demo__chevron[data-astro-cid-xf6gxpmw]{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none}.bg-demo__chevron[data-astro-cid-xf6gxpmw] path[data-astro-cid-xf6gxpmw]{fill:none;stroke:#7b7b7b;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round}.bg-demo__row[data-astro-cid-xf6gxpmw]{gap:calc(8 * var(--u));display:flex}.bg-demo__slider[data-astro-cid-xf6gxpmw]{height:calc(32 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));flex:1;position:relative;overflow:hidden}.bg-demo__slider-fill[data-astro-cid-xf6gxpmw]{width:calc(59 * var(--u));background:#202020;position:absolute;top:0;bottom:0;left:0}.bg-demo__slider-thumb[data-astro-cid-xf6gxpmw]{left:calc(58 * var(--u));top:calc(5 * var(--u));width:calc(2 * var(--u));height:calc(20 * var(--u));border-radius:calc(1 * var(--u));background:#d1cfd7;position:absolute}.bg-demo__slider-label[data-astro-cid-xf6gxpmw]{left:calc(7 * var(--u));color:#7b7b7b;position:absolute;top:50%;transform:translateY(-50%)}.bg-demo__input[data-astro-cid-xf6gxpmw]{align-items:center;gap:calc(4 * var(--u));width:calc(54 * var(--u));height:calc(32 * var(--u));padding:0 calc(8 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));flex:none;display:flex}.bg-demo__input[data-astro-cid-xf6gxpmw] span[data-astro-cid-xf6gxpmw]{flex:1}.bg-demo__input[data-astro-cid-xf6gxpmw] small[data-astro-cid-xf6gxpmw]{font-size:calc(10 * var(--u));color:#7b7b7b}.bg-demo__swatch[data-astro-cid-xf6gxpmw]{width:calc(32 * var(--u));height:calc(32 * var(--u));border-radius:calc(6 * var(--u));background:linear-gradient(142deg,#70f,#0f0099);flex:none}.bg-demo__button[data-astro-cid-xf6gxpmw]{height:calc(32 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));justify-content:center;align-items:center;display:flex}.bg-demo__picker[data-astro-cid-xf6gxpmw]{left:calc(93 * var(--u));top:calc(19 * var(--u));width:calc(240 * var(--u));gap:calc(8 * var(--u));padding:calc(8 * var(--u));border:calc(1 * var(--u)) solid #ffffff14;border-radius:calc(16 * var(--u));background:linear-gradient(128deg, #ffffff05 7.56%, #16161600 50.8%), var(--color-main-opposite);transform:translate3d(calc(var(--mx,0) * 7 * var(--u)), calc(var(--my,0) * 5 * var(--u)), 0) rotateY(calc(var(--mx,0) * 4deg)) rotateX(calc(var(--my,0) * -4deg));box-shadow:calc((4 - var(--mx,0) * 3) * var(--u)) calc((8 - var(--my,0) * 3) * var(--u)) calc(18 * var(--u)) #0000004d;flex-direction:column;display:flex;position:absolute}.bg-demo__dropdown[data-astro-cid-xf6gxpmw]{align-items:center;gap:calc(4 * var(--u));height:calc(34 * var(--u));padding:0 calc(8 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));display:flex}.bg-demo__icon[data-astro-cid-xf6gxpmw]{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none}.bg-demo__icon[data-astro-cid-xf6gxpmw] rect[data-astro-cid-xf6gxpmw],.bg-demo__icon[data-astro-cid-xf6gxpmw] path[data-astro-cid-xf6gxpmw]{fill:none;stroke:#d1cfd7;stroke-width:1px;stroke-linecap:round}.bg-demo__dropdown-label[data-astro-cid-xf6gxpmw]{flex:1}.bg-demo__bar[data-astro-cid-xf6gxpmw]{height:calc(12 * var(--u));border-radius:calc(8 * var(--u));background:var(--bar,linear-gradient(to right, #000, #56c9ff 50%, #c1fa04));box-shadow:inset 0 0 0 calc(1 * var(--u)) #ffffff12, inset 0 calc(.5 * var(--u)) calc(1 * var(--u)) #00000040;touch-action:pan-y;position:relative}.bg-demo__stop[data-astro-cid-xf6gxpmw],.bg-demo__dot[data-astro-cid-xf6gxpmw]{width:calc(10 * var(--u));height:calc(10 * var(--u));border:calc(1.67 * var(--u)) solid #fff;box-shadow:0 calc(.5 * var(--u)) calc(1.5 * var(--u)) #00000073;cursor:grab;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.bg-demo__stop[data-astro-cid-xf6gxpmw]{transition:border-width .2s;top:50%}.bg-demo__stop[data-astro-cid-xf6gxpmw].is-selected,.bg-demo__dot[data-astro-cid-xf6gxpmw]{border-width:calc(3 * var(--u))}.is-dragging[data-astro-cid-xf6gxpmw] .bg-demo__stop[data-astro-cid-xf6gxpmw],.is-dragging[data-astro-cid-xf6gxpmw] .bg-demo__dot[data-astro-cid-xf6gxpmw],.is-dragging[data-astro-cid-xf6gxpmw] .bg-demo__area[data-astro-cid-xf6gxpmw]{cursor:grabbing}.bg-demo__area[data-astro-cid-xf6gxpmw]{height:calc(198 * var(--u));border-radius:calc(8 * var(--u));background:var(--hue,#c3ff00);cursor:crosshair;touch-action:pan-y;position:relative}.bg-demo__area-white[data-astro-cid-xf6gxpmw],.bg-demo__area-black[data-astro-cid-xf6gxpmw]{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.bg-demo__area-white[data-astro-cid-xf6gxpmw]{background:linear-gradient(90deg,#fff 2.455%,#fff0)}.bg-demo__area-black[data-astro-cid-xf6gxpmw]{background:linear-gradient(#0000,#000)}.bg-demo__fade[data-astro-cid-xf6gxpmw]{pointer-events:none;position:absolute}.bg-demo__fade--panel[data-astro-cid-xf6gxpmw]{left:calc(38 * var(--u));top:calc(27 * var(--u));width:calc(71 * var(--u));height:calc(169 * var(--u));background:linear-gradient(to right, #16161600, var(--color-light-gray) 76.378%)}.bg-demo__fade--bottom[data-astro-cid-xf6gxpmw]{left:calc(-11 * var(--u));top:calc(91 * var(--u));width:calc(347 * var(--u));height:calc(141 * var(--u));background:linear-gradient(to bottom, #16161600 12.766%, var(--color-light-gray) 89.362%)}.bg-demo__fade--bottom[data-astro-cid-xf6gxpmw]:after,.bg-demo__fade--right[data-astro-cid-xf6gxpmw]:after{content:"";background:var(--color-light-gray);position:absolute}.bg-demo__fade--bottom[data-astro-cid-xf6gxpmw]:after{left:calc(-30 * var(--u));right:calc(-60 * var(--u));top:calc(100% - 1 * var(--u));height:calc(90 * var(--u))}.bg-demo__fade--right[data-astro-cid-xf6gxpmw]:after{top:0;bottom:0;left:calc(100% - 1 * var(--u));width:calc(40 * var(--u))}.bg-demo__fade--right[data-astro-cid-xf6gxpmw]{left:calc(92 * var(--u));top:calc(19 * var(--u));width:calc(263 * var(--u));height:calc(225 * var(--u));background:linear-gradient(to right, #16161600 12.766%, var(--color-light-gray) 89.362%)}.bg-demo__panel[data-astro-cid-xf6gxpmw]{transition:opacity .45s,scale .7s cubic-bezier(.2,.8,.2,1)}.bg-demo__picker[data-astro-cid-xf6gxpmw]{transition:opacity .45s .2s,scale .65s cubic-bezier(.2,.9,.3,1.15) .2s,translate .65s cubic-bezier(.2,.8,.2,1) .2s}.bg-demo__bar[data-astro-cid-xf6gxpmw]{clip-path:inset(0 0 0 0 round calc(8 * var(--u)));transition:clip-path .7s cubic-bezier(.5,0,.2,1) .55s}.bg-demo__area[data-astro-cid-xf6gxpmw]{transition:opacity .55s .75s}.is-intro[data-astro-cid-xf6gxpmw] .bg-demo__stop[data-astro-cid-xf6gxpmw]{transition:scale .4s cubic-bezier(.3, 1.6, .5, 1) calc(.95s + var(--n) * 80ms), border-width .2s ease}.is-intro[data-astro-cid-xf6gxpmw] .bg-demo__dot[data-astro-cid-xf6gxpmw]{transition:scale .4s cubic-bezier(.3,1.6,.5,1) 1.25s}.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__panel[data-astro-cid-xf6gxpmw]{opacity:0;scale:.97}.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__picker[data-astro-cid-xf6gxpmw]{opacity:0;scale:.95;translate:0 calc(8 * var(--u))}.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__bar[data-astro-cid-xf6gxpmw]{clip-path:inset(0 100% 0 0 round calc(8 * var(--u)))}.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__area[data-astro-cid-xf6gxpmw]{opacity:0}.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__stop[data-astro-cid-xf6gxpmw],.is-intro-pending[data-astro-cid-xf6gxpmw] .bg-demo__dot[data-astro-cid-xf6gxpmw]{scale:0}.crt-demo[data-astro-cid-fwiraxvk]{aspect-ratio:700/448;-webkit-user-select:none;user-select:none;container-type:inline-size}.crt-demo__stage[data-astro-cid-fwiraxvk]{--u:calc(100cqw / 351);width:100%;height:100%;font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));color:#d1cfd7;perspective:calc(600 * var(--u));position:relative}.crt-demo__device[data-astro-cid-fwiraxvk]{left:calc(-12 * var(--u));top:calc(-12 * var(--u));width:calc(375 * var(--u));height:calc(248 * var(--u));transform:translate3d(calc(var(--mx,0) * 2.5 * var(--u)), calc(var(--my,0) * 2 * var(--u)), 0);clip-path:inset(calc(12 * var(--u)) round var(--radius-md));position:absolute}.crt-demo__img[data-astro-cid-fwiraxvk]{width:100%;height:100%;display:block}.crt-demo__fx[data-astro-cid-fwiraxvk]{clip-path:polygon(13.75% 17.9%,100% 49.2%,100% 100%,13.75% 100%);pointer-events:none;position:absolute;inset:0}.crt-demo__fx--mask[data-astro-cid-fwiraxvk]{background:repeating-linear-gradient(90deg, #ff3c3c 0 calc(.7 * var(--u)), #3cff6e calc(.7 * var(--u)) calc(1.4 * var(--u)), #466eff calc(1.4 * var(--u)) calc(2.1 * var(--u)));mix-blend-mode:multiply;opacity:calc(var(--k) * .45)}.crt-demo__fx--scan[data-astro-cid-fwiraxvk]{background:repeating-linear-gradient(193.5deg, #0000008c 0 calc(1.1 * var(--u)), #0000 calc(1.1 * var(--u)) calc(2.8 * var(--u)));opacity:calc(var(--k) * .9)}.crt-demo__fx--band[data-astro-cid-fwiraxvk]{mix-blend-mode:soft-light;opacity:var(--k);background:linear-gradient(193.5deg,#fff0 42%,#ffffff59 50%,#fff0 58%) 0 0/100% 300%;animation:3.6s linear infinite paused crt-roll}.crt-demo__fx--flicker[data-astro-cid-fwiraxvk]{mix-blend-mode:overlay;opacity:0;background:#fff;animation:2.4s step-end infinite paused crt-flicker}.crt-demo__fx--vignette[data-astro-cid-fwiraxvk]{opacity:var(--k);background:radial-gradient(70% 80% at 58% 62%,#0000 45%,#0000008c)}.is-on[data-astro-cid-fwiraxvk] .crt-demo__fx--band[data-astro-cid-fwiraxvk],.is-on[data-astro-cid-fwiraxvk] .crt-demo__fx--flicker[data-astro-cid-fwiraxvk]{animation-play-state:running}@keyframes crt-roll{0%{background-position:0 100%}to{background-position:0 0}}@keyframes crt-flicker{0%{opacity:calc(var(--k) * .06)}13%{opacity:calc(var(--k) * .02)}27%{opacity:calc(var(--k) * .09)}41%{opacity:calc(var(--k) * .03)}58%{opacity:calc(var(--k) * .07)}72%{opacity:0}86%{opacity:calc(var(--k) * .05)}}@media (prefers-reduced-motion:reduce){.crt-demo__fx--band[data-astro-cid-fwiraxvk],.crt-demo__fx--flicker[data-astro-cid-fwiraxvk]{animation:none}}.crt-demo__fade[data-astro-cid-fwiraxvk]{pointer-events:none;position:absolute}.crt-demo__fade--bottom[data-astro-cid-fwiraxvk]{left:calc(6 * var(--u));top:calc(29 * var(--u));width:calc(357 * var(--u));height:calc(203 * var(--u));background:linear-gradient(179.81deg, #16161600 0.28%, var(--color-light-gray) 75.23%)}.crt-demo__fade--right[data-astro-cid-fwiraxvk]:after{content:"";left:calc(100% - 1 * var(--u));width:calc(13 * var(--u));background:var(--color-light-gray);position:absolute;top:0;bottom:0}.crt-demo__fade--right[data-astro-cid-fwiraxvk]{left:calc(77 * var(--u));top:calc(72 * var(--u));width:calc(274 * var(--u));height:calc(142 * var(--u));background:linear-gradient(98.4deg, #16161600 40.2%, var(--color-light-gray) 90.85%)}.crt-demo__panel[data-astro-cid-fwiraxvk]{left:calc(76 * var(--u));top:calc(161 * var(--u));width:calc(243 * var(--u));gap:calc(4 * var(--u));padding:calc(8 * var(--u));border:calc(1 * var(--u)) solid #ffffff14;border-radius:calc(10 * var(--u));backdrop-filter:blur(10px);transform:translate3d(calc(var(--mx,0) * 7 * var(--u)), calc(var(--my,0) * 5 * var(--u)), 0) rotateY(calc(var(--mx,0) * 4deg)) rotateX(calc(var(--my,0) * -5deg));box-shadow:calc((4 - var(--mx,0) * 3) * var(--u)) calc((8 - var(--my,0) * 3) * var(--u)) calc(18 * var(--u)) #00000059;background:#181818d1;display:flex;position:absolute}.crt-demo__slider[data-astro-cid-fwiraxvk]{--x:calc(var(--k) * 167 * var(--u));height:calc(32 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));cursor:ew-resize;touch-action:pan-y;flex:1;position:relative;overflow:hidden}.crt-demo__fill[data-astro-cid-fwiraxvk]{width:calc(var(--x) + 1 * var(--u));background:#202020;position:absolute;top:0;bottom:0;left:0}.crt-demo__thumb[data-astro-cid-fwiraxvk]{left:var(--x);top:calc(5 * var(--u));width:calc(2 * var(--u));height:calc(20 * var(--u));border-radius:calc(1 * var(--u));background:#d1cfd7;position:absolute}.crt-demo__label[data-astro-cid-fwiraxvk]{left:calc(7 * var(--u));color:#7b7b7b;position:absolute;top:50%;transform:translateY(-50%)}.crt-demo__input[data-astro-cid-fwiraxvk]{width:calc(54 * var(--u));height:calc(32 * var(--u));padding:0 calc(8 * var(--u));border:calc(1 * var(--u)) solid var(--color-line);border-radius:calc(6 * var(--u));font-variant-numeric:tabular-nums;flex:none;align-items:center;display:flex}.crt-demo__device[data-astro-cid-fwiraxvk]{transition:opacity .6s}.crt-demo__img[data-astro-cid-fwiraxvk]{transition:filter .9s .55s}.crt-demo__panel[data-astro-cid-fwiraxvk]{transition:opacity .45s .25s,translate .7s cubic-bezier(.2,.8,.2,1) .25s}.is-intro-pending[data-astro-cid-fwiraxvk] .crt-demo__device[data-astro-cid-fwiraxvk]{opacity:0}.is-intro-pending[data-astro-cid-fwiraxvk] .crt-demo__img[data-astro-cid-fwiraxvk]{filter:brightness(.25)}.is-intro-pending[data-astro-cid-fwiraxvk] .crt-demo__panel[data-astro-cid-fwiraxvk]{opacity:0;translate:0 calc(10 * var(--u))}