/* Semantic surfaces shared by the workstation and navigation overlay. */
:root{--bg:#08141d;--surface:#10222e;--surface-raised:#203844;--border:#2a414e;--text:#e4edf0;--text-muted:#a5bac5;--accent:#57ddbc;--accent-soft:#132b36;--success:#78ebc8;--warning:#ffd19c;--error:#ff958e}
:root[data-theme=light]{--bg:#f0f5f7;--surface:#fff;--surface-raised:#e6eff2;--border:#78929d;--text:#172f3c;--text-muted:#365362;--accent:#087764;--accent-soft:#e0f2ee;--success:#146747;--warning:#8d420b;--error:#a5302c}
:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text);font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:76px;border-bottom:1px solid #263a45;display:flex;align-items:center;gap:32px;padding:0 max(28px,calc((100vw - 1200px)/2))}.brand{font-size:24px;font-weight:800;text-decoration:none;color:#f1f6f8;letter-spacing:-1px}.brand span{color:#57ddbc}.course,.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;color:#82b8bb}.badge{margin-left:auto;border:1px solid #344b57;border-radius:30px;padding:7px 12px;font-size:12px;color:#b4c7cf}main{max-width:1256px;padding:30px 28px;margin:auto}.intro{margin-bottom:26px}.intro h1{font-size:36px;letter-spacing:-1.3px;margin:7px 0}.intro>p:last-child{color:#a5bac5;margin:10px 0}.lab-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:20px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#adbec7;font-size:12px}.panel-head h2{font-size:14px;margin:0;color:#e4edf0}.mission{padding:23px}.mission h2{font-size:23px;letter-spacing:-.5px}.mission p,.mission li{font-size:14px;line-height:1.65;color:#c0ced6}.mission ol{padding-left:21px}.mission li{padding:4px 0 4px 5px}.hint-box{border-top:1px solid var(--border);padding-top:16px;margin-top:20px}#hints p{border-left:2px solid #57ddbc;padding-left:12px;overflow-wrap:anywhere}.world .panel-head{padding:19px 20px}.world svg{width:100%;display:block}.telemetry{display:flex;justify-content:space-around;gap:12px;padding:17px 12px;border-top:1px solid var(--border);font:12px ui-monospace,monospace;color:#9bb3bf}.telemetry strong{color:#e4edf0;display:block;margin-top:7px}.world-note{font-size:12px;line-height:1.6;color:#a5bac5;margin:0;padding:0 20px 17px}.terminal{margin-top:20px;background:#07121b}.terminal .panel-head{padding:16px 20px;background:#142633}.terminal pre{height:174px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:18px 20px;font:13px/1.65 ui-monospace,SFMono-Regular,monospace;color:#d2e1e8}.terminal form{display:flex;align-items:center;gap:12px;margin:0 20px;border-top:1px solid #263a45;padding-top:12px}.terminal label{color:#57ddbc;font-weight:bold}.terminal input{min-width:0;flex:1;background:transparent;border:0;color:#edf4f6;font:13px ui-monospace,monospace;padding:12px 4px}.terminal-tip{font-size:11px;color:#97aeba;padding:0 20px 5px}button{font-size:13px;font-weight:600;font-family:inherit;background:var(--surface-raised);color:#e4edf0;border:1px solid #415d6b;border-radius:7px;padding:11px 16px;min-height:42px;cursor:pointer}button:hover{background:#2e4b58}button:disabled{opacity:.5;cursor:default}.primary{background:#57ddbc;color:#082c2b;border-color:#57ddbc}.primary:hover{background:#8ae9d1}:focus-visible{outline:3px solid #81e9d1;outline-offset:3px}.actions{display:flex;align-items:center;gap:12px;margin:20px 0}.actions p{margin-right:auto;color:#acc4cb;font-size:13px}#feedback{border:1px solid #476477;border-radius:10px;padding:14px 22px;background:#132b36;margin-bottom:20px}#feedback p{margin:9px 0;font-size:14px}.pass{color:var(--success)}.fail{color:var(--warning)}.about{color:#a9bec9;font-size:12px;line-height:1.7;border-top:1px solid #253b47;padding:18px 0}.about summary{cursor:pointer}footer{font-size:11px;color:#97aeba;display:flex;justify-content:space-between;gap:14px;padding:15px 0}a{color:#85ddcd}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:850px){.lab-grid{grid-template-columns:1fr}.course{display:none}.intro h1{font-size:30px}main{padding:22px 16px}header{padding:0 16px}.terminal .panel-head{flex-wrap:wrap}.actions{flex-wrap:wrap}.actions p{width:100%}footer{flex-wrap:wrap}}

.terminal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}.terminal-toolbar h2{font-size:18px;margin-bottom:6px}.terminal-toolbar p,.terminal-guide{color:#adc3cc;font-size:13px;line-height:1.7}.terminal-guide code{color:#8ee4ce;overflow-wrap:anywhere}#terminals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.terminal{min-width:0}.terminal .panel-head{flex-wrap:wrap;gap:8px}.terminal h3{font-size:14px;margin:0 auto 0 0}.terminal .session-state{font-size:12px}.terminal pre{height:220px}.terminal input[readonly]{color:#9cb0ba}.terminal .panel-head button{padding:8px 10px}.terminal-workspace .terminal{margin-top:0}@media(max-width:1000px){#terminals{grid-template-columns:1fr}}

#preferences{display:flex;gap:8px;align-items:center;margin-left:auto}#preferences select{font:inherit;padding:8px;background:var(--surface-raised);color:#e4edf0;border:1px solid #52717d;border-radius:6px;min-height:42px}header{height:auto;min-height:76px;flex-wrap:wrap;padding:14px 24px;gap:16px}.session-nav{display:flex;gap:12px;align-items:center;max-width:1500px;margin:auto;padding:12px 28px}.session-nav a{padding:8px 14px;border:1px solid #456170;border-radius:6px;text-decoration:none}.workbench{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.workbench-code,.workbench-sensors{display:flex;flex-direction:column;gap:18px;min-width:0}.workbench .camera-panel canvas{max-width:320px}.workbench .graph-panel pre{max-height:160px}body[data-layout=split] main{max-width:1540px}body[data-layout=stack] .workbench{grid-template-columns:1fr}body[data-layout=stack] .workbench-sensors{display:grid;grid-template-columns:1fr 1fr}.about pre{overflow:auto;padding:12px;border:1px solid #52717d}.workbench .world-panel canvas{max-height:264px;object-fit:contain}.workbench .panel-head{flex-wrap:wrap}.actions{position:sticky;bottom:0;background:#10222ef5;border:1px solid #415d6b;padding:12px;border-radius:8px;z-index:2}
:root[data-theme=light]{color-scheme:light;background:#f0f5f7;color:#172f3c}:root[data-theme=light] .panel,:root[data-theme=light] .actions{background:#fff;color:#172f3c}:root[data-theme=light] .brand,:root[data-theme=light] .panel-head h2{color:#172f3c}:root[data-theme=light] .brand span{color:#087764}:root[data-theme=light] .mission p,:root[data-theme=light] .mission li,:root[data-theme=light] p,:root[data-theme=light] .about,:root[data-theme=light] footer,:root[data-theme=light] .panel-head{color:#365362}:root[data-theme=light] a,:root[data-theme=light] .eyebrow,:root[data-theme=light] .course{color:#09695d}:root[data-theme=light] button,:root[data-theme=light] select,:root[data-theme=light] #preferences select{background:#e6eff2;color:#183c48;border-color:#78929d}:root[data-theme=light] .primary{background:#a2ebd5;color:#123c33}:root[data-theme=light] #python-code,:root[data-theme=light] #python-output,:root[data-theme=light] .terminal{background:#f8fbfc;color:#183440}:root[data-theme=light] .terminal pre,:root[data-theme=light] .terminal input{color:#183440}:root[data-theme=light] .terminal .panel-head{background:#e0ecf0}:root[data-theme=light] #feedback{background:#fff}:root[data-theme=light] .pass{color:#146747}:root[data-theme=light] .fail{color:#8d420b}:root[data-theme=light] .graph-panel pre{color:#254c5b}:root[data-theme=light] .terminal-guide code{color:#09695d}@media(max-width:950px){.workbench{grid-template-columns:1fr}body[data-layout=stack] .workbench-sensors{display:flex}.actions{position:static}#preferences{margin-left:0}.session-nav{flex-wrap:wrap}}

.session-nav a[aria-current=page]{background:#57ddbc;color:#082c2b;font-weight:700}.runtime-note{font-size:12px;color:#adc3cc}.reference-page{max-width:1000px!important}.reference-page>.panel{margin:20px 0}.reference-page pre{overflow:auto}.reference-page p{line-height:1.65}footer nav{display:flex;flex-wrap:wrap;gap:14px}.intro h1{font-size:30px}.intro .eyebrow{margin-bottom:4px}

body:not([data-session]) main{padding-top:16px}body:not([data-session]) .intro{margin-bottom:18px}body:not([data-session]) .intro p{margin:6px 0;font-size:13px}.world svg{max-height:260px}.lab-grid .mission{padding:18px}.lab-grid .mission h2{margin:14px 0}.lab-grid .mission li{padding-top:2px;padding-bottom:2px}:root[data-theme=light] .telemetry,:root[data-theme=light] .telemetry strong{color:#244957}

/* KineNest: the supplied teal/slate identity, shared by all static pages. */
:root{--brand-teal:#20b49a;--brand-ink:#084957}.brand{display:inline-flex;align-items:center;gap:9px;letter-spacing:-.8px;white-space:nowrap}.brand img{object-fit:contain}.brand span{color:inherit}.brand span::first-letter{color:inherit}footer{flex-wrap:wrap;align-items:center}footer .attribution{flex-basis:100%;margin:0;line-height:1.8;color:#aabec5}footer .attribution svg{vertical-align:-2px;margin-right:4px}.brand-full{display:block;width:min(360px,100%);height:auto;border-radius:12px;margin:0 0 22px}.reference-page .brand-full{float:right;margin:0 0 20px 24px;width:260px}[data-theme="light"] footer .attribution{color:#38565d}[data-theme="light"] .brand{color:var(--brand-ink)}@media(max-width:800px){.reference-page .brand-full{float:none;margin:0 0 20px;width:220px}header{gap:12px}.brand{font-size:21px}.brand img{width:30px;height:30px}}

.language-control{position:relative;display:inline-flex;align-items:center}.language-control #language{width:92px;color:transparent;cursor:pointer}.language-control #language option{color:#e4edf0;background:#10222e}#language-current{position:absolute;left:12px;pointer-events:none;font-size:12px;white-space:nowrap}[data-theme="light"] .language-control #language{color:transparent}[data-theme="light"] .language-control #language option{color:#183a42;background:#fff}

[hidden]{display:none!important}

/* Keep native keyboard/select behavior; draw the compact label once, including color emoji. */
#preferences .language-control{background:var(--surface-raised);border:1px solid #52717d;border-radius:6px;min-height:42px}#preferences .language-control #language{opacity:0;width:90px;border:0;min-height:40px}#preferences .language-control:focus-within{outline:2px solid #57ddbc;outline-offset:3px}:root[data-theme=light] #preferences .language-control{background:#e6eff2;border-color:#78929d;color:#183c48}

/* One palette for SVG worlds, Canvas worlds and spatial TF overlays. */
:root{
  --world-background:#0b1b25;
  --world-grid:#243c48;
  --world-boundary:#517381;
  --world-obstacle:#899aa8;
  --world-rays:#3b7969;
  --world-goal:#ffe490;
  --world-robot:#57ddbc;
  --world-heading:#163d48;
  --world-text:#aac0c9;
  --world-origin:#69838e;
  --frame-x:#ff8479;
  --frame-y:#81db93;
  --frame-text:#ffffff;
  --frame-leader:#dae8ef;
  --frame-vector:#f7de8c;
}
:root[data-theme=light]{
  --world-background:#ffffff;
  --world-grid:#d5e0e5;
  --world-boundary:#718996;
  --world-obstacle:#687f8c;
  --world-rays:#459880;
  --world-goal:#8a6100;
  --world-robot:#087b69;
  --world-heading:#ffffff;
  --world-text:#284652;
  --world-origin:#526f7d;
  --frame-x:#b2332b;
  --frame-y:#17692f;
  --frame-text:#183440;
  --frame-leader:#526f7d;
  --frame-vector:#8a6100;
}
.world-background{fill:var(--world-background)}
.world-grid{stroke:var(--world-grid)}
.world-caption{fill:var(--world-text)}
.world-origin{fill:var(--world-origin)}
.robot-body{fill:var(--world-robot)}
.robot-heading{stroke:var(--world-heading)}
#trail{stroke:var(--world-robot)}
#map{background:var(--world-background)}

/* The logo follows the explicit application theme, including manual overrides. */
.brand-full img{display:block;width:100%;height:auto}.brand-full .logo-light{display:none}[data-theme="light"] .brand-full .logo-light{display:block}[data-theme="light"] .brand-full .logo-dark{display:none}.reference-page .brand-full{width:min(340px,40%)}.support-link{display:inline-flex;align-items:center;gap:5px}.support-link svg{flex:none;width:17px;height:17px}footer nav{display:flex;flex-wrap:wrap;gap:6px 14px}@media(max-width:800px){.reference-page .brand-full{width:min(300px,100%)}}

/* Narrow controls may wrap; never hide document overflow to mask clipping. */
#preferences{max-width:100%;flex-wrap:wrap}
@media(max-width:600px){
  button,.session-nav a,#preferences select,#preferences .language-control,#preferences .language-control #language{min-height:44px}
  .session-nav a{display:inline-flex;align-items:center}
  .terminal input,select,#preferences select{font-size:16px}
}

.reference-page :is(p,li){overflow-wrap:anywhere}

/* Keep the session strip on one line without widening the document. */
.session-nav{flex-wrap:nowrap;overflow-x:auto;scroll-padding:12px;gap:8px}.session-nav a{flex:none;white-space:nowrap}.session-nav a[href*="real-ros.html"]{margin-left:6px;border-style:dashed}

/* Global brand lockup: the tagline remains visible at every viewport. */
header{gap:14px 24px}.brand{flex:1 1 28rem;min-width:0;white-space:normal;letter-spacing:normal;gap:12px}.brand-icon{flex:none}.brand-copy{display:flex;flex-direction:column;min-width:0;gap:2px}.brand-name{font-size:24px;font-weight:800;letter-spacing:-.6px}.brand .brand-tagline,:root[data-theme=light] .brand .brand-tagline{font-size:13px;font-weight:400;line-height:1.4;color:var(--text-muted);max-width:42rem}.welcome-page,body[data-layout] .welcome-page{max-width:1050px}.welcome{max-width:680px;padding:clamp(12px,4vh,38px) 0 20px}.welcome h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.8px;margin:0 0 20px}.welcome p{font-size:16px;line-height:1.6;color:var(--text-muted);margin:10px 0}.start-course{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:15px;font-weight:650;padding:12px 20px;border-radius:7px;border:1px solid var(--accent);margin:12px 0;min-height:46px}.welcome .course-facts,.welcome .welcome-languages{font-size:13px;margin:6px 0}.course-overview{border-top:1px solid var(--border);padding:18px 0}.course-overview h2{font-size:16px;margin:0 0 12px}.course-overview ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;padding-left:24px}.course-overview li{padding-left:5px}.course-overview a{display:block;padding:9px 0;font-size:14px;text-decoration:none}.course-overview a:hover{text-decoration:underline}@media(max-width:600px){header{padding:12px 16px;gap:10px}.brand{flex-basis:100%}.brand-name{font-size:22px}.brand .brand-tagline{font-size:12px}.welcome{padding-top:8px}.welcome h1{margin-bottom:12px}.welcome p{font-size:15px;line-height:1.5}.course-overview ol{grid-template-columns:1fr}.course-overview a{min-height:44px}.welcome-page{padding-top:16px}}

@media(max-width:600px){body:not([data-session]) .welcome-page{padding-top:8px}.welcome-page .welcome{padding-top:0}.welcome-page .welcome p{margin-top:8px;margin-bottom:8px}}

footer .footer-contact{flex-basis:100%;margin:0;line-height:1.6}footer .footer-contact a{white-space:nowrap}

.session-nav .nav-home{padding-inline:12px}