:root { color-scheme: dark; font: 14px/1.35 system-ui, sans-serif; background:#1b2634; color:#eaf4ff; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; overflow:hidden; min-width:900px; background:#1b2634; }
button, input { font:inherit; } button { color:inherit; cursor:pointer; border:1px solid #587087; border-radius:5px; padding:5px 9px; background:#273a4c; } button:hover { background:#39556d; } button.is-active { border-color:#ffd34f; background:#526073; color:#fff3b1; } button.danger { border-color:#88535c; } button.danger:hover { background:#653942; }
.editor-bar { position:fixed; inset:0 0 auto; z-index:3; height:46px; display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgb(10 19 28 / .9); border-bottom:1px solid #40566a; backdrop-filter:blur(8px); } .editor-bar strong { margin-right:8px; white-space:nowrap; } .editor-bar strong span { color:#ffd34f; font-size:.72em; letter-spacing:.08em; } .editor-bar i, #vertexToolbar i { height:22px; width:1px; background:#40566a; } .toolbar { display:flex; gap:5px; } #status { margin-left:auto; color:#b7c8d8; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vertexToolbar { position:fixed; z-index:3; top:46px; left:260px; right:260px; height:132px; display:grid; grid-template-rows:42px minmax(0,1fr); overflow:hidden; background:rgb(16 30 42 / .96); border-bottom:1px solid #40566a; } #vertexModeRow { grid-row:1; display:flex; align-items:center; gap:6px; min-width:0; padding:6px 12px; border-bottom:1px solid #40566a; } #vertexActionRow { grid-row:2; display:flex; align-content:flex-start; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; padding:6px 12px; overflow-x:hidden; overflow-y:auto; scrollbar-color:#587087 #10202e; scrollbar-width:thin; } #vertexActionRow::-webkit-scrollbar { width:8px; } #vertexActionRow::-webkit-scrollbar-thumb { background:#587087; border-radius:8px; } #vertexToolbar strong { color:#ffd34f; white-space:nowrap; } #vertexToolbar span { display:flex; gap:4px; } body.vertex-tools-active #viewport { top:178px; }
#vertexActionRow::before { content:attr(data-label); align-self:flex-start; margin:1px 4px 0 0; padding:5px 7px; border:1px solid #40566a; border-radius:5px; color:#ffd34f; background:#10202e; font-size:.76rem; font-weight:700; white-space:nowrap; } #vertexActionRow > label { display:flex; align-items:center; gap:4px; min-height:32px; padding:3px 5px; border:1px solid #40566a; border-radius:6px; color:#b7c8d8; background:#142534; font-size:.76rem; white-space:nowrap; } #vertexActionRow > label input { width:52px; padding:3px 4px; } #vertexActionRow > label button { padding:4px 7px; } #vertexActionRow > button { min-height:32px; } #vertexModeRow > #componentTransformControls { padding-left:2px; }
#vertexToolbar { overflow:visible; } #vertexModeRow { min-height:42px; } #vertexModeRow strong { display:none; } #vertexModeRow > #componentTransformControls { padding-left:0; } #vertexActionRow { display:block; padding:7px 12px; overflow:visible; } #vertexActionRow::before { display:none; } #meshQuickRow, #meshMenuRow { display:flex; align-items:center; gap:8px; min-width:0; } #meshQuickRow { min-height:36px; } #meshQuickRow > span { display:flex; gap:4px; } #meshMenuRow { margin-top:7px; } .mesh-menu { position:relative; } .mesh-menu summary { list-style:none; padding:8px 12px; border:1px solid #587087; border-radius:7px; color:#dbefff; background:#273a4c; cursor:pointer; white-space:nowrap; } .mesh-menu summary::-webkit-details-marker { display:none; } .mesh-menu summary::after { content:"⌄"; margin-left:8px; color:#9db6cb; } .mesh-menu[open] summary { border-color:#ffd34f; color:#fff3b1; } .mesh-menu-content { display:none; } .mesh-menu[open] .mesh-menu-content { position:absolute; z-index:8; top:38px; left:0; display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; width:min(520px, calc(100vw - 540px)); max-height:270px; padding:9px; overflow:auto; border:1px solid #587087; border-radius:8px; background:#10202e; box-shadow:0 10px 24px rgb(0 0 0 / .35); } .mesh-menu-content > label { display:flex; align-items:center; gap:4px; min-height:32px; padding:3px 5px; border:1px solid #40566a; border-radius:6px; color:#b7c8d8; background:#142534; font-size:.76rem; white-space:nowrap; } .mesh-menu-content > label input { width:52px; padding:3px 4px; } .mesh-menu-content > label button { padding:4px 7px; } .mesh-menu-content > span { display:flex; gap:4px; }
.snap-tools label, .resolution-control { display:flex; align-items:center; gap:4px; color:#b7c8d8; font-size:.75rem; white-space:nowrap; } select { border:1px solid #587087; border-radius:4px; color:#eaf4ff; background:#172635; padding:4px; } .resolution-control { grid-column:1 / -1; padding:4px 2px 0; }
.reference-image-button { display:inline-flex; align-items:center; min-height:30px; padding:0 9px; border:1px solid #587087; border-radius:5px; color:#dbefff; background:#273a4c; cursor:pointer; font-size:.78rem; white-space:nowrap; } .reference-image-button input { display:none; }
.reference-opacity { display:flex; align-items:center; gap:4px; color:#b7c8d8; font-size:.75rem; white-space:nowrap; } .reference-opacity input { width:62px; accent-color:#d2ae42; }
.face-texture-panel{display:grid;gap:12px;padding:10px 0}.face-texture-panel h2,.face-texture-panel h3{margin:0;color:#eaf4ff}.face-texture-panel h2{font-size:1.08rem;color:#ffd34f}.face-texture-panel h3{font-size:.98rem}.texture-preview{height:142px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#314960;color:#c5d7e7;text-align:center}.texture-preview img{width:100%;height:100%;object-fit:contain}.texture-file-actions,.texture-edit-actions{display:flex;gap:8px}.texture-file-actions label,.texture-file-actions button,.texture-edit-actions button,.texture-place{display:grid;place-items:center;min-height:40px;border:1px solid #496174;border-radius:7px;background:#294158;color:#eef7ff;cursor:pointer}.texture-file-actions label{flex:1}.texture-file-actions button{width:46px}.texture-slider{display:grid;grid-template-columns:1fr 66px;gap:7px;align-items:center;color:#eaf4ff}.texture-slider output{justify-self:end;padding:5px 8px;border-radius:6px;background:#294158}.texture-slider input[type=range]{grid-column:1/2;width:100%;accent-color:#d2ae42}.texture-slider input[type=number]{grid-column:2;grid-row:2;width:66px;padding:6px}.texture-offset{display:grid;grid-template-columns:1fr 1fr;gap:8px;color:#eaf4ff}.texture-offset>span{grid-column:1/-1}.texture-offset label{display:grid;gap:4px;color:#b7c8d8}.texture-offset input{padding:7px}.texture-place{width:100%;background:#bfa144;color:#10202e;border-color:#d4bc68;font-weight:700}.texture-edit-actions button{flex:1}.texture-edit-actions button.is-active{background:#526073;border-color:#ffd34f;color:#fff3b1}
#extrudeControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #extrudeDistance { width:58px; padding:4px; }
#duplicateArrayControls { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:4px; border:1px solid #587087; border-radius:6px; background:#142534; } #duplicateArrayControls label { display:flex; align-items:center; gap:4px; color:#b7c8d8; font-size:.76rem; white-space:nowrap; } #duplicateArrayControls input[type=number] { width:54px; padding:3px 4px; } #duplicateArrayControls input[type=checkbox] { accent-color:#d2ae42; } #duplicateArrayControls button { padding:4px 7px; }
#edgeExtrudeControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #edgeExtrudeDistance { width:58px; padding:4px; }
#insetControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #insetAmount { width:52px; padding:4px; }
#bevelControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #bevelInset, #bevelHeight { width:52px; padding:4px; }
#softSelectionControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #softSelectionEnabled { width:auto; margin:0; } #softSelectionRadius { width:52px; padding:4px; }
#mergeDistanceControls { display:flex; flex:none; align-items:center; gap:4px; color:#b7c8d8; font-size:.78rem; white-space:nowrap; } #mergeDistance { width:52px; padding:4px; }
#animationDock { position:fixed; z-index:4; left:270px; right:270px; bottom:10px; min-height:54px; display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #496174; border-radius:8px; background:rgb(10 19 28 / .94); box-shadow:0 8px 22px rgb(0 0 0 / .24); } #animationDock strong { color:#ffd34f; } #animationDock #animationName { width:104px; } #animationDock .timeline-label { flex:1; min-width:150px; } #animationDock input[type="range"] { width:100%; vertical-align:middle; } #animationDock output { color:#ffd34f; float:right; } #animationDock .animation-actions { display:flex; gap:5px; } body.animation-mode #animationModeButton { border-color:#ffd34f; background:#526073; color:#fff3b1; }
#viewport { position:fixed; inset:46px 260px 0 260px; background:linear-gradient(#59758d,#233341); } #canvas { display:block; width:100%; height:100%; outline:none; }  
.panel { position:fixed; z-index:2; top:54px; bottom:8px; width:252px; overflow:auto; padding:10px; border:1px solid #496174; border-radius:8px; background:rgb(10 19 28 / .92); } .outliner-panel { left:8px; } .inspector-panel { right:8px; } .panel-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-weight:700; } .panel-title button { padding:3px 7px; } .scene-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:3px; }
.add-menu { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:8px; padding:6px; border:1px solid #496174; border-radius:6px; background:#172635; } .add-menu button { text-align:left; }
.leaf-wind-control { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 5px; padding:5px 7px; border:1px solid #40566a; border-radius:5px; color:#b7c8d8; background:#172635; font-size:.78rem; } .leaf-wind-control input { width:72px; padding:3px 5px; } .leaf-texture-control { display:grid; grid-template-columns:auto 1fr; gap:4px 7px; align-items:center; margin:0 0 8px; padding:5px 7px; border:1px solid #40566a; border-radius:5px; color:#b7c8d8; background:#172635; font-size:.78rem; } .leaf-texture-control input { min-width:0; padding:2px; font-size:.72rem; } .leaf-texture-control .texture-name { grid-column:2; }
.export-stats { display:block; margin:0 0 9px; padding:6px 7px; border:1px solid #40566a; border-radius:5px; color:#ffd34f; background:#0b1823; font-size:.76rem; line-height:1.35; }
.outliner { display:grid; gap:2px; } .outliner button { width:100%; display:flex; align-items:center; gap:7px; border-color:transparent; background:transparent; text-align:left; } .outliner button::before { content:"◇"; color:#8bb5d6; } .outliner button.is-group::before { content:"▾"; color:#ffd34f; } .outliner button:hover, .outliner button.is-selected { background:#30485e; border-color:#496174; } .outliner button.is-secondary { outline:1px solid #547d9b; }
.empty-state { color:#9eafbd; padding:12px 4px; } form { display:grid; gap:12px; } form > label, fieldset > label { display:grid; gap:5px; color:#b7c8d8; } input { min-width:0; color:#eaf4ff; border:1px solid #587087; border-radius:4px; background:#172635; padding:5px; } input[type=color] { width:100%; height:32px; padding:2px; } input[type=range] { width:100%; padding:0; } fieldset { display:grid; gap:8px; margin:0; padding:9px; border:1px solid #40566a; border-radius:6px; } legend { color:#dbefff; padding:0 4px; } .axis-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; align-items:end; } .axis-grid > span { font-size:.76rem; color:#8fa4b6; } .axis-grid label { display:grid; gap:2px; color:#8fa4b6; font-size:.7rem; } .axis-grid input { width:100%; padding:4px; }
.texture-name { overflow:hidden; color:#9eafbd; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.check-label { display:flex !important; align-items:center; gap:7px; } .check-label input { min-width:auto; }
.timeline-label { grid-template-columns:auto 1fr; align-items:center; } .timeline-label output { justify-self:end; color:#ffd34f; font-variant-numeric:tabular-nums; } .timeline-label input { grid-column:1 / -1; width:100%; } .animation-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } .animation-actions button { padding:4px; font-size:.75rem; }