/* 官网体验条位于独立 iframe 外，产品组件继续复用原版样式。 */
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{display:flex;flex-direction:column;font:12px/1.5 var(--sans);color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}.demo-bar{height:38px;display:flex;align-items:center;gap:24px;padding:0 16px;background:var(--accent-soft);border-bottom:1px solid var(--accent-line)}
.demo-bar>a{display:flex;gap:9px;align-items:center}.demo-bar>a span,.demo-bar p{color:var(--sub);font-size:11px}.demo-bar>div{margin-left:auto;display:flex;align-items:center;gap:8px}.demo-bar button{display:flex;align-items:center;padding:4px 7px;background:none;border:0;border-radius:4px;font-size:11px}.demo-bar button:hover{background:var(--accent-line)}.demo-bar>div>a{font-size:11px;color:var(--accent);margin-left:4px}svg{height:15px;width:15px}
/* 只扩展产品 iframe 的视口，窄屏通过外壳滚动，保持原版组件比例和内部纵向滚动。 */
.demo-bar{flex-shrink:0}
.demo-pan-hint{display:none;flex-shrink:0;margin:0;padding:4px 12px;font-size:11px;color:var(--sub);background:var(--bg);border-bottom:1px solid var(--line)}
.demo-viewport{position:relative;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.demo-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;color:var(--sub);background:var(--bg)}
.demo-loading button{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
#product-app{display:block;border:0;width:100%;min-width:1120px;height:100%;background:var(--bg)}
/* 桌面预览整体缩小 20%，扩展 iframe 视口后等比显示；窄屏保留原尺寸便于触控。 */
@media(min-width:1120px){#product-app{width:calc(100% / .8);height:calc(100% / .8);transform:scale(.8);transform-origin:top left}.demo-viewport{overflow-x:hidden}}
@media(max-width:1119px){.demo-pan-hint{display:block}}
dialog{padding:24px;max-width:calc(100vw - 32px);width:430px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(var(--shadow-ink),.2)}dialog::backdrop{background:var(--scrim)}dialog h2{margin:0;font-size:17px}dialog p{color:var(--sub);margin:16px 0 24px}dialog>div{display:flex;justify-content:flex-end;gap:8px}dialog button{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 14px}#reset-confirm{background:var(--accent);color:white;border-color:var(--accent)}
#host-status{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:9px 15px;border-radius:6px;font-size:12px}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:650px){.demo-bar{padding:0 10px;gap:8px}.demo-bar p,.demo-bar>a span{display:none}.demo-bar>div{gap:0}}
/* 体验条跟随产品默认配色：浅色时对应「晴空」，深色时对应「深海」。 */
:root{--bg:#F4F8FC;--card:#FFFFFF;--ink:#1B2530;--sub:#5C6B7A;--line:#DFE7EF;--accent:#0D94E8;--accent-soft:#E2F3FD;--accent-line:#BCE2F9;--hover:#EDF3F9}
/* 产品处于深色主题时，体验条与加载层同步切到深海配色，避免浅色条压在深色界面上。 */
html.is-dark{--bg:#141B23;--card:#1A222B;--ink:#E4EBF2;--sub:#96A5B4;--line:#2C3844;--accent:#2CACF2;--accent-soft:#0E141B;--accent-line:#2C3844;--hover:#222D39;--shadow-ink:0,0,0;--scrim:rgba(0,0,0,.55);color-scheme:dark}