html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d0d0f;font-family:Arial,sans-serif}
canvas{display:block;width:100%;height:100%;background:#0d0d0f}
.ui{position:fixed;top:16px;left:16px;z-index:12;width:340px;max-width:calc(100vw - 32px);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.12);padding:14px 14px 12px}
.ui h1{margin:0 0 4px;font-size:18px;line-height:1.1;font-weight:800;color:#111}
.ui p{margin:0 0 12px;font-size:12px;line-height:1.45;color:#4a4a4a}
.grid{display:grid;gap:10px}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.row label{font-size:12px;font-weight:700;color:#111}
.value{font-size:12px;color:#5f5f5f;min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;margin:2px 0 0;accent-color:#111}
input[disabled]{opacity:.45;cursor:not-allowed}
.switches{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.toggle{display:flex;gap:8px;align-items:center;justify-content:flex-start;font-size:12px;color:#111;background:rgba(0,0,0,.035);border-radius:12px;padding:10px 12px;user-select:none}
.toggle input{margin:0;accent-color:#111}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
button{appearance:none;border:0;border-radius:12px;padding:10px 12px;font-size:12px;font-weight:800;cursor:pointer;background:#111;color:#fff}
button.secondary{background:#ececec;color:#111}
.hint{margin-top:10px;font-size:11px;line-height:1.4;color:#666}
.structuresPanel{position:fixed;top:16px;right:16px;z-index:12;width:204px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.12);padding:10px}
.structuresTitle{margin:0 0 6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#666}
.structuresGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.structCard{height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.035);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#111;text-transform:lowercase;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,border-color .16s ease;user-select:none;line-height:1.05;text-align:center;padding:2px}
.structCard:hover{transform:translateY(-1px);background:#111;color:#fff;border-color:#111;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.structuresHint{margin-top:8px;font-size:9px;line-height:1.25;color:#666}
.badge{display:none !important}
.removeBtn{position:fixed;z-index:14;width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#111;color:#fff;display:none;align-items:center;justify-content:center;font-size:16px;font-weight:800;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.22);transform:translate(-50%,0)}
.removeBtn:hover{background:#c61b1b}

.gizmoOverlay{position:fixed;inset:0;z-index:16;overflow:visible;pointer-events:none;display:none}
.gizmoAxis{stroke-width:3.2;stroke-linecap:round;pointer-events:stroke}
.gizmoAxisX{stroke:#ef4444}
.gizmoAxisY{stroke:#22c55e}
.gizmoAxisZ{stroke:#3b82f6}
.gizmoHandle{pointer-events:auto;cursor:pointer}
.gizmoHandleX{fill:#ef4444}
.gizmoHandleY{fill:#22c55e}
.gizmoHandleZ{fill:#3b82f6}
.gizmoLabel{font-size:13px;font-weight:800;font-family:Arial,sans-serif;pointer-events:none;paint-order:stroke;stroke:rgba(13,13,15,.9);stroke-width:3px}
.gizmoLabelX{fill:#ef4444}
.gizmoLabelY{fill:#22c55e}
.gizmoLabelZ{fill:#3b82f6}

.axesOverlay{
position:fixed;
right:22px;
bottom:22px;
width:152px;
height:152px;
z-index:11;
pointer-events:none;
display:none;
overflow:visible
}
.axesOverlay .axisFrame{fill:rgba(0,0,0,.88);stroke:rgba(255,255,255,.12);stroke-width:1.2}
.axesOverlay .axisCore{fill:rgba(15,23,42,.88)}
.axesOverlay line{stroke-linecap:round}
.axesOverlay .axisPos{stroke-width:1.8}
.axesOverlay .axisNeg{stroke-width:1.1;opacity:.34;stroke-dasharray:3.5 4.5}
.axesOverlay .axisX{stroke:#b85757;fill:#b85757}
.axesOverlay .axisY{stroke:#4b9a66;fill:#4b9a66}
.axesOverlay .axisZ{stroke:#4c78b8;fill:#4c78b8}
.axesOverlay text{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:10px;
font-weight:700;
letter-spacing:.04em;
dominant-baseline:middle;
text-anchor:middle;
paint-order:stroke;
stroke:rgba(255,255,255,.86);
stroke-width:3px
}
.axesOverlay .axisLabelX{fill:#8e3f3f}
.axesOverlay .axisLabelY{fill:#31734a}
.axesOverlay .axisLabelZ{fill:#34598f}
.axesOverlay .axisLabelNeg{opacity:.58;font-size:8.5px;letter-spacing:.02em}
.sectionTitle{margin:6px 0 0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#666}
.editorGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.colorCell{background:rgba(0,0,0,.035);border-radius:12px;padding:10px}
.colorCell label{display:block;font-size:11px;font-weight:800;color:#111;margin-bottom:6px}
.colorCell input[type=color]{width:100%;height:38px;border:0;background:transparent;padding:0;cursor:pointer}
.editorToggle{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;color:#111}
.editorDisabled{opacity:.45;pointer-events:none}
@media (max-width:980px){.ui{left:12px;right:268px;top:12px}.structuresPanel{top:12px;right:12px}}
@media (max-width:760px){.ui{left:12px;right:12px;top:12px}.structuresPanel{top:auto;left:12px;right:12px;bottom:70px;width:auto}.structuresGrid{grid-template-columns:repeat(3,1fr)}.structCard{height:62px}}