.studio-home .create-project-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:30px;border:1px solid #40575b;border-radius:14px;background:#192123;color:#dce5e5;text-align:left;box-shadow:0 24px 90px #0009;font:14px/1.6 'Microsoft YaHei',sans-serif}
.create-project-dialog::backdrop{background:#070b0dcc;backdrop-filter:blur(4px)}
.create-project-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px}.create-project-dialog h2{font-size:23px;margin:5px 0 0;font-weight:600}.create-project-dialog header small{font-size:10px;letter-spacing:2px;color:#819c9e}.create-project-dialog header button{background:transparent;border:0;font-size:24px;padding:0 8px}
.create-project-dialog p{font-size:13px;margin:14px 0 24px}.create-project-dialog label{display:block;margin:18px 0 8px;color:#c4d3d3}.studio-home .create-project-dialog input{width:100%;height:44px;border-radius:7px;background:#101719}.create-project-location{display:flex;align-items:center;gap:12px;border:1px solid #3d535a;border-radius:7px;padding:8px 10px;background:#101719}.create-project-location span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#99aeb0}.create-project-location button{flex-shrink:0;font-size:12px}.create-project-dialog .create-project-hint{font-size:12px;line-height:1.8;margin:10px 0 24px;color:#7f9799}.create-project-dialog footer{display:flex;justify-content:flex-end;gap:10px;padding-top:20px;border-top:1px solid #304348}.create-project-dialog footer button{min-width:90px}.create-project-dialog .studio-error{font-size:13px}.studio-home .create-project-dialog input:focus-visible{border-color:#74978c;outline:1px solid #74978c}
.studio-home dialog.create-project-dialog{position:fixed;inset:0;margin:auto;overflow:auto}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .transform\! {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ) !important;
  }

  .resize {
    resize: both;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

:root {
  --bg: #0b0d0e;
  --panel: #141718;
  --line: #303536;
  --text: #e8e4da;
  --muted: #858b88;
  --gold: #c5a365;
  --purple: #aa82cc;
  --green: #69c18a;
  --red: #d06058;
  --blue: #6aaac7;
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--bg);
  width: 100%;
  min-width: 900px;
  min-height: 100%;
  color: var(--text);
  margin: 0;
  overflow: hidden;
}

body {
  font-family: Inter, Microsoft YaHei, PingFang SC, Arial, sans-serif;
}

button, input, select {
  font: inherit;
}

button {
  color: inherit;
}

.resource-inline-name {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: inherit;
  font: inherit;
  background: #101617;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 2px 4px;
}

.swipe-sound-settings > section {
  border-top: 1px solid #2d3a38;
  padding: 10px 0;
}

.swipe-sound-settings h4 {
  color: #bac9c8;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
}

.button-sound-settings {
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  display: flex;
}

.button-sound-settings > label {
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.button-sound-settings input[type="range"] {
  flex: 1;
  min-width: 80px;
}

.button-sound-settings input[type="number"] {
  width: 80px;
}

.button-sound-settings small {
  color: #91a1a6;
  font-size: 11px;
}

.button-keyboard-settings {
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  display: flex;
}

.button-keyboard-settings > label {
  align-items: center;
  gap: 8px;
  display: flex;
}

.button-keyboard-settings input:not([type="checkbox"]) {
  width: 130px;
  min-width: 0;
}

.button-keyboard-settings small {
  color: #91a1a6;
  max-width: 230px;
  font-size: 11px;
}

:where(:focus, :focus-visible) {
  outline: none;
}

body {
  cursor: default;
}

:where(body *) {
  cursor: inherit;
  -webkit-user-select: none;
  user-select: none;
  caret-color: #0000;
}

input:not([type]), input:is([type="text"], [type="password"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="number"]), textarea, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], :where([contenteditable=""] *, [contenteditable="true"] *, [contenteditable="plaintext-only"] *) {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  caret-color: auto;
}

input:read-only, textarea:read-only, input:disabled, textarea:disabled, [contenteditable="false"], [contenteditable="false"] * {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  caret-color: #0000;
}

.node-editor img {
  -webkit-user-drag: none;
}

.node-editor {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding-left: var(--resource-manager-width, 420px);
  background: var(--bg);
  overflow: hidden;
}

.node-toolbar {
  border-bottom: 1px solid var(--line);
  background: #101314;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 14px;
  display: grid;
}

.node-brand {
  text-align: center;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.node-brand strong {
  letter-spacing: .05em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(42vw, 540px);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
}

.node-brand > span {
  color: var(--gold);
  letter-spacing: .22em;
  font-size: 7px;
}

.toolbar-project {
  scrollbar-width: thin;
  flex-wrap: nowrap;
  justify-self: stretch;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.toolbar-project > * {
  flex-shrink: 0;
}

.toolbar-project button {
  color: #c2c5c0;
  cursor: pointer;
  background: #181c1d;
  border: 1px solid #3a403f;
  border-radius: 3px;
  min-width: 56px;
  height: 32px;
  padding: 0 12px;
  font-size: 9px;
}

.toolbar-project button:hover {
  color: #efe7d7;
  background: #25231e;
  border-color: #6b5b3e;
}

.toolbar-save-status {
  color: #9fb4ad;
  white-space: nowrap;
  gap: 2px;
  min-width: 0;
  font-size: 9px;
  line-height: 1.2;
  display: grid;
}

.toolbar-save-status > span:last-child {
  color: #c4d3cc;
}

.toolbar-test-flow {
  color: #d6f1de;
  cursor: pointer;
  background: #214b32;
  border: 1px solid #47745a;
  border-radius: 4px;
  justify-self: end;
  min-width: 88px;
  height: 34px;
  padding: 0 16px;
  font-size: 11px;
}

.toolbar-test-flow:hover {
  color: #fff;
  background: #2f5a40;
  border-color: #71ad88;
}

.node-workspace {
  grid-template-columns: minmax(0, 1fr);
  height: calc(100vh - 64px);
  display: grid;
}

.graph-area {
  background: #0d1011;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.primary-toolbox {
  border-left: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
  padding: 16px 14px;
}

.primary-tool-list {
  gap: 12px;
  display: grid;
}

.primary-tool-button {
  text-align: left;
  cursor: pointer;
  background: #111617;
  border: 1px solid #3d4645;
  border-radius: 5px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 78px;
  padding: 12px 14px;
  transition: border-color .14s, background-color .14s, transform .14s;
  display: grid;
}

.primary-tool-button:hover {
  transform: translateY(-1px);
}

.primary-tool-button > b {
  letter-spacing: .04em;
  border-radius: 4px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 16px;
  display: grid;
}

.primary-tool-button > span {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.primary-tool-button strong {
  color: #eef1ec;
  letter-spacing: .04em;
  font-size: 14px;
  font-weight: 600;
}

.primary-tool-button em {
  color: #77817e;
  font-size: 9px;
  font-style: normal;
  line-height: 1.45;
}

.test-flow-tool {
  background: linear-gradient(135deg, #13251a, #121918);
  border-color: #315f40;
}

.test-flow-tool:hover {
  background: linear-gradient(135deg, #193722, #16211b);
  border-color: #5ba672;
}

.test-flow-tool > b {
  color: #bdeacb;
  background: #21492e;
}

.ui-editor-tool {
  background: linear-gradient(135deg, #132329, #12191b);
  border-color: #3d606b;
}

.ui-editor-tool:hover {
  background: linear-gradient(135deg, #18323a, #162126);
  border-color: #6599a9;
}

.ui-editor-tool > b {
  color: #c7e9f2;
  background: #23434d;
  font-size: 12px;
}

.side-heading {
  border-bottom: 1px solid #252929;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
}

.node-inspector > .side-heading {
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  margin-inline: -14px;
  padding-inline: 14px;
}

.side-heading > div {
  gap: 3px;
  display: grid;
}

.side-heading small {
  color: #626966;
  letter-spacing: .18em;
  font-size: 7px;
}

.side-heading strong {
  letter-spacing: .06em;
  font-size: 11px;
}

.side-heading .inspector-node-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  max-width: 190px;
  overflow: hidden;
}

.inspector-name-input {
  color: #eee8dc;
  letter-spacing: .04em;
  background: #0d1011;
  border: 1px solid #77623f;
  border-radius: 2px;
  width: 190px;
  height: 26px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
}

.infinite-canvas {
  cursor: default;
  touch-action: none;
  background-color: #0e1112;
  background-image: radial-gradient(circle, #34393a 1px, #0000 1.2px);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.infinite-canvas.panning {
  cursor: grabbing;
}

.infinite-canvas.selecting, .infinite-canvas.cutting {
  cursor: crosshair;
}

.infinite-canvas.file-drag-active {
  box-shadow: inset 0 0 0 2px #c5a365a6, inset 0 0 100px #c5a36514;
}

.world-layer {
  transform-origin: 0 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.node-group-frame {
  box-sizing: border-box;
  pointer-events: none;
  background: #5b707c17;
  border: 1px solid #535f68;
  border-radius: 7px;
  position: absolute;
}

.node-group-frame.selected {
  border-color: #b8cdd7;
  box-shadow: 0 0 0 2px #91b6c533;
}

.value-canvas-node.value-container.focused, .node-group-frame.focused, .group-call-node.marker.focused {
  outline-offset: 5px;
  outline: 4px solid #e5fbff;
  animation: 1s ease-in-out 3 group-focus;
}

@keyframes group-focus {
  0%, 100% {
    outline-offset: 5px;
    outline-color: #8cdaeb;
    box-shadow: 0 0 0 3px #59cce877, 0 0 20px #71dfff88;
  }

  35%, 55% {
    outline-offset: 11px;
    outline-color: #fff;
    box-shadow: 0 0 0 7px #8eeaffcc, 0 0 0 14px #6ddcfa44, 0 0 52px 12px #82e4ffcc;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-canvas-node.value-container.focused, .node-group-frame.focused, .group-call-node.marker.focused {
    outline-offset: 8px;
    outline: 5px solid #fff;
    animation: none;
    box-shadow: 0 0 0 12px #67d9f477, 0 0 36px #82e4ff;
  }
}

.node-group-frame > header {
  pointer-events: auto;
  cursor: grab;
  background: #303b42;
  border-radius: 6px 6px 0 0;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 14px;
  display: flex;
}

.node-group-title {
  color: #e4e9eb;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 8em;
  width: 8em;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
}

.node-group-title input {
  width: 100%;
}

.node-group-frame .group-status {
  color: #b6c3cb;
  background: none;
  border: 0;
  flex-shrink: 0;
  padding: 5px;
  font-size: 10px;
}

.node-group-frame .group-status.issue {
  color: #e6b78f;
}

.group-usage {
  color: #97a6b0;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
}

.node-group-frame .group-status:not(.issue) {
  display: none;
}

.node-group-frame .group-call-icon {
  cursor: copy;
  background: #48596c;
  border: 0;
  border-radius: 4px;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  display: grid;
}

.group-call-icon img, .group-call-node > img {
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert();
  opacity: .92;
  width: 22px;
  height: 22px;
}

.node-group-frame .group-call-icon:hover {
  outline-offset: 2px;
  background: #627e98;
  outline: 1px solid #aecbdf;
}

.group-call-icon:hover img {
  opacity: 1;
}

.node-group-frame > .input-port, .group-call-node > .input-port {
  pointer-events: auto;
  top: 19px;
}

.node-group-frame > .output-port.default, .group-call-node > .output-port.default {
  pointer-events: auto;
  top: 16px;
  bottom: auto;
}

.node-group-frame .group-resize {
  cursor: nwse-resize;
  pointer-events: auto;
  background: none;
  border: 3px solid #889ba6;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}

.group-call-node {
  z-index: 3;
  box-sizing: border-box;
  cursor: grab;
  background: #303b42;
  border: 1px solid #6a7e8b;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  width: 200px;
  height: 52px;
  padding: 0 18px;
  display: flex;
  position: absolute;
}

.group-call-node strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e1e7eb;
  flex: 1;
  min-width: 0;
  font: 600 12px / 1.4 Microsoft YaHei, sans-serif;
  overflow: hidden;
}

.group-call-node > img {
  flex: 0 0 22px;
}

.node-editor .group-call-node.marker-alias {
  background: #393044;
  border-color: #9a83ad;
}

.node-editor .group-call-node.marker-alias.selected {
  border-color: #d2e7ef;
}

.node-editor .group-call-node.marker {
  background: #393044;
  border-color: #9a83ad;
}

.node-editor .group-call-node.marker.selected {
  border-color: #d2e7ef;
}

.group-call-node.marker input.marker-name {
  color: #e1e7eb;
  background: #24212b;
  border: 0;
  outline: 1px solid #a6ced8;
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 0;
  font: 600 12px / 1.4 Microsoft YaHei, sans-serif;
}

.node-editor .group-call-node .marker-alias-drag {
  cursor: grab;
  background: none;
  border: 0;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
}

.group-call-node .marker-alias-drag img {
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert();
  opacity: .92;
  width: 22px;
  height: 22px;
}

.group-call-node .marker-alias-drag:hover {
  filter: brightness(1.2);
}

.group-call-node.selected {
  border-color: #d2e7ef;
  box-shadow: 0 0 0 2px #a1d7e64d;
}

.group-call-node.has-issue {
  border-color: #cf956b;
}

.group-call-node.drag-preview {
  opacity: .6;
  pointer-events: none;
  z-index: 20;
}

.node-group-membership {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8f8b94;
  pointer-events: none;
  max-width: 135px;
  font-size: 9px;
  position: absolute;
  bottom: 14px;
  left: 9px;
  overflow: hidden;
}

.graph-connections {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.edge-line {
  fill: none;
  stroke: #59605f;
  stroke-width: 2px;
}

.graph-edge.media .edge-line {
  stroke: #63b1cbd1;
}

.graph-edge.option .edge-line {
  stroke: #69c18ac2;
}

.graph-edge.default .edge-line {
  stroke: #c5a365ba;
}

.graph-edge.selected .edge-line {
  stroke: #f0dfb9;
  stroke-width: 3px;
  filter: drop-shadow(0 0 4px #f0dfb980);
}

.connection-preview .edge-line {
  stroke-width: 2.5px;
  stroke-dasharray: 7 5;
  filter: drop-shadow(0 0 4px #c5a36573);
  pointer-events: none;
}

.edge-hit {
  fill: none;
  stroke: #0000;
  stroke-width: 16px;
  pointer-events: stroke;
  cursor: pointer;
}

.selection-marquee {
  fill: #61a0bd1f;
  stroke: #65a8c4;
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.connection-cut-line {
  stroke: #e26f65;
  stroke-width: 2px;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #e26f658c);
  pointer-events: none;
}

.canvas-tools {
  z-index: 20;
  background: #111415f0;
  border: 1px solid #343939;
  border-radius: 4px;
  align-items: center;
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
  overflow: hidden;
  box-shadow: 0 7px 20px #00000040;
}

.canvas-tools button, .canvas-tools span {
  color: #a8adaa;
  background: none;
  border: 0;
  border-right: 1px solid #303535;
  place-items: center;
  height: 28px;
  font-size: 9px;
  display: grid;
}

.canvas-tools button {
  cursor: pointer;
  min-width: 29px;
}

.canvas-tools button.canvas-zoom-value {
  color: #777d7a;
  min-width: 52px;
  font: 8px / 1 Arial, sans-serif;
}

.canvas-tools button:hover {
  color: #fff;
  background: #282d2d;
}

.canvas-tools span {
  color: #777d7a;
  min-width: 42px;
  font: 8px / 1 Arial, sans-serif;
}

.canvas-tools button:last-child {
  border-right: 0;
  padding-inline: 9px;
}

.node-editor button:not(.input-port):not(.output-port):not(.video-track-handle):not(.clip-handle), .node-editor input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .node-editor select {
  border-radius: 7px;
}

.connection-notice {
  z-index: 20;
  color: #777d7a;
  white-space: nowrap;
  pointer-events: none;
  background: #111415eb;
  border: 1px solid #303535;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  max-width: 52%;
  padding: 7px 12px;
  font-size: 8px;
  display: flex;
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
}

.connection-notice.active {
  color: #ddc795;
  pointer-events: auto;
  border-color: #77623f;
}

.connection-notice button {
  color: #d2bb8d;
  cursor: pointer;
  background: none;
  border: 1px solid #5e5037;
  border-radius: 2px;
  padding: 2px 5px;
  font-size: 7px;
}

.canvas-drop-hint {
  z-index: 30;
  opacity: 0;
  color: #d7c396;
  pointer-events: none;
  background: #0d1011eb;
  border: 1px dashed #c5a365ad;
  border-radius: 6px;
  justify-items: center;
  gap: 6px;
  padding: 18px 28px;
  transition: opacity .12s, transform .12s;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.97);
}

.canvas-drop-hint b {
  font-size: 12px;
}

.canvas-drop-hint span {
  color: #858b88;
  font-size: 8px;
}

.file-drag-active .canvas-drop-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.canvas-context-menu {
  z-index: 80;
  background: #141718fc;
  border: 1px solid #454b49;
  border-radius: 8px;
  width: 190px;
  padding: 6px;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 14px 36px #0000008f;
}

.canvas-context-menu > button {
  color: #ded7e4;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  width: 100%;
  padding: 9px 10px;
  font-size: 11px;
  display: block;
}

.canvas-context-menu > button:hover {
  background: #29232d;
}

.canvas-context-menu > button.set-entry:hover {
  background: #1d3525;
}

.graph-node {
  z-index: 3;
  cursor: grab;
  background: #15191a;
  border: 1px solid #3a4040;
  border-radius: 5px;
  position: absolute;
  box-shadow: 0 10px 28px #00000059;
}

.graph-node.selected {
  border-color: #c1a466;
  box-shadow: 0 0 0 2px #c1a4662b, 0 12px 30px #0000006b;
}

.graph-node.entry:after {
  content: "";
  z-index: -1;
  border: 2px solid var(--green);
  pointer-events: none;
  border-radius: 8px;
  position: absolute;
  inset: -4px;
  box-shadow: 0 0 10px #69c18a47;
}

.entry-node-flag {
  z-index: -2;
  pointer-events: none;
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  top: -24px;
  left: 11px;
}

.video-node, .image-node {
  width: 260px;
}

.image-node {
  border-color: #36515c;
}

.action-node {
  background: #18151c;
  border-color: #4b3d55;
  width: 240px;
}

.graph-node > header {
  cursor: grab;
  border-bottom: 1px solid #303535;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: flex;
}

.graph-node > header:active {
  cursor: grabbing;
}

.graph-node > header strong {
  color: #d2d0c8;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  cursor: inherit;
  font-size: 9px;
  font-weight: 600;
  overflow: hidden;
}

.graph-node > header span {
  color: #68706d;
  letter-spacing: .08em;
  margin-left: auto;
  font: 7px / 1 Arial, sans-serif;
}

.action-node > header {
  border-bottom-color: #3d3342;
}

.action-node-issue {
  z-index: 12;
  color: #fff;
  pointer-events: none;
  background: #d24d4d;
  border: 2px solid #2a0f10;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font: 700 14px / 1 Arial, sans-serif;
  display: grid;
  position: absolute;
  top: -10px;
  right: -10px;
  box-shadow: 0 0 0 1px #ff7a7ab8, 0 3px 9px #00000080;
}

.node-edit-button {
  color: #d9c8e3;
  cursor: pointer;
  background: #2a2030;
  border: 1px solid #5b4a65;
  border-radius: 3px;
  height: 24px;
  margin-left: auto;
  padding: 0 9px;
  font-size: 11px;
}

.node-edit-button:hover {
  color: #fff;
  background: #382a40;
  border-color: #8b6e9a;
}

.node-name-input {
  color: #eee8dc;
  background: #0d1011;
  border: 1px solid #77623f;
  width: 145px;
  min-width: 0;
  height: 23px;
  padding: 0 5px;
  font-size: 9px;
}

.action-node > header .node-name-input {
  box-sizing: border-box;
  flex: none;
  width: calc(8em + 12px);
  max-width: 100%;
}

.action-node-thumbnail {
  color: #827889;
  cursor: pointer;
  background: radial-gradient(circle at 50% 42%, #222029, #0d0d10);
  border: 0;
  border-bottom: 1px solid #342d38;
  place-items: center;
  width: 100%;
  height: 132px;
  padding: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.action-node-thumbnail img {
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

.action-node-thumbnail > span {
  letter-spacing: .06em;
  font-size: 10px;
}

.action-node-thumbnail > em {
  color: #c5c2c8;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #030404c2;
  border-radius: 2px;
  padding: 4px 6px;
  font-size: 8px;
  font-style: normal;
  position: absolute;
  bottom: 6px;
  left: 7px;
  right: 7px;
  overflow: hidden;
}

.action-node-thumbnail.empty > em {
  color: #6f6575;
  text-align: center;
  background: none;
  margin-top: -34px;
  position: static;
}

.action-node-thumbnail:hover {
  box-shadow: inset 0 0 0 1px #8d6a9e8c;
}

.graph-node .action-node-thumbnail {
  cursor: grab;
}

.graph-node:active, .graph-node .action-node-thumbnail:active {
  cursor: grabbing;
}

.node-media {
  background: #050606;
  width: 100%;
  height: 126px;
  position: relative;
  overflow: hidden;
}

.node-media img {
  object-fit: cover;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  display: block;
}

.node-media-empty {
  color: #6f7774;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 8px;
  display: grid;
}

.node-media > span {
  color: #ffffffa8;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #000000a6;
  max-width: calc(100% - 14px);
  padding: 3px 5px;
  font-size: 7px;
  position: absolute;
  bottom: 6px;
  left: 7px;
  overflow: hidden;
}

.infinite-canvas:is(.lod-low, .lod-tiny) .node-media img, .infinite-canvas:is(.lod-low, .lod-tiny) .action-node-thumbnail img {
  opacity: 1;
  filter: none;
}

.infinite-canvas.lod-tiny .node-media > span, .infinite-canvas.lod-tiny .action-node-thumbnail > em, .infinite-canvas.lod-tiny .node-summary span, .infinite-canvas.lod-tiny .action-option-list em {
  opacity: 0;
}

.node-summary {
  justify-content: space-between;
  align-items: center;
  height: 61px;
  padding: 0 10px;
  display: flex;
}

.node-summary b {
  font-size: 9px;
  font-weight: 600;
}

.node-summary span {
  color: #747b78;
  font: 8px / 1 Arial, sans-serif;
}

.action-option-list > div {
  border-bottom: 1px solid #302936;
  grid-template-columns: minmax(55px, 1fr) auto;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 10px;
  display: grid;
  position: relative;
}

.action-option-list > div > b {
  color: #d8c9e1;
  border: 1px solid #51465a;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: STKaiti, KaiTi, serif;
  font-size: 13px;
  display: grid;
}

.action-option-list > div > span {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  overflow: hidden;
}

.action-option-list > div > em {
  color: #776e7c;
  font: 7px / 1 Arial, sans-serif;
}

.input-port {
  z-index: 8;
  cursor: crosshair;
  background: #1a1e1f;
  border: 2px solid #8f9592;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  top: 57px;
  left: -7px;
}

.action-node .input-port.event {
  border-color: #a78ab8;
  top: 48px;
}

.action-node .input-port.media-input {
  border-color: #63b1cb;
  top: 75px;
}

.input-port-label {
  z-index: 7;
  color: #746c78;
  pointer-events: none;
  font-size: 7px;
  position: absolute;
  left: 10px;
}

.input-port-label.event {
  top: 51px;
}

.input-port-label.media-input {
  color: #668d99;
  top: 78px;
}

.input-port:hover {
  background: var(--gold);
  transform: scale(1.25);
}

.input-port.connection-target {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px #c5a3651f, 0 0 9px #c5a36573;
}

.output-port {
  z-index: 9;
  color: #8c928f;
  cursor: grab;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 3px 0 3px 7px;
  font-size: 7px;
  display: flex;
  position: absolute;
  right: -8px;
}

.output-port.connecting {
  cursor: grabbing;
}

.output-port i {
  background: #171b1c;
  border: 2px solid #929895;
  border-radius: 50%;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
}

.output-port:hover i, .output-port.connecting i {
  background: var(--gold);
  transform: scale(1.18);
  box-shadow: 0 0 8px #c5a3658c;
}

.output-port.media {
  background: none;
  width: 18px;
  height: 18px;
  padding: 2px;
  top: 88px;
  right: -10px;
}

.output-port.media i {
  border-color: #63b1cb;
}

.output-port.option {
  background: none;
  width: 18px;
  height: 18px;
  padding: 2px;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

.output-port.option i {
  border-color: var(--green);
}

.output-port.default {
  color: #d3b87e;
  bottom: 12px;
}

.output-port.default i {
  border-color: var(--gold);
}

.source-path-card {
  border: 1px solid #343a39;
  border-left: 3px solid var(--blue);
  background: #101415;
  gap: 6px;
  margin: 12px 0;
  padding: 10px 12px;
  display: grid;
}

.source-path-card span {
  color: #71858d;
  letter-spacing: .06em;
  font-size: 9px;
}

.source-path-card strong {
  overflow-wrap: anywhere;
  color: #d4dfe2;
  font: 9.5px / 1.5 Consolas, monospace;
}

.source-path-card em {
  color: #778582;
  font-size: 8px;
  font-style: normal;
  line-height: 1.45;
}

.source-path-card button {
  color: #a9cedc;
  cursor: pointer;
  background: #18252a;
  border: 1px solid #3c5a66;
  border-radius: 3px;
  justify-self: start;
  padding: 6px 10px;
  font-size: 9px;
}

.inspector-type {
  border-left: 2px solid var(--gold);
  background: #111415;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 12px;
  padding: 9px 10px;
  display: flex;
}

.inspector-type.action {
  border-left-color: var(--purple);
}

.inspector-type.image {
  border-left-color: var(--blue);
}

.inspector-type span {
  color: #858b88;
  font-size: 8px;
}

.inspector-type strong {
  font: 600 10px / 1 Arial, sans-serif;
}

.inspector-preview {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050606;
  width: 100%;
  margin-bottom: 10px;
  display: block;
}

.missing-media {
  color: #b9987e;
  background: #19140f;
  border: 1px dashed #5b4635;
  margin-bottom: 12px;
  padding: 15px 12px;
  font-size: 8px;
  line-height: 1.6;
}

.asset-info, .timeline-source {
  background: #111415;
  border: 1px solid #303535;
  gap: 5px;
  margin-bottom: 12px;
  padding: 9px;
  display: grid;
  position: relative;
}

.asset-info span, .timeline-source span {
  color: #6f7572;
  font-size: 7px;
}

.asset-info strong, .timeline-source strong {
  color: #bfc0ba;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 225px;
  font-size: 8px;
  font-weight: 500;
  overflow: hidden;
}

.asset-info em, .timeline-source em {
  color: #777d7a;
  font: 7px / 1 Arial, sans-serif;
  position: absolute;
  top: 22px;
  right: 9px;
}

.timeline-source {
  padding: 9px;
}

.timeline-source span {
  font-size: 9px;
}

.timeline-source strong {
  max-width: 230px;
  font-size: 10px;
}

.timeline-source em {
  font-size: 9px;
  top: 24px;
  right: 9px;
}

.inspector-field {
  gap: 5px;
  margin-bottom: 8px;
  display: grid;
}

.inspector-field > span {
  color: #969c99;
  font-size: 10px;
}

.inspector-field input {
  color: #e9e6df;
  background: #0e1112;
  border: 1px solid #414746;
  border-radius: 3px;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  font-size: 11px;
}

.number-input {
  position: relative;
}

.number-input input {
  padding-right: 28px;
}

.number-input em {
  color: #6f7572;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  top: 11px;
  right: 9px;
}

.route-summary {
  background: #111415;
  border-left: 2px solid #747a77;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 9px;
  display: flex;
}

.route-summary span {
  color: #7e8481;
  font-size: 8px;
}

.route-summary strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 185px;
  font-size: 9px;
  overflow: hidden;
}

.entry-button, .delete-node, .layout-editor-button, .add-option-button {
  color: #a5aaa7;
  cursor: pointer;
  background: #171b1c;
  border: 1px solid #3b4140;
  border-radius: 3px;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  font-size: 10px;
}

.entry-button.active {
  color: #d9bf8d;
  background: #272218;
  border-color: #665536;
}

.delete-node {
  color: #bd7771;
  background: none;
  border-color: #533735;
  margin-top: 9px;
}

.delete-node:hover {
  background: #2c1918;
}

.layout-editor-button {
  color: #cfb8df;
  background: #251e2b;
  border-color: #665275;
  margin: 0 0 8px;
}

.add-option-button {
  color: #cdb8dc;
  background: #1d1822;
  border-style: dashed;
  border-color: #665275;
  margin: 2px 0 6px;
}

.empty-inspector {
  color: #747a77;
  border: 1px dashed #363c3b;
  gap: 8px;
  margin-top: 16px;
  padding: 13px;
  display: grid;
}

.empty-inspector b {
  color: #b2b4ae;
  font-size: 10px;
}

.empty-inspector span {
  font-size: 8px;
  line-height: 1.65;
}

.edge-inspector {
  background: #111415;
  border: 1px solid #353a3a;
  margin-top: 15px;
  padding: 12px;
}

.edge-inspector p {
  color: #8d928f;
  margin: 0 0 12px;
  font-size: 9px;
}

.edge-inspector button {
  color: #cb7972;
  cursor: pointer;
  background: none;
  border: 1px solid #5e3936;
  width: 100%;
  padding: 7px;
  font-size: 8px;
}

.action-inspector-summary {
  gap: 12px;
  margin-top: 12px;
  display: grid;
}

.action-inspector-summary > dl {
  background: #101415;
  border: 1px solid #303737;
  margin: 0;
}

.action-inspector-summary > dl div, .inspector-output-summary div {
  border-bottom: 1px solid #252b2b;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 33px;
  padding: 7px 9px;
  display: flex;
}

.action-inspector-summary > dl div:last-child, .inspector-output-summary div:last-child {
  border-bottom: 0;
}

.action-inspector-summary dt, .inspector-output-summary span {
  color: #77817e;
  font-size: 8px;
}

.action-inspector-summary dd {
  color: #c6cbc8;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 190px;
  margin: 0;
  font-size: 8.5px;
  overflow: hidden;
}

.inspector-output-summary {
  background: #101415;
  border: 1px solid #303737;
}

.inspector-output-summary header {
  color: #85908d;
  letter-spacing: .08em;
  border-bottom: 1px solid #303737;
  padding: 8px 9px;
  font-size: 8px;
}

.inspector-output-summary strong {
  color: #666e6b;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  font-size: 8px;
  font-weight: 500;
  overflow: hidden;
}

.inspector-output-summary strong.connected {
  color: #8fc9a4;
}

.inspector-source-row dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 205px;
  overflow: hidden;
  color: #8ca1a6 !important;
  font: 8px / 1.4 Consolas, monospace !important;
}

.layout-modal-backdrop {
  z-index: 100;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--resource-manager-width, 280px);
  background: #090b0c;
  place-items: center;
  padding: 0;
  display: grid;
  position: fixed;
}

.layout-modal {
  width: 100%;
  height: 100dvh;
  box-shadow: none;
  background: #111415;
  border: 0;
  border-radius: 0;
  grid-template-rows: minmax(0, 1fr);
  display: grid;
  position: relative;
  overflow: hidden;
}

.clip-editor-header {
  background: #121617;
  border-bottom: 1px solid #303535;
  align-items: center;
  padding: 0 16px;
  display: flex;
}

.clip-editor-header > div:first-child {
  gap: 4px;
  display: grid;
}

.clip-editor-header small {
  color: #668794;
  letter-spacing: .18em;
  font-size: 10px;
}

.clip-editor-header strong {
  font-size: 16px;
}

.clip-editor-close {
  color: #8f9996;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  font: 300 28px / 1 Arial, sans-serif;
  display: grid;
}

.clip-editor-close:hover {
  color: #f1b0aa;
  background: #ae4d4629;
}

.clip-editor-media-bar {
  background: #0f1314;
  border-bottom: 1px solid #2d3333;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 8px 16px;
  display: flex;
}

.clip-editor-media-bar > div {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
  display: grid;
}

.clip-editor-media-bar small {
  color: #6b8790;
  letter-spacing: .08em;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 10px;
}

.clip-editor-media-bar strong {
  color: #d2d8d5;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.clip-editor-media-bar span {
  color: #687572;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 10px / 1.2 Consolas, monospace;
  overflow: hidden;
}

.clip-editor-media-bar nav {
  flex: none;
  gap: 7px;
  margin-left: auto;
  display: flex;
}

.clip-editor-media-bar button {
  color: #aeb8b5;
  cursor: pointer;
  background: #171c1d;
  border: 1px solid #384444;
  border-radius: 3px;
  height: 32px;
  padding: 0 11px;
  font-size: 11px;
}

.clip-editor-media-bar button:hover {
  color: #fff;
  border-color: #657170;
}

.clip-editor-media-bar button.primary {
  color: #bfe6f1;
  background: #18303a;
  border-color: #477080;
}

.clip-editor-media-bar button.danger {
  color: #cf9994;
  border-color: #5c3d3d;
}

.clip-editor-main {
  background: #090b0c;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.layout-ui-library {
  grid-template-rows: auto minmax(132px, var(--resource-manager-folder-size, 31%)) minmax(0, 1fr) auto;
  background: #111617;
  border-right: 1px solid #303838;
  min-width: 0;
  min-height: 0;
  display: grid;
}

.layout-ui-library > header {
  background: #151a1b;
  border-bottom: 1px solid #2e3635;
  gap: 3px;
  padding: 13px 14px;
  display: grid;
}

.layout-ui-library > header small {
  color: #6d96a2;
  letter-spacing: .15em;
  font-size: 9px;
}

.layout-ui-library > header strong {
  color: #d4ddda;
  font-size: 13px;
}

.layout-ui-library > header span {
  color: #77817e;
  font-size: 10px;
}

.layout-ui-library > header.resource-project-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.resource-project-header > small, .resource-project-header > strong, .resource-project-header > span {
  grid-column: 1;
}

.resource-project-header > button {
  color: #c2c5c0;
  cursor: pointer;
  background: #181c1d;
  border: 1px solid #3a403f;
  border-radius: 3px;
  grid-area: 1 / 2 / 4;
  align-self: center;
  height: 32px;
  padding: 0 12px;
  font-size: 10px;
}

.resource-project-header > button:hover {
  background: #252b2c;
  border-color: #64706e;
}

#level-heading .level-current {
  max-width: min(35vw, 460px);
}

#level-heading .level-current strong {
  flex-shrink: 1;
  min-width: 0;
}

#level-heading .media-detail-local-path {
  max-width: 180px;
}

.layout-ui-library-folders {
  background: #101516;
  border-bottom: 1px solid #2e3635;
  grid-template-rows: 28px minmax(0, 1fr);
  min-height: 0;
  display: grid;
  position: relative;
}

.layout-ui-library-folders:after {
  content: "";
  z-index: 2;
  cursor: row-resize;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
}

.layout-ui-library-folders > header {
  border-bottom: 1px solid #252e2d;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 12px;
  display: flex;
}

.layout-ui-library-folders > header > strong {
  color: #87938e;
  letter-spacing: .04em;
  font-size: 10px;
}

.layout-ui-library-folders > header nav {
  align-items: center;
  gap: 4px;
  margin-left: auto;
  display: flex;
}

.asset-folder-refresh-button {
  color: #86a6aa;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  display: grid;
}

.asset-folder-refresh-button:hover {
  color: #c4e3e6;
  background: #1b2929;
  border-color: #536d67;
}

.asset-folder-add-button {
  color: #86a6aa;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-left: auto;
  padding: 0;
  display: grid;
}

.asset-folder-add-button:hover {
  color: #c4e3e6;
  background: #1b2929;
  border-color: #536d67;
}

.asset-folder-add-button img {
  object-fit: contain;
  filter: brightness(0) saturate() invert(65%) sepia(16%) saturate(708%) hue-rotate(142deg) brightness(91%) contrast(88%);
  width: 17px;
  height: 17px;
  display: block;
}

.asset-folder-add-button:hover img {
  filter: brightness(0) saturate() invert(87%) sepia(22%) saturate(475%) hue-rotate(136deg) brightness(98%) contrast(82%);
}

.layout-ui-library-folders .asset-folder-tree {
  scrollbar-width: none;
  overflow-y: auto;
}

.layout-ui-library-folders .asset-folder-tree::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.layout-ui-library-content {
  scrollbar-width: none;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 10px;
  display: grid;
  overflow-y: auto;
}

.layout-ui-library-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.layout-ui-library-content-title {
  z-index: 1;
  background: #111617;
  border-bottom: 1px solid #293231;
  align-items: center;
  min-height: 28px;
  margin: -10px -10px 1px;
  padding: 0 12px;
  display: flex;
  position: sticky;
  top: -10px;
}

.layout-ui-library-content-title strong {
  color: #c3ccca;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
}

.layout-ui-library-item {
  background: #151b1c;
  border: 1px solid #293433;
  border-radius: 4px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 7px;
  display: grid;
}

.layout-ui-library-item.selected {
  background: #19292e;
  border-color: #68a3b4;
  box-shadow: inset 3px 0 #69bad1;
}

.layout-ui-library-item > i {
  width: min(var(--resource-image-width, 80px), 100%);
  color: #8ab4c1;
  background: none;
  border-radius: 3px;
  justify-self: start;
  place-items: center;
  max-width: 100%;
  height: 80px;
  font-size: 12px;
  font-style: normal;
  display: grid;
  overflow: hidden;
}

.layout-ui-library-item img {
  width: var(--resource-image-width, 80px);
  object-fit: fill;
  flex: none;
  min-width: 0;
  max-width: none;
  height: 80px;
}

.layout-ui-library-item > span {
  text-align: right;
  align-self: start;
  justify-items: end;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
  display: grid;
}

.layout-ui-library-item strong {
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.layout-ui-library-item .resource-kind {
  color: #cbd5d1;
  font-size: 12px;
  line-height: 1.1;
}

.layout-ui-library-item em {
  color: #74827e;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-style: normal;
  overflow: hidden;
}

.layout-ui-library-item .resource-name {
  font-size: 11px;
  line-height: 1.1;
}

.layout-ui-library-item .resource-meta {
  font: 9px / 1 Consolas, monospace;
}

.layout-ui-library > footer {
  color: #66716d;
  border-top: 1px solid #2e3635;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.5;
}

.layout-ui-library > footer.layout-ui-library-toolbar {
  background: #14191a;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
  display: flex;
}

.layout-ui-library-toolbar > span {
  color: #aab5b0;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 54px;
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
}

.layout-ui-library-toolbar > nav {
  flex: none;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.layout-ui-library-toolbar button {
  color: #b9c2be;
  white-space: nowrap;
  cursor: pointer;
  background: #191f20;
  border: 1px solid #414b49;
  border-radius: 3px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 10px;
}

.layout-ui-library-toolbar button:hover:not(:disabled) {
  background: #202829;
  border-color: #62716e;
}

.layout-ui-library-toolbar button.primary {
  color: #d6f1de;
  background: #214b32;
  border-color: #47745a;
}

.layout-ui-library-toolbar button:disabled {
  opacity: .35;
  cursor: default;
}

.persistent-resource-manager {
  z-index: 150;
  width: var(--resource-manager-width, 420px);
  border-right: 1px solid #303838;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 8px 0 24px #0000002e;
}

.ui-editor-empty-page {
  background: #0d1011;
  place-items: center;
  min-width: 0;
  height: calc(100vh - 64px);
  display: grid;
}

.ui-editor-empty-page > div {
  text-align: center;
  background: #111617b8;
  border: 1px dashed #344344;
  border-radius: 6px;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 34px;
  display: grid;
}

.ui-editor-empty-page small {
  color: #6d96a2;
  letter-spacing: .18em;
  font-size: 9px;
}

.ui-editor-empty-page strong {
  color: #dce4e0;
  font-size: 20px;
  font-weight: 500;
}

.ui-editor-empty-page span {
  color: #788581;
  font-size: 11px;
  line-height: 1.7;
}

.ui-editor-empty-page button {
  color: #c7e9f0;
  cursor: pointer;
  background: #173039;
  border: 1px solid #3e6975;
  border-radius: 4px;
  min-width: 108px;
  height: 34px;
  margin-top: 7px;
}

.ui-editor-page {
  background: #0b0f10;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  height: calc(100vh - 64px);
  display: grid;
}

.ui-editor-page-header {
  background: #14191a;
  border-bottom: 1px solid #2b3535;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 20px;
  display: flex;
}

.ui-editor-page-header > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.ui-editor-page-header small {
  color: #6d96a2;
  letter-spacing: .18em;
  font-size: 9px;
}

.ui-editor-page-header strong {
  color: #e0e7e2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  overflow: hidden;
}

.ui-editor-page-header span {
  color: #73807b;
  font-size: 10px;
}

.ui-editor-page-header > button {
  color: #94a09b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: auto;
  font-size: 26px;
}

.ui-editor-page-header > button:hover {
  color: #f0f4ef;
  background: #29302f;
}

.ui-editor-preview-area {
  background: #0a0e0f;
  min-height: 0;
  padding: 20px;
}

.ui-editor-preview-stage {
  background: #121718;
  border: 1px solid #202a2b;
  border-radius: 6px;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: grid;
  position: relative;
  overflow: auto;
  box-shadow: inset 0 0 80px #0000004d;
  container-type: size;
}

.ui-editor-final-preview {
  background: none;
  flex: none;
  margin: 0;
}

.ui-editor-preview-empty {
  color: #71807c;
  text-align: center;
  justify-items: center;
  gap: 8px;
  display: grid;
}

.ui-editor-preview-empty b {
  color: #b8c5c0;
  font-size: 16px;
}

.ui-editor-preview-empty span {
  font-size: 11px;
}

.ui-editor-preview-caption {
  color: #687672;
  letter-spacing: .04em;
  font-size: 10px;
  position: absolute;
  bottom: 16px;
}

.ui-editor-properties-bar {
  box-sizing: border-box;
  background: #151a1b;
  border-top: 1px solid #303a39;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-height: 45vh;
  padding: 10px 12px;
  display: flex;
  overflow: hidden auto;
}

.ui-editor-property-group {
  box-sizing: border-box;
  background: #101617;
  border: 1px solid #2d3a38;
  border-radius: 5px;
  flex: 0 auto;
  align-content: start;
  gap: 7px;
  min-width: 136px;
  max-width: 100%;
  padding: 8px;
  display: grid;
}

.ui-editor-property-group > header {
  color: #d5ddd8;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ui-editor-property-group > header strong {
  white-space: nowrap;
  font-size: 12px;
}

.ui-editor-property-state {
  width: 218px;
}

.ui-editor-property-single, .ui-editor-property-size {
  width: 70px;
  min-width: 70px;
}

.ui-editor-property-state > header {
  gap: 7px;
  display: grid;
}

.ui-editor-property-state > header input {
  color: #dce5e0;
  background: #151c1d;
  border: 1px solid #3d4d4b;
  border-radius: 3px;
  width: 100%;
  height: 30px;
  padding: 0 7px;
  font-size: 11px;
}

.ui-editor-property-state .asset-state-slot {
  padding: 7px;
}

.ui-editor-property-state .asset-state-slot > header {
  display: none;
}

.ui-editor-inline-fields {
  flex-wrap: wrap;
  gap: 7px;
  max-width: 260px;
  display: flex;
}

.ui-editor-inline-fields label, .ui-editor-single-field, .ui-editor-property-size label {
  color: #9ca9a4;
  white-space: nowrap;
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.ui-editor-inline-fields input[type="number"], .ui-editor-single-field input[type="number"], .ui-editor-property-size input {
  color: #e7ece8;
  text-align: center;
  background: #111718;
  border: 1px solid #3b4b49;
  border-radius: 3px;
  width: 54px;
  height: 30px;
  padding: 0 5px;
  font-size: 12px;
}

.ui-editor-inline-fields .ui-component-color {
  width: 54px;
  height: 30px;
  min-height: 30px;
  padding: 3px;
}

.ui-editor-property-size > div {
  gap: 8px;
  display: flex;
}

.ui-editor-size-readout {
  color: #8e9b96;
  white-space: nowrap;
  align-items: end;
  font: 10px / 1.4 Consolas, monospace;
}

.ui-editor-size-readout label {
  min-width: 54px;
}

.ui-editor-property-actions {
  z-index: 2;
  background: #151a1b;
  border-top: 1px solid #293332;
  flex: 1 0 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding: 6px 0 0;
  display: flex;
  position: sticky;
  bottom: -10px;
}

.ui-editor-properties-bar .button-sound-settings {
  gap: 7px;
  width: 250px;
  min-width: 0;
  max-width: 100%;
}

.ui-editor-properties-bar .swipe-image-slot {
  gap: 6px;
  min-height: 42px;
  margin-top: 0;
  padding: 6px 8px;
}

.ui-editor-properties-bar .button-keyboard-settings {
  gap: 7px;
  width: 210px;
  min-width: 0;
  max-width: 100%;
}

.ui-editor-properties-bar .ui-editor-preview-background-controls {
  flex-wrap: wrap;
  align-self: flex-start;
  padding: 8px;
}

.ui-editor-properties-bar .asset-state-slot {
  min-height: 60px;
}

.ui-editor-property-actions button {
  color: #c2cbc6;
  cursor: pointer;
  background: #1a2021;
  border: 1px solid #414b49;
  border-radius: 3px;
  min-width: 62px;
  height: 34px;
}

.ui-editor-property-actions button.primary {
  color: #d6f1de;
  background: #214b32;
  border-color: #47745a;
}

.ui-editor-property-actions button:disabled {
  opacity: .35;
  cursor: default;
}

.ui-editor-preview-background-controls {
  color: #aab8b4;
  white-space: nowrap;
  flex: none;
  align-self: center;
  align-items: center;
  gap: 8px;
  padding: 0 3px;
  font-size: 12px;
  display: flex;
}

.ui-editor-preview-background-controls > div {
  align-items: center;
  gap: 5px;
  display: flex;
}

.ui-editor-preview-background-controls button, .ui-editor-preview-background-controls label {
  cursor: pointer;
  border: 1px solid #455451;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 0 0 0 1px #0000004d;
}

.ui-editor-preview-background-controls button:hover, .ui-editor-preview-background-controls button.selected, .ui-editor-preview-background-controls label.selected {
  border-color: #b7e4e8;
  box-shadow: 0 0 0 2px #71c3d352;
}

.ui-editor-preview-background-controls input {
  opacity: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  inset: 0;
}

.ui-editor-properties-empty {
  color: #75827d;
  place-items: center;
  width: 100%;
  min-height: 78px;
  font-size: 11px;
  display: grid;
}

.media-detail-page .ui-editor-preview-area {
  min-height: 0;
  display: grid;
}

.ui-editor-page-header:has(.media-detail-local-path) {
  height: 64px;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

.ui-editor-page-header > div:has(.media-detail-local-path) {
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 24px;
}

.ui-editor-page-header > div:has(.media-detail-local-path) > small {
  grid-column: 1 / -1;
}

.ui-editor-page-header > div:has(.media-detail-local-path) > strong {
  grid-area: 2 / 1;
  max-width: 32vw;
}

.ui-editor-page-header > div:has(.media-detail-local-path) > span:not(.media-detail-local-path) {
  grid-column: 1 / -1;
}

.ui-editor-page-header:has(.media-detail-local-path) > button, .media-detail-page .ui-editor-page-header > button {
  flex-shrink: 0;
}

.ui-editor-page-header .media-detail-local-path {
  scrollbar-width: none;
  color: #a0a6a5;
  white-space: nowrap;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  grid-area: 2 / 2;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: auto;
}

.media-detail-local-path::-webkit-scrollbar {
  display: none;
}

.media-detail-overlay {
  z-index: 120;
  inset: 0 0 0 var(--resource-manager-width, 420px);
  background: #0b0f10;
  position: fixed;
}

.media-detail-overlay > .ui-editor-page, .media-detail-overlay > .ui-editor-empty-page {
  height: 100%;
}

.media-detail-image-stage, .media-detail-video-stage {
  border: 1px solid #202a2b;
  border-radius: 6px;
  place-items: center;
  min-width: 0;
  min-height: 0;
  display: grid;
  position: relative;
  overflow: auto;
  box-shadow: inset 0 0 80px #0000004d;
}

.media-detail-image-stage img {
  transform-origin: center;
  max-width: none;
  max-height: none;
  transition: transform .1s ease-out;
  display: block;
}

.media-detail-zoom-value {
  z-index: 1;
  color: #aec2bd;
  cursor: pointer;
  background: #101617d9;
  border: 1px solid #384644;
  border-radius: 4px;
  min-width: 48px;
  height: 28px;
  font: 11px Consolas, monospace;
  position: absolute;
  top: 12px;
  left: 12px;
}

.media-detail-video-stage {
  background: #050708;
  overflow: hidden;
}

.media-detail-video-stage video {
  object-fit: contain;
  background: #050708;
  width: 100%;
  height: 100%;
}

.media-detail-bottom-bar {
  min-height: 58px;
}

.media-detail-bottom-bar.image {
  justify-content: flex-start;
}

.media-detail-bottom-bar.video {
  align-items: center;
}

.media-detail-transport {
  align-items: center;
  gap: 8px;
  width: min(720px, 100%);
  margin-inline: auto;
  display: flex;
}

.media-detail-transport > button {
  color: #b8c8c4;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.media-detail-transport > button:hover {
  background: #293231;
}

.media-detail-transport label {
  color: #8d9b97;
  flex: 1;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  font: 10px Consolas, monospace;
  display: grid;
}

.media-detail-transport input {
  accent-color: #6aaaba;
  width: 100%;
  min-width: 0;
}

.clip-editor-content {
  grid-template-rows: auto 8px minmax(230px, 1fr);
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.clip-editor-properties {
  background: #111617;
  border-left: 1px solid #303838;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  display: grid;
}

.clip-editor-properties-header {
  background: #151a1b;
  border-bottom: 1px solid #2e3635;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 10px;
  min-height: 72px;
  padding: 16px 14px;
  display: grid;
}

.operation-header-actions {
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.operation-header-actions button {
  color: #bfcfcb;
  cursor: pointer;
  background: #202928;
  border: 1px solid #354241;
  min-height: 32px;
  padding: 7px 8px;
  font-size: 11px;
}

.operation-header-actions button:hover {
  background: #2b3935;
}

.operation-header-actions .operation-save {
  color: #d8eee2;
  background: #294c3c;
  border-color: #416e57;
}

.operation-header-actions button:disabled {
  opacity: .45;
  cursor: default;
}

.failure-only-setting {
  color: #c8d7d1;
  cursor: pointer;
  background: #171f1e;
  border: 1px solid #303c3b;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 12px;
  display: flex;
}

.failure-only-setting input {
  accent-color: #78b798;
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}

.clip-editor-properties-header > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.clip-editor-properties-header small {
  color: #6d96a2;
  letter-spacing: .15em;
  font-size: 9px;
}

.clip-editor-properties-header strong {
  color: #d4ddda;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.clip-editor-properties-scroll {
  scrollbar-width: thin;
  scrollbar-color: #414849 #15191a;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  display: grid;
  overflow-y: auto;
}

.clip-editor-properties-scroll::-webkit-scrollbar {
  width: 8px;
}

.clip-editor-properties-scroll::-webkit-scrollbar-track {
  background: #15191a;
}

.clip-editor-properties-scroll::-webkit-scrollbar-thumb {
  background: #4c5a59;
  border: 2px solid #15191a;
  border-radius: 6px;
}

.clip-properties-section {
  gap: 10px;
  min-width: 0;
  display: grid;
}

.clip-properties-selection {
  border-top: 1px solid #2e3635;
  padding-top: 10px;
}

.clip-property-selected-media > strong {
  color: #d2d8d5;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.clip-property-selected-media > span {
  color: #71807b;
  font: 10px / 1.35 Consolas, monospace;
}

.clip-property-selected-media > nav {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.clip-property-selected-media {
  gap: 12px;
  padding: 14px;
}

.clip-property-selected-media > header {
  justify-content: space-between;
}

.clip-property-selected-media > .selected-media-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.selected-media-metadata {
  color: #7f9395;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}

.selected-media-metadata b {
  color: #abc0c4;
  font-variant-numeric: tabular-nums;
  margin-left: 5px;
  font-weight: 400;
}

.selected-media-details-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.selected-media-details-row .selected-media-locate {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 4px;
  display: grid;
}

.selected-media-locate img {
  object-fit: contain;
  filter: brightness(0) invert(.85);
  width: 18px;
  height: 18px;
  transition: filter .12s;
}

.selected-media-details-row .selected-media-locate:hover:not(:disabled) {
  background: #ffffff1c;
}

.selected-media-locate:hover:not(:disabled) img {
  filter: brightness(0) invert();
}

.selected-media-details-row .selected-media-locate:disabled {
  opacity: .4;
  cursor: default;
}

.clip-property-selected-media > nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
  display: grid;
}

.clip-property-selected-media > nav > button {
  color: #c3d7dc;
  cursor: pointer;
  background: #202c2f;
  border: 1px solid #405254;
  border-radius: 5px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font: 12px / 1.4 inherit;
}

.clip-property-selected-media > nav > button:hover:not(:disabled) {
  background: #2b3d42;
  border-color: #648892;
}

.clip-property-selected-media > nav > button:disabled {
  opacity: .4;
  cursor: default;
}

.clip-editor-segmented {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.clip-editor-segmented button {
  color: #aeb8b5;
  cursor: pointer;
  background: #171c1d;
  border: 1px solid #384444;
  border-radius: 3px;
  min-width: 0;
  height: 32px;
}

.clip-editor-segmented button.active {
  color: #bfe6f1;
  background: #18303a;
  border-color: #477080;
}

.clip-property-card {
  background: #151b1c;
  border: 1px solid #2e3938;
  border-radius: 4px;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  display: grid;
}

.clip-properties-selection.media-selected > section:not(.clip-property-selected-media), .clip-properties-selection.media-selected > section.clip-property-selected-media ~ section.clip-property-selected-media {
  display: none;
}

.clip-property-card > header {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.clip-property-card > header strong {
  color: #cbd5d1;
  font-size: 12px;
}

.clip-property-card > header span {
  color: #6f7b77;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.clip-property-media > strong {
  color: #d2d8d5;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.clip-property-media > span {
  color: #71807b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 10px / 1.35 Consolas, monospace;
  overflow: hidden;
}

.clip-property-media nav, .clip-property-actions, .clip-property-fields {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.clip-property-media nav button, .clip-property-actions button, .clip-property-fields button, .clip-property-fields select {
  color: #aeb8b5;
  cursor: pointer;
  background: #171c1d;
  border: 1px solid #384444;
  border-radius: 3px;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  font-size: 11px;
}

.clip-property-media nav button:hover, .clip-property-actions button:hover:not(:disabled), .clip-property-fields button:hover {
  color: #fff;
  border-color: #657170;
}

.clip-property-media nav button.primary, .clip-property-fields button.open-ui-library, .clip-property-actions button.add {
  color: #bfe6f1;
  background: #18303a;
  border-color: #477080;
}

.clip-property-media nav button.danger, .clip-property-actions button.danger {
  color: #cf9994;
  border-color: #5c3d3d;
}

.clip-property-media nav button:disabled, .clip-property-actions button:disabled, .clip-property-fields button:disabled, .clip-property-fields select:disabled {
  opacity: .35;
  cursor: default;
}

.clip-property-fields select {
  flex: 130px;
}

.clip-property-fields label {
  color: #89958f;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  display: inline-flex;
}

.clip-property-fields label input {
  width: 58px;
}

.clip-editor-properties-footer {
  background: #121617;
  border-top: 1px solid #2e3635;
  justify-content: stretch;
  padding: 10px 12px 12px;
  display: flex;
}

.clip-editor-properties-footer .clip-editor-complete-button {
  width: 100%;
}

.clip-editor-workspace {
  background: #090b0c;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  display: grid;
  overflow: hidden;
}

.clip-editor-preview {
  grid-template-rows: auto;
  justify-items: center;
  width: 100%;
  min-width: 0;
  height: auto;
  display: grid;
}

.layout-stage {
  background: #030404;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px #282e2e, 0 10px 30px #0000006b;
  container-type: size;
}

.layout-stage > video, .layout-stage > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.layout-stage > video {
  cursor: default;
  outline: none;
}

.layout-transport-controls {
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: min(100%, 960px);
  height: 50px;
  padding-top: 7px;
  display: flex;
}

.layout-transport-controls button {
  color: #aeb8b5;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 36px;
  padding: 0;
  display: grid;
}

.layout-transport-controls button:hover:not(:disabled) {
  color: #fff;
  background: #768f941f;
}

.layout-transport-controls button.play-toggle {
  color: #9fdff2;
  width: 44px;
}

.layout-transport-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.clip-editor-resizer {
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #0b0e0f;
  border-top: 1px solid #252d2d;
  border-bottom: 1px solid #252d2d;
  height: 8px;
  position: relative;
}

.transport-icon {
  color: currentColor;
  width: 18px;
  height: 16px;
  display: block;
  position: relative;
}

.transport-icon.play:before {
  content: "";
  border-top: 6px solid #0000;
  border-bottom: 6px solid #0000;
  border-left: 10px solid;
  position: absolute;
  top: 2px;
  left: 5px;
}

.transport-icon.pause:before {
  content: "";
  background: linear-gradient(90deg, currentColor 0 4px, #0000 4px 8px, currentColor 8px 12px);
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  left: 3px;
}

.transport-icon.skip-start:before, .transport-icon.skip-end:after {
  content: "";
  background: currentColor;
  width: 3px;
  height: 12px;
  position: absolute;
  top: 2px;
}

.transport-icon.skip-start:before {
  left: 2px;
}

.transport-icon.skip-end:after {
  right: 2px;
}

.transport-icon.skip-start:after, .transport-icon.skip-end:before {
  content: "";
  border-top: 6px solid #0000;
  border-bottom: 6px solid #0000;
  position: absolute;
  top: 2px;
}

.transport-icon.skip-start:after {
  border-right: 9px solid;
  left: 6px;
}

.transport-icon.skip-end:before {
  border-left: 9px solid;
  right: 6px;
}

.layout-missing {
  color: #867d89;
  place-items: center;
  font-size: 10px;
  display: grid;
  position: absolute;
  inset: 0;
}

.layout-option, .test-option {
  opacity: var(--ui-opacity, 1);
  transform: translate(-50%, -50%) rotate(var(--ui-rotation, 0deg)) scale(var(--ui-scale, 1));
  color: #eee8dc;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  background: radial-gradient(circle, #202424f0, #030404db);
  border: max(1px, .08cqmin) solid #eee8da94;
  border-radius: 3cqmin;
  justify-items: center;
  gap: .28cqmin;
  min-width: 7.2cqmin;
  padding: .65cqmin .95cqmin .56cqmin;
  display: grid;
  position: absolute;
  box-shadow: 0 1cqmin 3.2cqmin #000;
}

.layout-option:active, .test-option:is(:not(.mouse-disabled):active, .keyboard-pressed) {
  transform: translate(-50%, -50%) rotate(var(--ui-rotation, 0deg)) scale(var(--ui-scale, 1)) scale(.92);
  filter: brightness(1.35);
}

.layout-option:active {
  cursor: grabbing;
}

.layout-option b, .test-option b {
  font-family: STKaiti, KaiTi, serif;
  font-size: max(10px, 2.4cqmin);
  line-height: 1;
}

.layout-option span, .test-option span {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12cqmin;
  font-size: max(6px, .74cqmin);
  overflow: hidden;
}

.layout-option.inactive {
  opacity: .28;
  filter: grayscale(.7);
}

.layout-option.active {
  opacity: var(--ui-opacity, 1);
  box-shadow: 0 0 0 max(1px, .18cqmin) #c5a36533, 0 1cqmin 3.2cqmin #000;
}

.layout-option.previewing {
  opacity: var(--ui-opacity, 1);
  filter: none;
}

.layout-option.selected {
  outline-offset: 3px;
  outline: 2px solid #6fc8e2;
}

.layout-option.ui-component-option, .test-option.ui-component-option {
  width: calc(var(--ui-width) * 1cqw);
  height: calc(var(--ui-height) * 1cqw);
  min-width: 0;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.ui-component-option > .ui-component-skin, .ui-component-skin {
  z-index: 1;
  max-width: none;
  font-size: inherit;
  white-space: normal;
  pointer-events: none;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ui-component-skin > img {
  object-fit: fill;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.ui-component-skin {
  filter: drop-shadow(calc(var(--ui-shadow-x, 0) * .1cqmin) calc(var(--ui-shadow-y, 0) * -.1cqmin) calc(var(--ui-shadow-blur, 0) * .1cqmin) rgba(0,0,0,var(--ui-shadow-opacity, .2)));
  transform-origin: center;
  transition: transform .12s, filter .12s;
}

.layout-option .ui-button-text, .test-option .ui-button-text {
  z-index: 2;
  pointer-events: none;
  width: max-content;
  max-width: none;
  transform: translate(var(--ui-text-anchor, -50%), -50%);
  font-size: var(--ui-text-size, 14px);
  text-overflow: clip;
  white-space: pre;
  display: block;
  position: absolute;
  overflow: visible;
}

.layout-option.ui-component-option:hover, .test-option.ui-component-option:not(.mouse-disabled):hover, .layout-option.ui-component-option:active, .test-option.ui-component-option:is(:not(.mouse-disabled):active, .keyboard-pressed) {
  transform: translate(-50%, -50%) rotate(var(--ui-rotation, 0deg));
  filter: none;
}

.layout-option.ui-component-option:hover .ui-component-skin > .ui-state-normal, .test-option.ui-component-option:not(.mouse-disabled):hover .ui-component-skin > .ui-state-normal, .ui-component-preview:hover .ui-component-skin > .ui-state-normal, .layout-option.ui-component-option:hover .ui-button-text, .test-option.ui-component-option:not(.mouse-disabled):hover .ui-button-text {
  filter: brightness(var(--ui-hover-brightness, 1));
}

.layout-option.missing-reference, .test-option.missing-reference {
  color: #111;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 2px;
  min-width: 0;
  padding: 0;
  box-shadow: 0 0 0 1px #0000003d;
}

.ui-missing-reference-label {
  color: #111;
  white-space: nowrap;
  place-items: center;
  width: 100%;
  min-width: 118px;
  min-height: 34px;
  padding: 8px 12px;
  font-size: max(8px, .72cqmin);
  font-weight: 600;
  display: grid;
}

.layout-option.ui-component-option:active .ui-component-skin, .test-option.ui-component-option:is(:not(.mouse-disabled):active, .keyboard-pressed) .ui-component-skin, .ui-component-preview:active .ui-component-skin {
  transform: translateY(calc(var(--ui-pressed-y, 0) * .1cqmin)) scale(var(--ui-pressed-scale, 1));
}

.layout-option.ui-component-option:active .ui-component-skin > .ui-state-normal, .test-option.ui-component-option:is(:not(.mouse-disabled):active, .keyboard-pressed) .ui-component-skin > .ui-state-normal, .ui-component-preview:active .ui-component-skin > .ui-state-normal, .layout-option.ui-component-option:active .ui-button-text, .test-option.ui-component-option:is(:not(.mouse-disabled):active, .keyboard-pressed) .ui-button-text {
  filter: brightness(var(--ui-pressed-brightness, 1));
}

.ui-state-hover, .ui-state-pressed {
  opacity: 0;
}

button:not(.mouse-disabled):hover .ui-component-skin > .ui-state-hover, button:not(.mouse-disabled):active .ui-component-skin > .ui-state-pressed, .test-option.keyboard-pressed .ui-component-skin > .ui-state-pressed {
  opacity: 1;
}

.layout-option.ui-component-option.previewing > .ui-component-skin, .test-option.ui-component-option.previewing > .ui-component-skin, .ui-component-preview.previewing > .ui-component-skin {
  filter: none;
}

.ui-component-placeholder {
  color: #c2e5ee;
  background: #132c34d1;
  border: 1px dashed #8bbecba3;
  border-radius: 8px;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: max(8px, .9cqmin);
  font-style: normal;
  display: grid;
}

.option-click-preview {
  z-index: 0;
  width: 100%;
  height: 100%;
  animation: .38s ease-out forwards option-click-preview;
  animation-duration: calc(.38s / var(--ui-click-speed, 1));
  pointer-events: none;
  transform-origin: center;
  position: absolute;
  inset: 0;
}

.option-click-preview-fallback {
  border-radius: inherit;
  filter: brightness(var(--ui-click-brightness, 1));
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  box-shadow: 0 0 calc(var(--ui-click-blur, 4) * .1cqmin) var(--ui-click-color, #ffdd91e6), 0 0 calc(var(--ui-click-blur, 4) * .22cqmin) var(--ui-click-color, #ffdd918a);
  border: 0;
}

.option-click-preview-alpha {
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  background: none;
  border: 0;
  overflow: visible;
}

.option-click-preview-alpha image {
  width: 100%;
  height: 100%;
}

.clip-timeline-shell {
  background: #0b0e0f;
  border-top: 1px solid #303636;
  border-bottom: 1px solid #303636;
  grid-template-rows: auto minmax(0, 1fr);
  justify-self: center;
  width: 100%;
  height: auto;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.clip-timeline-shell > header {
  background: #15191a;
  border-bottom: 1px solid #282e2e;
  grid-template-rows: 34px auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  min-height: 52px;
  padding: 6px 12px 5px;
  display: grid;
  position: relative;
}

.clip-timeline-shell > header > div {
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.clip-timeline-header-controls {
  grid-area: 1 / 1 / auto / -1;
  justify-content: center;
  justify-self: center;
  align-items: center;
  min-width: 150px;
  display: flex;
}

.layout-snap-toggle {
  color: #80908d;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  place-items: center;
  width: 32px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: grid;
  position: absolute;
  top: 6px;
  left: 12px;
}

.layout-snap-toggle img {
  object-fit: contain;
  opacity: .72;
  filter: brightness(0) saturate() invert(58%) sepia(10%) saturate(477%) hue-rotate(126deg) brightness(91%) contrast(88%);
  width: 19px;
  height: 19px;
}

.layout-snap-toggle:hover {
  background: #1a2d31;
  border-color: #3d5b61;
}

.layout-snap-toggle.active {
  background: #1b3a42;
  border-color: #4d8997;
}

.layout-snap-toggle.active img {
  opacity: 1;
  filter: brightness(0) saturate() invert(80%) sepia(24%) saturate(737%) hue-rotate(148deg) brightness(98%) contrast(91%);
}

.clip-timeline-header-controls .layout-transport-controls {
  gap: 8px;
  width: auto;
  height: 34px;
  padding-top: 0;
}

.clip-timeline-header-controls .layout-transport-controls button {
  width: 32px;
  height: 30px;
}

.clip-timeline-header-controls .layout-transport-controls button.play-toggle {
  width: 38px;
}

.clip-timeline-shell > header strong {
  color: #c9cdca;
  font-size: 13px;
}

.clip-timeline-shell > header span {
  color: #7d8783;
  font-size: 11px;
}

.clip-timeline-shell > header label {
  color: #8d9693;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.clip-timeline-shell > header .clip-timeline-zoom {
  grid-area: 1 / 2 / auto / 4;
  justify-self: end;
}

.clip-timeline-shell > header input {
  accent-color: #5babc3;
  width: 105px;
}

.clip-timeline-shell > header output {
  color: #b9dce6;
  text-align: right;
  grid-area: 2 / 1 / auto / -1;
  justify-self: end;
  width: auto;
  font: 11px / 1 Consolas, monospace;
}

.clip-timeline-scroll {
  scrollbar-color: #414849 #15191a;
  scrollbar-width: thin;
  min-height: 0;
  overflow: scroll hidden;
}

.clip-timeline-scroll::-webkit-scrollbar {
  height: 16px;
}

.clip-timeline-scroll::-webkit-scrollbar-track {
  background: #15191a;
}

.clip-timeline-scroll::-webkit-scrollbar-thumb {
  background: #4c5a59;
  border: 4px solid #15191a;
  border-radius: 10px;
}

.clip-timeline-vertical-scroll {
  scrollbar-width: none;
  height: 100%;
  min-height: 100%;
  overflow: hidden auto;
}

.clip-timeline-vertical-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.clip-timeline-content {
  counter-reset: option-track image-track;
  background-image: linear-gradient(90deg, #0000 calc(100% - 1px), #ffffff09 0);
  background-size: 55px 100%;
  grid-template-rows: 28px minmax(0, 1fr) 62px;
  height: 100%;
  min-height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.clip-timeline-content:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: #151a1b;
  border-right: 1px solid #354040;
  width: 330px;
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 0;
}

.clip-time-ruler {
  cursor: pointer;
  background: #121617;
  border-bottom: 1px solid #303636;
  height: 28px;
  position: relative;
}

.clip-ruler-corner {
  z-index: 12;
  color: #7d8783;
  background: #181d1e;
  border-right: 1px solid #354040;
  place-items: center;
  width: 330px;
  height: 28px;
  font-size: 10px;
  display: grid;
  position: sticky;
  left: 0;
}

.clip-time-ruler > i {
  pointer-events: none;
  border-left: 1px solid #465050;
  width: 1px;
  font-style: normal;
  position: absolute;
  top: 0;
  bottom: 0;
}

.clip-time-ruler > i:after {
  content: "";
  border-left: 1px solid #303737;
  height: 10px;
  position: absolute;
  top: 17px;
  left: -1px;
}

.clip-time-ruler > i b {
  color: #8a9490;
  white-space: nowrap;
  font: 10px / 1 Consolas, monospace;
  position: absolute;
  top: 5px;
  left: 4px;
}

.clip-playhead {
  z-index: 100;
  cursor: ew-resize;
  background: none;
  border: 0;
  outline: 0;
  width: 13px;
  margin-left: -6px;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

.clip-playhead:before {
  content: "";
  z-index: 1;
  background: #f3f1e9;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
}

.clip-playhead > b {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #f3f1e9;
  width: 10px;
  height: 7px;
  position: absolute;
  top: 0;
  left: 1.5px;
}

.layout-timeline-invalid-zone {
  z-index: 20;
  pointer-events: none;
  background: #00000061;
  position: absolute;
  top: 28px;
  bottom: 0;
  right: 0;
}

.clip-track-row {
  cursor: default;
  border-bottom: 1px solid #232929;
  height: 68px;
  position: relative;
}

.clip-track-row.media-track-row {
  background: #3e4e5014;
  height: 58px;
}

.clip-track-row.selected {
  background: #4a80910e;
}

.clip-track-row.track-hidden .clip-track-label {
  color: #5b6662;
}

.clip-track-row.track-hidden > :not(.clip-track-label) {
  opacity: .38;
}

.clip-track-label {
  z-index: 10;
  text-align: left;
  cursor: pointer;
  background: #151a1b;
  border: 0;
  border-right: 1px solid #354040;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 330px;
  height: 100%;
  padding: 6px 12px;
  display: grid;
  position: sticky;
  left: 0;
}

.clip-track-row.selected .clip-track-label {
  background: #1b292d;
}

.clip-track-label > b.track-type-badge {
  color: #a9cdd5;
  background: none;
  border: 0;
  border-radius: 4px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.track-type-icon {
  object-fit: contain;
  opacity: .86;
  filter: brightness(0) saturate() invert(78%) sepia(12%) saturate(521%) hue-rotate(145deg) brightness(92%) contrast(88%);
  width: 19px;
  height: 19px;
  display: block;
}

.clip-track-label > span {
  color: #aeb6b3;
  min-width: 0;
  font-size: 11px;
}

.media-track-label {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.media-track-label > span {
  min-width: 0;
  display: block;
}

.media-track-label > span > strong {
  color: #c3cecb;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.media-track-label > span > strong:after {
  content: "视频";
  font-size: 12px;
}

.media-track-label.image-track-label {
  counter-increment: image-track;
}

.media-track-label.image-track-label > span > strong:after {
  content: "图片" counter(image-track, decimal-leading-zero);
}

.media-track-label strong {
  color: #c3cecb;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.media-track-label em {
  color: #83928d;
  font: 10px / 1 Consolas, monospace;
}

.media-track-label > label {
  color: #a9c6cf;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: inline-flex;
}

.media-track-label > span > em, .media-track-label > label {
  display: none;
}

.media-track-label > label input {
  accent-color: #5db3ce;
  width: 15px;
  height: 15px;
}

.clip-track-controls {
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.clip-track-controls button {
  color: #71807c;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
}

.clip-track-controls button:hover:not(:disabled) {
  color: #d7edf2;
  background: #1a2d31;
  border-color: #3d5b61;
}

.clip-track-controls button:disabled {
  opacity: .25;
  cursor: default;
}

.clip-track-controls button.visibility.active {
  color: #a6d8e4;
  background: #142b31;
  border-color: #315964;
}

.clip-track-controls button.danger:hover:not(:disabled) {
  color: #e29d98;
  background: #2a1d1d;
  border-color: #6a3f3f;
}

.track-control-icon {
  object-fit: contain;
  opacity: .76;
  filter: brightness(0) saturate() invert(53%) sepia(9%) saturate(382%) hue-rotate(128deg) brightness(91%) contrast(86%);
  width: 16px;
  height: 16px;
  display: block;
}

.track-control-icon.icon-up {
  transform: rotate(-90deg);
}

.track-control-icon.icon-down {
  transform: rotate(90deg);
}

.clip-track-controls button:hover:not(:disabled) .track-control-icon {
  opacity: 1;
  filter: brightness(0) saturate() invert(87%) sepia(10%) saturate(640%) hue-rotate(149deg) brightness(103%) contrast(92%);
}

.clip-track-controls button.visibility.active .track-control-icon {
  opacity: 1;
  filter: brightness(0) saturate() invert(79%) sepia(19%) saturate(643%) hue-rotate(145deg) brightness(97%) contrast(91%);
}

.clip-track-controls button.danger:hover:not(:disabled) .track-control-icon {
  filter: brightness(0) saturate() invert(73%) sepia(21%) saturate(1009%) hue-rotate(310deg) brightness(93%) contrast(85%);
}

.video-trim-dim, .video-trim-region {
  position: absolute;
  top: 0;
  bottom: 0;
}

.video-trim-dim {
  z-index: 1;
  background: #040708b8;
}

.video-trim-region {
  z-index: 2;
  background: linear-gradient(90deg, #1f4b39d6, #296048e0);
  border-inline: 1px solid #72d19dcc;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.video-trim-region b {
  color: #bfe8cf;
  white-space: nowrap;
  font: 11px / 1 Consolas, monospace;
}

.video-track-handle {
  z-index: 6;
  cursor: ew-resize;
  touch-action: none;
  background: none;
  border: 0;
  width: 13px;
  height: 44px;
  padding: 0;
  position: absolute;
  top: -5px;
  transform: translateX(-50%);
}

.video-track-handle:after {
  content: "";
  background: currentColor;
  width: 2px;
  position: absolute;
  top: 7px;
  bottom: 2px;
  left: 6px;
  box-shadow: 0 0 5px;
}

.video-track-handle i {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: currentColor;
  width: 11px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 1px;
}

.video-track-handle.start {
  color: #52bfee;
}

.video-track-handle.end {
  color: #55d37e;
}

.timeline-clip {
  color: #e0d5e8;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #392e42;
  border: 1px solid #6c577a;
  border-radius: 3px;
  align-items: center;
  min-width: 28px;
  height: 34px;
  display: flex;
  position: absolute;
  top: 14px;
  overflow: hidden;
}

.layout-basic-clip {
  z-index: 3;
}

.layout-basic-clip.secondary {
  background: #214b39;
  border-color: #4f8b70;
}

.timeline-clip:active {
  cursor: grabbing;
}

.timeline-clip.selected {
  border-color: #9edff0;
  box-shadow: 0 0 0 1px #70d4ff59, 0 0 10px #368da840;
}

.timeline-clip.option > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-left: 9px;
  font-size: 11px;
  overflow: hidden;
}

.timeline-clip.option > em {
  color: #c0aec7;
  margin-left: auto;
  padding: 0 8px;
  font: 10px / 1 Consolas, monospace;
}

.timeline-clip.missing-reference {
  color: #ffd5d2;
  background: #54272a;
  border-color: #bd5a5a;
}

.timeline-clip.missing-reference > span {
  color: #ffd5d2;
  font-weight: 600;
}

.clip-handle {
  z-index: 3;
  cursor: ew-resize;
  background: #ffffff2e;
  border: 0;
  width: 7px;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
}

.clip-handle.start {
  left: 0;
}

.clip-handle.end {
  right: 0;
}

.clip-handle.divider {
  background: #d3d66a;
  width: 5px;
  transform: translateX(-50%);
}

.clip-editor-footer {
  background: #121617;
  border-top: 1px solid #323838;
  min-width: 0;
  display: grid;
}

.clip-editor-footer-actions {
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px 10px;
  display: flex;
  overflow-x: auto;
}

.clip-footer-group {
  border-left: 1px solid #2e3534;
  align-content: center;
  gap: 5px;
  min-width: max-content;
  padding-left: 12px;
  display: grid;
}

.clip-footer-group:first-child {
  border-left: 0;
  padding-left: 0;
}

.clip-footer-group small {
  color: #7f8985;
  letter-spacing: .08em;
  font-size: 10px;
}

.clip-footer-group > span {
  align-items: end;
  gap: 5px;
  display: flex;
}

.clip-footer-group button, .clip-editor-segmented button {
  color: #c9ceca;
  cursor: pointer;
  background: #1a1f20;
  border: 1px solid #424949;
  border-radius: 3px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.clip-footer-group button:hover:not(:disabled), .clip-editor-segmented button:hover {
  color: #edf0eb;
  border-color: #697372;
}

.clip-footer-group button:disabled {
  opacity: .32;
  cursor: default;
}

.clip-footer-group button.add {
  color: #bde4f0;
  background: #17303a;
  border-color: #416b7a;
}

.clip-footer-group button.danger {
  color: #d68b84;
}

.ui-instance-actions > span {
  align-items: center;
}

.ui-instance-actions select {
  color: #cbd3d0;
  background: #101516;
  border: 1px solid #3e4b4d;
  border-radius: 3px;
  width: 150px;
  height: 34px;
  padding: 0 8px;
  font-size: 12px;
}

.ui-instance-actions label {
  color: #84908d;
  border: 1px solid #3e4b4d;
  border-radius: 3px;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 7px;
  font-size: 11px;
  display: inline-flex;
}

.ui-instance-actions label input {
  color: #dbe4e1;
  text-align: center;
  background: none;
  border: 0;
  width: 52px;
}

.ui-instance-actions button.open-ui-library {
  color: #c5e8f1;
  background: #1b333a;
  border-color: #4b7581;
  font-weight: 600;
}

.coordinate-actions button {
  padding-inline: 9px;
}

.clip-editor-segmented {
  background: #0f1213;
  border: 1px solid #343b3b;
  border-radius: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 2px;
  display: grid;
}

.clip-editor-segmented button {
  background: none;
  border: 0;
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
}

.clip-editor-segmented button.active {
  color: #d5eef5;
  background: #29414a;
  box-shadow: inset 0 0 0 1px #477180;
}

.clip-editor-segmented.is-placeholder button {
  cursor: default;
}

.layout-fixed-track-shell {
  display: contents;
}

.layout-fixed-track-scroll {
  overscroll-behavior: contain;
  scrollbar-width: none;
  flex-direction: column;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden auto;
}

.layout-fixed-track-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.layout-fixed-tracks {
  border-top: 1px solid #303636;
  flex: none;
  min-width: 100%;
  margin-top: auto;
  position: relative;
}

.layout-fixed-tracks:before {
  content: "";
  z-index: 15;
  pointer-events: none;
  background: #303636;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.layout-fixed-track-row {
  background: #0b0f10b8;
  border-bottom: 1px solid #232929;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 68px;
  display: grid;
  position: relative;
}

.layout-fixed-track-row.selected {
  background: #4a809114;
}

.layout-fixed-track-row.missing-reference {
  background: #76202629;
}

.layout-fixed-track-row.missing-reference .layout-track-label {
  background: #241719;
  border-right-color: #8b3f43;
}

.layout-track-label.missing-reference > span {
  color: #ffb8b5;
}

.layout-fixed-track-row.track-hidden .layout-track-label {
  color: #5b6662;
}

.layout-fixed-track-row.track-hidden .layout-track-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.layout-track-label {
  z-index: 10;
  cursor: pointer;
  background: #151a1b;
  border-right: 1px solid #354040;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 330px;
  min-height: 68px;
  padding: 6px 12px;
  display: grid;
  position: sticky;
  left: 0;
}

.layout-track-label .track-control.visibility {
  justify-self: start;
}

.layout-track-label > span {
  color: #c3cecb;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.layout-track-label > span > input {
  color: #edf4f1;
  width: 100%;
  min-width: 0;
  font: inherit;
  background: #0f1719;
  border: 1px solid #5a8b99;
  border-radius: 2px;
  outline: none;
  padding: 3px 5px;
}

.layout-track-content {
  background-image: linear-gradient(90deg, #0000 calc(100% - 1px), #ffffff09 0);
  background-size: 55px 100%;
  min-width: 0;
  min-height: 68px;
  position: relative;
}

.layout-item-clip {
  background: #183945;
  border-color: #3f7a8c;
  height: 62px;
  min-height: 0;
  top: 3px;
  left: 0;
}

.layout-item-clip > span, .layout-basic-clip > span {
  color: #d7edf2;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding: 0 9px;
  font-size: 11px;
  overflow: hidden;
}

.layout-item-clip {
  cursor: grab;
}

.layout-item-clip:active {
  cursor: grabbing;
}

.layout-clip-handle {
  z-index: 3;
  cursor: ew-resize;
  touch-action: none;
  background: #7edaee29;
  border: 0;
  width: 9px;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
}

.layout-clip-handle:hover {
  background: #b1edfa8c;
}

.layout-clip-handle.start {
  left: 0;
}

.layout-clip-handle.end {
  right: 0;
}

.layout-basic-track-row {
  z-index: 12;
  background: #3e4e501a;
  grid-row: 3;
  min-height: 124px;
  box-shadow: 0 -4px 10px #00000047;
}

.layout-basic-track-row.selected {
  background: #3a5e6547;
}

.layout-basic-track-row .layout-track-label {
  min-height: 124px;
}

.layout-basic-track-row .layout-track-content {
  background: linear-gradient(#0000 61px, #354040 61px 62px, #0000 62px);
  min-height: 124px;
}

.clip-timeline-content {
  grid-template-rows: 28px minmax(0, 1fr) 124px;
}

.layout-audio-clip {
  background: #153d48;
  border-color: #438493;
  height: 56px;
  min-height: 0;
  top: 65px;
  overflow: hidden;
}

.layout-audio-clip > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  max-width: calc(100% - 16px);
  font-size: 9px;
  position: absolute;
  top: 2px;
  left: 8px;
  overflow: hidden;
}

.audio-waveform {
  pointer-events: none;
  width: 100%;
  height: 38px;
  position: absolute;
  inset: 15px 0 0;
}

.audio-waveform path {
  stroke: #87c2d2;
  stroke-width: 1px;
  fill: none;
}

.audio-wave-status {
  color: #91a9af;
  pointer-events: none;
  margin-top: 16px;
  font-size: 9px;
}

.selected-audio-settings {
  border-top: 1px solid #303a3b;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  display: grid;
}

.layout-basic-clip {
  background: linear-gradient(90deg, #1f4b39, #296048);
  border-color: #3f7a65;
  height: 56px;
  min-height: 0;
  top: 3px;
}

.layout-basic-clip.image {
  background: #1a2b31;
  border-color: #3c5a65;
}

.layout-media-clip-handle {
  z-index: 4;
  cursor: ew-resize;
  touch-action: none;
  background: #92e0b529;
  border: 0;
  width: 9px;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
}

.layout-media-clip-handle:hover {
  background: #c6f8d7ad;
}

.layout-media-clip-handle.start {
  left: 0;
}

.layout-media-clip-handle.end {
  right: 0;
}

.layout-ui-library-item {
  cursor: grab;
}

.layout-ui-library-media {
  cursor: pointer;
}

.layout-ui-library-media.selected {
  background: #1b3035;
  border-color: #62a9b8;
}

.layout-ui-library-item:active {
  cursor: grabbing;
}

.asset-delete-dialog > span {
  color: #9ba5a1;
  font-size: 12px;
  line-height: 1.5;
  display: block;
}

.asset-delete-dialog > span.asset-delete-warning {
  color: #e3b09f;
}

.clip-editor-properties-scroll > .clip-property-card:has(select[aria-label="UI 元件"]) {
  display: none;
}

.layout-track-management .clip-property-actions {
  grid-template-columns: 1fr;
  gap: 7px;
  display: grid;
}

.session-actions {
  align-items: center;
  margin-left: auto;
  display: flex;
}

.clip-editor-complete-button {
  color: #d1f1dc;
  cursor: pointer;
  background: #244732;
  border: 1px solid #4f8363;
  border-radius: 4px;
  min-width: 108px;
  height: 40px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
}

.clip-editor-complete-button:hover {
  color: #fff;
  background: #2f5a40;
  border-color: #71ad88;
}

.layout-close-confirm-backdrop {
  z-index: 170;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #000000b3;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.layout-close-confirm {
  background: #15191a;
  border: 1px solid #4a5250;
  border-radius: 7px;
  width: min(500px, 100vw - 40px);
  overflow: hidden;
  box-shadow: 0 24px 80px #000000b8;
}

.layout-close-confirm > header {
  gap: 5px;
  padding: 20px 22px 12px;
  display: grid;
}

.layout-close-confirm > header small {
  color: #738e95;
  letter-spacing: .18em;
  font-size: 9px;
}

.layout-close-confirm > header strong {
  color: #eef0eb;
  font-size: 20px;
  font-weight: 600;
}

.layout-close-confirm > p {
  color: #9ba5a1;
  margin: 0;
  padding: 0 22px 20px;
  font-size: 13px;
  line-height: 1.7;
}

.layout-close-confirm > footer {
  background: #101415;
  border-top: 1px solid #303636;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 16px;
  display: flex;
}

.layout-close-confirm button {
  color: #c7ceca;
  cursor: pointer;
  background: #1b2021;
  border: 1px solid #414a48;
  border-radius: 4px;
  min-width: 90px;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
}

.layout-close-confirm button:hover {
  color: #fff;
  border-color: #697572;
}

.layout-close-confirm button.danger {
  color: #e0aaa5;
  background: #2a1b1b;
  border-color: #6b4542;
}

.layout-close-confirm button.primary {
  color: #d1f1dc;
  background: #244732;
  border-color: #4f8363;
  min-width: 112px;
}

.graph-test-stage {
  background: #030404;
  position: fixed;
  inset: 0;
  overflow: hidden;
  container-type: size;
}

.graph-test-media-frame {
  z-index: 1;
  background: #000;
  max-width: 100vw;
  height: auto;
  max-height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  container-type: size;
}

.graph-test-media {
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  background: #000;
  width: 100%;
  height: 100%;
  display: block;
}

.graph-test-toolbar {
  z-index: 20;
  background: linear-gradient(#080a0ae8, #0000);
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 18px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.graph-test-toolbar > div:first-child {
  text-shadow: 0 2px 7px #000;
  gap: 4px;
  display: grid;
}

.graph-test-toolbar strong {
  letter-spacing: .08em;
  font-size: 11px;
}

.graph-test-toolbar span {
  color: #ffffff80;
  font-size: 8px;
}

.graph-test-actions {
  gap: 8px;
  display: flex;
}

.graph-test-toolbar button {
  color: #ffd6d2;
  cursor: pointer;
  background: #65231eb3;
  border: 1px solid #803e39;
  border-radius: 4px;
  min-width: 90px;
  padding: 8px 17px;
  font-size: 9px;
}

.graph-test-toolbar button:first-child {
  color: #efd39a;
  background: #4f4226b8;
  border-color: #75613e;
}

.graph-test-toolbar button:disabled {
  opacity: .35;
  cursor: default;
}

.graph-test-code {
  z-index: 5;
  color: #ffffff8f;
  background: #000000a6;
  padding: 5px 7px;
  font: 9px / 1 Arial, sans-serif;
  position: absolute;
  bottom: 18px;
  left: 18px;
}

.test-option {
  z-index: 12;
  cursor: pointer;
  min-width: max(44px, 7.2cqmin);
}

.test-option:not(.mouse-disabled):hover {
  transform: translate(-50%, -50%) rotate(var(--ui-rotation, 0deg)) scale(var(--ui-scale, 1)) scale(1.07);
}

.test-option:is(:not(.mouse-disabled):active, .keyboard-pressed) {
  transform: translate(-50%, -50%) rotate(var(--ui-rotation, 0deg)) scale(var(--ui-scale, 1)) scale(.92);
}

.graph-test-animation-hit-area {
  z-index: 14;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
  padding: 0;
  position: absolute;
}

.graph-test-animation-hit-area.ellipse {
  border-radius: 50%;
}

.layout-stage {
  isolation: isolate;
}

.animation-downstream-stage {
  z-index: 15;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.animation-instance-properties {
  gap: 12px;
  min-width: 0;
  font-size: 12px;
  display: grid;
}

.animation-instance-properties .clip-property-card {
  gap: 8px;
  margin: 0;
}

.animation-instance-properties small {
  color: #778b91;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.6;
  display: block;
}

.animation-transform-row {
  grid-template-columns: 42px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  display: grid;
}

.animation-position-inputs, .animation-property-actions {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.animation-position-inputs label {
  align-items: center;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.animation-transform-row input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 6px;
}

.animation-property-actions button {
  width: 24px;
  min-width: 24px;
  padding: 3px;
}

.animation-playback-fields {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.animation-playback-fields > header strong {
  font-size: 12px;
  font-weight: 600;
}

.animation-playback-fields > label {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.animation-playback-fields > label > select, .animation-playback-fields > label > input:not([type="checkbox"]) {
  color: #b5d1da;
  background: #101718;
  border: 1px solid #344344;
  border-radius: 5px;
  width: 150px;
  max-width: 52%;
  height: 32px;
  padding: 4px 8px;
}

.animation-playback-fields > label.animation-check {
  justify-content: flex-start;
  gap: 8px;
}

.animation-playback-fields input[type="checkbox"] {
  accent-color: #74b6ca;
  width: 15px;
  height: 15px;
}

.animation-playback-fields input:disabled {
  opacity: .5;
}

.animation-playback-fields > label > select, .animation-playback-fields > label > input:not([type="checkbox"]) {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.graph-test-animation-hit-area:hover, .graph-test-animation-hit-area:focus, .graph-test-animation-hit-area:focus-visible, .graph-test-animation-hit-area:active {
  box-shadow: none;
  background: none;
  border: 0;
  outline: none;
}

.option-title-editable {
  cursor: text;
}

.option-title-input {
  width: 100%;
  min-width: 0;
  font-weight: 700;
}

.option-reference-slot, .option-text-card {
  background: #111617;
  border: 1px solid #303a39;
  border-radius: 5px;
  gap: 7px;
  margin: 0 0 10px;
  padding: 9px;
  display: grid;
}

.option-reference-slot > header, .option-text-card > header {
  color: #bac8c4;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.option-reference-slot > header > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.option-reference-slot > header nav {
  gap: 4px;
  display: flex;
}

.option-reference-empty {
  color: #71817c;
  text-align: center;
  padding: 7px;
  font-size: 10px;
}

.option-reference-icon {
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
}

.option-reference-icon img {
  object-fit: contain;
  filter: brightness(1.28);
  width: 15px;
  height: 15px;
}

.option-reference-icon:hover:not(:disabled) {
  background: #7eaeb824;
}

.option-reference-icon:disabled {
  opacity: .38;
  cursor: default;
}

.option-text-input-row {
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: 6px;
  display: grid;
}

.option-text-input-row nav {
  gap: 4px;
  display: grid;
}

.option-text-card textarea {
  resize: vertical;
  color: #242826;
  caret-color: #242826;
  background: #f2f2ec;
  border-color: #e5e5e0;
  min-height: 54px;
}

.option-text-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.option-text-grid label {
  color: #93a19d;
  grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  display: grid;
}

.option-text-grid input, .option-text-grid select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
}

.option-text-grid input[type="color"] {
  padding: 1px;
}

.option-transform-fields {
  gap: 8px;
  display: grid;
}

.option-transform-fields > label {
  color: #9da9a5;
  grid-template-columns: 42px minmax(0, 1fr) 24px 24px 24px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: grid;
}

.option-transform-fields > label > span {
  color: #6f7d78;
  align-items: center;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.option-transform-fields > label:first-child > span {
  grid-template-columns: 12px 5ch 12px 5ch;
  align-items: center;
  gap: 3px;
  display: grid;
}

.option-transform-fields > label:first-child input {
  width: 5ch;
}

.option-transform-fields input {
  width: 100%;
  min-width: 0;
}

.option-transform-card:after {
  content: "X 轴位置与角度值可按住 Ctrl 键反向粘贴";
  color: #65716d;
  font-size: 10px;
  line-height: 1.4;
}

.property-icon-button {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 3px;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
}

.property-icon-button:hover {
  background: #7eaeb824;
}

.property-icon-button img {
  object-fit: contain;
  opacity: .98;
  filter: brightness(1.28);
  width: 16px;
  height: 16px;
}

.layout-copy-menu {
  z-index: 200;
  background: #111516fa;
  border: 1px solid #4a5352;
  border-radius: 7px;
  gap: 5px;
  width: 118px;
  padding: 6px;
  display: grid;
  position: fixed;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 30px #00000080;
}

.layout-copy-menu button {
  color: #d6e0dc;
  cursor: pointer;
  background: #202728;
  border: 0;
  border-radius: 4px;
  height: 34px;
  font-size: 11px;
}

.layout-copy-menu button:hover {
  color: #eaf8f4;
  background: #28515a;
}

.test-option em {
  color: #ffffff73;
  font: max(6px, .56cqmin) / 1 Arial, sans-serif;
}

@keyframes option-click-preview {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  45% {
    opacity: .95;
    transform: scale(calc(1 + (var(--ui-click-spread-x, 1.2) - 1) * .45), calc(1 + (var(--ui-click-spread-y, 1.2) - 1) * .45));
  }

  100% {
    opacity: 0;
    transform: scale(var(--ui-click-spread-x, 1.2), var(--ui-click-spread-y, 1.2));
  }
}

.graph-test-message, .graph-test-empty {
  z-index: 15;
  color: #d7d3c9;
  letter-spacing: .08em;
  background: #040606e6;
  border: 1px solid #ffffff30;
  padding: 16px 20px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.graph-test-message {
  text-align: center;
  justify-items: center;
  gap: 14px;
  min-width: 220px;
  display: grid;
}

.graph-test-empty {
  color: #727875;
  background: #070909;
  border: 0;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.audio-notice {
  z-index: 21;
  color: #9d9f99;
  background: #000000b3;
  padding: 6px 10px;
  font-size: 8px;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.ui-library-backdrop {
  z-index: 180;
  background: #090b0c;
  place-items: center;
  padding: 0;
  display: grid;
  position: fixed;
  inset: 0;
}

.ui-library-dialog {
  width: 100vw;
  height: 100dvh;
  box-shadow: none;
  background: #101415;
  border: 0;
  border-radius: 0;
  grid-template-rows: auto minmax(0, 1fr);
  display: grid;
  position: relative;
  overflow: hidden;
}

.ui-library-dialog > header {
  background: #151a1b;
  border-bottom: 1px solid #303737;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding: 13px 18px;
  display: flex;
}

.ui-library-dialog > header > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.ui-library-dialog > header small, .ui-component-editor > header small {
  color: #6d96a2;
  letter-spacing: .18em;
  font-size: 9px;
}

.ui-library-dialog > header strong {
  color: #eef0eb;
  font-size: 18px;
}

.ui-library-dialog > header span {
  color: #7e8986;
  font-size: 11px;
}

.ui-library-dialog > header > button {
  color: #8c9693;
  cursor: pointer;
  background: none;
  border: 0;
  width: 38px;
  height: 38px;
  margin-left: auto;
  font-size: 28px;
}

.ui-library-workspace {
  grid-template-columns: minmax(240px, .85fr) minmax(240px, .85fr) minmax(390px, 1.3fr);
  min-height: 0;
  display: grid;
}

.ui-library-column {
  background: #111516;
  border-right: 1px solid #2e3535;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  display: grid;
}

.ui-library-column > header {
  border-bottom: 1px solid #2b3232;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  display: flex;
}

.ui-library-column > header > div {
  gap: 3px;
  display: grid;
}

.ui-library-column > header strong {
  color: #d4d9d5;
  font-size: 13px;
}

.ui-library-column > header span {
  color: #697470;
  font-size: 10px;
}

.ui-library-column > header button, .ui-library-column > footer button {
  color: #b9dfe9;
  cursor: pointer;
  background: #162a30;
  border: 1px solid #3c6370;
  border-radius: 3px;
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  font-size: 11px;
}

.ui-library-list {
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding: 9px;
  display: grid;
  overflow-y: auto;
}

.ui-library-list > button {
  color: #cbd0cc;
  text-align: left;
  cursor: pointer;
  background: #151a1b;
  border: 1px solid #0000;
  border-radius: 4px;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 62px;
  padding: 5px;
  display: grid;
}

.ui-library-list > button:hover {
  background: #192021;
  border-color: #465251;
}

.ui-library-list > button.selected {
  background: #19292e;
  border-color: #6a9cac;
  box-shadow: inset 3px 0 #69bad1;
}

.ui-library-list > button > i {
  color: #76929a;
  background: #080a0b;
  border-radius: 3px;
  place-items: center;
  width: 72px;
  height: 50px;
  font-style: normal;
  display: grid;
  overflow: hidden;
}

.ui-library-list img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.ui-library-list > button > span {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.ui-library-list > button strong, .ui-library-list > button em {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ui-library-list > button strong {
  font-size: 11px;
}

.ui-library-list > button em {
  color: #74817d;
  font-size: 9px;
  font-style: normal;
}

.ui-library-list > p {
  color: #6d7774;
  text-align: center;
  margin: 0;
  padding: 34px 18px;
  font-size: 11px;
  line-height: 1.7;
}

.component-list > button {
  grid-template-columns: 42px minmax(0, 1fr);
}

.component-list > button > i {
  color: #c7eaf3;
  background: #263e46;
  border-radius: 50%;
  width: 42px;
  height: 42px;
}

.ui-library-column > footer {
  border-top: 1px solid #2b3232;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  padding: 9px 11px;
  display: flex;
}

.ui-library-column > footer > span {
  color: #6f7b77;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font: 9px / 1.2 Consolas, monospace;
  overflow: hidden;
}

.ui-library-column > footer button {
  color: #aeb6b2;
  background: #191e1f;
  border-color: #414a48;
  margin-left: 0;
}

.ui-library-column > footer button.danger {
  color: #ce918c;
  border-color: #5d4040;
  margin-left: auto;
}

.ui-component-editor {
  background: #0d1112;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 28px;
  overflow-y: auto;
}

.ui-component-editor > header {
  gap: 7px;
  padding-bottom: 14px;
  display: grid;
}

.ui-component-editor > header input {
  color: #edf0eb;
  background: #151a1b;
  border: 1px solid #405052;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 600;
}

.ui-component-preview {
  cursor: pointer;
  background: none;
  border: 0;
  width: min(326px, 100%);
  height: auto;
  margin: 4px auto 18px;
  padding: 0;
  display: block;
  position: relative;
  overflow: visible;
  container-type: size;
}

.ui-component-preview > .ui-component-skin {
  position: absolute;
  inset: 0;
}

.ui-component-preview > .ui-component-skin > img {
  object-fit: contain;
}

.asset-component-location-action {
  justify-content: center;
  margin: -2px 0 14px;
  display: flex;
}

.asset-component-location-action button {
  color: #bee3ea;
  background: #16292e;
  border-color: #3b6470;
  min-height: 32px;
  padding: 0 13px;
  font-size: 11px;
}

.ui-component-fields {
  gap: 10px;
  display: grid;
}

.ui-component-fields label, .ui-component-size label {
  color: #a0aaa6;
  gap: 6px;
  font-size: 10px;
  display: grid;
}

.ui-component-fields select, .ui-component-size input {
  color: #d6dcd8;
  background: #151a1b;
  border: 1px solid #384544;
  border-radius: 3px;
  width: 100%;
  height: 36px;
  padding: 0 9px;
  font-size: 12px;
}

.ui-appearance-section {
  background: #101617;
  border: 1px solid #293433;
  border-radius: 5px;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.ui-appearance-section > header, .ui-component-core-settings > header {
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.ui-appearance-section > header strong, .ui-component-core-settings > header strong {
  color: #d5ddd8;
  font-size: 12px;
}

.ui-component-settings-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ui-component-settings-grid > label, .ui-component-size > label {
  align-content: start;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.ui-component-editor input[type="number"] {
  color: #e7ece8;
  background: #111718;
  border: 1px solid #3b4b49;
  border-radius: 3px;
  width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1;
}

.appearance-hover .ui-component-fields {
  grid-template-columns: minmax(84px, 1fr);
  max-width: 116px;
}

.appearance-pressed .ui-component-settings-grid, .appearance-click-effect .ui-component-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-component-color {
  min-height: 36px;
  padding: 3px !important;
}

.ui-component-core-settings {
  background: #101617;
  border: 1px solid #293433;
  border-radius: 5px;
  gap: 11px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.ui-component-size {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.ui-component-empty {
  color: #737d79;
  text-align: center;
  place-content: center;
  justify-items: center;
  gap: 9px;
  height: 100%;
  padding: 40px;
  display: grid;
}

.ui-component-empty b {
  color: #abb4b0;
  font-size: 15px;
}

.ui-component-empty span {
  max-width: 390px;
  font-size: 11px;
  line-height: 1.7;
}

.asset-manager-dialog {
  width: 100vw;
  height: 100dvh;
}

.asset-manager-workspace {
  grid-template-columns: 238px minmax(420px, 1fr) minmax(390px, 450px);
}

.asset-folder-panel, .asset-content-panel, .asset-detail-panel {
  background: #111516;
  border-right: 1px solid #2e3535;
  min-width: 0;
  min-height: 0;
}

.asset-folder-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
  display: grid;
}

.asset-folder-panel > header, .asset-content-panel > header {
  background: #14191a;
  border-bottom: 1px solid #2b3232;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
}

.asset-folder-panel > header > div, .asset-content-panel > header > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.asset-folder-panel > header strong, .asset-content-panel > header strong {
  color: #d8ddda;
  font-size: 13px;
}

.asset-folder-panel > header span, .asset-content-panel > header span {
  color: #697470;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.asset-folder-panel nav, .asset-content-panel nav {
  gap: 6px;
  margin-left: auto;
  display: flex;
}

.asset-folder-panel nav button, .asset-content-panel nav button, .asset-detail-panel button {
  color: #b9c2be;
  cursor: pointer;
  background: #191f20;
  border: 1px solid #414b49;
  border-radius: 3px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

.asset-folder-panel nav button {
  width: 32px;
  padding: 0;
  font-size: 17px;
}

.asset-folder-panel nav button:hover, .asset-content-panel nav button:hover, .asset-detail-panel button:hover {
  background: #202829;
  border-color: #62716e;
}

.asset-folder-panel nav button.primary, .asset-content-panel nav button.primary, .asset-detail-panel button.primary {
  color: #d6f1de;
  background: #214b32;
  border-color: #47745a;
}

.asset-folder-panel button.danger, .asset-detail-panel button.danger {
  color: #ce918c;
  border-color: #5b3d3d;
}

.asset-folder-panel button:disabled, .asset-content-panel button:disabled, .asset-detail-panel button:disabled {
  opacity: .35;
  cursor: default;
}

.asset-folder-tree {
  min-height: 0;
  padding: 7px 0;
  overflow: auto;
}

.asset-folder-row {
  border-left: 2px solid #0000;
  align-items: center;
  height: 31px;
  padding-right: 7px;
  display: flex;
}

.asset-folder-row:hover {
  background: #171d1e;
}

.asset-folder-row.selected {
  background: #1a292d;
  border-left-color: #65b4ca;
}

.asset-folder-toggle, .asset-folder-name {
  color: #8e9995;
  cursor: pointer;
  background: none;
  border: 0;
}

.asset-folder-toggle {
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 26px;
  padding: 0;
  display: grid;
}

.asset-folder-toggle span {
  border-top: 1.5px solid #aeb8b5;
  border-right: 1.5px solid #aeb8b5;
  width: 7px;
  height: 7px;
  transition: transform .12s, border-color .12s;
  display: block;
  transform: rotate(45deg);
}

.asset-folder-toggle.expanded span {
  transform: rotate(135deg);
}

.asset-folder-toggle:hover:not(:disabled) span, .asset-folder-row.selected .asset-folder-toggle span {
  border-color: #d9e3df;
}

.asset-folder-toggle:disabled {
  opacity: 0;
  cursor: default;
}

.asset-folder-name {
  color: #bec6c2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 28px;
  padding: 0;
  font-size: 11px;
  display: flex;
  overflow: hidden;
}

.asset-folder-name span {
  color: #8a7450;
  font-size: 12px;
  transform: skewX(-8deg);
}

.asset-folder-rename-input {
  color: #edf4e8;
  background: #0d1513;
  border: 1px solid #6d8c72;
  border-radius: 2px;
  outline: 0;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  font-size: 11px;
}

.asset-folder-context-menu {
  z-index: 180;
  background: #141718fc;
  border: 1px solid #454b49;
  border-radius: 8px;
  width: 150px;
  padding: 6px;
  position: fixed;
  box-shadow: 0 14px 36px #0000008f;
}

.asset-folder-context-menu button {
  color: #d0d7d2;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  width: 100%;
  padding: 9px 10px;
  font-size: 11px;
  display: block;
}

.asset-folder-context-menu button:hover:not(:disabled) {
  background: #292f2e;
}

.asset-folder-context-menu button.danger {
  color: #cf918b;
}

.asset-folder-context-menu button:disabled {
  opacity: .35;
  cursor: default;
}

.asset-folder-panel > footer {
  background: #0f1314;
  border-top: 1px solid #2b3232;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  display: flex;
}

.asset-folder-panel > footer span {
  color: #66716d;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 9px / 1.2 Consolas, monospace;
  overflow: hidden;
}

.asset-content-panel {
  grid-template-rows: auto minmax(0, 1fr);
  display: grid;
}

.asset-content-panel > header nav button {
  white-space: nowrap;
}

.asset-content-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 13px;
  display: grid;
  overflow: auto;
}

.asset-content-card {
  color: #cbd1cd;
  text-align: left;
  cursor: pointer;
  background: #151a1b;
  border: 1px solid #0000;
  border-radius: 4px;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  display: grid;
}

.asset-content-card:hover {
  background: #192021;
  border-color: #465251;
}

.asset-content-card.selected {
  background: #19292e;
  border-color: #68a3b4;
  box-shadow: inset 0 -2px #69bad1;
}

.asset-content-card > i {
  color: #82a1aa;
  background-color: #090c0d;
  background-image: linear-gradient(45deg, #131718 25%, #0000 25%), linear-gradient(-45deg, #131718 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #131718 75%), linear-gradient(-45deg, #0000 75%, #131718 75%);
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-size: 14px 14px;
  border-radius: 3px;
  place-items: center;
  height: 94px;
  font-size: 28px;
  font-style: normal;
  display: grid;
  overflow: hidden;
}

.asset-content-card img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.asset-content-card strong, .asset-content-card em {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.asset-content-card strong {
  font-size: 11px;
}

.asset-content-card em {
  color: #71807c;
  font-size: 9px;
  font-style: normal;
}

.asset-content-empty {
  color: #6d7774;
  text-align: center;
  grid-column: 1 / -1;
  place-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 230px;
  display: grid;
}

.asset-content-empty b {
  color: #abb4b0;
  font-size: 14px;
}

.asset-content-empty span {
  max-width: 330px;
  font-size: 11px;
  line-height: 1.65;
}

.asset-detail-panel.ui-component-editor {
  background: #0d1112;
  border-right: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  display: grid;
  overflow: hidden;
}

.asset-detail-panel.locked {
  box-shadow: inset 3px 0 #b49555;
}

.asset-detail-toolbar {
  background: #14191a;
  border-bottom: 1px solid #2b3232;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 13px;
  display: flex;
}

.asset-detail-toolbar > div {
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.asset-detail-toolbar small {
  color: #6d96a2;
  letter-spacing: .18em;
  font-size: 8px;
}

.asset-detail-toolbar strong {
  color: #dce1dd;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.asset-detail-toolbar > div > span {
  color: #c49d57;
  font-size: 9px;
}

.asset-detail-toolbar > button {
  background: none;
  border-color: #0000;
  width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 22px;
}

.asset-detail-toolbar > button.active {
  background: #2a2519;
  border-color: #806d43;
}

.asset-detail-scroll {
  min-height: 0;
  padding: 15px 17px 22px;
  overflow-y: auto;
}

.asset-component-title {
  gap: 6px;
  margin-bottom: 12px;
  display: grid;
}

.asset-component-title small {
  color: #6d96a2;
  letter-spacing: .18em;
  font-size: 9px;
}

.asset-component-title input {
  color: #edf0eb;
  background: #151a1b;
  border: 1px solid #405052;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 600;
}

.asset-state-slots {
  gap: 9px;
  display: grid;
}

.asset-state-slot {
  background: #101617;
  border: 1px dashed #3b4948;
  border-radius: 5px;
  padding: 11px;
}

.asset-state-slot.assigned {
  border-style: solid;
  border-color: #42616a;
}

.asset-state-slot > header {
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  display: flex;
}

.asset-state-slot > header strong {
  color: #d4dcd8;
  font-size: 12px;
}

.asset-state-resource-name {
  box-sizing: border-box;
  color: #d5ddda;
  text-overflow: clip;
  white-space: nowrap;
  cursor: default;
  background: #0c1112;
  border: 1px solid #273534;
  border-radius: 3px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 8px 9px;
  font: 11px / 1.5 Consolas, monospace;
  overflow: hidden;
}

.asset-state-drop-hint {
  color: #64716d;
  background: #090c0d;
  border-radius: 3px;
  place-items: center;
  min-height: 38px;
  padding: 7px;
  font-size: 10px;
  display: grid;
}

.asset-state-slot > footer {
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  display: flex;
}

.asset-state-slot > footer button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 9px;
}

.asset-detail-secondary-actions {
  gap: 7px;
  margin-top: 13px;
  display: flex;
}

.asset-detail-secondary-actions .danger {
  margin-left: auto;
}

.asset-detail-commit {
  background: #111617;
  border-top: 1px solid #2d3434;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 16px;
  display: flex;
}

.asset-detail-commit button {
  min-width: 88px;
  min-height: 36px;
}

.asset-image-detail {
  align-content: start;
  gap: 14px;
  display: grid;
}

.asset-image-preview {
  aspect-ratio: 1;
  background-color: #080b0c;
  background-image: linear-gradient(45deg, #141819 25%, #0000 25%), linear-gradient(-45deg, #141819 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #141819 75%), linear-gradient(-45deg, #0000 75%, #141819 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border-radius: 4px;
  place-items: center;
  width: 100%;
  margin-inline: auto;
  display: grid;
  overflow: hidden;
}

.asset-image-preview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.asset-content-card > i, .asset-image-preview {
  background-color: #0000;
  background-image: none;
}

.asset-image-detail dl {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  display: grid;
}

.asset-image-detail dt {
  color: #75827e;
  font-size: 10px;
}

.asset-image-detail dd {
  overflow-wrap: anywhere;
  color: #b9c1bd;
  min-width: 0;
  margin: 0;
  font: 10px / 1.5 Consolas, monospace;
}

.asset-image-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.asset-image-actions button {
  min-height: 34px;
}

.asset-context-menu {
  z-index: 220;
  background: #151b1c;
  border: 1px solid #3b4947;
  border-radius: 8px;
  min-width: 156px;
  padding: 6px;
  position: fixed;
  box-shadow: 0 12px 28px #0000006b;
}

.asset-context-menu button {
  color: #d0d7d3;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
  display: block;
}

.asset-trash-icon {
  color: #d28d87;
  width: 16px;
  font-size: 13px;
  line-height: 1;
}

.asset-context-icon {
  color: #a8cfda;
  text-align: center;
  width: 16px;
  font-size: 15px;
  line-height: 1;
}

.asset-context-separator {
  background: #303a38;
  height: 1px;
  margin: 5px 7px;
  display: block;
}

.asset-context-menu button.danger {
  color: #dfaba5;
}

.asset-context-menu button:hover {
  color: #fff;
  background: #243333;
}

.asset-context-menu button:disabled {
  opacity: .35;
  cursor: default;
}

.asset-move-backdrop {
  z-index: 230;
  background: #0000009e;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.asset-move-dialog {
  background: #171d1e;
  border: 1px solid #4c5d59;
  border-radius: 6px;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  width: min(460px, 100vw - 36px);
  max-height: min(620px, 100vh - 48px);
  padding: 18px;
  display: grid;
  box-shadow: 0 18px 44px #00000080;
}

.asset-move-dialog > header {
  border-bottom: 1px solid #2d3937;
  gap: 4px;
  padding-bottom: 12px;
  display: grid;
}

.asset-move-dialog > header strong {
  color: #edf3ef;
  font-size: 15px;
}

.asset-move-dialog > header span {
  color: #82918b;
  font-size: 10px;
}

.asset-move-tree {
  min-height: 0;
  padding: 10px 0;
  overflow-y: auto;
}

.asset-move-folder-row {
  color: #cbd5d0;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding-right: 8px;
  display: flex;
}

.asset-move-folder-row:hover, .asset-move-folder-row.selected {
  color: #e8f5f3;
  background: #1a3034;
  border-color: #3f6871;
}

.asset-move-folder-row small {
  color: #687873;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
  font: 9px Consolas, monospace;
  overflow: hidden;
}

.asset-move-dialog > footer {
  border-top: 1px solid #2d3937;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  display: flex;
}

.asset-move-dialog button {
  color: #cbd2ce;
  cursor: pointer;
  background: #1e2727;
  border: 1px solid #465452;
  border-radius: 3px;
  min-width: 88px;
  min-height: 34px;
  padding: 0 12px;
}

.asset-move-dialog button.primary {
  color: #d6f1de;
  background: #214b32;
  border-color: #47745a;
}

.asset-delete-backdrop {
  z-index: 130;
  background: #0000009e;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.asset-delete-dialog {
  text-align: center;
  background: #171d1e;
  border: 1px solid #4c5654;
  border-radius: 6px;
  gap: 6px;
  width: min(420px, 100vw - 36px);
  padding: 22px;
  display: grid;
  box-shadow: 0 18px 44px #00000080;
}

.asset-delete-dialog > strong {
  color: #f1f4f1;
  font-size: 15px;
  line-height: 1.6;
  display: block;
}

.asset-delete-dialog > footer {
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  display: flex;
}

.asset-delete-dialog button {
  color: #cbd2ce;
  cursor: pointer;
  background: #1e2727;
  border: 1px solid #465452;
  border-radius: 3px;
  width: 84px;
  min-height: 36px;
  padding: 0 12px;
}

.asset-delete-dialog button:hover {
  background: #283333;
  border-color: #71817c;
}

.asset-delete-dialog button.danger {
  color: #ffd5cf;
  background: #4b2927;
  border-color: #82514c;
}

.animation-editor-page {
  color: #cbd2ce;
  background: #0d1112;
  grid-template-rows: 64px minmax(360px, 1fr) 200px 58px;
  min-width: 0;
  min-height: 100vh;
  display: grid;
}

.animation-editor-main {
  grid-template-columns: 210px minmax(0, 1fr) 248px;
  min-height: 0;
  display: grid;
}

.animation-layer-list, .animation-properties {
  background: #111617;
  border-right: 1px solid #2b3232;
  min-width: 0;
  padding: 13px;
  overflow: auto;
}

.animation-properties {
  border-left: 1px solid #2b3232;
  border-right: 0;
}

.animation-layer-list > header, .animation-properties > header {
  color: #d9e1dc;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
}

.animation-layer-list > div {
  gap: 5px;
  display: grid;
}

.animation-layer-list button {
  color: #bfc8c3;
  text-align: left;
  cursor: pointer;
  background: #171d1e;
  border: 1px solid #0000;
  border-radius: 4px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px;
  display: grid;
}

.animation-layer-list button.selected {
  background: #1b3035;
  border-color: #5ba9c1;
}

.animation-layer-list button i {
  color: #7d999f;
  background: #090c0d;
  place-items: center;
  width: 34px;
  height: 28px;
  font-size: 9px;
  font-style: normal;
  display: grid;
  overflow: hidden;
}

.animation-layer-list button img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.animation-layer-list button span {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.animation-layer-list p {
  color: #71807b;
  margin: 16px 2px;
  font-size: 10px;
  line-height: 1.65;
}

.animation-preview-stage {
  background: #090c0d;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  display: grid;
  overflow: auto;
}

.animation-canvas {
  aspect-ratio: 16 / 9;
  width: min(100%, 960px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 38px #0000008c;
}

.animation-layer-preview, .layout-animation-layer {
  z-index: 2;
  transform-origin: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  max-width: 40%;
  max-height: 40%;
  position: absolute;
}

.animation-interaction-overlay {
  z-index: 8;
  pointer-events: none;
  transform-origin: center;
  background: #58c8ff29;
  border: 2px solid #58c8ff;
  position: absolute;
}

.animation-interaction-overlay.ellipse {
  border-radius: 50%;
}

.animation-layer-preview.selected {
  outline: none;
}

.animation-layer-label .animation-visibility {
  flex: 0 0 24px;
}

.animation-interaction-settings {
  border-bottom: 1px solid #2d3636;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 14px 16px;
  display: grid;
}

.animation-interaction-settings > header {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.animation-interaction-settings > header label, .animation-interaction-settings > label {
  color: #b9c8c8;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  display: flex;
}

.animation-interaction-settings > label input:not([type="checkbox"]), .animation-interaction-settings select {
  width: 100%;
  min-width: 0;
}

.animation-preview-pane.no-layer-selection .animation-layer-preview.selected {
  outline: 0;
}

.animation-drop-hint {
  color: #81908a;
  place-items: center;
  font-size: 12px;
  display: grid;
  position: absolute;
  inset: 0;
}

.animation-keyframe-button {
  color: #c3e8f1;
  cursor: pointer;
  background: #153038;
  border: 1px solid #3b6d78;
  border-radius: 3px;
  width: 100%;
  min-height: 33px;
  margin-bottom: 12px;
  font-size: 11px;
}

.animation-property-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.animation-property-grid label {
  color: #91a09a;
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.animation-property-grid input, .animation-property-grid select {
  color: #d8e0db;
  background: #121819;
  border: 1px solid #374645;
  border-radius: 3px;
  min-width: 0;
  height: 32px;
  padding: 0 7px;
}

.animation-delete-layer {
  color: #e1a8a0;
  cursor: pointer;
  background: #2c1d1d;
  border: 1px solid #674542;
  border-radius: 3px;
  width: 100%;
  min-height: 31px;
  margin-top: 14px;
}

.animation-timeline {
  background: #101516;
  border-top: 1px solid #303838;
  border-bottom: 1px solid #303838;
  min-height: 0;
  padding: 10px 14px;
  overflow: auto;
}

.animation-timeline > header {
  align-items: center;
  gap: 12px;
  min-height: 31px;
  display: flex;
}

.animation-timeline > header button {
  color: #cbd4cf;
  cursor: pointer;
  background: #171e1f;
  border: 1px solid #3a4645;
  border-radius: 3px;
  width: 30px;
  height: 28px;
}

.animation-timeline output {
  color: #acd9e6;
  font: 11px Consolas, monospace;
}

.animation-timeline label {
  color: #87948f;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 10px;
  display: flex;
}

.animation-timeline label input {
  color: #d8e0db;
  background: #121819;
  border: 1px solid #374645;
  border-radius: 3px;
  width: 68px;
  height: 27px;
  padding: 0 6px;
}

.animation-timeline > input {
  accent-color: #6ebbd2;
  width: 100%;
  margin: 7px 0 9px;
}

.animation-keyframe-tracks {
  gap: 4px;
  display: grid;
}

.animation-keyframe-tracks > div {
  background: #141a1b;
  border: 1px solid #273130;
  grid-template-columns: 130px minmax(200px, 1fr);
  align-items: center;
  min-height: 28px;
  display: grid;
}

.animation-keyframe-tracks strong {
  color: #aeb8b3;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 9px;
  font-size: 10px;
  overflow: hidden;
}

.animation-keyframe-tracks span {
  border-left: 1px solid #303a39;
  height: 100%;
  position: relative;
}

.animation-keyframe-tracks button {
  color: #7dd0e6;
  cursor: pointer;
  background: none;
  border: 0;
  width: 19px;
  height: 19px;
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
}

.animation-editor-actions {
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  display: flex;
}

.animation-editor-actions > span {
  flex: 1;
}

.layout-animation-layer {
  pointer-events: none;
  max-width: 42%;
  max-height: 42%;
}

.layout-animation-hit-area {
  z-index: 12;
  cursor: pointer;
  transform-origin: center;
  background: none;
  border: 1px dashed #0000;
  padding: 0;
  position: absolute;
}

.layout-animation-hit-area.rectangle {
  border-radius: 4px;
}

.layout-animation-hit-area.ellipse {
  border-radius: 50%;
}

.graph-test-animation-layer {
  z-index: 3;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  max-width: 42%;
  max-height: 42%;
  position: absolute;
}

.layout-animation-track-row {
  background: #111718;
  border-bottom: 1px solid #2d3636;
  min-height: 62px;
}

.layout-animation-clip {
  color: #d5f0f5;
  background: #1d3945;
  border-color: #4a7790;
  top: 14px;
}

.layout-animation-clip.selected {
  border-color: #77d7ff;
  box-shadow: 0 0 0 1px #77d7ff59;
}

.layout-animation-clip > em {
  color: #a7c8d2;
  margin-left: auto;
  padding-right: 8px;
  font: 9px / 1 Consolas, monospace;
}

.animation-track-settings {
  gap: 8px;
  display: grid;
}

.animation-track-settings > div {
  background: #131a1b;
  border: 1px solid #2d3938;
  border-radius: 4px;
  grid-template-columns: minmax(0, 1fr) 1fr;
  gap: 6px;
  padding: 8px;
  display: grid;
}

.animation-track-settings > div > strong {
  color: #c5d2cf;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / -1;
  font-size: 11px;
  overflow: hidden;
}

.animation-track-settings label {
  color: #84918d;
  gap: 3px;
  font-size: 9px;
  display: grid;
}

.animation-track-settings select {
  color: #ced7d2;
  background: #111718;
  border: 1px solid #374645;
  border-radius: 3px;
  min-width: 0;
  height: 27px;
  font-size: 10px;
}

.animation-track-settings .danger {
  color: #dea39c;
  cursor: pointer;
  background: #2c1c1c;
  border: 1px solid #62413e;
  border-radius: 3px;
  grid-column: 2;
  min-height: 27px;
}

.node-editor.animation-editor-mode {
  padding-left: 0;
}

.animation-editor-shell {
  grid-template-columns: var(--resource-manager-width) minmax(0,1fr);
  background: #0d1112;
  min-width: 0;
  height: calc(100dvh - 64px);
  display: grid;
}

.animation-editor-shell > .persistent-resource-manager {
  grid-area: 1 / 1;
  height: 100%;
}

.clip-style-animation-editor {
  flex-direction: column;
  grid-area: 1 / 2;
  grid-template-rows: none;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

.clip-style-animation-editor > .ui-editor-page-header {
  flex: 0 0 64px;
}

.animation-preview-pane {
  background: #090c0d;
  place-items: center;
  min-width: 0;
  min-height: 180px;
  padding: 18px;
  display: grid;
  overflow: hidden;
}

.animation-preview-pane .animation-canvas {
  aspect-ratio: 16 / 9;
  width: min(100%, 1080px);
  height: 100%;
  max-height: 100%;
}

.animation-resizer {
  cursor: row-resize;
  flex: 0 0 8px;
  width: 100%;
}

.animation-edit-bottom {
  background: #101415;
  border-top: 1px solid #2d3535;
  flex: 1 1 0;
  grid-template-rows: 52px minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 250px;
  display: grid;
  overflow: hidden;
}

.animation-timeline-toolbar {
  background: #151a1b;
  border-bottom: 1px solid #293131;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 13px;
  display: grid;
}

.animation-timeline-toolbar .layout-transport-controls {
  grid-column: 2;
  justify-self: center;
}

.animation-timeline-toolbar > label {
  color: #899590;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: flex;
}

.animation-timeline-toolbar input {
  accent-color: #5fb6cf;
  width: 94px;
}

.animation-snap-toggle {
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  grid-area: 1 / 1;
  justify-self: start;
  place-items: center;
  width: 32px;
  height: 30px;
  margin-left: 2px;
  padding: 0;
  display: grid;
}

.animation-snap-toggle img {
  object-fit: contain;
  opacity: .72;
  filter: brightness(0) saturate() invert(58%) sepia(10%) saturate(477%) hue-rotate(126deg) brightness(91%) contrast(88%);
  width: 19px;
  height: 19px;
}

.animation-snap-toggle:hover {
  background: #1a2d31;
  border-color: #3d5b61;
}

.animation-snap-toggle.active {
  background: #1b3a42;
  border-color: #4d8997;
}

.animation-snap-toggle.active img {
  opacity: 1;
  filter: brightness(0) saturate() invert(80%) sepia(24%) saturate(737%) hue-rotate(148deg) brightness(98%) contrast(91%);
}

.animation-timeline-toolbar > output {
  display: none;
}

.animation-timeline-toolbar output {
  color: #b6d9e1;
  grid-area: 1 / 1;
  font: 10px Consolas, monospace;
}

.animation-timeline-scroll {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.animation-timeline-content {
  background: #0e1213;
  min-height: 100%;
  padding-top: 0;
  position: relative;
}

.animation-timeline-content:after {
  content: "";
  z-index: 4;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--animation-valid-end, 100%);
  pointer-events: none;
  background: #0306077a;
  position: absolute;
}

.animation-layer-row {
  background: #111617;
  border-bottom: 1px solid #27302f;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 82px;
  display: grid;
}

.animation-layer-row.selected {
  background: #172124;
}

.animation-layer-label {
  cursor: pointer;
  border-right: 1px solid #35403f;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  display: flex;
}

.animation-layer-label > div:not(.animation-layer-tools) {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.animation-layer-label strong {
  color: #d1d9d4;
  font-size: 11px;
}

.animation-layer-label span {
  color: #73817c;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 10px;
  overflow: hidden;
}

.animation-layer-tools {
  grid-template-rows: repeat(2, 22px);
  grid-template-columns: repeat(4, 22px);
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  display: grid;
}

.animation-layer-tools > span {
  display: none;
}

.animation-layer-tools button:nth-of-type(-n+3) {
  grid-row: 2;
  transform: translateX(11px);
}

.animation-layer-tools button:nth-of-type(n+4) {
  grid-row: 1;
}

.animation-layer-tools button {
  color: #a0aaa5;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
}

.animation-layer-tools button:hover, .animation-layer-tools button.active {
  color: #63c8e8;
  background: #1d353d;
}

.animation-layer-track {
  cursor: pointer;
  background-image: linear-gradient(90deg, #0000 calc(100% - 1px), #ffffff0d 0);
  background-size: 110px 100%;
  min-width: 0;
  position: relative;
}

.animation-image-clip {
  z-index: 1;
  color: #d8f0f4;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #23414c;
  border: 1px solid #628594;
  border-radius: 3px;
  align-items: center;
  min-width: 40px;
  padding: 0 9px;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 13px;
  bottom: 13px;
  overflow: hidden;
}

.animation-image-clip:hover {
  cursor: grab;
  border-color: #9ed8e6;
}

.animation-image-clip:before, .animation-image-clip:after {
  content: "";
  cursor: col-resize;
  width: 8px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.animation-image-clip:before {
  left: 0;
}

.animation-image-clip:after {
  right: 0;
}

.animation-layer-row:has(.animation-image-clip) {
  cursor: grab;
}

.animation-layer-row:has(.animation-layer-tools button:active) {
  cursor: default;
}

.animation-keyframe-lane {
  z-index: 2;
  pointer-events: none;
  height: 11px;
  position: absolute;
  left: 0;
  right: 0;
}

.animation-keyframe-marker {
  color: #8d9793;
  cursor: ew-resize;
  pointer-events: auto;
  background: none;
  border: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  position: absolute;
  top: -3px;
  transform: translateX(-50%);
}

.animation-keyframe-marker:active {
  cursor: none;
}

.animation-keyframe-marker.position {
  color: #41c5fa;
}

.animation-keyframe-marker.rotation {
  color: #ecb45c;
}

.animation-keyframe-marker.scale {
  color: #a891e9;
}

.animation-keyframe-marker.opacity {
  color: #78cf9b;
}

.animation-keyframe-marker.selected {
  filter: brightness(1.7);
  text-shadow: 0 0 7px;
}

.animation-keyframe-marker.ease-in:after, .animation-keyframe-marker.ease-out:after, .animation-keyframe-marker.ease-in-out:after {
  color: inherit;
  font-size: 9px;
  position: absolute;
  top: 1px;
}

.animation-keyframe-marker.ease-in:after {
  content: "◀";
  right: -2px;
}

.animation-keyframe-marker.ease-out:after {
  content: "▶";
  left: -2px;
}

.animation-keyframe-marker.ease-in-out:after {
  content: "◀▶";
  letter-spacing: -5px;
  left: -7px;
}

.animation-keyframe-marker.hold {
  color: #f3e4a0;
  font-size: 0;
}

.animation-keyframe-marker.hold:before {
  content: "";
  background: #0f1415;
  border: 1.5px solid;
  width: 8px;
  height: 8px;
  margin: 4px;
  display: block;
}

.animation-property-panel {
  z-index: 20;
  box-sizing: border-box;
  background: #101516;
  border-left: 1px solid #2c3534;
  width: 280px;
  min-height: 0;
  padding: 14px;
  position: absolute;
  top: 64px;
  bottom: 58px;
  right: 0;
  overflow: auto;
}

.animation-property-panel > header {
  color: #cce4e9;
  border-bottom: 1px solid #2d3837;
  padding-bottom: 12px;
  font-size: 13px;
}

.animation-property-panel.no-layer-selection .animation-property-fields, .animation-property-panel.no-layer-selection > footer {
  display: none;
}

.animation-property-panel.no-layer-selection:after {
  content: "选择一个图层以编辑其关键帧属性";
  color: #71807b;
  text-align: center;
  padding-top: 22px;
  font-size: 11px;
  display: block;
}

.animation-keyframe-tools {
  border-bottom: 1px solid #263130;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  display: flex;
}

.animation-keyframe-tools > span {
  flex: 1;
}

.animation-keyframe-tools button {
  color: #9ca6a2;
  cursor: pointer;
  background: none;
  border: 0;
  width: 25px;
  height: 25px;
  padding: 0;
}

.animation-keyframe-tools button:hover, .animation-keyframe-tools button.active {
  color: #54c5ed;
  background: #1c3036;
}

.animation-keyframe-tools button:disabled {
  opacity: .3;
  cursor: default;
}

.animation-mode-button {
  font-size: 16px;
}

.animation-property-fields {
  gap: 15px;
  padding-top: 15px;
  display: grid;
}

.animation-property-fields section {
  gap: 7px;
  display: grid;
}

.animation-property-fields section > header {
  color: #b6c0bc;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.animation-scale-lock {
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 3px;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0;
  display: grid;
}

.animation-scale-lock img {
  opacity: .5;
  filter: grayscale();
  width: 16px;
  height: 16px;
}

.animation-scale-lock.active {
  background: #1b3a42;
  border-color: #4d8997;
}

.animation-scale-lock.active img {
  opacity: 1;
  filter: brightness(0) saturate() invert(80%) sepia(24%) saturate(737%) hue-rotate(148deg) brightness(98%) contrast(91%);
}

.property-key-toggle {
  color: #707a76;
  cursor: pointer;
  background: none;
  border: 0;
  width: 20px;
  height: 20px;
  padding: 0;
}

.animation-property-fields section.keyed .property-key-toggle {
  color: #41c5fa;
  filter: drop-shadow(0 0 3px #217b98);
}

.animation-property-fields section > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.animation-property-fields label {
  color: #8d9994;
  gap: 4px;
  font-size: 9px;
  display: grid;
}

.animation-property-fields input {
  color: #d4eeef;
  background: #101617;
  border: 1px solid #3a4a48;
  border-radius: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  font: 13px Consolas, monospace;
}

.animation-property-fields section.animation-opacity-drag {
  position: relative;
}

.animation-property-fields section.animation-opacity-drag > label {
  display: block;
}

.animation-property-fields section.animation-opacity-drag input {
  background: linear-gradient(90deg, #4a5553 0 var(--opacity-percent, 0%), #101617 var(--opacity-percent, 0%) 100%);
  cursor: default;
  border-radius: 9px;
  width: 100%;
  height: 52px;
  padding: 0 12px;
  font-size: 16px;
}

.animation-property-fields section.animation-opacity-drag.editing input {
  cursor: text;
}

.animation-property-fields section.animation-opacity-drag.dragging input {
  color: #0000;
  caret-color: #0000;
  border-color: #53736f;
}

.animation-property-fields section.animation-opacity-drag.dragging:after {
  content: attr(data-opacity-value);
  z-index: 2;
  color: #d4eeef;
  pointer-events: none;
  font: 16px Consolas, monospace;
  position: absolute;
  bottom: 15px;
  left: 13px;
}

.animation-property-panel footer {
  gap: 7px;
  margin-top: 18px;
  display: flex;
}

.animation-property-panel footer button {
  color: #b9c3be;
  cursor: pointer;
  background: #192020;
  border: 1px solid #3b4745;
  border-radius: 3px;
  flex: 1;
  min-height: 29px;
  font-size: 10px;
}

.animation-property-panel footer button.danger {
  color: #dba29b;
  border-color: #674440;
}

.clip-style-animation-editor > .animation-editor-actions {
  z-index: 30;
  box-sizing: border-box;
  background: #101516;
  border-top: 1px solid #303838;
  border-left: 0;
  border-right: 0;
  flex: 0 0 58px;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  position: relative;
}

.clip-style-animation-editor > .animation-preview-pane, .clip-style-animation-editor > .animation-edit-bottom, .clip-style-animation-editor > .animation-resizer {
  margin-right: 280px;
}

.clip-style-animation-editor > .animation-resizer {
  width: auto;
}

.animation-editor-actions {
  box-sizing: border-box;
  border-top: 1px solid #303838;
}

.animation-duration-setting {
  color: #aab8b4;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.animation-duration-setting input {
  box-sizing: border-box;
  color: #d4eeef;
  background: #101617;
  border: 1px solid #3a4a48;
  border-radius: 4px;
  width: 85px;
  height: 28px;
  padding: 0 8px;
}

.animation-timeline-content {
  background-color: #0e1213;
}

.animation-timeline-toolbar .layout-transport-controls button.active {
  color: #63c8e8;
  background: #1d353d;
}

.animation-preview-pane .animation-canvas {
  box-shadow: none;
}

@media (max-width: 1120px) {
  .asset-manager-workspace {
    grid-template-columns: 205px minmax(350px, 1fr) 360px;
  }

  .asset-content-panel > header {
    align-items: flex-start;
  }

  .asset-content-panel > header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  .node-toolbar {
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  }
}

.opacity-slider {
  box-sizing: border-box;
  border: 1px solid #3a4a48;
  border-radius: 9px;
  width: 100%;
  overflow: hidden;
}

.opacity-slider > [role="slider"] {
  color: #d4eeef;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  align-items: center;
  height: 50px;
  padding: 0 12px;
  font: 16px Consolas, monospace;
  display: flex;
}

.animation-property-fields .opacity-slider > input {
  box-sizing: border-box;
  cursor: text;
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 50px;
  padding: 0 12px;
  font-size: 16px;
}

.screenshot-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.screenshot-actions button {
  white-space: nowrap;
  flex: 1;
}

.selected-video-playback {
  border-top: 1px solid #303a3a;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  display: grid;
}

.selected-video-playback > strong {
  font-size: 13px;
  font-weight: 500;
}

.selected-video-playback button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.project-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.clip-property-card > .instance-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  display: flex;
}

.clip-property-card > .instance-title-row strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

.clip-property-card > .instance-title-row > span {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
}

.clip-property-card .instance-title-input {
  flex: 1;
  width: 16em;
  min-width: 0;
  max-width: 100%;
  padding: 4px 7px;
  font-size: 15px;
  line-height: 1.5;
}

.test-layer-view {
  pointer-events: none;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}

.clip-timeline-shell > header .value-extraction-tool.subtitle-tool {
  left: 52px;
}

.clip-timeline-shell > header button.layout-snap-toggle {
  left: 92px;
}

.subtitle-visuals {
  pointer-events: none;
  z-index: 151;
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}

.subtitle-visuals > div {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 1px 3px #000a;
  width: max-content;
  max-width: 90%;
  line-height: 1.4;
}

.subtitle-track-overlay {
  pointer-events: none;
  z-index: 5;
  position: absolute;
  inset: 0 0 0 auto;
}

.subtitle-clip {
  pointer-events: auto;
  cursor: grab;
  background: #495464;
  border: 1px solid #8698a8;
  min-width: 3px;
  height: calc(100% - 10px);
  position: absolute;
  top: 5px;
}

.subtitle-clip.selected {
  outline-offset: -2px;
  outline: 2px solid #b8d8e4;
}

.subtitle-clip > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
  display: block;
  overflow: hidden;
}

.subtitle-properties textarea {
  resize: vertical;
  width: 100%;
  min-height: 100px;
}

.subtitle-actions {
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.subtitle-context-menu {
  z-index: 10000;
  background: #182020;
  border: 1px solid #526363;
  border-radius: 10px;
  gap: 4px;
  width: 180px;
  padding: 8px;
  display: grid;
  position: fixed;
}

.test-layer-view > div {
  color: #f1f5f6;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 90%;
  max-height: 90%;
  font: 600 clamp(12px, 4cqw, 76px) / 1.4 Microsoft YaHei, sans-serif;
  overflow: hidden;
}

.action-node-thumbnail {
  position: relative;
}

.test-layer-properties {
  font-size: 12px;
}

.test-layer-text-label {
  gap: 8px;
  margin: 16px 0;
  display: grid;
}

.test-layer-properties textarea {
  resize: vertical;
  width: 100%;
  min-height: 96px;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  background: #101719;
  border: 1px solid #35474c;
  border-radius: 8px;
  padding: 10px;
}

.layout-basic-clip.test-layer-clip {
  background: #435865;
}

.marker-node {
  box-sizing: border-box;
  color: #d9e6e9;
  cursor: move;
  background: #253338;
  border: 1px solid #647c82;
  border-radius: 7px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  display: flex;
  position: absolute;
}

.marker-node.selected {
  outline-offset: 2px;
  outline: 2px solid #a6ced8;
}

.marker-node.marker-alias {
  border-style: dashed;
  border-radius: 999px;
}

.node-editor .marker-node {
  color: #e5dcea;
  background: #393044;
  border-color: #9a83ad;
}

.node-editor .node-group-frame .group-definition-port {
  color: #bdcbb7;
  text-align: center;
  z-index: 5;
  pointer-events: auto;
  cursor: crosshair;
  background: none;
  border: 0;
  border-radius: 0;
  width: 24px;
  height: 28px;
  padding: 0;
  font-size: 15px;
  line-height: 28px;
  position: absolute;
  bottom: auto;
  transform: translateY(-50%);
  top: 50% !important;
}

.node-editor .node-group-frame .group-entry-port {
  left: 6px;
  right: auto;
}

.node-editor .node-group-frame .group-return-port {
  color: #ccbdb9;
  right: 6px;
  left: auto !important;
}

.graph-edge.group-mapping .edge-line {
  stroke-dasharray: 5 4;
  stroke: #9bbb83;
}

.node-editor .node-group-frame .group-definition-port:hover {
  filter: brightness(1.35);
}

.graph-test-message {
  letter-spacing: 0;
  border-radius: 7px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 80%;
  padding: 9px 14px;
  font-size: 11px;
  display: flex;
  top: auto;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.graph-test-message button {
  color: #d2e2e5;
  cursor: pointer;
  background: #233135;
  border: 1px solid #536568;
  border-radius: 5px;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
}

.marker-node .marker-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: none;
  width: 5em;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 500 14px / 1.4 Microsoft YaHei, sans-serif;
  display: block;
  overflow: hidden;
}

.marker-node input.marker-name {
  color: inherit;
  background: #111b1e;
  border: 0;
  border-radius: 3px;
  outline: 1px solid #a6ced8;
}

.marker-node .marker-alias-drag {
  cursor: grab;
  background: #42585f;
  border: 0;
  border-radius: 4px;
  flex: none;
  place-items: center;
  width: 22px;
  height: 24px;
  padding: 2px;
  display: grid;
}

.marker-node .marker-alias-drag:hover {
  background: #607c85;
}

.marker-node .marker-alias-drag img {
  filter: brightness(0) saturate() invert(94%);
  width: 18px;
  height: 18px;
}

.marker-node .input-port.event {
  border-color: #a78ab8;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.marker-node .output-port.default {
  width: 14px;
  height: 14px;
  padding: 0;
  top: 50%;
  bottom: auto;
  right: 0;
  transform: translate(50%, -50%);
}

.test-option.mouse-disabled:disabled {
  opacity: var(--ui-opacity, 1);
  cursor: default;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
.studio-home,.studio-login{height:100vh;overflow:auto;padding:40px;background:#101516;color:#dce5e5;font:14px/1.6 Inter,'Microsoft YaHei',sans-serif}.studio-home>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.studio-home h1,.studio-login h1{font-size:32px;margin:4px 0}.studio-home p,.studio-home small,.studio-login p{color:#8faaaa}.studio-home small,.studio-login small{display:block}.studio-home input,.studio-home select,.studio-login input{box-sizing:border-box;width:10em;max-width:100%;background:#101719;color:#e3ecee;border:1px solid #3d535a;border-radius:8px;padding:8px}.studio-home button,.studio-login button{padding:8px 14px;background:#263b42;border:1px solid #42616a;border-radius:8px;cursor:pointer}.studio-home button:hover,.studio-login button:hover{background:#35505a}.studio-home button:disabled,.studio-login button:disabled{opacity:.45}.studio-home button.primary,.studio-login button.primary{background:#265941}.studio-login{display:grid;place-items:center}.studio-login-card{width:min(360px,90vw);padding:32px;border:1px solid #304348;border-radius:14px;background:#172023}.studio-login-card form,.studio-login-card label{display:grid;gap:8px}.studio-login-card form{gap:16px;margin-top:24px}.remember-option{display:flex!important;grid-template-columns:none;align-items:center;gap:8px!important;color:#9cb4b4}.remember-option input{width:16px!important;height:16px;padding:0!important;accent-color:#5b9b68}.studio-project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:16px}.studio-project-tile{display:grid;gap:8px;padding:14px;border:1px solid #304348;border-radius:12px;background:#172023}.project-thumbnail{height:92px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#28434a,#182326);font-size:24px;color:#91c8d0}.studio-project-tile small{color:#8faaaa}.studio-home-actions{display:flex;gap:10px;margin-top:24px}.studio-empty{padding:20px;border:1px dashed #3d535a;border-radius:10px}.studio-error{background:#4b2525;padding:10px;margin-bottom:18px;border:1px solid #925252;border-radius:8px}.studio-home footer{color:#799195;margin-top:28px}.studio-loading{padding:50px;color:#b3cece}.toolbar-project>span{font-size:10px;color:#8fa9a9}.toolbar-project button:disabled{opacity:.4}
/* Centered entry pages; editor styles remain scoped separately. */
.studio-home,.studio-login{box-sizing:border-box;min-height:100dvh;height:100dvh;padding:48px 24px;background:radial-gradient(ellipse at 50% 0%,#1c2b2d 0%,#101516 65%)}
.studio-login-card{box-sizing:border-box;width:min(400px,100%);padding:40px 36px;text-align:center;border-radius:20px;box-shadow:0 24px 70px #0003}
.studio-login-card>small,.studio-home header small{font-size:10px;letter-spacing:2.5px;color:#819d9f}
.studio-login-card h1{margin:12px 0 0;font-size:30px;letter-spacing:-.8px}
.studio-login-card form{margin-top:32px;gap:20px;justify-items:center}
.studio-login-card label{width:100%;justify-items:center;gap:9px;color:#acbfc0;font-size:13px}
.studio-login-card input:not([type=checkbox]){width:100%;height:44px;text-align:center}
.studio-login-card .remember-option{width:auto;justify-content:center;font-size:12px}
.studio-login-card form>button{width:100%;min-height:44px}
.studio-login-card .studio-error{margin:20px 0 0;font-size:13px}
/* Project center follows the reference layout. */
.studio-home{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:52px 24px 40px;background:radial-gradient(ellipse at 50% 0%,#202829 0%,#171d1e 85%)}
.studio-home>header{position:relative;display:flex;justify-content:center;flex-shrink:0;width:min(1304px,100%);margin:0;box-sizing:border-box}
.studio-home header small{font-size:12px;letter-spacing:2.5px}
.studio-home header h1{margin:12px 0 0;font-size:32px;font-weight:400;line-height:1.5;letter-spacing:2px}
.studio-account{position:absolute;right:0;bottom:4px;display:flex;align-items:center;gap:16px}
.studio-home header p{margin:0;font-size:14px;white-space:nowrap}
.studio-home .studio-signout{position:static;background:transparent;color:#91aaac;border-color:#303d40;font-size:14px;min-height:46px;padding:8px 16px}
.studio-home-actions{order:1;justify-content:center;flex-wrap:wrap;margin:0;gap:32px;width:100%}
.studio-home .studio-home-actions button,.studio-home .studio-home-actions button.primary{min-height:40px;padding:8px 14px;background:transparent;border-color:transparent;color:#8faaaa;font-size:16px}
.studio-home .studio-home-actions button:hover,.studio-home .studio-home-actions button.primary:hover{background:#ffffff08;color:#dce5e5}
.studio-project-grid{order:2;display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;width:min(1304px,100%);gap:24px;padding:35px 0 0;border-top:1px solid #303b3e}
.studio-project-tile{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;width:306px;max-width:100%;padding:20px 25px 24px;gap:12px;border:1px solid #344247;border-radius:20px;background:#1b2224;transition:border-color .18s,box-shadow .18s}
.studio-project-tile:hover{border-color:#56777b;box-shadow:0 12px 28px #0002}
.studio-project-tile strong{min-height:24px;margin:0 0 22px;font-size:16px;overflow-wrap:anywhere}
.project-thumbnail{flex-shrink:0;height:150px;margin:0 0 37px;border-radius:10px;background:linear-gradient(135deg,#304047,#1d2629);font-size:32px;letter-spacing:4px;color:#9bc3d2}
.studio-project-tile button{min-height:44px;font-size:14px;background:#2d3b42;border-color:#485f68;border-radius:10px}
.studio-home .studio-project-tile button.primary{background:#415b52;border-color:#587368}
.studio-home .studio-project-tile button.primary:hover{background:#4b6b60}
.studio-project-tile .danger{margin-top:0;background:transparent;border-color:transparent;color:#7f8b94;font-size:14px}
.studio-project-tile .danger:hover{background:#ffffff08;color:#b7c1c7}
.studio-empty{box-sizing:border-box;width:min(560px,100%);margin:0;padding:56px 24px;color:#91aaac;background:#17202380;border-radius:16px}
.restore-project-dialog{order:2;box-sizing:border-box;width:min(560px,100%);padding:24px;text-align:left;border:1px solid #40575b;border-radius:14px;background:#172023;box-shadow:0 18px 48px #0005}.restore-project-dialog h2{margin:0 0 8px;font-size:19px}.restore-project-dialog p{margin:0 0 18px;color:#9ab1b2}.restore-project-dialog label{display:grid;gap:7px;color:#c4d3d3}.restore-project-dialog input{width:100%;height:42px}.restore-project-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:18px}
.studio-home>.studio-error{width:min(560px,100%);box-sizing:border-box;margin:0}
.studio-home button,.studio-login button{color:#dce5e5;transition:background .15s,border-color .15s}
.studio-home button.primary,.studio-login button.primary{background:#315b50;border-color:#527e70}
.studio-home button.primary:hover,.studio-login button.primary:hover{background:#3e6e60}
:where(.studio-home, .studio-login) :where(:focus, :focus-visible) { outline: none; }
@media(max-width:600px){.studio-home,.studio-login{padding:28px 18px}.studio-login-card{padding:32px 24px}.studio-home>header{padding:0;flex-direction:column;align-items:center;gap:16px}.studio-home .studio-signout{position:static;transform:none}.studio-home-actions{gap:8px}.studio-home .studio-home-actions button{min-width:0;padding:10px 12px;font-size:12px}.studio-project-tile{width:100%;max-width:340px}}

@media(max-width:900px){.studio-home>header{flex-direction:column;align-items:center;gap:18px}.studio-account{position:static}.studio-home header h1{font-size:30px}}
@media(max-width:600px){.studio-home{padding:28px 18px;gap:20px}.studio-home-actions{gap:8px}.studio-home .studio-home-actions button,.studio-home .studio-home-actions button.primary{padding:8px;font-size:14px}.studio-home header p{font-size:14px}.studio-project-tile{width:306px;max-width:100%}.studio-project-grid{padding-top:28px}}