:root { color-scheme: dark; font-family: Inter, "SF Pro Display", "PingFang SC", system-ui, sans-serif; background:#07131f; }
* { box-sizing:border-box; }
html, body, #atlas-shell, #unity-canvas { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:radial-gradient(circle at 50% 35%, #173b54 0, #07131f 46%, #03080e 100%); }
#unity-canvas { display:block; background:#07131f; outline:none; }
#atlas-loader { position:fixed; inset:0; z-index:20; display:grid; place-content:center; justify-items:center; gap:18px; background:radial-gradient(circle at 50% 38%, #153d58, #07131f 52%, #02070c); transition:opacity .38s ease, visibility .38s ease; }
#atlas-loader::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(108,204,242,.2) 1px, transparent 1px),linear-gradient(90deg, rgba(108,204,242,.2) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,#000 35%,transparent); }
#atlas-loader.is-complete { opacity:0; visibility:hidden; }
.atlas-mark { width:110px; height:110px; filter:drop-shadow(0 0 28px rgba(108,204,242,.32)); animation:atlas-pulse 2.2s ease-in-out infinite; }
.atlas-wordmark { font-size:34px; font-weight:850; letter-spacing:.22em; color:#f4faff; }
.atlas-wordmark span { color:#6cccf2; font-size:.48em; letter-spacing:.3em; }
#atlas-stage { margin:8px 0 0; color:#a9c4d5; letter-spacing:.08em; }
.atlas-progress { width:min(440px,70vw); height:5px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.1); }
.atlas-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#419fc7,#6cccf2,#ff7a1a); box-shadow:0 0 16px #6cccf2; transition:width .18s ease; }
#atlas-progress-label { color:#6cccf2; font-variant-numeric:tabular-nums; font-size:13px; }
#atlas-toolbar { position:fixed; top:14px; right:14px; z-index:10; display:flex; gap:8px; opacity:.34; transition:opacity .2s; }
#atlas-toolbar:hover, #atlas-toolbar:focus-within { opacity:1; }
#atlas-toolbar a, #atlas-toolbar button, #atlas-fatal button { appearance:none; border:1px solid rgba(108,204,242,.3); border-radius:10px; padding:9px 13px; color:#f4faff; background:rgba(7,19,31,.78); backdrop-filter:blur(12px); text-decoration:none; cursor:pointer; }
#atlas-toolbar a:hover, #atlas-toolbar button:hover { border-color:#6cccf2; background:#15344a; }
#atlas-warning { position:fixed; top:70px; left:50%; z-index:30; transform:translateX(-50%); max-width:min(720px,90vw); padding:12px 18px; border:1px solid #ffb15e; border-radius:10px; background:#2b1c10; color:#fff; }
#atlas-warning[data-type="error"] { border-color:#ff5964; background:#321219; }
#atlas-fatal { position:fixed; inset:0; z-index:40; place-content:center; text-align:center; background:#07131f; }
#atlas-fatal:not([hidden]) { display:grid; }
#atlas-fatal h1 { margin:0; color:#f4faff; }
#atlas-fatal p { color:#a9c4d5; }
@keyframes atlas-pulse { 0%,100% { transform:scale(.98); opacity:.82; } 50% { transform:scale(1.03); opacity:1; } }
@media (max-width:700px) { .atlas-wordmark { font-size:24px; } #atlas-toolbar { top:8px; right:8px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }