*{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:3px}button:disabled{opacity:.4;cursor:default}.viewer{max-width:1440px;margin:auto;background:#fff;overflow:hidden}.top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#677f86;margin-bottom:10px}h1{font-size:25px;font-weight:400;letter-spacing:-.6px;margin:0;line-height:1.3}h1 strong{font-weight:700}.subtitle{font-size:13px;color:#69777c;margin:8px 0 0;line-height:1.5}.source-badge{padding:10px 14px;background:#f1f6f8;border:1px solid #dce7ec;border-radius:10px;color:#69848e;font-size:20px}.stage{position:relative;min-height:320px;height:clamp(400px,56vw,610px);background:radial-gradient(ellipse at 48% 44%,#fff 0%,#f4f7f8 62%,#eaf0f3 100%);overflow:hidden;border-block:1px solid #e5ebee}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%;touch-action:none;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:18px;left:24px;right:20px;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:#ffffffa8}.stage-top button{font-size:25px;line-height:1;width:42px;height:42px;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;padding:20px;font-size:13px;background:#f5f8f8e8;color:#455e65;text-align:center}.load-state[hidden]{display:none}.brand-mark{position:absolute;right:22px;bottom:58px;pointer-events:none;text-align:right;color:#31566aa6;font-size:13px;font-weight:700;letter-spacing:.7px;user-select:none}.brand-mark small{display:block;font-size:10px;letter-spacing:2px;line-height:1.9;font-weight:400}.zoom{position:absolute;left:22px;bottom:52px;display:flex;flex-direction:column;background:#ffffffda;border:1px solid #dce5e5;border-radius:7px}.zoom button{width:42px;height:41px;border:0;background:transparent;font-size:24px;color:#3d5862}.zoom button+button{border-top:1px solid #e4eaea}.hint{position:absolute;left:24px;right:24px;bottom:20px;text-align:center;color:#6e8086;font-size:11px;line-height:1.5;pointer-events:none}.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 24px;border-bottom:1px solid #ecf0f1}.views,.actions{display:flex;gap:4px;align-items:center}.toolbar button{border:1px solid transparent;background:transparent;color:#65777e;font-size:12px;min-height:42px;padding:10px 13px;border-radius:6px;white-space:nowrap}.toolbar button:hover,.zoom button:hover,.stage-top button:hover{background:#e9f0f1;color:#233f4b}.toolbar button[aria-pressed=true]{background:#e8f0f2;color:#254c5b;border-color:#d6e4e8}#reset{font-size:23px;padding:6px 12px}footer{display:flex;justify-content:space-between;gap:18px;padding:14px 28px;color:#71858d;font-size:10px;line-height:1.6}footer p{margin:0;max-width:680px}footer a{color:#507486;text-underline-offset:2px}footer>span{flex:none;text-align:right;font-size:9px;letter-spacing:.5px}.noscript{padding:16px;font-size:14px}.viewer:fullscreen{max-width:none;height:100dvh;display:flex;flex-direction:column}.viewer:fullscreen .stage{flex:1;min-height:180px;height:auto}.error .load-state{inset:auto 14px 10px;padding:12px;border-radius:5px;background:#ffffffec;line-height:1.5}.error .hint{display:none}.embedded .viewer{height:100dvh;display:flex;flex-direction:column}.embedded .top,.embedded .toolbar,.embedded footer{flex:none}.embedded .stage{flex:1;min-height:190px;height:auto}.embedded .top{padding-top:17px;padding-bottom:15px}
@media(max-width:720px){.top{padding:18px 20px;gap:10px}h1{font-size:22px}.source-badge{display:none}.stage{height:420px}.stage-top{left:15px;right:14px;top:14px}.zoom{left:14px;bottom:62px}.brand-mark{right:15px;bottom:64px;font-size:11px}.brand-mark small{font-size:9px}.toolbar{padding:10px 12px;gap:5px}.views,.actions{justify-content:center;flex:1}.toolbar button{padding:9px 11px}.hint{left:20px;right:20px;font-size:10px}footer{padding:12px 18px}footer>span{display:none}.subtitle{font-size:12px}.eyebrow{font-size:9px;letter-spacing:1.3px}}
@media(max-width:400px){.top{padding:16px}.stage{height:370px}h1{font-size:20px}.toolbar{padding:8px}.toolbar button{font-size:11px;padding:9px 10px}footer{padding:10px 15px;font-size:9px}.brand-mark{font-size:10px;letter-spacing:.2px}.view-badge{font-size:10px;padding:7px 8px}.hint{font-size:9px}}
@media(max-height:560px) and (min-width:600px){.embedded .top{padding:8px 20px}.embedded .eyebrow,.embedded .subtitle,.embedded footer{display:none}.embedded .toolbar{padding:5px 14px}}