/* Orientation first, then the experiment. Secondary controls open on request. */
#orientation-area { max-width:1700px; margin:0 auto; padding:16px 3vw 0; }
/* A reading layer over the lab, with persistent controls and no autoplay. */
#mode-introduction {
  width:min(1060px,calc(100vw - 40px)); height:min(860px,calc(100dvh - 48px));
  max-width:none; max-height:calc(100dvh - 24px); margin:auto; padding:0;
  border:1px solid #436777; border-radius:18px; background:#0d202c; color:#e6f0f3;
  box-shadow:0 28px 100px #0009; overflow:hidden;
}
#mode-introduction::backdrop { background:#030c14bd; backdrop-filter:blur(4px); }
#mode-introduction:not([open]) { display:none; }
body.intro-open { overflow:hidden; }
.intro-shell { display:flex; flex-direction:column; height:100%; min-height:0; }
.intro-header { display:flex; flex:none; justify-content:space-between; align-items:start; gap:16px; padding:20px 30px 17px; border-bottom:1px solid #2c4c5c; background:#102a36; }
.intro-header .intro-eyebrow { color:#87e0cb; font-size:.9rem; font-weight:650; margin:0 0 4px; }
.intro-header #intro-audience { font-size:.9rem; color:#b6cbd6; line-height:1.45; margin:0; }
.intro-close { flex:none; white-space:nowrap; background:#142f3c; border-color:#4c6c7c; font-size:.95rem; }
.intro-close span { font-size:1.2rem; margin-left:5px; }
.intro-scroll { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:28px 36px 32px; }
.intro-slide { max-width:890px; margin:auto; }
.intro-series-title { color:#9db9c7; font-size:.9rem; margin:0 0 6px; }
#mode-introduction h1 { font-size:clamp(1.55rem,2.6vw,2.2rem); line-height:1.2; letter-spacing:-.025em; margin:0 0 22px; color:#f0f8f8; }
#mode-introduction h2, #mode-introduction h3 { line-height:1.3; margin:24px 0 10px; }
#mode-introduction .intro-slide-copy { font-size:1rem; line-height:1.65; color:#d7e5eb; }
#mode-introduction .intro-slide-copy p { max-width:82ch; margin:0 0 16px; }
#mode-introduction .intro-slide-copy strong { color:#f0f8f8; }
#mode-introduction .intro-slide-copy ul, #mode-introduction .intro-slide-copy ol { margin:12px 0 20px; padding-left:25px; }
#mode-introduction .intro-slide-copy li { margin-bottom:9px; }
.intro-figure { margin:22px auto; padding:18px; border:1px solid #294c5d; border-radius:12px; background:#0a1924; }
.intro-figure img { display:block; width:100%; height:auto; object-fit:contain; margin:auto; }
.intro-figure figcaption { color:#b6ced7; font-size:.94rem; line-height:1.5; margin:14px 0 0; text-align:center; }
.intro-display-math { overflow-x:auto; padding:4px 0 8px; max-width:100%; }
.intro-display-math .katex-display { margin:.55em 0; }
.intro-inline-math .katex { font-size:1.1em; }
#mode-introduction .intro-footer { display:flex; flex-direction:row; flex:none; align-items:center; justify-content:space-between; gap:16px; padding:15px 28px; border-top:1px solid #315264; background:#102a36; margin:0; color:#d7e5eb; }
.intro-footer > button { min-height:43px; font-size:.96rem; }
.intro-progress { display:flex; flex-direction:column; align-items:center; gap:7px; }
#intro-slide-count { color:#bed2dc; font-size:.88rem; }
.intro-progress nav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.intro-progress button { width:29px; height:29px; padding:0; font-size:.82rem; border-radius:50%; border-color:#466879; color:#c1d7e1; background:transparent; }
.intro-progress button[aria-current="step"] { background:#98e5d1; border-color:#98e5d1; color:#0b2328; font-weight:700; }
#mode-introduction :focus-visible { outline:3px solid #a2edda; outline-offset:3px; }
#mode-introduction h1:focus { outline:none; }
.top-actions #about-button { display:inline-flex!important; align-items:center; gap:7px; }
.top-actions #about-button > span { font-size:1.15em; color:#a2e5d4; }
#tour-banner[hidden] { display:none; }
@media(max-width:650px) {
  #mode-introduction { width:calc(100vw - 16px); height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); border-radius:12px; }
  .intro-header { padding:15px 16px; gap:10px; }
  .intro-header #intro-audience { max-width:28ch; }
  .intro-close { padding:9px 10px; }
  .intro-scroll { padding:22px 20px 24px; }
  .intro-figure { padding:12px; }
  #mode-introduction .intro-footer { gap:9px; padding:12px 15px; flex-wrap:wrap; }
  .intro-progress { order:-1; flex-basis:100%; flex-direction:row; gap:13px; justify-content:center; }
  .intro-footer > button { min-width:105px; }
  .intro-progress nav { gap:7px; }
}
@media(max-width:400px) {
  .intro-header { flex-wrap:wrap; }
  .intro-close { margin-left:auto; }
  .intro-scroll { padding:20px 15px; }
  .intro-progress { gap:9px; }
  .intro-progress nav { gap:5px; }
  .intro-progress button { width:27px; height:27px; }
}
#tour-banner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; padding:11px 16px; border:1px solid #447d79; border-radius:10px; background:#113139; margin:0 0 12px; }
#tour-banner > div:first-child { display:grid; gap:4px; }
#tour-banner strong { color:#bbf4df; font-size:1rem; }
#tour-banner-step { color:#c3d7e0; font-size:.9rem; }
#tour-banner .button-row { margin:0; }
#beginner-tutorial-slot:has(> #tutorial:not([hidden])) { display:block; }
body[data-level="basic"] #beginner-tutorial-slot { padding:0; margin:0; }
#beginner-tutorial-slot > #tutorial { margin:0 0 12px; }
.header-resources { margin:0; position:relative; }
.header-resources > summary { padding:9px 11px; border:1px solid var(--line); border-radius:8px; color:#cfdee7; font-size:.85rem; }
.header-resources > div { display:flex; gap:8px; flex-wrap:wrap; padding:12px; border:1px solid #355362; border-radius:8px; background:#10232f; position:absolute; right:0; top:calc(100% + 8px); width:310px; z-index:30; box-shadow:0 8px 25px #0007; }
.top-actions .tutorial-start { font-weight:500; }
.control-disclosure { margin:0; }
.control-disclosure > summary { padding:8px 10px; border:1px solid var(--line); border-radius:7px; color:#c4d7e0; font-size:.88rem; }
.disclosure-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0 4px; }
.view-toolbar { align-items:start; flex-wrap:wrap; }
.view-options { flex-wrap:wrap; align-items:start; }
.view-options > details { max-width:100%; }
.view-options > details[open] { flex-basis:100%; }
.primary-actions { align-items:start; }
.primary-actions > details[open] { flex:1 1 260px; }
.quick-experiments { margin:0; min-width:0; border:1px solid #31505d; border-radius:10px; background:#0e212c; }
.quick-experiments > summary { padding:13px 15px; color:#d4e9ee; font-size:.95rem; }
.quick-experiments > summary span, #discover-experiments > summary span { display:block; padding-left:16px; font-size:.88rem; color:#9cb8c4; margin-top:4px; font-weight:400; }
.quick-experiments > .play-controls { margin:0; border:0; border-top:1px solid #31505d; border-radius:0 0 10px 10px; }
body:not([data-level="basic"]) .play-stage-grid,
body:not([data-level="basic"]) .play-stage-grid:not(:has(#play-controls[hidden])) { grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"stage" "controls" "legend"!important; gap:12px; }
body:not([data-level="basic"]) .play-side { display:block; grid-area:controls; }
body:not([data-level="basic"]) .play-side:has(#play-controls[hidden]) { display:none; }
body[data-level="basic"] .quick-experiments { display:contents; }
body[data-level="basic"] .quick-experiments > summary { display:none; }
body[data-level="basic"] .quick-experiments > .play-controls { border:1px solid #335563; border-radius:11px; }
body[data-level="basic"] .header-resources #play-now-button { display:none!important; }
#reading-details { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
#reading-details > summary { font-size:.9rem; color:#a8c4cf; }
#reading-details .metric-explainer { font-size:.92rem; }
.metric-pair { margin-top:14px; }
.metrics-card .metric-large { margin-bottom:8px; }
#observation { font-size:.92rem; line-height:1.6; }
#discover-experiments { margin:0; }
#discover-experiments > summary { color:#d2e6ee; font-size:1rem; font-weight:500; }
#discover-experiments[open] > summary { padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid var(--line); }
.workspace-card:has(> #discover-experiments) { padding:18px 20px; }
.timeline-heading p { display:none; }
#history-details { margin:14px 0 0; }
#history-details > summary { color:#bdd6df; font-size:.95rem; }
#encoded-state { font-size:.92rem; line-height:1.5; }
.workspace-card p, .workspace-card .small-note { font-size:.92rem; line-height:1.6; }
.workspace-card details { line-height:1.55; }
.experiment-heading .eyebrow { display:none; }
.experiment-heading { margin-bottom:16px; }
.experiment-heading h1 { font-size:clamp(1.25rem,2vw,1.6rem); }
.experiment-heading #subhead { font-size:.94rem; }
summary:focus-visible { outline:3px solid #77e1c8; outline-offset:4px; border-radius:5px; }
@media(min-width:1101px) {
  body[data-level="basic"] .quick-experiments { display:contents; }
}
@media(max-width:850px) {
  #tour-banner { align-items:start; }
}
@media(max-width:600px) {
  .header-resources { position:static; }
  .header-resources > div { position:static; width:auto; max-width:100%; margin-top:8px; }
  .view-toolbar .view-options { width:100%; }
  .disclosure-controls { align-items:start; }
  .disclosure-controls select { max-width:100%; }
  #tour-banner .button-row { width:100%; }
  #orientation-area { padding-top:12px; }
}

/* The register is an occasional construction choice, not a competing start. */
.register-picker { margin:0; position:relative; }
.register-picker > summary { padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:.85rem; color:#c5d8df; }
.register-picker > .register { position:absolute; z-index:31; top:calc(100% + 8px); right:0; width:max-content; padding:12px; background:#10232f; border:1px solid #355362; border-radius:8px; box-shadow:0 8px 25px #0007; }
.topbar { gap:12px; }
.experience-mode > span { display:none; }
.experience-mode { margin-left:auto; }
body[data-level="basic"] .register-picker { display:none; }
@media(max-width:600px) {
 .register-picker { position:static; }
 .register-picker > .register { position:static; width:auto; flex-wrap:wrap; margin-top:8px; }
 .register-picker .segmented { flex-wrap:wrap; }
}

/* Navigation shares a row where it fits; the graph gets the space it earns. */
.workspaces { flex-wrap:wrap; }
#model-label { max-width:100%; min-width:0; overflow-wrap:anywhere; }
.graph-navigation { display:flex; flex-wrap:wrap; align-items:start; gap:8px 12px; margin-bottom:12px; }
body:not([data-level="basic"]) .graph-navigation .view-toolbar { display:contents; }
.graph-navigation #view-tabs { order:1; }
.graph-navigation .primary-actions { order:2; margin:0; gap:6px; }
.graph-navigation .view-options { order:3; margin-left:auto; }
body[data-level="basic"] .graph-navigation { display:block; }
body[data-level="normal"] .beginner-comparison { padding:9px 12px; }
body[data-level="normal"] .beginner-comparison-heading { margin-bottom:6px; }
body[data-level="normal"] .beginner-group-card { padding:5px 10px; }
body[data-level="normal"] .beginner-reference-help { margin-top:5px; }
@media(min-width:850px) {
 #session-safety { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; }
 #session-safety .recovery-details { margin:0; align-self:center; }
 #session-safety .recovery-details[open], #session-safety .recovery-offer, #session-safety .recovery-error { grid-column:1/-1; }
}
@media(max-width:600px) {
 .graph-navigation .view-options { width:auto; margin-left:0; }
}

/* Prose and equations share a single reading column. */
#mode-introduction .intro-slide { max-width:min(890px,82ch); }
#mode-introduction .intro-slide-copy, #mode-introduction .intro-slide-copy p,
#mode-introduction .intro-display-math { width:100%; max-width:100%; }
#mode-introduction .intro-display-math .katex-display { text-align:center; }
.before-network-label { position:absolute; right:12px; bottom:40px; z-index:6; border:1px solid #93d9c8; border-radius:7px; padding:7px 10px; background:#102b33ed; color:#d7f7ee; font-size:.9rem; pointer-events:none; }
.before-network-label[hidden] { display:none; }

#mode-introduction .intro-return-note { max-width:82ch; margin:0 auto 18px; padding:10px 13px; border-left:3px solid #75cdb4; background:#133039; color:#cdece3; font-size:.96rem; line-height:1.5; }