/* Full-viewport media canvas. Controls overlay the image; no reserved bars. */
.otto-viewer[hidden],.otto-viewer [hidden]{display:none!important}
.otto-viewer{position:fixed;inset:0;z-index:2147483640;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;background:#080d14;color:#fff;isolation:isolate;overscroll-behavior:contain;font:16px/1.4 DIN,Arial,sans-serif;--og-edge:clamp(16px,2.5vw,40px)}
.otto-viewer:fullscreen{width:100vw;height:100vh;height:100dvh;inset:0;background:#080d14}
.otto-viewer:-webkit-full-screen{width:100vw;height:100vh;inset:0;background:#080d14}
.otto-viewer::backdrop{background:#080d14}
.otto-viewer button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.otto-viewer button:focus-visible{outline:2px solid white;outline-offset:4px}
.og-stage,.og-media{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.og-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.og-media img,.og-media video{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;object-fit:contain;transform-origin:center center;background:transparent}
.og-media img{will-change:transform;user-select:none;-webkit-user-drag:none}
.og-media video{outline-offset:-5px}
.otto-viewer.is-cover .og-media img{object-fit:cover}
.otto-viewer.is-zoomed .og-stage{cursor:grab;touch-action:none}
.otto-viewer.is-dragging .og-stage{cursor:grabbing}
.og-media.is-entering{animation:og-enter .38s cubic-bezier(.2,.75,.25,1) both}
.og-top{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:max(var(--og-edge),env(safe-area-inset-top)) max(var(--og-edge),env(safe-area-inset-right)) 45px max(var(--og-edge),env(safe-area-inset-left));background:linear-gradient(180deg,#080d1499,transparent);pointer-events:none}
.og-top>*{pointer-events:auto}
.og-info{max-width:min(65%,660px);text-shadow:0 1px 16px #0008}
.og-kicker{font-size:10px;letter-spacing:.2em;color:#e4e7ed;display:block;margin-bottom:10px}
.og-info p{font-size:clamp(16px,1.5vw,23px);line-height:1.2;margin:0 0 10px}
#og-count{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.15em;color:#e4e7ed}
.og-close,.og-arrow,.og-dock,.og-show{border:1px solid #ffffff38;background:#14203380;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 3px 20px #0001}
.og-close{display:flex;align-items:center;gap:22px;padding:11px 18px;border-radius:50px;min-height:46px;white-space:nowrap;font-size:14px!important}
.og-close span{font-size:27px;line-height:1}
.og-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:64px;border-radius:30px;display:grid;place-items:center;padding:0}
.og-arrow span{font:44px/1 Georgia,serif;transform:translateY(-2px)}
#og-prev{left:max(var(--og-edge),env(safe-area-inset-left))}#og-next{right:max(var(--og-edge),env(safe-area-inset-right))}
.og-bottom{position:absolute;inset:auto 0 0;display:flex;align-items:center;flex-direction:column;gap:12px;padding:35px max(16px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(0deg,#080d1499,transparent);pointer-events:none}
.og-bottom>*{pointer-events:auto}
.og-dock{display:flex;align-items:center;max-width:100%;gap:3px;padding:5px;border-radius:50px;overflow-x:auto;scrollbar-width:none}
.og-dock::-webkit-scrollbar{display:none}
.og-dock button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 14px;white-space:nowrap;font-size:13px;background:transparent;border:0;border-radius:40px;flex-shrink:0}
.og-dock button[aria-pressed="true"],.og-dock button[aria-expanded="true"]{background:#ffffff20}
.og-dock button:hover,.og-close:hover,.og-arrow:hover{background:#ffffff25}
.og-dock button span[aria-hidden]{font-size:21px;line-height:1}
.og-hint{margin:0;font-size:11px;letter-spacing:.04em;color:#e4e7ed;text-shadow:0 1px 8px #0008}
.og-thumbs{display:flex;gap:7px;max-width:min(800px,100%);padding:8px;overflow-x:auto;border-radius:14px;scrollbar-width:thin;background:#0d1526a6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.og-thumbs button{position:relative;width:72px;height:50px;flex:0 0 72px;border:1px solid transparent;border-radius:6px;overflow:hidden;background:#25354b;padding:0;opacity:.58;transition:opacity .2s,border-color .2s}
.og-thumbs button img{width:100%;height:100%;object-fit:cover}
.og-thumbs button[aria-current="true"]{opacity:1;border-color:#fff;box-shadow:0 0 0 2px #fff3}
.og-thumbs button:hover{opacity:1}
.og-show{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border-radius:30px;font-size:12px!important;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 17px;opacity:0;pointer-events:none;transition:opacity .25s}
.og-show span{font-size:26px;line-height:1}
.og-controls{transition:opacity .3s}
.otto-viewer.controls-hidden .og-controls{opacity:0;pointer-events:none}
.otto-viewer.controls-hidden .og-controls *{pointer-events:none}
.otto-viewer.controls-hidden .og-show{opacity:.85;pointer-events:auto}
.otto-viewer.controls-hidden .og-controls:focus-within{opacity:1;pointer-events:auto}
.otto-viewer.controls-hidden .og-controls:focus-within *{pointer-events:auto}
.og-notice{position:absolute;left:50%;top:max(90px,calc(env(safe-area-inset-top) + 70px));transform:translateX(-50%);width:max-content;max-width:min(90%,600px);margin:0;padding:12px 17px;border:1px solid #ffffff30;border-radius:14px;background:#142033ed;backdrop-filter:blur(14px);font-size:13px;text-align:center;pointer-events:none;z-index:3}
.og-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-size:14px;color:#cbd3df;pointer-events:none;text-align:center;padding:14px 20px;border-radius:12px;background:#080d14a8;max-width:80%}
.otto-viewer.is-video .og-bottom{bottom:48px;padding-bottom:8px;background:none}
.otto-viewer.is-video .og-hint{display:none}
.otto-viewer.is-video.controls-hidden .og-show{bottom:max(64px,calc(env(safe-area-inset-bottom) + 50px))}
@keyframes og-enter{from{opacity:.3;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@media(max-width:600px){.otto-viewer{--og-edge:14px}.og-top{gap:12px}.og-kicker{font-size:9px;letter-spacing:.13em;margin-bottom:7px}.og-info p{font-size:15px;margin-bottom:8px}.og-close{gap:10px;padding:8px 12px;min-height:44px;font-size:12px!important}.og-info{max-width:calc(100% - 100px)}.og-arrow{width:38px;height:51px;background:#14203355}.og-arrow span{font-size:35px}.og-dock{width:100%;border-radius:22px;justify-content:flex-start}.og-dock button{font-size:12px;padding:9px 12px}.og-dock button span[aria-hidden]{font-size:19px}.og-bottom{gap:10px;padding-left:12px;padding-right:12px}.og-hint{font-size:10px}.og-thumbs button{width:60px;flex-basis:60px;height:43px}.og-notice{font-size:12px;top:105px}}
@media(max-height:480px){.og-kicker,.og-hint{display:none}.og-top{padding-top:12px}.og-info p{font-size:14px;margin-bottom:5px}.og-bottom{padding-bottom:8px;gap:6px}.og-dock button{min-height:35px;padding:7px 12px}.og-thumbs button{height:36px;width:52px;flex-basis:52px}.og-thumbs{padding:5px}}
@media(max-width:600px){#og-fullscreen{order:-1}.og-dock{scroll-snap-type:x proximity}.og-dock button{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){.otto-viewer *{animation:none!important;transition:none!important}}