:root{color-scheme:dark;font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:#e3f3ff;background:#030c19}
*{box-sizing:border-box}body{margin:0;min-width:720px;background:radial-gradient(ellipse at 45% 0,rgba(0,139,214,.15),transparent 65%),linear-gradient(#169bca08 1px,transparent 1px),linear-gradient(90deg,#169bca08 1px,transparent 1px),#030c19;background-size:auto,40px 40px,40px 40px,auto}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #74eaff;outline-offset:4px}[hidden]{display:none!important}
.masthead{height:88px;margin:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #1d4961}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #2b8eb8;color:#69e1ff;font-size:27px;box-shadow:inset 0 0 18px #0088ff20;transform:skew(-8deg)}h1{font-size:20px;letter-spacing:2px;margin:0}.brand p{font-size:9px;letter-spacing:2px;color:#618ba5;margin:6px 0 0}.view-label{font-size:15px;white-space:nowrap}.view-label span{margin-left:12px;font-size:10px;color:#5c91b0;letter-spacing:2px}.toolbar{display:flex;align-items:center;gap:10px}.toolbar time{font:12px monospace;color:#89a7bd;margin-right:8px}.toolbar button{height:34px;padding:0 14px;border:1px solid #295b76;background:#0b263b;color:#b7eaff;font-size:12px;border-radius:3px}.toolbar button:hover{background:#134462;border-color:#55cce9}.fullscreen-control{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.technology-brand{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;color:#527b93;line-height:1;white-space:nowrap}.technology-brand::before{content:'';height:1px;flex:1;min-width:20px;background:linear-gradient(90deg,transparent,#2c728b)}.technology-brand i{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#43d5ec;box-shadow:0 0 8px #43d5ec}.technology-brand b{font-size:9px;font-weight:600;letter-spacing:2px;color:#7eb6c9}.technology-brand em{font:7px/1 monospace;font-style:normal;letter-spacing:.6px;color:#41677d}
.overview{height:calc(100dvh - 88px);min-height:570px;padding:10px 12px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.screen-card{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #21516b;background:#04111f;box-shadow:0 8px 24px #0003}.card-head{height:32px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(110deg,#103a53,#081725 75%);border-bottom:1px solid #1b4056}.index{font:12px monospace;color:#55cfee;border-right:1px solid #31637a;padding-right:10px}.card-head h2{font-size:14px;font-weight:500;letter-spacing:1px;margin:0}.tag{margin-left:auto;font-size:9px;letter-spacing:1px;color:#6b96aa}.stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#020913}.stage iframe{position:absolute;border:0;transform-origin:0 0;visibility:hidden}.stage iframe.ready{visibility:visible}.preview-action{position:absolute;inset:0;width:100%;border:0;background:transparent;color:white;z-index:2}.preview-action span{position:absolute;right:12px;bottom:12px;padding:7px 10px;font-size:11px;border:1px solid #3e91b4;background:#08273bed;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}.preview-action:hover{box-shadow:inset 0 0 0 1px #62dfff}.preview-action:hover span,.preview-action:focus-visible span{opacity:1;transform:none}.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#729bb3}.screen-card.selected{position:fixed;inset:104px 24px 20px;z-index:10;box-shadow:0 0 0 24px #030c19}.screen-card.selected .card-head{height:36px}.screen-card.selected .preview-action{display:none}.screen-card.selected .stage iframe{transform:none!important;left:0!important;top:0!important}.detail-mode .screen-card:not(.selected),.detail-mode .guide{visibility:hidden}
.guide{position:relative;border:1px solid #163b52;background:linear-gradient(145deg,#0a2237,#040e1c);padding:26px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.guide::after{content:'';position:absolute;right:-50px;bottom:-90px;width:250px;height:250px;border:1px solid #25608055;border-radius:50%;box-shadow:0 0 0 30px #154b6a18,0 0 0 60px #154b6a10;pointer-events:none}.guide .eyebrow{font:10px monospace;color:#49bdde;letter-spacing:3px}.guide h2{font-size:25px;font-weight:500;letter-spacing:3px;margin:14px 0}.guide p{font-size:12px;color:#7c9bb1;line-height:1.9;margin:0;max-width:300px}.guide .legend{margin-top:25px;border-top:1px solid #24445b;padding-top:16px;font-size:11px;color:#9fc2d5;display:flex;gap:18px}.guide .legend span::before{content:'↗';color:#5dd9f2;margin-right:6px}
@media(min-width:1800px){.masthead{height:96px}.overview{height:calc(100dvh - 96px)}.screen-card.selected{top:112px}.card-head{height:36px}.card-head h2{font-size:16px}}
@media(max-width:1050px){.overview{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,260px);height:auto;min-height:calc(100dvh - 88px)}.toolbar time,.view-label{display:none}.masthead{gap:12px}.guide h2{font-size:22px}.screen-card.selected{bottom:16px}.detail-mode{overflow:hidden}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Expanded view gives the business screen the full area below a compact toolbar. */
.detail-mode .masthead{height:64px;margin:0 12px}.detail-mode .brand p{display:none}.detail-mode .brand-mark{width:32px;height:32px;font-size:21px}.detail-mode h1{font-size:16px}.screen-card.selected{inset:76px 12px 12px;box-shadow:0 0 0 12px #030c19}.screen-card.selected .card-head{display:none}.detail-mode .screen-card:not(.selected) iframe{visibility:hidden!important}