.hero-lab-controls,.hero-lab-settings{justify-content:space-between;align-items:end;gap:var(--space-6);margin-block:var(--space-8);flex-wrap:wrap;display:flex}.hero-lab-settings{align-items:start}.hero-lab-options{border:0;min-width:0;margin:0;padding:0}.hero-lab-options legend{margin-bottom:var(--space-3);padding:0;font-weight:700}.hero-lab-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.hero-lab-buttons [aria-pressed=true]{border-color:var(--red);background:var(--muted);box-shadow:inset 0 -2px var(--red)}.hero-lab-preview{isolation:isolate;border:var(--border-thin) solid var(--border);border-radius:var(--radius-small);background:var(--card);grid-template-columns:1fr 1.1fr;align-items:center;display:grid;position:relative;overflow:hidden}.hero-lab-copy{padding:var(--space-8);padding-top:var(--space-16);z-index:2;align-self:start;position:relative}.hero-lab-kicker,.hero-lab-model-note,.hero-lab-options p,.hero-lab-motion p{font-size:var(--text-small);color:var(--muted-foreground)}.hero-lab-copy h2{font-size:var(--heading-hero);line-height:var(--leading-hero);margin-block:var(--space-4)}.hero-lab-copy>p{max-width:80%}.hero-lab-copy .hero-lab-model-note{margin-top:var(--space-8)}.hero-lab-object{z-index:1;min-width:0;margin-left:calc(-2 * var(--space-16));width:calc(100% + 2 * var(--space-16));position:relative}.hero-lab-stage{aspect-ratio:.96;touch-action:pan-y;width:100%;position:relative}.hero-lab-float{animation:hero-lab-float var(--hero-period) ease-in-out infinite;z-index:1;will-change:transform;animation-play-state:paused;position:absolute;inset:2% 3% 10%}.hero-lab-preview[data-variant=sketch] .hero-lab-float{animation:none}.hero-lab-stage[data-motion=running] .hero-lab-float,.hero-lab-stage[data-motion=running] .hero-lab-shadow{animation-play-state:running}.hero-lab-image{width:100%;height:100%}.hero-lab-layer,.hero-lab-layer img{width:100%;height:100%;position:absolute;inset:0}.hero-lab-layer{opacity:0;pointer-events:none;transition:opacity .4s}.hero-lab-layer[data-active=true]{opacity:1}.hero-lab-layer img{object-fit:contain;filter:drop-shadow(0 16px 12px #0002)}@keyframes hero-lab-float{0%,to{transform:translateY(calc(-1 * var(--hero-lift)))}50%{transform:translateY(var(--hero-lift))}}.hero-lab-preview[data-variant=studio]{background:radial-gradient(ellipse at 73% 16%, rgb(calc(105 * var(--hero-studio-light)) calc(113 * var(--hero-studio-light)) calc(127 * var(--hero-studio-light))), #14161b 72%);color:#f2f2f4}.hero-lab-preview[data-variant=studio] .hero-lab-copy>p,.hero-lab-preview[data-variant=studio] .hero-lab-kicker,.hero-lab-preview[data-variant=studio] .hero-lab-model-note{color:#b3b5be}.hero-lab-motion{gap:var(--space-3);min-width:var(--sidebar-width);display:grid}.hero-lab-motion label{align-items:center;gap:var(--space-2);min-height:var(--touch-size);display:flex}.hero-lab-motion output{font-variant-numeric:tabular-nums;margin-left:auto}.hero-lab-motion input[type=range]{width:100%;accent-color:var(--red)}.hero-lab-render{filter:brightness(var(--hero-device-light));width:100%;height:100%;overflow:visible}.hero-lab-preview:before,.hero-lab-preview:after{z-index:0;content:"";pointer-events:none;position:absolute;inset:0}.hero-lab-preview:before{background:radial-gradient(ellipse var(--hero-upper-width) var(--hero-upper-height) at var(--hero-upper-x) var(--hero-upper-y), rgb(255 255 255/var(--hero-upper-intensity)), #fff0);filter:blur(var(--hero-upper-blur))}.hero-lab-preview:after{background:radial-gradient(ellipse var(--hero-floor-width) var(--hero-floor-height) at var(--hero-floor-x) var(--hero-floor-y), rgb(255 255 255/var(--hero-floor-intensity)), #fff0 90%);filter:blur(var(--hero-floor-blur))}.hero-lab-shadow{width:100%;height:100%;filter:blur(var(--hero-shadow-lower-blur));opacity:var(--hero-shadow-lower-opacity);transform-origin:56% 90%;animation:hero-lab-shadow var(--hero-period) ease-in-out infinite;pointer-events:none;animation-play-state:paused;position:absolute;inset:0;overflow:visible}.hero-lab-preview[data-variant=sketch]:before,.hero-lab-preview[data-variant=sketch]:after,.hero-lab-preview[data-variant=sketch] .hero-lab-shadow{display:none}@keyframes hero-lab-shadow{0%,to{transform:translate(var(--hero-shadow-upper-x), var(--hero-shadow-upper-y)) scale(var(--hero-shadow-upper-scale)) scale(var(--hero-shadow-upper-width), var(--hero-shadow-upper-depth));opacity:var(--hero-shadow-upper-opacity);filter:blur(var(--hero-shadow-upper-blur))}50%{transform:translate(var(--hero-shadow-lower-x), var(--hero-shadow-lower-y)) scale(var(--hero-shadow-lower-scale)) scale(var(--hero-shadow-lower-width), var(--hero-shadow-lower-depth));opacity:var(--hero-shadow-lower-opacity);filter:blur(var(--hero-shadow-lower-blur))}}.hero-lab-display-layer{opacity:0;transition:opacity .35s}.hero-lab-display-layer[data-active=true]{opacity:1}.hero-lab-display-controls{width:min(100%,488px);padding-bottom:var(--space-8);text-align:center;align-items:center;margin-inline:auto;display:flex}.hero-lab-arrow{width:var(--touch-size);min-height:var(--touch-size);color:inherit;opacity:.55;cursor:pointer;background:0 0;border:0;flex:none;place-items:center;padding:0;transition:opacity .2s;display:grid}.hero-lab-arrow:is(:hover,:focus-visible){opacity:1}.hero-lab-arrow:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:var(--radius-small)}.hero-lab-display-tabs{flex:1;grid-template-columns:repeat(4,1fr);min-width:0;margin-inline:auto;display:grid;position:relative}.hero-lab-display-button{min-height:var(--touch-size);padding:var(--space-3) var(--space-1);color:inherit;font:inherit;font-size:var(--text-small);opacity:.65;cursor:pointer;background:0 0;border:0;font-weight:600;transition:opacity .35s}.hero-lab-display-button:is(:hover,:focus-visible,[aria-pressed=true]){opacity:1}.hero-lab-display-button:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:var(--radius-small)}.hero-lab-display-indicator{width:25%;height:3px;transform:translateX(calc(var(--hero-selection) * 100%));pointer-events:none;transition:transform .35s;position:absolute;inset:auto auto 0 0}.hero-lab-display-indicator:after{content:"";height:100%;width:var(--space-8);border-radius:var(--radius-small);background:var(--red);margin-inline:auto;display:block}@media (max-width:768px){.hero-lab-preview[data-variant=studio]{background:#14161b}.hero-lab-preview{grid-template-columns:1fr}.hero-lab-copy{padding:var(--space-6)}.hero-lab-copy>p{max-width:100%}.hero-lab-copy .hero-lab-model-note{margin-top:var(--space-4)}.hero-lab-object{width:100%;margin-left:0}.hero-lab-stage{aspect-ratio:1}.hero-lab-motion{width:100%}}@media (min-width:1200px){.hero-lab-workspace{--hero-workspace-width:min(1920px, calc(100vw - 48px));align-items:start;gap:var(--space-4);width:var(--hero-workspace-width);margin-inline:calc((100% - var(--hero-workspace-width)) / 2);grid-template-columns:minmax(220px,250px) minmax(0,1fr) minmax(220px,250px);display:grid}.hero-lab-workspace>.hero-lab-preview{grid-area:1/2;position:sticky;top:112px}.hero-lab-workspace>.hero-lab-settings{display:contents}.hero-lab-workspace .hero-lab-motion{overscroll-behavior:contain;scrollbar-width:thin;min-width:0;max-height:calc(100dvh - 136px);padding:var(--space-3);border:var(--border-thin) solid var(--border);border-radius:var(--radius-small);background:var(--card);font-size:var(--text-small);grid-area:1/1;position:sticky;top:112px;overflow-y:auto}.hero-lab-workspace .hero-lab-motion+.hero-lab-motion{grid-column:3}.hero-lab-workspace .hero-lab-motion output{flex:none}.hero-lab-workspace .hero-lab-copy{padding:var(--space-6)}.hero-lab-workspace .hero-lab-copy h2{font-size:clamp(2rem,2.4vw,3rem)}}