/* Linked, not inlined in index.html: release builds hash inline <style> blocks into the CSP,
   which voids style-src 'unsafe-inline' and blocks the editor's runtime-injected styles. */
/* Start-up splash over the page until the window's launch project is open (platform/splash.ts).
   Until tokens load, the colours are the last theme's --bg-frame / --fg-muted that boot.js
   restored as --boot-*, else these built-in ones; the bar keeps the last --accent throughout. */
/* Not on html: the canvas then takes body's (themed) background, which a fast resize shows before relayout. */
body,
.splash {
  background: var(--bg-frame, var(--boot-frame, #e9eaee));
}
:root[data-theme="dark"] :is(body, .splash) {
  background: var(--bg-frame, var(--boot-frame, #26282c));
}
:root:is([data-theme="dark-hc"], [data-theme="dark"][data-contrast="high"]) :is(body, .splash) {
  background: var(--bg-frame, var(--boot-frame, #1a1b1e));
}
.splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--splash-gap, 14px);
  padding-bottom: var(--splash-offset, 38px);
  box-sizing: border-box;
  color: var(--fg-muted, var(--boot-fg, #6c707e));
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  animation: splash-in 240ms ease-out 120ms both;
  transition: opacity 160ms ease-out;
}
.splash.splash-out {
  opacity: 0;
  pointer-events: none;
}
:root[data-theme^="dark"] .splash {
  color: var(--fg-muted, var(--boot-fg, #8c8f95));
}
.splash-logo {
  width: var(--splash-logo-size, 56px);
  height: var(--splash-logo-size, 56px);
}
/* 15px Inter: 2048 units per em, the line box from ascender to descender. */
.splash-wordmark {
  width: 73.2px;
  height: 18.15px;
}
.splash-bar {
  width: var(--splash-bar-width, 120px);
  height: var(--splash-bar-height, 2px);
  border-radius: 1px;
  overflow: hidden;
  background: rgb(127 127 127 / 0.18);
}
/* Fake progress: eases towards ~90% over the 4 s cap; hideSplash() fills it before fading out.
   The remembered accent comes first: tokens.css brings the theme's default --accent before
   settings restore a custom one, which would flash the default mid-load. */
.splash-bar > i {
  display: block;
  height: 100%;
  background: var(--boot-accent, var(--accent, #3871e1));
  transform-origin: left;
  animation: splash-fill var(--splash-progress-duration, 4s)
    var(--splash-progress-easing, cubic-bezier(0.1, 0.7, 0.3, 1)) both;
}
/* Settings window: a dialog, not a launch. Only the bar, and only if loading takes a while. */
:root[data-window="settings"] .splash {
  animation-delay: 400ms;
}
:root[data-window="settings"] .splash > :not(.splash-bar) {
  display: none;
}
@keyframes splash-in {
  from {
    opacity: 0;
  }
}
@keyframes splash-fill {
  from {
    transform: scaleX(0.04);
  }
  to {
    transform: scaleX(0.92);
  }
}
/* The fill stays: it grows in place, which reduced motion allows. */
@media (prefers-reduced-motion: reduce) {
  .splash {
    animation: none;
  }
}