html.ct-editor-page pony-town-app > .container {
  max-width: 1142px;
  padding: 0 15px;
}

html.ct-editor-page main > character > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px;
  margin: 0;
}

html.ct-editor-page .ct-preview-column {
  width: 100%;
  max-width: 432px;
  justify-self: center;
  padding: 15px;
  background: var(--ct-panel);
  border: 1px solid var(--ct-line-soft);
  border-radius: var(--ct-radius);
  position: sticky;
  top: 24px;
}

html.ct-editor-page .ct-preview-column > .character-select {
  max-width: 400px;
}

html.ct-editor-page
  .ct-preview-column
  > .character-select
  > .div:first-child
  > :empty {
  display: none;
  margin: 0 !important;
}

html.ct-editor-page .character-select.input-group {
  max-width: 100%;
}

html.ct-editor-page .character-preview-box {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  margin-top: 16px !important;
}

html.ct-editor-page .character-preview-box canvas {
  border-radius: 0 !important;
  image-rendering: pixelated;
}

html.ct-editor-page .character-preview-controls-box {
  margin-bottom: 14px;
}

html.ct-editor-page .character-preview-controls {
  background: var(--ct-field);
  padding: 4px;
  border: 1px solid var(--ct-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  height: auto;
  min-height: 49px;
  align-items: stretch;
}

html.ct-editor-page .character-preview-controls.floating {
  left: max(15px, env(safe-area-inset-left));
  right: max(15px, env(safe-area-inset-right));
  width: auto;
  max-width: 400px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  html.ct-editor-page .character-preview-controls > * {
    min-width: 34px;
  }
}

html.ct-editor-page .character-preview-controls > :is(button, scale-picker) {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

html.ct-editor-page .character-preview-controls .btn {
  height: var(--ct-control-size);
  min-height: var(--ct-control-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ct-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.ct-editor-page .character-preview-controls .btn:hover {
  background: var(--ct-raised);
  color: var(--ct-text);
}

html.ct-editor-page .ct-rand-btn {
  min-height: 46px;
  border-radius: 9px;
  background: #393147 !important;
  border: 1px solid #65557b !important;
  box-shadow: none;
  color: #ede4fb !important;
  text-shadow: none;
  font-size: 14px;
}

html.ct-editor-page .ct-rand-btn:hover {
  background: #4a3e5d !important;
}

html.ct-editor-page play-notice {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ct-line-soft);
}

html.ct-editor-page play-notice li {
  color: var(--ct-muted);
  font-size: 14px;
  line-height: 1.6;
}

html.ct-editor-page play-notice a {
  color: var(--ct-accent);
}

html.ct-editor-page .character-tabs:not(.is-modal) {
  width: 100%;
  padding: 0;
  min-width: 0;
  margin-bottom: 32px;
}

html.ct-editor-page .character-tabset {
  display: block;
}

html.ct-editor-page .dropdown-menu .dropdown-item[data-import] {
  color: var(--ct-text) !important;
  opacity: 1 !important;
  animation: none !important;
  text-shadow: none !important;
}

html.ct-editor-page
  .dropdown-menu
  .dropdown-item[data-import]:is(:hover, :focus) {
  color: var(--ct-accent) !important;
  background: var(--ct-raised);
}

html.ct-editor-page .character-tabset > .nav {
  display: flex;
  gap: 3px;
  background: var(--ct-panel);
  border: 1px solid var(--ct-line-soft);
  border-radius: 12px;
  padding: 6px;
  padding-right: 86px;
  min-height: 58px;
  margin-bottom: 12px;
}

html.ct-editor-page .character-tabset > .nav .nav-link {
  padding: 10px 13px;
  border: 0;
  border-radius: 7px;
  color: var(--ct-muted);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  min-height: 44px;
}

html.ct-editor-page .character-tabset > .nav .nav-link.active {
  background: var(--ct-accent);
  color: #252014;
}

html.ct-editor-page .character-tabset > .nav .nav-link:not(.active):hover {
  background: var(--ct-raised);
  color: var(--ct-text);
}

html.ct-editor-page .character-tabs > .undo-redo {
  position: relative;
  z-index: 1;
  margin: 8px 8px -58px 0;
  height: 42px;
}

html.ct-editor-page .undo-redo .btn {
  color: var(--ct-muted);
  padding: 10px;
  border-radius: 7px;
}

html.ct-editor-page .character-tab {
  background: var(--ct-panel);
  border: 1px solid var(--ct-line-soft);
  border-radius: var(--ct-radius);
  margin: 0;
  padding: 22px;
  min-height: 0;
}

html.ct-editor-page .character-tab .form-group {
  margin-bottom: 14px;
}

html.ct-editor-page .character-tab label {
  font-size: 14px;
  color: var(--ct-text);
  line-height: 1.45;
}

html.ct-editor-page .character-tab .text-muted {
  color: var(--ct-muted) !important;
}

html.ct-editor-page .character-tab hr {
  border-color: var(--ct-line);
  opacity: 1;
  margin: 20px 0;
}

html.ct-editor-page .character-tab info-icon {
  color: #8d96a6 !important;
}

html.ct-editor-page .color-picker {
  border-radius: 7px;
  background: var(--ct-field);
}

html.ct-editor-page .color-picker .color-picker-input {
  border-radius: 0;
  font-family: Consolas, monospace;
  letter-spacing: 0.025em;
  font-size: 13px;
}

html.ct-editor-page .color-picker .color-picker-chevron {
  border-radius: 0 7px 7px 0;
}

html.ct-editor-page .color-picker color-box {
  background: var(--ct-field);
  border-radius: 7px 0 0 7px;
}

html.ct-editor-page sprite-selection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 100%;
  border: 0;
  border-radius: 7px;
  background: var(--ct-field);
}

html.ct-editor-page sprite-selection::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ct-line);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

html.ct-editor-page sprite-selection > canvas.shared-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

@supports (width: round(down, 100%, 52px)) {
  html.ct-editor-page sprite-selection {
    width: round(down, 100%, var(--ct-tile-size));
  }
}

html.ct-editor-page sprite-selection .selection-list {
  border-color: var(--ct-line);
  background: var(--ct-field);
  border-radius: 0;
}

html.ct-editor-page sprite-selection .selection-item {
  border-color: var(--ct-line);
}

html.ct-editor-page sprite-selection .selection-item.active {
  background: #49402d;
  box-shadow: inset 0 0 0 2px var(--ct-accent);
}

html.ct-editor-page sprite-selection .selection-item:hover {
  background: #333a46;
}

html.ct-editor-page sprite-selection .selection-item.active:hover {
  background: #564a32;
}

html.ct-editor-page check-box .check-box {
  color: var(--ct-muted);
  border-color: var(--ct-line);
  border-radius: 5px;
}

html.ct-editor-page .lock-box .check-box {
  width: var(--ct-control-size);
  height: var(--ct-control-size);
  min-height: var(--ct-control-size);
  padding: 0;
  align-items: center;
  justify-content: center;
}

html.ct-editor-page .color-picker .color-picker-box {
  top: 0;
  left: 0;
  bottom: auto;
  width: var(--ct-control-size);
  height: var(--ct-control-size);
  max-width: var(--ct-control-size);
  max-height: var(--ct-control-size);
  padding: 7px;
}

html.ct-editor-page .color-picker .color-picker-box-top {
  width: 26px;
  height: 26px;
}

html.ct-editor-page .color-picker-input {
  padding-left: var(--ct-control-size) !important;
}

html.ct-editor-page .color-picker-chevron {
  flex: 0 0 var(--ct-control-size);
  width: var(--ct-control-size);
  padding: 0 !important;
}

html.ct-editor-page .character-select.input-group > .btn {
  min-height: var(--ct-control-size);
}

html.ct-editor-page .form-check-input {
  border-color: #657080;
  background-color: var(--ct-field);
}

html.ct-editor-page .form-check-input:checked {
  background-color: #b58c36;
  border-color: var(--ct-accent);
}

html.ct-editor-page .form-check label {
  padding-top: 2px;
  padding-bottom: 2px;
}

@media (min-width: 1100px) {
  html.ct-editor-page .character-tabs:not(.is-modal) {
    max-height: calc(100vh - 140px);
    min-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 5px;
  }

  html.ct-editor-page .character-tabset > .nav {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  html.ct-editor-page .character-tabs > .undo-redo {
    position: sticky;
    top: 8px;
    z-index: 21;
  }
}

@media (max-width: 1199px) {
  html.ct-editor-page pony-town-app > .container {
    max-width: 960px;
  }

  html.ct-editor-page .ct-preview-column {
    padding: 15px;
  }

  html.ct-editor-page .character-tab {
    padding: 16px;
  }

  html.ct-editor-page .character-tabset > .nav .nav-link {
    padding: 10px 9px;
  }
}

@media (max-width: 991px) {
  html.ct-editor-page pony-town-app > .container {
    max-width: 720px;
  }

  html.ct-editor-page main > character > .row {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
  }

  html.ct-editor-page .ct-preview-column {
    position: static;
    padding: 15px;
  }

  html.ct-editor-page .ct-preview-column > .character-select {
    max-width: 400px;
  }
}

@media (max-width: 767px) {
  html.ct-editor-page pony-town-app > .container {
    max-width: 540px;
  }

  html.ct-editor-page .ct-preview-column {
    padding: 16px;
  }

  html.ct-editor-page .character-preview-controls {
    width: 280px;
    max-width: 100%;
    flex-wrap: wrap;
  }

  html.ct-editor-page .character-tabset > .nav {
    padding-right: 6px;
    padding-bottom: 6px;
    gap: 2px;
    flex-wrap: wrap;
  }

  html.ct-editor-page .character-tabs > .undo-redo {
    display: none;
  }

  html.ct-editor-page .character-tabset > .nav .nav-link {
    flex: 1;
    min-width: 44px;
    padding: 10px 8px;
  }

  html.ct-editor-page .character-tab {
    margin: 0;
    padding: 16px;
  }
}

@media (max-width: 575px) {
  html.ct-editor-page pony-town-app > .container {
    max-width: none;
  }
}

@media (max-width: 400px) {
  html.ct-editor-page .ct-preview-column {
    padding: 12px;
  }

  html.ct-editor-page .character-tab {
    padding: 12px;
  }
}

html.ct-editor-page main > character {
  display: block;
  padding-top: 24px;
}