/* ds-allow-hardcode: font-face descriptor requires its literal family name; all usage is tokenized. */
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/IBMPlexSans-Variable.ttf") format("truetype");font-weight:100 700;font-display:swap} /* ds-allow-hardcode: CSS font-face requires a literal registration name; consumers use tokens. */
/* ds-allow-hardcode: font-face descriptor requires its literal family name; all usage is tokenized. */
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap} /* ds-allow-hardcode: CSS font-face requires a literal registration name; consumers use tokens. */

/* Mobile is the base. Product values come from the CourtVision token layer. */
:root{color-scheme:light;font-family:var(--cv-font-body);font-synthesis:none;color:var(--cv-semantic-text-primary);background:var(--cv-semantic-surface-page)}
*{box-sizing:border-box}
body{margin:0;font-size:var(--cv-type-body);line-height:var(--cv-leading-body)}
button,input,select{font:inherit}
button,select{cursor:pointer}
button{color:var(--cv-semantic-text-primary);background:var(--cv-semantic-surface-card);border:var(--cv-stroke-control) solid var(--cv-semantic-border-strong);border-radius:var(--cv-radius-control);min-block-size:var(--cv-size-control);padding-inline:var(--cv-space-3);font-size:var(--cv-type-control);font-weight:var(--cv-weight-medium);transition:background-color var(--cv-motion-feedback) ease,color var(--cv-motion-feedback) ease}
button:hover:enabled{background:var(--cv-semantic-surface-raised)}
button:active:enabled{background:var(--cv-semantic-surface-pressed)}
button:disabled,input:disabled,select:disabled{cursor:not-allowed;color:var(--cv-semantic-text-disabled);background:var(--cv-semantic-surface-disabled);border-color:var(--cv-semantic-border-default);opacity:1}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:var(--cv-stroke-focus) solid var(--cv-semantic-action-focus);outline-offset:var(--cv-space-1)}
[hidden]{display:none!important}
.skip-link{position:absolute;inset-block-start:var(--cv-space-2);inset-inline-start:var(--cv-space-3);transform:translateY(-200%);padding:var(--cv-space-2) var(--cv-space-3);z-index:10;background:var(--cv-semantic-surface-card);color:var(--cv-semantic-text-link);border:var(--cv-stroke-control) solid var(--cv-semantic-action-focus)}
.skip-link:focus{transform:translateY(0)}
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cv-space-2) var(--cv-space-4);padding:var(--cv-space-3) var(--cv-space-4);border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default);background:var(--cv-semantic-surface-card)}
.brand{display:inline-flex;align-items:center;gap:var(--cv-space-2);min-block-size:var(--cv-size-control);text-decoration:none;color:var(--cv-semantic-text-primary);font-size:var(--cv-type-brand);font-weight:var(--cv-weight-semibold);letter-spacing:var(--cv-tracking-tight)}
.brand-mark{inline-size:var(--cv-size-brand);block-size:var(--cv-size-brand);fill:none;stroke:var(--cv-semantic-action-primary);stroke-width:var(--cv-svg-brand-stroke)}
.workspace-title{margin:0;color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-control)}
.mode{color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-meta);margin-inline-start:auto}
main{max-inline-size:var(--cv-size-workspace);margin-inline:auto;padding:var(--cv-space-4);outline:none}
.context-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--cv-space-1) var(--cv-space-4);margin-block-end:var(--cv-space-4)}
h1,h2,h3,p{margin:0}
h1{font-size:var(--cv-type-title);font-weight:var(--cv-weight-semibold);letter-spacing:var(--cv-tracking-tight);line-height:var(--cv-leading-heading)}
h2{font-size:var(--cv-type-body);font-weight:var(--cv-weight-semibold);line-height:var(--cv-leading-heading)}
h3,legend{font-size:var(--cv-type-control);font-weight:var(--cv-weight-semibold)}
.context-row p{font-size:var(--cv-type-control);color:var(--cv-semantic-text-secondary)}
.toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--cv-space-3);padding:var(--cv-space-4);background:var(--cv-semantic-surface-card);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.dataset-label{display:flex;flex:1 1 100%;flex-direction:column;gap:var(--cv-space-2);min-inline-size:0;font-size:var(--cv-type-meta);font-weight:var(--cv-weight-medium)}
select{appearance:auto;inline-size:100%;max-inline-size:100%;min-block-size:var(--cv-size-control);padding:var(--cv-space-2) var(--cv-space-3);padding-inline-end:var(--cv-space-6);border:var(--cv-stroke-control) solid var(--cv-semantic-border-strong);border-radius:var(--cv-radius-control);background:var(--cv-semantic-surface-card);color:var(--cv-semantic-text-primary);font-size:var(--cv-type-control)}
select:hover{background:var(--cv-semantic-surface-raised)}
#frame-form{flex:1 1 var(--cv-size-frame-form);min-inline-size:0}
#frame-form label,.timestamp small{display:block;font-size:var(--cv-type-meta);font-weight:var(--cv-weight-medium);margin-block-end:var(--cv-space-2)}
.frame-entry{display:flex;gap:var(--cv-space-2);align-items:center;flex-wrap:wrap}
#frame-input{inline-size:var(--cv-size-frame-input);min-inline-size:0;min-block-size:var(--cv-size-control);padding:var(--cv-space-2);font-family:var(--cv-font-mono);font-size:var(--cv-type-control);border:var(--cv-stroke-control) solid var(--cv-semantic-border-strong);border-radius:var(--cv-radius-control);background:var(--cv-semantic-surface-card);color:var(--cv-semantic-text-primary)}
#go{background:var(--cv-semantic-action-primary);color:var(--cv-semantic-text-on-action);border-color:var(--cv-semantic-action-primary)}
#go:hover:enabled{background:var(--cv-semantic-action-hover);border-color:var(--cv-semantic-action-hover)}
#go:active:enabled{background:var(--cv-semantic-action-pressed)}
#go:disabled{background:var(--cv-semantic-surface-disabled);color:var(--cv-semantic-text-disabled);border-color:var(--cv-semantic-border-default)}
.navigation{display:flex;gap:var(--cv-space-2)}
.arrow{display:grid;place-items:center;inline-size:var(--cv-size-control);padding:0}
.arrow svg{inline-size:var(--cv-size-icon);block-size:var(--cv-size-icon);fill:none;stroke:currentColor;stroke-width:var(--cv-svg-icon-stroke)}
.timestamp{margin-inline-start:auto;text-align:end;min-inline-size:var(--cv-size-time);display:flex;flex-direction:column-reverse}
.timestamp #time{font-family:var(--cv-font-mono);font-size:var(--cv-type-body);display:block;line-height:var(--cv-size-control)}
#error,.loading{padding:var(--cv-space-3) var(--cv-space-4);margin-block:var(--cv-space-4);border:var(--cv-stroke-control) solid var(--cv-semantic-status-error-border);background:var(--cv-semantic-status-error-surface);color:var(--cv-semantic-status-error-text);font-size:var(--cv-type-control);overflow-wrap:anywhere}
.loading{border-color:var(--cv-semantic-border-default);background:var(--cv-semantic-surface-raised);color:var(--cv-semantic-text-secondary)}
.workspace{display:grid;gap:var(--cv-space-6);align-items:start;margin-block-start:var(--cv-space-4)}
.visuals{min-inline-size:0;display:grid;gap:var(--cv-space-4)}
.broadcast-panel,.court-panel{min-inline-size:0;background:var(--cv-semantic-surface-card);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default);align-self:start}
.panel-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--cv-space-2);padding:var(--cv-space-3)}
.badge{font-family:var(--cv-font-mono);font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.image-wrap{position:relative;aspect-ratio:16/9;background:var(--cv-semantic-surface-image);display:grid;place-items:center}
.image-wrap img{inline-size:100%;block-size:100%;object-fit:contain;display:block}
.placeholder{font-size:var(--cv-type-control);color:var(--cv-semantic-text-secondary);padding:var(--cv-space-6);line-height:var(--cv-leading-body);text-align:center}
.image-corner{position:absolute;inset-block-end:var(--cv-space-2);inset-inline-start:var(--cv-space-2);background:var(--cv-semantic-surface-card);color:var(--cv-semantic-text-primary);padding:var(--cv-space-1) var(--cv-space-2);font-size:var(--cv-type-meta)}
.image-corner span{margin-inline-start:var(--cv-space-2);color:var(--cv-semantic-text-secondary)}
.court-wrap{background:var(--cv-semantic-court-surround);padding:var(--cv-space-2);aspect-ratio:16/9;display:grid;align-items:center}
.court-wrap svg{display:block;inline-size:100%;overflow:visible}
.court-fill{fill:var(--cv-semantic-court-surface);stroke:var(--cv-semantic-court-line);stroke-width:var(--cv-svg-court-outline)}
.court-line{fill:none;stroke:var(--cv-semantic-court-line);stroke-width:var(--cv-svg-court-line)}
.court-label{fill:var(--cv-semantic-text-secondary);font-size:var(--cv-svg-axis-text);font-family:var(--cv-font-mono)}
#court [data-overlay="id"]{font-family:var(--cv-font-mono);font-size:var(--cv-svg-player-text);font-weight:var(--cv-weight-medium)}
#court [data-court-team]{opacity:1}
#court [data-court-team="white"] [data-player-id],#court [data-court-team="white"] [data-overlay="id"]{fill:var(--cv-semantic-team-white)}
#court [data-court-team="dark"] [data-player-id],#court [data-court-team="dark"] [data-overlay="id"]{fill:var(--cv-semantic-team-dark)}
#court [data-player-id]{stroke:var(--cv-semantic-court-marker-outline);stroke-width:var(--cv-svg-marker-stroke)}
#court [data-overlay="hull"]{fill-opacity:var(--cv-opacity-hull);stroke-width:var(--cv-svg-hull-stroke)}
#court [data-court-team="white"] [data-overlay="hull"]{fill:var(--cv-semantic-team-white);stroke:var(--cv-semantic-team-white)}
#court [data-court-team="dark"] [data-overlay="hull"]{fill:var(--cv-semantic-team-dark);stroke:var(--cv-semantic-team-dark)}
.court-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cv-space-2);padding:var(--cv-space-3);font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.legend{display:flex;flex-wrap:wrap;gap:var(--cv-space-3)}
.legend span{display:flex;align-items:center;gap:var(--cv-space-2)}
.dot{display:inline-block;inline-size:var(--cv-size-swatch);block-size:var(--cv-size-swatch);border-radius:var(--cv-radius-dot);flex-shrink:0}
.dot.white{background:var(--cv-semantic-team-white)}
.dot.dark{background:var(--cv-semantic-team-dark);border-radius:0}
.timeline{padding:var(--cv-space-4);background:var(--cv-semantic-surface-card);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.timeline-heading{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:space-between;gap:var(--cv-space-2);font-size:var(--cv-type-control);font-weight:var(--cv-weight-semibold)}
.timeline-heading>span:last-child{font-size:var(--cv-type-meta);font-weight:400;color:var(--cv-semantic-text-secondary)}
#scrubber{display:block;inline-size:100%;block-size:var(--cv-size-control);margin:var(--cv-space-2) 0;accent-color:var(--cv-semantic-action-primary);cursor:pointer}
#scrubber:disabled{opacity:1}
.timeline-footer{display:flex;justify-content:space-between;gap:var(--cv-space-2);flex-wrap:wrap;color:var(--cv-semantic-text-secondary);font-family:var(--cv-font-mono);font-size:var(--cv-type-meta)}
#frame-position{order:1;flex-basis:100%;font-family:var(--cv-font-body)}
.source-note{color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-meta);max-inline-size:var(--cv-size-prose)}
.inspector{min-inline-size:0;background:var(--cv-semantic-surface-card);padding:var(--cv-space-4);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.inspector-heading p{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary);margin-block-start:var(--cv-space-1)}
.team-picker{display:flex;gap:var(--cv-space-2);margin-block:var(--cv-space-4)}
.team-picker button{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--cv-space-2)}
.team-picker button[aria-pressed="true"]{background:var(--cv-semantic-surface-selected);border-color:var(--cv-semantic-action-primary);color:var(--cv-semantic-text-primary);border-width:var(--cv-stroke-focus)}
.team-picker button[aria-pressed="true"]:hover{background:var(--cv-semantic-surface-selected-hover)}
.quality{padding:var(--cv-space-3);border:var(--cv-stroke-rule) solid var(--cv-semantic-status-warning-border);background:var(--cv-semantic-status-warning-surface);color:var(--cv-semantic-status-warning-text)}
.quality.valid{border-color:var(--cv-semantic-status-valid-border);background:var(--cv-semantic-status-valid-surface);color:var(--cv-semantic-status-valid-text)}
.quality-label{display:block;font-size:var(--cv-type-control);font-weight:var(--cv-weight-semibold)}
.quality p{font-size:var(--cv-type-meta);margin-block-start:var(--cv-space-2);color:var(--cv-semantic-text-secondary);line-height:var(--cv-leading-body)}
.metrics-heading{display:flex;justify-content:space-between;gap:var(--cv-space-2);align-items:baseline;margin-block:var(--cv-space-5) var(--cv-space-2)}
.metrics-heading span{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.metric{display:flex;justify-content:space-between;gap:var(--cv-space-3);align-items:baseline;padding-block:var(--cv-space-3);border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default);font-size:var(--cv-type-control)}
.metric>div{display:flex;align-items:baseline;gap:var(--cv-space-2);white-space:nowrap}
.metric strong{font-family:var(--cv-font-mono);font-size:var(--cv-type-metric);font-weight:400;font-variant-numeric:tabular-nums}
.metric small{font-size:var(--cv-type-meta);inline-size:var(--cv-size-unit);color:var(--cv-semantic-text-secondary)}
.players-count{display:flex;justify-content:space-between;gap:var(--cv-space-3);align-items:baseline;font-size:var(--cv-type-control);padding-block:var(--cv-space-3)}
.players-count strong{font-family:var(--cv-font-mono);font-weight:400}
.overlays{margin:var(--cv-space-4) 0 0;padding:0;border:0;min-inline-size:0}
.overlays legend{padding:0;margin-block-end:var(--cv-space-2)}
.overlays label{display:flex;align-items:center;justify-content:space-between;gap:var(--cv-space-3);padding-block:var(--cv-space-3);min-block-size:var(--cv-size-control);font-size:var(--cv-type-control);cursor:pointer}
.overlays input{appearance:auto;accent-color:var(--cv-semantic-action-primary);inline-size:var(--cv-size-checkbox);block-size:var(--cv-size-checkbox);flex-shrink:0;margin:0}
.overlays small{display:block;color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-meta);margin-block-start:var(--cv-space-1)}
.inspector-note{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary);margin-block-start:var(--cv-space-4);line-height:var(--cv-leading-body)}
.page-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--cv-space-2);padding-block:var(--cv-space-5) var(--cv-space-2);color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-meta)}
@media(min-width:48rem){.topbar{padding-inline:var(--cv-space-6)}main{padding:var(--cv-space-5) var(--cv-space-6)}.dataset-label{flex:1 1 var(--cv-size-dataset)}#frame-form{flex:0 1 auto}.frame-entry{flex-wrap:nowrap}.mode{margin-inline-start:auto}#frame-position{order:0;flex-basis:auto}}
@media(min-width:72rem){.workspace{grid-template-columns:minmax(0,1fr) var(--cv-size-inspector)}.visuals{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--cv-space-4)}.timeline,.source-note{grid-column:1/-1}.toolbar{gap:var(--cv-space-5)}.dataset-label{max-inline-size:var(--cv-size-dataset-max)}.panel-heading{min-block-size:var(--cv-size-panel-header)}.context-row p{margin-inline-start:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:var(--cv-stroke-focus) solid Highlight}.team-picker button[aria-pressed="true"]{outline:var(--cv-stroke-control) solid Highlight}}

