:root{--torus-bg:#140925;--torus-panel:#170f24;--torus-surface:#1e132e;--torus-text:#f1e8ff;--torus-muted:#bba9d8;--torus-accent:#9a75f6;--torus-accent-ink:#130825;--torus-focus:#a174fb;--torus-error:#fb7185;--torus-divider:#3a2955;--torus-radius:8px}
body.observatory-page{margin:0;background:var(--torus-bg);color:var(--torus-text);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden;height:100dvh;min-width:0}
.observatory-page *{box-sizing:border-box}.observatory-page [hidden]{display:none!important}.observatory-page a{color:#ccb9ed}.observatory-page button,.observatory-page input,.observatory-page select,.observatory-page textarea{font:inherit}.observatory-page button{min-height:44px;border:1px solid var(--torus-divider);border-radius:8px;background:#201334;color:#e4d5fd;padding:9px 16px;cursor:pointer;line-height:1.3}.observatory-page button:hover{border-color:#a587ec;background:#2b1b46}.observatory-page button:disabled{opacity:.5;cursor:default}.observatory-page :focus-visible{outline:2px solid var(--torus-focus);outline-offset:3px}.observatory-page input:not([type=range]):not([type=checkbox]):not([type=file]),.observatory-page select,.observatory-page textarea{width:100%;min-width:0;min-height:40px;background:#170c29;border:1px solid #493864;border-radius:6px;padding:8px 9px;color:#f1e8ff}.observatory-page input[aria-invalid=true]{border-color:var(--torus-error)}.observatory-page input[type=range]{width:100%;accent-color:#9c77f3;padding:0;min-height:32px;cursor:pointer}.observatory-page label{display:block;font-size:14px;color:var(--torus-muted);font-weight:400}.observatory-page label>input,.observatory-page label>select{margin-top:6px}.observatory-page textarea{resize:vertical;font:12px/1.55 ui-monospace,monospace}.observatory-page small,.obs-help{font-size:12px;line-height:1.55;color:#b19fd0}.observatory-page small{display:block}.observatory-page h1,.observatory-page h2,.observatory-page h3{font-weight:450;letter-spacing:0;margin:0;color:var(--torus-text)}.observatory-page pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font:12px/1.5 ui-monospace,monospace}.observatory-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.obs-masthead{height:55px;display:flex;align-items:center;gap:28px;padding:0 29px;border-bottom:1px solid var(--torus-divider);background:#170c29;position:relative;z-index:5}.obs-brand{text-decoration:none;letter-spacing:4px;font-size:18px;white-space:nowrap}.obs-module{font-size:17px;border-left:1px solid #766594;padding-left:30px;color:#cdbbed;white-space:nowrap}.obs-research-link{margin-left:auto;font-size:12px;text-decoration:none}.obs-tagline{font-size:12px;color:#a790cd}.obs-layout{height:calc(100dvh - 55px);display:grid;grid-template-columns:312px minmax(0,1fr);grid-template-rows:minmax(0,1fr);max-width:none;margin:0;padding:0;gap:0}.obs-setup{grid-row:1/-1;min-width:0;min-height:0;overflow:auto;border-right:1px solid var(--torus-divider);background:var(--torus-panel);padding:30px 29px 0;scrollbar-width:thin;scrollbar-color:#463169 transparent}.obs-setup h2{font-size:24px;color:#d7c7f3;margin:0 0 25px}.obs-quick{padding:24px 0 22px;border-top:1px solid var(--torus-divider)}.obs-quick>label{font-size:16px;display:flex;justify-content:space-between;align-items:center}.obs-quick>label span{font-size:12px;color:#a390c1}.obs-number-range{display:flex;flex-direction:column;gap:4px;margin-top:9px}.obs-number-range input:not([type=range]){height:35px;min-height:35px!important;font-size:14px;text-align:right}.obs-quick small{font-size:11px;margin-top:5px}.obs-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.obs-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.obs-layers{border:0;border-top:1px solid var(--torus-divider);padding:18px 0;margin:0}.obs-layers label{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:16px}.obs-switch{appearance:none;width:47px;height:26px!important;min-height:26px;margin:0!important;border:1px solid #68538d;border-radius:20px;background:#332152;position:relative;cursor:pointer}.obs-switch::after{content:"";display:block;width:19px;height:19px;border-radius:50%;background:#e3d8f6;position:absolute;left:3px;top:2px;transition:transform .15s}.obs-switch:checked{background:#9b76f1;border-color:#9d77f4}.obs-switch:checked::after{transform:translateX(20px)}.obs-disclosure{border-top:1px solid var(--torus-divider);padding:11px 0;font-size:14px}.obs-disclosure summary,.obs-research-body summary{cursor:pointer;min-height:32px;line-height:32px;color:#ded0f6}.obs-disclosure>label{margin:10px 0}.obs-disclosure p{margin:10px 0}.obs-disclosure button{width:100%;margin:8px 0;font-size:12px}.obs-disclosure .obs-check{display:flex;align-items:center;gap:8px;min-height:36px}.obs-disclosure .obs-check input{margin:0;accent-color:var(--torus-accent)}.obs-small-output{max-height:240px;overflow:auto}.obs-runbar{position:sticky;bottom:0;background:var(--torus-panel);border-top:1px solid #3a2955;margin:10px -29px 0;padding:18px 29px 12px;z-index:3}.observatory-page .obs-primary{width:100%;height:52px;background:#9b76f4;color:#130825;border-color:#9b78f5;font-weight:550;font-size:15px}.observatory-page .obs-primary:hover{background:#9f7df5}.obs-runbar #runStatus{font-size:12px;color:#b09dd0;margin:9px 0 0}.obs-runbar #cancelRun{width:100%;margin-top:8px}.obs-runbar progress{width:100%;height:5px;accent-color:#9a75f6}.obs-errors{color:#ff9aae;font-size:12px;max-height:130px;overflow:auto}.obs-errors:empty{display:none}.obs-stage{grid-column:2;grid-row:1;position:relative;min-width:0;min-height:0;overflow:hidden;background:#140925}.obs-stage-title{position:absolute;top:24px;left:34px;z-index:2;pointer-events:none}.obs-stage-title h1{font-size:35px;line-height:1.25;letter-spacing:-.7px}.obs-stage-title p{margin:2px 0;color:#a28aca;font-size:16px}.obs-viewport{position:absolute;inset:0;min-height:0;background:transparent;border:0;border-radius:0;outline-offset:-4px}.obs-viewport canvas{width:100%;height:100%;display:block}.obs-stage-meta{position:absolute;left:34px;bottom:112px;right:28px;display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#ab96d1;pointer-events:none}.obs-stage-meta button{pointer-events:auto}.obs-stage-actions{position:absolute;right:26px;top:27px;display:flex;gap:8px}.obs-stage-actions button{background:#1e1034c9;font-size:12px;min-height:38px;padding:7px 12px}.obs-camera{position:absolute;bottom:49px;left:0;right:0;display:flex;justify-content:center;gap:18px;padding:0 20px}.obs-camera button{background:#1d1132dc;border-color:#483568;min-width:125px;font-size:13px;padding:12px 22px;box-shadow:0 8px 24px #0002}.obs-camera-panel{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);width:min(490px,calc(100% - 28px));padding:16px;background:#1e1230f5;border:1px solid #503b75;border-radius:8px;z-index:4;max-height:65%;overflow:auto}.obs-camera-panel button{font-size:12px;padding:8px 10px}.obs-buttonrow{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.obs-camera-panel>label{margin-top:12px}.obs-camera-panel small{margin-top:12px}.obs-layout:has(.obs-results:not([hidden])){grid-template-rows:minmax(300px,1fr) minmax(260px,34vh)}.obs-results{grid-column:2;grid-row:2;min-width:0;min-height:0;background:#180e27;border-top:1px solid #4c3b67;display:flex;flex-direction:column;z-index:6}.obs-dock-heading{display:flex;align-items:center;gap:18px;min-height:52px;padding:8px 22px;border-bottom:1px solid var(--torus-divider)}.obs-dock-heading h2{font-size:18px}.obs-dock-heading>button:last-child{margin-left:auto;font-size:12px;min-height:34px;padding:7px 12px}.obs-dock-heading>span{font:11px/1.4 ui-monospace,monospace;color:#b6a5d1;overflow-wrap:anywhere}.obs-result-tabs{display:flex;gap:3px;padding:5px 16px;border-bottom:1px solid var(--torus-divider);overflow-x:auto;flex-shrink:0}.obs-result-tabs button{border:0;background:transparent;font-size:12px;white-space:nowrap;min-height:34px;padding:7px 12px}.obs-result-tabs button[aria-pressed=true]{color:#a281f4;background:#291944}.obs-dock-body{overflow:auto;min-height:0;padding:20px 23px}.obs-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px 25px}.obs-metric{border-left:2px solid #392464;padding-left:13px}.obs-metric dt{font-size:12px;color:#ad9acd}.obs-metric dd{font-size:22px;margin:4px 0;color:#e2d5fb;font-variant-numeric:tabular-nums}.obs-metric dd span{font-size:12px;color:#b2a0d2}.obs-notice{font-size:13px;padding:12px 15px;background:#221539;border-left:2px solid #56359e;margin:12px 0}.obs-notice.error{border-color:#fb7185;color:#ffc1cf}.obs-tablewrap{max-width:100%;overflow:auto}.observatory-page table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}.observatory-page th,.observatory-page td{padding:8px 12px;border-bottom:1px solid #35254f;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}.observatory-page th{color:#bfafdc;background:#221636;position:sticky;top:0}.obs-result-plot{width:100%;max-width:620px;height:250px;display:block;background:#150c24;border:1px solid #352453}.obs-research-drawer{position:fixed;z-index:12;right:0;top:55px;bottom:0;width:min(530px,100%);background:#190e29;border-left:1px solid #564279;box-shadow:-15px 0 50px #0006;display:flex;flex-direction:column}.obs-research-body{min-height:0;overflow:auto;padding:20px 24px}.obs-research-body details{border-bottom:1px solid #3a2955;padding:10px 0}.obs-research-body label{margin:10px 0}.obs-research-body button{font-size:13px;margin:5px 0}.obs-research-body pre{padding:10px;background:#150b23;max-height:300px;overflow:auto}.obs-lablinks{display:grid;gap:12px;font-size:13px;padding:15px 0}.obs-noscript{position:fixed;bottom:0;background:#170f24;z-index:20;padding:15px}.observatory-page #nav,.observatory-page #labStartup{display:none}
/* Torus reserves its final layout in HTML. Only the view waits for first-frame readiness. */
html[data-hbf-startup]:not(:target) body.observatory-page>*:not(#labLoadingScreen),html[data-hbf-startup]:not(:target) body.observatory-page>*:not(#labLoadingScreen) *{visibility:visible!important;pointer-events:auto!important}
html[data-hbf-startup]:not(:target) body.observatory-page #observatoryViewport,html[data-hbf-startup]:not(:target) body.observatory-page #observatoryViewport *{visibility:hidden!important}
html[data-hbf-startup]:not(:target) body.observatory-page #labLoadingScreen{position:fixed;inset:150px 24px 110px 346px;min-height:0;background:#140925;z-index:4;padding:25px;overflow:auto;display:flex;align-items:center;justify-content:center;pointer-events:none!important}
.observatory-page #labLoadingScreen .lab-loading-card{max-width:460px;background:#170f24;border:1px solid #3e2b5f;box-shadow:none}.observatory-page #labLoadingScreen .lab-loading-card *{pointer-events:auto!important}.observatory-page #labLoadingScreen h1{font-size:23px}.observatory-page #labLoadingScreen .loading-brand{font-size:12px;color:#9c80d0}.observatory-page #labLoadingScreen a{font-size:12px}
@media(min-width:1280px) and (max-height:850px){.obs-setup{padding-top:22px}.obs-setup h2{margin-bottom:18px}.obs-quick{padding:16px 0}.obs-layers{padding:9px 0}.obs-layers label{min-height:42px}.obs-camera{bottom:28px}.obs-stage-meta{bottom:87px}}
@media(max-width:1279px){.obs-layout{grid-template-columns:288px minmax(0,1fr)}.obs-setup{padding-left:22px;padding-right:22px}.obs-runbar{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}.obs-tagline{display:none}.obs-stage-title{left:25px;top:25px}.obs-stage-title h1{font-size:30px}.obs-stage-title p{font-size:13px}.obs-stage-actions{top:101px;left:25px;right:auto}.obs-camera{gap:8px;padding:0 12px}.obs-camera button{min-width:0;padding:11px 14px}.obs-stage-meta{left:25px}.obs-stage-meta span{max-width:100%}html[data-hbf-startup]:not(:target) body.observatory-page #labLoadingScreen{left:310px;top:205px}}
@media(max-width:899px){body.observatory-page{overflow:auto;height:auto;min-height:100dvh}.obs-masthead{padding:0 16px;gap:15px;position:sticky;top:0}.obs-brand{font-size:14px;letter-spacing:2px}.obs-module{font-size:14px;padding-left:16px}.obs-research-link{font-size:11px}.obs-layout{height:auto;display:flex;flex-direction:column}.obs-stage{order:0;height:65dvh;min-height:420px;flex-shrink:0;width:100%}.obs-setup{order:2;overflow:visible;border-right:0;border-top:1px solid #3a2955;padding:24px;display:block}.obs-setup h2{margin-bottom:20px}.obs-setup form{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.obs-runbar{position:sticky;bottom:0;margin:15px -24px 0;padding:15px 24px;background:#170f24f7}.obs-runbar #runStatus{max-width:100%}.obs-results{order:1;min-height:330px;max-height:70dvh;overflow:auto}.obs-camera{bottom:25px;flex-wrap:wrap}.obs-stage-meta{bottom:84px;font-size:10px}.obs-stage-title h1{font-size:29px}.obs-stage-title{top:24px;left:24px}.obs-stage-actions{left:24px;top:95px}.obs-camera-panel{bottom:80px}.obs-research-drawer{top:55px}.obs-dock-heading{gap:10px;padding:8px 14px}.obs-dock-heading>span{font-size:10px}.obs-dock-body{padding:15px}html[data-hbf-startup]:not(:target) body.observatory-page #labLoadingScreen{position:absolute;inset:195px 15px auto;min-height:180px;max-height:42dvh}}
@media(max-width:479px){.obs-module{display:none}.obs-research-link{margin-left:auto}.obs-setup{padding:20px}.obs-setup form{display:block}.obs-runbar{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.obs-stage{height:61dvh;min-height:430px}.obs-stage-title h1{font-size:25px}.obs-stage-title p{max-width:260px;font-size:12px}.obs-camera button{font-size:11px;min-height:38px;padding:8px 12px}.obs-camera{gap:6px}.obs-stage-meta{bottom:120px;right:15px;left:20px}.obs-camera-panel{bottom:120px}.obs-stage-actions{top:98px}.obs-metrics{grid-template-columns:1fr 1fr}.obs-metric dd{font-size:19px}.obs-research-body{padding:15px}.obs-three{grid-template-columns:1fr}.obs-dock-heading{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.observatory-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.observatory-page .obs-viewport{width:100%;height:100%;max-width:none;max-height:none;min-width:0;margin:0;display:block}
.observatory-page .obs-layout{width:100%;max-width:none}

.observatory-page .obs-disclosure{background:transparent;border-radius:0;box-shadow:none;border-left:0;border-right:0;border-bottom:0}
.observatory-page .obs-disclosure summary{font-weight:450}

.observatory-page .obs-result-plot{height:auto;max-width:900px}

@media(min-width:900px){.obs-layout.obs-results-expanded:has(.obs-results:not([hidden])){grid-template-rows:minmax(180px,24vh) minmax(450px,1fr)}}
.obs-dock-heading #expandResults{font-size:12px;min-height:34px;padding:7px 12px;margin-left:auto;white-space:nowrap}.obs-dock-heading #closeResults{margin-left:0}
@media(max-width:899px){.obs-layout.obs-results-expanded .obs-results{max-height:none}}

/* v748: keep original playback controls visible without covering the reactor. */
.obs-camera{bottom:80px;gap:8px}.obs-camera button{min-width:0;padding:10px 15px}.obs-stage-meta{bottom:140px}.obs-camera-panel{bottom:135px}.obs-playback-readout{position:absolute;bottom:13px;left:28px;right:28px;display:grid;gap:4px;pointer-events:none;color:#d7c5e8;font:11px/1.4 ui-monospace,monospace;text-shadow:0 1px 4px #000}.obs-playback-readout #playbackMeaning{color:#b9adc9;font:11px/1.4 system-ui;max-width:800px}.obs-camera-panel .obs-check{display:flex;align-items:center;gap:8px}.obs-camera-panel .obs-check input{width:auto;min-height:0}.obs-camera-panel .obs-pair{margin:0}
@media(max-width:650px){.obs-camera{bottom:100px;flex-wrap:wrap;gap:5px}.obs-camera button{font-size:11px;padding:8px;min-height:36px}.obs-stage-meta{bottom:190px;left:20px}.obs-camera-panel{bottom:170px}.obs-playback-readout{left:18px;right:18px;bottom:12px}.obs-stage-title h1{font-size:27px}}

.observatory-page .obs-check input[type=checkbox]{width:18px!important;height:18px!important;min-height:18px!important;flex:0 0 18px;margin:0!important}.obs-stage-meta{padding:5px 7px;background:#130a1ea8;width:fit-content;max-width:calc(100% - 62px);border-radius:4px}

.observatory-page.obs-presentation-mode .obs-masthead,.observatory-page.obs-presentation-mode .obs-setup,.observatory-page.obs-presentation-mode .obs-results{display:none!important}.observatory-page.obs-presentation-mode .obs-layout{position:fixed;inset:0;height:100dvh;display:block}.observatory-page.obs-presentation-mode .obs-stage{width:100%;height:100%;min-height:100dvh}.obs-disclosure input:disabled,.obs-disclosure select:disabled{opacity:.5}

/* v749: Observatory controls in the same immersive shell as Virtual Reactor.
 * Presentation only: the scientific run and the renderer keep their contracts. */
body.observatory-page.recorded-workspace {
  --torus-bg: #090713;
  --torus-panel: #130d26;
  --torus-surface: #1b1234;
  --torus-text: #ede9f9;
  --torus-muted: #b7afd6;
  --torus-accent: #a68aff;
  --torus-focus: #c2a7ff;
  --torus-divider: #44315f;
  --workspace-header-height: 56px;
  --workspace-boundary-height: 28px;
  --workspace-timeline-height: 122px;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
}

.observatory-page.recorded-workspace .obs-layout.hbf-workspace,
.observatory-page.recorded-workspace .obs-layout.hbf-workspace.obs-results-expanded {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--workspace-header-height) var(--workspace-boundary-height) minmax(0, 1fr) var(--workspace-timeline-height);
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.observatory-page.recorded-workspace .hbf-workspace-header {
  grid-area: 1 / 1;
  min-width: 0;
  gap: 12px;
  padding: 8px 14px;
  background: #160c29;
}
.observatory-page.recorded-workspace .workspace-brand { font-size: 14px; color: #f1ebff; }
.observatory-page.recorded-workspace .workspace-tabs { scrollbar-width: thin; scrollbar-color: #644d83 transparent; }
.observatory-page.recorded-workspace .workspace-tabs button { min-height: 34px; padding: 6px 9px; font-size: 12px; background: transparent; border-color: transparent; }
.observatory-page.recorded-workspace .workspace-tabs button[aria-pressed="true"] { color: #fff; background: #714cd4; border-color: #a68aff; }
.observatory-page.recorded-workspace .workspace-utility { flex-shrink: 0; gap: 5px; }
.observatory-page.recorded-workspace .workspace-utility select { width: auto; max-width: 150px; min-height: 34px; margin: 0; font-size: 11px; }
.observatory-page.recorded-workspace .workspace-utility #quality { max-width: 114px; }
.observatory-page.recorded-workspace .workspace-utility a { white-space: nowrap; font-size: 11px; }
.observatory-page.recorded-workspace .workspace-boundary { grid-area: 2 / 1; }

.observatory-page.recorded-workspace button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  color: #ede9f9;
  border-color: #44315f;
  background: #21163b;
}
.observatory-page.recorded-workspace button:hover { background: #33234f; border-color: #a68aff; }
.observatory-page.recorded-workspace button:disabled { opacity: .5; }
.observatory-page.recorded-workspace input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
.observatory-page.recorded-workspace select,
.observatory-page.recorded-workspace textarea {
  min-height: 36px;
  padding: 7px 8px;
  background: #0b0819;
  border-color: #4d3a68;
  color: #ede9f9;
  font-size: 13px;
}
.observatory-page.recorded-workspace input[type="range"],
.observatory-page.recorded-workspace input[type="checkbox"] { accent-color: #a68aff; }
.observatory-page.recorded-workspace label { font-size: 13px; }
.observatory-page.recorded-workspace .obs-help,
.observatory-page.recorded-workspace small { color: #b7afd6; }
.observatory-page.recorded-workspace .obs-switch:checked { background: #8864dc; border-color: #b595ff; }
.observatory-page.recorded-workspace .obs-primary { width: auto; height: auto; min-height: 36px; color: #fff; background: #6d51e0; border-color: #ac92ff; font-size: 12px; }
.observatory-page.recorded-workspace .obs-primary:hover { background: #5a43b8; }

.observatory-page.recorded-workspace .obs-stage.hbf-stage.panel {
  grid-area: 3 / 1;
  position: relative;
  order: initial;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #090713;
}
.observatory-page.recorded-workspace .hbf-stage .obs-viewport { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.observatory-page.recorded-workspace .obs-stage-title { top: 18px; left: 20px; right: 190px; }
.observatory-page.recorded-workspace .obs-stage-title h1 { color: #f1ebff; font-size: 25px; line-height: 1.25; text-shadow: 0 2px 12px #000; }
.observatory-page.recorded-workspace .obs-stage-title p { max-width: 680px; font-size: 12px; color: #c4b5dc; text-shadow: 0 1px 5px #000; }
.observatory-page.recorded-workspace .obs-stage-meta {
  left: 16px;
  right: 180px;
  bottom: 12px;
  max-width: calc(100% - 200px);
  width: fit-content;
  gap: 4px 10px;
  padding: 6px 9px;
  background: #100a20c9;
  color: #c5bada;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.observatory-page.recorded-workspace #workspaceDrawer {
  position: absolute;
  z-index: 5;
  top: calc(var(--workspace-header-height) + var(--workspace-boundary-height) + 10px);
  bottom: calc(var(--workspace-timeline-height) + 12px);
  left: 12px;
  width: min(670px, calc(100% - 200px));
  max-width: calc(100% - 24px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 12px 16px;
  background: linear-gradient(145deg, #18102cf7, #0c091cf7);
  border: 1px solid #554070;
  border-radius: 12px;
  box-shadow: 0 14px 45px #0008;
  scrollbar-width: thin;
  scrollbar-color: #72548d transparent;
  scroll-padding-top: 58px;
}
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Tour"],
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Experiment"] { width: min(360px, calc(100% - 200px)); }
.observatory-page.recorded-workspace .obs-results-expanded #workspaceDrawer { width: min(1040px, calc(100% - 200px)); }
.observatory-page.recorded-workspace .workspace-panel-heading {
  position: sticky;
  order: 0;
  flex-shrink: 0;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  margin: 0 -12px 10px;
  padding: 9px 12px;
  background: #180f2b;
  border-bottom: 1px solid #44315f;
}
.observatory-page.recorded-workspace .workspace-panel-heading h2 { font-size: 17px; }
.observatory-page.recorded-workspace #closeWorkspace { margin-left: auto; flex-shrink: 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-setup,
.observatory-page.recorded-workspace #workspaceDrawer .obs-results,
.observatory-page.recorded-workspace #workspaceDrawer .obs-research-drawer {
  position: static;
  inset: auto;
  grid-area: auto;
  order: initial;
  display: block;
  width: auto;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}
.observatory-page.recorded-workspace #workspaceDrawer .obs-results { order: 1; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-setup { order: 2; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-research-drawer { order: 3; }
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Particles"] .obs-setup,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Tour"] .obs-setup,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Experiment"] .obs-setup,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Compare"] .obs-research-drawer { order: 1; }
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Particles"] .obs-results,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Compare"] .obs-results,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Tour"] .obs-research-drawer,
.observatory-page.recorded-workspace #workspaceDrawer[data-mode="Experiment"] .obs-research-drawer { order: 2; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-setup form { display: block; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-setup > h2 { margin: 8px 0 14px; font-size: 18px; color: #e0d7f2; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-quick { padding: 14px 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-quick > label { font-size: 14px; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-layers { padding: 8px 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-layers label { min-height: 40px; font-size: 14px; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-disclosure,
.observatory-page.recorded-workspace #workspaceDrawer .obs-research-body > details { margin: 0; padding: 11px 0; border-color: #44315f; scroll-margin-top: 58px; }
.observatory-page.recorded-workspace #workspaceDrawer details > :not(summary) { margin-inline: 0; max-width: 100%; }
.observatory-page.recorded-workspace #workspaceDrawer details,
.observatory-page.recorded-workspace #workspaceDrawer fieldset,
.observatory-page.recorded-workspace #workspaceDrawer .obs-pair > *,
.observatory-page.recorded-workspace #workspaceDrawer .obs-three > * { min-width: 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.observatory-page.recorded-workspace #workspaceDrawer .obs-buttonrow { flex-wrap: wrap; }
.observatory-page.recorded-workspace #workspaceDrawer button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.observatory-page.recorded-workspace #workspaceDrawer textarea,
.observatory-page.recorded-workspace #workspaceDrawer input[type="file"] { width: 100%; max-width: 100%; }
.observatory-page.recorded-workspace #workspaceDrawer summary { color: #e4dcf5; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-runbar { position: static; margin: 10px 0 0; padding: 10px 0; background: transparent; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-dock-body,
.observatory-page.recorded-workspace #workspaceDrawer .obs-research-body { min-height: 0; overflow: visible; padding: 10px 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-dock-heading { min-height: 48px; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-dock-heading h2 { font-size: 17px; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-dock-heading > span { color: #b7afd6; flex: 1 1 210px; min-width: 0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-result-tabs { padding: 6px 0; scrollbar-width: thin; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-result-tabs button { flex: 0 0 auto; max-width: none; white-space: nowrap; overflow-wrap: normal; background: transparent; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-result-tabs button[aria-pressed="true"] { color: #fff; background: #513676; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-metrics { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.observatory-page.recorded-workspace #workspaceDrawer .obs-metric { border-color: #815ab6; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-metric dt,
.observatory-page.recorded-workspace #workspaceDrawer .obs-metric dd span { color: #b7afd6; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-metric dd { color: #ece4fc; font-size: 20px; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-notice { background: #211734; border-color: #956bd0; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-notice.error { border-color: #fb7185; }
.observatory-page.recorded-workspace #workspaceDrawer th { background: #211734; color: #d4c6e8; }
.observatory-page.recorded-workspace #workspaceDrawer th,
.observatory-page.recorded-workspace #workspaceDrawer td { border-color: #38284e; }
.observatory-page.recorded-workspace #workspaceDrawer .obs-research-body pre,
.observatory-page.recorded-workspace #workspaceDrawer .obs-result-plot { background: #0b0819; border-color: #44315f; }

.observatory-page.recorded-workspace .workspace-camera {
  top: calc(var(--workspace-header-height) + var(--workspace-boundary-height) + 14px);
  right: 14px;
  bottom: auto;
  left: auto;
  width: 150px;
  max-height: calc(100% - var(--workspace-header-height) - var(--workspace-boundary-height) - var(--workspace-timeline-height) - 28px);
  display: grid;
  gap: 5px;
  padding: 0 2px 4px;
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.observatory-page.recorded-workspace .workspace-camera button { min-width: 0; min-height: 32px; padding: 7px 9px; background: #130e26e8; text-align: left; font-size: 11px; box-shadow: 0 3px 8px #0004; }
.observatory-page.recorded-workspace .workspace-camera .obs-check { display: flex; align-items: center; gap: 7px; padding: 8px; margin: 0; font-size: 11px; background: #130e26e8; border: 1px solid #44315f; border-radius: 8px; }
.observatory-page.recorded-workspace #cameraControls {
  position: absolute;
  z-index: 6;
  top: calc(var(--workspace-header-height) + var(--workspace-boundary-height) + 14px);
  right: 180px;
  left: auto;
  bottom: auto;
  transform: none;
  width: min(440px, calc(100% - 204px));
  max-height: calc(100% - var(--workspace-header-height) - var(--workspace-boundary-height) - var(--workspace-timeline-height) - 28px);
  overflow: auto;
  padding: 14px;
  background: #160e28f7;
  border-color: #685085;
  overscroll-behavior: contain;
}
.observatory-page.recorded-workspace #playbackClock.workspace-hud {
  top: calc(var(--workspace-header-height) + var(--workspace-boundary-height) + 12px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: calc(100% - 780px);
  font-size: 10px;
}

.observatory-page.recorded-workspace #workspaceTimeline {
  grid-area: 4 / 1;
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  align-self: stretch;
  justify-self: stretch;
  overflow: auto;
  padding: 8px 14px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  background: #130c22;
}
.observatory-page.recorded-workspace #workspaceTimeline .playback { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.observatory-page.recorded-workspace #workspaceTimeline .playback > button { flex: 0 0 auto; min-width: 32px; min-height: 34px; white-space: nowrap; }
.observatory-page.recorded-workspace #workspaceTimeline .playback-slider { flex: 1 1 180px; min-width: 120px; margin: 0; font-size: 10px; }
.observatory-page.recorded-workspace #workspaceTimeline .playback-slider label { font-size: 10px; margin: 0; }
.observatory-page.recorded-workspace #workspaceTimeline input[type="range"] { min-height: 24px; height: 24px; padding: 0; margin: 0; }
.observatory-page.recorded-workspace #workspaceTimeline .workspace-speed { flex: 0 0 76px; margin: 0; font-size: 10px; }
.observatory-page.recorded-workspace #workspaceTimeline .workspace-speed select { min-height: 30px; padding: 3px 6px; margin-top: 2px; font-size: 12px; }
/* The label operates the checkbox, so it is the target: keep it at the WCAG 2.2 SC 2.5.8 minimum. */
.observatory-page.recorded-workspace #workspaceTimeline .obs-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; font-size: 11px; min-height: 24px; }
.observatory-page.recorded-workspace #workspaceTimeline .timeline-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 5px; font-size: 10px; line-height: 1.35; color: #b7afd6; }
.observatory-page.recorded-workspace #workspaceTimeline #runStatus { flex: 1 1 320px; margin: 0; max-width: 100%; font-size: 10px; }
.observatory-page.recorded-workspace #workspaceTimeline #playbackMeaning { flex: 1 1 400px; }
.observatory-page.recorded-workspace #workspaceTimeline #playbackCoordinates { font: 10px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.observatory-page.recorded-workspace #workspaceTimeline #runProgress { width: 100%; height: 4px; margin: 3px 0 0; accent-color: #a68aff; }
.observatory-page.recorded-workspace #workspaceTimeline #inputErrors { max-height: 56px; }

/* Startup uses the final full-window geometry, so no old sidebar flashes. */
html[data-hbf-startup]:not(:target) body.observatory-page.recorded-workspace #labLoadingScreen {
  position: fixed;
  inset: calc(var(--workspace-header-height) + var(--workspace-boundary-height)) 0 var(--workspace-timeline-height);
  min-height: 0;
  max-height: none;
  padding: 16px;
  background: #090713;
  z-index: 31;
}
.observatory-page.recorded-workspace #labLoadingScreen .lab-loading-card { background: #160e28; border-color: #554070; }

@media (max-width: 1180px) {
  body.observatory-page.recorded-workspace { --workspace-header-height: 88px; --workspace-timeline-height: 138px; }
  .observatory-page.recorded-workspace .hbf-workspace-header { flex-wrap: wrap; align-content: center; gap: 4px 12px; }
  .observatory-page.recorded-workspace .workspace-brand { flex: 1 1 auto; }
  .observatory-page.recorded-workspace .workspace-tabs { order: 3; flex: 1 1 100%; }
  .observatory-page.recorded-workspace #playbackClock.workspace-hud { top: auto; bottom: calc(var(--workspace-timeline-height) + 15px); left: auto; right: 180px; transform: none; max-width: calc(100% - 560px); }
}

@media (max-width: 760px) {
  body.observatory-page.recorded-workspace { --workspace-timeline-height: 182px; }
  .observatory-page.recorded-workspace #workspaceDrawer,
  .observatory-page.recorded-workspace #workspaceDrawer[data-mode="Tour"],
  .observatory-page.recorded-workspace #workspaceDrawer[data-mode="Experiment"],
  .observatory-page.recorded-workspace .obs-results-expanded #workspaceDrawer { width: calc(100% - 24px); }
  .observatory-page.recorded-workspace .workspace-camera { right: 8px; width: 124px; gap: 4px; }
  .observatory-page.recorded-workspace .workspace-camera button { min-height: 32px; padding: 6px 7px; font-size: 10px; }
  .observatory-page.recorded-workspace .workspace-camera .obs-check { font-size: 10px; padding: 6px; }
  .observatory-page.recorded-workspace #cameraControls { right: 8px; width: min(440px, calc(100% - 24px)); }
  .observatory-page.recorded-workspace .obs-stage-title { left: 14px; top: 13px; right: 140px; }
  .observatory-page.recorded-workspace .obs-stage-title h1 { font-size: 22px; }
  .observatory-page.recorded-workspace .obs-stage-title p { font-size: 10px; }
  .observatory-page.recorded-workspace .obs-stage-meta { left: 10px; right: 142px; bottom: 9px; max-width: calc(100% - 152px); font-size: 9px; }
  .observatory-page.recorded-workspace #playbackClock.workspace-hud { bottom: calc(var(--workspace-timeline-height) + 9px); right: 10px; max-width: 128px; font-size: 9px; }
  .observatory-page.recorded-workspace #workspaceTimeline { padding: 7px 9px; }
  .observatory-page.recorded-workspace #workspaceTimeline .playback { gap: 5px; }
  .observatory-page.recorded-workspace #workspaceTimeline .playback > button { min-height: 32px; padding: 5px 8px; font-size: 11px; }
  .observatory-page.recorded-workspace #workspaceTimeline .playback-slider { flex-basis: 210px; }
  .observatory-page.recorded-workspace #workspaceTimeline .timeline-status { gap: 3px; font-size: 10px; }
  .observatory-page.recorded-workspace #workspaceTimeline #runStatus,
  .observatory-page.recorded-workspace #workspaceTimeline #playbackMeaning { flex-basis: 100%; }
}

@media (max-width: 560px) {
  body.observatory-page.recorded-workspace { --workspace-header-height: 118px; --workspace-boundary-height: 24px; --workspace-timeline-height: clamp(198px, 29dvh, 250px); }
  .observatory-page.recorded-workspace .hbf-workspace-header { padding: 7px 9px; gap: 4px; }
  .observatory-page.recorded-workspace .workspace-brand { flex-basis: 100%; font-size: 12px; }
  .observatory-page.recorded-workspace .workspace-utility { order: 2; flex: 1 1 100%; min-width: 0; }
  .observatory-page.recorded-workspace .workspace-utility select,
  .observatory-page.recorded-workspace .workspace-utility #quality { flex: 1; width: 0; max-width: none; min-height: 29px; padding: 4px; font-size: 10px; }
  .observatory-page.recorded-workspace .workspace-utility a { font-size: 10px; }
  .observatory-page.recorded-workspace .workspace-tabs button { min-height: 31px; padding: 5px 8px; font-size: 11px; }
  .observatory-page.recorded-workspace .workspace-boundary { padding: 4px 9px; font-size: 10px; }
  .observatory-page.recorded-workspace #workspaceDrawer { left: 8px; max-width: calc(100% - 16px); width: calc(100% - 16px); padding-left: 10px; padding-right: 10px; }
  .observatory-page.recorded-workspace .workspace-panel-heading { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .observatory-page.recorded-workspace #workspaceTimeline .playback-slider { flex: 1 1 100%; order: 2; }
  .observatory-page.recorded-workspace #workspaceTimeline .workspace-speed,
  .observatory-page.recorded-workspace #workspaceTimeline .obs-check { order: 3; }
  .observatory-page.recorded-workspace #workspaceTimeline .workspace-speed { display: flex; align-items: center; gap: 8px; flex: 0 1 154px; white-space: nowrap; }
  .observatory-page.recorded-workspace #workspaceTimeline .workspace-speed select { min-width: 62px; margin: 0; }
  .observatory-page.recorded-workspace #workspaceTimeline .playback > button { padding: 5px 6px; min-width: 28px; font-size: 10px; }
  .observatory-page.recorded-workspace #workspaceDrawer .obs-three { grid-template-columns: 1fr; }
}

@media (max-height: 560px) and (min-width: 561px) {
  body.observatory-page.recorded-workspace { --workspace-header-height: 78px; --workspace-boundary-height: 24px; --workspace-timeline-height: 108px; }
  .observatory-page.recorded-workspace .workspace-tabs button { min-height: 28px; padding: 4px 7px; }
  .observatory-page.recorded-workspace .workspace-utility select { min-height: 29px; padding: 4px 7px; }
  .observatory-page.recorded-workspace .obs-stage-title h1 { font-size: 20px; }
  .observatory-page.recorded-workspace .workspace-camera button { min-height: 28px; padding: 5px 7px; }
}

/* Presentation closes panels while keeping playback and camera access. */
.observatory-page.recorded-workspace.obs-presentation-mode #workspaceDrawer { display: none !important; }
.observatory-page.recorded-workspace.obs-presentation-mode .obs-stage.hbf-stage.panel { min-height: 0; height: 100%; }

@media print {
  body.observatory-page.recorded-workspace { height: auto; overflow: visible; }
  .observatory-page.recorded-workspace .obs-layout.hbf-workspace { position: static; display: block; height: auto; overflow: visible; }
  .observatory-page.recorded-workspace .hbf-workspace-header,
  .observatory-page.recorded-workspace .workspace-boundary,
  .observatory-page.recorded-workspace .obs-stage.hbf-stage.panel,
  .observatory-page.recorded-workspace .workspace-camera,
  .observatory-page.recorded-workspace #workspaceTimeline,
  .observatory-page.recorded-workspace #cameraControls,
  .observatory-page.recorded-workspace #playbackClock { display: none !important; }
  .observatory-page.recorded-workspace #workspaceDrawer { position: static; width: 100% !important; max-width: none; overflow: visible; display: block !important; }
  .observatory-page.recorded-workspace #workspaceDrawer [hidden] { display: block !important; }
  .observatory-page.recorded-workspace .workspace-panel-heading { position: static; }
}