/* Keep the launch action in view by sizing the scene to available height. */
body{display:flex;flex-direction:column;min-height:100svh}
.mark{display:inline-flex;width:32px;height:32px;flex-shrink:0;align-items:center;justify-content:center;color:var(--accent);transition:color .35s ease}
.mark svg{display:block;width:100%;height:100%;overflow:visible}
.orbital-moon-static{display:none}
.planet-surface{animation:planet-turn 18s linear infinite}
@keyframes planet-turn{from{transform:translateX(0)}to{transform:translateX(-24px)}}
@media(prefers-reduced-motion:reduce){.orbital-moon{display:none}.orbital-moon-static{display:block}}
header{height:64px;min-height:64px;flex-shrink:0}
main{width:100%;flex:1;justify-content:center}
.tabs{margin-top:16px;flex-shrink:0}
.showcase{height:clamp(180px,calc(100svh - 425px),450px);margin-top:4px;flex-shrink:0}
.app-object{width:clamp(150px,calc(100svh - 480px),260px);height:clamp(150px,calc(100svh - 480px),260px)}
.object-top,.object-bottom{padding:16px 20px}
.object-icon{height:auto;min-height:0;flex:1}
.object-icon svg{width:clamp(65px,10svh,105px);height:clamp(65px,10svh,105px)}
.orbit-one{width:clamp(320px,45vw,500px);height:clamp(100px,16svh,170px)}
.orbit-two{width:clamp(280px,38vw,410px);height:clamp(75px,11svh,110px)}
.scene{max-width:100%}
.details{margin-top:10px}
h1{font-size:clamp(30px,4.8svh,44px);margin:10px 0}
.eyebrow{font-size:10px;letter-spacing:2px}
p{font-size:14px}
.launch{margin-top:16px;min-height:44px;padding:11px 24px;font-size:14px}
.domain{margin-top:10px;font-size:10px}
.platform-credit{display:block;min-height:16px;line-height:16px;margin-top:5px;font-size:10px;color:var(--accent);opacity:.75}
.pagination{margin-top:8px;height:32px;align-items:center}
.pagination button{min-width:32px;min-height:32px;display:grid;place-items:center}
.arrow{width:44px;height:44px}
footer{margin-top:12px;padding:16px 0;min-height:44px;flex-shrink:0}
@media(max-width:700px){
 header{margin:0 20px;height:60px;min-height:60px}
 .meta{display:none}
 .brand{font-size:17px}.brand-sub{font-size:11px}
 .tabs{margin-top:14px;width:calc(100% - 32px);max-width:440px;gap:0;justify-content:space-between}
 .tabs button{font-size:12px;min-height:44px;padding:10px 11px;justify-content:center;flex:1;gap:6px}
 .showcase{height:clamp(169px,calc(100svh - 461px),339px);margin-top:4px}
 .app-object{width:clamp(155px,calc(100svh - 520px),235px);height:clamp(155px,calc(100svh - 520px),235px)}
 .object-top,.object-bottom{font-size:7px;padding:15px}
 .object-bottom span:last-child{font-size:7px}
 .scene{overflow:hidden}
 .previous{left:16px}.next{right:16px}
 .coordinate{font-size:7px;letter-spacing:1px}
 .details{margin-top:12px;padding:0 20px}
 h1{font-size:34px;margin:12px 0}
 p{font-size:14px;max-width:340px;line-height:1.6}
 #description{width:min(340px,calc(100vw - 40px));min-height:3.2em;margin-inline:auto;display:flex;align-items:center;justify-content:center}
 .eyebrow{font-size:9px;letter-spacing:1.5px}
 .launch{min-height:48px;margin-top:18px;font-size:14px;padding:12px 25px}
 .domain{font-size:10px}
 .pagination{margin-top:9px;height:40px}
 .pagination button{min-height:40px;min-width:36px}
 footer{margin:8px 20px 0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));font-size:8px}
 .swipe-hint{display:none}
}
/* Desktop: quieter tabs and a contained orbit around the floating tile. */
@media(min-width:701px){
 .tabs{padding:4px;gap:3px}
 .tabs button{font-size:11px;padding:10px 17px;gap:7px}
 .tab-version{font-size:7px}
 .showcase{margin-top:20px;height:clamp(180px,calc(100svh - 455px),420px)}
 .orbit-one{width:clamp(270px,32vw,370px);height:clamp(75px,11svh,110px);transform:translate(-50%,-5%) rotate(-12deg)}
 .orbit-two{width:clamp(240px,28vw,320px);height:clamp(60px,9svh,85px);transform:translate(-50%,20%) rotate(10deg)}
 .ground{width:230px;height:65px;top:65%}
 .coordinate{bottom:-18px;font-size:8px;letter-spacing:1.5px;z-index:3}
 .details{margin-top:40px}
}
@media(max-height:620px) and (min-width:701px){
 header{height:52px;min-height:52px}.tabs{margin-top:10px}.tabs button{padding:9px 18px}
 .showcase{height:160px;margin-top:14px}.app-object{width:140px;height:140px}
 .object-top,.object-bottom{padding:12px;font-size:6px;letter-spacing:1px}.object-bottom span:last-child{font-size:6px}
 .object-icon svg{width:60px;height:60px}.coordinate{display:block}
 .details{margin-top:30px}h1{font-size:28px;margin:7px 0}p{font-size:12px}
 .launch{margin-top:10px}.domain{margin-top:7px}.pagination{margin-top:3px}
 footer{margin-top:6px;padding:10px 0;min-height:32px}
}