/* Clip time stays on the mobile control row rather than making an empty column. */
.timestamp{flex-direction:row;align-items:center;gap:var(--cv-space-2);min-inline-size:0}.timestamp small{order:-1;margin:0}.timestamp #time{line-height:var(--cv-leading-body)}
@media(min-width:48rem){.timestamp{flex-direction:column-reverse;gap:0}.timestamp small{order:0;margin-block-end:var(--cv-space-2)}.timestamp #time{line-height:var(--cv-size-control)}}

.team-picker button[aria-pressed="true"]:active{background:var(--cv-semantic-surface-pressed)}
.dot.dark{transform:rotate(45deg)}
#court [data-court-team="dark"] [data-player-id]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* Saved 3D research experiment, separate from the original 2D controller. */
.view-tabs{display:flex;gap:var(--cv-space-2);flex-wrap:wrap}
.view-tabs button[aria-selected="true"],.model-picker button[aria-pressed="true"]{background:var(--cv-semantic-surface-selected);border-color:var(--cv-semantic-action-primary);border-width:var(--cv-stroke-focus)}
.view-tabs button[aria-selected="true"]:hover,.model-picker button[aria-pressed="true"]:hover{background:var(--cv-semantic-surface-selected-hover)}
.view-tabs button[aria-selected="true"]:active,.model-picker button[aria-pressed="true"]:active{background:var(--cv-semantic-surface-pressed)}
.context-row .experiment-reference{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.broadcast-title{display:flex;align-items:center;gap:var(--cv-space-2);flex-wrap:wrap}
.linked-3d{font-size:var(--cv-type-meta)}
.experiment-scope{display:flex;flex-wrap:wrap;gap:var(--cv-space-2) var(--cv-space-4);align-items:baseline;padding-block:var(--cv-space-3);margin-block-end:var(--cv-space-4);font-size:var(--cv-type-control)}
.experiment-scope p{color:var(--cv-semantic-text-secondary)}
.experiment-layout{display:grid;gap:var(--cv-space-5);align-items:start}
.experiment-viewer,.experiment-info{min-inline-size:0}
.experiment-viewer{background:var(--cv-semantic-surface-card);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.model-picker{display:flex;flex-wrap:wrap;gap:var(--cv-space-2);padding-inline:var(--cv-space-3)}
.model-description{padding:var(--cv-space-3);font-size:var(--cv-type-control);color:var(--cv-semantic-text-secondary)}
.model-stage{position:relative;block-size:var(--cv-size-experiment-viewer);background:var(--cv-semantic-surface-card)}
.model-stage iframe{display:block;inline-size:100%;block-size:100%;border:0}
#experiment-loading,#experiment-error{margin:0;padding:var(--cv-space-6);font-size:var(--cv-type-control)}
#experiment-error{color:var(--cv-semantic-status-error-text);background:var(--cv-semantic-status-error-surface)}
#retry-model{margin-block-start:var(--cv-space-4)}
.model-help{padding:var(--cv-space-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--cv-space-3);font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.model-help a{display:inline-flex;align-items:center;min-block-size:var(--cv-size-control);color:var(--cv-semantic-text-link)}
.experiment-source{margin:0;background:var(--cv-semantic-surface-card);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.experiment-source figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--cv-space-2);padding:var(--cv-space-3)}
.experiment-source img{display:block;inline-size:100%;aspect-ratio:16/9;object-fit:contain}
.experiment-evidence,.experiment-limits{margin-block-start:var(--cv-space-5);font-size:var(--cv-type-control)}
.experiment-evidence dl{margin:var(--cv-space-3) 0}
.experiment-evidence dl>div{display:flex;justify-content:space-between;gap:var(--cv-space-3);padding-block:var(--cv-space-2);border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
.experiment-evidence dd{margin:0;font-family:var(--cv-font-mono);white-space:nowrap}
.experiment-evidence p,.experiment-limits p{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary);margin-block-start:var(--cv-space-2)}
@media(min-width:72rem){.experiment-layout{grid-template-columns:minmax(0,1fr) var(--cv-size-experiment-info)}}

#court [data-preview="true"]{stroke-dasharray:var(--cv-svg-preview-dash)}
#metric-basis{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
#metric-basis[data-preview=true]{color:var(--cv-semantic-status-warning-text)}
#reviewed-example{margin-block-start:var(--cv-space-3)}
.compatibility-control{margin:var(--cv-space-2) var(--cv-space-3)}
.model-stage canvas{display:block;inline-size:100%;block-size:100%;touch-action:none;cursor:grab;color:var(--cv-semantic-text-primary);font-family:var(--cv-font-mono);font-size:var(--cv-type-meta)}
.model-stage canvas:active{cursor:grabbing}
.model-stage canvas:focus-visible{outline:var(--cv-stroke-focus) solid var(--cv-semantic-action-focus);outline-offset:calc(-1 * var(--cv-space-1))}
button:disabled+small{color:var(--cv-semantic-text-secondary)}

/* Compact empty state replaces three unavailable metric rows. */
.metrics-empty{font-size:var(--cv-type-control);color:var(--cv-semantic-text-secondary);line-height:var(--cv-leading-body);padding-block:var(--cv-space-3);border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
/* Touch-first controls and full-width visuals on phones. */
#scrubber{min-block-size:var(--cv-size-control);touch-action:pan-y}
.view-tabs{max-inline-size:100%}
.model-stage{block-size:min(75svh,var(--cv-size-experiment-viewer-compact))}
@media(max-width:47.99rem){
  .workspace-title{flex-basis:100%;order:2}
  .mode{margin-inline-start:auto}
  .context-row .experiment-reference{flex-basis:100%;margin-block-start:var(--cv-space-2)}
  .view-tabs{flex-basis:100%;margin-block-start:var(--cv-space-2)}
  .view-tabs button{flex:1}
  #frame-input,select{font-size:var(--cv-type-body)}
  .navigation button{min-inline-size:var(--cv-size-control)}
  .model-picker button{flex:1}
}
@media(min-width:48rem) and (max-width:71.99rem){
  .visuals{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .timeline,.source-note{grid-column:1/-1}
  .metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cv-space-5)}
  .metric{flex-wrap:wrap;align-content:start}
}
@media(min-width:48rem){.model-stage{block-size:var(--cv-size-experiment-viewer)}}

/* Keep the embedded plot measurable while its loading notice overlays it. */
#experiment-loading{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;background:var(--cv-semantic-surface-card);pointer-events:none}

/* Quality remains discoverable without a large warning block. */
.quality,.quality.valid{padding:0;background:transparent;border:0;border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default);color:var(--cv-semantic-text-secondary)}
.quality summary{display:flex;align-items:center;justify-content:space-between;gap:var(--cv-space-3);cursor:pointer;min-block-size:var(--cv-size-control);list-style:none;font-size:var(--cv-type-meta)}
.quality summary::-webkit-details-marker{display:none}
.quality-label{font-size:var(--cv-type-meta);font-weight:var(--cv-weight-medium)}
.quality-more{text-decoration:underline}
.quality summary:focus-visible{outline:var(--cv-stroke-focus) solid var(--cv-semantic-action-focus);outline-offset:var(--cv-space-1)}
.quality p{padding-block-end:var(--cv-space-3)}
.playback-controls{display:flex;flex-wrap:wrap;gap:var(--cv-space-3);align-items:center;margin-block:var(--cv-space-3)}
.playback-controls label{display:flex;gap:var(--cv-space-2);align-items:center;font-size:var(--cv-type-control)}
.playback-controls select{inline-size:auto}
#playback-status,.report-status{font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}
.report-status:empty{display:none}
#playback-status{flex:1 1 100%}
@media(min-width:48rem){#playback-status{flex:1}}

/* Square action controls distinguish actions from the softly edged data inputs. */
button{border-radius:var(--cv-radius-button)}

/* Expanded quality retains the research status colors, without a permanent banner. */
.quality[open]{padding-inline:var(--cv-space-3);background:var(--cv-semantic-status-warning-surface);border:var(--cv-stroke-rule) solid var(--cv-semantic-status-warning-border);color:var(--cv-semantic-status-warning-text)}
.quality.valid[open]{background:var(--cv-semantic-status-valid-surface);border-color:var(--cv-semantic-status-valid-border);color:var(--cv-semantic-status-valid-text)}
.shape-layer-status{display:block;color:var(--cv-semantic-text-secondary);font-size:var(--cv-type-meta)}
.shape-layer-status:empty{display:none}

/* Dataset context, direct frame lookup and report action have distinct columns. */
.toolbar{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--cv-space-4)}
.toolbar .dataset-label{max-inline-size:none}
.toolbar #frame-form{min-inline-size:0}
.toolbar .frame-entry{flex-wrap:nowrap}
.toolbar .frame-entry #frame-input{flex:1;inline-size:var(--cv-size-frame-input);max-inline-size:var(--cv-size-frame-input)}
.toolbar-report{min-inline-size:0;display:flex;flex-direction:column;gap:var(--cv-space-2)}
.toolbar-report .report-status{display:block;min-block-size:calc(1em * var(--cv-leading-body));font-size:var(--cv-type-meta);line-height:var(--cv-leading-body);overflow-wrap:anywhere}
#export-report{display:inline-flex;align-items:center;justify-content:center;gap:var(--cv-space-2)}
#export-report svg{inline-size:var(--cv-size-icon);block-size:var(--cv-size-icon);fill:none;stroke:currentColor;stroke-width:var(--cv-svg-icon-stroke);flex-shrink:0}
.playback-controls .transport{align-items:center}
.playback-controls .timestamp{margin-inline-start:auto;display:flex;flex-direction:row;align-items:baseline;gap:var(--cv-space-2);text-align:end}
.playback-controls .timestamp small{order:0;margin:0;font-weight:var(--cv-weight-medium)}
.playback-controls .timestamp #time{line-height:var(--cv-leading-body);min-inline-size:7ch;font-variant-numeric:tabular-nums}
#playback-status{flex:1 1 100%;min-block-size:calc(1em * var(--cv-leading-body))}
@media(min-width:24rem){
  .toolbar{grid-template-columns:minmax(0,1fr) auto}
  .toolbar .dataset-label{grid-column:1/-1}
  .toolbar-report{padding-inline-start:var(--cv-space-4);border-inline-start:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
}
@media(min-width:48rem){
  .toolbar{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--cv-space-5)}
  .toolbar .dataset-label{grid-column:auto}
  .toolbar #frame-form{padding-inline-start:var(--cv-space-5);border-inline-start:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}
  .toolbar-report{padding-inline-start:var(--cv-space-5)}
}

@media(min-width:72rem){.toolbar{grid-template-columns:minmax(var(--cv-size-dataset),var(--cv-size-dataset-max)) minmax(0,1fr) auto}.toolbar #frame-form{justify-self:start}}

/* Package imports preserve the light research workstation hierarchy. */
.import-action{display:flex;flex-direction:column;gap:var(--cv-space-2);min-inline-size:0}
.control-caption{font-size:var(--cv-type-meta);font-weight:var(--cv-weight-medium);color:var(--cv-semantic-text-secondary)}
.experiment-import-controls{display:flex;flex-wrap:wrap;gap:var(--cv-space-4);align-items:flex-end;margin-block-end:var(--cv-space-4)}
.experiment-import-controls label{display:flex;flex-direction:column;gap:var(--cv-space-2);flex:1 1 var(--cv-size-dataset);min-inline-size:0;max-inline-size:var(--cv-size-dataset-max);font-size:var(--cv-type-meta)}
#import-dialog{inline-size:min(calc(100% - var(--cv-space-6)),var(--cv-size-import-dialog));max-block-size:calc(100svh - var(--cv-space-6));overflow:auto;padding:var(--cv-space-6);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-strong);background:var(--cv-semantic-surface-card);color:var(--cv-semantic-text-primary)}
#import-dialog::backdrop{background:var(--cv-semantic-text-primary);opacity:var(--cv-opacity-hull)}
#import-dialog p,#import-dialog a{font-size:var(--cv-type-control);line-height:var(--cv-leading-body);margin-block:var(--cv-space-3)}
#import-dialog a{display:inline-flex;align-items:center;min-block-size:var(--cv-size-control);color:var(--cv-semantic-text-link)}
.import-file-label{display:flex;flex-direction:column;gap:var(--cv-space-2);margin-block:var(--cv-space-4);font-size:var(--cv-type-control)}
#import-file{max-inline-size:100%;min-inline-size:0;font-size:var(--cv-type-control);min-block-size:var(--cv-size-control)}
#import-file::file-selector-button{min-block-size:var(--cv-size-control);margin-inline-end:var(--cv-space-2);padding-inline:var(--cv-space-3);color:var(--cv-semantic-text-primary);background:var(--cv-semantic-surface-raised);border:var(--cv-stroke-rule) solid var(--cv-semantic-border-strong);cursor:pointer}
#import-message{overflow-wrap:anywhere;color:var(--cv-semantic-text-secondary)}
#import-message.import-error{color:var(--cv-semantic-status-error-text);background:var(--cv-semantic-status-error-surface);padding:var(--cv-space-3)}
#import-summary{margin:0}
#import-summary>div{display:flex;justify-content:space-between;gap:var(--cv-space-3);padding-block:var(--cv-space-2);border-block-end:var(--cv-stroke-rule) solid var(--cv-semantic-border-default);font-size:var(--cv-type-control)}
#import-summary dd{margin:0;text-align:end;overflow-wrap:anywhere;min-inline-size:0}
.import-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--cv-space-3);margin-block-start:var(--cv-space-5)}
#import-confirm{background:var(--cv-semantic-action-primary);color:var(--cv-semantic-text-on-action)}
#import-confirm:hover:enabled{background:var(--cv-semantic-action-hover)}
#import-confirm:active:enabled{background:var(--cv-semantic-action-pressed)}
#import-confirm:disabled{background:var(--cv-semantic-surface-disabled);color:var(--cv-semantic-text-disabled)}
@media(min-width:48rem){.import-action{padding-inline-start:var(--cv-space-5);border-inline-start:var(--cv-stroke-rule) solid var(--cv-semantic-border-default)}}

/* Validation enabling must not crossfade disabled text through low-contrast colors. */
#import-confirm{transition:none}
.import-action{justify-self:start}

/* Persisted theme switch; natural images and saved research figures stay unfiltered. */
:root[data-theme="dark"]{color-scheme:dark}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
.header-actions{display:flex;align-items:center;gap:var(--cv-space-4);margin-inline-start:auto;flex-shrink:0}
.header-actions .mode{margin:0}
#theme-toggle{display:inline-flex;align-items:center;gap:var(--cv-space-2);white-space:nowrap}
#theme-toggle svg{inline-size:var(--cv-size-icon);block-size:var(--cv-size-icon);fill:none;stroke:currentColor;stroke-width:var(--cv-svg-icon-stroke)}
#theme-toggle[aria-pressed="true"]{background:var(--cv-semantic-surface-selected);border-color:var(--cv-semantic-action-primary)}
.model-stage{background:var(--cv-visual-surface)}
.model-stage canvas,#experiment-loading{color:var(--cv-visual-ink)}
@media(max-width:47.99rem){.header-actions .mode{display:none}}

/* Static public scope reuses the workstation rhythm and semantic tokens. */
.public-scope{display:flex;flex-direction:column;gap:var(--cv-space-2);font-size:var(--cv-type-meta);color:var(--cv-semantic-text-secondary)}