/* Keep the initial HTML and UI reconstruction out of the first paint. */
html[data-starting] body > :not(#startup-screen) { visibility: hidden !important; }

/* While it loads, the app shows its own layout as a wireframe, built to the same sizes as
   the real panels, so fading it away reveals the real thing in the same place. Whatever
   moves uses transform and opacity only: the browser runs those away from the main thread,
   so they stay smooth while the scripts are parsing. */
#startup-screen {
  --sk-left: 218px;
  --sk-right: 270px;
  --sk-playback: 36px;
  --sk-block: #ebecef;
  --sk-mark: #d6d8dd;
  --sk-shine: rgb(255 255 255 / .75);
  --sk-export: #45484f;
  --sk-dot: #f3f3f3;
  --load: .08;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  overflow: hidden;
  background: #f3f3f3;
  color: var(--ui-text);
  text-align: center;
  transition: opacity .28s ease;
}
/* Clear rather than opaque: the page is hidden until it is ready, and when the wireframe
   fades, this would stay behind and hide the very thing being revealed. */
#startup-screen::backdrop { background: transparent; }
:root[data-theme=dark] #startup-screen {
  --sk-block: #2f3135;
  --sk-mark: #3d4046;
  --sk-shine: rgb(255 255 255 / .07);
  --sk-export: #e0e4eb;
  --sk-dot: #292a2d;
  background: #17181a;
}
#startup-screen.leaving { opacity: 0; }
@media (max-width: 1250px) { #startup-screen { --sk-left: 200px; --sk-right: 246px; } }
@media (max-height: 820px) { #startup-screen { --sk-playback: 34px; } }

.sk {
  position: relative;
  display: grid;
  grid-template-columns: var(--sk-left) minmax(320px, 1fr) var(--sk-right);
  gap: 5px;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  text-align: left;
}
:where(.sk) span { display: block; }
.sk-panel { min-width: 0; min-height: 0; border-radius: 8px; background: var(--panel); }

/* One band sweeping the whole screen, rather than a shimmer per block. It only shows where
   it crosses a block, because on a white panel it is white on white. */
.sk::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, var(--sk-shine) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: sk-sweep 1.9s linear infinite;
  pointer-events: none;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }

.sk-in { animation: sk-in .36s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 7ms); }
@keyframes sk-in { from { opacity: 0; transform: translateY(5px); } }

/* The template library. */
.sk-library { display: flex; flex-direction: column; padding: 6px 6px 1px; }
.sk-tabs, .sk-modes { display: flex; flex: none; align-items: center; gap: 12px; height: 32px; padding: 0 3px; border-radius: 4px; background: var(--editor-field); }
.sk-tabs span { width: 36px; height: 8px; border-radius: 2px; background: var(--sk-mark); }
.sk-tabs span:first-child { width: 28px; height: 26px; margin-right: -4px; border-radius: 3px; background: var(--panel); }
.sk-tiles { display: grid; flex: 1; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: 5.5px 5px; min-height: 0; margin-top: 8px; overflow: hidden; }
.sk-tile { border-radius: 4px; background: var(--editor-field); }
.sk-thumb { position: relative; aspect-ratio: 1 / .846; border-radius: 4px 4px 0 0; background: var(--sk-block); }
.sk-thumb::after { content: ""; position: absolute; inset: 22% 30%; border: 1px solid var(--sk-mark); border-radius: 2px; }
.sk-tile:nth-child(3n + 2) .sk-thumb::after { inset: 30% 18%; }
.sk-tile:nth-child(3n) .sk-thumb::after { inset: 16% 36%; }
.sk-label { width: 56%; height: 7px; margin: 12px auto 11.5px; border-radius: 2px; background: var(--sk-mark); }
.sk-foot { display: flex; flex: none; align-items: center; gap: 8px; height: 48px; padding: 0 5px; border-top: 1px solid var(--editor-divider); }
.sk-brand { width: 72px; height: 10px; margin-right: auto; border-radius: 2px; background: var(--sk-block); }
.sk-mark { width: 16px; height: 16px; border-radius: 50%; background: var(--sk-block); }
.sk-icon { flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--sk-block); }

