#pixelStudio[hidden],#studioOverlay[hidden]{display:none!important}
#studioCleanBrush[hidden],#studioPaintSize[hidden]{display:none!important}
#studioCleanBrush{padding:10px;border:1px solid #b6c9ff;border-radius:8px;background:#eef3ff}
#studioCleanBrush span{color:#52627b;font-size:13px}
#studioOpen{margin-left:auto;background:var(--blue);color:white}
#pixelStudio{font:14px/1.4 Arial,sans-serif;margin-top:12px;padding:14px;border:1px solid #bac6d9;border-radius:11px;background:var(--panel)}
#pixelStudio h2{font-size:18px;margin:0}#pixelStudio h3{font-size:14px;margin:12px 0 8px}
.studio-heading,.studio-tools,.studio-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.studio-heading>span{color:var(--muted);margin-right:auto}
#pixelStudio button,#studioProjectOpen{padding:8px 10px;border:1px solid #bdc8dc;border-radius:7px;background:#edf1f8;color:#203352;font:600 13px Arial,sans-serif;cursor:pointer}
#pixelStudio button:disabled{opacity:.45;cursor:default}
#pixelStudio button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
#pixelStudio button:focus-visible,#pixelStudio input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#pixelStudio label{font:14px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none;margin:0;display:flex;gap:6px;align-items:center}
#pixelStudio input[type=number]{width:90px;font-size:14px;padding:6px}#pixelStudio input[type=color]{width:36px;height:32px;border:1px solid var(--line);padding:2px}
#pixelStudio select{padding:6px;font-size:14px;width:auto}.studio-columns{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:16px}
.studio-layer{display:flex;gap:4px;align-items:center;margin:5px 0}.studio-layer .layer-select{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#studioLayers{max-height:260px;overflow:auto}#studioFrames{display:flex;gap:6px;overflow:auto;padding:4px;max-height:140px;min-width:0}
#studioFrames button{flex:0 0 66px;padding:4px}#studioFrames canvas{width:56px;height:48px;object-fit:contain;image-rendering:pixelated;background:repeating-conic-gradient(#e6e9ef 0 25%,#fff 0 50%) 0/10px 10px;display:block;margin-bottom:3px}
#studioMessage{margin:9px 0 0;color:#52627b;min-height:20px}#studioSelection{color:#52627b;font-size:12px}
body.hand-editing .controls,body.hand-editing .preview-palettes,body.hand-editing #touchup,body.hand-editing #pixelWorkbench,body.hand-editing #wbOverlay,body.hand-editing .wb-viewbar:not(#previewControls),body.hand-editing .animated-source-controls,body.hand-editing .animate-panel,body.hand-editing .actions,body.hand-editing #animationDownloadLink,body.hand-editing #animationExportPreview{display:none!important}
body.hand-editing .app{grid-template-columns:minmax(0,1fr)}body.hand-editing .preview-layout{grid-template-columns:minmax(0,1fr)}
body.hand-editing #studioOpen,body.hand-editing #studioProjectOpen,body.hand-editing #noiseCleanupOpen{display:none}
.studio-cleanup{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.studio-cleanup summary{font-weight:700;cursor:pointer;font-size:15px;min-height:24px}
.studio-cleanup[open] summary{margin-bottom:12px}
#noiseTarget,#noiseStatus{font:14px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted);margin:8px 0}
#noiseApply:not(:disabled){background:var(--blue);border-color:var(--blue);color:white}
#pixelStudio select:focus-visible,.studio-cleanup summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#noiseCleanupOpen{border:1px solid var(--blue);color:var(--blue);background:var(--panel)}
body.hand-editing #canvas{touch-action:none;cursor:crosshair;background:repeating-conic-gradient(#d9dee8 0 25%,#f1f3f7 0 50%) 0/16px 16px}
#studioOverlay{position:absolute!important;pointer-events:none;image-rendering:pixelated;max-width:none!important;max-height:none!important;margin:0!important;z-index:3}
@media(max-width:680px){.studio-columns{grid-template-columns:minmax(0,1fr)}#pixelStudio{padding:10px}#previewControls label{min-width:80px}#previewControls button{padding:9px}}
/* Animation tools share the editor's compact blue working surface. */
#pixelStudio .studio-hint{font:14px/1.5 Arial,sans-serif;color:var(--muted);margin:8px 0 0}
#pixelStudio .studio-animation{display:grid;grid-template-columns:minmax(0,1fr)}
#pixelStudio .rig-secondary{margin:10px 0;padding:10px 0;border-top:1px solid var(--line)}
#pixelStudio .rig-secondary summary{font-size:14px;min-height:24px}
#pixelStudio .rig-key-strip{display:flex;gap:6px;overflow:auto;max-height:64px;margin:8px 0}
#pixelStudio #rigControls[hidden]{display:none}
#pixelStudio #rigName{margin-right:auto}
#pixelStudio #rigParent{max-width:210px}
#pixelStudio .studio-timeline-extra input[type=number]{width:76px}
#pixelStudio #studioScrub{min-width:120px;flex:1;accent-color:var(--blue)}
#pixelStudio .inspection-results{display:flex;gap:6px;flex-wrap:wrap;max-height:180px;overflow:auto;margin-top:10px}
#pixelStudio #studioFrames .in-range{box-shadow:inset 0 -3px #6095ff}
#pixelStudio #studioFrames .has-key::after{content:'◆';color:#ffa630;margin-left:4px}
#pixelStudio #studioFrameTitle{display:flex;align-items:center}
#pixelStudio button{font-size:14px}
#pixelStudio #rigPivotLabel,#pixelStudio #studioPageLabel,#pixelStudio #studioPaletteStatus{font-size:14px;color:var(--muted)}
#pixelStudio .studio-row>label{flex-wrap:wrap}
@media(max-width:680px){#pixelStudio .studio-timeline-extra{gap:8px}#pixelStudio #studioScrub{flex-basis:100%}#pixelStudio #rigParent{max-width:155px}#pixelStudio input[type=number]{width:72px}}

#studioReplaceBrush[hidden]{display:none!important}
#studioReplaceBrush{padding:10px;border:1px solid #b6c9ff;border-radius:8px;background:#eef3ff}
#studioReplaceSources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
#pixelStudio .studio-replace-swatch{width:32px;height:32px;min-width:32px;padding:0;border:2px solid #52627b;box-shadow:inset 0 0 0 1px #ffffff88}
#studioReplacePick[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}

#studioBrushCursor[hidden]{display:none!important}
#studioBrushCursor{position:absolute;pointer-events:none;overflow:hidden;z-index:4}
#studioBrushCursor>div{position:absolute;left:0;top:0;box-sizing:border-box;border:1px solid white;box-shadow:0 0 0 1px #10213e;transform-origin:0 0}
body.hand-editing #canvas.brush-footprint{cursor:none}

#studioPixelGrid[hidden],#studioGridHint[hidden]{display:none!important}
#studioPixelGrid{position:absolute;pointer-events:none;z-index:2;background-image:linear-gradient(to right,rgba(120,140,168,.65) 1px,transparent 1px),linear-gradient(to bottom,rgba(120,140,168,.65) 1px,transparent 1px);background-position:0 0;background-repeat:repeat}
#studioGridHint{color:var(--muted);font-size:12px}
#outlineApply:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue)}
#studioOutlineCleanup input[type=number]{width:72px}
#studioOutlineCleanup [data-studio-tool=protect].active{background:#9d2358;border-color:#9d2358}

/* Editing workspace: canvas and layers on the left, controls on the right. */
body.hand-editing main{width:min(1600px,calc(100% - 40px))}
body.hand-editing .stage{--preview-height:clamp(300px,60vh,650px);padding:16px}
body.hand-editing .stage>#status{display:none}
#pixelStudio{margin-top:0;padding:0;border:0;border-radius:0;background:transparent;min-width:0}
#pixelStudio .studio-heading{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.studio-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.studio-main,#studioCanvasArea{min-width:0}
#studioCanvasArea #previewControls{margin:0 0 10px}
#studioCanvasArea .preview-layout{width:100%}
#studioLayersPanel{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
#studioLayersPanel h3{margin:0 0 10px;font-size:15px}
#studioLayersPanel .studio-row{margin:10px 0 0}
#studioLayers{max-height:200px}
#studioSidebar{min-width:0;max-height:calc(var(--preview-height) + 250px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;padding:0 5px 4px 0}
#studioSidebar .studio-cleanup{margin:0 0 12px;background:var(--panel);padding:12px}
#studioSidebar .studio-card{margin-bottom:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}
#studioSidebar .studio-card h3{margin:0 0 10px;font-size:15px}
#studioSidebar .studio-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#studioSidebar .studio-tools button{text-align:left;min-height:38px;padding:8px;line-height:1.35}
#studioSidebar .studio-row{gap:8px;margin-bottom:12px}
#studioSidebar .studio-row:last-child{margin-bottom:0}
#studioSidebar button{white-space:normal;overflow-wrap:anywhere;max-width:100%}
#studioSidebar label{max-width:100%;min-width:0}
#studioSidebar select{min-width:0;max-width:100%}
#studioSidebar .studio-row>label{flex-wrap:wrap}
#studioSidebar #studioCleanBrush,#studioSidebar #studioReplaceBrush{padding:8px}
#studioSidebar #studioSelection{flex-basis:100%}
#studioSidebar #studioScrub{flex-basis:100%;min-width:0}
#studioSidebar #studioFrames{max-width:100%}
#studioSidebar #studioExport{overflow-wrap:anywhere}
#pixelStudio #studioMessage:empty{display:none}
@media(min-width:761px) and (max-width:1050px){
 body.hand-editing main{width:calc(100% - 24px)}
 .studio-workspace{grid-template-columns:minmax(0,1fr) 310px;gap:12px}
}
@media(max-width:760px){
 body.hand-editing main{width:calc(100% - 20px)}
 body.hand-editing .stage{padding:10px;--preview-height:clamp(260px,55vh,500px)}
 .studio-workspace{grid-template-columns:minmax(0,1fr);gap:14px}
 #studioSidebar{max-height:none;overflow:visible;padding:0;scrollbar-gutter:auto}
 #pixelStudio .studio-heading>span{flex-basis:calc(100% - 120px)}
 #studioLayersPanel{padding:10px}
}