/* A guide and layout lens over the actual lab. Product components keep their DOM and handlers. */
body { --content-max:1800px; --demo-top:66px; --demo-bottom:148px; --demo-stage-top:240px; padding-top:var(--demo-top); padding-bottom:var(--demo-bottom); }
body:not(.replay-ready)>.container { visibility:hidden; }
#demo-guide { position:fixed; inset:0 0 auto; z-index:1100; color:var(--text-primary); background:#f8f9fb; border-bottom:1px solid #d8dee8; font-size:16px; }
.demo-guide-top { min-height:66px; padding:10px 28px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.demo-guide-top strong { display:block; color:var(--primary-color); font-size:17px; }
.demo-guide-top small { display:block; color:#34724e; font-size:13px; }
.demo-guide-tools { display:flex; gap:10px; align-items:center; }
#demo-workspace-label { display:flex; align-items:center; gap:8px; color:#647180; font-size:13px; }
#demo-workspace-label[hidden] { display:none; }
#demo-workspace { max-width:180px; }
#demo-guide button,#demo-guide select { padding:7px 11px; font:inherit; border-radius:7px; border:1px solid #cbd3dd; background:white; color:var(--primary-color); cursor:pointer; }
#demo-guide button:disabled { opacity:.5; cursor:default; }
#demo-guide button:focus-visible,#demo-guide select:focus-visible { outline:3px solid #8c7ae6; outline-offset:2px; }
#demo-guide-controls { position:fixed; bottom:0; left:0; right:0; background:#f8f9fb; padding:12px 28px; border-top:1px solid #d8dee8; box-shadow:0 -6px 24px #1e3a5f09; display:grid; grid-template-columns:auto 1fr; column-gap:24px; row-gap:8px; }
#demo-guide-controls[hidden] { display:none; }
.demo-guide-location { display:flex; align-items:center; gap:10px; font-size:14px; }
.demo-guide-location label { color:#647180; }
.demo-guide-navigation { display:flex; gap:12px; align-items:center; justify-content:flex-end; }
.demo-guide-navigation>span { color:#697785; font-size:13px; }
.demo-guide-navigation label { display:flex; gap:6px; align-items:center; font-size:14px; }
#demo-next { background:var(--primary-color)!important; color:white!important; }
#demo-load-error { margin:60px auto; max-width:800px; padding:20px; background:#fee; }
body .container { padding-left:28px; padding-right:28px; }
body .app-header { margin-bottom:10px; }
body .app-header-top { padding:9px 0; }
body .app-header-copy .subtitle { font-size:14px; }
body .tab-navigation { margin-bottom:0; }
body .lab-jump-nav { top:var(--demo-top); z-index:40; background:white; }
/* The guide toolbar already identifies the active recording. */
body .lab-jump-nav .lab-model-status { display:none; }
body .card,body #prompt-visualization,body .pairwise-results { scroll-margin-top:calc(var(--demo-top) + 58px); }
body .card-header h2 { font-size:23px; }
body .card-header { padding:16px 22px; }
body .card-body { padding:20px 22px; }
body .container button:disabled { opacity:.5; }
body .container textarea[readonly],body .container input[readonly] { background:#fafbf9; }
body .recorded-output { font-size:clamp(18px,1.35vw,26px); line-height:1.5; }
body .recorded-sample-toolbar { font-size:18px; }
body .recorded-sample-buttons button { min-width:36px; }
.replay-guided .demo-spotlight { outline:2px solid #8475ca; outline-offset:5px; border-radius:10px; }
/* Spotlight expands the live card in place; the normal header, section nav and guide stay present. */
.replay-spotlight { overflow:hidden; }
.replay-spotlight .demo-section { position:fixed; z-index:45; top:var(--demo-stage-top); bottom:var(--demo-bottom); left:28px; right:28px; margin:0; overflow:auto; box-shadow:0 10px 40px #1e3a5f18; }
.replay-spotlight .demo-section>.card-header { position:sticky; top:0; background:white; z-index:3; padding:12px 20px; min-height:52px; }
.replay-spotlight .demo-section>.card-header>.info-text { display:none; }
.replay-spotlight .demo-section>.card-body { padding:16px 20px; }
.replay-spotlight .demo-section>.card-body>.info-text,.replay-spotlight .demo-section .experiment-config { display:none; }
.replay-spotlight .demo-spotlight { outline:0; }
.replay-spotlight .demo-section .fp-report-header { display:none; }
.replay-spotlight .demo-section .fp-report-nav { margin-bottom:12px; }
.replay-spotlight[data-demo-step=problem] #prompt-visualization,.replay-spotlight[data-demo-step=problem] .scenario-output-contract { display:none; }
.replay-spotlight[data-demo-step=problem] #scenario-messages { display:grid; grid-template-columns:1.1fr .85fr 1.1fr; gap:14px; }
.replay-spotlight[data-demo-step=problem] .scenario-message-controls { gap:6px; flex-wrap:wrap; }
.replay-spotlight[data-demo-step=problem] .scenario-message-id { width:100%; }
.replay-spotlight[data-demo-step=problem] .scenario-message-card { margin:0; grid-template-columns:26px minmax(0,1fr); }
.replay-spotlight[data-demo-step=problem] .scenario-content { font-size:18px; height:230px; min-height:0; }
.replay-spotlight[data-demo-step=problem] .scenario-help { margin-bottom:12px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) #scenario-editor { display:none; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) #prompt-visualization { margin:0; padding:0; border:0; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) #prompt-highlighted { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; padding:0; max-height:none; overflow:visible; background:transparent; border:0; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-message { position:relative; overflow:auto; max-height:clamp(170px,28vh,340px); padding:14px; border:1px solid #dce1e8; border-radius:9px; font-size:clamp(16px,1.1vw,22px); }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-message+.coverage-message { margin:0; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-message-label { position:sticky; top:-14px; background:white; padding:8px 0; z-index:1; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-legend { margin-top:14px; padding:12px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-items { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-item { margin:0; padding:6px; font-size:14px; min-width:0; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-item-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-color { width:18px; height:18px; flex:none; }
.replay-guided .demo-key-focus { box-shadow:0 0 0 2px #8475ca; }
.replay-guided[data-demo-step=comparison][data-demo-phase=prompt] .coverage-message>div:last-child { color:#76818e; }
.replay-guided[data-demo-step=comparison][data-demo-phase=prompt] .highlight:not(.demo-key-focus) { background:transparent!important; color:#76818e; }
.replay-guided[data-demo-step=comparison][data-demo-phase=prompt] .demo-key-focus { color:#1e3a5f; }
.replay-guided[data-demo-step=comparison][data-demo-phase=prompt] .demo-intent-focus { font-weight:600; box-shadow:0 0 0 2px #6654b8; }
.demo-must-always { text-transform:uppercase; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .legend-item:not(.demo-key-focus) { display:none; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .legend-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .legend-item-name { white-space:normal; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=dominance] .pairwise-cell:not([aria-pressed=true]) { opacity:.35; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=baseline] .recorded-sample-toolbar strong { font-size:clamp(20px,1.8vw,28px); color:var(--primary-color); }
.replay-spotlight:is([data-demo-step=baseline],[data-demo-step=comparison][data-demo-phase=baseline]) #baseline-results>:not(.recorded-samples) { display:none; }
.replay-spotlight:is([data-demo-step=baseline],[data-demo-step=comparison][data-demo-phase=baseline]) #baseline-results .recorded-samples { margin:0; }
.replay-spotlight[data-demo-step=ablation] #focus-ablation-comparison { display:none; }
.replay-spotlight[data-demo-step=ablation] .fp-samples-wrap>.recorded-samples { display:none; }
.replay-spotlight[data-demo-step=ablation] .fp-sample-card:not(.demo-featured) { display:none; }
.replay-spotlight[data-demo-step=ablation] .fp-sample-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.replay-spotlight[data-demo-step=ablation] .fp-sample-card { margin:0; padding:0; border:0; }
.replay-spotlight[data-demo-step=ablation] .fp-sample-card-header { display:none; }
.replay-spotlight[data-demo-step=singleton] #singleton-results>:not(.demo-featured) { display:none; }
.replay-spotlight[data-demo-step=singleton] #singleton-results { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.replay-spotlight[data-demo-step=singleton] #singleton-results>details { border:0; min-width:0; }
.replay-spotlight[data-demo-step=singleton] #singleton-results>details[open] { display:flex; flex-wrap:wrap; align-content:flex-start; gap:12px; }
/* The featured no-focus arm is a shared control, not a result owned by booking. */
.replay-spotlight[data-demo-step=singleton] #singleton-results>details>summary { display:none; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm-label { font-weight:700; color:var(--primary-color); }
.replay-spotlight[data-demo-step=singleton] .singleton-arm-separator { display:none; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm-description { display:block; margin-top:4px; color:#647180; font-size:14px; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm:not(.demo-featured) { display:none; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm { flex:1; min-width:0; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm>.recorded-samples { margin:8px 0; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm>details { font-size:13px; }
/* The next stop is the same singleton component's interactive, recorded pairwise grid. */
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) #singleton-results>:not(.pairwise-results) { display:none; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results { margin:0; padding:0; border:0; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>h3 { margin:0 0 8px; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>p { margin:8px 0; font-size:14px; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>.singleton-result-controls { margin:8px 0; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-grid-wrap { max-height:clamp(180px,calc(100dvh - var(--demo-bottom) - var(--demo-stage-top) - 190px),610px); margin:8px 0; }
.replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-grid tr:has([aria-pressed=true])>th { box-shadow:inset 3px 0 var(--primary-color); }
@media(min-width:1000px) {
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>* { grid-column:1/-1; min-width:0; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>h3 { grid-column:1; grid-row:1; align-self:center; margin:0; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>.singleton-result-controls { grid-column:2; grid-row:1; margin:0; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>.pairwise-legend { grid-row:2; font-size:12px; gap:6px; margin:6px 0 0; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-cell { min-height:32px; }
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-cell small { display:none; } /* Distances remain in cell tooltips and the native inspector. */
 /* The guide note explains the grid; the full methodology stays in context and disclosures. */
 .replay-spotlight:is([data-demo-step=dominance],[data-demo-step=comparison][data-demo-phase=dominance]) .pairwise-results>p:not(.pairwise-legend) { display:none; }
}
.replay-spotlight[data-demo-step=order] .order-comparison { padding:0; border:0; margin:0; }
.replay-spotlight[data-demo-step=order] .order-comparison .recorded-output { font-size:clamp(18px,1.1vw,22px); line-height:1.45; }
.replay-spotlight[data-demo-step=order] .order-comparison-heading h3 { font-size:21px; }
.replay-spotlight[data-demo-step=order] .order-moving-foci li,.replay-spotlight[data-demo-step=order] .order-anchor-text { font-size:20px; }
.replay-spotlight[data-demo-step=order] .focus-order-full { margin-bottom:0; }
@media(min-width:1600px) {
 .replay-spotlight[data-demo-step=order] .order-comparison-body { grid-template-columns:260px minmax(0,1fr); }
 .replay-spotlight[data-demo-step=order] .order-comparison .recorded-output { font-size:20px; }
 .replay-spotlight[data-demo-step=order] .order-condition-controls button { padding:7px 12px; }
 .replay-spotlight[data-demo-step=order] .order-recording-meta { margin-bottom:8px; }
}
.replay-spotlight[data-demo-step=jev][data-demo-phase=catalog] #jev-results>:not(.jev-decisions),.replay-spotlight[data-demo-step=jev][data-demo-phase=selected] #jev-results>:not(.jev-decisions) { display:none; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=selected] .jev-decisions tr[data-included=false] { opacity:.35; }
.replay-spotlight[data-demo-step=jev] .jev-decisions { max-height:calc(100dvh - 450px); overflow:auto; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] #jev-results>:not(.jev-composition-intro):not(.jev-arm) { display:none; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm[data-jev-arm=full],.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm>:not(h3):not(details) { display:none; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=outputs] #jev-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=outputs] #jev-results>:not(.jev-arm),.replay-spotlight[data-demo-step=jev][data-demo-phase=outputs] .jev-arm>:not(h3):not(.recorded-samples) { display:none; }
.replay-spotlight[data-demo-step=jev] .jev-arm h3 { font-size:18px; line-height:1.4; }
.replay-spotlight[data-demo-step=jev] .recorded-sample-buttons { gap:5px; }
.replay-spotlight[data-demo-step=jev] .recorded-sample-buttons button { min-width:26px; padding:3px 6px; }
.replay-exploring .demo-guide-navigation>span { visibility:hidden; }
#demo-resources { display:none; scroll-margin-top:calc(var(--demo-top) + 58px); }
.replay-guided[data-demo-step=end] #demo-resources { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:16px 20px 0; padding:16px 24px; border:1px solid #d8dee8; border-radius:10px; background:#f8f9fb; }
.demo-resources-links { min-width:0; }
.demo-resources-links h3 { margin:0 0 14px; color:var(--primary-color); font-size:24px; }
.demo-resources-links p { margin:10px 0 0; }
.demo-resources-links p>span { display:block; color:#647180; font-size:14px; }
.demo-resources-links a { color:var(--primary-color); font-size:clamp(18px,1.5vw,26px); overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:4px; }
.demo-repo-qr { display:flex; flex-direction:column; align-items:center; flex:none; gap:4px; color:var(--primary-color); font-size:14px; }
.demo-repo-qr img { display:block; width:196px; height:196px; background:white; }
#demo-resources a:focus-visible { outline:3px solid #8c7ae6; outline-offset:4px; }
@media(max-width:599px) { .replay-guided[data-demo-step=end] #demo-resources { flex-direction:column; align-items:flex-start; gap:16px; padding:16px; } .demo-resources-links h3 { font-size:21px; } .demo-repo-qr { align-self:center; } .demo-repo-qr img { width:160px; height:160px; } }
@media(min-width:1600px) { body { --demo-bottom:128px; } .replay-spotlight .demo-section { left:40px; right:40px; } .replay-spotlight .demo-section>.card-body { padding:24px; } .replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-item { font-size:18px; padding:8px; } body .recorded-samples { padding:24px; } }
@media(max-width:999px) { body { --demo-top:118px; --demo-bottom:240px; } .demo-guide-top { flex-wrap:wrap; padding:8px 14px; gap:6px; } .demo-guide-top strong>span { display:none; } .demo-guide-tools { gap:6px; font-size:13px; flex-wrap:wrap; } #demo-guide-controls { padding:10px 14px; display:flex; flex-direction:column; gap:8px; } .demo-guide-navigation { justify-content:flex-start; flex-wrap:wrap; gap:8px; } .demo-guide-navigation>span { display:none; } .demo-guide-location { gap:8px; } #demo-location { max-width:190px; } .replay-spotlight { overflow:auto; } .replay-spotlight .demo-section { position:relative; inset:auto; } .replay-spotlight[data-demo-step=problem] #scenario-messages,.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) #prompt-highlighted,.replay-spotlight[data-demo-step=ablation] .fp-sample-cards,.replay-spotlight[data-demo-step=singleton] #singleton-results,.replay-spotlight[data-demo-step=jev][data-demo-phase=outputs] #jev-results { grid-template-columns:1fr; } .replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-items { grid-template-columns:1fr 1fr; } .replay-spotlight[data-demo-step=singleton] #singleton-results>details[open] { display:block; } body .container { padding:0 14px 30px; } .replay-spotlight .demo-section>.card-header { position:static; } .demo-section { scroll-margin-top:calc(var(--demo-top) + 55px); } body .app-header { margin:0 -14px 10px; padding:0 14px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
body .container { overflow-x:clip; }
.replay-spotlight::before { content:''; position:fixed; inset:var(--demo-stage-top) 0 var(--demo-bottom); z-index:44; background:var(--bg-color); pointer-events:none; }
.replay-spotlight .demo-section>.card-header>.button-group { display:none; }
.replay-spotlight .demo-section>.card-header { display:flex; flex-wrap:nowrap; gap:12px; }
.replay-spotlight .demo-section>.card-header h2 { flex:1; }
.replay-spotlight .demo-section>.card-header .section-model-control { flex:initial; }
.replay-spotlight .demo-section>.card-body>.button-group { display:none; }
.replay-spotlight[data-demo-step=ablation] #ablation-results { display:block; }
.replay-spotlight[data-demo-step=ablation] .fp-inspector:not(.open) { display:none; }
.replay-spotlight[data-demo-step=ablation] .fp-report { width:100%; }
.replay-spotlight[data-demo-step=ablation] .fp-view-body { padding:12px; }
.replay-spotlight[data-demo-step=singleton] #singleton-results>details[open] { display:block; }
.replay-spotlight[data-demo-step=singleton] .singleton-arms { display:flex; gap:14px; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm { border:0; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm>.recorded-samples { padding:14px; }
.replay-spotlight[data-demo-step=singleton] .singleton-arm>.recorded-samples>.recorded-sample-toolbar { display:none; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .prompt-visualization-header { margin:0 0 10px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-message { max-height:clamp(125px,22vh,290px); }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-legend { margin-top:10px; padding:8px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-title { margin-bottom:6px; font-size:16px; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-item { padding:4px; }
@media(max-height:780px) and (min-width:1000px) {
 .replay-spotlight .demo-section>.card-header { padding:8px 20px; }
 .replay-spotlight .demo-section>.card-body { padding:12px 20px; }
 .replay-spotlight .recorded-samples { padding:14px; margin:8px 0; }
 .replay-spotlight .recorded-sample-buttons { margin-bottom:8px; }
 .replay-spotlight .recorded-output { font-size:18px; line-height:1.4; margin:8px 0 12px; }
 .replay-spotlight[data-demo-step=singleton] .recorded-sample-buttons { gap:4px; }
 .replay-spotlight[data-demo-step=singleton] .recorded-sample-buttons button { min-width:25px; padding:2px 6px; }
 /* Keep the selected order response visible; these labels repeat the condition cards and source list. */
 .replay-spotlight[data-demo-step=order] .order-comparison-heading,
 .replay-spotlight[data-demo-step=order] .order-recording-meta,
 .replay-spotlight[data-demo-step=order] .order-observation,
 .replay-spotlight[data-demo-step=order] .order-comparison .recorded-sample-toolbar,
 .replay-spotlight[data-demo-step=order] [data-order-neighbor] { display:none; }
 .replay-spotlight[data-demo-step=order] .order-comparison { --order-row-height:44px; }
 .replay-spotlight[data-demo-step=order] .order-moving-foci li { padding:6px 10px; font-size:16px; }
 .replay-spotlight[data-demo-step=order] .order-comparison .recorded-samples { margin-top:0; }
}
@media(max-width:999px) { .replay-spotlight::before { display:none; } .replay-spotlight .demo-section>.card-header { flex-wrap:wrap; } .replay-spotlight[data-demo-step=singleton] .singleton-arms { display:block; } }
/* Keep the chosen native result in view; its normal settings remain available in context/explore. */
.replay-spotlight .demo-section>.card-body>:not(.demo-spotlight):not(:has(.demo-spotlight)) { display:none!important; }
.replay-spotlight .recorded-sample-panel>.info-text { display:none; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=outputs] .recorded-sample-toolbar { display:none; }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .coverage-message { max-height:clamp(110px,calc(100dvh - var(--demo-bottom) - 510px),340px); }
.replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-item { line-height:20px; padding:2px 4px; }
.replay-spotlight::before { bottom:0; }

@media(min-width:1000px) and (max-width:1500px) { .replay-spotlight:is([data-demo-step=foci],[data-demo-step=comparison][data-demo-phase=prompt]) .legend-items { grid-template-columns:repeat(6,minmax(0,1fr)); } }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .coverage-message { max-height:clamp(256px,calc(100dvh - var(--demo-bottom) - 360px),480px); }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .coverage-message>div:last-child { white-space:normal; font-size:clamp(12px,.8vw,14px); line-height:1.2; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .coverage-message-label { padding:4px 0; font-size:clamp(14px,.9vw,18px); line-height:1.2; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .coverage-message .demo-key-focus { display:block; margin:6px 0; font-size:clamp(16px,1.2vw,22px); line-height:1.35; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=dominance] .pairwise-grid-wrap { max-height:clamp(220px,calc(100dvh - var(--demo-bottom) - var(--demo-stage-top) - 190px),610px); }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=dominance] .pairwise-cell[aria-pressed=true] { font-size:18px; }
.replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .legend-items { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1500px) { .replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .coverage-legend { display:none; } }
@media(max-width:999px) { #demo-workspace-label { font-size:12px; } #demo-workspace { max-width:150px; } .replay-spotlight[data-demo-step=comparison][data-demo-phase=prompt] .legend-items { grid-template-columns:1fr; } }

/* Both recorded compositions use the product's span-backed assembly inspector. */
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] #jev-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composition-intro { grid-column:1/-1; margin:0; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composition-intro h3 { font-size:23px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composition-intro p { font-size:15px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm { min-width:0; margin:0; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm>h3 { margin:0 0 10px; font-size:19px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-prompt-inspector>summary { display:none; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composed-scenario { max-height:clamp(230px,calc(100dvh - var(--demo-stage-top) - var(--demo-bottom) - 225px),650px); overflow:auto; overscroll-behavior:contain; padding-right:4px; }
.replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composed-message:first-child { margin-top:0; }
@media(max-width:999px) {
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] #jev-results { grid-template-columns:1fr; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composed-scenario { max-height:430px; }
}
@media(max-height:780px) and (min-width:1000px) {
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composition-intro { display:none!important; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm>h3 { font-size:17px; margin-bottom:6px; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-arm-meta { display:none; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composition-note { display:none; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-stitched-focus { padding:8px 10px; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-focus-thread .jev-focus-name { display:none; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-focus-thread { padding:6px 10px; }
 .replay-spotlight[data-demo-step=jev][data-demo-phase=ordered] .jev-composed-scenario { max-height:clamp(180px,calc(100dvh - var(--demo-stage-top) - var(--demo-bottom) - 136px),400px); }
}