/* The artifact is the viewer. Project details and feedback stay on their pages. */
html.eight-viewing,html.eight-viewing body{overflow:hidden;overscroll-behavior:none}
#workLightbox{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#111;color:#fff;overflow:hidden;box-sizing:border-box;z-index:10000;outline:none}
#workLightbox::backdrop{background:#111}
#workLightbox [hidden]{display:none!important}
#workLightbox .viewer-close{position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:white;cursor:pointer}
#workLightbox button:focus-visible,#workLightbox a:focus-visible{outline:2px solid #8dc6ff;outline-offset:3px}
#workLightbox .viewer-close svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000)}
#workLightbox .viewer-stage{position:absolute;inset:0;display:flex;min-width:0;min-height:0;overflow:hidden}
#workLightbox[data-kind=game] .viewer-stage,#workLightbox[data-kind=pdf] .viewer-stage,#workLightbox[data-kind=text] .viewer-stage{top:calc(64px + env(safe-area-inset-top))}
#workLightbox .viewer-frame{width:100%;height:100%;border:0;display:block;background:white}
#workLightbox .viewer-video{width:100%;height:100%;object-fit:contain;background:#111}
#workLightbox .viewer-image-stage{position:relative;flex:1;min-width:0;min-height:0;overflow:auto;touch-action:none;overscroll-behavior:contain}
#workLightbox .viewer-image-size{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#workLightbox .viewer-image{width:100%;height:100%;max-width:none;object-fit:contain;user-select:none;-webkit-user-drag:none;flex:none}
#workLightbox .viewer-zoom{position:absolute;z-index:4;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:24px;background:#202020e8;border:1px solid #ffffff38}
#workLightbox .viewer-zoom button{border:0;background:transparent;color:#fff;min-width:40px;min-height:36px;padding:4px 10px;font-size:16px;cursor:pointer}
#workLightbox .viewer-zoom button[data-viewer-action=fit]{font-size:12px}
#workLightbox .viewer-zoom output{font-size:11px;min-width:38px;text-align:center;color:#ddd}
#workLightbox .viewer-text{width:100%;height:100%;box-sizing:border-box;margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#faf9f6;color:#222;padding:clamp(24px,5vw,72px) max(24px,calc((100vw - 760px)/2));font:16px/1.8 Inter,Arial,sans-serif}
#workLightbox .viewer-audio{width:min(560px,100%);box-sizing:border-box;margin:auto;padding:64px 24px;text-align:center}
#workLightbox .viewer-audio h2{font-size:clamp(20px,4vw,30px);font-weight:500;color:white;margin:24px 0}
#workLightbox .viewer-audio img{display:block;max-width:100%;max-height:45dvh;object-fit:contain;margin:auto}
#workLightbox .viewer-audio .audio-art{height:180px;background:#1d2227;border-radius:0}
#workLightbox .viewer-audio audio{display:block;width:100%;margin-top:24px}
#workLightbox .viewer-status{position:absolute;z-index:3;inset:64px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:#111;color:#ddd;text-align:center;pointer-events:none}
#workLightbox .viewer-status button,#workLightbox .viewer-status a{pointer-events:auto;color:white;background:#333;padding:12px 18px;border:1px solid #666;border-radius:4px;min-height:44px;text-decoration:none;font-size:13px}
#workLightbox .viewer-status p{font-size:14px;line-height:1.6;max-width:420px;margin:0}
#workLightbox .viewer-status.viewer-frame-notice{inset:auto 12px max(12px,env(safe-area-inset-bottom));padding:10px 14px;gap:10px;flex-direction:row;justify-content:center;background:#202020ed;border:1px solid #ffffff38;border-radius:6px;font-size:12px}
#workLightbox .viewer-status.viewer-frame-notice p{font-size:12px}
@media(prefers-reduced-motion:no-preference){#workLightbox[open]{animation:viewer-enter .12s ease-out}@keyframes viewer-enter{from{opacity:0}to{opacity:1}}}

#workLightbox .viewer-document{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;background:#303030;padding:16px;box-sizing:border-box}
#workLightbox .viewer-document-page{position:relative;width:min(100%,1200px);margin:0 auto 16px;background:#fff;box-shadow:0 2px 12px #0003}
#workLightbox .viewer-document-page canvas{display:block;width:100%;height:auto}