@import url("https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap");
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:"ABeeZee",Arial,sans-serif}
.bay{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000}
.bay-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.process-hotspot{position:absolute;left:var(--x);top:var(--y);z-index:12;width:clamp(31px,2.7vw,43px);aspect-ratio:1;display:grid;place-items:center;border:2px solid #dbeeff;border-radius:50%;color:#fff;background:linear-gradient(145deg,#356f96,#214d70 60%,#17364f);box-shadow:0 3px 8px rgba(0,0,0,.76),0 0 10px rgba(92,180,255,.32);font:700 clamp(.72rem,1vw,.9rem)/1 "ABeeZee",Arial,sans-serif;cursor:pointer;transform:translate(-50%,-50%);transition:transform .18s ease,box-shadow .18s ease}
.process-hotspot:hover,.process-hotspot:focus-visible{z-index:13;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.82),0 0 0 3px rgba(115,194,255,.30),0 0 16px rgba(115,194,255,.62)}
.hotspot-label{position:absolute;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:260px;padding:7px 10px;border-radius:7px;color:#fff;background:rgba(8,20,31,.95);border:1px solid #8dcfff;box-shadow:0 4px 12px rgba(0,0,0,.45);font:400 .78rem/1.25 "ABeeZee",Arial,sans-serif;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,5px);transition:.18s}
.process-hotspot:hover .hotspot-label,.process-hotspot:focus-visible .hotspot-label{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tooltip-below .hotspot-label{bottom:auto;top:calc(100% + 8px)}
.resource-layer{position:fixed;inset:0;z-index:30;display:grid;place-items:center;visibility:hidden;pointer-events:none}
.resource-layer.open{visibility:visible;pointer-events:auto}
.resource-backdrop{position:absolute;inset:0;border:0;background:rgba(4,8,11,0);backdrop-filter:blur(0);transition:background .5s ease,backdrop-filter .5s ease}
.resource-layer.open .resource-backdrop{background:rgba(4,8,11,.68);backdrop-filter:blur(2px)}
.museum-board{position:relative;z-index:2;width:min(90vw,1040px);height:min(86vh,760px);padding:clamp(14px,1.5vw,22px);border:clamp(9px,1vw,14px) solid #263f58;border-radius:20px;background:linear-gradient(120deg,#294e6d,#172d41 58%,#102231);box-shadow:0 28px 58px rgba(0,0,0,.76),inset 0 0 0 3px rgba(141,207,255,.35);opacity:0;transform:translateY(105vh) scale(.96);transition:transform .8s cubic-bezier(.16,.76,.18,1),opacity .45s ease}
.resource-layer.open .museum-board{opacity:1;transform:translateY(0) scale(1)}
.board-inner{position:relative;width:100%;height:100%;overflow:hidden;border:2px solid rgba(170,220,255,.75);border-radius:10px;background:#080b0d}
.close-board{position:absolute;top:10px;right:10px;z-index:50;width:48px;aspect-ratio:1;border:2px solid #fff;border-radius:50%;color:#fff;background:#17191d;box-shadow:0 5px 14px rgba(0,0,0,.72);font:400 2rem/1 Arial,sans-serif;cursor:pointer}
.page-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#111}
.exit-button{position:fixed;top:clamp(14px,2vw,28px);left:clamp(14px,2vw,28px);z-index:50;width:clamp(70px,7vw,92px);padding:0;border:0;background:transparent;cursor:pointer}
.exit-button img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.72))}
.back-link{position:fixed;top:clamp(14px,2vw,28px);left:clamp(14px,2vw,28px);z-index:50;width:58px;height:58px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;color:#fff;background:rgba(31,69,101,.94);font:700 2rem/1 Arial,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.6);cursor:pointer}
.model-button{position:absolute;left:50%;bottom:4%;z-index:15;transform:translateX(-50%);padding:11px 22px;border:2px solid #9fd7ff;border-radius:8px;color:#fff;background:rgba(31,69,101,.95);box-shadow:0 3px 8px rgba(0,0,0,.45);font:700 clamp(.8rem,1.1vw,1rem)/1 "ABeeZee",Arial,sans-serif;text-decoration:none}
.model-button:hover,.model-button:focus-visible{transform:translateX(-50%) scale(1.04);outline:3px solid #fff;outline-offset:3px}
@media(max-width:720px),(max-height:600px){.museum-board{width:94vw;height:92vh;padding:10px}.process-hotspot{width:30px}.hotspot-label{display:none}}