.topControls{position:fixed;top:16px;right:12px;z-index:10001;display:flex;align-items:center;gap:10px}.topControls .themeToggle,.topControls .languageToggle{position:static}.homeBackButton{position:fixed;top:16px;left:12px;z-index:10001;padding:10px 16px;border-radius:12px;background:linear-gradient(135deg,#22c55ee6,#10b981e6);color:#fff;border:1px solid rgba(15,23,42,.3);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 10px 22px #00000059;transition:transform .2s ease,box-shadow .2s ease}.homeBackButton:hover{transform:translateY(-2px);box-shadow:0 14px 26px #00000073}body.light .homeBackButton{background:linear-gradient(135deg,#16a34af2,#059669f2)}.appTitle{text-align:center;margin:18px 0 16px;font-family:"Press Start 2P",Trebuchet MS,sans-serif;font-size:2.8rem;font-weight:400;letter-spacing:2px;color:#c7f9cc;text-shadow:0 2px 0 #1f3b1f,2px 2px 0 #0f1b0f,-2px 2px 0 #0f1b0f,0 8px 16px rgba(0,0,0,.55);white-space:nowrap}body{background:radial-gradient(1100px 600px at 18% -12%,rgba(59,130,246,.28),transparent),radial-gradient(900px 520px at 92% 110%,rgba(249,115,22,.22),transparent),#0f172a;color:#fff;font-family:Space Grotesk,Segoe UI,sans-serif;margin:0;overflow:hidden}body.light{background:#f8fafc;color:#0f172a}body.light .appTitle{color:#0f172a;text-shadow:0 2px 0 #d1d5db,2px 2px 0 #e5e7eb,-2px 2px 0 #e5e7eb,0 12px 20px rgba(15,23,42,.15)}.homeLayout{position:relative;min-height:100vh;padding:80px 7vw 60px;overflow-y:auto;display:flex;flex-direction:column;gap:40px;z-index:1}.homeBackdrop{position:fixed;top:-20%;right:0;bottom:0;left:0;background:radial-gradient(600px 300px at 10% 10%,rgba(34,197,94,.35),transparent),radial-gradient(800px 500px at 90% 20%,rgba(59,130,246,.35),transparent),radial-gradient(600px 400px at 40% 90%,rgba(251,146,60,.3),transparent);filter:blur(0px);z-index:0;pointer-events:none}.homeHero{position:relative;z-index:1;max-width:900px;display:flex;flex-direction:column;gap:18px}.homeBadge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#0f172aa6;border:1px solid rgba(148,163,184,.4);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;width:fit-content}.homeTitle{font-family:"Press Start 2P",Trebuchet MS,sans-serif;font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1.3;margin:0;color:#e2f9e2;text-shadow:0 2px 0 #1f3b1f,2px 2px 0 #0f1b0f,0 10px 18px rgba(0,0,0,.45)}.homeSubtitle{margin:0;font-size:1.1rem;line-height:1.7;color:#e2e8f0d9;max-width:640px}.homeCta{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.homeHint{font-size:.95rem;color:#e2e8f0a6}.homeGrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}.homeCard{position:relative;padding:20px 20px 22px;border-radius:16px;background:#0f172ab8;border:1px solid rgba(148,163,184,.2);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 30px #060a1459;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.homeCard:hover{transform:translateY(-6px);box-shadow:0 22px 40px #060a1473;border-color:#94a3b873}.homeCard--live{border-color:#22c55e80;background:linear-gradient(160deg,#22c55e26,#0f172ad9)}.homeCard--soon{opacity:.8}.homeCardMeta{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#e2e8f099}.homeCardTitle{margin:0;font-size:1.25rem}.homeCardDesc{margin:0;color:#e2e8f0bf;line-height:1.6}.homeFooter{position:relative;z-index:1;color:#e2e8f08c;font-size:.95rem}body.light .homeBackdrop{background:radial-gradient(600px 300px at 10% 10%,rgba(34,197,94,.25),transparent),radial-gradient(800px 500px at 90% 20%,rgba(59,130,246,.25),transparent),radial-gradient(600px 400px at 40% 90%,rgba(251,146,60,.2),transparent)}body.light .homeBadge{background:#0f172ae6}body.light .homeTitle{color:#0f172a;text-shadow:none}body.light .homeSubtitle,body.light .homeHint,body.light .homeCardDesc,body.light .homeCardMeta,body.light .homeFooter{color:#0f172ab3}body.light .homeCard{background:#ffffffeb;border-color:#0f172a26}body.light .homeCard--live{border-color:#22c55e80;background:linear-gradient(160deg,#22c55e26,#fffffff2)}@media (max-width: 720px){.homeLayout{padding:60px 6vw 50px}.homeTitle{font-size:2rem}.homeCta{flex-direction:column;align-items:flex-start}}.panel-left h3,.panel-right h3,.panel-bg h3{margin:12px 0 4px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;opacity:.85}.panel-right h3{font-size:14px;opacity:.9}.app{display:flex;gap:15px;padding:15px;height:calc(100vh - 70px);box-sizing:border-box}.panel-left,.panel-right{padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden}.panel-left{align-self:flex-start;max-height:calc(100vh - 160px)}.panel-right{max-height:calc(100vh - 90px)}.panelSection{background:#080a1459;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 16px #00000040;transition:transform .2s ease,box-shadow .2s ease}.panelSection.collapsible{padding-top:6px}.sectionToggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;color:inherit;font-size:14px;font-weight:600;padding:6px 4px;border:none;text-transform:uppercase;letter-spacing:.4px;cursor:pointer}.sectionToggle .chev{transition:transform .2s ease}.panelSection.collapsed .sectionToggle .chev{transform:rotate(-90deg)}.sectionContent{overflow:hidden;max-height:600px;transition:max-height .25s ease,opacity .2s ease;opacity:1}.panelSection.collapsed .sectionContent{max-height:0;opacity:0;pointer-events:none}.sectionContent input[type=range]{margin-bottom:8px}.panelSection:hover{transform:translateY(-2px);box-shadow:0 10px 22px #00000059}.panel-left{background:var(--panel-left);border:1px solid rgba(168,85,247,.35);box-shadow:inset 4px 0 #a855f799,0 10px 30px #080a1473}.panel-right{background:var(--panel-right);border:1px solid rgba(249,115,22,.35);box-shadow:inset -4px 0 #f9731699,0 10px 30px #080a1473}.panel-right-column{width:260px;display:flex;flex-direction:column;gap:12px;transform:translate(-40px)}.panel-bg{padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:8px;width:100%;background:linear-gradient(135deg,#38bdf833,#0e749040);border:1px solid rgba(56,189,248,.35);box-shadow:inset -4px 0 #38bdf880,0 10px 30px #080a1473}body.light .panel-left,body.light .panel-right,body.light .panel-bg,body.light .toolbar,body.light .poseCard,body.light #poseGalleryContent{background:#fff;color:#0f172a;border-color:#0f172a26}body.light .panelSection{background:#f8fafc;border-color:#0f172a1f}body.light .panel-right .reset,body.light .btnSecondary{background:#e2e8f0;color:#0f172a;border-color:#0f172a33}body.light .btnGhost{color:#0f172ab3;border-color:#0f172a33}body.light .panel-left{background:linear-gradient(160deg,#a855f72e,#fffffff0);border-color:#a855f759;box-shadow:inset 4px 0 #a855f759,0 12px 26px #0f172a14}body.light .panel-right{background:linear-gradient(160deg,#f9731633,#fffffff0);border-color:#f9731659;box-shadow:inset -4px 0 #f9731659,0 12px 26px #0f172a14}body.light .panel-bg{background:linear-gradient(160deg,#38bdf838,#fffffff0);border-color:#38bdf859;box-shadow:inset -4px 0 #38bdf859,0 12px 26px #0f172a14}body.light #renderArea{background:linear-gradient(145deg,#f8fafc,#e2e8f0);border-color:#0f172a33}body.light input[type=range]{background:linear-gradient(90deg,#0f172a40,#0f172a1f);border:1px solid rgba(15,23,42,.15)}body.light .toolbar input[type=range]{background:linear-gradient(90deg,#0f172a59,#0f172a26)}body.light .brushLabel{color:#0f172acc}body.light input[type=range]::-webkit-slider-thumb{background:#7c3aed;border-color:#0f172a40}body.light input[type=range]::-moz-range-thumb{background:#7c3aed;border-color:#0f172a40}body.light .characterItem,body.light .skinPreview{background:#f1f5f9}.themeToggle{position:static;padding:6px 10px;border-radius:6px;background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.2);font-size:12px;font-weight:700;letter-spacing:.5px;box-shadow:0 8px 18px #00000059;transition:transform .2s ease,box-shadow .2s ease}.languageToggle{position:static;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:#1e293b;color:#fff;border:1px solid rgba(255,255,255,.2);font-size:12px;font-weight:700;letter-spacing:.4px;box-shadow:0 8px 18px #00000059}.languageToggle label{font-size:11px;text-transform:uppercase;letter-spacing:.6px}.languageToggle select{background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600}.themeToggle:hover{transform:translateY(-2px);box-shadow:0 12px 22px #0006}body.light .themeToggle{background:#0f172a;color:#fff;border-color:#0f172a33;position:static}body.light .languageToggle{background:#0f172a;color:#fff;border-color:#0f172a33}body.light .languageToggle select{background:#111827;color:#fff;border-color:#fff3}.panel-left::-webkit-scrollbar,.panel-right::-webkit-scrollbar{width:6px}.panel-left::-webkit-scrollbar-track,.panel-right::-webkit-scrollbar-track{background:transparent}.panel-left::-webkit-scrollbar-thumb,.panel-right::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.panel-left::-webkit-scrollbar-thumb:hover,.panel-right::-webkit-scrollbar-thumb:hover{background:#475569}.panel-left,.panel-right-column{width:260px}.panel-right{width:100%}.panelSection--bg{background:linear-gradient(135deg,#38bdf82e,#0e749038);border-color:#38bdf859}body.light .panelSection--bg{background:linear-gradient(135deg,#38bdf82e,#0e74901f);border-color:#0e749040}#viewer{flex:1;display:flex;justify-content:center;align-items:center}.skinButtons{display:flex;gap:10px}.skinBtn{width:60px;height:60px;border:none;background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer}.skinBtn.used{outline:2px solid #3b82f6;outline-offset:2px;border-radius:8px;box-shadow:0 0 0 3px #3b82f640}input[type=range]{width:100%}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#fff3,#ffffff1a);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 10px #a855f773;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid rgba(255,255,255,.5);box-shadow:0 2px 10px #a855f773;cursor:pointer}button{padding:5px;border-radius:6px;border:none;cursor:pointer;transition:all .2s ease}.btnPrimary{background:linear-gradient(135deg,var(--accent-strong),var(--accent));color:#fff;font-weight:700;border:1px solid rgba(124,58,237,.4)}.btnPrimary:hover{background:linear-gradient(135deg,#6d28d9,#9333ea)}.btnSecondary{background:#0f172a99;color:#fff;border:1px solid #334155}.btnSecondary:hover{background:#334155}.btnGhost{background:#ffffff08;color:#ffffffbf;border:1px dashed rgba(255,255,255,.2)}.panel-left .btnPrimary{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#a855f773}.panel-left .btnSecondary{background:#2c1b4f;border-color:#a855f759}.panel-left .btnGhost{color:#f0e8ffcc;border-color:#a855f759}.panel-right .reset{background:#ffffff14;color:#fffc;border:1px solid rgba(255,255,255,.15)}.panel-right .reset:hover{background:#ffffff29;color:#fff}.panel-right #resetAll{background:#dc2626;color:#fff;border:1px solid rgba(220,38,38,.7);font-weight:700}.panel-right #resetAll:hover{background:#b91c1c}.btnGhost:hover{color:#fff;border-color:#ffffff80}.btnWide{width:100%;padding:10px 12px}button:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0003}button:active{transform:translateY(0)}.reset{font-size:12px}#resetAll{background:#dc2626;color:#fff;font-weight:700}#uploadedSkins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}#exportBtn{background:linear-gradient(135deg,#22c55e,#16a34a,#0ea5e9);color:#0b1215;font-weight:900;text-transform:uppercase;letter-spacing:1px;border:2px solid rgba(255,255,255,.35);box-shadow:0 10px 18px #22c55e59,0 2px #00000059}#exportBtn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 24px #22c55e80,0 3px #00000059}.addSkinBtn{font-size:24px;font-weight:700;width:100%;height:120px;padding:0;background:#111827;border:2px dashed rgba(255,255,255,.3);border-radius:6px;color:#fff9;transition:all .2s ease}.addSkinBtn:hover{border-color:#fff9;color:#fff}.charactersList{display:flex;flex-direction:column;gap:6px;margin-top:8px}.characterItem{padding:6px;background:#0b1220;border-radius:6px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;align-items:center}.characterItem.active{outline:2px solid #60a5fa}.characterItem span{flex:1}.deleteBtn,.skinDeleteBtn{background:#dc2626;color:#fff;border:none;border-radius:4px;padding:2px 6px;cursor:pointer;font-size:12px;font-weight:700}.deleteBtn:hover,.skinDeleteBtn:hover{background:#991b1b}.visibilityBtn{background:#16a34a;color:#fff;border:none;border-radius:4px;padding:2px 6px;cursor:pointer;font-size:12px;margin-right:5px}.visibilityBtn:hover{background:#15803d}#characterContextMenu{position:fixed;z-index:10002;background:#0b1220;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px;min-width:140px;display:none;box-shadow:0 12px 24px #00000059}#characterContextMenu button{width:100%;background:transparent;color:#fff;border:none;padding:6px 10px;text-align:left;border-radius:6px}#characterContextMenu button:hover{background:#ffffff14;transform:none;box-shadow:none}body.light #characterContextMenu{background:#fff;border-color:#0f172a33;box-shadow:0 12px 24px #0f172a26}body.light #characterContextMenu button{color:#0f172a}body.light #characterContextMenu button:hover{background:#f1f5f9}.charViewport{position:absolute;width:320px;height:420px;left:20px;top:20px;border-radius:8px;overflow:visible;background:transparent;border:2px solid transparent;display:flex;justify-content:center;align-items:center;cursor:default;z-index:3;transform-origin:middle center}.charViewport.active{border-color:#60a5fa;box-shadow:inset 0 0 0 2px #60a5fa}.charViewport.movable{border-color:#22c55e;box-shadow:0 0 6px #22c55e40;cursor:grab}.charViewport.movable.dragging{cursor:grabbing;opacity:.9}.charViewport.dragging:not(.movable){opacity:.9}.charViewport canvas{transform-origin:middle center;width:100%;height:100%;display:block}.deleteViewportBtn{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;background:#dc2626;color:#fff;font-weight:700;z-index:10}.resizeViewportBtn{position:absolute;top:4px;left:4px;width:24px;height:24px;padding:0;background:#0ea5e9;color:transparent;font-weight:700;z-index:10;cursor:grab;border:none}.resizeViewportBtn:hover{background:#38bdf8}.resizeViewportBtn:before,.resizeViewportBtn:after{content:"";position:absolute;width:8px;height:8px;border-color:#f8fafc}.resizeViewportBtn:before{top:5px;left:5px;border-top:2px solid #f8fafc;border-left:2px solid #f8fafc}.resizeViewportBtn:after{bottom:5px;right:5px;border-bottom:2px solid #f8fafc;border-right:2px solid #f8fafc}.charViewport.resizing{opacity:.85}.charViewport.resizing .resizeViewportBtn{cursor:grabbing;background:#22c55e}.charViewport.resizing{border-color:#22c55e;box-shadow:0 0 6px #22c55e40}.skinPreview{background:#111827;padding:6px;border-radius:6px;display:flex;flex-direction:column;align-items:center;cursor:pointer;border:2px solid transparent;position:relative}.skinPreview.active{border-color:#3b82f6}.skinPreview canvas{pointer-events:none}.skinName{font-size:11px;text-align:center;margin-top:4px;opacity:.85}.skinDeleteBtn{position:absolute;top:2px;right:2px}#poseGalleryModal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;justify-content:center;align-items:center}.appModal{position:fixed;top:0;right:0;bottom:0;left:0;background:#080c14b3;display:none;align-items:center;justify-content:center;z-index:10000}.appModal.open{display:flex}.appModalContent{width:min(440px,92vw);background:#0b1220;border:2px solid #1f2937;border-radius:10px;padding:16px;box-shadow:0 20px 40px #00000073;text-align:center}.appModalContent h3{margin:0 0 8px;font-size:14px}.appModalContent p{margin:0 0 12px;font-size:13px;color:#ffffffe6;font-weight:600}#modalLabel{display:block;font-size:12px;margin-bottom:6px;color:#fffc}#modalInput{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:6px;border:1px solid #334155;background:#111827;color:#fff;margin-bottom:12px}.appModalActions{display:flex;justify-content:center;gap:8px}#modalConfirm{background:#22c55e;color:#0b1215;font-weight:700}#modalCancel{background:#1f2937;color:#fff}#poseGalleryContent{background:#1e1e2f;padding:15px;border-radius:10px;display:flex;flex-wrap:wrap;gap:12px;max-height:80%;overflow-y:auto}.poseCard{width:110px;background:#111827;padding:8px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:6px}.poseCard button{width:100%}.bgButtons{display:flex;flex-direction:column;gap:6px}.bgButtons button{padding:6px;font-size:12px;border-radius:6px}.bgButtons button.active{outline:2px solid #22c55e}#bgColorPicker{width:100%;height:40px;border:none;border-radius:8px;cursor:pointer}#viewerContainer{position:relative;flex:1;overflow:hidden;min-width:800px;min-height:600px}#poseGalleryModal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}#viewer canvas{pointer-events:auto}#poseGalleryModal{pointer-events:auto}#viewer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}#viewer.dragging{cursor:grabbing}#moveModeBtn.active{background:#22c55e;color:#000;font-weight:700}#renderArea{position:relative;flex:1;background:linear-gradient(145deg,#0f172ad9,#140c28e6);border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;display:flex;justify-content:center;align-items:center;max-width:1200px;max-height:800px;margin:0 auto;box-shadow:0 22px 50px #00000073}.exportOverlay{position:absolute;top:10px;right:10px;z-index:5;padding:8px 12px;animation:popIn .25s ease}.appModalContent{animation:popIn .2s ease}@keyframes popIn{0%{transform:translateY(6px) scale(.98);opacity:.6}to{transform:translateY(0) scale(1);opacity:1}}#backgroundLayer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}#viewer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center}#viewerContainer{border:2px dashed #334155}#viewerContainer.exporting,#renderArea.exporting{border:none}.toolbar{display:flex;gap:10px;align-items:center;justify-content:flex-start;margin:10px 15px;padding:12px 15px;background:#141823;border-radius:8px;border:1px solid rgba(255,255,255,.15)}.toolbarSpacer{flex:1}.brushControl{display:flex;align-items:center;gap:8px}.shapeControl{display:flex;align-items:center;gap:6px}.shapeSelect{height:32px;padding:0 8px;background:#1e293b;color:#fff;border:1px solid #334155;border-radius:4px;font-size:12px}.shapeSelect.selected{border-color:#22c55e}.brushLabel{font-size:12px;color:#ffffffd9;white-space:nowrap}.toolbar button{padding:8px 12px;background:#e2e8f0;border:1px solid #94a3b8;color:#0f172a;border-radius:4px;cursor:pointer;font-weight:500}.toolbar .exportToolbar{padding:8px 16px;background:linear-gradient(135deg,var(--accent-strong),var(--accent));color:#fff;font-weight:700;border:1px solid rgba(124,58,237,.4)}.toolbar .exportToolbar:hover{background:linear-gradient(135deg,#6d28d9,#9333ea)}.toolbar .toolBtn{width:36px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #cbd5f5}.toolbar .toolBtn--line{width:36px;padding:0;font-size:12px;font-weight:700;letter-spacing:.5px;color:#0f172a}.toolbar .toolIcon--line{width:16px;height:16px}.moveViewportBtn{position:absolute;top:4px;left:32px;width:24px;height:24px;padding:0;background:#0ea5e9;color:#fff;border:none;border-radius:4px;z-index:10;cursor:pointer;display:none}.moveViewportBtn:hover{background:#38bdf8}.moveViewportBtn.active{background:#22c55e;color:#000;font-weight:700}.moveViewportBtn svg{width:14px;height:14px;fill:#f8fafc}.toolbar .toolIcon{width:22px;height:22px;display:block;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))}.toolbar .toolIcon--shape{width:24px;height:24px}.toolbar button:hover{background:#f1f5f9}.toolbar button.selected{border:2px solid green}.toolbar input[type=color]{width:40px;height:30px;border:none;cursor:pointer}.toolbar input[type=range]{width:100px}#drawCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}#brushCursor{position:absolute;border:3px solid rgba(0,102,255,.85);border-radius:999px;pointer-events:none;transform:translate(-50%,-50%);z-index:4;box-shadow:0 0 8px #0066ff59}