/* A shared observatory workspace, keeping the experiment in the centre. */
.education-mode #panel,.education-mode #hud,.education-mode #tip{display:none!important}
.education-open #learnCopy{display:none}
.education-open #learnTitle{font-size:22px}
#learnHero,#learnDock,#learnPanel{font-family:var(--sans,system-ui,sans-serif);color:#d5e7f1;box-sizing:border-box}
#learnHero[hidden],#learnDock[hidden],#learnPanel[hidden],#learnPanel section[hidden]{display:none!important}
#learnHero{position:absolute;z-index:3;top:22px;left:26px;right:305px;pointer-events:none;display:flex;align-items:center;gap:30px}
.learn-intro{max-width:430px;flex:1;min-width:0}#learnKicker{font:9px var(--mono,monospace);letter-spacing:.16em;color:#9bdcd9}
#learnTitle{margin:9px 0 7px;font-size:clamp(20px,2.3vw,34px);font-weight:550;line-height:1.08;letter-spacing:-.05em;color:#edf8fa}
#learnCopy{margin:0;color:#94b1c3;font-size:12px;line-height:1.5;max-width:46ch}
#learnMetrics{display:grid;grid-template-columns:repeat(2,minmax(86px,1fr));gap:13px 20px;flex:0 1 280px}#learnMetrics div{min-width:0;border-left:1px solid #58999d5c;padding-left:11px}#learnMetrics span{display:block;font-size:9px;color:#8ea7b9;margin-bottom:5px}#learnMetrics strong{display:block;font:11px var(--mono,monospace);color:#d7edea;overflow-wrap:anywhere}
#learnDock{position:absolute;z-index:8;bottom:12px;left:16px;right:16px;border:1px solid #365264;border-radius:16px;background:linear-gradient(115deg,#102430f5,#091722f5);box-shadow:0 6px 30px #0005;padding:12px 14px;backdrop-filter:blur(16px)}
#learnExperiments{display:flex;gap:8px}#learnExperiments button{flex:1;min-height:48px;text-align:left;display:flex;align-items:center;gap:10px;background:#112b3b;border:1px solid #2e4b60;color:#a5bfcd;border-radius:9px;padding:9px 13px;font:12px var(--sans);cursor:pointer;white-space:nowrap}
#learnExperiments button>span{font-size:24px;color:#8cc5cf;line-height:1;width:25px;text-align:center}
#learnExperiments button[aria-pressed=true]{background:#214651;border-color:#7bb7bb;color:#eefdfb;box-shadow:inset 0 1px #b7ffff22}#learnExperiments button[aria-pressed=true]>span{color:#c0f3ec}
.learn-watch{display:flex;align-items:baseline;gap:12px;margin:10px 2px}.learn-watch>span{font:8px var(--mono);letter-spacing:.1em;color:#e0bc8c;flex:none}.learn-watch>p{font:11px/1.5 var(--sans);color:#a8c0cf;margin:0}
.learn-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #64899d2e;padding-top:10px}.learn-transport,.learn-tabs{display:flex;gap:6px;min-width:0}
#learnDock .learn-toolbar button,#learnDock select,#learnPanel button,#learnPanel select{min-height:44px;border:1px solid #3b5c6f;border-radius:8px;background:#132d3e;color:#c4dde9;font:11px var(--sans);padding:8px 12px;cursor:pointer}
#learnPlay{min-width:85px;background:#a9ded6!important;color:#0d302f!important;font-weight:650!important}
#learnDock button:hover,#learnPanel button:hover{border-color:#9bd7d2;background:#284b5d}
.learn-tabs button[aria-expanded=true]{color:#e7faf6!important;border-color:#93cbc6!important;background:#2b555e!important}
#learnPanel{position:absolute;z-index:9;left:16px;right:16px;bottom:190px;display:flex;flex-direction:column;border:1px solid #3c596b;border-radius:14px;background:#0b1e2df7;box-shadow:0 -6px 30px #0004;overflow:hidden;backdrop-filter:blur(16px)}
#learnPanel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 15px;border-bottom:1px solid #52738738;flex:none}#learnPanel>header span{color:#7da4b9;font:8px var(--mono);letter-spacing:.1em}#learnPanelTitle{font:550 15px var(--sans);margin:3px 0 0}#learnPanelTitle:focus{outline:none}#learnPanel #learnClose{font-size:22px;min-width:44px;padding:0}
#learnPanelBody{overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;min-height:0;scrollbar-width:thin;scrollbar-color:#365368 transparent}
.learn-quick{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:24px}.learn-settings,.learn-sliders,.learn-checks{display:grid;align-content:start;gap:10px;min-width:0}.learn-select{display:grid;gap:7px;font-size:10px;color:#91b5c9}.learn-select select{width:100%;min-width:0}
.learn-range label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#a9c8da}.learn-range output{font:10px var(--mono);color:#abdedc;white-space:nowrap}
#learnPanel input[type=range]{width:100%;height:44px;padding:20px 0;box-sizing:border-box;background:linear-gradient(90deg,#447d98,#aedbd6);background-clip:content-box;border-radius:0;touch-action:pan-y;cursor:ew-resize}
#learnPanel input[type=range]:disabled{opacity:.3}#learnPanel input[type=range]::-webkit-slider-thumb{width:18px;height:18px;border:3px solid #173247;border-radius:50%;background:#b9e3e0;box-shadow:0 0 0 1px #8bbbc3}
.learn-checks label{display:flex;gap:9px;align-items:center;min-height:35px;font-size:11px;color:#aec8d9}.learn-checks input{width:19px;height:19px;accent-color:#a4dcd6}
.learn-camera{margin-top:14px;border-top:1px solid #52738738;padding-top:4px}.learn-camera summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:11px;color:#a1becf}.learn-camera .grp{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.learn-camera .grp>.lbl,.learn-camera .note{display:none}.learn-camera .slider{min-width:160px;flex:1}.learn-camera .btns{display:flex;gap:4px}.learn-camera .chk{font-size:11px}
.learn-lesson{display:grid;grid-template-columns:1fr 1fr;gap:28px}.learn-small{font:9px var(--mono);color:#85c7c8;letter-spacing:.12em}.learn-lesson h3{font-size:18px;line-height:1.3;margin:9px 0 12px;font-weight:550;color:#e2f3f6}.learn-lesson p{font-size:12px;line-height:1.7;color:#adc5d5;margin:10px 0}
#learnAnswers{display:flex;gap:8px}#learnAnswers button{flex:1;text-align:left;line-height:1.5}#learnAnswers button[aria-pressed=true]{border-color:#a5ddd8;background:#254854}#learnFeedback.answered{color:#c0e7d8}#learnLegend{display:flex;gap:8px 18px;flex-wrap:wrap}#learnLegend span{font-size:10px;line-height:1.5;display:flex;align-items:center;gap:6px}#learnLegend i{height:2px;width:16px;background:#c896ff}.gravity{background:#ffc176!important}.trail{background:#85cfe4!important}.ray-gr{background:#80cfff!important}.ray-newton{background:#ffb56d!important}.ray-ref{background:#e7fdff!important}.learn-model-note{font-size:10px!important;color:#7799af!important;border-top:1px solid #52738738;padding-top:9px}
#learnPanel .grp#ui-orbit,#learnPanel .grp#ui-lens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px!important}#learnPanel .grp.hidden{display:none!important}#learnPanel #ui-orbit>hr,#learnPanel #ui-lens>hr{display:none}#learnPanel .grp>.grp{display:grid;gap:10px;min-width:0}#learnPanel .seg,#learnPanel .chips{display:flex;flex-wrap:wrap;gap:4px}#learnPanel .seg button,#learnPanel .chips button{flex:1;padding:7px;font-size:10px}#learnPanel .btns{display:flex;gap:6px}#learnPanel .chk{display:flex;align-items:center;gap:8px;min-height:34px;font-size:11px}#learnPanel .note{font-size:11px;line-height:1.6}#learnPanel .scene-shelf{max-width:680px;margin:auto;width:100%}
#learnDock :focus-visible,#learnPanel :focus-visible{outline:2px solid #b9e9e0;outline-offset:3px}
#learnLegend .velocity{background:#7dffd0}
@media(max-width:1050px){#learnHero{right:270px;gap:14px}#learnMetrics{flex-basis:200px;gap:10px}#learnTitle{font-size:25px}.learn-tabs button{padding:8px!important;font-size:10px!important}}
@media(max-width:780px){
  #learnHero{top:68px;left:14px;right:14px;gap:10px;align-items:flex-start}.learn-intro{max-width:none}#learnTitle{font-size:22px;margin:6px 0}#learnKicker{font-size:7px;letter-spacing:.08em}#learnCopy{font-size:10px;line-height:1.4;max-width:29ch}#learnMetrics{flex:0 0 130px;gap:9px;grid-template-columns:1fr 1fr}#learnMetrics div{padding-left:6px}#learnMetrics span{font-size:8px}#learnMetrics strong{font-size:9px}
  #learnDock{left:8px;right:8px;bottom:8px;padding:9px;border-radius:12px}#learnExperiments{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#3c6e7a transparent;padding-bottom:4px}#learnExperiments button{flex:0 0 auto;font-size:10px;padding:7px 10px;gap:7px;min-height:44px}#learnExperiments button>span{font-size:20px;width:20px}.learn-watch{gap:8px;margin:6px 0}.learn-watch>span{font-size:7px}.learn-watch>p{font-size:10px;line-height:1.4}
  .learn-toolbar{flex-wrap:wrap;gap:7px;padding-top:8px}.learn-transport,.learn-tabs{width:100%}.learn-tabs button{flex:1}.learn-transport button,.learn-transport select{flex:1;min-width:0}#learnDock select{font-size:14px;padding:8px}
  #learnPanel{left:8px;right:8px;border-radius:12px}#learnPanel>header{padding:7px 10px}#learnPanel>header span{display:none}#learnPanelTitle{font-size:13px}#learnPanelBody{padding:12px}.learn-quick,.learn-lesson{grid-template-columns:1fr;gap:17px}.learn-settings{grid-template-columns:1fr 1fr;align-items:end;gap:10px}#learnPanel select{font-size:16px}.learn-checks{grid-template-columns:1fr 1fr}.learn-checks label{font-size:10px;min-height:44px}.learn-range label{font-size:11px}
  #learnPanel .grp#ui-orbit,#learnPanel .grp#ui-lens{grid-template-columns:1fr;gap:20px!important}.learn-lesson h3{font-size:16px}.learn-lesson p{font-size:11px}.learn-camera .grp{display:grid;grid-template-columns:1fr}.learn-camera .btns .btn{flex:1}
}
@media(max-width:390px){#learnMetrics{flex-basis:112px}#learnTitle{font-size:20px}#learnCopy{font-size:9px}.learn-tabs button{font-size:9px!important;padding:6px!important}.learn-settings{grid-template-columns:1fr}}
@media(max-width:600px) and (min-height:521px){#learnHero{display:block}#learnCopy{max-width:none;font-size:10px}#learnMetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}#learnMetrics strong{font-size:10px;overflow-wrap:normal}#learnMetrics span{line-height:1.4}#learnTitle{font-size:23px;max-width:30ch}.education-open #learnTitle{font-size:19px}}
@media(max-height:520px){#learnHero{top:10px;right:290px;left:16px}#learnTitle{font-size:20px}#learnCopy,#learnMetrics{display:none}#learnDock{padding:7px 10px}.learn-watch{display:none}.learn-toolbar{padding-top:6px;flex-wrap:nowrap}.learn-transport,.learn-tabs{width:auto}#learnExperiments button{min-height:38px}#learnPanel{max-height:calc(100% - 140px)!important;z-index:12}.education-open #learnHero{visibility:hidden}}