:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#2d4848;background:#e2ece6;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid #397b9a;outline-offset:3px}.viewer{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate;background:radial-gradient(ellipse at 50% 38%,#f3f7f1,#dee9e3 85%)}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}#canvas-host canvas:focus-visible{outline:3px solid #397b9a;outline-offset:-3px}#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:35px 2% 60px;pointer-events:none}#poster.loaded{display:none}.controls{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:flex;gap:5px;z-index:3}.controls button,#retry{display:grid;place-items:center;width:40px;height:40px;padding:0;background:#fcfdf9da;border:1px solid #ffffffdd;border-radius:8px;box-shadow:0 2px 7px #28474008;backdrop-filter:blur(8px)}.controls button:hover,#retry:hover{background:#fff}.controls button[aria-pressed=false]{opacity:.55}.controls svg,#retry svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.legend{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;background:#fcfdf7d9;border:1px solid #ffffffcf;border-radius:8px;padding:12px 18px;font-size:11px;letter-spacing:.01em;white-space:nowrap;backdrop-filter:blur(8px);pointer-events:none}.legend span{display:flex;align-items:center;gap:8px}.legend i{width:22px;height:3px;border-radius:3px}.blue{background:#377fa3}.orange{background:#dca24f}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:55px;height:55px;padding:8px;border-radius:50%;background:#fbfdf8dd;box-shadow:0 2px 20px #18373519}#loading svg{width:100%;height:100%;fill:none;stroke-width:2.6;transform:rotate(-90deg)}.track{stroke:#d8e2d7}#load-progress{stroke:#487d6a;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:108;transition:stroke-dashoffset .2s}#retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.viewer:fullscreen{width:100vw;height:100dvh}@media(max-width:600px){.controls{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));gap:4px}.controls button{width:38px;height:38px}.legend{bottom:max(16px,env(safe-area-inset-bottom));font-size:10px;padding:11px 16px;gap:22px}#poster{padding:55px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.legend{flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 28px);gap:12px 20px}.legend i.tunnel{height:0;background:none;border-top:3px dashed #377fa3;border-radius:0}.legend i.protected{height:0;background:none;border-top:2px dashed #194531;border-radius:0}@media(max-width:600px){.legend{max-width:342px;width:calc(100% - 28px);gap:10px 20px;padding:11px 14px}.legend span{justify-content:flex-start;width:calc(50% - 10px)}}