:root{color:#1d1d1f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body{background:#f5f5f7;width:100%;height:100%;margin:0;overflow:hidden}a,[role=button],canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}main{background:#f5f5f7;width:100%;height:100svh;padding:14px;position:relative}.product-frame{background:#fff;border-radius:34px;width:100%;height:100%;position:relative;overflow:hidden}.brand{z-index:5;-webkit-user-select:none;user-select:none;pointer-events:none;transform-origin:0 0;width:auto;height:clamp(48px,4.2vw,68px);position:absolute;top:clamp(30px,6vh,64px);left:clamp(52px,7vw,132px);transform:translate(-33px,-5px)scale(.93)}.brand img{width:auto;max-width:none;height:100%;max-height:none;display:block}.feature-rail{--rail-width:clamp(340px,29vw,423px);z-index:5;width:var(--rail-width);flex-direction:column;align-items:flex-start;gap:12px;max-height:76vh;display:flex;position:absolute;top:50%;left:clamp(52px,7vw,132px);transform:translateY(-44%)}.feature{--closed-width:154px;--open-height:180px;width:var(--closed-width);flex:none;height:56px;transition:width .58s cubic-bezier(.34,1.3,.64,1),height .58s cubic-bezier(.34,1.12,.64,1);position:relative}.feature.is-open{width:100%;height:var(--open-height)}.feature-shell{clip-path:inset(0 round 28px);isolation:isolate;-webkit-backdrop-filter:blur(20px);background:#e8e8edb8;border-radius:28px;transition:border-radius .5s cubic-bezier(.34,1.15,.64,1),background .2s linear,transform .18s;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 .5px #0000001c}.feature:not(.is-open) .feature-shell:hover{background:#dfdfe3b3;transform:scale(1.015)}.feature-trigger{color:#1d1d1f;letter-spacing:-.02em;white-space:nowrap;cursor:pointer;opacity:1;z-index:2;background:0 0;border:0;align-items:center;gap:13px;width:100%;height:100%;padding:0 24px 0 18px;font-size:clamp(15px,1.08vw,18px);font-weight:650;transition:opacity .16s,transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0;transform:translateY(0)}.feature.is-open .feature-trigger{opacity:0;pointer-events:none;transform:translateY(-12px)}.feature-trigger:focus-visible{outline-offset:3px;outline:3px solid #0071e3}.view-actions button:focus-visible{outline-offset:3px;outline:3px solid #0071e3}.feature-stepper button:focus-visible{outline-offset:3px;outline:3px solid #0071e3}.swatch:focus-visible{outline-offset:3px;outline:3px solid #0071e3}.mobile-edge-nav{display:none}.plus{border:1.4px solid;border-radius:50%;flex:none;width:24px;height:24px;transition:transform .38s cubic-bezier(.4,0,.2,1);position:relative}.plus:before,.plus:after{content:"";background:currentColor;border-radius:2px;width:12px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.plus:after{transition:opacity .2s;transform:translate(-50%,-50%)rotate(90deg)}.feature-content{width:var(--rail-width);opacity:0;visibility:hidden;pointer-events:none;height:auto;padding:28px;transition:opacity .12s,transform .18s,visibility 0s linear .18s;position:absolute;top:0;left:0;transform:translateY(16px)}.feature.is-open .feature-content{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .34s .5s,transform .4s cubic-bezier(.32,.72,0,1) .5s,visibility 0s linear .5s;transform:translateY(0)}.feature-content h2{letter-spacing:-.035em;margin:0 0 11px;font-size:clamp(19px,1.35vw,23px);line-height:1.2}.feature-content p{max-width:calc(var(--rail-width) - 56px);letter-spacing:-.012em;margin:0;font-size:clamp(14px,.98vw,17px);line-height:1.52}.view-actions{flex-wrap:wrap;gap:8px;margin-top:22px;display:flex}.view-actions button{color:#3c3c43;cursor:pointer;background:#fff;border:0;border-radius:999px;padding:9px 15px;font-size:13px;transition:background .2s,color .2s,transform .2s}.view-actions button:hover{color:#fff;background:#1d1d1f;transform:translateY(-1px)}.dial-swatches{justify-content:space-between;align-items:center;gap:clamp(7px,1.3vw,14px);width:100%;margin-top:20px;display:flex}.swatch{aspect-ratio:1;background:var(--swatch-color,#d8d8da);cursor:pointer;border:0;border-radius:50%;flex:0 0 clamp(30px,3vw,40px);width:clamp(30px,3vw,40px);height:auto;transition:transform .2s,box-shadow .2s}.swatch.is-selected{background:var(--swatch-color,#d8d8da);box-shadow:0 0 0 3px #fff,0 0 0 6px #1d1d1f}.feature-stepper{z-index:6;flex-direction:column;gap:34px;display:flex;position:absolute;top:50%;left:24px;transform:translateY(-50%)}.feature-stepper button{color:#1d1d1f;cursor:pointer;background:#f1f1f3;border:0;border-radius:50%;width:50px;height:50px;transition:background .2s,transform .2s}.nav-chevron{flex:none;width:11px;height:18px;display:block;position:relative}.nav-chevron:before,.nav-chevron:after{content:"";background:currentColor;border-radius:999px;width:10px;height:1.6px;position:absolute;top:50%}.nav-chevron.is-prev:before,.nav-chevron.is-prev:after{transform-origin:0;left:1px}.nav-chevron.is-prev:before{transform:rotate(-45deg)}.nav-chevron.is-prev:after{transform:rotate(45deg)}.nav-chevron.is-next:before,.nav-chevron.is-next:after{transform-origin:100%;right:1px}.nav-chevron.is-next:before{transform:rotate(45deg)}.nav-chevron.is-next:after{transform:rotate(-45deg)}.feature-stepper button .nav-chevron{margin:auto;transform:rotate(90deg)}.feature-stepper button:hover{background:#e6e6e9;transform:scale(1.04)}.viewport{--viewer-y:0;z-index:1;touch-action:none;transform:translate3d(0,var(--viewer-y),0);outline:none;position:absolute;inset:0}.media-layer{will-change:transform,opacity}.static-media{z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0;overflow:hidden}.static-media-motion{opacity:1;transform-origin:50%;will-change:transform,opacity;position:absolute;inset:-6%;transform:translate(0,0)scale(1)}.static-media-asset{left:calc(50% + var(--media-asset-x,0));top:calc(50% + var(--media-asset-y,0));width:var(--media-asset-width,160%);max-width:none;height:auto;max-height:none;transform:translate3d(-50%,-50%,0) scale(var(--media-asset-scale,1));transform-origin:50%;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute}.media-hidden{opacity:0;pointer-events:none}.media-steady{opacity:1}.media-idle{opacity:0;pointer-events:none}.media-scrubbing{opacity:1;pointer-events:none}.viewport.media-enter,.viewport.media-exit,.static-media.media-enter .static-media-motion,.static-media.media-exit .static-media-motion{animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:both}.static-media.media-image-swap.media-enter .static-media-motion,.static-media.media-image-swap.media-exit .static-media-motion{animation-duration:.8s}.static-media.media-image-swap.media-enter.media-next .static-media-motion{animation-name:imageEnterNext}.static-media.media-image-swap.media-exit.media-next .static-media-motion{animation-name:imageExitNext}.static-media.media-image-swap.media-enter.media-prev .static-media-motion{animation-name:imageEnterPrev}.static-media.media-image-swap.media-exit.media-prev .static-media-motion{animation-name:imageExitPrev}@keyframes imageEnterNext{0%{opacity:0;transform:translate(16%)scale(.85)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes imageExitNext{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translate(-16%)scale(.85)}}@keyframes imageEnterPrev{0%{opacity:0;transform:translate(-16%)scale(.85)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes imageExitPrev{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translate(16%)scale(.85)}}.viewport.media-cross-kind.media-enter,.viewport.media-cross-kind.media-exit,.static-media.media-cross-kind.media-enter .static-media-motion,.static-media.media-cross-kind.media-exit .static-media-motion{animation-duration:.8s}.static-media.media-cross-kind.media-enter.media-next .static-media-motion{animation-name:crossImageEnterNext}.static-media.media-cross-kind.media-exit.media-next .static-media-motion{animation-name:crossImageExitNext}.static-media.media-cross-kind.media-enter.media-prev .static-media-motion{animation-name:crossImageEnterPrev}.static-media.media-cross-kind.media-exit.media-prev .static-media-motion{animation-name:crossImageExitPrev}.viewport.media-cross-kind.media-enter.media-next{animation-name:crossModelEnterNext}.viewport.media-cross-kind.media-exit.media-next{animation-name:crossModelExitNext}.viewport.media-cross-kind.media-enter.media-prev{animation-name:crossModelEnterPrev}.viewport.media-cross-kind.media-exit.media-prev{animation-name:crossModelExitPrev}@keyframes crossImageEnterNext{0%{opacity:0;transform:translate(12%)scale(.92)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes crossImageExitNext{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translate(-12%)scale(.92)}}@keyframes crossImageEnterPrev{0%{opacity:0;transform:translate(-12%)scale(.92)}to{opacity:1;transform:translate(0,0)scale(1)}}@keyframes crossImageExitPrev{0%{opacity:1;transform:translate(0,0)scale(1)}to{opacity:0;transform:translate(12%)scale(.92)}}@keyframes crossModelEnterNext{0%{opacity:0;transform:translate3d(9%,var(--viewer-y,0),0) scale(.95)}to{opacity:1;transform:translate3d(0,var(--viewer-y,0),0) scale(1)}}@keyframes crossModelExitNext{0%{opacity:1;transform:translate3d(0,var(--viewer-y,0),0) scale(1)}to{opacity:0;transform:translate3d(-9%,var(--viewer-y,0),0) scale(.95)}}@keyframes crossModelEnterPrev{0%{opacity:0;transform:translate3d(-9%,var(--viewer-y,0),0) scale(.95)}to{opacity:1;transform:translate3d(0,var(--viewer-y,0),0) scale(1)}}@keyframes crossModelExitPrev{0%{opacity:1;transform:translate3d(0,var(--viewer-y,0),0) scale(1)}to{opacity:0;transform:translate3d(9%,var(--viewer-y,0),0) scale(.95)}}.viewport canvas{cursor:grab;width:100%;height:100%;display:block}.viewport canvas:active{cursor:grabbing}.voice-click-tip{z-index:4;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;will-change:left,top,width,opacity,transform;width:210px;max-width:none;height:auto;max-height:none;transition:opacity .42s cubic-bezier(.32,.72,0,1),transform .42s cubic-bezier(.32,.72,0,1);position:absolute;top:0;left:0;transform:translateY(-5px)}.voice-click-tip.is-visible{opacity:1;transform:translate(0,0)}.drag-hint{z-index:4;color:#707076;letter-spacing:.06em;pointer-events:none;margin:0;font-size:13px;font-weight:550;position:absolute;bottom:32px;right:clamp(38px,5vw,88px)}.drag-hint span{vertical-align:-1px;font-size:18px}.model-loader{z-index:7;opacity:1;visibility:visible;pointer-events:none;align-items:center;gap:12px;transition:opacity .45s .12s,visibility 0s linear .57s;display:flex;position:absolute;top:50%;left:69%;transform:translate(-50%,-50%)}.model-loader.is-complete{opacity:0;visibility:hidden}.loader-track{background:#e1e1e5;border-radius:999px;width:132px;height:4px;overflow:hidden}.loader-track span{border-radius:inherit;background:#525258;height:100%;transition:width .18s ease-out;display:block}.loader-value{color:#77777c;font-variant-numeric:tabular-nums;min-width:34px;font-size:11px}.error{z-index:8;color:#74767b;font-size:14px;position:absolute;top:50%;left:69%;transform:translate(-50%,-50%)}.audio-error{z-index:8;color:#74767b;cursor:pointer;background:#fffc;border:0;border-radius:999px;padding:8px 14px;position:absolute;bottom:25px;left:69%;transform:translate(-50%)}@media (max-width:900px){button{outline:none}main{height:100dvh;min-height:100svh;padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px) calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 8px);background:#f5f5f7}.product-frame{background:#fff;border-radius:28px}.brand{width:auto;height:62px;top:25px;left:28px;transform:translate(2px,8px)scale(.67)}.viewport{--viewer-y:-7svh;inset:0}.static-media{inset:0}.voice-tip-debug-panel{border-radius:18px;width:min(300px,100vw - 24px);max-height:42svh;padding:13px}.static-media{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.feature-rail{--mobile-card-width:calc(100% - 104px);width:auto;height:var(--active-height);touch-action:pan-y;max-height:none;transition:height .52s cubic-bezier(.32,.72,0,1);display:block;inset:auto 0 24px;overflow:visible;transform:none}.feature{top:auto;left:50%;bottom:var(--edge-bottom,0px);max-width:none;margin-left:calc(var(--mobile-card-width) / -2);transform:translate3d(var(--carousel-x,0),0,0);will-change:transform;pointer-events:none;transition:transform .56s cubic-bezier(.32,.72,0,1),bottom .56s cubic-bezier(.32,.72,0,1);position:absolute;width:var(--mobile-card-width)!important;height:var(--open-height)!important}.feature.is-open{width:var(--mobile-card-width)!important;height:var(--open-height)!important}.feature-shell{opacity:var(--card-opacity,0);clip-path:inset(0 round var(--card-radius-x,28px) / var(--card-radius-y,28px));border-radius:var(--card-radius-x,28px) / var(--card-radius-y,28px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:scaleX(var(--card-scale-x,1)) scaleY(var(--card-scale-y,1));transform-origin:50% 100%;transition:transform .56s cubic-bezier(.32,.72,0,1),border-radius var(--card-radius-duration) var(--card-radius-ease),clip-path var(--card-radius-duration) var(--card-radius-ease),opacity .28s ease;pointer-events:none;will-change:transform;background:#e8e8edb8;overflow:hidden;box-shadow:inset 0 0 .5px #0000001c}.feature.is-open .feature-shell{pointer-events:auto}.feature:not(.is-open) .feature-shell:hover{transform:scaleX(var(--card-scale-x,1)) scaleY(var(--card-scale-y,1));background:#e8e8edb8}.feature-trigger{display:none}.feature-content,.feature.is-open .feature-content{width:100%;opacity:var(--content-opacity,0);visibility:visible;pointer-events:none;will-change:opacity,transform;padding:24px;transition:opacity .14s,transform .14s cubic-bezier(.32,.72,0,1);transform:translate(0,0)}@supports (opacity:calc(1 / 2)){.feature-content,.feature.is-open .feature-content{opacity:clamp(0,calc((var(--content-opacity,0) - .535) / .465),1)}}.feature:not(.is-open) .feature-content{opacity:0;transform:translateY(8px)}.feature-rail.is-settling .feature:not(.is-open) .feature-content{opacity:var(--content-opacity,0);transform:translate3d(0,calc((1 - var(--content-opacity,0)) * 8px),0);transition:opacity .14s .3s,transform .14s cubic-bezier(.32,.72,0,1) .3s}.feature.is-open .feature-content{pointer-events:auto}.feature-content p{width:100%;max-width:none}.view-actions{width:100%}.mobile-edge-nav{z-index:5;color:#1d1d1f;width:48px;height:64px;opacity:var(--edge-arrow-opacity,0);transform:translateX(var(--edge-arrow-x,0));pointer-events:auto;cursor:pointer;background:0 0;border:0;margin:0 0 0 -24px;padding:0;line-height:1;transition:opacity .22s,transform .56s cubic-bezier(.32,.72,0,1);display:block;position:absolute;top:auto;bottom:0;left:50%}.mobile-edge-nav:disabled{pointer-events:none}.mobile-edge-nav .nav-chevron{margin:auto}.mobile-edge-nav:focus-visible{outline-offset:-3px;border-radius:999px;outline:3px solid #0071e3}.feature-rail.is-dragging .feature,.feature-rail.is-dragging .feature-shell,.feature-rail.is-dragging .feature-content,.feature-rail.is-dragging .mobile-edge-nav{transition:none!important}.feature-stepper{display:none}.plus{width:24px;height:24px}.dial-swatches{gap:7px}.swatch{flex-basis:clamp(28px,8vw,40px);width:clamp(28px,8vw,40px)}.voice-click-tip{object-fit:contain;object-position:center;display:block}.drag-hint{display:none}.feature-content h2{font-size:19px}.feature-content p{font-size:14px}.error,.audio-error,.model-loader{left:50%}.model-loader{top:44%}}@supports (-webkit-touch-callout:none){@media (max-width:900px){.voice-click-tip{object-fit:contain;object-position:center}}}@media (prefers-reduced-motion:reduce){.voice-click-tip{transition:none!important}*{scroll-behavior:auto!important}.feature,.feature-shell,.feature-content,.feature-trigger,.plus,.view-actions button,.mobile-edge-nav{transition:none!important}.viewport.media-enter,.viewport.media-exit,.static-media.media-enter .static-media-motion,.static-media.media-exit .static-media-motion{animation:none!important}.media-exit{opacity:0!important}.media-enter{opacity:1!important}.static-media-motion{opacity:1!important;transform:none!important}}@media (min-width:901px) and (max-height:820px){.feature-stepper{left:32px}.feature-rail{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-y:contain;scroll-behavior:smooth;max-height:none;padding:4px 0 18px;top:clamp(96px,14vh,118px);bottom:28px;left:clamp(92px,9vw,148px);overflow:hidden auto;transform:none}.feature-rail::-webkit-scrollbar{display:none}}@media (max-width:900px){.feature-content,.feature.is-open .feature-content{visibility:visible;pointer-events:none;opacity:clamp(0, calc((var(--content-opacity,0) - .535) / .465), 1);will-change:opacity, transform}.feature.is-open .feature-content{pointer-events:auto;transition:opacity .12s;animation:none;transform:translate(0,0)}.feature:not(.is-open) .feature-content{transition:opacity .38s cubic-bezier(.22,.61,.36,1) .12s,transform .38s cubic-bezier(.22,.61,.36,1) .12s;animation:none;transform:translateY(7px)}.feature-rail.is-settling .feature:not(.is-open) .feature-content{transform:translate(0,0)}.feature-rail.is-dragging .feature-content{transition:none!important}}
