:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#282c35;background:#f3f5f6;font-synthesis:none;--line:#e0e5e8;--accent:#137f88}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #199eaa;outline-offset:4px}
header{min-height:82px;padding:18px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:white}.brand{display:flex;align-items:center;gap:18px}.brand strong{font-size:24px;letter-spacing:2px}.brand>span{font-size:12px;letter-spacing:1.5px;color:#63717a}#status{font-size:13px;color:#627079}
main{max-width:1780px;margin:24px auto 0;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}.stage{position:relative;min-height:clamp(600px,calc(100vh - 220px),960px);background:#f8fafb;border:1px solid var(--line);border-radius:16px;overflow:hidden}.stage-heading{position:absolute;top:26px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none;z-index:1}.eyebrow{font-size:12px;letter-spacing:1.4px;color:#687982}h1{font-size:23px;font-weight:600;margin:10px 0}#diagram-count{font-size:13px;color:#687982;white-space:nowrap}#viewport{position:absolute;inset:108px 0 62px;touch-action:none}canvas{display:block;width:100%;height:100%}.stage-bottom{position:absolute;bottom:18px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:#65727b}.stage-bottom button{border:1px solid #d9e1e4;background:#fff;border-radius:7px;padding:9px 12px;font-size:14px;color:#485b65}
.panel{align-self:start;background:white;border:1px solid var(--line);border-radius:16px;padding:28px 24px}h2{font-size:22px;font-weight:600;margin:0 0 12px}.intro{font-size:16px;color:#64717b;line-height:1.8;margin:0 0 25px}fieldset{margin:0;padding:0;border:0;min-width:0}fieldset section{margin-bottom:24px}h3{font-size:14px;font-weight:600;margin:0 0 13px}.diagram-tabs{display:grid;gap:9px}.diagram-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);background:#fafbfc;border-radius:8px;padding:13px 12px;font-size:14px;color:#4d5a65}.diagram-tabs small{font-size:12px;color:#73818a}.diagram-tabs button[aria-pressed=true]{background:#edf8f8;border-color:#54aab0;color:#116a73}.views{display:flex;gap:8px}.views button{flex:1;border:1px solid var(--line);border-radius:8px;padding:11px;background:#fafbfc;color:#586873;font-size:14px}.views button[aria-pressed=true]{background:#edf8f8;border-color:#54aab0;color:#116a73}.reset{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:white;color:#596d76;font-size:14px}.download{display:flex;justify-content:space-between;gap:12px;padding:15px 13px;margin-top:13px;background:#177f89;color:white;border-radius:8px;font-size:14px}.detail-note{font-size:13px;line-height:1.9;color:#687781;margin:22px 0 0;border-top:1px solid var(--line);padding-top:19px}footer{display:flex;justify-content:space-between;gap:20px;max-width:1780px;padding:0 32px;margin:24px auto;font-size:12px;color:#687781}footer span span{margin:0 7px}
#loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#f8fafb;font-size:14px;color:#586b75}#loading[hidden]{display:none}#loading strong{font-size:16px}.spinner{width:30px;height:30px;border:2px solid #d7e9ec;border-top-color:#199eaa;border-radius:50%;animation:spin 1s linear infinite}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 270px;padding:0 18px;gap:16px}.panel{padding:24px 18px}#diagram-count{display:none}.stage-heading{left:22px;right:22px}.stage-bottom{left:20px;right:20px;flex-wrap:wrap;font-size:12px}}
@media(max-width:800px){header{padding:18px 20px}.brand>span{display:none}main{grid-template-columns:1fr;padding:0 14px;margin-top:16px}.stage{min-height:550px}.stage-heading{top:22px}h1{font-size:21px}#viewport{inset:102px 0 78px}.stage-bottom{bottom:16px}.panel{padding:26px}.diagram-tabs{grid-template-columns:1fr 1fr}.diagram-tabs button{flex-direction:column;align-items:flex-start}.detail-note{margin-top:20px}footer{padding:0 20px;flex-wrap:wrap;line-height:1.7}.intro{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}