:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;background:#e8edf2;color:#17212b}
*{box-sizing:border-box}body{margin:0;min-width:320px}.host-header{min-height:64px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid #cbd5df;position:sticky;top:0;z-index:3}.host-header div{display:grid;gap:3px}.host-header strong{font-size:16px}.host-header span{font-size:11px;color:#5f6d7a}.host-badge{padding:6px 10px;border-radius:999px;background:#e9f3ff;color:#244e78!important;font-weight:750}.host-layout{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:calc(100vh - 64px)}.host-controls{padding:18px;background:#f8fafc;border-right:1px solid #cbd5df;overflow:auto;max-height:calc(100vh - 64px);position:sticky;top:64px}.landing-title{margin-bottom:12px}.landing-title p{margin:0 0 3px;font-weight:750}.landing-title span{font-size:12px;color:#5f6d7a}.page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:18px}.page-link{appearance:none;border:1px solid #b5c1cd;background:#fff;border-radius:7px;padding:8px 9px;color:#243746;font:650 12px/1.2 inherit;text-align:left;cursor:pointer}.page-link:hover,.page-link:focus-visible{border-color:#4c7498;outline:2px solid #a8c7e3;outline-offset:1px}.page-link[aria-current="page"]{background:#163a5f;border-color:#163a5f;color:#fff}.viewport-label{display:grid;gap:6px;margin-bottom:14px;font-size:12px;font-weight:750;color:#45515d}.host-controls select{width:100%;min-height:40px;padding:8px;border:1px solid #8795a3;border-radius:8px;background:#fff;color:#17212b}.host-controls dl{display:grid;grid-template-columns:105px minmax(0,1fr);margin:0 0 14px;font-size:11px;line-height:17px}.host-controls dt,.host-controls dd{padding:7px 0;border-bottom:1px solid #d5dde5}.host-controls dt{color:#5f6d7a}.host-controls dd{margin:0;font-weight:650;overflow-wrap:anywhere}.host-note{font-size:11px;line-height:17px;color:#5f6d7a}.stage{min-width:0;padding:18px}.frame-label{max-width:1440px;margin:0 auto 8px;display:flex;justify-content:space-between;font-size:12px;color:#45515d}.frame-scroll{width:100%;overflow:auto;padding-bottom:18px}.frame-scroll iframe{display:block;margin:0 auto;border:1px solid #8795a3;border-radius:4px;background:#fff;box-shadow:0 12px 32px rgba(7,22,36,.18);width:1440px;height:943px}.status-ok{color:#17663a}.status-error{color:#b4232c}@media(max-width:900px){.host-layout{grid-template-columns:1fr}.host-controls{position:static;max-height:none;border-right:0;border-bottom:1px solid #cbd5df}.host-header{position:static}.host-badge{display:none}.page-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){.page-list{grid-template-columns:repeat(2,minmax(0,1fr))}}