@import url('../../../assets/workshop-3d.css');
:root { --blue:#075985; }
header { position:relative; }
.hero-mark { color:#0284c7; font-weight:800; }
.lesson-nav { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.2rem 0; }
.lesson-nav a { padding:.4rem .8rem; background:#e0f2fe; border-radius:8px; text-decoration:none; font-weight:700; }
.stage { position:relative; }
#crash-scene { height:460px; touch-action:pan-y; }
.stage-label { position:absolute; top:1rem; left:1rem; padding:.35rem .8rem; border:1px solid #475569; border-radius:999px; background:#0f172ae6; color:#e2e8f0; font-size:.8rem; font-weight:700; pointer-events:none; }
.control-group { margin-top:1rem; padding:1rem; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.control-group h3 { margin:0; }
.controls input[type=number] { width:100%; padding:.5rem; border:1px solid #94a3b8; border-radius:8px; font:inherit; }
.timeline { width:100%; }
.energy-stack { display:flex; min-height:26px; overflow:hidden; background:#e2e8f0; border-radius:8px; }
.energy-stack > span { transition:width .08s linear; }
.energy-moving { background:#0284c7; }
.energy-crush { background:#d97706; }
.energy-brake { background:#7c3aed; }
.legend .swatch { display:inline-block; width:.8rem; height:.8rem; margin-right:.35rem; border-radius:3px; }
.readouts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.predictions { border-left:4px solid #d97706; padding:.6rem 1rem; background:#fff7ed; border-radius:0 8px 8px 0; }
.predictions p { margin:.5rem 0; }
.compare-table td, .compare-table th { vertical-align:top; }
.box-diagram { display:flex; gap:1rem; align-items:stretch; margin:1rem 0; }
.box-diagram > div { flex:1; min-width:0; padding:1rem; background:#fffbeb; border:1px solid #fcd34d; border-radius:12px; }
.cardboard { height:52px; background:repeating-linear-gradient(135deg,#d97706 0 5px,#fef3c7 5px 15px); border-top:8px solid #b45309; border-bottom:8px solid #b45309; border-radius:4px; margin:.5rem 0; }
.cardboard.compressed { height:27px; background:repeating-linear-gradient(135deg,#d97706 0 5px,#fef3c7 5px 8px); }
.answer-choice { padding:1rem; margin:1rem 0; border:1px solid #cbd5e1; border-radius:10px; }
.answer-choice label { display:block; margin:.6rem 0; }
.result { min-height:1.5rem; font-weight:650; }
.good { color:#166534; }
.retry { color:#9a3412; }
.graph-wrap { border:1px solid #cbd5e1; border-radius:12px; padding:.6rem; background:#f8fafc; }
#force-graph { height:200px; }
.graph-labels { display:flex; justify-content:space-between; gap:1rem; font-size:.9rem; }
.sources { font-size:.9rem; }
@media(max-width:750px) { #crash-scene { height:340px; } .readouts { grid-template-columns:repeat(2,minmax(0,1fr)); } .box-diagram { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .energy-stack > span { transition:none; } }
@media print { .lesson-nav, .stage, .camera, .control-group, .timeline, .graph-wrap { display:none; } .answers input, .exit-answer { border:0; border-bottom:1px solid #999; } }