:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#223b47;background:#fff;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1180px;margin:0 auto;padding:15px 15px 10px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.kicker{font-size:11px;color:#67808a;margin:0 0 3px}h1{font-size:21px;line-height:1.4;margin:0;font-weight:650}nav{display:flex;flex-wrap:wrap;gap:5px}button{font:inherit;font-size:13px;line-height:1.3;border:1px solid #d1dde2;color:#375563;background:#fff;border-radius:5px;padding:8px 12px;cursor:pointer}button:hover{background:#f0f5f7}button[aria-pressed=true]{background:#e7eff3;border-color:#678d9e;color:#173e52}button:focus-visible,.viewport:focus-visible{outline:3px solid #1686ac;outline-offset:3px}.mode-note{color:#5b727b;font-size:12px;line-height:1.7;margin:0 0 14px}.models{position:relative}#canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}.grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;pointer-events:none}.card{min-width:0;position:relative;padding:0;border:1px solid #dce5e8;border-radius:7px;overflow:hidden;pointer-events:none}.card-head{background:#fff;padding:13px 15px 10px;min-height:71px}.card h2{font-size:18px;font-weight:650;margin:0 0 5px;line-height:1.4}.dimensions{font-size:11px;color:#697e86;margin:0;line-height:1.6}.viewport{height:270px;width:100%;cursor:grab;pointer-events:auto;touch-action:none;background:transparent}.viewport:active{cursor:grabbing}.caption{padding:10px 15px 12px;background:#fff;min-height:84px}.caption p{font-size:12px;line-height:1.7;margin:0;color:#415e69}.caption .layout-note{font-size:11px;color:#7b8c93;margin-top:4px}.mode-badge{float:right;font-size:10px;padding:2px 6px;margin-top:2px;color:#607e8c;border:1px solid #dce6ea;border-radius:3px;background:#f7f9fa}footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#7b8a90;font-size:10px;line-height:1.6}footer p{margin:0}footer p:last-child{white-space:nowrap}#error{padding:16px;color:#8a402e;background:#fff4eb;font-size:13px}@media(max-width:760px){main{padding:10px}header{align-items:flex-start;gap:9px}h1{font-size:18px}nav{max-width:240px;justify-content:flex-end}button{font-size:12px;padding:7px 9px}.grid{gap:17px 16px}.card-head{padding:11px 11px 8px;min-height:76px}.card h2{font-size:16px}.dimensions{font-size:10px}.viewport{height:245px}.caption{min-height:103px;padding:9px 11px 10px}.caption p{font-size:11px}.caption .layout-note{font-size:10px}.mode-badge{font-size:9px}footer{display:block}footer p:last-child{margin-top:4px}}@media(max-width:500px){header{display:block}nav{max-width:none;justify-content:flex-start;margin-top:10px}.grid{grid-template-columns:1fr}.viewport{height:270px}.card-head{min-height:0}.caption{min-height:0}.mode-note{font-size:11px}}