.install-banner{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding:15px 18px;border:1px solid #2b7c9c;border-radius:16px;background:linear-gradient(110deg,#0c2a41,#0b2036);box-shadow:0 0 20px #00c9eb16}
.install-banner img{width:52px;height:52px;border-radius:12px;flex-shrink:0}
.install-banner-copy{flex:1}.install-banner-copy strong{display:block;font-size:15px;color:#eafaff}.install-banner-copy p{margin:5px 0 0;color:#a9c9db;font-size:12px;line-height:1.5}
.install-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border:1px solid #83f0fa;border-radius:12px;background:linear-gradient(135deg,#5aebf3,#02bddb);color:#03273b;font-size:13px;font-weight:750;white-space:nowrap;cursor:pointer}
.install-button:disabled{opacity:.65}.install-button:focus-visible{outline:3px solid #aff9ff;outline-offset:4px}
.install-dialog{position:fixed;width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 40px);overflow:auto;background:#0b2036;color:#e7f6ff;border:1px solid #398caa;border-radius:20px;padding:25px;box-shadow:0 15px 70px #0008}
.install-dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}.install-dialog-header{display:flex;align-items:center;gap:12px;padding-right:30px}.install-dialog-header img{width:52px;height:52px;border-radius:12px}.install-dialog h2{margin:0;font-size:23px}.install-dialog .dialog-close{top:13px;right:13px;font-size:24px;line-height:1;background:#163b51;color:#d5f8ff}
#installInstructions p,#installInstructions li{font-size:14px;line-height:1.65;color:#cae1ee}#installInstructions ol{padding-left:23px}#installInstructions li{padding-left:4px;margin:9px 0}#installInstructions .install-note{font-size:12px;color:#94b8cc}.install-dialog .install-button{width:100%}#installStatus{font-size:12px;line-height:1.5;color:#7ce8f3}
.offline-notice{padding:10px 18px;margin:0;text-align:center;background:#18394a;color:#def3fd;font-size:12px;line-height:1.5}
.install-banner[hidden],.offline-notice[hidden]{display:none!important}
@media(max-width:760px){.install-banner{padding:13px;gap:11px;flex-wrap:wrap;margin-top:15px}.install-banner img{width:46px;height:46px}.install-banner-copy strong{font-size:14px}.install-banner-copy p{font-size:11px}.install-banner>.install-button{width:100%}.install-dialog{padding:22px}.install-dialog h2{font-size:21px}}
@media(display-mode:standalone){.install-banner{display:none!important}}

/* Three-second launch presentation. The modal keeps the catalogue inert underneath. */
.launch-splash{position:fixed;inset:0;margin:0;padding:0;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;background:#061222;color:#eafaff;overflow:hidden;outline:none}
.launch-splash:not([open]){display:none}
.launch-splash[open]{display:grid;place-items:center;animation:splash-exit 3s linear both}
.launch-splash::backdrop{background:#061222}
.splash-scene{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#0d456a88,transparent 58%),#061222}
.splash-brand{position:relative;z-index:2;width:min(82vw,540px);text-align:center;animation:splash-brand-in 1s cubic-bezier(.16,1,.3,1) both}
.splash-brand img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 0 20px #00cfff44)}
.splash-line{display:block;width:110px;height:3px;margin:30px auto 0;border-radius:20px;background:linear-gradient(90deg,transparent,#57edff,transparent);box-shadow:0 0 16px #08dfff;transform:scaleX(0);animation:splash-line-in 2.3s .2s ease-out forwards}
.splash-orbit{position:absolute;left:50%;top:46%;width:min(90vw,660px);height:min(90vw,660px);border:1px solid transparent;border-radius:50%;pointer-events:none;z-index:0}
.splash-orbit-one{border-top-color:#69edff;border-bottom-color:#04bfe8aa;box-shadow:0 -12px 35px -20px #00ddff,inset 0 10px 30px -20px #00ddff;animation:splash-orbit-one 3s ease-out both;filter:drop-shadow(0 0 7px #00d5ff)}
.splash-orbit-two{width:min(110vw,820px);height:min(67vw,500px);border-left-color:#328aff;border-right-color:#56caff;filter:drop-shadow(0 0 9px #167dff);animation:splash-orbit-two 3s ease-out both}
.splash-glow{position:absolute;width:min(65vw,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#05c7fa20,transparent 68%);animation:splash-glow-in 2.5s ease-out both}
.splash-credit{position:absolute;bottom:calc(35px + env(safe-area-inset-bottom));left:15px;right:15px;margin:0;text-align:center;color:#8eafc5;font-size:11px;letter-spacing:.4px;animation:splash-credit-in 1s .5s both}
.splash-credit strong{color:#d3f7ff;font-size:17px;letter-spacing:-.6px;margin:0 3px}
@keyframes splash-brand-in{from{opacity:0;transform:translateY(16px) scale(.88);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes splash-line-in{to{transform:scaleX(1)}}
@keyframes splash-orbit-one{from{opacity:0;transform:translate(-50%,-50%) rotate(-100deg) scale(.8)}25%{opacity:.85}to{opacity:.85;transform:translate(-50%,-50%) rotate(-15deg) scale(1.1)}}
@keyframes splash-orbit-two{from{opacity:0;transform:translate(-50%,-50%) rotate(70deg) scale(.8)}30%{opacity:.8}to{opacity:.8;transform:translate(-50%,-50%) rotate(15deg) scale(1.12)}}
@keyframes splash-glow-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1.3)}}
@keyframes splash-credit-in{from{opacity:0}to{opacity:1}}
@keyframes splash-exit{0%,86%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.launch-splash[open],.splash-brand,.splash-line,.splash-orbit,.splash-glow,.splash-credit{animation:none!important}.splash-line{transform:none}.splash-orbit-one{transform:translate(-50%,-50%) rotate(-20deg)}.splash-orbit-two{transform:translate(-50%,-50%) rotate(20deg)}}