/* Animation Studio skin using the Jay, Kay & Elle suite tokens. */
:root {
  --ink: #31264e;
  --muted: #6d627d;
  --paper: #fffdf8;
  --lav: #f2ebff;
  --line: #e4dcef;
  --purple: #8056c7;
  --coral: #e84473;
  --shadow: 0 12px 28px rgb(49 38 78 / 12%);
}

body.jke-platform-page {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgb(255 225 235 / 84%) 0 18%, transparent 34%),
    radial-gradient(circle at 92% 4%, rgb(226 244 255 / 88%) 0 16%, transparent 32%),
    linear-gradient(145deg, #fff4ce 0%, #f8f2ff 52%, #e5faf4 100%);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

.jke-platform-page .studio {
  min-height: calc(100vh - var(--jke-platform-height));
  min-height: calc(100dvh - var(--jke-platform-height));
  background: transparent;
}

.jke-platform-page .topbar {
  background: rgb(255 253 248 / 88%);
  border-bottom-color: rgb(49 38 78 / 12%);
  box-shadow: 0 5px 18px rgb(49 38 78 / 7%);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.jke-platform-page .brand-mark,
.jke-platform-page button.primary {
  background: linear-gradient(135deg, #e84473, #8056c7);
  border-color: transparent;
}

.jke-platform-page .brand b {
  letter-spacing: -0.02em;
}

.jke-platform-page button,
.jke-platform-page .button {
  border-color: rgb(49 38 78 / 13%);
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 2px 5px rgb(49 38 78 / 5%);
}

.jke-platform-page button:hover,
.jke-platform-page .button:hover {
  background: #f4edff;
  border-color: rgb(128 86 199 / 38%);
}

.jke-platform-page .panel,
.jke-platform-page .asset-tray {
  border-color: rgb(255 255 255 / 78%);
  background: rgb(255 253 248 / 80%);
  box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 86%);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.jke-platform-page .stage-wrap {
  background: linear-gradient(145deg, #d9caef, #f3e4ed);
}

.jke-platform-page .asset-tabs button.active {
  color: #8f3158;
  box-shadow: inset 0 -3px #e84473;
}

.jke-platform-page .scene-card.active,
.jke-platform-page .scene-card[aria-current="true"] {
  background: linear-gradient(135deg, #f2ebff, #ffe9f1);
  outline-color: #c9aee5;
}

.jke-platform-page .clip {
  background: #dcc9fa;
}

.jke-platform-page .clip.walk { background: #ffe0a8; }
.jke-platform-page .clip.talk { background: #bce9d9; }

.jke-platform-page .timeline,
.jke-platform-page .storyboard,
.jke-platform-page .inspector {
  border-color: rgb(255 255 255 / 78%);
}

.jke-platform-page dialog {
  border: 1px solid rgb(255 255 255 / 86%);
  background: #fffdf8;
}

.jke-platform-page :focus-visible {
  outline-color: #7b4ed8;
}

@media (max-width: 650px) {
  .jke-platform-page .jke-platform-current { display: none; }
  .jke-platform-page .studio { min-height: calc(100dvh - 58px); }
}

.jke-platform-page .studio { grid-template-rows: auto minmax(490px, 1fr) 226px; }
.jke-platform-page .topbar { flex-wrap: wrap; }
.jke-platform-page .toolbar { flex-wrap: wrap; }
.jke-platform-page .scene-card { grid-template-columns: 56px minmax(0, 1fr) 24px; }
.jke-platform-page .scene-card img { width: 56px; }
.jke-platform-page .field label, .jke-platform-page .asset b { font-size: 14px; }
.jke-platform-page .asset small, .jke-platform-page .scene-card small { font-size: 12px; }
.jke-platform-page .mobile-studio { grid-template-rows: auto 1fr 164px; }
.jke-platform-page .mobile-studio .toolbar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 4px 0; }
.jke-platform-page .mobile-studio .toolbar button,
.jke-platform-page .mobile-studio .toolbar .file-button { display: inline-flex; flex: 0 0 auto; font-size: 14px; }
.jke-platform-page .mobile-studio .save-state { display: inline; flex: 0 0 auto; }
.jke-platform-page .mobile-studio .scene-menu { display: block; }
.empty-stage[hidden] { display: none; }