.scn-area{contain:layout paint;border:1px solid var(--color-line);background:radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--color-accent-start) 10%, transparent), transparent 70%), var(--color-surface);border-radius:12px;height:200px;position:relative;overflow:hidden;container-type:inline-size}@media (min-width:48rem){.scn-area{height:230px}}.scn-stage{width:300px;height:170px;position:absolute;top:50%;left:50%;translate:-50% -50%;scale:1.08}@container not (min-width:324px){.scn-stage{scale:1}}@container not (min-width:300px){.scn-stage{scale:.86}}@container not (min-width:260px){.scn-stage{scale:.72}}.scn-abs{position:absolute}.scn-box{background:var(--scene-block);border:1px solid var(--color-line-strong);border-radius:6px}.scn-frame{border:1px solid var(--color-line-strong);background:var(--scene-frame)}.scn-bar{background:var(--scene-bar);transform-origin:0;border-radius:3px;height:6px;display:block}.scn-accent{background:var(--color-accent-start)}.scn-accentEnd{background:var(--color-accent-end)}@keyframes scn-rv{0%{opacity:0;transform:translateY(8px)scale(.96)}10%,86%{opacity:1;transform:none}94%,to{opacity:0;transform:translateY(-4px)}}@keyframes scn-gr{0%{opacity:1;transform:scaleX(0)}14%,86%{opacity:1;transform:scaleX(1)}94%,to{opacity:0;transform:scaleX(1)}}.scn-area[data-scene] .scn-rv{animation:scn-rv 8s var(--d,0s) infinite both}.scn-area[data-scene] .scn-gr{animation:scn-gr 8s var(--d,0s) infinite both}.scn-wdFrame{border-radius:10px;width:230px;height:140px;top:15px;left:35px}.scn-wdNav{height:8px;position:absolute;top:10px;left:10px;right:10px}.scn-wdHero{width:130px;height:52px;top:28px;left:10px}.scn-wdCard{width:64px;height:40px;top:90px}.scn-wdSwatches{flex-direction:column;gap:6px;display:flex;top:30px;right:10px}.scn-wdSwatch{border-radius:50%;width:14px;height:14px;display:block}.scn-wdCursor{width:16px;height:16px;color:var(--color-ink);top:0;left:0;transform:translate(160px,100px)}.scn-area[data-scene] .scn-wdCursor{animation:8s ease-in-out infinite scn-wd-cursor}@keyframes scn-wd-cursor{0%,to{transform:translate(30px,60px)}20%{transform:translate(70px,50px)}40%{transform:translate(110px,110px)}60%{transform:translate(190px,40px)}80%{transform:translate(160px,100px)}}.scn-devEditor{flex-direction:column;gap:9px;width:128px;height:130px;padding:12px;display:flex;top:10px;left:14px}.scn-devPreview{width:128px;height:100px;padding:8px;top:10px;right:14px}.scn-devPreviewBlock{background:var(--scene-bar);height:34px;margin:8px 0}.scn-devPreviewButton{background:var(--scene-bar);width:45px;height:22px}.scn-devPill{border:1px solid var(--color-accent-start);background:var(--scene-tint);color:var(--color-ink);border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:11px;font-weight:600;line-height:16px;display:inline-flex;top:124px;right:14px}.scn-devDot{background:var(--color-accent-start);border-radius:50%;width:6px;height:6px;display:block}.scn-feDesktop{width:150px;height:110px;top:30px;left:32px}.scn-fePhone{width:54px;height:110px;top:30px;right:40px}.scn-feBlock{background:var(--scene-bar);border-radius:4px;position:absolute}.scn-area[data-scene] .scn-feBlock{animation:scn-fe-pulse 8s var(--d,0s) infinite}@keyframes scn-fe-pulse{0%,to{opacity:.5}10%,30%{opacity:1}40%{opacity:.5}}.scn-feRing{border:2px solid var(--color-ink);border-radius:6px;width:44px;height:30px;position:absolute;top:0;left:0;transform:translate(8px,8px)}.scn-area[data-scene] .scn-feRing{animation:8s infinite scn-fe-hop}@keyframes scn-fe-hop{0%,16%,to{transform:translate(8px,8px)}25%,41%{transform:translate(58px,8px)}50%,66%{transform:translate(8px,48px)}75%,91%{transform:translate(58px,48px)}}.scn-beLine{border-top:1px dashed var(--color-line-strong);height:0;top:85px;left:60px;right:60px}.scn-beNode{border-radius:10px;width:40px;height:40px;top:65px}.scn-beServer{flex-direction:column;gap:8px;width:52px;height:80px;padding:8px;display:flex;top:45px;left:124px}.scn-beUnit{background:var(--scene-bar);border-radius:4px;height:14px;display:block;position:relative}.scn-beLight{background:var(--color-accent-start);border-radius:50%;width:4px;height:4px;position:absolute;top:5px;right:4px}.scn-area[data-scene] .scn-beLight{animation:scn-be-blink 2s var(--d,0s) infinite}@keyframes scn-be-blink{0%,to{opacity:.25}50%{opacity:1}}.scn-beDot{border-radius:50%;width:7px;height:7px;top:82px;left:64px;transform:translate(84px)}.scn-beResponse{transform:translate(84px)}.scn-area[data-scene] .scn-beDot{animation:4s linear infinite scn-be-request}.scn-area[data-scene] .scn-beResponse{animation-name:scn-be-response;animation-delay:2s}@keyframes scn-be-request{0%{opacity:0;transform:translate(0)}10%{opacity:1}45%{opacity:1;transform:translate(168px)}50%,to{opacity:0;transform:translate(168px)}}@keyframes scn-be-response{0%{opacity:0;transform:translate(168px)}10%{opacity:1}45%{opacity:1;transform:translate(0)}50%,to{opacity:0;transform:translate(0)}}.scn-moPhone{border-radius:18px;width:90px;height:150px;padding:8px;top:10px;left:105px;overflow:hidden}.scn-moFeed{position:absolute;top:30px;left:8px;right:8px}.scn-area[data-scene] .scn-moFeed{animation:8s ease-in-out infinite scn-mo-scroll}.scn-moItem{background:var(--scene-block);border-radius:8px;height:34px;margin-bottom:8px}@keyframes scn-mo-scroll{0%,15%,90%,to{transform:translateY(0)}45%,60%{transform:translateY(-60px)}}.scn-moTabs{border-top:1px solid var(--color-line);background:var(--scene-frame);height:30px;position:absolute;bottom:0;left:0;right:0}.scn-moIndicator{background:var(--color-accent-start);border-radius:2px;width:14px;height:4px;position:absolute;bottom:6px;left:12px}.scn-area[data-scene] .scn-moIndicator{animation:8s infinite scn-mo-tab}@keyframes scn-mo-tab{0%,30%,to{transform:translate(0)}35%,65%{transform:translate(28px)}70%,95%{transform:translate(56px)}}.scn-moTap{border:2px solid var(--color-accent-start);opacity:0;border-radius:50%;width:14px;height:14px;position:absolute;bottom:1px;left:12px}.scn-area[data-scene] .scn-moTap{animation:8s infinite scn-mo-tap}@keyframes scn-mo-tap{0%{opacity:0;transform:translate(0)scale(.3)}2%{opacity:.9;transform:translate(0)scale(.5)}10%{opacity:0;transform:translate(0)scale(1.8)}32%{opacity:0;transform:translate(28px)scale(.3)}34%{opacity:.9;transform:translate(28px)scale(.5)}42%{opacity:0;transform:translate(28px)scale(1.8)}68%{opacity:0;transform:translate(56px)scale(.3)}70%{opacity:.9;transform:translate(56px)scale(.5)}78%,to{opacity:0;transform:translate(56px)scale(1.8)}}.scn-wpSide{flex-direction:column;gap:8px;width:70px;height:134px;padding:8px;display:flex;top:18px;left:10px}.scn-wpPage{border-radius:6px;width:196px;height:134px;padding:12px;top:18px;right:10px}.scn-wpDrag{border:2px solid var(--color-accent-start);background:var(--scene-tint);border-radius:6px;width:60px;height:26px;position:absolute;top:0;left:0;transform:translate(118px,86px)}.scn-area[data-scene] .scn-wpDrag{animation:8s infinite scn-wp-drag}@keyframes scn-wp-drag{0%,10%{opacity:0;transform:translate(-60px,10px)}18%{opacity:1;transform:translate(-60px,10px)}55%,85%{opacity:1;transform:translate(118px,86px)}95%,to{opacity:0;transform:translate(118px,86px)}}.scn-wpCaret{background:var(--color-ink);width:2px;height:12px;position:absolute;top:70px;left:122px}.scn-area[data-scene] .scn-wpCaret{animation:1s steps(2,end) infinite scn-wp-caret}@keyframes scn-wp-caret{50%{opacity:0}}.scn-area[data-scene=off] *{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.scn-area *{animation:none!important}}.svc-cell:before{content:"";z-index:-1;background:color-mix(in srgb, var(--color-accent-start) 5%, transparent);opacity:0;transition:opacity .2s var(--ease-out);pointer-events:none;position:absolute;inset:0}.svc-link{color:var(--color-ink-muted);transition:color .15s}.svc-link:after{content:"";z-index:1;position:absolute;inset:-24px}.svc-link:focus-visible{outline:none}.svc-link:focus-visible:after{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.svc-cell:focus-within .svc-link{color:var(--color-ink)}.svc-arrow{transition:transform .2s var(--ease-out)}@media (hover:hover) and (pointer:fine){.svc-cell:hover:before{opacity:1}.svc-cell:hover .svc-link{color:var(--color-ink)}.svc-cell:hover .svc-arrow{transform:translate(4px)}}@media (prefers-reduced-motion:reduce){.svc-cell:before,.svc-arrow{transition:none}}