.studio{--st-back: var(--room-back, var(--ground));--st-floor: var(--room-floor, var(--ground-2));--st-horizon: var(--room-seam, 66%);--st-key-x: var(--key-x, 30%);--st-key-y: var(--key-y, 15%);--st-key-angle: var(--key-angle, 18deg);--st-key-spread: var(--key-spread, 13deg);--st-key-tint: var(--key-tint, var(--chrome));--st-key-peak: var(--key-peak, .085);--st-key-mid: var(--key-mid, .038);--st-key-floor: var(--key-floor, 0);--st-pool-tint: var(--pool-tint, var(--chrome));--st-pool-opacity: var(--pool-opacity, .055);--st-pool-size: var(--pool-size, 62% 26%);--st-haze-tint: var(--haze-tint, var(--ink-dim));--st-haze-opacity: var(--haze-opacity, .05);--st-mirror-opacity: var(--floor-mirror-opacity, .18);--st-mirror-blur: var(--floor-mirror-blur, 6px);--st-mirror-fade: var(--floor-mirror-fade, 38%);--st-vignette: var(--vignette, .22);--st-subject-w: 40;--st-subject-h: 42;--st-subject-base: 1;--st-subject-ar: 1.5;--st-subject-cap: 100vw;--st-fig-w: min( calc(var(--st-subject-w) * 1vw), calc(var(--st-subject-h) * 1dvh * var(--st-subject-ar)), var(--st-subject-cap) );--st-fig-h: calc(var(--st-fig-w) / var(--st-subject-ar));--st-pool-x: calc(50% - (50% - var(--st-key-x)) * .28);--st-pool-y: calc(var(--st-horizon) + 8%);--st-key-gain: 1.412;--st-key-core: color-mix( in srgb, var(--st-key-tint) calc(var(--st-key-peak) * var(--st-key-gain) * 100%), transparent );--st-key-edge: color-mix( in srgb, var(--st-key-tint) calc(var(--st-key-peak) * var(--st-key-gain) * 38%), transparent );--st-key-lamp: color-mix( in srgb, var(--st-key-tint) calc(var(--st-key-peak) * var(--st-key-gain) * 155%), transparent );--st-pool-core: color-mix( in srgb, var(--st-pool-tint) calc(var(--st-pool-opacity) * 100%), transparent );--st-seam: color-mix(in srgb, var(--st-key-tint) 6%, transparent);--st-beam-start: calc(180deg - var(--st-key-angle) - var(--st-key-spread));--st-cone: radial-gradient( ellipse 72% 82% at var(--st-key-x) var(--st-key-y), black 0%, black 9%, rgb(0 0 0 / calc(var(--st-key-mid) / var(--st-key-peak))) 38%, rgb(0 0 0 / var(--st-key-floor)) 97% );position:relative;inline-size:100%}.studio__frame{position:relative;isolation:isolate;inline-size:100%;block-size:100dvh;overflow:clip;background-color:var(--st-back)}@media(pointer:coarse){.studio__frame{block-size:100svh}}.studio__room,.studio__vignette,.studio__ground,.studio__key,.studio__beam,.studio__dust,.studio__pool{position:absolute;inset:0;pointer-events:none}.studio__ground{background-image:linear-gradient(to bottom,var(--st-back) 0%,var(--st-back) calc(var(--st-horizon) - 22%),var(--st-floor) calc(var(--st-horizon) + 4%),var(--st-floor) 100%)}.studio__ground:after{content:"";position:absolute;inset-inline:0;inset-block-start:var(--st-horizon);block-size:1px;background-image:linear-gradient(to right,transparent calc(var(--st-pool-x) - 42%),var(--st-seam) var(--st-pool-x),transparent calc(var(--st-pool-x) + 42%))}.studio__key{transform-origin:var(--st-key-x) var(--st-key-y);transform:rotate(-2deg) scaleX(.686)}.studio__beam{background-image:radial-gradient(ellipse 15% 11% at var(--st-key-x) var(--st-key-y),var(--st-key-lamp),transparent 68%),conic-gradient(from var(--st-beam-start) at var(--st-key-x) var(--st-key-y),transparent 0deg,var(--st-key-edge) calc(var(--st-key-spread) * .44),var(--st-key-core) var(--st-key-spread),var(--st-key-edge) calc(var(--st-key-spread) * 1.56),transparent calc(var(--st-key-spread) * 2));-webkit-mask-image:var(--st-cone);mask-image:var(--st-cone);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.studio__dust{background-image:radial-gradient(ellipse 26% 20% at 39% 46%,var(--st-haze-tint),transparent 72%),radial-gradient(ellipse 18% 15% at 33% 26%,color-mix(in srgb,var(--st-haze-tint) 60%,transparent),transparent 74%),radial-gradient(ellipse 21% 12% at 44% 62%,color-mix(in srgb,var(--st-haze-tint) 45%,transparent),transparent 76%);-webkit-mask-image:var(--st-cone);mask-image:var(--st-cone);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:calc(var(--st-haze-opacity) * .56);animation:studio-drift 44s ease-in-out infinite alternate}@keyframes studio-drift{0%{transform:translate3d(-1.4%,-2.2%,0)}to{transform:translate3d(1.4%,2.8%,0)}}.studio__pool{background-image:radial-gradient(ellipse var(--st-pool-size) at var(--st-pool-x) var(--st-pool-y),var(--st-pool-core),transparent 74%)}.studio__figure{position:absolute;inline-size:var(--st-fig-w);block-size:var(--st-fig-h);inset-inline-start:50%;margin-inline-start:calc(var(--st-fig-w) / -2);inset-block-start:calc(var(--st-horizon) - var(--st-fig-h) * var(--st-subject-base));transform-origin:50% calc(var(--st-subject-base) * 100%);transform:translateY(-4%) scale(1.14)}.studio__spatial{position:relative;inline-size:100%;block-size:100%;transform-origin:50% calc(var(--st-subject-base) * 100%)}.studio__subject{display:block;inline-size:100%;block-size:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.studio__subject-overlay{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}.studio__mirror{position:absolute;inset-inline:0;inset-block-start:calc(var(--st-subject-base) * 100%);block-size:100%;overflow:clip;-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent var(--st-mirror-fade));mask-image:linear-gradient(to bottom,black 0%,transparent var(--st-mirror-fade));pointer-events:none;transform-origin:50% 0;transform:scaleY(.88);opacity:calc(var(--st-mirror-opacity) * .556)}.studio__mirror-img{position:absolute;inset-inline:0;inset-block-start:calc((var(--st-subject-base) - 1) * 100%);inline-size:100%;block-size:100%;object-fit:contain;transform:scaleY(-1);filter:blur(var(--st-mirror-blur));user-select:none;-webkit-user-drag:none}.studio__vignette{background-image:radial-gradient(ellipse 82% 78% at 50% 52%,transparent 34%,var(--void, black) 100%);opacity:calc(var(--st-vignette) * 1.364)}.studio__room-gl{position:absolute;inset:0;z-index:var(--room-canvas-z, 1);pointer-events:none}.studio__copy{position:absolute;z-index:2;inset-inline-start:clamp(20px,6vw,88px);inset-block-end:clamp(24px,8dvh,88px);max-inline-size:min(34ch,42%);pointer-events:none}.studio__copy>*{pointer-events:auto}.studio__frame[data-camera=live][data-scrub=active] .studio__key,.studio__frame[data-camera=live][data-scrub=active] .studio__figure,.studio__frame[data-camera=live][data-scrub=active] .studio__mirror,.studio__frame[data-camera=live][data-scrub=active] .studio__copy{will-change:transform}.studio__frame[data-camera=live][data-scrub=active] .studio__beam,.studio__frame[data-camera=live][data-scrub=active] .studio__dust,.studio__frame[data-camera=live][data-scrub=active] .studio__vignette{will-change:opacity}@media(max-width:767px){.studio{--st-horizon: 60%;--st-subject-w: 54;--st-subject-h: 34}.studio__copy{inset-inline:var(--gutter, 16px);inset-block-end:calc(var(--gutter, 16px) + var(--hm-dock-h, 0px));max-inline-size:none}}@media(min-width:768px)and (max-width:979px){.studio__copy{inset-block-end:calc(var(--gutter, 24px) + var(--hm-dock-h, 0px))}}@media(prefers-reduced-motion:reduce){.studio__spatial{transform:none!important}.studio__dust{animation:none}.studio__room-gl{display:none}}@media print{.studio__room-gl{display:none}}@media(max-height:599px){.studio__frame[data-camera=static]{min-block-size:640px}.studio__copy{inset-block-end:calc(24px + var(--hm-dock-h, 0px))}}