*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#23333b;background:#fff}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:3px solid #448bab;outline-offset:4px}button:disabled{opacity:.38;cursor:default}.viewer{max-width:1440px;margin:auto;background:#fff;overflow:hidden}.top{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px 32px 24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#677f86;display:flex;gap:7px;align-items:center;margin-bottom:10px}.live-dot{width:6px;height:6px;border-radius:50%;background:#548d91}h1{font-size:25px;font-weight:400;letter-spacing:-.7px;margin:0;line-height:1.2}h1 strong{font-weight:700}.subtitle{font-size:13px;color:#69777c;margin:9px 0 0;line-height:1.5}.specs{display:flex;align-items:center;gap:0;flex-shrink:0;font-size:11px;color:#66787d}.specs>span{padding:5px 19px;border-left:1px solid #e3eaeb;white-space:nowrap}.specs b{font-size:17px;font-weight:500;color:#283d44}.specs small{font-size:10px}.stage{position:relative;min-height:370px;height:clamp(430px,58vw,610px);background:radial-gradient(ellipse at 48% 44%,#fff 0%,#f5f8f8 62%,#edf2f2 100%);overflow:hidden;border-top:1px solid #edf1f1;border-bottom:1px solid #e3e9e9}.viewport{position:absolute;inset:0;touch-action:pan-y}.viewport canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px}.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.ready .poster{visibility:hidden}.stage-top{position:absolute;top:20px;left:28px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.view-badge{font-size:11px;color:#5a7178;padding:8px 11px;border:1px solid #dce5e5;border-radius:5px;background:#ffffff99;letter-spacing:.2px}.icon-btn{font-size:25px;line-height:1;width:40px;height:40px;color:#425f69;background:#ffffffb8;border:1px solid #dce5e5;border-radius:7px;pointer-events:auto}.load-state{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px;background:#f5f8f8e8;color:#455e65}.load-state[hidden]{display:none}.spinner{height:18px;width:18px;border:2px solid #c8d6d9;border-top-color:#4a7987;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.zoom{position:absolute;right:22px;bottom:58px;display:flex;flex-direction:column;background:#ffffffda;border:1px solid #dce5e5;border-radius:7px}.zoom button{width:40px;height:39px;border:0;background:transparent;font-size:24px;font-weight:300;color:#3d5862}.zoom span{height:1px;background:#e4eaea;margin:0 9px}.hint{position:absolute;left:70px;right:70px;bottom:23px;text-align:center;color:#6e8086;font-size:12px;line-height:1.5;pointer-events:none}.hint span{margin:0 8px;color:#adbdc1}.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid #ecf0f1}.views,.actions{display:flex;gap:5px;align-items:center}.toolbar button{border:1px solid transparent;background:transparent;color:#65777e;font-size:12px;min-height:40px;padding:10px 14px;border-radius:6px;white-space:nowrap}.toolbar button:hover,.zoom button:hover,.icon-btn:hover{background:#e9f0f1;color:#233f4b}.toolbar button.active,.toolbar button[aria-pressed="true"]{background:#e8f0f2;color:#254c5b;border-color:#d6e4e8}.actions button span{font-size:17px;margin-right:5px}.actions #reset{font-size:23px;padding:6px 11px;border-left:1px solid #edf1f1}.measure-labels{position:absolute;inset:0;pointer-events:none}.measure-labels span{position:absolute;white-space:nowrap;background:#ffffffec;border:1px solid #bad1d8;color:#345b6b;font-size:12px;font-weight:700;padding:6px 8px;border-radius:4px;transform:translate(-50%,-50%)}footer{display:flex;gap:9px;padding:15px 30px 18px;color:#829094;align-items:flex-start}footer p{font-size:10px;line-height:1.6;margin:0;max-width:760px}.info-icon{font-size:10px;border:1px solid #bcc8cb;border-radius:50%;width:14px;height:14px;text-align:center;flex-shrink:0;margin-top:1px}.noscript{padding:16px;font-size:14px}.viewer:fullscreen{max-width:none;height:100vh;display:flex;flex-direction:column}.viewer:fullscreen .stage{flex:1;min-height:0;height:auto}.error .load-state{inset:auto 16px 16px;padding:12px;border-radius:5px;background:#fff9;line-height:1.5}.error .hint{display:none}
@media(max-width:720px){.top{padding:20px;flex-direction:column;align-items:flex-start;gap:14px}h1{font-size:23px}.specs>span{padding:0 17px}.specs>span:first-child{border:0;padding-left:0}.stage{height:430px}.stage-top{left:17px;right:16px;top:16px}.zoom{right:16px;bottom:60px}.toolbar{padding:12px 14px;gap:8px}.views,.actions{justify-content:center;flex:1}.toolbar button{padding:9px 12px}.hint{left:36px;right:36px;font-size:11px}footer{padding:13px 20px 17px}.subtitle{font-size:12px}}
@media(max-width:400px){.top{padding:18px 16px}.stage{height:390px}h1{font-size:21px}.toolbar{padding:10px 8px}.toolbar button{font-size:11px;padding:9px 10px}.actions #reset{padding:6px 10px}footer{padding:12px 16px}.specs b{font-size:16px}.measure-labels span{font-size:10px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}


.embedded .viewer{height:100dvh;display:flex;flex-direction:column}.embedded .top,.embedded .toolbar,.embedded footer{flex:none}.embedded .stage{flex:1;min-height:220px;height:auto}.embedded .top{padding-top:18px;padding-bottom:16px}.embedded .toolbar{padding-top:10px;padding-bottom:10px}