/* Экран загрузки: виден с первой отрисовки, пока грузятся стили, seed и скрипты; первая отрисовка app.js
   (или плашка boot.js) заменяет содержимое #app и убирает его. Подключается сразу за theme.js и до
   остальных стилей: фон страницы уже в цвет темы, без чёрной или белой вспышки. Сфера — та же карта
   памяти, что у агента (memory-orb.js), только на CSS: точки на сфере Фибоначчи в цветах проектов
   медленно вращаются. Под ней название и полоса без настоящего прогресса — сегмент идёт по кругу.
   При prefers-reduced-motion всё стоит на месте. */
html{color-scheme:dark;background:#101113}
html[data-theme=light]{color-scheme:light;background:#f5f5f7}
/* Размер — от окна: --s — диаметр сферы, от него точки, подпись и полоса. */
.boot{--s:clamp(160px,26vmin,230px);position:fixed;inset:0;display:grid;place-items:center;background:#101113;z-index:1}
[data-theme=light] .boot{background:#f5f5f7}
/* Короткая загрузка не мелькает: фон сразу, сфера с подписью проявляются с задержкой. */
.boot-in{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s)*.16);opacity:0;animation:boot-in .5s ease-out .15s forwards}
.boot-orb{width:var(--s);height:var(--s);perspective:calc(var(--s)*6.5);
  -webkit-mask:radial-gradient(circle,#000 52%,transparent 74%);mask:radial-gradient(circle,#000 52%,transparent 74%)}
.boot-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-16deg)}
.boot-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:boot-spin 14s linear infinite}
/* Точка рисуется крупной и уменьшается: мелкий 3D-слой Chrome растрирует квадратом. */
.boot-spin i{position:absolute;left:50%;top:50%;width:calc(var(--s)*.07);height:calc(var(--s)*.07);margin:calc(var(--s)*-.035);border-radius:50%;background:var(--c);
  backface-visibility:hidden;transform:rotateY(var(--a)) rotateX(var(--b)) translateZ(calc(var(--s)*.42)) scale(.45)}
.boot-name{font:600 calc(var(--s)*.13)/1.2 Inter,system-ui,-apple-system,sans-serif;letter-spacing:-.02em;color:#eeeef1}
[data-theme=light] .boot-name{color:#25252d}
.boot-bar{position:relative;width:calc(var(--s)*1.05);height:3px;border-radius:3px;overflow:hidden;background:#26272c}
[data-theme=light] .boot-bar{background:#e5e5ea}
.boot-bar span{position:absolute;inset:0 auto 0 0;width:38%;border-radius:3px;background:#6963c7;animation:boot-bar 1.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes boot-in{to{opacity:1}}
@keyframes boot-spin{to{transform:rotateY(360deg)}}
@keyframes boot-bar{from{transform:translateX(-100%)}to{transform:translateX(265%)}}
@media (prefers-reduced-motion:reduce){
  .boot-in{animation:none;opacity:1}.boot-spin{animation:none;transform:rotateY(30deg)}
  .boot-bar span{animation:none;left:31%}
}
/* «Идут технические работы» (boot.js): данные не пришли — чаще всего идёт выкатка. Та же сфера, что при загрузке,
   приглушённая и медленнее, со значком ключа; текст и строка «Проверим снова через N с». */
.maint{--s:clamp(150px,22vmin,200px);position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#101113;font-family:Inter,system-ui,-apple-system,sans-serif;z-index:1}
[data-theme=light] .maint{background:#f5f5f7}
.maint-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:460px;animation:boot-in .4s ease-out both;opacity:0}
.maint-art{position:relative;width:var(--s);height:var(--s);margin-bottom:28px}
.maint-art::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(105,99,199,.22),transparent 65%)}
.maint .boot-orb{position:relative;opacity:.55;filter:saturate(.7)}
.maint .boot-spin{animation-duration:40s}
.maint-badge{position:absolute;right:2%;bottom:6%;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,#7c75d6,#5a54b8);box-shadow:0 0 0 4px #101113,0 8px 24px rgba(90,84,184,.45);animation:maint-tilt 2.4s ease-in-out infinite}
[data-theme=light] .maint-badge{box-shadow:0 0 0 4px #f5f5f7,0 8px 24px rgba(90,84,184,.3)}
.maint-title{margin:0 0 10px;font-size:24px;font-weight:600;letter-spacing:-.5px;color:#eeeef1}
[data-theme=light] .maint-title{color:#25252d}
.maint-text{margin:0;font-size:15px;line-height:1.65;color:#9999a6}
[data-theme=light] .maint-text{color:#6e6e7b}
.maint-status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:6px 12px;border-radius:999px;font-size:13px;color:#b4b4c0;background:#1c1d21;border:1px solid #2a2b31}
[data-theme=light] .maint-status{color:#55555f;background:#fff;border-color:#e5e5ea}
.maint-dot{width:7px;height:7px;border-radius:50%;background:#e2a54a;box-shadow:0 0 0 0 rgba(226,165,74,.6);animation:maint-pulse 1.6s ease-out infinite}
.maint-btn{margin-top:16px;border:0;background:none;font:inherit;font-size:13px;color:#a5a0ee;cursor:pointer;padding:6px 10px;border-radius:6px}
[data-theme=light] .maint-btn{color:#6963c7}
.maint-btn:hover{background:rgba(105,99,199,.12)}
@keyframes maint-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes maint-pulse{to{box-shadow:0 0 0 8px rgba(226,165,74,0)}}
@media (prefers-reduced-motion:reduce){.maint-in{animation:none;opacity:1}.maint-badge,.maint-dot{animation:none}}