body[data-voice-lesson="joule"] .joule-scene-readout{position:absolute;z-index:3;right:12px;bottom:13px;pointer-events:none;background:rgba(248,247,235,.95);border:1px solid #c9d8cd;border-radius:13px;padding:9px 13px;display:grid;gap:2px;box-shadow:0 6px 20px #17483720;max-width:min(228px,55%)}
body[data-voice-lesson="joule"] .joule-scene-readout span{font-size:11px;color:#496f61;font-weight:700}body[data-voice-lesson="joule"] .joule-scene-readout strong{font-size:27px;line-height:1.1;color:#a06038}body[data-voice-lesson="joule"] .joule-scene-readout small{font-size:11px;color:#3e5b50}
body[data-voice-lesson="joule"] .joule-controls{background:#f6f3e8;border:1px solid #d6dfd3;border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0}
body[data-voice-lesson="joule"] .joule-controls-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#315e4d;font-size:13px}body[data-voice-lesson="joule"] .joule-controls-head strong{font-size:15px}
body[data-voice-lesson="joule"] .joule-meter-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}body[data-voice-lesson="joule"] .joule-meter-row span{background:#fffdf6;border-radius:9px;padding:7px 6px;font-size:11px;color:#567064;display:grid;gap:3px;text-align:center}body[data-voice-lesson="joule"] .joule-meter-row b{color:#254f40;font-size:14px;white-space:nowrap}
body[data-voice-lesson="joule"] .joule-controls-hint{margin:0;font-size:12px;line-height:1.45;color:#405d52;min-height:2.7em}body[data-voice-lesson="joule"] .joule-main-action{min-height:50px;border:0;border-radius:12px;background:#2e6a52;color:white;font-size:15px;font-weight:700;touch-action:manipulation;cursor:pointer}body[data-voice-lesson="joule"] .joule-main-action:disabled{opacity:.55}
body[data-voice-lesson="joule"] .joule-free-controls{display:grid;gap:8px}body[data-voice-lesson="joule"] .joule-free-controls[hidden]{display:none}body[data-voice-lesson="joule"] .joule-free-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}body[data-voice-lesson="joule"] .joule-free-grid button,body[data-voice-lesson="joule"] [data-joule-switch]{border:1px solid #bacdc0;border-radius:9px;background:#fffdf6;color:#28523f;min-height:44px;touch-action:manipulation}body[data-voice-lesson="joule"] .joule-free-grid [aria-pressed="true"]{background:#dbe9dd;border-color:#37735c;font-weight:700}
body[data-voice-lesson="joule"] .joule-law{background:#f0f3e9;border-left:4px solid #b96e45;border-radius:10px;padding:12px 15px;margin:9px 0}body[data-voice-lesson="joule"] .joule-law strong{font-size:20px;color:#305b49;line-height:1.4}body[data-voice-lesson="joule"] .joule-law p{margin:6px 0 0;line-height:1.55}
body[data-voice-lesson="joule"] .joule-table-wrap{overflow-x:auto}body[data-voice-lesson="joule"] .joule-table{width:100%;border-collapse:collapse;font-size:13px;min-width:370px}body[data-voice-lesson="joule"] .joule-table caption{text-align:left;color:#506b5f;font-size:12px;padding:4px 0 8px}body[data-voice-lesson="joule"] .joule-table th,body[data-voice-lesson="joule"] .joule-table td{padding:8px 5px;border-bottom:1px solid #dce5da;text-align:left}body[data-voice-lesson="joule"] .joule-findings{display:grid;gap:7px}body[data-voice-lesson="joule"] .joule-findings p{margin:0;font-size:13px;line-height:1.52}
body[data-voice-lesson="joule"] .scene-wrap{display:flex;flex-direction:column}
body[data-voice-lesson="joule"] .scene-wrap .scene-canvas-area{position:relative;inset:auto;flex:1 1 auto;min-height:170px}
body[data-voice-lesson="joule"] .joule-controls{position:relative;flex:0 0 auto;max-height:47%;overflow:auto}
body[data-voice-lesson="joule"] .joule-controls[data-task]:not([data-task=""]) .joule-meter-row{display:none}
body[data-voice-lesson="joule"] .joule-controls[data-task]:not([data-task=""]) .joule-controls-hint{min-height:0}
body[data-voice-lesson="joule"].lesson-voice .scene-stack:has(.joule-controls[data-task]:not([data-task=""])){grid-template-rows:minmax(0,1fr)}
body[data-voice-lesson="joule"].lesson-voice .scene-stack:has(.joule-controls[data-task]:not([data-task=""])) .narration-board{display:none}
@media(min-width:1100px) and (min-height:561px){body[data-voice-lesson="joule"] .scene-wrap{flex-direction:row;align-items:stretch;gap:14px}body[data-voice-lesson="joule"] .scene-wrap .scene-canvas-area{flex:1;min-width:0;height:100%}body[data-voice-lesson="joule"] .joule-controls{width:300px;flex:0 0 300px;max-height:100%;align-content:start}}
@media(max-width:600px){body[data-voice-lesson="joule"] .joule-controls{padding:10px}body[data-voice-lesson="joule"] .joule-scene-readout{right:8px;bottom:8px;padding:6px 8px;max-width:56%}body[data-voice-lesson="joule"] .joule-scene-readout strong{font-size:21px}body[data-voice-lesson="joule"] .joule-meter-row b{font-size:12px}}
@media(max-height:500px){body[data-voice-lesson="joule"] .joule-controls[data-task]:not([data-task=""]) .joule-controls-hint{display:none}}
@media(max-height:500px) and (min-width:701px){
 body[data-voice-lesson="joule"] .joule-controls[data-task]:not([data-task=""]){padding:4px 6px;gap:0;max-height:60px;overflow:visible}
 body[data-voice-lesson="joule"] .joule-controls[data-task]:not([data-task=""]) .joule-controls-head{display:none}
 body[data-voice-lesson="joule"] .joule-scene-readout{left:7px;right:auto;bottom:7px;width:120px;max-width:none;padding:5px 7px;gap:0}
 body[data-voice-lesson="joule"] .joule-scene-readout span{font-size:10px;line-height:1.2}
 body[data-voice-lesson="joule"] .joule-scene-readout strong{font-size:19px}
 body[data-voice-lesson="joule"] .joule-scene-readout small{display:none}
}