/* Energy Bar Builder activity-only layout and stunt art. Shared controls stay in practice-shell.css / component CSS. */
.ebb-stage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(400px,1fr);gap:12px;padding:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--tlg-physics-tint,#e8f1ff) 72%,transparent),var(--tlg-bg,#f7f8fa));overflow:hidden;color:var(--tlg-text,#172033)}
.ebb-left,.ebb-right{min-width:0;min-height:0;display:flex;flex-direction:column;gap:9px}.ebb-right{overflow:auto;overscroll-behavior:contain;padding-right:2px}
.ebb-scene{position:relative;overflow:hidden;border:3px solid var(--tlg-border,#334155);border-radius:16px;background:#18313e;box-shadow:0 8px 22px #0f172a3d;min-height:235px;flex:1 1 310px}.ebb-scene svg{display:block;width:100%;height:100%;min-height:235px;object-fit:cover}.ebb-scene-badge{position:absolute;right:12px;top:10px;text-align:right;display:flex;flex-direction:column;padding:6px 10px;border-radius:9px;background:#101923d9;color:#fff;border:1px solid #ffffff5c}.ebb-scene-badge b{font-size:16px}.ebb-scene-badge span{font-size:16px}.ebb-heat{position:absolute;right:14px;bottom:16px;padding:6px 10px;border:2px solid #ffcf8a;border-radius:9px;background:#6e220dd9;color:#fff;font-weight:900;letter-spacing:.05em;opacity:0;transform:translateY(12px)}
.ebb-scene.is-running svg{animation:ebb-camera 1.7s ease-in-out}.ebb-scene.is-running .ebb-heat{animation:ebb-heat 1.7s ease-out forwards}.ebb-scene.is-finished{box-shadow:0 0 0 4px color-mix(in srgb,var(--tlg-success,#16803a) 45%,transparent),0 8px 22px #0f172a3d}
@keyframes ebb-camera{0%,100%{transform:scale(1)}45%{transform:scale(1.025) translateX(-.5%)}}@keyframes ebb-heat{35%{opacity:0}70%,100%{opacity:1;transform:none;filter:drop-shadow(0 0 10px #ff7b34)}}
.ebb-workbench,.ebb-system-panel,.ebb-number,.ebb-boundary-visual,.ebb-model-note,.ebb-equation-card{border:2px solid var(--tlg-border,#cbd5e1);border-radius:14px;background:var(--tlg-surface,#fff);padding:10px;box-shadow:0 4px 14px #0f172a12}.ebb-workbench h3,.ebb-system-panel h3,.ebb-number h3,.ebb-boundary-visual h3{font-size:18px;margin:0 0 5px}.ebb-help{font-size:16px;line-height:1.35;color:var(--tlg-text-muted,#526174);margin:0 0 8px}.ebb-model-note{font-size:16px;line-height:1.3;background:color-mix(in srgb,var(--tlg-physics-tint,#e8f1ff) 58%,var(--tlg-surface,#fff))}.ebb-model-note b{color:var(--tlg-physics-solid,#2458a6)}
.ebb-graph{height:196px;min-height:180px;border:2px solid var(--tlg-border,#cbd5e1);border-radius:14px;background:var(--tlg-surface,#fff);padding:6px 8px;overflow:hidden}.ebb-graph h3{font-size:16px;margin:0 0 2px}.ebb-graph .plg{height:164px}.ebb-graph canvas{max-height:140px!important}
.ebb-system-circle{width:190px;height:190px;margin:8px auto;border:5px dashed var(--tlg-physics-solid,#2f6fd6);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--tlg-physics-solid,#2f6fd6) 15%,transparent),transparent 68%);box-shadow:inset 0 0 24px color-mix(in srgb,var(--tlg-physics-solid,#2f6fd6) 18%,transparent)}.ebb-system-circle span{font-weight:900;color:var(--tlg-physics-solid,#2458a6);letter-spacing:.08em}.ebb-system-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.ebb-object{min-height:45px;border:2px solid var(--tlg-border,#64748b);border-radius:999px;background:var(--tlg-surface,#fff);color:var(--tlg-text,#172033);font:800 16px system-ui;padding:8px 14px;cursor:pointer}.ebb-object:hover{background:var(--tlg-hover,#eef2f7)}.ebb-object:focus-visible{outline:4px solid var(--tlg-focus,#f59e0b);outline-offset:2px}.ebb-object.is-in{border-color:var(--tlg-physics-solid,#2f6fd6);background:var(--tlg-physics-tint,#e8f1ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--tlg-physics-solid,#2f6fd6) 28%,transparent)}
.ebb-boundary-visual{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ebb-boundary-visual h3{grid-column:1/-1}.ebb-mini{min-height:105px;border:4px solid var(--tlg-physics-solid,#2f6fd6);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}.ebb-mini i{font-style:normal;font-weight:800;color:var(--tlg-success,#16803a)}.ebb-mini.is-cross{border-style:dashed}.ebb-mini.is-cross i{color:var(--tlg-danger,#b42318)}
.ebb-number{display:flex;flex-direction:column;gap:6px}.ebb-num-host{max-width:420px;margin:auto;width:100%}.ebb-slider{border-top:2px solid var(--tlg-border,#cbd5e1);padding-top:8px}.ebb-equation-card{white-space:pre-line;display:grid;place-items:center;text-align:center;min-height:170px;font:900 clamp(19px,2.1vw,30px)/1.55 ui-monospace,monospace;color:var(--tlg-physics-solid,#2458a6);background:linear-gradient(145deg,var(--tlg-surface,#fff),var(--tlg-physics-tint,#e8f1ff))}
.ebb-stage.is-wrong .ebb-scene.is-finished{box-shadow:0 0 0 4px color-mix(in srgb,var(--tlg-danger,#b42318) 48%,transparent),0 8px 22px #0f172a3d}
.ebb-example{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;align-items:center}.ebb-example>svg{width:100%;border-radius:12px;border:2px solid var(--tlg-border,#334155)}.ebb-example>.peb{min-width:340px}.ps-brief--drawer .ebb-example{display:block}.ps-brief--drawer .ebb-example>svg{display:none}.ps-brief--drawer .ebb-example>.peb{min-width:0}
@media(max-width:900px){.ebb-stage{position:static;grid-template-columns:1fr;overflow:visible}.ebb-left,.ebb-right{min-height:auto;overflow:visible}.ebb-scene{flex:none;min-height:0;aspect-ratio:900/520}.ebb-graph{height:auto}.ebb-graph .plg{height:auto}.ebb-scene svg{min-height:0}.ebb-graph{flex:none}.ebb-example{display:block}.ebb-example>.peb{min-width:0}}
@media(max-width:600px){.ebb-stage{padding:5px}.ebb-scene-badge span{display:none}.ebb-system-circle{width:150px;height:150px}.ebb-boundary-visual{grid-template-columns:1fr}.ebb-boundary-visual h3{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.ebb-scene.is-running svg,.ebb-scene.is-running .ebb-heat{animation:none}.ebb-scene.is-running .ebb-heat{opacity:1;transform:none}}