#recording-panel{padding:10px 12px;height:100%;min-height:340px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto minmax(160px,1fr) auto;gap:8px}
#recording-panel[hidden]{display:none}
.record-toolbar,.record-navigation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;grid-column:1/-1}
.record-toolbar output{margin-left:auto;font:11px ui-monospace,monospace;color:var(--muted)}
.record-toolbar label{font-size:11px;display:flex;gap:5px;align-items:center}
.record-navigation input{flex:1;min-width:100px;accent-color:var(--accent)}
.record-timeline{min-width:0;min-height:0;overflow:auto;border:1px solid var(--line)}
.record-timeline canvas{display:block;cursor:crosshair}
.record-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.85fr);gap:10px;min-width:0;min-height:0}
.record-view figure{margin:0;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.record-view img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#11171b}
.record-view img[hidden]{display:none}
.record-view figcaption{font-size:11px;color:var(--muted);padding-top:6px}
.record-view pre{min-height:0;overflow:auto;font:11px/1.4 ui-monospace,monospace;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.record-filmstrip{grid-column:1/-1;display:flex;gap:3px;overflow:auto;max-height:64px;min-height:0}
.record-filmstrip button{padding:2px;flex-shrink:0}
.record-filmstrip img{display:block;width:96px;height:54px;object-fit:contain}
.console-head .control-tabs{max-width:450px}
.console-head .control-tabs button{width:auto;flex:1}
.record-toolbar button,.record-navigation button{border-radius:0;font-size:11px}
.engine-console:has(#recording-panel:not([hidden])) #console-log{max-height:42px}
.engine-console:has(#recording-panel:not([hidden])) #console-watches{max-height:32px}
@media(max-width:800px){
 #recording-panel{display:block;height:auto;min-height:0}
 .record-toolbar,.record-navigation{margin-bottom:8px}
 .record-view{grid-template-columns:minmax(0,1fr) minmax(100px,.7fr);margin:10px 0;height:200px}
 .record-toolbar button,.record-navigation button{min-height:40px}
 .record-toolbar output{margin:0;width:100%}
 .record-timeline{max-height:160px}
}