body.studio-page{background:var(--bg-base)}body.studio-page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url(../images/background.png);background-size:cover;background-position:center;filter:brightness(var(--bg-dim));z-index:-2}body.studio-page:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:#c7b1f840;z-index:-1}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-new(root){z-index:9999}.studio-app{min-height:100vh;display:flex;flex-direction:column}.studio-page .theme-toggle.theme-floating{transform:translate(calc(100% - 24px))}.studio-page .theme-float-zone{top:clamp(4.8rem,10vh,6.2rem);width:58px;height:104px}.studio-content{max-width:var(--max-width);width:100%;margin:0 auto;padding:7rem var(--pad-x) var(--pad-y)}.studio-hero{text-align:center;margin-bottom:1.4rem}.studio-title{margin:0;font-size:clamp(2rem,4vw,3rem);letter-spacing:.14em;color:#f7d6ff;text-shadow:2px 2px 0 var(--arcade-stroke)}.studio-subtitle{margin:.8rem 0 0;color:var(--text-muted);text-shadow:2px 2px 0 var(--arcade-stroke)}.studio-panel{border:2px solid var(--pixel-border);background:#21164485;box-shadow:6px 6px #3c266873,0 0 0 2px #ffffff14 inset;padding:1rem;display:grid;gap:1rem}.studio-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.65rem}.studio-control{display:inline-flex;flex-direction:column;gap:.32rem;min-width:96px}.studio-control span{font-size:.8rem;color:#ffe9f6;text-shadow:2px 2px 0 var(--arcade-stroke)}.studio-control input,.studio-control select{font-family:inherit;border:2px solid var(--pixel-border);background:#ffffff1f;color:#fff4ff;height:36px;border-radius:8px;padding:0 .55rem}.studio-control input[type=color]{width:56px;padding:.2rem}.studio-btn{height:36px;border:2px solid var(--pixel-border);border-radius:8px;background:#ffffff26;color:#fff4ff;font-family:inherit;text-shadow:2px 2px 0 var(--arcade-stroke);padding:0 .75rem;cursor:pointer;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}.studio-btn:hover,.swatch:hover{transform:translateY(-1px)}.tool-group{display:inline-flex;gap:.4rem;padding:.3rem;border:2px solid var(--pixel-border);border-radius:10px;background:#ffffff14}.studio-tool-btn{min-width:66px}.studio-tool-btn.is-active{background:#ffdff452;box-shadow:0 0 0 2px #ff9fbbb3 inset}.zoom-group{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem;border:2px solid var(--pixel-border);border-radius:10px;background:#ffffff14}.zoom-group .studio-btn{min-width:38px;padding:0 .45rem}.zoom-text{min-width:56px;text-align:center;color:#ffe9f6;text-shadow:2px 2px 0 var(--arcade-stroke)}.palette{display:inline-flex;gap:.35rem;align-items:center;padding:.3rem;border:2px solid var(--pixel-border);border-radius:10px;background:#ffffff14}.swatch{width:22px;height:22px;border:2px solid rgba(255,255,255,.5);border-radius:4px;background:var(--swatch);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.swatch-1{--swatch: #ffffff}.swatch-2{--swatch: #ffdff4}.swatch-3{--swatch: #ff9fbb}.swatch-4{--swatch: #c7b1f8}.swatch-5{--swatch: #6f4fa8}.swatch-6{--swatch: #bfefff}.swatch-7{--swatch: #89f7d0}.swatch-8{--swatch: #2a1d40}.swatch-9{--swatch: #000000}.canvas-area{width:min(86vh,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 152px;gap:.85rem;align-items:start}.canvas-wrap{width:100%;aspect-ratio:1 / 1;border:3px solid var(--pixel-border);box-shadow:0 0 0 3px #3c266873;background:#ffffff14;overflow:hidden;position:relative}.canvas-panzoom{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:top left}#pixelCanvas{display:block;width:100%;height:100%;--grid-width: 64;--grid-height: 64;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:calc(100% / var(--grid-width)) calc(100% / var(--grid-height)),calc(100% / var(--grid-width)) calc(100% / var(--grid-height));background-position:0 0,0 0;touch-action:none;cursor:crosshair}#pixelCanvas.tool-brush{cursor:crosshair}#pixelCanvas.tool-eraser{cursor:cell}#pixelCanvas.tool-bucket{cursor:copy}.status-text{margin:0;text-align:center;color:#ffe9f6;text-shadow:2px 2px 0 var(--arcade-stroke);font-size:.9rem}.minimap-panel{border:2px solid var(--pixel-border);border-radius:10px;background:#ffffff17;box-shadow:3px 3px #3c266859;padding:.5rem;display:grid;gap:.42rem}.minimap-title{color:#ffe9f6;text-shadow:2px 2px 0 var(--arcade-stroke);text-align:center;font-size:.85rem}.minimap-frame{position:relative;width:128px;height:128px;border:2px solid var(--pixel-border);background:#1c1236e6;overflow:hidden}.minimap-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.minimap-viewport{position:absolute;left:0;top:0;border:2px solid rgba(255,223,244,.96);box-shadow:inset 0 0 0 1px #2a1d40bf;background:#ffdff421;cursor:move}.minimap-hint{color:#ffe9f6;text-shadow:1px 1px 0 var(--arcade-stroke);font-size:.72rem;line-height:1.35}@media (max-width: 768px){.studio-content{padding-top:6.6rem}.studio-controls{gap:.5rem}.studio-control{min-width:88px}.canvas-area{grid-template-columns:minmax(0,1fr)}.minimap-panel{width:152px;justify-self:end}}