.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.camera-panel,.world-panel,.graph-panel{padding:20px}.camera-panel canvas{display:block;width:100%;max-width:480px;margin:18px auto;image-rendering:pixelated;border:1px solid #35535f}.camera-panel p,.world-panel p,#editor-help{font-size:13px;line-height:1.6;color:#adc3cc}.camera-panel label{font-size:13px}select{max-width:100%;background:#17323e;color:#eef7fa;border:1px solid #52717d;border-radius:5px;padding:10px;font:inherit}.python-panel{padding:20px}.python-panel .panel-head{margin-bottom:16px}#python-code{display:block;width:100%;height:390px;resize:vertical;background:#07131b;color:#d3ede9;padding:16px;border:1px solid #3b5663;border-radius:6px;tab-size:4;font:14px/1.6 ui-monospace,monospace;white-space:pre;overflow:auto}.python-buttons{display:flex;gap:10px;flex-wrap:wrap}#python-output{height:140px;overflow:auto;white-space:pre-wrap;background:#07131b;padding:12px;font:13px/1.5 ui-monospace,monospace}.graph-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 ui-monospace,monospace;max-height:230px;overflow:auto}.world-panel h2,.graph-panel h2{font-size:16px}.world-panel canvas{width:100%}.camera-panel .panel-head{flex-wrap:wrap}@media(max-width:850px){.vision-grid{grid-template-columns:1fr}}

#python-output:empty{height:70px}.workbench-code .mission h2{margin:12px 0}.workbench-code .mission{padding:18px}.workbench-code .mission li{padding-top:2px;padding-bottom:2px}

.secondary-panel>summary{font-size:15px;font-weight:600;cursor:pointer;padding:4px 0;min-height:32px}.secondary-panel:not([open])>:not(summary){display:none}.terminal-workspace.secondary-panel{padding:12px 18px;border:1px solid #415d6b;border-radius:8px;margin:16px 0}.course-inspector,.tf-panel{padding:18px}.course-inspector details{padding:10px 0}.course-inspector pre{white-space:pre-wrap;font:13px/1.5 ui-monospace,monospace}.tf-panel h2{font-size:17px;margin:0 0 14px}.tf-help{font-size:12px;line-height:1.5}.tf-stage{position:relative}.tf-stage canvas{display:block;max-height:none!important;width:100%}.tf-stage>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.frame-controls{border:0;border-top:1px solid #456170;margin:10px 0 0;padding:8px 0;display:flex;flex-wrap:wrap;gap:10px;font:12px ui-monospace,monospace}.frame-controls legend{font:13px system-ui}.frame-controls label{display:flex;gap:4px;align-items:center}.frame-controls input,.tf-panel input{width:18px;height:18px;accent-color:#19876f}.axis-x{stroke:#ff8479;stroke-width:2;fill:none}.axis-y{stroke:#81db93;stroke-width:2;fill:none}.axis-label,.frame-label{fill:#fff;paint-order:stroke;stroke:#0b1b25;stroke-width:3px;font:12px ui-monospace,monospace}.frame-label{font-size:11px}.frame-dot{fill:#fff}.frame-leader{stroke:#dae8ef;stroke-width:1}.tf-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tf-selectors label{font-size:13px}.tf-selectors select{display:block;width:100%;margin-top:6px;font:13px ui-monospace,monospace}.tf-values{display:grid;grid-template-columns:1fr 1fr;gap:10px;font:12px ui-monospace,monospace}.tf-values div{min-width:0}.tf-values dt{color:#a9c1cc}.tf-values dd{margin:5px 0;color:#eef7fa;overflow-wrap:anywhere}.tf-panel details{margin-top:15px}.tf-panel summary{cursor:pointer;min-height:30px}.tf-panel>label{font-size:13px;display:flex;align-items:center;gap:8px}#tf-hierarchy{width:100%;display:block}.tree-edge{fill:none;stroke:#83a8b7;stroke-width:2}.tree-node rect{fill:#142d39;stroke:#86b1be}.tree-node text{fill:#edf7fa;font:12px ui-monospace,monospace}.tree-node{cursor:pointer}.tree-node[aria-pressed=true] rect{stroke:#68ebc5;stroke-width:3}.tree-node:focus{outline:none}.tree-node:focus rect{stroke:#fff;stroke-width:3}#tf-vector{stroke:#f7de8c;color:#f7de8c;stroke-width:1.7;stroke-dasharray:6 4}.tf-values :is(dt,dd){user-select:text}:root[data-theme=light] .tf-values dt{color:#486170}:root[data-theme=light] .tf-values dd{color:#163a49}:root[data-theme=light] .tree-node rect{fill:#e9f2f5;stroke:#456675}:root[data-theme=light] .tree-node text{fill:#163a49}:root[data-theme=light] .tree-node[aria-pressed=true] rect{stroke:#007662}:root[data-theme=light] .tree-node:focus rect{stroke:#12364b}.workbench-sensors>.tf-panel{order:0}.workbench-sensors>.world-panel{order:-1}body[data-session="4"] .course-inspector{order:-2}.tf-panel select{max-width:100%}@media(max-width:600px){.tf-selectors{grid-template-columns:1fr}}

body[data-session] main{padding-top:16px}.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,auto);column-gap:24px;row-gap:5px;margin-bottom:18px}.intro>.eyebrow{grid-column:1;grid-row:1;margin:0}.intro>h1{grid-column:1;grid-row:2;margin:0}.exercise-picker{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:520px}.exercise-picker label{display:block;font-size:12px;margin-bottom:5px}.exercise-picker select{width:100%;font-size:13px}.workbench-sensors>.world-panel{order:0}body:not([data-session="3"]) .workbench-sensors>.world-panel{order:-1}.frame-label{font-size:14px}.axis-label{font-size:15px}.tf-values{gap:7px}.tf-help{margin:9px 0}.tf-panel{padding:16px}.tf-panel h2{margin-bottom:10px}@media(max-width:850px){.intro{grid-template-columns:1fr}.exercise-picker{grid-column:1;grid-row:3;max-width:none}}

