/* The Time Observatory's visual language, shared by the other experiment pages. */
body.experiment-page {
  --exp-gold:var(--lab-accent, #e9b86a); --exp-cyan:#7bc9d2; --exp-muted:#9aadb9; --exp-border:#293842;
  margin:0; padding:0; display:block; height:auto; min-height:100dvh; width:100%;
  overflow-x:hidden; overflow-y:auto; background:#0b1218; color:#e6edf0;
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  user-select:text;
}
.experiment-page [hidden] { display:none!important; }
.experiment-page .experiment { max-width:1440px; margin:0 auto; padding:32px; }
.experiment-page.standalone-lab .experiment { padding-top:48px; }
.experiment-page .experiment-header { display:block; padding:0; border:0; margin-bottom:24px; }
.experiment-page .experiment-eyebrow { color:var(--exp-gold); font-size:12px; line-height:1.4; letter-spacing:1.7px; font-weight:600; margin:0 0 8px; text-transform:uppercase; }
.experiment-page .experiment-header h1 { font:600 clamp(28px,3.6vw,40px)/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:-1.2px; margin:0 0 10px; color:#e6edf0; }
.experiment-page .experiment-header>p:last-child { font-size:16px; color:var(--exp-muted); margin:0; max-width:850px; }
.experiment-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.experiment-view { min-width:0; }
.experiment-page .experiment-card { border:1px solid var(--exp-border); border-radius:14px; background:#111b23; min-width:0; overflow:hidden; }
.experiment-page .experiment-scene-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px 0; }
.experiment-page .experiment-scene-heading h2 { margin:0; font-size:16px; font-weight:550; line-height:1.4; }
.experiment-page .experiment-scene-heading>span { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--exp-muted); }
.experiment-page .experiment-stage { position:relative; min-width:0; padding:12px; overflow:hidden; background-color:#111b23; background-image:linear-gradient(var(--scene-grid, #7bc9d21f) 1px,transparent 1px),linear-gradient(90deg,var(--scene-grid, #7bc9d21f) 1px,transparent 1px); background-size:30px 30px; background-position:20px 20px; }
.experiment-page .experiment-stage>canvas { display:block; position:static; width:100%; max-width:100%; height:auto; max-height:none; margin:0 auto; border:0; border-radius:0; background:transparent; box-shadow:none; object-fit:contain; }
.experiment-page .experiment-stage.is-3d { height:clamp(360px,46vw,610px); padding:0; }
.experiment-page .experiment-stage.is-3d>canvas { width:100%; height:100%; object-fit:fill; }
.experiment-page #manifold-stage { position:relative; inset:auto; }
.experiment-page .experiment-scene-note { font-size:13px; line-height:1.7; color:var(--exp-muted); margin:0; padding:10px 20px 18px; }
.experiment-page .experiment-readouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.experiment-page .experiment-readout-card { padding:18px 20px; }
.experiment-page .experiment-readouts>article:only-child { grid-column:1/-1; }
.experiment-page .experiment-readout-card .experiment-eyebrow { font-size:12px; color:var(--exp-cyan); letter-spacing:1.2px; }
.experiment-page .readout,.experiment-page #stat,.experiment-page #status,.experiment-page #trip,.experiment-page #info,.experiment-page #clock,.experiment-page #counts,.experiment-page #crit,.experiment-page #log {
  position:static; display:block; margin:0; padding:0; border:0; background:transparent;
  font:13px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace; color:#d1dce3;
  white-space:pre-line; overflow-wrap:anywhere; box-shadow:none;
}
.experiment-page .experiment-controls#panel,.experiment-page .experiment-controls {
  position:static; inset:auto; width:auto; min-width:0; max-width:none; height:auto; min-height:0; max-height:none;
  overflow:visible; display:block; flex:none; padding:24px; border:1px solid var(--exp-border); border-radius:14px;
  background:#111b23; color:#d1dce3; box-sizing:border-box; z-index:auto;
}
.experiment-page .experiment-controls h2 { font-size:22px; line-height:1.25; letter-spacing:-.4px; margin:0 0 22px; color:#e6edf0; }
.experiment-page .experiment-controls h3 { font-size:16px; margin:18px 0 10px; }
.experiment-page .experiment-controls label { display:block; font-size:14px; line-height:1.7; margin:18px 0 6px; color:#c7d4dd; }
.experiment-page .experiment-controls label b,.experiment-page .experiment-controls output { color:var(--lab-accent, var(--accent, #f2cb8e)); font-weight:500; font-family:ui-monospace,monospace; }
.experiment-page .experiment-controls input[type=range] { display:block; width:100%; margin:8px 0 14px; min-height:28px; accent-color:var(--exp-gold); }
.experiment-page button,.experiment-page select,.experiment-page input[type=number] { min-height:42px; border:1px solid #344653; border-radius:8px!important; background:#182630; color:#dce6ed; font:14px/1.4 ui-sans-serif,system-ui,sans-serif; padding:9px 12px; cursor:pointer; box-shadow:none; text-transform:none; }
.experiment-page button:hover { background:#223340; filter:none; border-color:#698491; }
.experiment-page button:focus-visible,.experiment-page summary:focus-visible,.experiment-page input:focus-visible,.experiment-page select:focus-visible { outline:2px solid var(--exp-cyan); outline-offset:3px; }
.experiment-page button.on,.experiment-page button[aria-pressed=true] { color:var(--lab-accent, var(--accent, #f2cb8e)); border-color:var(--lab-accent, var(--accent, #987c4b)); background:#28251f; }
.experiment-page button.experiment-primary { background:var(--exp-gold); border-color:var(--exp-gold); color:#172029; font-weight:550; }
.experiment-page .btns,.experiment-page .lab-keypad,.experiment-page #controls,.experiment-page .experiment-button-group { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:7px; margin:14px 0; font-size:13px; color:var(--exp-muted); }
.experiment-page .btns button,.experiment-page .lab-keypad button { margin:0; font-size:13px; flex:1 1 auto; }
.experiment-page .btns .full { flex-basis:100%; }
.experiment-page .toggles { border-top:1px solid var(--exp-border); margin-top:18px; padding-top:4px; }
.experiment-page input[type=checkbox] { accent-color:var(--exp-gold); width:16px; height:16px; vertical-align:middle; margin-right:7px; }
.experiment-page select { width:100%; min-width:0; }
.experiment-page .experiment-explanation { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:24px; margin-top:20px; align-items:start; }
.experiment-page .experiment-explanation h2 { font-size:21px; line-height:1.4; margin:0 0 12px; color:#e6edf0; }
.experiment-page .experiment-explanation p:not(.experiment-eyebrow) { font-size:15px; line-height:1.85; color:#afc0cc; margin:10px 0; }
.experiment-page .experiment-model-slot { min-width:0; }
.experiment-page .world-model-notes { margin:0; border:0; border-radius:0; background:transparent; }
.experiment-page .world-model-notes>summary { padding:8px 0; font-size:14px; min-height:44px; }
.experiment-page .world-model-content { padding:0; max-height:none; overflow:visible; }
.experiment-page .world-model-content h2 { font-size:17px; }
.experiment-page .world-model-content h3 { font-size:14px; color:#dce6ed; }
.experiment-page .world-model-content p.world-model-equation { color:var(--lab-accent, var(--accent, #eed2a6)); font-size:14px; }
.experiment-page .experiment-controls .note,.experiment-page .explorer-note,.experiment-page .object-hint { font-size:13px; line-height:1.75; color:var(--exp-muted); }
.experiment-page .object-section { margin:22px 0; padding:20px 0; border-color:var(--exp-border); }
.experiment-page .object-section h2 { font-size:18px; margin:0 0 14px; }
.experiment-page #objectPreview { height:190px; }
.experiment-page #modelFile { max-width:100%; font-size:13px; }
.experiment-page #modelFile::file-selector-button { min-height:40px; }
.experiment-page #modelEditor { padding:12px; background:#0d161d; border-color:var(--exp-border); }
.experiment-page #modelEditor label { font-size:13px; }
.experiment-page #modelEditor button { font-size:13px; min-height:40px; }
.experiment-page #applyObject { background:var(--exp-gold); color:#172029; }
.experiment-page .experiment-views { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.experiment-page .experiment-views button { flex:1; text-align:left; padding:14px 16px; }
.experiment-page .experiment-scenes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.experiment-page .experiment-scenes .experiment-scene-heading { padding:16px 14px 0; }
.experiment-page .experiment-scenes h2 { font-size:14px; }
.experiment-page #title-bar,.experiment-page #footer-bar { position:static; max-width:none; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; font:14px/1.7 ui-sans-serif,system-ui,sans-serif; text-align:left; pointer-events:auto; }
.experiment-page #title-bar #status-message,.experiment-page #title-bar #subtitle { font:14px/1.7 ui-sans-serif,system-ui,sans-serif; color:#c6d5de; margin:6px 0; }
.experiment-page #footer-bar>.lab-keypad { margin:0; }
.experiment-page #footer-bar .key { color:var(--exp-gold); }
.experiment-page #footer-bar>span,.experiment-page .experiment-keyboard-help { display:block; font-size:12px; color:var(--exp-muted); line-height:1.8; margin:14px 0; }
.experiment-page #hypercube-panel { position:static; inset:auto; width:auto; height:auto; max-height:none; padding:0; margin:20px 0 0; border:0; border-top:1px solid var(--exp-border); border-radius:0; background:transparent; overflow:visible; font:14px/1.6 ui-sans-serif,system-ui,sans-serif; }
.experiment-page #hypercube-panel h1 { font-size:18px; margin:20px 0 16px; }
.experiment-page #hypercube-panel label,.experiment-page #hypercube-panel select,.experiment-page #hypercube-panel button { font-size:14px; }
.experiment-page #hypercube-panel .explorer-eyebrow { display:none; }
.experiment-page #hypercube-panel details { font-size:13px; }
.experiment-page #hypercube-panel summary { font-size:14px; }
.experiment-page #tess-view-tools { justify-content:flex-start; margin:16px 0 0; }
.experiment-page #tess-view-tools button { font-size:14px!important; min-height:42px!important; }
.experiment-page #world-name { color:var(--exp-gold); font-size:14px; }
.experiment-page #zoom-name { font-size:13px; }
.experiment-page .dimension-sequence { grid-template-columns:42px minmax(0,1fr) 42px; }
.experiment-page .experiment-instruction { margin-top:20px; padding:16px; background:#0d161d; border-radius:9px; font-size:13px; color:#afc0cc; }
.experiment-page .experiment-instruction p { margin:0; }
.experiment-page .experiment-instruction strong { color:var(--exp-gold); font-size:12px; letter-spacing:1px; display:block; margin-bottom:6px; }
.experiment-page .lab-home { position:absolute; background:transparent; border:0; }
.experiment-page .experiment-cosmos { max-width:1440px; padding-bottom:0; }
.experiment-page #cosmos-stage { position:static; width:100%; min-height:700px; }
.experiment-page #cosmos-stage iframe { display:block; width:100%; height:1000px; border:0; }
.experiment-page.cosmos-embedded { min-height:0; }
.experiment-page.cosmos-embedded .experiment { padding-top:0; }
.experiment-page.cosmos-embedded .experiment-header { display:none; }
@media(min-width:1100px){.experiment-page .experiment-stage[data-square=true]>canvas{max-width:650px}}
@media(max-width:1050px){.experiment-layout{grid-template-columns:minmax(0,1fr) 300px}.experiment-page .experiment-controls{padding:20px}.experiment-page .experiment-scenes{grid-template-columns:1fr}.experiment-page .experiment-explanation{gap:20px}}
@media(max-width:760px){
  .experiment-page .experiment{padding:20px 12px}.experiment-page.standalone-lab .experiment{padding-top:48px}
  .experiment-layout{grid-template-columns:1fr;gap:12px}.experiment-page .experiment-stage{padding:6px}.experiment-page .experiment-stage.is-3d{height:370px}
  .experiment-page .experiment-scene-heading{padding:16px 14px 0}.experiment-page .experiment-scene-heading>span{display:none}.experiment-page .experiment-scene-note{padding:8px 14px 16px}
  .experiment-page .experiment-controls#panel,.experiment-page .experiment-controls{width:100%;max-height:none;padding:20px;position:static;overflow:visible}
  .experiment-page .experiment-explanation{grid-template-columns:1fr;gap:20px;padding:20px}.experiment-page .experiment-readouts{grid-template-columns:1fr}.experiment-page .experiment-readout-card{padding:16px}
  .experiment-page .experiment-views{gap:6px}.experiment-page .experiment-views button{font-size:13px;padding:11px}
  .experiment-page .experiment-scenes{grid-template-columns:1fr}.experiment-page .experiment-header>p:last-child{font-size:15px}
  .experiment-page #cv{position:static;top:auto}.experiment-page #hypercube-panel{position:static;inset:auto;height:auto;width:100%;padding:0;max-height:none}
  .experiment-page #hypercube-panel .dimension-sequence select{font-size:13px}.experiment-page .experiment-cosmos{padding-bottom:0}
}
/* Keep scenes and their first readouts together within a normal desktop viewport. */
.experiment-page .experiment-stage>canvas { max-width:min(100%,calc(var(--scene-aspect,1.4) * 480px)); }
.experiment-page .experiment-stage.is-3d { height:480px; }
.experiment-page .experiment-stage.is-3d>canvas { max-width:100%; }
.experiment-page[data-world=qubit] .experiment-scenes { grid-template-columns:minmax(0,2.7fr) minmax(0,1fr); }
.experiment-page[data-world=qubit] .experiment-scenes .experiment-scene-note { display:none; }
.experiment-page[data-world=qubit] .experiment-scenes .experiment-stage { padding-bottom:20px; }
.experiment-page[data-world=qubit] .experiment-scenes .experiment-scene-heading { min-height:58px; align-items:start; }
.experiment-page[data-world=qubit] .experiment-scenes .experiment-scene-heading>span { display:none; }
.experiment-page[data-world=wind-tunnel] .experiment-stage>canvas { --scene-aspect:2; }
@media(max-width:760px){.experiment-page .experiment-stage.is-3d{height:350px}.experiment-page[data-world=qubit] .experiment-scenes{grid-template-columns:1fr}.experiment-page[data-world=qubit] #histCanvas{max-width:220px}}
.experiment-page .experiment-keyboard-guide { margin:16px 0 0; border-top:1px solid var(--exp-border); padding-top:12px; color:var(--exp-muted); }
.experiment-page .experiment-keyboard-guide summary { color:var(--exp-cyan); cursor:pointer; font-size:13px; }
.experiment-page .experiment-keyboard-guide .key { display:inline!important; background:#1b2b35; padding:2px 5px; font-size:12px; }
.experiment-page .experiment-stage[data-square=true]>canvas { max-width:min(100%,480px); }
.experiment-page[data-world=wind-tunnel] .experiment-stage>#cv { max-width:min(100%,960px); }

/* The knot controls can be explored while the scene remains in view. */
.experiment-page #knot-advanced { border-top:1px solid var(--exp-border); margin-top:22px; padding-top:4px; }
.experiment-page #knot-slice-controls { border-top:1px solid var(--exp-border); margin-top:20px; }
.experiment-page #knot-experiment .readout { margin:0; }
@media(min-width:761px) and (min-height:800px){
  .experiment-page #knot-experiment .experiment-view { position:sticky; top:16px; }
  .experiment-page #knot-stage { height:400px; }
}

/* Give the wormhole the full scene width instead of the square-canvas cap. */
.experiment-page[data-world=wormhole] .experiment-stage>canvas { max-width:100%; touch-action:none; }