:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#24382e;background:#f5f3ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:4px}header{max-width:1500px;margin:auto;padding:25px 40px;border-bottom:1px solid #d9ded4;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;font-size:21px;font-weight:650}.brand span{font-size:10px;display:block;margin-top:6px;color:#68766b}.back{font-size:13px;text-decoration:none}main{max-width:1500px;margin:auto;padding:32px 40px 20px}.intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{color:#6e7b6b;font-size:11px;margin:0 0 10px}.intro h1{font-size:clamp(24px,3vw,37px);font-weight:550;margin:0;text-wrap:balance}.intro>p{color:#758073;font-size:12px;line-height:1.9;margin:0}nav{display:flex;gap:8px;overflow:auto;padding:0 0 18px;scrollbar-width:thin}nav button{white-space:nowrap;flex-shrink:0;border:1px solid #d6dbcf;background:transparent;border-radius:24px;padding:10px 19px;font-size:13px;color:#4b5f50}nav button[aria-pressed=true]{background:#304f3e;border-color:#304f3e;color:white}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:32px}.visual{min-width:0}.toolbar{display:flex;gap:4px;background:#e9ece3;padding:5px;width:fit-content;border-radius:8px;margin-bottom:12px}.toolbar button{background:transparent;border:0;color:#667462;border-radius:5px;padding:9px 14px;font-size:12px}.toolbar button[aria-pressed=true]{background:#fff;color:#254732;box-shadow:0 1px 3px #263b2414}#stage{position:relative;background:#e5e6df;border-radius:8px;overflow:hidden;aspect-ratio:4/3}#photo{width:100%;height:100%;object-fit:contain;display:block}#panorama{width:100%;height:100%;touch-action:none;cursor:grab}#panorama:active{cursor:grabbing}#panorama canvas{width:100%;height:100%;display:block}.image-label{position:absolute;left:15px;bottom:14px;background:#ffffffe6;border-radius:4px;padding:6px 9px;font-size:10px;color:#64705f;pointer-events:none}#status{position:absolute;top:15px;left:15px;background:#fff;padding:10px;border-radius:6px;font-size:12px}.below{min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:10px}.below a{font-size:12px;white-space:nowrap}#angles{display:flex;gap:6px}#angles button,#pano-controls button{border:1px solid #d2d8cb;background:transparent;color:#425b47;padding:7px 10px;border-radius:5px;font-size:11px}#angles button[aria-pressed=true]{background:#e0e7da;border-color:#748b6c}aside{padding-top:20px}aside h2{font-size:26px;font-weight:550;margin:0 0 13px}.lead{font-size:16px;line-height:1.65;margin:0 0 24px;color:#4c624e}aside ul{padding-left:17px;color:#546550;line-height:1.9;font-size:13px}aside li{margin-bottom:10px}.reference{border-top:1px solid #d6dccf;margin-top:27px;padding-top:18px}.reference span{display:block;font-size:10px;color:#869080;margin-bottom:10px}.reference a{font-size:13px}.reference p,.hint{font-size:11px;line-height:1.8;color:#7d8875}.hint{margin-top:24px;padding:12px;background:#e9ede2;border-radius:5px}details{margin-top:27px;border-top:1px solid #d8ded0;padding-top:20px;color:#6c7965;font-size:12px;line-height:1.9}summary{cursor:pointer}details p{max-width:950px}footer{margin-top:30px;padding-top:18px;border-top:1px solid #d8ded0;display:flex;justify-content:space-between;color:#89927e;font-size:11px;padding-bottom:env(safe-area-inset-bottom)}[hidden]{display:none!important}:focus-visible{outline:3px solid #9d7934;outline-offset:4px}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 215px;gap:20px}header,main{padding-left:22px;padding-right:22px}}@media(max-width:680px){header{padding:17px 16px}.brand{font-size:18px}.back{font-size:11px}main{padding:23px 16px}.intro{display:block;margin-bottom:21px}.intro>p{margin-top:14px;font-size:11px}.intro>p br{display:none}.workspace{display:block}nav{margin-right:-16px}nav button{padding:9px 14px;font-size:12px}.toolbar{width:100%}.toolbar button{flex:1}#stage{aspect-ratio:4/3}#stage:has(#panorama:not([hidden])){aspect-ratio:3/4}aside{padding-top:20px}aside h2{font-size:24px}.lead{margin-bottom:13px}aside ul{font-size:13px}.reference{margin-top:18px}.below{flex-wrap:wrap;padding-top:10px}footer{gap:20px;font-size:10px}.image-label{left:9px;bottom:9px;font-size:9px}}
