:root{--panel-bg: rgba(18, 18, 24, .86);--panel-line: rgba(255, 255, 255, .12);--chip-bg: rgba(255, 255, 255, .07);--chip-on: #4caf50}body{position:relative;background:radial-gradient(1100px 600px at 18% -10%,rgba(76,175,80,.16),transparent 60%),radial-gradient(900px 500px at 105% 110%,rgba(3,169,244,.13),transparent 60%),#12121a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{display:flex;flex-direction:column;height:100dvh;min-height:100dvh}.top-bar{flex:0 0 auto}.brand{font-family:var(--font-pixel);font-size:.85rem;letter-spacing:1px;color:#fff;text-shadow:3px 3px 0 var(--mc-dark-green);margin:0}.studio{flex:1 1 auto;min-height:0;display:grid;gap:.6rem;padding:0 max(.6rem,env(safe-area-inset-right)) calc(max(.6rem,env(safe-area-inset-bottom)) + var(--bottom-ad, 0px)) max(.6rem,env(safe-area-inset-left));grid-template-areas:"preview" "canvas" "tools";grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(140px,19vh,180px) minmax(190px,1fr) auto}.panel-preview{grid-area:preview}.panel-canvas{grid-area:canvas}.panel-tools{grid-area:tools;max-height:min(30vh,260px);overflow-y:auto;overscroll-behavior:contain}@media(min-width:760px){.studio{grid-template-areas:"preview tools" "canvas tools";grid-template-columns:minmax(0,1fr) clamp(240px,30vw,320px);grid-template-rows:clamp(180px,30vh,300px) minmax(0,1fr)}.panel-tools{max-height:none}}@media(min-width:1080px){.studio{grid-template-areas:"preview canvas tools";grid-template-columns:clamp(220px,22vw,300px) minmax(0,1fr) clamp(260px,24vw,340px);grid-template-rows:minmax(0,1fr)}}.panel{display:flex;flex-direction:column;gap:.5rem;min-height:0;min-width:0;padding:.6rem .7rem;background:var(--panel-bg);border:1px solid var(--panel-line);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel-title{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;margin:0}.section-title{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:.25rem 0 0}.hint{font-size:.72rem;color:var(--text-muted);margin:0;line-height:1.4}.preview-stage{position:relative;flex:1 1 auto;min-height:90px;border-radius:10px;overflow:hidden;background:radial-gradient(70% 70% at 50% 20%,rgba(120,200,255,.16),transparent 70%),linear-gradient(180deg,#1a1d27,#0e1016);border:1px solid rgba(255,255,255,.07)}#preview{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#preview.grabbing{cursor:grabbing}#preview-tools .chip{padding:.3rem .5rem;font-size:.72rem}@media(min-width:760px){#preview-tools{flex-wrap:wrap;overflow-x:visible}}.preview-fallback[hidden]{display:none}.preview-fallback{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:1rem;text-align:center;font-size:.78rem;line-height:1.5;color:var(--text-muted)}.chips{display:flex;flex-wrap:wrap;gap:.35rem}.chips-scroll{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.chips-scroll::-webkit-scrollbar{height:5px}.chips-scroll::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px}.chip{flex:0 0 auto;min-height:38px;padding:.35rem .7rem;border-radius:9px;border:1px solid var(--panel-line);background:var(--chip-bg);color:var(--text-main);font:700 .78rem var(--font-modern);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}.chip:hover{background:#ffffff24}.chip.on{background:var(--chip-on);border-color:#7fdc86;color:#06210a}.tool-row{gap:.3rem}.tool-row .chip{flex:1 1 auto;text-align:center}.layer-switch{flex:0 0 auto;gap:.25rem}.canvas-head,.canvas-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.canvas-head{justify-content:space-between}.canvas-head #parts{flex:1 1 auto;min-width:0}.canvas-stage{position:relative;flex:1 1 auto;min-height:0;border-radius:10px;overflow:hidden;background:#101118;border:1px solid rgba(255,255,255,.07)}#view{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}#view[data-active-tool=picker]{cursor:copy}#view[data-active-tool=fill]{cursor:cell}#view.panning{cursor:grab}.caption{font-size:.78rem;font-weight:700;color:var(--text-muted)}.zoom-group{display:flex;align-items:center;gap:.25rem;margin-left:auto}.icon-btn{min-width:38px;min-height:38px;padding:0 .5rem;border-radius:9px;border:1px solid var(--panel-line);background:var(--chip-bg);color:var(--text-main);font:700 1rem var(--font-modern);cursor:pointer;line-height:1}.icon-btn.wide{font-size:.78rem}.icon-btn:hover:not(:disabled){background:#ffffff26}.icon-btn:disabled{opacity:.35;cursor:default}.zoom-label{min-width:34px;text-align:center;font-size:.75rem;font-weight:800;color:var(--text-muted)}.divider{width:1px;height:22px;background:var(--panel-line);margin:0 .15rem}.colour-row{display:flex;align-items:center;gap:.5rem}.colour-chip{width:30px;height:30px;border-radius:8px;border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 8px #00000080;flex:0 0 auto}.colour-label{font-size:.78rem;font-weight:700;color:var(--text-muted)}#colour-input{width:44px;height:34px;padding:0;border:1px solid var(--panel-line);border-radius:8px;background:transparent;cursor:pointer}.colour-value{font-size:.72rem;color:var(--text-muted);margin-left:auto;letter-spacing:.03em}.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:3px}.swatch{aspect-ratio:1;min-height:26px;border-radius:5px;border:1px solid rgba(0,0,0,.45);cursor:pointer;padding:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch.on{outline:2px solid #fff;outline-offset:1px;transform:scale(1.1)}.recent{grid-template-columns:repeat(auto-fill,minmax(24px,1fr));min-height:24px}.bases{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.35rem}.base-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem .2rem;border-radius:9px;border:1px solid var(--panel-line);background:var(--chip-bg);color:var(--text-main);font:700 .68rem var(--font-modern);cursor:pointer}.base-card:hover{background:#ffffff24}.base-card.on{border-color:var(--chip-on);box-shadow:0 0 0 1px var(--chip-on) inset}.base-thumb{width:34px;height:34px;image-rendering:pixelated;border-radius:5px;background:linear-gradient(45deg,#2a2b31 25%,transparent 25%,transparent 75%,#2a2b31 75%),linear-gradient(45deg,#2a2b31 25%,#34353d 25% 75%,#2a2b31 75%);background-size:10px 10px;background-position:0 0,5px 5px}.save-row{display:flex;gap:.4rem;flex-wrap:wrap}#skin-name{flex:1 1 110px;min-width:0;min-height:42px;padding:.5rem .7rem;border-radius:9px;border:1px solid var(--panel-line);background:#00000059;color:var(--text-main);font:600 .85rem var(--font-modern)}.btn-download{flex:1 1 150px;padding:.7rem 1rem;font-size:.85rem;border-radius:10px;letter-spacing:.5px}.danger-btn{margin-top:.3rem;min-height:42px;padding:.5rem .8rem;border-radius:9px;border:1px solid rgba(211,47,47,.5);background:#d32f2f24;color:#ffbcbc;font:700 .8rem var(--font-modern);cursor:pointer}.danger-btn:hover{background:#d32f2f40}.danger-btn.armed{background:var(--mc-red);color:#fff;border-color:#ff8a80;animation:armedPulse .9s ease-in-out infinite alternate}@keyframes armedPulse{0%{box-shadow:0 0 #d32f2f8c}to{box-shadow:0 0 0 7px #d32f2f00}}.tex-buffer{position:absolute;left:-9999px;top:0;width:64px;height:64px;pointer-events:none}.toast{position:fixed;left:50%;top:max(3.6rem,calc(env(safe-area-inset-top) + 3.2rem));transform:translate(-50%,-180%);z-index:90;max-width:min(92vw,460px);padding:.7rem 1.1rem;border-radius:10px;background:#101218f5;border:1px solid var(--panel-line);color:var(--text-main);font:700 .82rem var(--font-modern);text-align:center;box-shadow:0 12px 30px #00000080;opacity:0;transition:transform .28s ease,opacity .28s ease;pointer-events:none}.toast.show{transform:translate(-50%);opacity:1}.toast.good{border-color:#4caf50b3}.toast.bad{border-color:#d32f2fb3}.help-card{max-width:640px;width:min(94vw,640px);padding:1.4rem 1.5rem;background:#101218f5;border:1px solid var(--panel-line);border-radius:14px;text-align:left}.help-card h2{font-family:var(--font-pixel);font-size:.95rem;color:#fff;margin-bottom:.9rem;text-shadow:3px 3px 0 var(--mc-dark-green)}.help-card p{font-size:.88rem;line-height:1.6;color:var(--text-main);margin-bottom:.8rem}.help-card ul{margin:0 0 .9rem 1.1rem}.help-card li{font-size:.85rem;line-height:1.6;color:var(--text-main);margin-bottom:.4rem}.help-card kbd{background:#ffffff1f;border:1px solid var(--panel-line);border-radius:4px;padding:.05rem .3rem;font-size:.78rem}.help-card .btn{display:block;margin:.5rem auto 0}@media(max-width:759px){.brand{font-size:.62rem;text-shadow:2px 2px 0 var(--mc-dark-green)}.panel{padding:.45rem .5rem;gap:.4rem}.panel-preview .panel-title,.panel-preview .hint{display:none}.chip{font-size:.72rem;padding:.3rem .55rem;min-height:38px}.swatch{min-height:30px}.palette{grid-template-columns:repeat(auto-fill,minmax(30px,1fr))}.icon-btn{min-width:40px;min-height:40px}.preview-stage{min-height:56px}#preview-tools .chip{min-height:32px;font-size:.66rem;padding:.25rem .45rem}.canvas-head{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;gap:.3rem}.canvas-head::-webkit-scrollbar{display:none}.canvas-head #parts,.canvas-head .layer-switch{flex:0 0 auto;overflow:visible}.canvas-head .layer-switch:before{content:"";width:1px;align-self:stretch;margin:.25rem .15rem;background:var(--panel-line)}.caption{display:none}.canvas-foot{gap:.3rem;justify-content:center}.zoom-group{margin-left:0}.toast{font-size:.76rem;padding:.55rem .85rem;max-width:88vw}}@media(max-width:380px){.zoom-group{width:100%;margin-left:0;justify-content:space-between}}