/* The workspace. */
.sk-work { display: grid; grid-template-rows: 40px minmax(0, 1fr) var(--sk-playback) 118px; gap: 5px; min-width: 0; min-height: 0; }
.sk-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 13px; }
.sk-name { width: 124px; height: 11px; border-radius: 2px; background: var(--sk-block); }
.sk-history { position: absolute; left: 50%; display: flex; gap: 12px; transform: translateX(-50%); }
.sk-history span { width: 30px; height: 8px; border-radius: 2px; background: var(--sk-block); }
.sk-stage { padding: 3px; border: 1px solid #fff; background-image: radial-gradient(circle, var(--sk-dot) 2px, transparent 2.6px); background-size: 27px 27px; }
:root[data-theme=dark] .sk-stage { border-color: #303236; background-color: #1d1e20; }
/* Sizing against this box is what fitPreview() does by hand, and it stacks above the sweep. */
.sk-view { position: relative; z-index: 2; display: grid; height: 100%; place-items: center; container-type: size; }
.sk-artboard { position: relative; width: min(80cqw, 64cqh); aspect-ratio: 4 / 5; overflow: hidden; background: #101114; }

/* Three wireframe cards taking turns at the front, in the manner of the first template. The
   depth keeps them in order without touching z-index, which would need the main thread. */
.sk-cards { position: absolute; inset: 0; transform-style: preserve-3d; }
.sk-card { position: absolute; top: 20%; left: 22%; display: grid; width: 56%; aspect-ratio: 3 / 4; place-items: center; border-radius: 6px; background: var(--card); animation: sk-shuffle 3s cubic-bezier(.65, 0, .2, 1) infinite; animation-delay: calc(var(--n) * -1s); }
.sk-card:nth-child(1) { --n: 0; --card: #c8c7c0; }
.sk-card:nth-child(2) { --n: 1; --card: #dbdad3; }
.sk-card:nth-child(3) { --n: 2; --card: #edece6; }
.sk-card svg { width: 14%; fill: none; stroke: rgb(0 0 0 / .26); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sk-shuffle {
  0%, 10% { transform: translate3d(0, 0, 30px) rotate(0deg); }
  22% { transform: translate3d(62%, -2%, 30px) rotate(8deg); }
  26% { transform: translate3d(62%, -2%, 5px) rotate(8deg); }
  33.34%, 43.34% { transform: translate3d(-7%, -3%, 10px) rotate(-3deg); }
  66.67%, 76.67% { transform: translate3d(-3.5%, -1.5%, 20px) rotate(-1.5deg); }
  100% { transform: translate3d(0, 0, 30px) rotate(0deg); }
}

/* The timeline is the progress bar: its playhead moves as the app really loads. */
.sk-playback { display: flex; align-items: center; padding: 0 4px; }
.sk-play { flex: none; width: 29px; height: 28px; border-radius: 4px; background: var(--editor-field); }
.sk-track { position: relative; flex: 1; height: 2px; min-width: 0; margin: 0 16.5px 0 16px; border-radius: 1px; background: var(--sk-block); container-type: inline-size; }
.sk-fill { position: absolute; inset: 0; border-radius: 1px; background: var(--ui-secondary); transform: scaleX(var(--load)); transform-origin: left; transition: transform .35s ease-out; }
.sk-knob { position: absolute; top: -6px; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-secondary); transform: translateX(calc(var(--load) * 100cqw)); transition: transform .35s ease-out; }
.sk-time { flex: none; width: 133.5px; height: 31px; border-radius: 4px; background: var(--editor-field); }
.sk-tray { padding: 11px; }
.sk-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; border: 1px dashed var(--sk-mark); border-radius: 5px; }
.sk-drop span { width: 72px; height: 8px; border-radius: 2px; background: var(--sk-block); }
.sk-drop span + span { width: 190px; }

/* The inspector. */
.sk-side { display: flex; flex-direction: column; }
.sk-modes { gap: 0; margin: 5px 5px 0; }
.sk-modes span { flex: 1; height: 8px; margin: 0 22px; border-radius: 2px; background: var(--sk-mark); }
.sk-modes span:first-child { height: 26px; margin: 0 3px 0 0; border-radius: 3px; background: var(--panel); }
.sk-rows { flex: 1; min-height: 0; padding: 20px 5px 0; overflow: hidden; }
.sk-row { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-top: 8px; padding: 0 12px; border-radius: 4px; background: var(--editor-field); }
.sk-rows > :first-child { margin-top: 0; }
.sk-row span { width: 74px; height: 8px; border-radius: 2px; background: var(--sk-mark); }
.sk-row span + span { width: 42px; }
.sk-cap { height: 15px; margin-top: 27px; padding: 4px 5px 0; }
.sk-cap + .sk-row { margin-top: 22px; }
.sk-sec { height: 31px; margin-top: 23px; padding: 19px 5px 0; border-top: 1px solid var(--editor-divider); }
.sk-sec + .sk-sec { margin-top: 14px; }
.sk-sec + .sk-row { margin-top: 22px; }
.sk-cap span, .sk-sec span { width: 52px; height: 8px; border-radius: 2px; background: var(--sk-block); }
.sk-actions { display: grid; flex: none; grid-template-columns: 1fr 1fr; grid-auto-rows: 36px; gap: 8px; height: 119px; padding: 10px 5px 0; border-top: 1px solid var(--editor-divider); }
.sk-actions span { border-radius: 4px; background: var(--editor-field); }
.sk-actions .sk-export { position: relative; z-index: 2; grid-column: 1 / -1; background: var(--sk-export); }

/* Stacked for a phone, row for row with phone.css. */
.sk-bar { display: none; }
@media (max-width: 800px), (max-height: 500px) {
  #startup-screen { height: 100dvh; --sk-playback: 44px; }
  .sk { grid-template: "toolbar" 44px "stage" minmax(0, 1fr) "playback" var(--sk-playback) "panel" minmax(0, 1.15fr) "tabs" 54px / minmax(0, 1fr); }
  .sk-work { display: contents; }
  .sk-toolbar { grid-area: toolbar; }
  .sk-history { position: static; margin: 0 22px 0 auto; transform: none; }
  .sk-stage { grid-area: stage; }
  .sk-playback { grid-area: playback; padding: 0 3px; }
  .sk-library { grid-area: panel; }
  .sk-tray, .sk-side, .sk-foot { display: none; }
  .sk-artboard { width: min(94cqw, 75.2cqh); }
  .sk-play { width: 38px; height: 38px; }
  .sk-tabs { height: 40px; }
  .sk-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .sk-bar { grid-area: tabs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; }
  .sk-bar > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 4px; }
  .sk-bar > span:first-child { background: var(--editor-field); }
  .sk-bar > span > span { width: 20px; height: 20px; border-radius: 4px; background: var(--sk-block); }
  .sk-bar > span > span + span { width: 44px; height: 7px; border-radius: 2px; background: var(--sk-mark); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sk { grid-template: "toolbar panel" 44px "stage panel" minmax(0, 1fr) "playback tabs" var(--sk-playback) / minmax(0, 1fr) minmax(0, 1fr); }
  .sk-bar > span { flex-direction: row; }
}

/* Still words for a screen reader. On screen they appear only if loading fails. */
.startup-message { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#startup-title { margin: 0 0 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
#startup-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ui-secondary); }
#startup-retry { margin-top: 16px; }
#startup-screen[data-failed] .sk { opacity: .45; }
#startup-screen[data-failed] .sk::after, #startup-screen[data-failed] .sk-cards { display: none; }
#startup-screen[data-failed] .startup-message {
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(300px, calc(100vw - 48px));
  height: auto;
  padding: 20px;
  overflow: visible;
  border: 1px solid var(--editor-divider);
  border-radius: 8px;
  background: var(--panel);
  transform: translate(-50%, -50%);
  clip-path: none;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  #startup-screen { transition: none; }
  .sk::after { display: none; }
  .sk-in, .sk-card { animation: none; }
  .sk-card:nth-child(2) { transform: translate3d(-3.5%, -1.5%, 20px) rotate(-1.5deg); }
  .sk-card:nth-child(3) { transform: translate3d(-7%, -3%, 10px) rotate(-3deg); }
  .sk-card:nth-child(1) { transform: translate3d(0, 0, 30px); }
  .sk-fill, .sk-knob { transition: none; }
}