/* 最新 UI 稿在独立文档内保持自己的材质与布局，官网仅控制展示容器。 */
.workspace{position:relative;isolation:isolate;overflow:hidden;background:#f6f8fa;text-align:left}
.workspace iframe{display:block;width:100%;height:100%;border:0}

.live-workspace{height:730px;border:1px solid #d8e2ed;border-radius:22px;box-shadow:0 28px 70px -30px #24467030}
.approval-workspace{height:360px;border-radius:18px;margin-top:28px;border:1px solid #dce5ef}
.reset-approval{display:block;margin:12px 0 0 auto;color:#687d98;font-size:12px;padding:7px 0}
/* 公共 npm 尚无发布：保留安装位置的留白，不展示无效命令或复制按钮。 */
.hero-install-slot{height:38px}
@media(max-width:700px){.live-workspace{height:680px;border-radius:17px}.hero-install-slot{height:30px}.approval-workspace{margin-inline:-12px;height:360px}}
@media(max-width:360px){.approval-workspace{margin-inline:-16px}}

/* 切换只改变产品 UI 的外观；官网继续保持蓝白品牌视觉。 */
.ui-theme-switch{display:inline-flex;gap:3px;padding:4px;background:#e9eef6;border:1px solid #e0e7f0;border-radius:100px;flex:none}
.ui-theme-switch button,.experience-guide .ui-theme-switch button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 14px;border:0;border-radius:100px;background:transparent;color:#738098;font-size:12px;white-space:nowrap;cursor:pointer;flex:none}
.ui-theme-switch button[aria-pressed="true"],.experience-guide .ui-theme-switch button[aria-pressed="true"]{background:#fff;color:#254e91;box-shadow:0 2px 6px #263d6420}
.ui-theme-switch button span,.experience-guide .ui-theme-switch button span{font-size:15px;color:inherit;margin:0}
.ui-theme-switch button:focus-visible{outline:2px solid #2868e4;outline-offset:2px}
.hero-stage{width:min(1180px,calc(100% - 80px));margin-top:42px}
.hero-stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 12px 14px}
.hero-stage-toolbar>span{color:#657a96;font-size:13px;letter-spacing:.4px}
/* 固定双设备画布，保证窄屏不会把平板重新排成手机布局。 */
.device-composition{position:relative;width:100%;aspect-ratio:1320/910;isolation:isolate}
.device-composition:before{content:"";position:absolute;inset:4% 0 8%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#bed6fa66,transparent 68%);filter:blur(20px)}
.device-canvas{position:absolute;left:0;top:0;width:1320px;height:910px;transform:scale(var(--device-scale,1));transform-origin:top left}
.hero-device{position:absolute;overflow:hidden;background:#202833;border:9px solid #293442;box-shadow:0 28px 55px -18px #203e6655,inset 0 0 0 1px #8b9dbb;transition:border-color .3s}
.hero-device .workspace{height:100%;width:100%;border-radius:inherit}
.tablet-device{left:0;top:26px;width:1120px;height:716px;border-radius:32px;padding:5px}
.phone-device{right:0;top:133px;width:350px;height:733px;border-radius:44px;padding:3px;z-index:2;border-width:7px;box-shadow:0 30px 65px -15px #182f6380,0 0 0 1px #8191a580}
.device-label{position:absolute;font-size:15px;letter-spacing:1px;color:#728198}
.tablet-label{left:20px;top:769px}.phone-label{right:78px;top:887px}
.hero-stage .stage-caption{margin-top:6px}
.scene-nav{display:flex;gap:8px}.experience-guide .ui-theme-switch{margin-left:8px}
@media(max-width:950px){.hero-stage{width:calc(100% - 48px)}.experience-guide{flex-wrap:wrap}.experience-guide>span{width:auto;margin-right:auto}.scene-nav{order:3;width:100%}.scene-nav button{flex:1}.experience-guide .ui-theme-switch{margin-left:0}}
@media(max-width:700px){.hero-stage{width:calc(100% - 32px);margin-top:30px}.hero-stage-toolbar{margin-inline:0;gap:8px}.hero-stage-toolbar>span{font-size:10px;letter-spacing:0}.ui-theme-switch button,.experience-guide .ui-theme-switch button{padding:6px 10px;min-height:32px;font-size:11px}.hero-stage .stage-caption{font-size:10px}.scene-nav{gap:6px}.scene-nav button{justify-content:center;flex-basis:auto}.experience-guide>span{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.hero-device{transition:none}}