.code-languages{display:flex;gap:6px;margin:14px 0}.code-languages button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;min-height:36px}.code-languages button[aria-pressed="true"]{border-color:#57ddbc;background:#173d43}.code-editors{display:grid;gap:14px}.code-editors[data-mode="compare"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.code-pane{min-width:0}.code-pane>label{display:block;font:12px ui-monospace,monospace;margin:8px 0;color:#adc3cb}.code-pane textarea{width:100%;min-height:360px;font:13px/1.6 ui-monospace,monospace;background:#07151e;color:#e5eff3;border:1px solid #3c5661;border-radius:5px;resize:vertical;padding:15px;tab-size:4}.code-support{font-size:12px;color:#adbec7;margin:10px 0}.code-support:empty{display:none}[data-theme="light"] .code-pane textarea{background:#fff;color:#17343e}[data-theme="light"] .code-languages button[aria-pressed="true"]{background:#d2eee7;border-color:#187966}[data-theme="light"] .code-pane>label,[data-theme="light"] .code-support{color:#38565d}.workbench:has(.code-editors[data-mode="compare"]){grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}@media(max-width:1200px){.code-editors[data-mode="compare"]{grid-template-columns:1fr}}@media(max-width:950px){.workbench:has(.code-editors[data-mode="compare"]){grid-template-columns:1fr}}

#cpp-code{height:390px;font:14px/1.6 ui-monospace,monospace;white-space:pre;overflow:auto}:root[data-theme=light] #cpp-code{background:#f8fbfc;color:#183440}

/* Match frame annotations to the world, including white surfaces in light mode. */
.axis-x{stroke:var(--frame-x)}
.axis-y{stroke:var(--frame-y)}
.axis-label,.frame-label{fill:var(--frame-text);stroke:var(--world-background)}
.frame-dot{fill:var(--frame-text)}
.frame-leader{stroke:var(--frame-leader)}
#tf-vector{stroke:var(--frame-vector);color:var(--frame-vector)}
:root[data-theme=light] .tree-edge{stroke:#567481}
.relative-arrow{fill:var(--frame-vector)}

:root[data-theme=light] #editor-help{color:#365362}
@media(max-width:600px){
  #python-code,#cpp-code,.code-pane textarea,.exercise-picker select,.tf-selectors select{font-size:16px}
  .code-languages button,.frame-controls label,.tf-panel>label,.secondary-panel>summary,.tf-panel summary{min-height:44px}
}

/* Long translated headings must not set the grid minimum on narrow screens. */
.intro>h1{min-width:0;overflow-wrap:anywhere}
@media(max-width:850px){.intro{grid-template-columns:minmax(0,1fr)}.exercise-picker{min-width:0}}