*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#14284f}button{font:inherit;cursor:pointer}.demo-bar{height:60px;border-bottom:1px solid #e2e8f3;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:20px}.demo-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.demo-brand>span{background:#0753ef;color:white;border-radius:10px;width:34px;height:34px;display:grid;place-items:center;font-size:25px}.demo-brand b{font-size:14px}.demo-brand small{font-weight:400;color:#8390a5;margin-left:10px;font-size:11px}.demo-bar nav{display:flex;padding:4px;background:#f1f4f9;border-radius:10px;gap:4px}.demo-bar button{border:0;background:transparent;color:#60708b;border-radius:7px;padding:9px 15px;font-size:13px;font-weight:600;white-space:nowrap}.demo-bar nav button.active{background:#fff;color:#0653ee;box-shadow:0 2px 6px #13285612}.demo-actions{display:flex;align-items:center;gap:8px}.demo-actions>span{font-size:11px;color:#8390a5}.demo-actions #fullscreen{color:white;background:#0753ef}#surfaces{height:calc(100% - 60px);position:relative;background:radial-gradient(ellipse at 50% 20%,#eef4ff,#f5f7fa 70%)}.surface{width:100%;height:100%;border:0;display:block}.surface[hidden],.phone-wrap[hidden]{display:none}.phone-wrap{position:absolute;top:24px;bottom:24px;left:50%;transform:translateX(-50%);width:420px;border:8px solid #172331;border-radius:42px;box-shadow:0 20px 70px #14274724;background:#fff;overflow:hidden}.phone-wrap iframe{border-radius:30px}.phone-caption{position:absolute;right:calc(50% + 240px);top:50%;color:#8290a5;font-size:13px;text-align:right;line-height:2}.immersive .demo-bar{display:none}.immersive #surfaces{height:100%}#restore{position:fixed;top:12px;right:16px;z-index:999;padding:9px 15px;border:1px solid #dae4f5;background:#fff;color:#3263ab;border-radius:8px;box-shadow:0 3px 12px #15315915}@media(max-width:1150px){.demo-brand small,.demo-actions>span{display:none}.demo-bar{padding:0 10px;gap:8px}.demo-bar button{padding:9px}.demo-brand b{font-size:12px}}@media(max-width:760px){.demo-brand{display:none}.demo-bar{overflow:auto}.phone-wrap{width:min(420px,100%);top:0;bottom:0;border:0;border-radius:0}.phone-caption{display:none}}
.phone-wrap{height:min(890px,calc(100% - 48px));bottom:auto;top:50%;transform:translate(-50%,-50%)}@media(max-width:760px){.phone-wrap{height:100%;top:0;transform:translateX(-50%)}}