.explanation-board-dialog { width:min(1160px,96vw); max-width:96vw; max-height:94vh; padding:0; border:1px solid #dce5e0; border-radius:14px; color:#203e30; background:#f5f7f6; }
.explanation-board-dialog::backdrop { background:#122a2373; }
.explanation-board-dialog header,.explanation-board-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:white; }
.explanation-board-dialog h2 { margin:0; font-size:18px; }.explanation-board-dialog p { margin:5px 0; font-size:12px; color:#63766c; }
.explanation-board-dialog button,.explanation-board-dialog select,.explanation-board-dialog input { font:inherit; border:1px solid #d4dfd8; border-radius:6px; padding:7px 9px; background:white; color:inherit; }
.explanation-board-dialog button { cursor:pointer; }.explanation-board-dialog button:disabled { opacity:.5; cursor:default; }
.explanation-board-dialog button.active,.explanation-board-dialog button[aria-pressed=true] { background:#e3f4eb; border-color:#087f5b; color:#087f5b; }
.explanation-board-dialog .primary { background:#087f5b; color:#fff; border-color:#087f5b; }
.explanation-board-body { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; padding:12px; }
.explanation-board-view { min-width:0; }.explanation-board-canvas-wrap { display:flex; justify-content:center; align-items:center; height:440px; background:#e6ede9; overflow:hidden; border-radius:8px; }
.explanation-board-canvas-wrap canvas { max-width:100%; max-height:100%; touch-action:none; }
.explanation-board-tools { display:flex; flex-direction:column; gap:12px; max-height:570px; overflow:auto; font-size:12px; }
.explanation-board-tools fieldset { margin:0; border:1px solid #dce5e0; border-radius:8px; padding:10px; background:white; }
.explanation-board-tools legend { font-weight:600; }.explanation-board-tools label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 0; }
.explanation-board-tools input:not([type=color]):not([type=checkbox]),.explanation-board-tools select { min-width:0; width:125px; }
.explanation-board-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.explanation-board-tool-grid button { padding:8px 3px; font-size:12px; }
.explanation-board-frames,.explanation-board-actions { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; align-items:center; }
.explanation-board-frames button { font-size:12px; }.explanation-board-status { min-height:18px; font-size:12px; color:#526b5d; }
.explanation-board-dialog [data-error=true] { color:#b43f35; }.explanation-board-dialog footer span { flex:1; font-size:12px; }
.explanation-board-sources { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; padding:16px; max-height:65vh; overflow:auto; }
.explanation-board-sources button { text-align:left; padding:15px; }.explanation-board-sources strong,.explanation-board-sources small { display:block; margin:6px 0; }
.explanation-board-sources canvas { width:100%; aspect-ratio:1000/650; object-fit:contain; }.explanation-source-choices { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:12px 0; }
.project-source-choices { display:flex; gap:12px; margin:12px 0; }.project-source-choices label { flex:1; padding:12px; border:1px solid #dce5e0; border-radius:8px; cursor:pointer; }
.board-source-button { font:inherit; border:1px solid #cbdcd2; border-radius:6px; padding:4px 9px; background:white; color:#087f5b; cursor:pointer; }
@media(max-width:760px) { .explanation-board-body { grid-template-columns:1fr; }.explanation-board-canvas-wrap { height:320px; }.explanation-board-tools { max-height:260px; }.explanation-board-dialog footer { flex-wrap:wrap; }.explanation-board-dialog footer span { flex-basis:100%; } }

/* Native board editing occupies the existing stage and inspector. Only the
   source picker remains a dialog; playback uses the same master visual lane. */
.explanation-board-inline { position:absolute; inset:0; width:auto; max-width:none; max-height:none; border:0; border-radius:0; padding:0; background:#102c23; z-index:4; }
.explanation-board-inline[hidden],.fusion-board-inspector[hidden],.fusion-board-footer[hidden] { display:none!important; }
.explanation-board-inline header,.explanation-board-inline footer { display:none; }
.explanation-board-inline .explanation-board-body { display:block; height:100%; padding:0; }
.explanation-board-inline .explanation-board-view { height:100%; }
.explanation-board-inline .explanation-board-canvas-wrap { height:100%; border-radius:0; background:#102c23; }
.fusion-board-inspector { width:auto; max-width:none; max-height:none; border:0; border-radius:0; padding:12px; background:#f5f7f6; overflow:auto; flex:1; }
.fusion-board-inspector .explanation-board-tools { max-height:none; overflow:visible; }
.fusion-board-footer { width:auto; max-width:none; max-height:none; padding:8px 12px; border:1px solid #dce5e0; border-radius:0 0 8px 8px; background:white; }
.fusion-board-footer .explanation-board-actions,.fusion-board-footer .explanation-board-frames { margin:3px 0; }
.fusion-board-footer #ebPreview { display:none; }
.board-surface-active #frPanel,.board-surface-active .fr-inspector-tabs { display:none!important; }
.board-surface-active #drawLayer,.board-surface-active #drawLayer * { pointer-events:none!important; }
.board-surface-active #drawLayer { z-index:6; }
.fusion-context-tabs { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid #dce5e0; }
.fusion-context-tabs[hidden] { display:none; }.fusion-context-tabs button { flex:1; border:1px solid #d7e3dc; padding:7px; background:white; border-radius:6px; color:#365746; cursor:pointer; }.fusion-context-tabs button.active { background:#e3f4eb; border-color:#087f5b; color:#087f5b; }
.fusion-board-inspector .fusion-layout-controls { border-bottom:1px solid #dce5e0; padding-bottom:10px; margin-bottom:10px; display:flex; flex-wrap:wrap; gap:6px; font-size:12px; }
.fusion-board-inspector .fusion-layout-controls select { max-width:100%; }
.fusion-progress { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#102c23cc; color:white; z-index:3; font-size:13px; pointer-events:none; }
.fusion-progress[hidden] { display:none; }.fusion-scene-list { display:flex; gap:6px; align-items:center; overflow:auto; padding:8px 12px; border-bottom:1px solid #dce5e0; }
.fusion-scene-list button { white-space:nowrap; padding:6px 10px; border:1px solid #d7e3dc; border-radius:6px; background:white; color:#365746; cursor:pointer; }
.fusion-scene-list button[data-kind=board] { background:#e8f4ec; }.fusion-scene-list button.active { border-color:#087f5b; box-shadow:inset 0 0 0 1px #087f5b; }
.fusion-reference { position:absolute; right:2%; bottom:3%; width:30%; max-height:35%; object-fit:contain; pointer-events:none; background:#102c23; z-index:5; border:2px solid #fff; border-radius:4px; }
.fusion-reference[hidden] { display:none; }.fusion-board-split.explanation-board-inline { right:35%; }.fusion-reference.split { right:0; top:0; bottom:0; width:35%; height:100%; max-height:none; border:0; object-fit:contain; }