*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#071424;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{margin:0;background:#071424}
main{max-width:1920px;margin:0 auto}
section{position:relative;line-height:0;scroll-margin-top:10px}
picture,picture img{display:block;width:100%;height:auto}
picture{aspect-ratio:16/9}
picture img{aspect-ratio:16/9;object-fit:contain}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;background:#ff761b;transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
.controls{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:3px;background:#071424;padding:5px;border:1px solid #64dcf4;border-radius:10px;z-index:20;box-shadow:0 3px 8px #0005}
.controls a,.controls button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px 13px;font:700 14px/1 Arial,Helvetica,sans-serif;color:#fff;text-decoration:none;border:0;border-radius:6px;background:transparent;cursor:pointer}
.controls a[aria-current=page]{background:#ff761b;color:#071424}
.controls button{border-left:1px solid #345676;border-radius:0;margin-left:4px;padding-left:16px}
a:focus-visible,button:focus-visible{outline:3px solid #64dcf4;outline-offset:3px}
.controls a:hover,.controls button:hover{background:#164a80}
.controls a[aria-current=page]:hover{background:#ff8e46}
dialog{position:fixed;inset:auto 18px 86px auto;max-height:75dvh;width:min(360px,calc(100vw - 36px));margin:0;padding:24px;background:#071424;color:#fff;border:1px solid #64dcf4;border-radius:12px;z-index:40;overflow:auto;font-size:16px;line-height:1.5}
dialog::backdrop{background:#020917c9}
dialog h2{font-size:24px;margin:0 48px 18px 0}
dialog .close{position:absolute;top:12px;right:12px;min-width:44px;min-height:44px;background:#14304b;color:#fff;border:0;border-radius:6px;font-size:24px;cursor:pointer}
dialog nav{display:grid;gap:4px}
dialog nav a{display:block;color:#e8f4fc;text-decoration:none;padding:12px 8px;min-height:44px;border-bottom:1px solid #264563}
dialog nav a:hover{background:#164a80}
.hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);cursor:pointer;outline:1px solid transparent;border-radius:8px}
.mobile-hotspot{display:none}
.hotspot:hover{outline-color:#64dcf4;background:#64dcf411}
.hotspot:focus-visible{outline:3px solid #64dcf4;outline-offset:3px}
.skip-link{position:fixed;top:8px;left:8px;z-index:50;padding:12px;background:#ff761b;color:#071424;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
@media(max-width:1023px),(hover:none) and (max-width:1366px){
main{max-width:640px}picture,picture img{aspect-ratio:9/16}
.hotspot{display:none}
.mobile-hotspot{display:block;min-height:44px}
.controls{bottom:max(10px,env(safe-area-inset-bottom));right:10px;padding:4px}
.controls a,.controls button{font-size:14px;padding:10px 12px}
section{scroll-margin-top:3px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.controls,.progress,dialog,.hotspot,.skip-link{display:none}section{break-inside:avoid}}