.o04-panel { margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--border,#d8cec0); border-radius: 8px; background: var(--surface,#fffaf2); }
.o04-controls,.o04-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.o04-controls button[aria-pressed="true"],.o04-active #objectList button[aria-pressed="true"] { background: #e3eeeb; border-color: #55877d; color: #214d45; }
.o04-panel p { margin: 4px 0; }.o04-panel .o04-controls p { margin-left: auto; }.o04-legend { gap: 18px; font-size: 12px; }
.o04-realRay { color: #a64e20; }.o04-visualRay { color: #8c579c; }.o04-paraxialReference { color: #718a70; }
.o04-legend span::before { content: ''; display: inline-block; width: 22px; margin-right: 6px; vertical-align: middle; border-top: 2px solid currentColor; }
.o04-legend .o04-visualRay::before,.o04-legend .o04-paraxialReference::before { border-top-style: dashed; }
.o04-plots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.o04-plots[hidden],.o04-panel[hidden],.o04-selection[hidden] { display: none; }
.o04-plot { border: 1px solid var(--border,#d8cec0); border-radius: 6px; background: var(--surface,#fffaf2); min-width: 0; overflow: hidden; }
.o04-plot h3 { font-size: 13px; margin: 7px 10px 0; font-weight: 600; }.o04-plot svg { display: block; width: 100%; max-height: 130px; }
.o04-plot [tabindex] { cursor: crosshair; }.o04-plot [tabindex]:focus { outline: 2px solid #55877d; }
.o04-plots>p { grid-column: 1/-1; margin: 2px 0; }
.o04-readings { display: grid; grid-template-columns: minmax(92px,1fr) minmax(105px,1.4fr); gap: 6px 10px; font-size: 12px; }
.o04-readings dt { color: var(--muted,#68635b); }.o04-readings dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.o04-toggle { display: flex; gap: 7px; align-items: center; margin: 9px 0; }.o04-selection { margin-top: 8px; }.o04-selection p { margin: 5px 0; }
.o04-selection form label { display: flex; gap: 8px; align-items: center; }.o04-selection input { width: 135px; }
.o04-angle-control { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.o04-angle-control[hidden] { display: none; }
.o04-angle-control input[type="range"] { flex: 1; min-width: 90px; width: 100%; padding: 0; accent-color: #b55d29; }
.o04-angle-control output { min-width: 62px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.o04-query-angle { width: 230px; margin-top: 0; }
.o04-angle-control input[type="range"]:focus-visible { outline: 2px solid #55877d; outline-offset: 3px; }
.o04-active #canvasWrap { height: 200px; min-height: 190px; }
.o04-active #properties h3 { font-size: 13px; margin: 16px 0 6px; }.o04-active #properties .param-field { margin: 8px 0; }
.o04-error { color: var(--danger,#9c422b); }.o04-domain-note { font-size: 12px; max-width: 440px; }