@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,system-ui,sans-serif;color:#e7eaf1;background:#0c111a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg:#0c111a;--panel:#121a26;--panel2:#182231;--line:#263346;--muted:#8b9bb0;--accent:#4e7dff;--accent2:#6b91ff;--mono:"DM Mono",monospace}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}button:disabled{opacity:.3;cursor:not-allowed}.editor-shell{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 48% 38%,#182437,#0c111a 70%)}.topbar{height:58px;flex-shrink:0;display:flex;align-items:center;gap:28px;padding:0 18px;background:#101722;border-bottom:1px solid #273448}.brand{display:flex;align-items:center;gap:9px;color:#f2f5fb;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.5px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:linear-gradient(145deg,#7398ff,#3c63e6);color:#fff;font-size:16px}.brand small{font:9px var(--mono);letter-spacing:1px;color:#8292ab;border-left:1px solid #344258;padding-left:10px;margin-left:3px}.main-menu{display:flex;align-items:center;gap:4px;height:100%}.main-menu button{height:34px;padding:0 11px;border:0;border-radius:5px;background:transparent;color:#b4c0d1;font-size:12px}.main-menu button:hover{background:#1e2a3c;color:#fff}.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.save-state{font-size:11px;color:#a2afc2;display:flex;align-items:center;gap:7px;white-space:nowrap}.save-state span{width:7px;height:7px;border-radius:50%;background:#e9b15a}.save-state.is-saved span{background:#53d5a0}.primary-btn,.export-wide{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #6b8eff;background:#426df0;color:#fff;border-radius:5px;padding:10px 13px;font-size:12px;font-weight:600}.primary-btn:hover,.export-wide:hover{background:#527bff}.editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:218px minmax(350px,1fr) 286px;gap:10px;padding:10px}.left-sidebar,.right-sidebar{display:flex;flex-direction:column;gap:10px;min-width:0}.panel{background:linear-gradient(180deg,#141e2c,#111925);border:1px solid #263447;border-radius:7px;overflow:hidden;box-shadow:0 8px 22px #00000012}.section-title{display:flex;align-items:center;justify-content:space-between;padding:13px 13px 11px;color:#e0e7f2;font-size:12px;font-weight:600;border-bottom:1px solid #263447}.section-title span{font:9px var(--mono);letter-spacing:.7px;color:#71839d}.tool-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:10px}.tool-button{position:relative;min-width:0;display:flex;align-items:center;gap:7px;padding:10px 8px;background:#192536;border:1px solid #27364b;border-radius:5px;color:#b8c5d8;font-size:11px;text-align:left}.tool-button svg{color:#91a5c4;flex-shrink:0}.tool-button kbd{font:9px var(--mono);color:#71829b;margin-left:auto}.tool-button:hover{background:#21314a;color:#fff}.tool-button.selected{background:#1b3260;border-color:#527fff;color:#dce7ff;box-shadow:inset 2px 0 #6490ff}.tool-button.selected svg{color:#8fb0ff}.color-panel{padding-bottom:14px}.color-current{display:flex;align-items:center;gap:10px;padding:12px 13px 8px}.color-current input{width:38px;height:38px;border:1px solid #43536a;border-radius:5px;background:#1a2637;padding:2px;cursor:pointer}.color-current input::-webkit-color-swatch-wrapper{padding:0}.color-current input::-webkit-color-swatch{border:0;border-radius:3px}.color-current strong{display:block;font:11px var(--mono);color:#e3eaf7}.color-current small{display:block;margin-top:4px;color:#8192aa;font-size:10px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:7px 13px 14px}.swatches button{width:100%;aspect-ratio:1;border:2px solid transparent;outline:1px solid #ffffff1c;border-radius:4px;padding:0}.swatches button:hover{transform:scale(1.07)}.swatches button.active{outline:2px solid #dce7ff;outline-offset:1px}.range-label{display:flex;align-items:center;justify-content:space-between;padding:7px 13px 8px;color:#a9b7ca;font-size:10px}.range-label strong{font:10px var(--mono);color:#e0e8f8}.range{display:block;width:calc(100% - 26px);margin:0 13px 4px;accent-color:#6089ff;height:4px}.center-workspace{display:flex;flex-direction:column;min-width:0;min-height:0;gap:0}.document-tabs{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 11px;background:#131d2a;border:1px solid #263447;border-radius:7px 7px 0 0}.tab{height:42px;display:flex;align-items:center;gap:7px;max-width:60%;padding:0 10px;border-bottom:2px solid #5a83ff;color:#dce7f8;font-size:11px}.tab svg{color:#83a4ff;flex-shrink:0}.tab input{width:120px;max-width:100%;min-width:0;border:0;outline:none;background:transparent;color:inherit;font-size:11px}.tab>span{font:9px var(--mono);color:#7c8da6}.tab-meta{font:10px var(--mono);color:#7e91ad;white-space:nowrap}.tab-actions{display:flex;align-items:center;gap:2px;margin-left:auto}.tab-actions button,.toolbar-group button,.layer-actions button{display:grid;place-items:center;width:29px;height:29px;border:1px solid transparent;background:transparent;color:#9eb0c9;border-radius:4px}.tab-actions button:hover,.toolbar-group button:hover,.layer-actions button:hover{background:#25344a;border-color:#364b68;color:#fff}.tab-actions i{height:19px;width:1px;background:#314057;margin:0 5px}.canvas-toolbar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#111a27;border-left:1px solid #263447;border-right:1px solid #263447;gap:10px}.toolbar-group{display:flex;align-items:center;gap:5px}.toolbar-label{font-size:10px;color:#8fa0b8}.toolbar-group strong{min-width:22px;text-align:center;font:10px var(--mono);color:#dce6f6}.toolbar-group button{width:27px;height:27px}.toolbar-group button.tool-on{color:#a7c0ff;background:#233b69}.canvas-stage{position:relative;flex:1;min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px 12px 20px;background-color:#111925;background-image:radial-gradient(#28364a 1px,transparent 1px);background-size:18px 18px;border:1px solid #263447;overflow:auto}.canvas-ruler{display:flex;justify-content:space-between;color:#7588a4;font:9px var(--mono);-webkit-user-select:none;user-select:none}.top-ruler{width:min(700px,calc(100% - 38px));margin:0 0 7px 22px}.canvas-workarea{display:flex;align-items:stretch;gap:7px;max-width:100%}.side-ruler{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;width:15px;color:#7588a4;font:9px var(--mono);padding:0}.checkerboard{flex-shrink:0;aspect-ratio:1;max-width:100%;background-color:#d9dfe8;background-image:linear-gradient(45deg,#adb8c8 25%,transparent 25%),linear-gradient(-45deg,#adb8c8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#adb8c8 75%),linear-gradient(-45deg,transparent 75%,#adb8c8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;box-shadow:0 14px 44px #0007;overflow:hidden}.pixel-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair}.pixel-canvas.with-grid{background-image:linear-gradient(to right,#3b4a5d66 1px,transparent 1px),linear-gradient(to bottom,#3b4a5d66 1px,transparent 1px);background-size:1.5625% 1.5625%}.canvas-help{margin-top:15px;color:#7f90a9;font-size:10px;text-align:center}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;padding:0 11px;background:#111a27;border:1px solid #263447;border-top:0;border-radius:0 0 7px 7px;color:#8fa0b7;font:9px var(--mono)}.status-bar>span:first-child{display:flex;align-items:center;gap:7px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5bd5a2}.preview-panel{padding-bottom:12px}.preview-tabs{display:flex;gap:5px;padding:10px 12px 0}.preview-tabs button{flex:1;border:1px solid #2b3b51;background:#192536;color:#91a3bd;border-radius:4px;padding:7px;font-size:10px}.preview-tabs button.active{background:#203b70;border-color:#4e78e5;color:#e2ebff}.model-stage{position:relative;min-height:250px;margin:8px 10px 0;border:1px solid #25364c;border-radius:5px;background:radial-gradient(ellipse at 50% 60%,#263750,#141f2e 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}.model-placeholder{position:relative;width:155px;height:200px;transform:perspective(500px) rotateY(-13deg) rotateX(2deg);filter:drop-shadow(0 13px 12px #0007)}.model-head{position:absolute;top:8px;left:54px;width:54px;height:54px;background:linear-gradient(135deg,#5a6c83,#28384d 70%);border:2px solid #172537;box-shadow:inset -8px -6px #1b293b,inset 7px 6px #8290a3}.model-head:after{content:"";position:absolute;right:0;top:18px;width:10px;height:18px;background:#d4b9a0}.model-body{position:absolute;top:62px;left:39px;width:83px;height:83px;background:linear-gradient(90deg,#3a4a60,#697b92 50%,#26384e);border:2px solid #182638;transform:skewY(-3deg)}.model-cape{position:absolute;top:3px;left:8px;width:68px;height:95px;background:linear-gradient(100deg,#142c55,#3266bd 50%,#102348);border:3px solid #6197ff;box-shadow:inset 0 0 0 3px #183b72,inset 0 0 0 6px #76aaff;transform:perspective(200px) rotateY(-8deg) skewY(4deg);display:flex;align-items:center;justify-content:center;color:#d7e7ff;text-shadow:0 1px 3px #001}.model-cape span{font-size:9px;font-weight:700;writing-mode:vertical-rl;letter-spacing:1px}.model-arms{position:absolute;top:66px;left:16px;width:123px;display:flex;justify-content:space-between}.model-arms i{display:block;width:23px;height:75px;background:linear-gradient(90deg,#26364a,#6e8097,#25354a);border:2px solid #172638}.model-legs{position:absolute;top:143px;left:47px;width:72px;display:flex;justify-content:space-between}.model-legs i{display:block;width:30px;height:49px;background:linear-gradient(90deg,#26364a,#4c5e74);border:2px solid #172638}.model-stage>p{position:absolute;bottom:12px;margin:0;color:#92a4bd;font-size:10px}.model-stage>small{position:absolute;bottom:29px;color:#687e9d;font-size:9px}.layer-panel{padding-bottom:13px}.layer-actions{display:flex;gap:3px;justify-content:flex-end;padding:5px 9px}.layer-list{display:flex;flex-direction:column;gap:4px;padding:0 8px 8px}.layer-row{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 6px;border:1px solid transparent;border-radius:5px;background:#172232;cursor:pointer}.layer-row:hover{background:#1d2c40}.layer-row.active{background:#1c3154;border-color:#395b99}.visibility-btn{display:grid;place-items:center;width:22px;height:25px;flex-shrink:0;background:transparent;border:0;color:#9eb2d1;padding:0}.layer-thumb{width:34px;height:34px;flex-shrink:0;border:1px solid #3a4d67;border-radius:3px;background-color:#d6dce5;background-image:linear-gradient(45deg,#aab5c4 25%,transparent 25%),linear-gradient(-45deg,#aab5c4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aab5c4 75%),linear-gradient(-45deg,transparent 75%,#aab5c4 75%);background-size:8px 8px;overflow:hidden}.layer-thumb canvas{width:100%;height:100%;image-rendering:pixelated}.layer-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.layer-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9e3f2;font-size:10px}.layer-info small{font:9px var(--mono);color:#7f93af}.layer-order{display:flex;flex-direction:column}.layer-order button{display:grid;place-items:center;width:19px;height:17px;border:0;border-radius:3px;background:transparent;color:#8b9db6;padding:0}.layer-order button:hover{background:#2b405c;color:#fff}.layer-footnote{margin:10px 12px 0;color:#7d90aa;font-size:9px}.export-panel{padding-bottom:12px}.export-meta{display:flex;justify-content:space-between;padding:12px 13px;color:#8fa1ba;font-size:10px}.export-meta strong{font:10px var(--mono);color:#dce5f3}.export-wide{width:calc(100% - 24px);margin:0 12px 7px}.save-wide{width:calc(100% - 24px);margin:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #34455d;background:#192638;color:#bdcbe0;border-radius:5px;padding:9px;font-size:11px}.save-wide:hover{background:#22344c;color:#fff}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 20px;border-top:1px solid #263447;color:#72849e;font:9px var(--mono);background:#101722}@media(min-width:1500px){.editor-layout{grid-template-columns:230px minmax(500px,1fr) 310px}.canvas-stage{min-height:560px}.model-stage{min-height:290px}}@media(max-width:1050px){.editor-layout{grid-template-columns:190px minmax(300px,1fr) 245px;gap:7px;padding:7px}.tool-list{padding:7px;gap:4px}.tool-button{padding:9px 6px;gap:5px;font-size:10px}.tool-button kbd{display:none}.section-title{padding:11px}.model-stage{min-height:220px}.model-placeholder{transform:scale(.88) perspective(500px) rotateY(-13deg)}}@media(max-width:780px){.topbar{gap:12px;padding:0 10px}.brand small{display:none}.main-menu{gap:0}.main-menu button{padding:0 7px;font-size:11px}.editor-layout{grid-template-columns:1fr;display:flex;flex-direction:column}.left-sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.center-workspace{order:0;min-height:570px}.left-sidebar{order:1}.right-sidebar{order:2;display:grid;grid-template-columns:1fr 1fr;align-items:start}.preview-panel{grid-row:span 2}.canvas-stage{min-height:400px}.checkerboard{width:min(560px,calc(100vw - 75px))!important}.status-bar{flex-wrap:wrap;padding:8px}.tool-panel,.color-panel{min-width:0}.model-stage{min-height:250px}}@media(max-width:480px){.topbar{height:54px}.brand{font-size:16px}.main-menu button:nth-child(4){display:none}.save-state{display:none}.primary-btn{padding:9px;font-size:10px}.editor-layout{padding:6px;gap:7px}.document-tabs{gap:5px;padding:0 6px}.tab{padding:0 5px;gap:4px}.tab input{width:82px;font-size:10px}.tab-meta{font-size:8px}.tab-actions button{width:25px}.canvas-toolbar{padding:0 6px}.canvas-stage{min-height:340px;padding:22px 5px}.checkerboard{width:min(420px,calc(100vw - 55px))!important}.side-ruler{width:12px;font-size:8px}.top-ruler{width:calc(100% - 30px);margin-left:17px}.canvas-help{font-size:9px}.status-bar{font-size:8px;gap:5px}.left-sidebar,.right-sidebar{grid-template-columns:1fr}.preview-panel{grid-row:auto}.model-stage{min-height:250px}.tool-list{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-button{flex-direction:column;justify-content:center;gap:5px;padding:9px 3px;text-align:center;font-size:9px}.tool-button kbd{display:none}.app-footer{padding:8px 10px;font-size:8px}.app-footer span:first-child{max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.cape-texture{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;opacity:.92;z-index:0}.model-cape span{position:relative;z-index:1;pointer-events:none;background:#10244888;padding:2px}.model-stage{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}.model-stage:active{cursor:grabbing}.model-placeholder{transform-style:preserve-3d;transition:filter .12s ease;will-change:transform}.model-head,.model-body,.model-arms i,.model-legs i{box-shadow:inset -7px -5px #111b2b66,inset 5px 4px #ffffff12}.model-cape{transform:translateZ(2px) perspective(200px) rotateY(-8deg) skewY(4deg)}.model-cape span{pointer-events:none}.mode-switch{display:inline-flex;align-items:center;padding:3px;gap:2px;border:1px solid var(--border, #303747);border-radius:9px;background:var(--panel, #171b24)}.mode-switch button{border:0;border-radius:6px;padding:7px 10px;color:var(--muted, #9ba5b5);background:transparent;white-space:nowrap;font:inherit;font-size:12px;cursor:pointer}.mode-switch button.active{color:var(--text, #f4f6fb);background:var(--accent, #315b9c);box-shadow:0 1px 3px #0003}.simple-mode .main-menu{display:none}.simple-mode .tool-list .tool-button:nth-child(n+4){display:none}.simple-mode .left-sidebar .section-title span,.simple-mode .export-panel{display:none}.simple-mode .layers-panel{padding-bottom:8px}.simple-mode .layers-panel .layer-actions,.simple-mode .layers-panel .layer-order,.simple-mode .layers-panel .range-label,.simple-mode .layers-panel input.range,.simple-mode .layers-panel .layer-footnote{display:none}.simple-mode .layers-panel .layer-row{padding:5px}.simple-mode .layers-panel .layer-thumb{width:28px;height:28px}.simple-mode .layers-panel .section-title:after{content:"可选中图层";color:var(--muted);font-size:10px;font-weight:400}.simple-mode .right-sidebar{gap:0}.simple-mode .preview-panel{flex:1}.simple-mode .canvas-help{color:var(--muted, #9ba5b5)}.professional-mode .mode-switch{margin-right:4px}@media(max-width:900px){.mode-switch button{padding:6px 7px;font-size:11px}.top-actions{gap:6px}}@media(max-width:680px){.mode-switch button{padding:6px}.save-state{display:none}}.preview-note{margin:7px 12px 0;padding:7px 8px;border:1px solid #2b3a4e;border-radius:4px;color:#8fa2bd;background:#111a27;font-size:9px;line-height:1.5}.simple-mode .preview-note{color:#b6c7df}.simple-mode .preview-panel{padding-bottom:10px}.simple-mode .right-sidebar{display:flex}@media(max-width:780px){.simple-mode .layers-panel{display:block}.simple-mode .right-sidebar{display:grid}}.three-model-stage{min-height:300px;position:relative}.three-preview-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none;cursor:grab}.three-preview-canvas:active{cursor:grabbing}.three-preview-canvas canvas{display:block;width:100%;height:100%}.three-preview-canvas .webgl-fallback{display:none}.three-preview-canvas[data-webgl-unavailable=true] .webgl-fallback{display:grid;position:absolute;top:20px;right:20px;bottom:20px;left:20px;place-items:center;text-align:center;color:#aab8cb;font-size:12px;line-height:1.6}.three-model-stage>p,.three-model-stage>small{z-index:2;pointer-events:none}@media(max-width:780px){.three-model-stage{min-height:320px}}.preview-tab-divider{width:1px;align-self:stretch;margin:2px;background:#314158}.preview-tabs button{min-width:0;padding:7px 5px}.three-model-stage{min-height:300px}.three-preview-canvas{z-index:1}