:root{color-scheme:dark;--bg: #14161a;--panel-bg: #1c1f26;--accent: #e0a940;--text: #e8e8ec;--text-dim: #9aa0ab;font-family:Segoe UI,Hiragino Sans,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}#app{min-height:100vh;display:flex;flex-direction:column}header{padding:14px 24px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}header h1{margin:0;font-size:1.3rem}header h1 .attribution{font-size:.75rem;font-weight:400;color:var(--text-dim)}.subtitle{margin:2px 0 0;color:var(--text-dim);font-size:.85rem}.lang-select{background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:5px 8px;font-size:.78rem;flex:0 0 auto}main{flex:1;display:flex;gap:16px;padding:12px 24px 24px;flex-wrap:nowrap;position:relative}.side-toggle{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:50;background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.15);padding:14px 8px;font-size:.95rem;line-height:1;cursor:pointer}#sideToggleLeft{left:0;border-radius:0 6px 6px 0;border-left:none}#sideToggleRight{right:0;border-radius:6px 0 0 6px;border-right:none}@media (max-width: 1100px){.side-toggle{display:block}.viewport{flex:1 1 auto;width:100%;min-width:0}.panel{position:fixed;top:0;bottom:0;width:84vw;max-width:320px;max-height:100vh;border-radius:0;z-index:40;box-shadow:0 0 28px #0009;transition:transform .22s ease}#panelLeft{left:0;transform:translate(-100%)}#panelRight{right:0;transform:translate(100%)}#panelLeft.panel-open,#panelRight.panel-open{transform:translate(0)}}.viewport{position:relative;flex:1 1 640px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.undo-redo-row{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:2px}.undo-redo-group{display:flex;gap:8px;justify-self:start}.theme-color-group{justify-self:end;display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--text-dim);white-space:nowrap}.theme-color-input{width:26px;height:26px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:none;cursor:pointer}.undo-redo-btn{background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:5px 10px;font-size:.75rem;cursor:pointer}.undo-redo-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.undo-redo-btn:disabled{opacity:.35;cursor:not-allowed}.canvas-wrap{position:relative;width:100%;max-width:1400px;max-height:80vh;aspect-ratio:1 / 1;border-radius:6px;box-shadow:0 8px 30px #00000080;overflow:visible}.canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#000;border-radius:6px}.gizmo-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.gizmo-handle{pointer-events:auto;cursor:pointer;stroke:#000;stroke-width:1.5}.gizmo-handle.gizmo-move{fill:#e0a940}.gizmo-handle.gizmo-rotate{fill:#5ac8fa}.gizmo-handle.gizmo-scale-x{fill:#ff5c5c}.gizmo-handle.gizmo-scale-y{fill:#4ade4a}.gizmo-handle.gizmo-scale-z{fill:#4a90ff}.gizmo-handle.gizmo-scale-uniform{fill:#e0c840}.gizmo-handle.gizmo-wall{fill:#e0a940}.gizmo-handle-glyph{fill:#1c1400;font-size:13px;font-weight:700;pointer-events:none;-webkit-user-select:none;user-select:none}.gizmo-line{stroke:#ffffffb3;stroke-width:1.5;stroke-dasharray:3 3}.gizmo-selection-ring{fill:none;stroke:var(--accent);stroke-width:2;pointer-events:none}.gizmo-label{fill:#fff;font-size:12px;paint-order:stroke;stroke:#000;stroke-width:3px;pointer-events:none}.gizmo-material-icon-bg{fill:#262a33;stroke:var(--accent);stroke-width:1.5;cursor:pointer;pointer-events:auto}.gizmo-material-icon-glyph{fill:var(--accent);font-size:14px;pointer-events:none}.gizmo-delete-icon-bg{fill:#262a33;stroke:#ff8080;stroke-width:1.5;cursor:pointer;pointer-events:auto}.gizmo-delete-icon-glyph{fill:#ff8080;font-size:13px;pointer-events:none}.gizmo-duplicate-icon-bg{fill:#262a33;stroke:#5ac8fa;stroke-width:1.5;cursor:pointer;pointer-events:auto}.gizmo-duplicate-icon-glyph{fill:#5ac8fa;font-size:13px;pointer-events:none}.gizmo-shape-icon-bg{fill:#262a33;stroke:#c39bd3;stroke-width:1.5;cursor:pointer;pointer-events:auto}.gizmo-shape-icon-glyph{stroke:#c39bd3;fill:none;stroke-width:1.6;pointer-events:none}.gizmo-shape-icon-text{fill:#c39bd3;font-size:13px;pointer-events:none}.gizmo-center-icon-bg{fill:#262a33;stroke:#e0a940;stroke-width:1.5;cursor:pointer;pointer-events:auto}.gizmo-center-icon-glyph{fill:#e0a940;font-size:13px;pointer-events:none}.gizmo-color-swatch-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.gizmo-color-icon-bg{stroke:#ffffffb3;stroke-width:1.5;pointer-events:none}.gizmo-color-icon-glyph{stroke:#fff;stroke-width:1.7;fill:none;pointer-events:none;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 1.5px rgba(0,0,0,.9))}.gizmo-color-swatch-input{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;padding:0;border:none;cursor:pointer;background:none;opacity:0;pointer-events:auto}.add-menu-label{font-size:.7rem;color:#fff;margin-bottom:6px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.9)}.add-menu-row{display:flex;gap:6px}.popup-anchor-above{transform:translate(-50%,calc(-100% - 10px));text-align:center}.popup-anchor-above .add-menu-label{white-space:normal}.popup-anchor-above .add-menu-row{justify-content:center}.add-menu-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#262a33;border:1.5px solid #c39bd3;border-radius:50%;color:#c39bd3;font-size:1rem;cursor:pointer;padding:0}.add-menu-btn:hover{background:#2f3340}.add-menu-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}.material-popup{display:none;position:absolute;min-width:240px;width:max-content;background:#1c1f26;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:10px 12px;box-shadow:0 6px 20px #00000080;z-index:10;font-size:.75rem}.material-popup-title{font-weight:600;margin-bottom:6px;color:var(--accent);cursor:move;-webkit-user-select:none;user-select:none}.material-popup label{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--text-dim)}.material-popup label span[data-out],.material-popup label>span:first-of-type{flex:0 0 auto;white-space:nowrap}.popup-row-label{white-space:nowrap}.material-popup.popup-bare{background:none;border:none;border-radius:0;padding:0;box-shadow:none;min-width:0}.material-popup input[type=range]{flex:1;accent-color:var(--accent)}#unsupported{position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;text-align:center;padding:24px;background:#000000d9;border-radius:6px;color:#ff8080}#unsupported:not([hidden]){display:flex}.stats-row{margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}.stats-line{margin:0;font-size:.7rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-line #stats{font-variant-numeric:tabular-nums}.stats-line #statsHint{margin-left:6px;opacity:.7}.stats-badge-group{display:flex;align-items:center;gap:8px}.stats-badge{flex:0 0 auto;width:24px;height:24px;opacity:.85;transition:opacity .15s,transform .15s}.stats-badge:hover{opacity:1;transform:scale(1.08)}.stats-badge img{width:100%;height:100%;object-fit:contain;display:block}.version-label{flex:0 0 auto;font-size:.68rem;color:var(--text-dim);opacity:.7;white-space:nowrap}.canvas-credit{position:absolute;right:8px;bottom:6px;font-size:.65rem;color:#ffffff8c;text-shadow:0 1px 2px rgba(0,0,0,.9);pointer-events:none;-webkit-user-select:none;user-select:none}.panel{flex:0 0 300px;background:var(--panel-bg);border-radius:8px;padding:14px 18px;max-height:calc(100vh - 90px);overflow-y:auto}.fx-group{margin-bottom:10px}.fx-params{margin:4px 0 8px 20px;padding-left:8px;border-left:2px solid rgba(255,255,255,.1)}.fx-params[hidden]{display:none}.panel section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}.panel section:last-child{border-bottom:none}.panel h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0 0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between}.panel h2:after{content:"▾";font-size:.9em}.panel section.collapsed>h2{margin-bottom:0}.panel section.collapsed>h2:after{content:"▸"}.panel section.collapsed>*:not(h2){display:none}.panel label{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-dim);margin-bottom:6px}.panel label[hidden]{display:none}.panel label:has(input[type=range])>span:first-child{flex:0 0 92px}.panel label span[data-out]{flex:0 0 38px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}.panel input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}.panel label:has(select){flex-direction:column;align-items:flex-start;gap:4px}.panel label select{flex:1;width:100%;background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:4px 6px;font-size:.78rem}.panel label input[type=color]{width:24px;height:24px;padding:0;border:none;border-radius:4px;background:none;cursor:pointer}select#presetSelect{width:100%;background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:6px 8px;font-size:.8rem}.wall-grid{display:grid;grid-template-columns:auto 28px 1fr 1fr;gap:6px 8px;align-items:center;margin-bottom:8px}.wall-grid-header{font-size:.68rem;color:var(--text-dim);text-align:center}.wall-grid-label{font-size:.78rem;color:var(--text-dim);white-space:nowrap}.wall-grid input[type=color]{width:24px;height:24px;padding:0;border:none;border-radius:4px;background:none;cursor:pointer}.wall-grid input[type=range]{width:100%;accent-color:var(--accent)}.hint{font-size:.7rem;color:var(--text-dim);margin:0 0 8px}.checkbox-row{display:flex;align-items:center;gap:6px}.checkbox-row input[type=checkbox]{order:-1}.object-card select.shape-select{width:100%;margin-bottom:6px;background:#262a33;color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:4px 6px;font-size:.78rem}.object-card.is-selected{border-color:var(--accent)}#objectList{max-height:340px;overflow-y:auto;padding-right:2px;margin-bottom:8px}.object-card{background:#22252c;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:8px 10px;margin-bottom:10px}.object-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.object-card.collapsed .object-card-header{margin-bottom:0}.card-chevron{color:var(--text-dim);font-size:.7rem;width:10px}.object-card-body{display:block}.object-card.collapsed .object-card-body{display:none}.object-card-header strong{flex:1;font-size:.78rem;font-weight:600;color:var(--text)}.object-card-header input[type=color]{width:22px;height:22px;padding:0;border:none;border-radius:4px;background:none;cursor:pointer}.object-card .remove-btn{background:none;border:1px solid rgba(255,128,128,.4);color:#ff8080;border-radius:4px;width:22px;height:22px;line-height:1;cursor:pointer;font-size:.75rem}.object-card .remove-btn:hover{background:#ff808026}.material-divider{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:8px 0 4px;border-top:1px dashed rgba(255,255,255,.1);padding-top:6px}.add-object-row{display:flex;gap:8px}.add-object-row button{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0;background:#262a33;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--text);cursor:pointer}.add-object-row button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}.add-object-row button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.add-object-row button:disabled{opacity:.4;cursor:not-allowed}.secondary-btn{width:100%;padding:7px;margin-top:4px;background:#262a33;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--text);font-size:.75rem;cursor:pointer}.secondary-btn:hover{border-color:var(--accent);color:var(--accent)}button#resetBtn{width:100%;padding:8px;background:var(--accent);border:none;border-radius:4px;color:#1c1400;font-weight:600;cursor:pointer}button#resetBtn:hover{filter:brightness(1.1)}
