/* All activity content remains in independently scrollable, keyboard-accessible panes. */
.anim.aa-workspace{display:flex;flex-direction:column;gap:8px;height:min(690px,calc(100svh - 116px));min-height:420px;padding:10px;margin:10px 0!important;box-sizing:border-box;scroll-margin-top:0;overflow:visible;background:var(--bg);font-size:13px;line-height:1.4}
.aa-workspace *{box-sizing:border-box}.aa-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0}.aa-workspace .anim-title{flex:1;margin:0;font-size:11px;line-height:1.35}.aa-workspace button,.aa-workspace select,.aa-workspace input[type=number],.aa-workspace input[type=text]{font-size:12px;min-height:30px;padding:4px 7px}.aa-workspace .aa-expand{flex-shrink:0}.aa-settings{flex-shrink:0;max-height:94px;overflow:auto;overscroll-behavior:contain;border-bottom:1px solid var(--border);padding-bottom:5px}.aa-workspace .aa-settings .anim-opts{margin:0 0 4px;gap:5px}.aa-settings .seg{flex-wrap:wrap}.aa-settings .anim-opts>span{max-width:100%}.aa-workspace .lab{font-size:10px}
.aa-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}.aa-pane{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--border);border-radius:6px;padding:6px}.aa-stage>.aa-pane:only-child{grid-column:1/-1}.aa-workspace .aa-pane>p{font-size:12px;line-height:1.5;margin:0}.aa-workspace .aa-pane>div{margin-top:0}.aa-workspace .aa-pane canvas{width:100%;height:auto;max-height:100%;object-fit:contain}.aa-workspace .aa-pane table{font-size:11px}.aa-workspace .aa-pane td,.aa-workspace .aa-pane th{padding:4px 6px}.aa-workspace .ct{height:100%;min-height:0;gap:6px;grid-template-columns:1.2fr 1fr}.aa-workspace .ct-code{max-height:none;min-height:0;overflow:auto;font-size:12px}.aa-workspace .ct-line{white-space:pre-wrap}.aa-workspace .ct-line code{min-width:0;overflow-wrap:anywhere}.aa-workspace .ct-no{width:25px;padding-right:5px}.aa-workspace .ct-side{min-height:0;overflow:auto}.aa-workspace .ct-var{font-size:11px;padding:2px}.aa-workspace .ct-vars{padding:5px;max-height:52%;overflow:auto;flex-shrink:0}.aa-workspace .ct-out{font-size:11px;min-height:45px;max-height:none;flex:1;padding:5px}.aa-workspace .ct-extra{margin:0}.aa-workspace .ct-extra>canvas{max-height:180px}.aa-trace-stage{grid-template-columns:1.7fr 1fr}.aa-trace-stage>.aa-pane:has(>.ct){grid-row:1/-1}.aa-workspace .ct-h{font-size:9px}
.aa-transport{display:flex;flex-direction:column;gap:5px;flex-shrink:0;max-height:190px;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--border);padding-top:5px}.aa-workspace .aa-transport .anim-stats{margin:0;gap:4px}.aa-workspace .anim-stat{font-size:10px;padding:3px 6px}.aa-workspace .anim-stat b{font-size:12px}.aa-workspace .aa-transport .anim-msg{min-height:0;max-height:64px;overflow:auto;font-size:12px;line-height:1.4;margin:0}.aa-workspace .aa-transport .anim-controls{border:0;margin:0;padding:0;gap:4px;order:3}.aa-workspace .anim-count{font-size:10px}.aa-workspace .aa-scrub{flex:1 1 100px;width:100px;min-width:60px;max-width:250px;margin:0}.aa-pane .anim-controls{position:sticky;bottom:0;z-index:1;background:var(--bg);padding:5px;flex-wrap:wrap}.aa-workspace .aa-pane .anim-msg{min-height:0;font-size:12px}.aa-workspace .mx-card{aspect-ratio:1/1.4}.aa-workspace .mx-slot{font-size:18px}.aa-workspace .note-sim{font-size:11px}
.aa-dialog{position:fixed;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);max-width:none;max-height:none;margin:0;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);overflow:hidden}.aa-dialog::backdrop{background:#111b22b5}.aa-dialog .aa-workspace{height:100%;min-height:0;margin:0!important;border:0}.aa-dialog .aa-settings{max-height:100px}.aa-dialog .ct-code{font-size:13px}.aa-dialog .aa-stage{gap:10px}.aa-workspace .aa-pane:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:700px){.anim.aa-workspace{padding:7px;height:calc(100svh - 112px);min-height:480px}.aa-stage,.aa-trace-stage{grid-template-columns:1fr 1fr;gap:5px}.aa-workspace .ct{grid-template-columns:1fr}.aa-workspace .ct-code{font-size:11px;max-height:55%}.aa-workspace .ct-side{max-height:45%}.aa-workspace .anim-title{font-size:10px}.aa-workspace button{font-size:11px}.aa-workspace .aa-pane{padding:4px}.aa-settings{max-height:120px}.aa-dialog{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}}
@media print{.anim.aa-workspace,.aa-stage,.aa-transport,.aa-settings,.aa-pane{display:block;height:auto;max-height:none;overflow:visible}.aa-toolbar button,.aa-scrub{display:none}.aa-workspace .ct-code,.aa-workspace .ct-vars,.aa-workspace .ct-out{max-height:none;overflow:visible}.aa-dialog{position:static;height:auto;width:100%}}

/* Main process always gets the complete stage height. */
.aa-workspace .aa-toolbar{width:100%}.aa-workspace .anim-title{max-width:none}
.aa-stage{grid-template-rows:minmax(0,1fr);grid-auto-rows:auto}
.aa-stage>.aa-primary{grid-row:1;grid-column:1}.aa-stage>.aa-support{grid-row:1;grid-column:2}
.aa-support>*+*{margin-top:10px!important}.aa-workspace .aa-transport[hidden],.aa-workspace .aa-settings[hidden]{display:none}
.aa-primary>div:has(>canvas:only-child){height:100%}.aa-primary>canvas,.aa-primary>div>canvas:only-child{height:100%!important;max-height:100%;object-fit:contain}
.aa-workspace .ct-side{display:flex;flex-direction:column}.aa-workspace .ct-vars{max-height:45%}

.aa-workspace .anim-msg{max-width:none}.aa-workspace .aa-transport .anim-msg{max-height:84px}

.aa-stage>.aa-empty{display:none}.aa-stage:has(>.aa-empty){grid-template-columns:minmax(0,1fr)}.aa-stage:has(>.aa-empty)>.aa-pane:not(.aa-empty){grid-column:1}

@media(min-width:900px){details.anim-wrap[open]{width:min(1120px,calc(100vw - 64px));max-width:none;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box}.anim.aa-workspace{width:100%;max-width:none}}

/* Frame changes must not make browser scroll anchoring move the lesson. */
.aa-workspace,details.anim-wrap{overflow-anchor:none}

html:has(details.anim-wrap[open]){scroll-behavior:auto}

/* Keep labels with their diagrams; stack trace and support panes on phones. */
.aa-diagram-stage{grid-template-columns:minmax(0,1fr)}
.aa-diagram-stage>.aa-pane> * + *{margin-top:10px}
.aa-workspace canvas.lc{height:260px!important;max-height:none;object-fit:fill}
.aa-diagram-stage>.aa-pane>div:has(>canvas:only-child){height:auto}
@media(max-width:700px){
 .aa-stage,.aa-trace-stage{display:block;overflow:auto}
 .aa-stage>.aa-pane{height:auto;min-height:0;overflow:visible;margin-bottom:8px}
 .aa-workspace .ct{height:auto;display:grid;grid-template-columns:minmax(0,1fr)}
 .aa-workspace .ct-code{max-height:280px;font-size:12px}
 .aa-workspace .ct-side{max-height:none;overflow:visible}
 .aa-workspace .ct-vars{max-height:none}
 .aa-workspace .ct-out{max-height:180px;overflow:auto}
 .aa-workspace .anim-title{font-size:11px}
}

.aa-scrubbing *{transition:none!important}
.aa-workspace .aa-primary>div:has(>.ct){display:flex;flex-direction:column;height:100%;min-height:0}
.aa-workspace .aa-primary>div>.ct{height:260px;flex:none;min-height:220px}
.aa-workspace .aa-primary>div>.anim-controls,.aa-workspace .aa-primary>div>.anim-stats{flex-shrink:0}
.aa-workspace .aa-pane .anim-msg{max-height:84px;overflow:auto;flex-shrink:0}
@media(max-width:700px){.aa-workspace .aa-primary>div:has(>.ct){height:auto}.aa-workspace .aa-primary>div>.ct{height:auto;flex:none}}

.aa-workspace .aa-pane canvas.lc{height:260px!important;max-height:none;object-fit:fill}

@media(max-width:899px){
 details.anim-wrap[open]{width:calc(100vw - 24px);max-width:none;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box}
}
@media(max-width:700px){
 .aa-stage,.aa-trace-stage{display:flex;flex-direction:column}
 .aa-stage>.aa-pane{flex:none}
 .aa-stage>.aa-support{order:-1}
 .aa-workspace .aa-pane .anim-controls{position:static}
}

.aa-workspace .w3-fb{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}