@font-face {
  font-family: "Pixel Studio";
  src: url('./pixel-assets/PixelifySans.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Production skin for the existing library, compositor and device controllers. */
body.pixel-studio {
  --pixel-ink: #231039;
  --pixel-plum: #291446;
  --pixel-edge: #130822;
  --pixel-lime: #d6ff56;
  --pixel-pink: #f49ed3;
  --pixel-cyan: #8ce3de;
  --pixel-lavender: #b7a0eb;
  --ink: #231039;
  --paper: #e5d9ff;
  --muted: #5c4779;
  --line: #826b9e;
  --red: #53306f;
  --green: #291446;
  --error: #9e173c;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --typewriter: var(--sans);
  --mono: "Pixel Studio", ui-monospace, monospace;
  margin: 0;
  min-width: 320px;
  background: var(--pixel-plum);
  color: #ede3ff;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color-scheme: light;
}

.pixel-studio *, .pixel-studio *::before, .pixel-studio *::after { box-sizing: border-box; }
.pixel-studio [hidden] { display: none !important; }
.pixel-studio :is(button, input, select, textarea, label, p, nav, dl, footer) { font-family: var(--sans); }
.pixel-studio :is(button, .button) {
  border: 2px solid #3e265a;
  border-radius: 0;
  padding: 9px 12px;
  background: #e5d9ff;
  color: var(--pixel-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.pixel-studio :is(button, .button):hover:not(:disabled) { background: #f4ecff; border-color: var(--pixel-ink); }
.pixel-studio :is(button, .button):disabled { opacity: .45; cursor: not-allowed; }
.pixel-studio button:active:not(:disabled) { transform: translate(1px, 1px); }
body.pixel-studio :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #de3d85 !important;
  outline-offset: 3px;
}
.pixel-studio input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
.pixel-studio select, .pixel-studio textarea {
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 2px solid #3e265a;
  border-radius: 0;
  background: #e5d9ff;
  color: var(--pixel-ink);
  font-size: 12px;
  line-height: 1.45;
}
.pixel-studio input[type=range], .pixel-studio input[type=checkbox], .pixel-studio input[type=radio], .pixel-studio progress { accent-color: #53306f; }
.pixel-studio a { color: inherit; }
body.pixel-studio :is(h1, h2, h3, h4) { font-family: var(--sans); font-weight: 700 !important; }
.pixel-studio :is(h1, h2, h3, p, dl) { overflow-wrap: anywhere; }
.pixel-studio .text-button { background: transparent; border: 0; padding: 3px 0; color: #473060; font-size: 11px; }
.pixel-studio .text-button:hover:not(:disabled) { background: transparent; color: #1e0c36; }
.pixel-studio .primary { background: var(--pixel-lime); border-color: var(--pixel-ink); color: var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-ink); }
.pixel-studio .primary:hover:not(:disabled) { background: #e5ff93; }
.pixel-studio .panel { border-radius: 0; box-shadow: none; }

body.pixel-studio .pixel-topbar {
  min-height: 74px;
  padding: 14px 3.5%;
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--pixel-lime);
  color: var(--pixel-ink);
  border-bottom: 3px solid var(--pixel-edge);
}
.pixel-studio .pixel-wordmark, .pixel-studio .pixel-topbar .wordmark {
  flex: none;
  color: var(--pixel-ink);
  text-decoration: none;
  font: 700 31px/1 "Pixel Studio", monospace;
  letter-spacing: -1px;
}
.pixel-studio .pixel-wordmark small, .pixel-studio .wordmark small { margin-left: 4px; font: 10px var(--sans); vertical-align: top; }
.pixel-studio .pixel-wordmark sup { margin-left: 3px; font: 11px var(--sans); vertical-align: top; }
.pixel-studio .pixel-wordmark > span { display: block; font-size: .62em; letter-spacing: 1px; margin-top: 4px; }
.pixel-studio .pixel-topbar nav { display: flex; align-items: center; gap: 25px; flex: 1; }
.pixel-studio .pixel-topbar nav :is(a, button) { padding: 8px 0; background: transparent; border: 0; box-shadow: none; color: var(--pixel-ink); font-size: 12px; text-decoration: none; }
.pixel-studio .pixel-topbar nav button[aria-current=page], .pixel-studio .pixel-topbar nav button[aria-selected=true], .pixel-studio .pixel-topbar nav button[aria-pressed=true], .pixel-studio .pixel-topbar nav button.active { border-bottom: 2px solid currentColor; }
.pixel-studio .pixel-topbar > a:not(.pixel-wordmark):not(.wordmark) { font-size: 11px; }
.pixel-studio #pixel-language { flex: none; min-width: 40px; min-height: 32px; padding: 5px 8px; background: #efe6ff; border: 2px solid var(--pixel-ink); box-shadow: 3px 3px 0 var(--pixel-ink); font: 16px "Pixel Studio", var(--sans); }
body.pixel-studio main.pixel-main { width: min(1392px, calc(100% - 80px)); max-width: none; padding: 0; margin: 0 auto; }
.pixel-studio .pixel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-content: space-between; gap: 0 24px; padding: 29px 0 22px; }
.pixel-studio .pixel-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; max-width: 360px; }
.pixel-studio .pixel-heading-actions > span { color: #86e5e1; font: 700 16px/1 "Pixel Studio", monospace; letter-spacing: 1px; }
.pixel-studio .pixel-heading-actions #pixel-restore { font-size: 10px; padding: 8px; border: 1px solid #b6a0ce; background: transparent; color: #ede3ff; }
.pixel-studio .pixel-heading-actions #pixel-mix-status { width: 100%; margin: 0; font-size: 10px; color: #d7bedf; text-align: right; }
.pixel-studio .pixel-heading-actions #pixel-mix-status:empty { display: none; }
.pixel-studio .pixel-heading #page-status { grid-column: 1 / -1; padding: 11px 0 0; margin: 0; min-height: 22px; }
.pixel-studio .pixel-heading .eyebrow { margin: 0 0 10px; color: #b9a4d8; font: 12px "Pixel Studio", var(--sans); letter-spacing: 1px; }
body.pixel-studio .pixel-heading h1 { margin: 0; color: var(--pixel-lime); font: 700 clamp(38px, 4.3vw, 64px)/.92 "Pixel Studio", var(--sans); letter-spacing: -1.4px !important; }
.pixel-studio .pixel-heading h1 span { display: block; color: var(--pixel-pink); }
.pixel-studio .pixel-heading p:not(.eyebrow) { margin: 13px 0 0; color: #cbb9e3; font-size: 12px; }
.pixel-studio #pixel-save { flex: none; padding: 12px 17px; background: var(--pixel-pink); border: 2px solid var(--pixel-edge); box-shadow: 4px 4px 0 var(--pixel-edge); color: var(--pixel-ink); font-size: 12px; }
.pixel-studio #pixel-save:hover:not(:disabled) { background: #ffc8e8; }

.pixel-studio .pixel-workbench { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(380px, 1.6fr) minmax(270px, 1fr); align-items: start; gap: 24px; }
.pixel-studio .pixel-workbench > * { min-width: 0; }
.pixel-studio :is(.pixel-library, .pixel-mix) { border: 2px solid var(--pixel-edge); box-shadow: 5px 5px 0 var(--pixel-edge); color: var(--pixel-ink); }
.pixel-studio .pixel-library { background: var(--pixel-cyan); padding: 18px; --paper: #b5eeeb; --muted: #365a65; --line: #699ca3; }
.pixel-studio .pixel-library > h2, .pixel-studio .pixel-mix > h2 { margin: 0 0 16px; font-size: 15px; }
.pixel-studio .pixel-panel-label { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pixel-studio .pixel-panel-label > span { border: 1.5px solid currentColor; padding: 3px 5px; font: 16px/1 "Pixel Studio", monospace; }
.pixel-studio .pixel-panel-label h2 { margin: 0; font-size: 15px; line-height: 1.2; }
.pixel-studio .pixel-mix .pixel-panel-label { padding-bottom: 18px; border-bottom: 1px solid #69558e80; }
.pixel-studio .pixel-search { display: grid; gap: 6px; margin-bottom: 17px; color: #365a65; font-size: 10px; }
.pixel-studio .pixel-search input { width: 100%; background: #c4f2ee !important; border-color: #446879 !important; padding: 8px 9px !important; }
.pixel-studio .library-tabs { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0 0 18px; border-bottom: 1px solid #48748180; }
.pixel-studio .library-tabs button { padding: 6px 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 11px; line-height: 1.3; }
.pixel-studio .library-tabs button[aria-selected=true] { color: var(--pixel-ink); border-color: var(--pixel-ink); }
.pixel-studio :is(#character-library, #module-libraries, .character-library, .module-libraries) { border: 0; padding: 0; }
.pixel-studio .library-heading { display: flex; flex-direction: column; gap: 15px; }
.pixel-studio .library-heading .eyebrow { margin-bottom: 5px; color: #365a65; font: 11px "Pixel Studio", var(--sans); letter-spacing: .5px; }
.pixel-studio .library-heading h2 { font-size: 13px; line-height: 1.5; }
.pixel-studio .library-heading form { width: 100%; max-width: none; padding-top: 12px; border-top: 1px solid #48748160; }
.pixel-studio .library-heading label { font-size: 10px; color: #365a65; margin-bottom: 6px; }
.pixel-studio .library-heading form > div { display: flex; flex-wrap: wrap; gap: 7px; }
.pixel-studio .library-heading input { width: 100%; flex: 1 1 100%; background: #c4f2ee; padding: 8px 9px !important; border-color: #446879 !important; }
.pixel-studio .library-heading button { width: 100%; background: #7fd4cf; border: 2px dashed #39516a; padding: 9px; font-size: 11px; }
.pixel-studio .character-library-grid { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 18px; }
.pixel-studio .character-library-entry { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; align-content: center; column-gap: 11px; row-gap: 5px; width: 100%; min-width: 0; max-width: none; min-height: 105px; margin: 0; padding: 10px; background: #b5eeeb; border: 2px solid #352248; border-radius: 0; box-shadow: 3px 3px 0 #352248; text-align: left; }
.pixel-studio .character-library-entry:hover:not(:disabled) { background: #c9f8f2; transform: translateY(-2px); }
.pixel-studio .character-library-entry[aria-pressed=true] { background: var(--pixel-lime); border-color: var(--pixel-ink); box-shadow: 4px 4px 0 var(--pixel-ink); }
.pixel-studio .library-entry-icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 68px; height: 68px; background: #66ced1; color: var(--pixel-ink); font: 32px "Pixel Studio", var(--sans); overflow: hidden; }
.pixel-studio .library-entry-icon img { width: 68px; height: 68px; object-fit: contain; image-rendering: pixelated; }
.pixel-studio .library-entry-icon > img, .pixel-studio .library-entry-icon > .library-icon-initials { grid-area: 1 / 1; }
.pixel-studio .library-icon-initials { font: 700 24px "Pixel Studio", var(--sans); }
.pixel-studio .character-library-entry[aria-pressed=true] .library-entry-icon { background: #b6dc44; }
.pixel-studio .character-library-entry strong { align-self: end; font: 650 12px/1.5 var(--sans); color: var(--pixel-ink); }
.pixel-studio .library-entry-meta { align-self: start; font-size: 9px; line-height: 1.6; color: #3f5b62; }
.pixel-studio :is(.library-status, .module-library-note) { color: #365a65; font-size: 10px; line-height: 1.7; margin-top: 14px; }
.pixel-studio .module-library-preview { border-top: 1px solid #48748160; margin-top: 14px; padding: 14px 0 0; font-size: 11px; }
.pixel-studio .module-library-preview form > label { display: grid; gap: 6px; }
.pixel-studio .module-library-preview input[type=text] { width: 100%; }
.pixel-studio .module-library-preview button { margin: 10px 0 0; max-width: 100%; white-space: normal; }
.pixel-studio .ui-layout-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pixel-studio .ui-palette { gap: 6px; }
.pixel-studio .ui-palette-color { gap: 3px; font-size: 9px; }
.pixel-studio .ui-palette-color input { width: 33px; height: 30px; border-radius: 0; }

.pixel-studio .pixel-console { padding: 0 8px; min-width: 0; }
.pixel-studio .pixel-console-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 2px 12px; border-bottom: 1px solid #765799; }
body.pixel-studio .pixel-console-top h2 { color: var(--pixel-lime); font: 20px/1 "Pixel Studio", monospace; letter-spacing: 1px !important; }
.pixel-studio .pixel-device-meta { display: flex; justify-content: center; margin: 0 0 8px; color: #bfa4d6; font: 10px "Pixel Studio", var(--sans); }
.pixel-studio .character-panel { padding: 0; border: 0; background: transparent; color: #ede3ff; --muted: #baa0d3; }
.pixel-studio .character-panel > .panel-heading { align-items: center; margin: 0; padding: 13px 2px 0; border-bottom: 0; gap: 8px; }
.pixel-studio .character-panel .panel-heading .eyebrow { color: #b49bcd; font: 10px "Pixel Studio", var(--sans); letter-spacing: .7px; margin-bottom: 5px; }
body.pixel-studio #character-name { color: var(--pixel-lime); font-size: 17px; line-height: 1.4; }
.pixel-studio .pill { color: #d8c7e8; background: #4b2d67; border-radius: 0; font-size: 9px; padding: 4px 6px; white-space: normal; }
.pixel-studio .pill.caution { color: #ffdc8f; background: #54324d; }
.pixel-studio .hero-preview { display: block; }
.pixel-studio .pixel-device {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: .84697778777;
  margin: 13px auto 20px;
  isolation: isolate;
}
.pixel-studio .pixel-hardware { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.pixel-studio .pixel-device #preview-stage {
  position: absolute;
  left: 32.070485%;
  top: 27.344877%;
  width: 35.770925%;
  height: auto;
  min-height: 0;
  max-width: none;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 3%;
  overflow: hidden;
  box-shadow: 0 0 0 1px #161021;
}
.pixel-studio .pixel-device #main-preview { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: 1; image-rendering: pixelated; }
.pixel-studio .pixel-device .stage-label { display: none; }
.pixel-studio .pixel-console .playback { margin-top: 0; padding: 12px 0; gap: 10px; }
.pixel-studio .pixel-console .playback :is(.play-button, .icon-button) { flex: none; width: 35px; height: 35px; min-height: 0; padding: 0; border: 2px solid var(--pixel-edge); background: var(--pixel-pink); color: var(--pixel-ink); box-shadow: 2px 2px 0 var(--pixel-edge); }
.pixel-studio .pixel-console .playback input { accent-color: var(--pixel-lime); height: 18px; }
.pixel-studio .pixel-console .playback output { color: #cfb2e7; font: 12px "Pixel Studio", monospace; }
.pixel-studio #pixel-zoom, .pixel-studio .pixel-zoom-button { background: transparent; border: 1px solid #a98cc6; color: #e5d9f3; padding: 5px 9px; font-size: 10px; }
.pixel-studio .pixel-console .animation-library { border: 2px solid var(--pixel-edge); background: #43245f; color: #e2d0f1; padding: 15px; box-shadow: 4px 4px 0 var(--pixel-edge); margin-top: 10px; }
.pixel-studio .animation-library .section-heading { gap: 6px; margin-bottom: 12px; color: #d0b5e8; }
.pixel-studio .animation-library .section-heading h2 { font-size: 12px; line-height: 1.5; }
.pixel-studio .animation-library .section-heading > span, .pixel-studio #animation-count { color: #c3a9d8; font-size: 9px; }
.pixel-studio .animation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pixel-studio .animation-card { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 4px; border: 1px solid #9673b6; border-radius: 0; background: #39204e; color: #e2d0f1; box-shadow: none; text-align: center; }
.pixel-studio .animation-card:hover:not(:disabled) { background: #64427e; border-color: #c7a8e3; }
.pixel-studio .animation-card.selected { background: var(--pixel-lime); color: var(--pixel-ink); border-color: var(--pixel-edge); box-shadow: 2px 2px 0 var(--pixel-edge); }
.pixel-studio .animation-card :is(.card-canvas, .card-meta, .card-tick) { display: none; }
.pixel-studio .animation-card .card-name { justify-content: center; gap: 3px; margin: 0; font-size: 10px; line-height: 1.5; }
.pixel-studio .animation-card .preview-only { color: inherit; background: transparent; font-size: 8px; padding: 0; }
.pixel-studio .animation-card[data-role] { border-top-width: 1px; }
.pixel-studio .additional-animation-note { border-color: #73518e; color: #c6aedb; font-size: 10px; margin-top: 12px; padding-top: 10px; }

.pixel-studio .pixel-mix { padding: 20px; background: var(--pixel-lavender); }
.pixel-studio .composition-choices { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
.pixel-studio .composition-choices label { gap: 6px; font-size: 11px; color: #3f285e; }
.pixel-studio .composition-choices select { width: 100%; min-height: 43px; box-shadow: 2px 2px 0 #8267ac; font-size: 12px; }
.pixel-studio .composition-picker-status { color: #543d70; margin: 13px 0 18px; font-size: 10px; line-height: 1.65; }
.pixel-studio #background-preview { padding-top: 17px; border-top: 1px solid #69558e80; margin-bottom: 0; }
.pixel-studio .scene-control-row { display: grid; grid-template-columns: 1fr; gap: 17px; }
.pixel-studio :is(.picker-label, .animation-layer-label) { color: #3f285e; font-size: 11px; }
.pixel-studio .scene-trigger { grid-template-columns: 43px minmax(0, 1fr) 12px; gap: 9px; padding: 7px; background: #e5d9ff; border: 2px solid #3e265a; box-shadow: 2px 2px 0 #8267ac; font-size: 11px; line-height: 1.5; }
.pixel-studio .scene-trigger canvas { width: 43px; height: 43px; }
.pixel-studio .scene-dropdown { background: #e5d9ff; color: var(--pixel-ink); border: 2px solid #3e265a; border-radius: 0; box-shadow: 4px 4px 0 var(--pixel-plum); padding: 9px; }
.pixel-studio .scene-dropdown-toolbar { gap: 7px; }
.pixel-studio .scene-dropdown-toolbar :is(label, span) { color: #543d70; font-size: 10px; }
.pixel-studio .scene-dropdown-toolbar select { padding: 5px; font-size: 10px; }
.pixel-studio .scene-tile-grid { gap: 7px; max-height: min(420px, 60vh); }
.pixel-studio .scene-tile { padding: 5px; border: 1px solid #a087b9; background: #d8c7f1; border-radius: 0; color: var(--pixel-ink); }
.pixel-studio .scene-tile[aria-selected=true] { background: var(--pixel-lime); border-color: var(--pixel-ink); box-shadow: 0 0 0 1px var(--pixel-ink); }
.pixel-studio .scene-tile[aria-selected=true]::after { color: var(--pixel-lime); background: var(--pixel-ink); border-radius: 0; }
.pixel-studio .scene-tile-title { font-size: 10px; line-height: 1.45; }
.pixel-studio .scene-tile-detail { font-size: 9px; line-height: 1.45; color: #5c4779; }
.pixel-studio .animation-layer-label select { min-height: 43px; border: 2px solid #3e265a; box-shadow: 2px 2px 0 #8267ac; }
.pixel-studio :is(.scene-note, .scene-status, .background-package-meta, .scene-package-details) { font-size: 10px; line-height: 1.65; color: #543d70; }
.pixel-studio .scene-package-details summary { color: #3f285e; }
.pixel-studio .background-source > label:first-child { min-width: 0; }
.pixel-studio .background-source { gap: 8px; }
.pixel-studio .background-source :is(.button, select) { font-size: 10px; }
.pixel-studio .connection-panel { margin: 21px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid #69558e80; background: transparent; }
.pixel-studio .connection-panel .section-heading { margin-bottom: 12px; }
.pixel-studio .connection-panel h2 { font-size: 15px; }
.pixel-studio .connection-dot { width: 8px; height: 8px; background: #725c91; border-radius: 0; }
.pixel-studio .connection-dot.connected { background: #d6ff56; box-shadow: 0 0 0 2px #3e265a; }
.pixel-studio .transport-options { padding: 0; border: 2px solid #3e265a; border-radius: 0; background: #a88bd7; gap: 0; }
.pixel-studio .transport-options label + label { border-left: 2px solid #3e265a; }
.pixel-studio .transport-options span { min-height: 36px; padding: 9px 3px; border: 0; border-radius: 0; font-size: 10px; }
.pixel-studio .transport-options input:checked + span { background: var(--pixel-plum); color: #e1ff6e; border: 0; box-shadow: none; }
.pixel-studio .transport-options input:focus-visible + span { outline: 3px solid #de3d85; outline-offset: 2px; }
.pixel-studio .transport-options input:disabled + span { opacity: .45; cursor: not-allowed; }
.pixel-studio .connection-panel :is(.aside-note, .connection-status, .swap-options p, .firmware-note, #upload-scope) { font-size: 10px; line-height: 1.65; color: #543d70; }
.pixel-studio .connection-panel .aside-note { margin: 10px 0; }
.pixel-studio .connection-panel .wide { padding: 10px 7px; font-size: 12px; }
.pixel-studio .connection-panel #connect-device { background: #d5c5f5; }
.pixel-studio .connection-panel #install-project { min-height: 49px; margin: 4px 0 7px; background: var(--pixel-lime); font-size: 13px; }
.pixel-studio .connection-panel #install-project:hover:not(:disabled) { background: #e5ff93; }
.pixel-studio .swap-options { margin-top: 14px; }
.pixel-studio .swap-options label { gap: 7px; font-size: 10px; color: #3f285e; }
.pixel-studio .swap-options input { flex: none; }
.pixel-studio .connection-panel .firmware-note { border-color: #69558e80; margin-top: 15px; padding-top: 11px; }
.pixel-studio #transfer-progress { padding: 10px; border: 2px solid #3e265a; background: #e5d9ff; }
.pixel-studio #upload-progress { display: block; height: 13px; accent-color: #53306f; }
.pixel-studio #progress-label { color: #3f285e; font-size: 11px; }
.pixel-studio .upload-result { color: #304e36; font-size: 11px; }
.pixel-studio .error, .pixel-studio .page-status.error, .pixel-studio .upload-result.error, .pixel-studio .connection-status.error { color: var(--error); }

.pixel-studio .pixel-receipt { margin-top: 27px; padding: 18px 22px; background: #e2ff71; color: var(--pixel-ink); border: 2px solid var(--pixel-edge); box-shadow: 5px 5px 0 var(--pixel-edge); --muted: #586831; --line: #9aac58; }
.pixel-studio .pixel-receipt .composition-panel { display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 26px; padding: 0; border: 0; background: transparent; }
.pixel-studio .pixel-receipt .section-heading { grid-column: 1; margin: 0; }
.pixel-studio .pixel-receipt h2 { font: 700 17px "Pixel Studio", var(--sans); }
.pixel-studio .pixel-receipt .small-label { color: #586831; font: 10px "Pixel Studio", var(--sans); }
.pixel-studio .composition-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 11px 0 0; grid-column: 1; }
.pixel-studio .composition-parts > div { display: block; padding: 0; border: 0; min-width: 0; }
.pixel-studio .composition-parts dt { font-size: 10px; color: #586831; }
.pixel-studio .composition-parts dd { text-align: left; margin: 4px 0 0; gap: 2px; font-size: 12px; }
.pixel-studio .composition-parts small { color: #586831; font-size: 9px; }
.pixel-studio .composition-total { grid-column: 2; grid-row: 1 / 3; align-content: center; margin: 0; }
.pixel-studio .composition-total strong { font: 700 34px "Pixel Studio", monospace; }
.pixel-studio .composition-total > span { color: #586831; font: 12px "Pixel Studio", monospace; }
.pixel-studio .composition-panel #composition-meter { grid-column: 2; margin: 10px 0 0; }
.pixel-studio .composition-panel #composition-status { grid-column: 1; margin-top: 10px; color: #586831; font-size: 10px; }
.pixel-studio .composition-note { grid-column: 1 / -1; margin-top: 9px; color: #586831; font-size: 10px; line-height: 1.6; }
.pixel-studio .storage-track { border-radius: 0; background: #a8c14b; height: 9px; }
.pixel-studio .storage-track > span { border-radius: 0; background: #45305c; }
.pixel-studio .storage-track.over-budget > span { background: #9e173c; }
.pixel-studio .page-status { min-height: 0; padding: 12px 0; font-size: 10px; color: #bfa4d6; }
.pixel-studio .pixel-library .page-status { color: #365a65; }
.pixel-studio .creation-progress { padding: 12px 0; color: var(--pixel-lime); font-size: 11px; }

.pixel-studio .pixel-advanced { display: grid; gap: 13px; margin: 28px 0 0; color: var(--pixel-ink); }
.pixel-studio .pixel-advanced > details { padding: 0 18px; border: 2px solid #806699; background: #c7b5e9; box-shadow: 3px 3px 0 var(--pixel-edge); }
.pixel-studio .pixel-advanced > details > summary { cursor: pointer; padding: 14px 0; color: var(--pixel-ink); font-size: 12px; font-weight: 650; }
.pixel-studio .pixel-advanced > details[open] { padding-bottom: 18px; }
.pixel-studio .pixel-advanced > details > #creation-progress { color: #53306f; }
.pixel-studio .pixel-advanced .panel { padding: 0; border: 0; background: transparent; }
.pixel-studio .pixel-advanced .clip-detail { display: block; max-width: 700px; margin: 0; }
.pixel-studio .pixel-advanced .clip-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 14px 0; }
.pixel-studio .pixel-advanced .clip-facts > div { display: grid; gap: 3px; }
.pixel-studio .pixel-advanced .clip-detail > p { font-size: 11px; }
.pixel-studio .pixel-advanced .clip-detail h3 { font-size: 20px; }
.pixel-studio .pixel-advanced :is(.jelly-controls, .media-importer, .character-editor, .frame-edit-details) { border: 0; padding: 0; margin: 0; }
.pixel-studio .pixel-advanced > details.frame-edit-details { padding: 0 18px; border: 2px solid #806699; }
.pixel-studio .pixel-advanced > details.frame-edit-details[open] { padding-bottom: 18px; }
.pixel-studio .pixel-advanced .character-editor h2 { font-size: 24px; }
.pixel-studio .pixel-advanced .editor-heading { margin-bottom: 18px; }
.pixel-studio .pixel-advanced .editor-heading > p { font-size: 12px; }
.pixel-studio .pixel-advanced .editor-swatch { padding: 0; }
.pixel-studio .pixel-advanced .editor-apply [data-edit=apply], .pixel-studio .pixel-advanced [data-media=generate] { background: var(--pixel-lime); border-color: var(--pixel-ink); color: var(--pixel-ink); box-shadow: 3px 3px 0 var(--pixel-ink); }
.pixel-studio .pixel-advanced .media-import-drop { background: #e5d9ff; border: 2px dashed #826b9e; }
.pixel-studio .pixel-advanced .media-import-drop.drag-over { background: #d6ff56; }
.pixel-studio .pixel-advanced .ui-style-sample { border: 0; margin: 0; padding: 0; }
.pixel-studio .pixel-advanced .storage-panel { max-width: 850px; }
.pixel-studio .pixel-advanced .storage-track { background: #a78bc6; }
.pixel-studio .pixel-advanced .storage-amount strong { font-family: "Pixel Studio", monospace; }
.pixel-studio .pixel-advanced :is(.pack-facts, .pack-notes, .aside-note) { font-size: 11px; }
.pixel-studio .pixel-advanced .background-options .swatch { padding: 0; border-radius: 0; }
.pixel-studio .pixel-advanced .background-options .swatch.active { outline-color: #53306f; }
.pixel-studio .pixel-advanced .tilt-presets button { padding: 0; }

.pixel-studio #pixel-datasheet { margin: 27px 0; min-width: 0; border: 2px solid #81659b; background: #e5d9ff; box-shadow: 5px 5px 0 var(--pixel-edge); }
.pixel-studio #pixel-datasheet iframe { display: block; width: 100%; min-height: calc(100vh - 150px); border: 0; background: #f5f4ef; }
.pixel-studio #pixel-hardware { min-width: 0; margin: 0; }
.pixel-studio #pixel-hardware iframe { display: block; width: 100%; height: 1100px; border: 0; background: var(--pixel-plum); }
body.pixel-studio.pixel-hardware-active main.pixel-main { width: 100%; max-width: none; }
.pixel-studio .pixel-footer, .pixel-studio main.pixel-main > footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border: 0; margin: 0; padding: 25px 0 30px; color: #bba1d1; font: 11px "Pixel Studio", var(--sans); }
.pixel-studio .pixel-footer a { color: #ede0ff; }
.pixel-studio dialog.pixel-zoom { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; background: var(--pixel-plum); color: #ede3ff; border: 2px solid #b2a1d4; border-radius: 0; box-shadow: 8px 8px 0 var(--pixel-edge); }
.pixel-studio dialog.pixel-zoom::backdrop { background: #130a23d9; }
.pixel-studio .pixel-zoom > header, .pixel-studio .pixel-zoom > div:first-child, .pixel-studio .pixel-zoom-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 0; background: transparent; color: #ede3ff; border: 0; font: 16px "Pixel Studio", monospace; }
.pixel-studio .pixel-zoom h2 { font: 20px "Pixel Studio", var(--sans); }
.pixel-studio .pixel-zoom button { background: var(--pixel-pink); color: var(--pixel-ink); min-width: 33px; padding: 6px 10px; }
.pixel-studio .pixel-zoom canvas { display: block; width: min(100%, 512px); height: auto; aspect-ratio: 1; image-rendering: pixelated; margin: auto; border: 2px solid #70508f; }
.pixel-studio .pixel-zoom > p { margin-top: 16px; text-align: center; color: #bba2d0; font-size: 11px; }
.pixel-studio .hosted-boundary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px 18px; padding: 8px 3.5%; background: #1e0e34; border: 0; color: #b9a2d1; font: 10px/1.65 var(--sans); }
.pixel-studio .hosted-boundary a { color: #d6ff56; }

@media (max-width: 1200px) {
  body.pixel-studio main.pixel-main { width: calc(100% - 48px); }
  .pixel-studio .pixel-workbench { grid-template-columns: minmax(185px, .8fr) minmax(320px, 1.45fr) minmax(245px, 1fr); gap: 18px; }
  .pixel-studio :is(.pixel-library, .pixel-mix) { padding: 16px; }
  .pixel-studio .pixel-console { padding: 0; }
  .pixel-studio .character-library-entry { grid-template-columns: 1fr; gap: 5px; text-align: center; }
  .pixel-studio .library-entry-icon { grid-column: 1; grid-row: auto; margin: 0 auto 3px; width: 74px; height: 74px; }
  .pixel-studio .library-entry-icon img { width: 74px; height: 74px; }
  .pixel-studio .library-entry-meta { font-size: 9px; }
  .pixel-studio .library-tabs { gap: 10px; }
  .pixel-studio .library-tabs button { font-size: 10px; }
  body.pixel-studio .pixel-heading h1 { font-size: 49px; }
  .pixel-studio .pixel-receipt .composition-panel { grid-template-columns: minmax(0, 1fr) 180px; }
}

@media (max-width: 960px) {
  .pixel-studio .pixel-workbench { grid-template-columns: minmax(0, 1.25fr) minmax(275px, 1fr); gap: 23px; }
  .pixel-studio .pixel-library { grid-column: 1 / -1; grid-row: 2; }
  .pixel-studio .pixel-console { grid-column: 1; grid-row: 1; }
  .pixel-studio .pixel-mix { grid-column: 2; grid-row: 1; }
  .pixel-studio .character-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pixel-studio .library-heading { flex-direction: row; align-items: center; gap: 20px; }
  .pixel-studio .library-heading form { width: 48%; max-width: 330px; padding: 0; border: 0; }
  .pixel-studio .library-heading form > div { flex-wrap: nowrap; }
  .pixel-studio .library-heading input { flex: 1; }
  .pixel-studio .library-heading button { width: auto; }
  body.pixel-studio .pixel-topbar { gap: 18px; flex-wrap: wrap; }
  .pixel-studio .pixel-topbar nav { gap: 16px; }
  .pixel-studio .pixel-heading-actions > span { display: none; }
  body.pixel-studio .pixel-heading h1 { font-size: 45px; }
  .pixel-studio .pixel-device { max-width: 430px; }
  .pixel-studio .animation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pixel-studio .pixel-receipt { padding: 17px 18px; }
  .pixel-studio .composition-parts { gap: 12px; }
}

@media (max-width: 650px) {
  body.pixel-studio .pixel-topbar { min-height: 61px; padding: 12px 17px; gap: 14px; flex-wrap: wrap; }
  .pixel-studio .pixel-wordmark, .pixel-studio .pixel-topbar .wordmark { font-size: 27px; }
  .pixel-studio .pixel-topbar nav { order: 3; flex-basis: 100%; gap: 18px; justify-content: flex-start; }
  .pixel-studio #pixel-language { margin-left: auto; }
  .pixel-studio .pixel-topbar nav :is(a, button) { font-size: 10px; padding: 5px 0; }
  .pixel-studio .pixel-topbar > a:not(.pixel-wordmark):not(.wordmark) { display: none; }
  .pixel-studio #pixel-language { min-width: 34px; min-height: 29px; padding: 4px 6px; font-size: 13px; }
  body.pixel-studio main.pixel-main { width: calc(100% - 32px); }
  .pixel-studio .pixel-heading { padding: 25px 0 23px; gap: 0 12px; align-items: end; }
  .pixel-studio .pixel-heading-actions { max-width: 95px; gap: 8px; }
  .pixel-studio .pixel-heading-actions #pixel-mix-status { font-size: 9px; }
  .pixel-studio .pixel-heading .eyebrow { font-size: 9px; letter-spacing: .6px; }
  body.pixel-studio .pixel-heading h1 { font-size: 42px; line-height: .92; letter-spacing: -1px !important; }
  .pixel-studio .pixel-heading h1 span { display: block; margin-top: 3px; }
  .pixel-studio .pixel-heading p:not(.eyebrow) { font-size: 10px; line-height: 1.7; max-width: 240px; margin-top: 12px; }
  .pixel-studio #pixel-save { font-size: 10px; padding: 9px 10px; max-width: 95px; }
  .pixel-studio .pixel-workbench { display: flex; flex-direction: column; gap: 25px; }
  .pixel-studio .pixel-workbench > * { width: 100%; }
  .pixel-studio .pixel-console { order: 0; }
  .pixel-studio .pixel-library { order: 1; padding: 18px; }
  .pixel-studio .pixel-mix { order: 2; padding: 20px; }
  .pixel-studio .pixel-device { width: min(100%, 360px); margin: 10px auto 12px; }
  body.pixel-studio #character-name { font-size: 16px; }
  .pixel-studio .pixel-console .animation-library { padding: 14px; }
  .pixel-studio .animation-card { min-height: 44px; }
  .pixel-studio .animation-card .card-name { font-size: 10px; }
  .pixel-studio .character-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pixel-studio .character-library-entry { padding: 11px 8px; min-height: 145px; }
  .pixel-studio .library-entry-icon, .pixel-studio .library-entry-icon img { width: 82px; height: 82px; }
  .pixel-studio .character-library-entry strong { font-size: 12px; }
  .pixel-studio .library-heading { flex-direction: column; align-items: stretch; gap: 13px; }
  .pixel-studio .library-heading form { width: 100%; max-width: none; border-top: 1px solid #48748160; padding-top: 12px; }
  .pixel-studio .library-heading form > div { flex-wrap: nowrap; }
  .pixel-studio .library-heading button { padding: 8px; }
  .pixel-studio .library-tabs { gap: 20px; }
  .pixel-studio .library-tabs button { font-size: 12px; }
  .pixel-studio .library-status { font-size: 11px; }
  .pixel-studio .composition-choices { gap: 18px; }
  .pixel-studio .composition-choices label, .pixel-studio :is(.picker-label, .animation-layer-label) { font-size: 12px; }
  .pixel-studio .composition-choices select { min-height: 45px; font-size: 13px; }
  .pixel-studio .scene-trigger { font-size: 12px; }
  .pixel-studio .scene-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pixel-studio .connection-panel :is(.aside-note, .connection-status, .swap-options p, .firmware-note, #upload-scope) { font-size: 11px; }
  .pixel-studio .transport-options span, .pixel-studio .swap-options label { font-size: 11px; }
  .pixel-studio .connection-panel .wide { min-height: 43px; }
  .pixel-studio .pixel-receipt { padding: 17px; margin-top: 24px; }
  .pixel-studio .pixel-receipt .composition-panel { grid-template-columns: 1fr; gap: 0; }
  .pixel-studio .pixel-receipt .section-heading, .pixel-studio .composition-parts, .pixel-studio .composition-total, .pixel-studio .composition-panel #composition-meter, .pixel-studio .composition-panel #composition-status { grid-column: 1; grid-row: auto; }
  .pixel-studio .composition-parts { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 15px; }
  .pixel-studio .composition-total { margin-top: 16px; }
  .pixel-studio .composition-note { font-size: 10px; }
  .pixel-studio .pixel-advanced { margin-top: 23px; }
  .pixel-studio .pixel-advanced > details { padding: 0 14px; }
  .pixel-studio .pixel-advanced > details.frame-edit-details { padding-left: 14px; padding-right: 14px; }
  .pixel-studio .pixel-advanced .clip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pixel-studio .pixel-advanced .editor-workspace { grid-template-columns: 1fr; gap: 20px; }
  .pixel-studio .pixel-advanced .editor-heading { gap: 10px; }
  .pixel-studio .pixel-advanced .editor-heading h2 { font-size: 20px; }
  .pixel-studio .pixel-advanced .editor-apply { gap: 14px; }
  .pixel-studio .pixel-advanced .pack-facts { grid-template-columns: 1fr; }
  .pixel-studio .pixel-advanced .pack-facts > div + div { padding: 12px 0 0; border-left: 0; border-top: 1px solid #826b9e; }
  .pixel-studio .pixel-footer, .pixel-studio main.pixel-main > footer { font-size: 10px; gap: 12px; }
  .pixel-studio .hosted-boundary { padding: 7px 17px; font-size: 9px; }
  .pixel-studio dialog.pixel-zoom { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-studio *, .pixel-studio *::before, .pixel-studio *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* A few quick choices, with a compact, inset index for the full collection. */
body:has(.character-picker-dialog[open]) { overflow: hidden; }
.pixel-studio .pixel-library > .pixel-search { display: none; }
.pixel-studio .character-quick-grid { display: grid; gap: 8px; margin: 0 3px 12px 0; }
.pixel-studio .character-quick-grid .character-library-entry { position: relative; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 10px; min-height: 74px; padding: 9px; text-align: left; box-shadow: 2px 2px 0 var(--pixel-ink); }
.pixel-studio .character-quick-grid .library-entry-icon { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 52px; height: 52px; }
.pixel-studio .character-quick-grid .library-entry-icon img { width: 52px; height: 52px; }
.pixel-studio .character-quick-grid .character-library-entry strong { align-self: end; padding-right: 6px; font-size: 11px; line-height: 1.4; }
.pixel-studio .character-quick-grid .library-entry-meta { align-self: start; font-size: 9px; }
.pixel-studio .character-quick-grid .library-entry-number { display: none; }
.pixel-studio .character-library-entry strong > span { display: block; }
.pixel-studio .module-library-preview > summary { font-size: 11px; font-weight: 600; cursor: pointer; }
.pixel-studio .asset-picker-dialog .character-picker-footer > p { display: block; }
.pixel-studio .asset-set-locations { display: grid; gap: 6px; margin-top: 14px; color: #365a65; font-size: 10px; }
.pixel-studio .asset-set-locations select { width: 100%; min-width: 0; padding: 9px; background: #b4efeb; border: 1px solid #3e265a; color: var(--pixel-ink); font-size: 11px; }
.pixel-studio .character-quick-grid .character-library-entry[aria-pressed=true]::after { content: "●"; position: absolute; right: 7px; top: 5px; font-size: 8px; }
.pixel-studio .character-picker-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: calc(100% - 3px); min-height: 58px; padding: 9px 12px; text-align: left; background: #7fd4cf; border: 2px dashed #39516a; box-shadow: none; }
.pixel-studio .character-picker-current { display: grid; gap: 3px; min-width: 0; }
.pixel-studio .character-picker-current strong { font: 700 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.pixel-studio .character-picker-current small { color: #45562c; font-size: 9px; line-height: 1.6; }
.pixel-studio .character-picker-chevron { font-size: 25px; }
.pixel-studio dialog.character-picker-dialog { --index-gap: clamp(16px, 3vw, 44px); position: fixed; inset: 0; width: min(1200px, calc(100% - var(--index-gap) * 2)); max-width: none; height: calc(100dvh - var(--index-gap) * 2); max-height: 960px; margin: auto; padding: 22px; border: 2px solid var(--pixel-lavender); border-radius: 0; box-shadow: 7px 7px 0 var(--pixel-edge); background: var(--pixel-plum); color: #ede3ff; overflow: hidden; }
.pixel-studio .character-picker-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; }
.pixel-studio .character-picker-dialog::backdrop { background: #130822c9; }
.pixel-studio .character-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 13px; background: transparent; color: #ede3ff; border-bottom: 1px solid #765799; }
.pixel-studio .character-picker-header .eyebrow { margin: 0 0 6px; color: var(--pixel-pink); font-size: 10px; }
body.pixel-studio .character-picker-header h2 { margin: 0; color: var(--pixel-lime); font: 700 clamp(23px, 2.5vw, 30px)/1.2 "Pixel Studio", var(--sans); }
.pixel-studio .character-picker-header h2 span { color: #e5d9ff; font: 600 14px/1.5 var(--sans); }
.pixel-studio .character-picker-close { flex: 0 0 40px; width: 40px; height: 40px; padding: 6px; background: var(--pixel-pink); font-size: 20px; }
.pixel-studio .character-picker-toolbar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.pixel-studio .character-picker-toolbar label { display: grid; gap: 7px; width: min(100%, 440px); color: #c5addb; font-size: 10px; }
.pixel-studio .character-picker-toolbar input { width: 100%; height: 40px; background: #e5d9ff; color: var(--pixel-ink); font-size: 13px; }
.pixel-studio .character-picker-toolbar > span { padding-bottom: 10px; color: #c5addb; font-size: 11px; }
.pixel-studio .character-picker-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 3px 7px 9px 3px; scrollbar-color: var(--pixel-lavender) var(--pixel-plum); }
.pixel-studio .character-picker-dialog .character-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); align-items: stretch; gap: 10px; margin: 0; }
.pixel-studio .character-picker-dialog .character-library-entry { position: relative; grid-template-columns: 1fr; grid-template-rows: 64px minmax(32px, auto) auto; align-content: start; justify-items: center; gap: 6px; min-height: 160px; padding: 22px 8px 9px; text-align: center; box-shadow: 2px 2px 0 var(--pixel-edge); }
.pixel-studio .character-picker-dialog .library-entry-number { position: absolute; left: 8px; top: 5px; color: #365a65; font: 11px "Pixel Studio", var(--sans); }
.pixel-studio .character-picker-dialog .library-entry-icon { grid-column: 1; grid-row: 1; margin: 0; width: 64px; height: 64px; }
.pixel-studio .character-picker-dialog .library-entry-icon img { width: 64px; height: 64px; }
.pixel-studio .character-picker-dialog .character-library-entry strong { align-self: center; font-size: 11px; line-height: 1.4; }
.pixel-studio .character-picker-dialog .library-entry-meta { font-size: 9px; line-height: 1.4; }

/* Prompt → validated kit replaces the former per-clip editing workbench. */
.pixel-studio .pixel-create { margin: 30px 0 0; }
.pixel-studio .character-kit-upload { padding: 26px; border: 2px solid var(--pixel-edge); background: var(--pixel-pink); color: var(--pixel-ink); box-shadow: 5px 5px 0 var(--pixel-edge); scroll-margin-top: 24px; }
.pixel-studio .kit-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.pixel-studio .kit-heading .eyebrow { color: #653a68; margin: 0 0 8px; font: 12px "Pixel Studio", var(--sans); letter-spacing: .6px; }
.pixel-studio .kit-heading h2 { font-size: clamp(20px, 2vw, 27px); margin: 0 0 7px; }
.pixel-studio .kit-heading p { max-width: 700px; margin: 0; font-size: 12px; }
.pixel-studio .kit-format { padding: 12px 15px; flex: none; border: 2px solid var(--pixel-ink); background: var(--pixel-plum); color: var(--pixel-lime); font: 14px/1.5 "Pixel Studio", var(--sans); transform: rotate(3deg); }
.pixel-studio .kit-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.pixel-studio :is(.kit-prompt-step, [data-kit=form]) { min-width: 0; padding: 22px; border: 2px solid #593859; background: #f9d6ed; }
.pixel-studio .kit-prompt-step { background: #b4eeea; }
.pixel-studio .kit-step { color: #5f4774; font: 12px "Pixel Studio", var(--sans); letter-spacing: .6px; }
.pixel-studio .kit-columns h3 { font-size: 17px; margin: 11px 0; }
.pixel-studio .kit-columns p { font-size: 12px; line-height: 1.65; margin: 10px 0 16px; }
.pixel-studio [data-kit=copy] { background: var(--pixel-plum); color: var(--pixel-lime); border-color: var(--pixel-edge); padding: 12px 18px; box-shadow: 3px 3px 0 var(--pixel-edge); }
.pixel-studio [data-kit=copy]:hover:not(:disabled) { background: #402260; color: var(--pixel-lime); }
.pixel-studio .kit-prompt-details { margin-top: 18px; border-top: 1px solid #659e9d; padding-top: 12px; }
.pixel-studio .kit-prompt-details summary { cursor: pointer; font-size: 11px; }
.pixel-studio .kit-prompt-details textarea { width: 100%; resize: vertical; margin-top: 12px; background: #dcfaf4; font: 11px/1.6 ui-monospace, monospace; }
.pixel-studio .kit-file { display: grid; gap: 8px; margin: 12px 0; font-size: 12px; font-weight: 650; }
.pixel-studio .kit-file small { font-size: 10px; color: #77506f; font-weight: 400; }
.pixel-studio .kit-file input { width: 100%; background: #ffeaf7 !important; font-weight: 400; }
.pixel-studio .kit-public-notice { border-left: 4px solid #593859; padding: 11px 13px; background: #efbce0; }
.pixel-studio .kit-public-notice strong { display: block; margin-bottom: 5px; font-size: 12px; }
.pixel-studio .kit-consent { display: flex; align-items: start; gap: 9px; font-size: 11px; line-height: 1.65; cursor: pointer; }
.pixel-studio .kit-consent input { flex: none; margin-top: 3px; }
.pixel-studio .kit-actions { display: flex; align-items: start; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pixel-studio [data-kit=progress] { width: 100%; height: 12px; margin-top: 20px; }
.pixel-studio .kit-columns .kit-status { margin-bottom: 0; font-size: 11px; }
.pixel-studio .processing-queue { margin: 15px 0 10px; padding: 12px; border: 1px solid #8267ac; background: #ccb9ed; }
.pixel-studio .processing-queue > div { display: flex; align-items: center; gap: 7px; }
.pixel-studio .processing-queue strong { font-size: 10px; font-weight: 650; }
.pixel-studio .processing-queue p { margin: 6px 0; font-size: 11px; color: #3f285e; }
.pixel-studio .processing-queue small { display: block; margin-top: 7px; color: #604a7e; font-size: 9px; line-height: 1.65; }
.pixel-studio .queue-indicator { width: 7px; height: 7px; background: #8267ac; }
.pixel-studio .processing-queue.has-work .queue-indicator { background: var(--pixel-lime); box-shadow: 0 0 0 1px #3f285e; }
.pixel-studio .processing-queue #queue-job { padding-top: 6px; border-top: 1px solid #a78bc7; color: #231039; font-weight: 650; }
.pixel-studio .connection-panel #cancel-project-job { margin-bottom: 10px; font-size: 11px; }
@media (max-width: 800px) {
  .pixel-studio .kit-columns { grid-template-columns: 1fr; gap: 16px; }
  .pixel-studio .kit-format { display: none; }
}
@media (max-width: 570px) {
  .pixel-studio .character-kit-upload { padding: 18px 14px; }
  .pixel-studio :is(.kit-prompt-step, [data-kit=form]) { padding: 16px 13px; }
  .pixel-studio .kit-heading { margin-bottom: 17px; }
  .pixel-studio .kit-heading h2 { font-size: 20px; }
  .pixel-studio .kit-heading p, .pixel-studio .kit-columns p { font-size: 11px; }
  .pixel-studio .kit-columns h3 { font-size: 15px; }
}
.pixel-studio .character-picker-dialog .character-library-entry[aria-pressed=true]::after { content: "✓"; position: absolute; top: 5px; right: 6px; width: 17px; height: 17px; background: var(--pixel-ink); color: var(--pixel-lime); text-align: center; font-size: 12px; }
.pixel-studio .character-picker-empty { padding: 55px 0; color: #c5addb; text-align: center; }
.pixel-studio .character-picker-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-direction: row; gap: 10px 20px; margin: 0; padding: 12px 0 0; border-top: 1px solid #765799; }
.pixel-studio .character-picker-footer form { width: min(100%, 540px); }
.pixel-studio .character-picker-footer label { display: block; margin-bottom: 8px; color: var(--pixel-pink); font-size: 10px; }
.pixel-studio .character-picker-footer form > div { display: flex; gap: 10px; }
.pixel-studio .character-picker-footer input { min-width: 0; flex: 1; background: #e5d9ff; }
.pixel-studio .character-picker-footer button { flex-shrink: 0; background: var(--pixel-pink); }
.pixel-studio .character-picker-footer > p { margin: 0; color: #c5addb; font-size: 11px; }
@media (max-width: 960px) {
  .pixel-studio .character-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 570px) {
  .pixel-studio dialog.character-picker-dialog { --index-gap: 12px; padding: 14px 12px; box-shadow: 4px 4px 0 var(--pixel-edge); }
  .pixel-studio .character-picker-dialog[open] { gap: 12px; }
  .pixel-studio .character-picker-header { align-items: start; padding-bottom: 12px; gap: 10px; }
  .pixel-studio .character-picker-header h2 span { font-size: 12px; }
  .pixel-studio .character-picker-header .eyebrow { font-size: 9px; }
  .pixel-studio .character-picker-toolbar { gap: 6px; }
  .pixel-studio .character-picker-toolbar label { width: 100%; }
  .pixel-studio .character-picker-toolbar > span { padding-bottom: 0; font-size: 10px; }
  .pixel-studio .character-picker-dialog .character-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pixel-studio .character-picker-dialog .character-library-entry { grid-template-rows: 48px minmax(30px, auto) auto; min-width: 0; min-height: 140px; padding: 21px 5px 8px; gap: 5px; }
  .pixel-studio .character-picker-dialog .library-entry-icon, .pixel-studio .character-picker-dialog .library-entry-icon img { width: 48px; height: 48px; }
  .pixel-studio .character-picker-dialog .character-library-entry strong { font-size: 10px; line-height: 1.35; }
  .pixel-studio .character-picker-dialog .library-entry-meta { font-size: 8px; }
  .pixel-studio .character-picker-footer { padding-top: 12px; }
  .pixel-studio .character-picker-footer > p { display: none; }
}
@media (max-height: 520px) {
  .pixel-studio dialog.character-picker-dialog { --index-gap: 12px; padding: 12px 18px; }
  .pixel-studio .character-picker-dialog[open] { gap: 8px; }
  .pixel-studio .character-picker-header { padding-bottom: 8px; }
  .pixel-studio .character-picker-header .eyebrow { display: none; }
  .pixel-studio .character-picker-toolbar label { gap: 3px; }
  .pixel-studio .character-picker-footer { padding-top: 8px; }
  .pixel-studio .character-picker-footer :is(label, p) { display: none; }
}