/* Current app portraits, with an original-mascot introduction. */
#film {width:min(44vw,640px);height:70vh;aspect-ratio:auto;overflow:visible;mask:none;-webkit-mask:none;border-radius:0;left:27%;transition:left .6s ease,top .6s ease;width:min(44vw,640px)}
#film::after{content:none}
#film.nudge-left,#film.nudge-right,#film.nudge-up{animation:none}
body[data-scene="2"] #film{left:74%}
body[data-scene="4"] #film{left:50%;top:30%;height:42vh;width:min(76vw,860px)}
.landing-character{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#landing-character{width:min(100%,460px);height:calc(100% - 36px);object-fit:contain;filter:drop-shadow(0 18px 18px #065a5a16);animation:landing-float 4s ease-in-out infinite}
#landing-character-name{font:700 18px Inter,system-ui;color:#164d52;margin:8px 0}
#landing-forms{display:flex;justify-content:center;gap:8px;margin:12px auto 0;position:relative;z-index:5}
#landing-forms[hidden]{display:none}
#landing-forms button{border:1px solid #087f8022;border-radius:20px;background:#ffffffa8;padding:8px;width:90px;color:#164d52;cursor:pointer;font:600 12px Inter,system-ui;transition:transform .2s,background .2s}
#landing-forms button img{display:block;width:100%;height:62px;object-fit:contain}
#landing-forms button:hover{transform:translateY(-5px)}
#landing-forms button[aria-pressed="true"]{background:#d8f5ee;border-color:#09898c;box-shadow:0 5px 18px #09898c20}
#landing-forms button:focus-visible{outline:3px solid #09898c;outline-offset:3px}
body[data-scene="4"] #ui.center{padding-bottom:3vh}
body[data-scene="4"] #copy{width:min(700px,85vw)}
@keyframes landing-float{50%{transform:translateY(-10px) rotate(1deg)}}
@media(max-width:860px){
 #film,body[data-scene="2"] #film,body[data-scene="4"] #film{position:relative;left:auto;top:auto;width:92%;height:29svh;max-height:none;transform:none;flex-shrink:0;background:transparent}
 body[data-scene="4"] #film{height:39svh;margin-bottom:8px}
 body[data-scene="4"] .landing-character{height:calc(100% - 76px)}
 #landing-forms{gap:3px;margin-top:6px;width:100%}
 #landing-forms button{padding:5px 1px;border-radius:12px;min-width:0;flex:1;font-size:10px}
 #landing-forms button img{height:40px}
 #landing-character-name{font-size:14px;margin:3px 0}
 body[data-scene="4"] #ui.center{padding-bottom:0}
 body[data-scene="4"] #copy{width:100%}
}
@media(prefers-reduced-motion:reduce){#landing-character{animation:none}#film,#landing-forms button{transition:none}}
/* Keep app thumbnails near their native resolution, including Retina displays. */
#landing-character:not([src$="garly-mascot.png"]){width:128px;height:128px;max-width:100%;flex:0 0 auto}
/* Keep gallery and copy in document flow: no viewport-dependent overlap. */
body[data-scene="4"] #stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:84px 20px 24px;box-sizing:border-box;overflow-y:auto}
body[data-scene="4"] #film{position:relative;left:auto;top:auto;transform:none;width:min(100%,860px);height:auto;max-height:none;flex:0 0 auto;margin:0}
body[data-scene="4"] .landing-character{height:auto}
body[data-scene="4"] #landing-forms{flex-wrap:wrap;margin-top:16px}
body[data-scene="4"] #ui.center{position:relative;inset:auto;display:block;padding:0;width:100%;flex:0 0 auto}
body[data-scene="4"] #copy{width:min(700px,100%);max-width:700px;margin:0 auto}
@media(max-width:860px){body[data-scene="4"] #stage{gap:20px;padding-top:72px}body[data-scene="4"] #landing-forms{flex-wrap:nowrap}body[data-scene="4"] #copy{max-width:400px}}
@media(max-height:650px){body[data-scene="4"] #stage{justify-content:flex-start}}
/* A softer, smaller clearing now that the portraits have transparent backgrounds. */
@media(min-width:861px){
 #mapframe{-webkit-mask-image:radial-gradient(ellipse 55% 55% at 50% 48%,rgba(0,0,0,.35) 15%,rgba(0,0,0,.65) 48%,#000 75%);mask-image:radial-gradient(ellipse 55% 55% at 50% 48%,rgba(0,0,0,.35) 15%,rgba(0,0,0,.65) 48%,#000 75%)}
}

/* Resolution-independent Natural Earth land outlines; no raster or graticule. */
#mapframe{background-image:url("map-world-clean.svg?v=20261010");background-size:cover;background-position:center;filter:none;mix-blend-mode:normal;opacity:1;-webkit-mask-image:none;mask-image:none}
@media(max-width:860px){#mapframe{background-size:auto 100%;background-position:46% center;opacity:.65}}