:root{
  --paper:#f4f6f8;
  --panel:#ffffff;
  --ink:#16222e;
  --soft:#51606e;
  --faint:#8a97a3;
  --line:#d7dee5;
  --grid:#e7edf1;
  --pose:#1874b8;
  --pose-deep:#0d568c;
  --pose-wash:#e8f2fa;
  --map:#0e8f7e;
  --map-deep:#0a6b5e;
  --map-wash:#e3f2ef;
  --radio:#e8720c;
  --radio-deep:#b45607;
  --radio-wash:#fff3e7;
  --danger:#c22f2f;
  --stage:#091724;
  --stage-grid:#183044;
  --stage-soft:#8ba1b3;
  --serif:"Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{min-height:100vh;margin:0;color:var(--ink);background:var(--paper);font:16px/1.45 var(--sans)}
button,input,a{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid rgba(24,116,184,.55);outline-offset:2px}

.masthead{min-height:74px;padding:13px clamp(16px,2vw,30px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}
.eyebrow,.panel-kicker,.step-number{margin:0;color:var(--faint);font:700 11px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.brand-block h1{margin:4px 0 0;font:700 clamp(22px,2.2vw,31px)/1.08 var(--serif);letter-spacing:-.02em}
.project-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.project-links a{padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--soft);background:#fff;text-decoration:none;font:700 12px/1 var(--mono)}
.project-links a:hover{border-color:var(--pose);color:var(--pose-deep);background:var(--pose-wash)}

.workspace{height:calc(100vh - 112px);min-height:650px;padding:12px clamp(12px,1.4vw,22px);display:grid;grid-template-columns:minmax(250px,286px) minmax(500px,1fr) minmax(280px,340px);gap:12px}
.panel{min-width:0;min-height:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 7px 24px rgba(29,48,66,.06);overflow:hidden}

.lesson-panel{padding:16px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.scan-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--pose-deep);font:700 11px/1 var(--mono);letter-spacing:.08em}
.live-dot{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:10px}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--radio);box-shadow:0 0 0 4px var(--radio-wash)}
.step-copy{min-height:165px;padding:16px;border:1px solid var(--grid);border-radius:8px;background:linear-gradient(150deg,#fff 55%,#f7fafc)}
.step-copy h2{margin:7px 0 8px;font:700 24px/1.08 var(--serif);letter-spacing:-.012em}
.step-copy>p:not(.step-number){margin:0;color:var(--soft);font-size:14px;line-height:1.48}
.equation{margin-top:14px;padding:10px 11px;border-left:3px solid var(--radio);background:var(--radio-wash);color:var(--ink);font:600 13px/1.5 var(--mono);overflow-wrap:anywhere}
.equation .factor{color:var(--radio-deep)}
.equation .factor.prior{color:var(--pose-deep)}

.phase-rail{display:grid;gap:6px}
.phase{width:100%;min-height:45px;padding:7px 8px;display:grid;grid-template-columns:25px 72px minmax(0,1fr);align-items:center;gap:7px;border:1px solid var(--grid);border-radius:7px;background:#fff;color:var(--faint);cursor:pointer;text-align:left}
.phase>span{width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:700 10px var(--mono)}
.phase b{color:var(--soft);font-size:13px}
.phase small{font-size:11px;line-height:1.2}
.phase.complete{border-color:#c9ded9;background:#f7fbfa;color:var(--map-deep)}
.phase.complete>span{border-color:var(--map);background:var(--map);color:#fff}
.phase.complete b{color:var(--map-deep)}
.phase.active{border-color:#efb37d;background:var(--radio-wash);color:var(--radio-deep);box-shadow:inset 3px 0 0 var(--radio)}
.phase.active>span{border-color:var(--radio);background:var(--radio);color:#fff}
.phase.active b{color:var(--radio-deep)}

.controls{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px}
.button{min-height:39px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);cursor:pointer;font-size:13px;font-weight:750}
.button:hover{border-color:var(--pose)}
.button.primary{border-color:var(--pose-deep);background:var(--pose-deep);color:#fff}
.button.play{border-color:#a9cfc7;background:var(--map-wash);color:var(--map-deep)}
.button:disabled{opacity:.42;cursor:default}

.time-control{padding:12px;border:1px solid var(--grid);border-radius:8px;background:#fbfcfd}
.time-control label{display:flex;justify-content:space-between;gap:8px;color:var(--soft);font-size:13px;font-weight:700}
.time-control output{color:var(--pose-deep);font-family:var(--mono)}
.time-control input{width:100%;margin:11px 0 3px;accent-color:var(--pose)}
.time-ticks{display:flex;justify-content:space-between;color:var(--faint);font:10px/1 var(--mono)}
.model-note{margin-top:auto;padding:11px 12px;border:1px solid #cbd9e4;border-radius:8px;background:var(--pose-wash)}
.model-note strong{display:block;margin-bottom:4px;color:var(--pose-deep);font:700 10px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.model-note p{margin:0;color:var(--soft);font-size:12px;line-height:1.45}

.scene-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.panel-head{min-height:64px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:#fff}
.panel-head h2{margin:3px 0 0;font:700 19px/1.15 var(--serif)}
.panel-head.compact{min-height:49px;padding:9px 11px}
.panel-head.compact h2{font-size:17px}
.scene-stats{margin:0;display:flex;align-items:stretch;gap:5px}
.scene-stats div{min-width:64px;padding:6px 8px;border:1px solid var(--grid);border-radius:6px;background:#fbfcfd;text-align:center}
.scene-stats dt{color:var(--faint);font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.scene-stats dd{margin:4px 0 0;color:var(--ink);font:750 15px/1 var(--mono)}

.scene-wrap{position:relative;min-height:0;background:var(--stage);overflow:hidden}
.scene-wrap canvas{display:block;width:100%;height:100%;touch-action:none}
.scene-tools{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.scene-tools label{padding:6px 8px;border:1px solid rgba(139,161,179,.35);border-radius:5px;background:rgba(9,23,36,.8);color:#d9e4ec;font:650 11px/1 var(--sans);cursor:pointer;backdrop-filter:blur(4px)}
.scene-tools input{margin:0 5px 0 0;vertical-align:-1px;accent-color:var(--map)}
.orbit-hint{position:absolute;top:14px;right:14px;color:var(--stage-soft);font:10px/1 var(--mono)}
.legend{position:absolute;left:12px;right:12px;bottom:11px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:#b9c9d5;font:10px/1 var(--mono);pointer-events:none}
.legend span{display:flex;align-items:center;gap:5px}
.swatch{display:inline-block;width:16px;height:3px;border-radius:2px}
.swatch.pose{background:#4ca6e8}.swatch.radio{background:#ff9b47}.swatch.double{background:#f06d9b}.swatch.loop{height:0;border-top:2px dashed #ffd166}.swatch.prediction{height:0;border-top:2px dashed #2bc8ae}.swatch.map{background:#2bc8ae}.swatch.truth{height:0;border-top:2px dashed #718697}.swatch.bounce{width:7px;height:7px;border:2px solid #ff9b47;border-radius:50%;background:transparent}
.change-strip{min-height:58px;padding:10px 14px;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;border-top:1px solid var(--line);background:#fbfcfd}
.change-label{padding:4px 6px;border-radius:4px;background:var(--radio-wash);color:var(--radio-deep);font:700 9px/1 var(--mono);letter-spacing:.08em}
.change-strip strong{font-size:13px;white-space:nowrap}
.change-strip p{margin:0;color:var(--soft);font-size:12px;line-height:1.35}

.graph-panel{display:grid;grid-template-rows:minmax(240px,1.15fr) minmax(220px,1fr) minmax(112px,.62fr)}
.graph-section,.map-section,.activity-section{min-height:0;display:grid;overflow:hidden}
.graph-section{grid-template-rows:auto minmax(0,1fr) auto;border-bottom:1px solid var(--line)}
.graph-section canvas{display:block;width:100%;height:100%;background:#fbfcfd}
.fixed-bs{color:var(--soft);font:700 10px var(--mono)}
.graph-key{padding:6px 10px;display:flex;gap:11px;justify-content:center;border-top:1px solid var(--grid);color:var(--faint);font:10px/1 var(--mono)}
.graph-key span{display:flex;align-items:center;gap:4px}
.node{width:10px;height:10px;display:inline-block;border:2px solid;border-radius:50%;background:#fff}
.pose-node{border-color:var(--pose)}
.map-node{width:13px;height:7px;border-color:var(--map);border-radius:1px;transform:none;background:var(--map-wash)}
.factor-box{width:8px;height:8px;display:inline-block;border:1px solid var(--radio);background:var(--radio-wash)}
.factor-box.loop-factor{border-color:#c18a00;background:#fff5c2}

.map-section{grid-template-rows:auto minmax(0,1fr);border-bottom:1px solid var(--line)}
.ledger-head>span{color:var(--map-deep);font:700 11px var(--mono)}
.map-ledger{padding:7px 10px;display:grid;gap:5px;overflow:auto}
.map-row{padding:7px 8px;border:1px solid var(--grid);border-radius:6px;background:#fff}
.map-row.unseen{opacity:.48}
.map-row-head{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:7px}
.map-badge{width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--map);border-radius:4px;background:var(--map-wash);color:var(--map-deep);font:800 10px var(--mono)}
.map-row.unseen .map-badge{border-color:var(--line);background:#f4f6f8;color:var(--faint)}
.map-name strong{display:block;font-size:12px;line-height:1.1}.map-name small{color:var(--faint);font:10px/1.2 var(--mono)}
.map-confidence{color:var(--map-deep);font:700 11px var(--mono)}
.confidence-track{height:3px;margin:6px 0 1px 31px;border-radius:2px;background:var(--grid);overflow:hidden}
.confidence-track i{display:block;height:100%;border-radius:2px;background:var(--map)}

.activity-section{grid-template-rows:auto minmax(0,1fr)}
.activity-head{min-height:40px;border-bottom:1px solid var(--grid)}
.activity-head h2{margin:0;font:700 15px var(--serif)}
.activity-head span{color:var(--pose-deep);font:700 11px var(--mono)}
.activity-log{margin:0;padding:8px 12px 10px 30px;overflow:auto;color:var(--soft);font-size:11px;line-height:1.35}
.activity-log li{padding:2px 0 2px 2px}.activity-log li::marker{color:var(--radio);font-family:var(--mono)}

footer{min-height:38px;padding:7px clamp(16px,2vw,30px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);background:#fff;color:var(--faint);font-size:11px}
footer p{margin:0}footer strong{color:var(--soft)}kbd{padding:1px 4px;border:1px solid var(--line);border-radius:3px;background:#fbfcfd;font:10px var(--mono)}

@media (max-width:1180px){
  .workspace{height:auto;min-height:calc(100vh - 112px);grid-template-columns:270px minmax(500px,1fr)}
  .graph-panel{grid-column:1/-1;grid-template-columns:1.15fr 1fr .8fr;grid-template-rows:330px}
  .graph-section,.map-section{border-right:1px solid var(--line);border-bottom:0}
}

@media (max-width:820px){
  .masthead{align-items:flex-start;flex-direction:column;gap:12px}.project-links{justify-content:flex-start}
  .workspace{display:flex;flex-direction:column;padding:10px}.lesson-panel{overflow:visible}.scene-panel{min-height:650px}
  .graph-panel{display:flex;flex-direction:column}.graph-section{min-height:350px}.map-section{min-height:300px}.activity-section{min-height:190px}
  .graph-section,.map-section{border-right:0;border-bottom:1px solid var(--line)}
  footer{flex-direction:column;align-items:flex-start;gap:4px}.orbit-hint{display:none}
}

@media (max-width:520px){
  .project-links a{font-size:11px}.controls{grid-template-columns:1fr 1fr}.button.primary{grid-column:1/-1}
  .scene-panel{min-height:590px}.scene-stats div{min-width:54px;padding:5px}.scene-head{align-items:flex-start;flex-direction:column}
  .change-strip{grid-template-columns:auto 1fr}.change-strip p{grid-column:1/-1}.legend{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Embedded teaching region: keep the complete model, controls, and readouts,
   while the host article/deck owns the surrounding title and navigation. */
html.wall-live-region,html.wall-live-region body{
  width:100%;height:100%;min-width:0;min-height:0;background:transparent
}
html.wall-live-region .masthead,html.wall-live-region footer{display:none!important}
html.wall-live-region .workspace{margin:0}

html.wall-live-region[data-wall-embed="region"],
html.wall-live-region[data-wall-embed="region"] body{overflow:hidden}
html.wall-live-region[data-wall-embed="region"] .workspace{
  width:100%;height:100vh;min-height:0;padding:6px;
  display:grid;grid-template-columns:218px minmax(430px,1fr) 252px;gap:6px
}
html.wall-live-region[data-wall-embed="region"] .panel{border-radius:6px;box-shadow:none}
html.wall-live-region[data-wall-embed="region"] .lesson-panel{padding:8px;gap:6px;overflow:hidden}
html.wall-live-region[data-wall-embed="region"] .scan-kicker{font-size:8px}
html.wall-live-region[data-wall-embed="region"] .live-dot{font-size:8px}
html.wall-live-region[data-wall-embed="region"] .step-copy{min-height:0;padding:8px}
html.wall-live-region[data-wall-embed="region"] .step-copy h2{margin:3px 0 4px;font-size:15px}
html.wall-live-region[data-wall-embed="region"] .step-copy>p:not(.step-number){font-size:9px;line-height:1.28}
html.wall-live-region[data-wall-embed="region"] .equation{margin-top:6px;padding:5px 6px;font-size:8px;line-height:1.25}
html.wall-live-region[data-wall-embed="region"] .phase-rail{grid-template-columns:1fr 1fr;gap:3px}
html.wall-live-region[data-wall-embed="region"] .phase{min-height:31px;padding:3px;grid-template-columns:18px minmax(0,1fr);gap:3px}
html.wall-live-region[data-wall-embed="region"] .phase>span{width:17px;height:17px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .phase b{font-size:9px}
html.wall-live-region[data-wall-embed="region"] .phase small{display:none}
html.wall-live-region[data-wall-embed="region"] .controls{gap:3px}
html.wall-live-region[data-wall-embed="region"] .button{min-height:27px;padding:2px;font-size:9px}
html.wall-live-region[data-wall-embed="region"] .time-control{padding:6px}
html.wall-live-region[data-wall-embed="region"] .time-control label{font-size:9px}
html.wall-live-region[data-wall-embed="region"] .time-control input{margin:5px 0 1px}
html.wall-live-region[data-wall-embed="region"] .time-ticks{font-size:7px}
html.wall-live-region[data-wall-embed="region"] .model-note{margin-top:0;padding:6px}
html.wall-live-region[data-wall-embed="region"] .model-note strong{margin-bottom:2px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .model-note p{font-size:8px;line-height:1.25}
html.wall-live-region[data-wall-embed="region"] .scene-panel{min-height:0;display:grid}
html.wall-live-region[data-wall-embed="region"] .panel-head{min-height:42px;padding:5px 7px}
html.wall-live-region[data-wall-embed="region"] .panel-head h2{margin-top:1px;font-size:12px}
html.wall-live-region[data-wall-embed="region"] .panel-kicker{font-size:7px}
html.wall-live-region[data-wall-embed="region"] .scene-stats{gap:2px}
html.wall-live-region[data-wall-embed="region"] .scene-stats div{min-width:42px;padding:3px}
html.wall-live-region[data-wall-embed="region"] .scene-stats dt{font-size:6px}
html.wall-live-region[data-wall-embed="region"] .scene-stats dd{margin-top:2px;font-size:9px}
html.wall-live-region[data-wall-embed="region"] .scene-tools{top:6px;left:6px;gap:3px}
html.wall-live-region[data-wall-embed="region"] .scene-tools label{padding:4px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .orbit-hint{top:7px;right:7px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .legend{left:6px;right:6px;bottom:5px;gap:7px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .change-strip{min-height:38px;padding:5px 7px;gap:5px}
html.wall-live-region[data-wall-embed="region"] .change-label{padding:3px 4px;font-size:6px}
html.wall-live-region[data-wall-embed="region"] .change-strip strong{font-size:8px}
html.wall-live-region[data-wall-embed="region"] .change-strip p{font-size:7px;line-height:1.2}
html.wall-live-region[data-wall-embed="region"] .graph-panel{
  grid-column:auto;display:grid;grid-template-columns:1fr;
  grid-template-rows:minmax(150px,1.2fr) minmax(108px,.88fr) minmax(74px,.58fr)
}
html.wall-live-region[data-wall-embed="region"] .graph-section,
html.wall-live-region[data-wall-embed="region"] .map-section{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
html.wall-live-region[data-wall-embed="region"] .panel-head.compact{min-height:31px;padding:4px 6px}
html.wall-live-region[data-wall-embed="region"] .panel-head.compact h2{font-size:10px}
html.wall-live-region[data-wall-embed="region"] .fixed-bs,
html.wall-live-region[data-wall-embed="region"] .ledger-head>span,
html.wall-live-region[data-wall-embed="region"] .activity-head span{font-size:7px}
html.wall-live-region[data-wall-embed="region"] .graph-key{padding:3px;gap:6px;font-size:6px}
html.wall-live-region[data-wall-embed="region"] .map-ledger{padding:4px;gap:2px}
html.wall-live-region[data-wall-embed="region"] .map-row{padding:3px}
html.wall-live-region[data-wall-embed="region"] .map-row-head{grid-template-columns:16px minmax(0,1fr) auto;gap:3px}
html.wall-live-region[data-wall-embed="region"] .map-badge{width:15px;height:15px;font-size:7px}
html.wall-live-region[data-wall-embed="region"] .map-name strong{font-size:8px}
html.wall-live-region[data-wall-embed="region"] .map-name small,
html.wall-live-region[data-wall-embed="region"] .map-confidence{font-size:6px}
html.wall-live-region[data-wall-embed="region"] .confidence-track{margin:2px 0 0 19px}
html.wall-live-region[data-wall-embed="region"] .activity-log{padding:3px 6px 4px 19px;font-size:7px;line-height:1.2}

html.wall-live-region[data-wall-embed="article"],
html.wall-live-region[data-wall-embed="article"] body{overflow:auto}
html.wall-live-region[data-wall-embed="article"] .workspace{min-height:100vh}