*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#14263c;font-family:Arial,'Microsoft YaHei',sans-serif;font-size:16px}header{background:white;border-top:5px solid #0098d6;padding:26px 4vw;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #dce5ef}header img{width:min(480px,47vw);height:auto}.project{font-size:18px;font-weight:600;letter-spacing:.04em}main{max-width:1700px;margin:auto;padding:30px 4vw}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.eyebrow{font-size:14px;color:#60728a;letter-spacing:.12em}h1{font-size:32px;margin:9px 0 0;font-weight:650}.tag{border:1px solid #bed7e6;border-radius:30px;padding:8px 15px;color:#087fb2;font-size:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;border:1px solid #dce5ef;background:white;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px #16345308}.viewer{position:relative;min-height:580px;height:calc(100vh - 290px);background:#fff}.viewer:fullscreen{height:100vh}#canvas{position:absolute;inset:0}canvas{display:block;touch-action:none}#status{position:absolute;top:45%;left:10%;right:10%;text-align:center;color:#476078;pointer-events:none}.viewbar{position:absolute;top:18px;left:18px;display:flex;gap:7px;flex-wrap:wrap}button{font:inherit;font-size:14px;cursor:pointer;border:1px solid #d8e2eb;background:#fff;color:#263b50;border-radius:6px;padding:10px 13px}button:hover{background:#eef7fd;border-color:#6eb5de}button:focus-visible{outline:3px solid #0098d6;outline-offset:2px}.hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#60728a;font-size:14px;pointer-events:none}aside{padding:27px 22px;border-left:1px solid #e4ebf3}h2{font-size:20px;margin:0 0 9px}aside p{font-size:14px;color:#718297;margin-bottom:25px}.layer{display:flex;align-items:center;gap:12px;width:100%;padding:15px 0;border:0;border-bottom:1px solid #edf1f5;border-radius:0;text-align:left;background:none}.layer i{width:17px;height:17px;border-radius:4px;box-shadow:inset 0 0 0 1px #0002}.layer span{flex:1}.layer em{font-style:normal;font-size:13px;color:#718297}.layer[aria-pressed=false]{opacity:.45}.reset{width:100%;margin-top:28px;color:#087fb2;background:#eef8ff;border-color:#c5e0f2}.note{margin-top:32px;font-size:14px;line-height:1.9}.note span{color:#718297}footer{padding:0 4vw 22px;display:flex;justify-content:space-between;gap:15px;font-size:13px;color:#718297}@media(max-width:800px){header{align-items:flex-start;flex-direction:column;padding:20px}header img{width: min(100%,440px)}.project{font-size:15px}main{padding:22px 14px}.workspace{grid-template-columns:1fr}.viewer{height:58vh;min-height:380px}aside{border-left:0;border-top:1px solid #e4ebf3;padding:20px}#layers{display:flex;flex-wrap:wrap;gap:8px}.layer{width:auto;border:1px solid #e3eaf0;border-radius:5px;padding:10px;gap:8px}.layer em{display:none}aside p{margin:8px 0 16px}.reset{margin-top:17px}.note{display:none}h1{font-size:28px}.hint{font-size:12px}.viewbar{left:10px;top:10px;gap:5px}.viewbar button{padding:8px 10px}footer{flex-direction:column;padding:0 20px 20px}}