/* Character sprite sheet creator only. Every rule is scoped under .sprite-studio. */
.sprite-studio{--sprite-stage:#11121d;--sprite-gold:#f4d183;--sprite-error:#ff9b8f;--sprite-ok:#9be2c0}
.sprite-studio .sprite-header{display:flex;justify-content:space-between;align-items:start;gap:24px;margin:10px 0 22px}
.sprite-studio .sprite-header h1{font-size:clamp(30px,3.2vw,44px);max-width:28ch}
.sprite-studio .sprite-header p{max-width:80ch;margin:0}
.sprite-studio .sprite-header>.studio-pill{margin-top:10px;flex-shrink:0}
.sprite-studio code{font-family:Consolas,'SFMono-Regular',monospace;font-size:.9em;background:#2c2340;border-radius:5px;padding:1px 6px;color:#f5e4ff}

/* top bar */
.sprite-studio .sprite-project-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--studio-border);border-radius:14px;background:var(--studio-panel);margin-bottom:12px}
.sprite-studio .sprite-project-name{min-width:0;flex:1 1 240px;max-width:360px}
.sprite-studio .sprite-project-name label{margin:0}
.sprite-studio .sprite-project-name input{font-size:17px;font-weight:700;margin:4px 0}
.sprite-studio .sprite-project-name small{display:block;font-size:12px;color:var(--studio-muted)}
.sprite-studio .sprite-project-label{font-size:10px;letter-spacing:1.6px;color:#c6a6ea}
.sprite-studio .sprite-project-actions{justify-content:end;gap:8px}
.sprite-studio .sprite-project-actions .studio-button{padding:8px 12px;min-height:40px;font-size:13px}
.sprite-studio .sprite-project-actions select#sp-preset{width:auto;max-width:200px;margin:0;min-height:40px}
.sprite-studio .sprite-inline-label{display:inline;margin:0;font-size:12px;color:var(--studio-muted);font-weight:600}
.sprite-studio .sprite-message{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--studio-muted)}
.sprite-studio .sprite-message:not(:empty){padding:11px 16px;border:1px solid #5d4c6e;border-radius:11px;background:#1d1a2b}
.sprite-studio .sprite-message[data-kind=success]{border-color:#3f7a62;background:#16261f;color:#d4f5e4}
.sprite-studio .sprite-message[data-kind=warning]{border-color:#8a7045;background:#2d2519;color:#f2deb3}
.sprite-studio .sprite-message[data-kind=error]{border-color:#9a4d55;background:#2f1a20;color:#ffd6db}

/* workspace */
.sprite-studio .sprite-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.sprite-studio .sprite-workspace>*{min-width:0}
.sprite-studio .sprite-settings,.sprite-studio .sprite-canvas-panel,.sprite-studio .sprite-export-panel{background:var(--studio-panel);border:1px solid var(--studio-border);border-radius:14px;min-width:0}
.sprite-studio .sprite-settings{padding:18px 16px}
.sprite-studio .sprite-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sprite-studio .sprite-panel-title h2{font-size:18px;margin:0}
.sprite-studio .sprite-fieldset{border:0;min-width:0;margin:0;padding:0}
.sprite-studio label{display:block;font-size:12px;font-weight:600;color:#e4d8f1;margin-bottom:12px;min-width:0}
.sprite-studio :is(input[type=number],input[type=text],select){display:block;width:100%;background:var(--studio-input);border:1px solid #71617e;border-radius:8px;padding:8px 10px;color:var(--studio-text);min-height:40px;margin-top:5px;font-size:14px}
.sprite-studio :is(input[type=number],input[type=text]):invalid{border-color:var(--sprite-error)}
.sprite-studio .sprite-toggle{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:13px;min-height:24px;cursor:pointer;font-weight:500}
.sprite-studio input[type=checkbox],.sprite-studio input[type=radio]{accent-color:#ad7fe5;width:18px;height:18px;flex:0 0 18px;margin:0}
.sprite-studio .sprite-small-button{min-height:36px;padding:6px 12px;font-size:12px}

/* trait tabs */
.sprite-studio .sprite-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:14px;padding:4px;background:#181524;border:1px solid #3d3350;border-radius:10px}
.sprite-studio .sprite-tab{min-height:36px;padding:4px 2px;border:0;border-radius:7px;background:transparent;color:#d6c8e8;font-size:12px;font-weight:600;cursor:pointer}
.sprite-studio .sprite-tab:hover{background:#2c233b}
.sprite-studio .sprite-tab[aria-selected=true]{background:#8353c9;color:#fff}
.sprite-studio .sprite-tabpanel{display:block}
.sprite-studio .sprite-field select{margin-top:5px}
.sprite-studio .sprite-field select:disabled{opacity:.55;cursor:not-allowed}
.sprite-studio .sprite-field-note{display:block;margin-top:4px;font-size:12px;font-weight:400;color:#b9a9cf}
.sprite-studio .sprite-field-note[hidden]{display:none}
.sprite-studio .sprite-color-field{border:0;margin:0 0 12px;padding:0;min-width:0}
.sprite-studio .sprite-color-field legend{font-size:12px;font-weight:600;color:#e4d8f1;padding:0;margin-bottom:6px}
.sprite-studio .sprite-color-field.is-muted{opacity:.45}
.sprite-studio .sprite-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sprite-studio .sprite-swatch{width:26px;height:26px;border-radius:7px;border:2px solid #3d3350;background:var(--swatch);cursor:pointer;padding:0}
.sprite-studio .sprite-swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #8353c9}
.sprite-studio .sprite-swatches input[type=color]{width:34px;height:28px;padding:2px;border:1px dashed #8f7aa6;border-radius:7px;background:var(--studio-input);cursor:pointer}

/* preview */
.sprite-studio .sprite-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;padding:14px 18px;border-bottom:1px solid #554660}
.sprite-studio .sprite-canvas-toolbar h2{font-size:18px;margin:0 0 2px}
.sprite-studio .sprite-view-actions{gap:8px}
.sprite-studio .sprite-view-actions select#sp-anim{width:auto;min-width:160px;margin:0}
.sprite-studio .sprite-segmented{display:inline-flex;gap:0;border-radius:9px;overflow:hidden;border:1px solid #736083}
.sprite-studio .sprite-segmented .studio-button{border:0;border-radius:0;min-height:38px;padding:6px 12px;font-size:13px}
.sprite-studio .studio-button[aria-pressed=true]{background:#4a3466;border-color:#d9bcff;color:#fff}
.sprite-studio .sprite-icon-button{min-width:40px;padding-left:8px!important;padding-right:8px!important;font-size:16px}
.sprite-studio .sprite-stage{display:flex;align-items:center;justify-content:center;padding:16px;background:var(--sprite-stage);min-height:260px}
.sprite-studio #sp-preview{display:block;border-radius:6px;max-width:100%;image-rendering:pixelated}
.sprite-studio .sprite-play-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 18px;border-top:1px solid #554660}
.sprite-studio .sprite-play-actions{gap:8px}
.sprite-studio .sprite-play-actions .studio-button{min-height:38px;padding:6px 12px;font-size:13px}
.sprite-studio .sprite-play-actions #sp-play{min-width:84px}
.sprite-studio .sprite-play-actions select:is(#sp-speed,#sp-bg){width:auto;margin:0;min-height:38px}
.sprite-studio .sprite-play-actions .sprite-toggle{margin:0 0 0 4px}
.sprite-studio .sprite-play-info{font-size:12px;color:var(--studio-muted);font-variant-numeric:tabular-nums}
.sprite-studio .sprite-frame-strip{list-style:none;margin:0;padding:12px 18px 16px;display:flex;gap:8px;overflow-x:auto;border-top:1px solid #3d3350}
.sprite-studio .sprite-frame{position:relative;display:block;padding:3px;border:1px solid #5d4c6e;border-radius:8px;background:#181524;cursor:pointer}
.sprite-studio .sprite-frame canvas{display:block;width:56px;height:56px;image-rendering:pixelated;background:repeating-conic-gradient(#2a2436 0 25%,#211c2c 0 50%) 0 0/12px 12px;border-radius:5px}
.sprite-studio .sprite-frame span{position:absolute;left:6px;top:3px;font-size:10px;color:#bca0d1}
.sprite-studio .sprite-frame-strip li[aria-current=true] .sprite-frame{border:2px solid var(--sprite-gold);padding:2px}

/* export */
.sprite-studio .sprite-export-panel{padding:22px 24px;margin-top:22px}
.sprite-studio .sprite-export-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sprite-studio .sprite-export-head h2{font-size:23px;margin:6px 0 0}
.sprite-studio .sprite-export-status{margin:0!important;font-size:13px!important}
.sprite-studio .sprite-export-status[data-kind=ok]{color:var(--sprite-ok)}
.sprite-studio .sprite-export-status[data-kind=error]{color:var(--sprite-error)}
.sprite-studio .sprite-export-status[data-kind=warning]{color:#f2deb3}
.sprite-studio .sprite-export-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) minmax(280px,1.2fr);gap:24px;align-items:start}
.sprite-studio .sprite-style{display:flex;margin-bottom:14px;width:100%}
.sprite-studio .sprite-style label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:9px 10px;font-size:13px;cursor:pointer;background:#2c233b}
.sprite-studio .sprite-style label:has(input:checked){background:#4a3466;color:#fff}
.sprite-studio .sprite-style label:has(input:focus-visible){outline:3px solid #e3c8ff;outline-offset:-3px}
.sprite-studio .sprite-anim-pick legend{font-size:13px;font-weight:700;color:#e4d8f1;margin-bottom:10px;padding:0}
.sprite-studio #sp-anim-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;margin-bottom:10px}
.sprite-studio .sprite-anim-group-title{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--sprite-gold);margin:2px 0 8px}
.sprite-studio .sprite-anim-group .sprite-toggle small{color:#9d90ad;font-size:10px;margin-left:auto}
.sprite-studio .sprite-summary-list{font-size:12px;margin:0 0 14px}
.sprite-studio .sprite-summary-list>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #3d3350}
.sprite-studio dt{color:#b8a7ca}.sprite-studio dd{margin:0;text-align:right;color:var(--studio-text);font-variant-numeric:tabular-nums}
.sprite-studio .sprite-export-actions .studio-actions{gap:8px}
.sprite-studio .sprite-export-actions .studio-button{min-height:42px;padding:8px 14px;font-size:13px}
.sprite-studio .sprite-progress{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--studio-muted)}
.sprite-studio .sprite-progress progress{flex:1;height:10px;accent-color:#ad7fe5;min-width:60px}
.sprite-studio .sprite-sheet-preview{margin-top:20px;border-top:1px solid #554660;padding-top:16px}
.sprite-studio .sprite-sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.sprite-studio .sprite-sheet-head h3{font-size:16px;margin:0}
.sprite-studio .sprite-sheet-scroll{overflow:auto;max-height:560px;padding:8px;border-radius:10px;background:repeating-conic-gradient(#221d2e 0 25%,#1b1726 0 50%) 0 0/16px 16px;border:1px solid #3d3350}
.sprite-studio #sp-sheet{display:block;image-rendering:pixelated}
.sprite-studio .studio-note ol{padding-left:22px;color:var(--studio-muted);margin-bottom:20px;line-height:1.8}
.sprite-studio .studio-note li{margin:9px 0}
.sprite-studio .studio-note strong{color:var(--studio-text)}
.sprite-studio .sprite-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite-studio :disabled{opacity:.5}

@media(max-width:1279px){.sprite-studio .sprite-export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sprite-studio .sprite-export-actions{grid-column:1/-1}}
@media(max-width:1023px){
 .sprite-studio .sprite-workspace{grid-template-columns:minmax(0,1fr)}
 .sprite-studio .sprite-settings{order:2}.sprite-studio .sprite-canvas-column{order:1}
 .sprite-studio .sprite-tabpanel:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
 .sprite-studio .sprite-project-name{max-width:none}
 .sprite-studio .sprite-project-actions{justify-content:start}
}
@media(max-width:700px){.sprite-studio .sprite-export-grid{grid-template-columns:minmax(0,1fr)}.sprite-studio .sprite-tabpanel:not([hidden]){display:block}}
@media(max-width:640px){
 .sprite-studio .sprite-header{flex-direction:column;gap:14px}
 .sprite-studio .sprite-header>.studio-pill{margin:0}
 .sprite-studio .sprite-project-bar{padding:16px}
 .sprite-studio .sprite-project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .sprite-studio .sprite-project-actions .sprite-inline-label{grid-column:1/-1}
 .sprite-studio .sprite-project-actions select#sp-preset{grid-column:1/-1;width:100%;max-width:none}
 .sprite-studio .sprite-project-actions .studio-button{min-height:44px}
 .sprite-studio .sprite-canvas-toolbar,.sprite-studio .sprite-play-bar{padding:12px 14px}
 .sprite-studio .sprite-view-actions{width:100%}
 .sprite-studio .sprite-view-actions select#sp-anim{flex:1 1 140px;min-width:0}
 .sprite-studio .sprite-stage{padding:10px;min-height:220px}
 .sprite-studio .sprite-play-actions .studio-button,.sprite-studio .sprite-segmented .studio-button{min-height:44px}
 .sprite-studio .sprite-frame-strip{padding:10px 14px 14px}
 .sprite-studio .sprite-export-panel{padding:18px 14px}
 .sprite-studio #sp-anim-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sprite-studio .sprite-export-actions .studio-button{flex:1 1 calc(50% - 6px);min-height:44px}
 .sprite-studio :is(input[type=number],input[type=text],select){font-size:16px;min-height:44px}
 .sprite-studio .sprite-swatch{width:32px;height:32px}
 .sprite-studio .sprite-tab{min-height:44px}
 .sprite-studio .sprite-toggle{min-height:32px}
}