:root{color-scheme:dark;--sea:#061729;--navy:#031021;--cyan:#5fe1ff;--text:#ecf8ff;--muted:#b0cede;--glass:rgba(5,24,45,.79);--line:rgba(127,224,255,.29);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;padding:0;min-width:320px;background:var(--navy);color:var(--text);height:100%;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #a7f6ff;outline-offset:3px}a{color:#b2f5ff}#tour{position:fixed;inset:0;display:none;background:#071d33}body.is-tour #tour{display:block}body.is-tour #cover{display:none}
#cover{position:fixed;inset:0;background:radial-gradient(ellipse at center,#03639c,#03152c 75%);display:grid;place-items:center;overflow:hidden}#cover::before{content:'';position:absolute;inset:-45px;background:url('assets/mantyrano-startscherm.png') center / cover no-repeat;filter:blur(30px) brightness(.5);opacity:.65}#cover-art{position:absolute;width:100%;height:100%;object-fit:contain;left:0;top:0;pointer-events:none}#cover-hotspots{position:absolute;inset:0;pointer-events:none}#cover-hotspots button{position:absolute;pointer-events:auto;border:0;background:transparent;transition:box-shadow .2s,background .2s,transform .2s;border-radius:20px}#cover-hotspots button:hover,#cover-hotspots button:focus-visible{background:rgba(16,183,255,.18);box-shadow:0 0 0 2px rgba(99,233,255,.7),0 0 25px rgba(40,219,255,.5)}#cover-hotspots button span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}#cover-main{left:41.3%;top:43%;width:17.7%;height:27%;border-radius:50%!important}#cover-ext{left:5.5%;top:68%;width:27%;height:21%}#cover-steer{left:35%;top:68%;width:29%;height:21%}#cover-engine{left:66.5%;top:68%;width:28%;height:21%}
#cover-bottom{position:absolute;left:50%;transform:translateX(-50%);bottom:1.5vh;text-align:center;font-size:12px;letter-spacing:.05em;color:#d9f5ff;text-shadow:0 2px 12px #02172d}#cover-mobile{display:none}
#viewer{position:absolute;inset:0;background:#071727;touch-action:none;cursor:grab;overflow:hidden}#viewer.grabbing{cursor:grabbing}#pano{width:100%;height:100%;display:block}#stillBlur{display:none;position:absolute;inset:-25px;width:calc(100% + 50px);height:calc(100% + 50px);object-fit:cover;filter:blur(24px) brightness(.52);transform:scale(1.08)}#stillBlur.visible{display:block}#still{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}#still.visible{display:block}#still:before{content:''}#vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,9,20,.42),transparent 19%,transparent 62%,rgba(0,9,20,.73));z-index:1}
#topbar{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:14px 18px;background:linear-gradient(180deg,rgba(2,14,30,.89),rgba(2,14,30,.20));pointer-events:none}#topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;color:#b9eaff;font-weight:750;letter-spacing:.035em}.brand-icon{border:2px solid #5adfff;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:22px}.top-text{min-width:0;flex:1;line-height:1.15}.top-text strong{display:block;font-size:clamp(17px,2.3vw,23px)}.top-text small{display:block;font-size:12px;color:#b9d2df;margin-top:4px}.top-actions{display:flex;gap:7px}.iconbtn{border:1px solid var(--line);background:rgba(4,28,51,.72);backdrop-filter:blur(10px);border-radius:12px;min-height:39px;min-width:39px;padding:8px 11px;display:inline-grid;place-items:center;font-size:19px;box-shadow:0 6px 18px #0004}.iconbtn:hover,.iconbtn.active{border-color:#66e8ff;background:#125074}
#group-nav{position:absolute;z-index:6;top:83px;left:18px;display:flex;gap:7px;flex-wrap:wrap;max-width:80%}.groupbtn{font-size:13px;padding:10px 13px;border-radius:100px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);font-weight:700}.groupbtn.active{background:#1681af;border-color:#80eaff;box-shadow:0 0 17px #17caff4d}
#scenenote{position:absolute;z-index:4;bottom:185px;left:22px;border:1px solid var(--line);border-radius:16px;padding:12px 17px;background:var(--glass);max-width:min(470px,70vw);box-shadow:0 6px 22px #0005}#scenenote strong{font-size:15px;display:block}#scenenote small{font-size:12px;color:#aed6e7;display:block;margin-top:4px}
#arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:4;padding:18px}#arrows button{pointer-events:auto;border:1px solid #6bdcffaa;background:#042643ac;color:white;font-size:29px;border-radius:50%;width:47px;height:47px;box-shadow:0 5px 22px #0007}#arrows button:hover{background:#0a80a7}
#hotspots{position:absolute;inset:0;z-index:3;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:1.5px solid #c5f9ff;background:rgba(3,100,144,.86);color:white;min-width:40px;min-height:40px;border-radius:50%;padding:8px;box-shadow:0 0 0 6px #0ae1ff28,0 0 30px #00a9ea88;font-size:21px;font-weight:900;transform:translate(-50%,-50%)}.hotspot:hover{background:#039dd3;transform:translate(-50%,-50%) scale(1.11)}.hotspot[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 15px);transform:translateX(-50%);white-space:nowrap;background:#021c37f0;padding:8px 12px;border:1px solid #58d7ff88;border-radius:8px;font-size:12px;font-weight:650}
#bottom{position:absolute;z-index:5;left:0;right:0;bottom:0;background:linear-gradient(0deg,#04172cf2,#07223cdc);backdrop-filter:blur(16px);border-top:1px solid rgba(91,213,255,.38);padding:10px 20px 14px;box-shadow:0 -15px 50px #00112455}#bottomhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:15px;color:#d1f4ff}#bottomhead span{font-size:13px;font-weight:700}#bottomhead small{font-size:11px;color:#a8d1e1}#filmstrip{display:flex;gap:9px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2899be transparent;scroll-snap-type:x proximity;padding:1px 0 5px}#filmstrip .scenebtn{width:155px;min-width:155px;height:92px;padding:0;border:1px solid #85e3ff56;background:#092843;border-radius:11px;overflow:hidden;scroll-snap-align:center;text-align:left;position:relative}#filmstrip .scenebtn.selected{border:2px solid #70e9ff;box-shadow:0 0 16px #04caff88}#filmstrip .scenebtn img{width:100%;height:100%;object-fit:cover;opacity:.84}#filmstrip .scenebtn span{position:absolute;left:0;right:0;bottom:0;padding:15px 8px 7px;background:linear-gradient(transparent,#001528de);font-weight:700;font-size:11px;text-shadow:0 1px 3px black}
#hint{position:absolute;bottom:175px;right:20px;z-index:5;background:rgba(3,29,51,.82);padding:10px 15px;border-radius:15px;font-size:12px;color:#cae8f6;border:1px solid var(--line);max-width:280px}#hint[hidden],#toast[hidden]{display:none}#hint button{background:transparent;border:0;color:#91edff;font-weight:700;margin-left:8px}#zoom{position:absolute;z-index:6;right:20px;top:90px;display:grid;gap:7px}#zoom button{font-size:24px;line-height:1}#toast{position:absolute;z-index:12;top:68px;left:50%;transform:translateX(-50%);background:#094868f0;padding:12px 20px;border:1px solid #6ae6ff;border-radius:100px;font-size:13px;box-shadow:0 12px 30px #0006}
#modal{position:fixed;inset:0;display:none;z-index:40;place-items:center;background:rgba(0,11,24,.83);padding:20px}#modal.open{display:grid}.modalbox{border:1px solid #7de9ff69;border-radius:22px;background:linear-gradient(135deg,#0d3a5b,#041829);width:min(560px,100%);box-shadow:0 35px 80px #0008;padding:28px}.modalbox h2{font-size:22px;margin:0 0 10px}.modalbox p,.modalbox li{color:#d0e8f2;font-size:14px;line-height:1.6}.modalbox footer{display:flex;justify-content:flex-end}.pillbtn{background:#0782af;border:1px solid #80e9ff;border-radius:100px;padding:11px 19px;font-weight:800}.muted{color:#afcddd}.pillbtn:hover{background:#1eacdc}
#logo-corner{position:absolute;right:16px;bottom:4px;font-size:10px;color:#9fc3d9;opacity:.75;z-index:8}
@media (max-width:740px){#topbar{gap:8px;padding:8px 10px}.brand{display:none}.top-text strong{font-size:16px}.top-text small{font-size:10px}.top-actions .iconbtn{min-height:35px;min-width:35px;padding:5px 8px;font-size:16px}#group-nav{top:58px;left:10px;right:10px;max-width:none;gap:5px}.groupbtn{font-size:12px;padding:8px 10px}#zoom{top:107px;right:10px}#zoom .iconbtn{min-height:36px;min-width:36px}#scenenote{left:12px;bottom:170px;padding:9px 11px;max-width:80vw}#scenenote strong{font-size:12px}#scenenote small{font-size:10px}#hint{display:none!important}#arrows{padding:8px}#arrows button{width:35px;height:35px;font-size:21px}#bottom{padding:8px 9px 12px}#filmstrip .scenebtn{width:113px;min-width:113px;height:80px}#bottomhead small{font-size:10px}#cover-art{object-fit:contain;top:5%;height:78%}#cover-hotspots{display:none}#cover-mobile{position:absolute;bottom:4%;left:12px;right:12px;display:grid;gap:9px;text-align:center}#cover-mobile strong{font-size:17px;text-shadow:0 2px 8px #000}#cover-mobile .mobile-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#cover-mobile button{font-size:12px;padding:10px 5px;border:1px solid #87edff;background:#06588f;border-radius:9px;font-weight:800}#cover-mobile .startmobile{font-size:16px;background:#10a0ce;border-radius:25px;padding:12px}#cover-bottom{display:none}#logo-corner{display:none}}
@media (max-height:540px){#scenenote{display:none}#bottom .scenebtn{height:65px}#bottom{padding:5px 10px}#group-nav{top:52px}.top-text small{display:none}#hint{display:none}}

.hotspot.video{background:rgba(224,78,21,.96);border-color:#ffd7b8;box-shadow:0 0 0 6px rgba(255,130,64,.22),0 0 30px rgba(255,105,40,.58);transform:translate(-50%,-50%) scale(1.08)}
.hotspot.video:hover{background:#f05b18}
#videoModal{position:fixed;inset:0;display:none;z-index:45;place-items:center;background:rgba(0,11,24,.88);padding:20px}
#videoModal.open{display:grid}.videobox{width:min(980px,100%)}.videotop{display:flex;justify-content:space-between;align-items:center;gap:16px}.videotop h2{margin:0}.closevideo{font-size:28px;line-height:1;padding:0 12px}.videobox p{margin:10px 0 16px}#videoPlayer{width:100%;max-height:min(70vh,720px);background:#000;border-radius:16px;border:1px solid rgba(125,233,255,.35);box-shadow:0 25px 60px rgba(0,0,0,.45)}
@media (max-width:740px){.videobox{padding:18px}.videotop h2{font-size:18px}#videoPlayer{max-height:50vh}}

.videofooter{display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.videofooter .pillbtn{text-decoration:none;display:inline-flex;align-items:center}
.hotspot.video{min-width:58px;min-height:58px;font-size:26px;background:rgba(230,76,28,.97);border-color:#ffd8be;box-shadow:0 0 0 8px rgba(255,121,60,.24),0 0 30px rgba(255,92,28,.55);animation:hotpulse 1.8s ease-in-out infinite}
.hotspot.video:hover{background:#ff6220}
@keyframes hotpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}

#videoStatus{font-size:14px;min-height:18px;color:#d7eaf7;margin:8px 0}
.hotspot.video{width:49px;height:49px;min-width:49px;min-height:49px;font-size:24px;line-height:1;color:white;background:#db481a;border:3px solid white;box-shadow:0 0 0 5px rgba(230,73,21,.32),0 6px 30px rgba(0,0,0,.38)}
.hotspot.video:hover{background:#fe7027}