:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#e8eee7;background:#111612;font-synthesis:none;color-scheme:dark;--muted:#92a094;--accent:#c4dfae;--border:#303b32}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;height:100vh;height:100dvh;min-height:300px;display:flex;flex-direction:column;overflow:hidden}
button,input,select{font:inherit}button,a,label,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sr-only,input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.header{height:60px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 22px;border-bottom:1px solid var(--border);background:#18201a}
.brand{display:flex;gap:11px;align-items:center;font-size:20px;font-weight:600;letter-spacing:2px}.brand svg{width:42px;color:var(--accent)}.brand-en{display:block;font-size:7px;letter-spacing:2px;color:var(--muted);margin-top:1px}
.toolbar{display:flex;align-items:center;gap:8px}.button{border:1px solid #41503f;border-radius:6px;padding:9px 13px;color:#dce7d5;background:#1c261e;font-size:12px;transition:background .15s;white-space:nowrap}.button:hover{background:#2c382e}.button span{margin-right:3px;font-size:15px}.button.accent{background:#bed5a8;color:#1d2b1c;border-color:#bed5a8}.button.accent:hover{background:#cfe5bb}
main{flex:1 1 auto;min-height:0}.workspace{height:100%;display:grid;grid-template-columns:minmax(0,1fr);position:relative}.workspace.settings-open{grid-template-columns:minmax(0,1fr) 288px}
.preview-panel{position:relative;min-width:0;min-height:0;background:#101511}.stage-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage{position:relative;flex:0 0 auto;overflow:hidden;background-color:#c9cdc4;background-image:linear-gradient(45deg,#bac0b7 25%,transparent 25%),linear-gradient(-45deg,#bac0b7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bac0b7 75%),linear-gradient(-45deg,transparent 75%,#bac0b7 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#background-canvas{z-index:0}#top-canvas{z-index:1}
.glasses{position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:none;cursor:grab;touch-action:none;user-select:none;z-index:2;transform-origin:0 0;will-change:transform;visibility:hidden}.glasses.ready{visibility:visible}.glasses img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}.glasses:focus-visible{outline:2px dashed #fff9;outline-offset:7px;border-radius:40px}.glasses.dragging{cursor:grabbing}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#dce2d6;color:#36472f;font-size:14px;z-index:3}.loading.failed{padding:30px;line-height:1.8;text-align:center}
.canvas-meta{position:absolute;bottom:10px;right:12px;z-index:4;padding:5px 8px;border-radius:4px;background:#111a13aa;color:#d1dacb;font:10px "Segoe UI",sans-serif;pointer-events:none}
.exit-fullscreen{display:none;position:absolute;top:16px;right:16px;z-index:5}.preview-panel:fullscreen{width:100%;height:100%}.preview-panel:fullscreen .exit-fullscreen{display:block}
.controls{min-height:0;overflow:auto;overscroll-behavior:contain;padding:19px;border-left:1px solid var(--border);background:#1c251f}.controls-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.controls-title h2{font-size:14px;font-weight:500;margin:0}
.icon-button{border:0;border-radius:5px;width:29px;height:29px;color:#b9cbb0;background:#303c2d;font-size:20px;line-height:1}.icon-button:hover{background:#405239}
.layer-card+.layer-card{margin-top:23px}.layer-label{display:flex;gap:8px;align-items:center;margin-bottom:11px}.number{color:#94ad84;font:10px ui-monospace,monospace}.layer-label h3{font-size:12px;font-weight:500;margin:0}.tag{margin-left:auto;border:1px solid #3a4636;border-radius:4px;color:#a5b49d;padding:2px 5px;font-size:9px}
.upload{display:flex;align-items:center;gap:12px;padding:10px;background:#242f26;border:1px dashed #485542;border-radius:7px;cursor:pointer}.upload:hover{border-color:#afc99c}.layer-card:focus-within .upload{outline:2px solid var(--accent);outline-offset:3px}.upload img{width:55px;height:51px;border-radius:3px;object-fit:cover;background:#364432}.upload>span{min-width:0;flex:1}.upload strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:400;color:#ced8c7}.upload-action{display:block;margin-top:9px;font-size:10px;color:var(--accent)}.upload-action>span{float:right}.layer-help{font-size:10px;color:#899d84;line-height:1.7;margin:9px 0 0}
.size-control{margin-top:24px;border-top:1px solid var(--border);padding-top:20px;display:grid;grid-template-columns:1fr auto;gap:14px;font-size:12px}.size-control output{font:11px ui-monospace,monospace;color:var(--accent)}input[type=range]{grid-column:1/-1;width:100%;margin:0;accent-color:#bed8a8;cursor:pointer;height:14px}.range-caption{grid-column:1/-1;display:flex;justify-content:space-between;color:#7e9479;font-size:9px;margin-top:-7px}
.fit-control{display:flex;align-items:center;justify-content:space-between;margin-top:19px;font-size:11px}.fit-control select{border:1px solid #3c4a38;background:#222e24;border-radius:4px;color:#c9d9bf;font-size:11px;padding:6px;max-width:120px}.restore{width:100%;margin-top:23px;font-size:11px}.privacy{font-size:10px;color:#82967c;text-align:center;line-height:1.6;margin:12px 0 0}
.status{flex:0 0 27px;margin:0;padding:5px 15px;background:#18201a;color:#9dad95;font-size:10px;line-height:17px;border-top:1px solid #2b362c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status.error{color:#efb399}
@media(max-width:680px){.header{height:53px;padding:0 10px;gap:8px}.brand{font-size:16px;gap:7px;letter-spacing:1px}.brand svg{width:30px}.brand-en{display:none}.toolbar{gap:5px}.button{padding:8px 9px;font-size:11px}.button span{font-size:12px;margin-right:2px}.workspace.settings-open{grid-template-columns:minmax(0,1fr)}.controls{position:absolute;z-index:10;top:0;right:0;bottom:0;width:min(288px,90vw);box-shadow:-12px 0 30px #0006}.canvas-meta{right:8px;bottom:8px;font-size:9px}.status{padding-inline:10px}}
@media(max-width:360px){.brand svg{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.scene-select{height:35px;max-width:126px;border:1px solid #41503f;border-radius:6px;padding:0 9px;background:#1c261e;color:#dce7d5;font-size:11px}
.scene-gate{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;overflow:auto;background:radial-gradient(ellipse at 50% 45%,#233729 0%,#101511 70%)}
.gate-glasses{width:min(280px,48vw);margin-bottom:27px;filter:drop-shadow(0 10px 20px #0006)}.gate-kicker{font-size:9px;letter-spacing:4px;color:#9eb191;margin:0 0 13px}.scene-gate h2{font-size:28px;font-weight:400;letter-spacing:2px;margin:0 0 13px}.gate-description{font-size:12px;color:#a1af99;margin:0 0 29px;line-height:1.7;text-align:center}.scene-options{display:flex;gap:15px}.scene-option{min-width:164px;text-align:left;padding:19px 23px;border:1px solid #52664a;border-radius:9px;background:#263724;color:#dce9d4}.scene-option:hover{background:#35492e;border-color:#a7c18d}.scene-option>span{display:block;font:11px ui-monospace,monospace;color:#9ebd86;margin-bottom:13px}.scene-option strong{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.scene-option small{font-size:10px;color:#91a885}.gate-note{font-size:10px;color:#809375;margin:23px 0 0;text-align:center;line-height:1.8}
dialog{width:min(390px,calc(100vw - 36px));padding:24px;border:1px solid #53684a;border-radius:13px;background:#1c291e;color:#dce9d4;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#071109b8;backdrop-filter:blur(5px)}dialog h2{font-size:17px!important}#password-description{font-size:12px;line-height:1.9;color:#9cad91;margin:0 0 21px}#password-form>label{font-size:11px;color:#a8bf98;display:block;margin-bottom:8px}#preset-password{display:block;width:100%;padding:12px;border:1px solid #52654b;border-radius:5px;background:#101a12;color:#edf3e8;letter-spacing:2px}#unlock{width:100%;font-size:12px}.password-error{height:19px;color:#e7aa8e;font-size:11px;margin:9px 0}
@media(max-width:680px){.header{padding-inline:8px;gap:5px}.toolbar{gap:4px}.button{padding-inline:7px}.scene-select{max-width:88px;padding-inline:5px;height:33px}.brand svg{display:none}.brand{font-size:14px;white-space:nowrap}.gate-glasses{margin-bottom:23px}.scene-gate h2{font-size:24px}.scene-option{min-width:135px;padding:16px 18px}.scene-options{gap:10px}.scene-gate{padding:18px}.gate-note{max-width:290px}}
@media(max-height:530px){.gate-glasses{display:none}.scene-gate h2{font-size:21px}.gate-description{margin-bottom:14px}.gate-note{margin-top:12px}.scene-option{padding:12px 20px}.scene-option>span{margin-bottom:8px}}
.scene-gate{justify-content:safe center}.scene-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));width:min(680px,100%);flex-shrink:0}.scene-option{min-width:0;overflow-wrap:anywhere}.scene-option strong{line-height:1.5}.gate-glasses{flex-shrink:0}.upload img:not([src]){visibility:hidden}