:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #edf0ff; background: #0c0b1b; }
* { box-sizing: border-box; }
html, body, #astra-root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
button:focus-visible, summary:focus-visible { outline: 2px solid #b3d8ff; outline-offset: 5px; }
#canvas { width: 100%; height: 100%; display: block; border: 0; outline: 0; background: #000; touch-action: none; cursor: auto; }
#astra-virtual-keyboard { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; }
#astra-status { position: fixed; z-index: 4; inset: auto 16px 16px; padding: 8px 12px; color: #d8e2f1; background: #10121fec; border: 1px solid #354258; border-radius: 8px; font: 13px/1.4 ui-monospace, monospace; pointer-events: none; }
#astra-status:empty, [hidden] { display: none !important; }
#astra-launcher { position: fixed; z-index: 5; inset: 0; overflow: auto; display: flex; flex-direction: column; background: #0c0b1b; opacity: 1; transition: opacity 300ms ease; }
#astra-launcher[data-fading] { opacity: 0; pointer-events: none; }
#astra-launcher[data-mode="error"] { transition: none; }
#astra-launcher::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0c0b1b9c, #1911388a 50%, #0c0b1b8a), linear-gradient(0deg, #0c0b1b 0%, #10102c22 60%, #0c0b1b9c), url("launcher-background.png") center / cover; }
#astra-launcher::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, #8f65ef20, transparent 60%); }
.launcher-nav, .launcher-main, .launcher-footer { position: relative; z-index: 1; }
.launcher-nav { display: flex; justify-content: space-between; align-items: center; padding: 28px 48px; font-size: 12px; letter-spacing: .16em; color: #d0c9e3; }
.nav-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: #fff; }
.astra-mark { width: 32px; height: 32px; display: grid; place-items: center; background: linear-gradient(140deg, #bf91ff33, #6289ff33); border: 1px solid #b8a6ef6b; transform: rotate(45deg); border-radius: 8px; }
.astra-mark span { transform: rotate(-45deg); font-family: Georgia, serif; font-size: 23px; color: #e3d3ff; }
.nav-tag { border: 1px solid #c2c1ff33; border-radius: 30px; padding: 8px 13px; background: #14132a77; }
.launcher-main { flex: 1; width: min(580px, calc(100% - 40px)); margin: auto; display: flex; flex-direction: column; justify-content: center; padding: 15px 0 30px; text-align: center; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .28em; color: #d2b8ff; margin: 0 0 16px; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6vw, 76px); font-weight: 400; letter-spacing: .065em; line-height: 1.05; text-shadow: 0 6px 40px #9c6eff66; }
h1 span { color: #c5acff; }
.launcher-subtitle { margin: 15px 0 8px; font-size: 18px; letter-spacing: .025em; color: #e1ddec; }
.launcher-powered { margin: 0 0 30px; font-size: 12px; color: #b9accd; }
.launcher-powered strong { font-weight: 600; color: #e0d4f4; }
.launcher-card { text-align: left; background: linear-gradient(145deg, #25223bdc, #121222f2); border: 1px solid #a98bdf48; border-radius: 20px; padding: 29px 30px 24px; box-shadow: 0 24px 80px #0008, 0 0 45px #8458d71a, inset 0 1px 0 #d1b6ff25; backdrop-filter: blur(16px); }
.card-header { display: flex; gap: 12px; align-items: center; margin-bottom: 21px; }
.package-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; background: #a782ff14; color: #cbb5ff; border: 1px solid #a889ec39; border-radius: 12px; }
.package-icon svg { width: 25px; height: 25px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.card-caption { font-size: 12px; margin: 0; color: #aba6bb; }
.data-info { margin: 0; padding: 16px 0; border-top: 1px solid #c6b0ff1a; border-bottom: 1px solid #c6b0ff1a; display: grid; gap: 13px; }
.data-info div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.data-info dt { color: #aaa5bc; }
.data-info dd { margin: 0; color: #ede8f9; font-weight: 500; }
#launcher-state { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; color: #d7c2ff; }
#launcher-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
#launcher-state.ready { color: #92eac0; }
#launcher-state.error { color: #ffaeae; }
.launcher-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.secondary { color: #d9d2e9; background: #9385b80d; border: 1px solid #a298bf4d; border-radius: 9px; padding: 10px 6px; font-size: 12px; transition: background .15s, border-color .15s; }
.secondary:hover:not(:disabled) { background: #a38fd92b; border-color: #c1a9f0; }
.play-button { width: 100%; margin: 13px 0 0; padding: 16px; border: 1px solid #c3a0ff88; border-radius: 10px; background: linear-gradient(105deg, #8760d6, #7359d8 50%, #5769d5); color: white; font-size: 16px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 5px 22px #8360d32a, inset 0 1px 0 #fff3; transition: filter .15s, box-shadow .15s; }
.play-button:hover:not(:disabled) { filter: brightness(1.16); box-shadow: 0 5px 32px #9a70ed55; }
.play-button svg { width: 14px; height: 14px; margin-right: 9px; vertical-align: -1px; }
.launch-message { font-size: 12px; line-height: 1.5; color: #b9b1cb; min-height: 18px; margin: 14px 0 0; text-align: center; overflow-wrap: anywhere; }
.launch-message.error { color: #ffb1b1; }
.launcher-progress { width: 100%; height: 5px; accent-color: #b897ff; margin-top: 16px; }
.launcher-features { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; font-size: 11px; color: #bcb4ce; }
.launcher-features span::before { content: "✧"; margin-right: 6px; color: #d3bdff; }
.launcher-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 22px 180px 22px 48px; font-size: 11px; color: #91899f; }
.launcher-footer span:last-child { letter-spacing: .11em; font-size: 10px; }
.launcher-confirm { color: #dfd1f6; text-align: center; border-top: 1px solid #c6b0ff22; margin-top: 16px; padding-top: 14px; font-size: 12px; line-height: 1.5; }
.launcher-confirm button { margin: 5px; padding: 7px 18px; }
#astra-performance { position: fixed; z-index: 8; top: 12px; right: 12px; width: min(360px, calc(100% - 24px)); padding: 12px; border: 1px solid #78849977; border-radius: 9px; background: #0b1021e8; font: 11px/1.5 ui-monospace, monospace; color: #ccd9ed; }
#astra-performance pre { white-space: pre-wrap; margin-bottom: 0; }
#astra-performance-close { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: #bfc9df; font-size: 19px; padding: 2px 6px; }
#astra-performance summary { padding-right: 22px; cursor: pointer; }
#astra-web-options { position: fixed; z-index: 9; bottom: 12px; right: 12px; font-size: 12px; }
#astra-web-options-button { border: 1px solid #a296bf55; border-radius: 8px; color: #d2c8e4; background: #161627ed; padding: 8px 12px; }
#astra-web-options-panel { position: absolute; bottom: 42px; right: 0; width: 250px; border: 1px solid #a296bf55; border-radius: 10px; background: #161627f5; padding: 17px; box-shadow: 0 8px 30px #0005; }
#astra-web-options-panel label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
#astra-web-options-panel input { accent-color: #a47fea; }
#astra-web-options-panel p { margin: 12px 0 0; font-size: 10px; color: #a7a1b6; }
@media (max-height: 740px) { .launcher-nav { padding-top: 18px; padding-bottom: 15px; } .launcher-powered { margin-bottom: 20px; } h1 { font-size: 56px; } .launcher-card { padding: 23px 26px 20px; } .launcher-main { padding-bottom: 15px; } .launcher-footer { padding-top: 12px; padding-bottom: 12px; } }
@media (max-width: 600px) { .launcher-nav, .launcher-footer { padding-left: 22px; padding-right: 22px; } .nav-tag { display: none; } .launcher-card { padding: 23px; } .launcher-footer span:last-child { display: none; } .launcher-features { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Loading reuses the launcher overlay; the full-size canvas stays untouched. */
#astra-launcher:not([data-mode="manage"])::before { background: radial-gradient(ellipse at 50% 45%, #142c524f, #050910 68%); }
#astra-launcher:not([data-mode="manage"]) .launcher-main { width: min(720px, calc(100% - 36px)); }
#astra-launcher:not([data-mode="manage"]) .launcher-main > :not(#launcher-splash):not(#launcher-reload) { display: none; }
#astra-launcher:not([data-mode="manage"]) .launcher-nav { visibility: hidden; }
#launcher-splash { margin: auto; text-align: center; }
.splash-emblem { display: block; width: min(560px, 78vw, 62vh); height: auto; margin: -3vh auto -2vh; object-fit: contain; filter: drop-shadow(0 0 30px #126bff30); }
.splash-kicker { font-size: 10px; letter-spacing: .28em; color: #d7b977; margin: 0 0 15px; }
#splash-title { font: 400 clamp(22px, 3vw, 30px)/1.2 Georgia, serif; color: #edf5ff; margin: 0 0 13px; }
#splash-message { color: #b6cbe5; font-size: 13px; line-height: 1.5; min-height: 20px; max-width: 540px; overflow-wrap: anywhere; margin: 0 auto 20px; }
#splash-progress { display: block; width: min(340px, 70vw); height: 5px; margin: auto; accent-color: #79bfff; border: 0; border-radius: 5px; }
.splash-caption { color: #7185a0; font-size: 11px; margin-top: 17px; }
#launcher-reload { margin: 24px auto 0; padding: 12px 30px; }
#astra-launcher[data-mode="error"] #splash-message { color: #ffb7b0; }
#astra-launcher[data-mode="error"] .splash-caption { display: none; }