/* V18 — teacher-approved graphic design rebuilt as responsive HTML/CSS.
 * Uses existing photo, calculations, storage and pointer/drag code; no raster
 * mock-up is inserted as a background. Applies to classroom lessons 8/9 only.
 */
:root{--v18-ink:#102c3a;--v18-teal:#085c62;--v18-teal-deep:#08484e;--v18-success:#008d53;--v18-orange:#e34420;--v18-soft:#f1f7f4}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]){font-family:Pretendard,"SUIT","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif!important;color:var(--v18-ink);font-synthesis:weight}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .sim-header{
  padding-inline:clamp(16px,1.8vw,32px)!important;background:linear-gradient(100deg,#084d53 0%,#0f5359 46%,#063840 100%)!important;
  color:white!important;border:0!important;box-shadow:0 2px 12px #153f4422;gap:12px
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity{display:flex;align-items:center;gap:17px;min-width:0}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity-small{display:inline!important;font-size:clamp(11px,.9vw,15px)!important;color:#e2f3ee!important;white-space:nowrap;font-weight:680}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity-main{font-size:clamp(17px,1.45vw,25px)!important;letter-spacing:-.045em!important;white-space:nowrap;color:#fff!important;font-weight:850}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity-main span{display:inline!important;color:#ffffff!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls{gap:clamp(6px,.75vw,12px)!important;min-width:0}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls :is(.back-to-school,.lesson-picker,.utility-control,.audio-toggle,.v18-teacher-button){border:1px solid #ffffff45!important;border-radius:7px!important;color:#ecf7f6!important;background:#ffffff0c!important;min-height:36px;padding:6px 10px;font-weight:750;font-size:12px;white-space:nowrap}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-picker{background:#0d5056!important;color:white!important;max-width:136px}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls .v18-teacher-button{border-color:#c1e5ff!important;background:#0d6170!important;padding:8px 17px!important;color:#fff!important;font-size:14px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls .v18-teacher-button:hover{background:#1b7c87!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls :is(.utility-control,.audio-toggle){font-size:12px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls select option{color:#153737;background:white}
/* Student-facing scene — overview is an intentional compact 3-column banner. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]).classroom-stage-ready{grid-template-rows:56px minmax(0,1fr) 66px 181px!important;background:#f5f9f6}
.sim-shell[data-lesson="8"].classroom-stage-ready .classroom-overview,.sim-shell[data-lesson="9"].classroom-stage-ready .classroom-overview{
  min-height:0!important;min-width:0!important;background:#fff!important;
  border-bottom:1px solid #dcebe5!important;padding:8px clamp(14px,2vw,32px)!important;
  display:grid!important;grid-template-columns:minmax(160px,1fr) minmax(350px,1.35fr) 116px!important;
  gap:16px!important;align-items:center;overflow:visible!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .experiment-heading{position:static!important;inset:auto!important;min-width:0;padding:0!important;align-self:center}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .experiment-heading .phase-marker{display:block!important;color:#087f7f!important;font-size:clamp(10px,.78vw,13px)!important;font-weight:760!important;letter-spacing:.01em}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .experiment-heading h1{color:#102a39!important;font-size:clamp(19px,1.5vw,28px)!important;letter-spacing:-.045em;line-height:1.2!important;font-weight:850!important;margin:3px 0 0!important;white-space:normal;word-break:keep-all}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .experiment-heading p{display:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .lesson-guide{min-width:0!important;max-width:none!important;align-self:center;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-index{font-size:12px!important;font-weight:850!important;color:#0b7376!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-message strong{font-size:clamp(13px,1.1vw,17px)!important;color:#132f3b!important;line-height:1.2;font-weight:780}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-actions{gap:6px!important;flex-wrap:wrap!important;margin:5px 0 0!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview :is(.guide-primary,.guide-more,.trial-action){border-radius:7px!important;min-height:31px!important;font-weight:700!important;padding:3px 8px!important;font-size:clamp(10px,.72vw,13px)!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-primary{background:#0a6570!important;color:white!important;max-width:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-switch{width:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;align-self:center!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;gap:5px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-caption,.classroom-overview .weather-explain{display:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-choice{width:100%!important;min-height:35px!important;border-radius:7px!important;border:1px solid #cbdcdf!important;padding:4px 9px!important;font-size:14px!important;color:#1b5f6d!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-choice[aria-pressed="true"]{background:#0b5961!important;color:white!important;border-color:#0b5961!important;font-weight:850}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-choice svg{width:19px!important;height:19px!important;flex:none}
/* Stage — let the classroom take most of the available width. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]).classroom-stage-ready .play-area{
  grid-template-columns:clamp(224px,20%,320px) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
  gap:7px!important;background:#fff!important;padding:8px 8px 0!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria{
  display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;
  padding:12px 10px!important;background:#edf5f2!important;border:none!important;border-radius:14px!important;
  box-shadow:inset 0 0 0 1px #ebf1ed
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria h2{color:#0b3040!important;font-size:clamp(23px,1.8vw,31px)!important;font-weight:880!important;margin:0 0 7px!important;padding:0 8px!important;border:0!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion{
  position:relative;flex:1 1 0!important;min-height:0!important;background:#fff!important;border:1px solid #eef2f0!important;border-radius:11px!important;
  margin:0 0 7px!important;padding:clamp(9px,.95vw,16px) 12px 9px clamp(59px,4.1vw,72px)!important;
  display:flex!important;justify-content:center!important;gap:1px!important;box-shadow:0 1px 4px #0a473a08
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion::before{
  content:'☀';position:absolute;left:12px;top:50%;transform:translateY(-50%);width:42px;height:42px;
  background:#e8f6f0;border-radius:50%;display:grid;place-items:center;font-size:29px;color:#0a4d5d;font-weight:800
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion:nth-of-type(2)::before{content:'◉';font-size:26px}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion-energy::before{content:'♧';font-size:31px}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-kicker{color:#1c3541!important;font-weight:770!important;font-size:clamp(12px,1vw,17px)!important;line-height:1.3!important;white-space:normal;word-break:keep-all}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion strong,
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-live strong{
  font-size:clamp(38px,3vw,58px)!important;letter-spacing:-.075em!important;color:#082f40!important;
  line-height:1.14!important;font-weight:870!important;font-variant-numeric:tabular-nums
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-live{display:flex!important;align-items:baseline!important;gap:5px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-live-unit{color:#58716d!important;font-size:12px!important;font-weight:730!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-note{display:block!important;color:#637b7b;font-size:11px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria-overline,
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .criteria-conclusion,
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .criteria-disclaimer{display:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) #scene-mount{background:#f2f7f3!important;border-radius:9px!important;overflow:hidden!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) #scene-mount svg[data-photo-scene="true"]{
  width:100%!important;height:100%!important;max-height:100%!important;max-width:100%!important;
  box-shadow:none!important;filter:none!important;object-fit:contain!important
}
/* V18 drag controls float OVER a single SVG blind, never duplicate fabric. */
.sim-shell[data-lesson="8"] #scene-mount svg[data-photo-scene="true"] #interaction-hotspots g.blind-hotspot{display:inline!important;pointer-events:all!important;touch-action:none!important}
.sim-shell[data-lesson="8"] #scene-mount svg[data-photo-scene="true"] .blind-hotspot .svg-hit-area{fill:transparent!important;stroke:none!important;pointer-events:all!important;touch-action:none!important}
.sim-shell[data-lesson="8"] #scene-mount svg[data-photo-scene="true"] .v18-blind-label,
.sim-shell[data-lesson="8"] #scene-mount svg[data-photo-scene="true"] .v18-blind-handle{display:inline!important;pointer-events:none!important}
.sim-shell[data-lesson="8"] #scene-mount svg[data-photo-scene="true"] .blind-hotspot:focus-visible .svg-hit-area{stroke:#e4a52e!important;stroke-width:4!important}
/* Dock: transparent background, thin borders and teal selected outlines. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar{
  padding:5px 12px!important;min-height:0!important;background:#fff!important;border-top:1px solid #e6eeeb!important;
  box-shadow:0 2px 5px #122e3208;overflow:visible!important;z-index:25!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar .experiment-dock{
  gap:clamp(6px,.8vw,12px)!important;width:100%!important;max-width:100%!important;min-width:0!important;
  flex-wrap:wrap!important;justify-content:center!important;align-content:center!important;row-gap:5px!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar .dock-label{font-size:12px!important;color:#44616c!important;font-weight:690!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar :is(.switch-chip,.blind-chip,.blind-select,.desk-visual-toggle,.reset-control){
  min-height:36px!important;height:36px!important;padding:4px clamp(7px,.6vw,12px)!important;
  font-size:clamp(11px,.79vw,14px)!important;font-weight:720!important;
  border-radius:7px!important;border:1px solid #c8dce0!important;background:#fff!important;color:#195765!important;
  white-space:nowrap!important;box-shadow:none!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar :is(.switch-chip,.blind-chip,.blind-select)[aria-pressed="true"]{
  background:#f4fcf9!important;border-color:#068184!important;box-shadow:inset 0 -2px 0 #027b74!important;color:#07505a!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar .dock-divider{background:#e3ede8!important;margin:0 2px!important}
/* Three result cards: strong numerals and explicit suitability labels. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .analysis-bar{
  padding:10px clamp(12px,1.3vw,22px)!important;background:linear-gradient(135deg,#eef7f2,#f8faf8)!important;
  min-height:0!important;border-top:1px solid #e4eeea!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-panel{
  width:100%!important;max-width:none!important;margin:0!important;display:grid!important;
  grid-template-columns:clamp(178px,17vw,277px) minmax(0,1fr)!important;
  gap:10px!important;align-items:stretch;height:100%!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading{
  grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:column!important;
  justify-content:flex-start!important;align-items:flex-start!important;
  padding:clamp(13px,1.2vw,24px) clamp(8px,1vw,18px)!important;
  margin:0!important;gap:8px!important;border-radius:10px;background:#edf6f2!important;white-space:normal!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading strong{
  font-size:clamp(21px,1.7vw,30px)!important;line-height:1.2!important;font-weight:880!important;letter-spacing:-.05em!important;color:#102e3e!important;
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading .zone-light-summary{font-size:12px!important;padding:3px 8px!important;margin:0!important;background:#d9efe4!important;color:#0a684f}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-results{
  grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:100%!important;min-height:0!important;gap:10px!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result{
  display:flex!important;flex-direction:column!important;gap:3px!important;
  background:#fffefa!important;border:1px solid #e8e9e2!important;border-radius:11px!important;
  padding:10px clamp(10px,1.2vw,20px)!important;min-width:0;min-height:0;
  box-shadow:0 3px 15px #21473908!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result[data-suitable="true"]{background:#f7fcf9!important;border-color:#d6ebe0!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-name{
  font-size:clamp(16px,1.22vw,21px)!important;line-height:1.2!important;font-weight:850!important;color:#102b3c!important;white-space:nowrap!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-main{display:flex!important;flex-wrap:nowrap!important;align-items:baseline!important;gap:clamp(5px,.9vw,15px)!important;margin-top:1px!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-number{font-size:clamp(37px,3.4vw,58px)!important;font-weight:900!important;color:#093244!important;line-height:1.0!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-bright-status{font-size:clamp(12px,1.13vw,19px)!important;font-weight:850!important;color:var(--v18-success)!important;white-space:nowrap!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result[data-brightness="너무 밝음"] .zone-bright-status,
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result[data-brightness="어두움"] .zone-bright-status{color:var(--v18-orange)!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-outcome{margin-top:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-glare{font-size:clamp(12px,.98vw,16px)!important;font-weight:780!important;color:#155a57!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-suitability{
  font-size:clamp(13px,1.07vw,18px)!important;font-weight:850!important;border-radius:10px!important;
  padding:7px clamp(9px,1.2vw,18px)!important;background:#d9f4e4!important;color:#087648!important;white-space:nowrap!important
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result[data-suitable="false"] .zone-suitability{
  background:#ffebdd!important;color:#d94d22!important
}
/* Main laptop and classroom display: keep all content without overlap. */
@media (max-width:1240px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity-small{display:none!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls{gap:5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]).classroom-stage-ready{grid-template-rows:54px minmax(0,1fr) 68px 165px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-message{font-size:12px}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria{padding:9px 8px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion{padding-left:50px!important;margin-bottom:5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion::before{width:34px;height:34px;font-size:23px;left:8px}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion strong{font-size:38px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result{padding:7px 9px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-number{font-size:39px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-suitability{padding:5px 8px!important}
}
@media(max-width:840px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]).classroom-stage-ready{height:100dvh;min-height:640px;grid-template-rows:49px minmax(0,1fr) auto 177px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .sim-header{padding-inline:8px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .identity-main{font-size:14px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls :is(.back-to-school,.lesson-picker,.utility-control,.audio-toggle,.v18-teacher-button){font-size:10px!important;min-height:31px;padding:4px 5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls .v18-teacher-button{font-size:11px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview{grid-template-columns:1fr 1.6fr 80px!important;padding:5px 8px!important;gap:6px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-message strong{font-size:11px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-actions{gap:4px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-actions button{font-size:10px!important;min-height:28px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .weather-choice{font-size:11px!important;min-height:29px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .play-area{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:116px minmax(0,1fr)!important;padding:4px!important;gap:3px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria{grid-column:1;grid-row:1;display:grid!important;grid-template-columns:90px repeat(3,minmax(0,1fr))!important;gap:5px;padding:4px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria h2{font-size:19px!important;padding:0 5px!important;margin:0!important;grid-column:1!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion{padding:8px 5px 4px!important;min-width:0!important;margin:0!important;grid-column:auto!important;display:flex!important;justify-content:center!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion::before{display:none!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-kicker{font-size:11px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion strong{font-size:29px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .play-area #scene-mount{grid-column:1!important;grid-row:2!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar{padding:5px!important;min-height:95px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar .experiment-dock{gap:4px 7px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar .dock-label{font-size:10px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-action-bar :is(.switch-chip,.blind-chip,.blind-select,.desk-visual-toggle,.reset-control){font-size:11px!important;height:34px!important;min-height:34px!important;padding:3px 6px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .analysis-bar{padding:5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-panel{grid-template-columns:1fr!important;grid-template-rows:27px minmax(0,1fr)!important;gap:3px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading{grid-column:1!important;grid-row:1!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:2px 8px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading strong{font-size:15px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-results{grid-column:1!important;grid-row:2!important;gap:5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result{padding:5px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-name{font-size:13px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-number{font-size:32px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-bright-status{font-size:11px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-glare{font-size:10px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-suitability{font-size:11px!important;padding:4px!important}
}
@media(max-width:540px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls :is(.utility-control,.audio-controls){display:none!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-message{display:none!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview .guide-actions{justify-content:center}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .classroom-overview{grid-template-columns:1fr 1fr 73px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria{grid-template-columns:74px repeat(3,minmax(0,1fr))!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-kicker{font-size:10px!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion strong{font-size:24px!important}
}
/* Teacher access from PUBLIC SCHOOL HOME (students' direct QR entry skips it). */
.top-links .top-teacher-entry{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid #1c6665!important;border-radius:7px!important;background:#ecf6f1!important;color:#11535a!important;padding:9px 15px!important;font-size:13px!important;white-space:nowrap!important;font-weight:840!important}
.top-links .top-teacher-entry:hover{background:#d8eee8!important}
@media(max-width:720px){.top-links .top-teacher-entry{padding:7px 8px!important;font-size:11px!important}}

/* Consistent line-art icons from HTML; no emoji/font-dependent symbols. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .lesson-criterion::before{display:none!important;content:none!important}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-criterion-icon{
 position:absolute;left:clamp(8px,.95vw,15px);top:50%;transform:translateY(-50%);
 display:grid;place-items:center;background:#e7f6ef;color:#0b455b;border-radius:50%;
 width:clamp(37px,3.6vw,52px);height:clamp(37px,3.6vw,52px)
}
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-criterion-icon svg{width:58%;height:58%}
@media(max-width:1240px){:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-criterion-icon{width:35px;height:35px;left:7px}}
@media(max-width:840px){:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-criterion-icon{display:none!important}}
/* Stronger than Step W/Y responsive column rules, which carry !important. */
@media(max-width:840px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]).classroom-stage-ready .play-area{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:116px minmax(0,1fr)!important;align-items:stretch!important;
 }
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9")).classroom-stage-ready .play-area #scene-mount{
  grid-column:1!important;grid-row:2!important;min-width:0!important;width:100%!important;height:100%!important;
 }
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9")).classroom-stage-ready .play-area .lesson-criteria{
  grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;
  display:grid!important;grid-template-columns:90px repeat(3,minmax(0,1fr))!important;
  grid-template-rows:1fr!important;overflow:hidden!important
 }
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .header-controls .audio-toggle span{display:none!important}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) #zones-toggle{display:none!important}
}
@media(max-width:540px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9")).classroom-stage-ready .play-area .lesson-criteria{
   grid-template-columns:74px repeat(3,minmax(0,1fr))!important
 }
}

/* Explicit semantic wrapping only when the left title column becomes narrower. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-result-break{display:none}
@media (min-width:841px) and (max-width:1240px){
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .v18-result-break{display:block}
 :is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .zone-result-heading strong{font-size:19px!important}
}

/* Number first, decision threshold second, as in the approved sample. */
:is(.sim-shell[data-lesson="8"],.sim-shell[data-lesson="9"]) .lesson-criteria .criterion-note{display:block!important;font-weight:710!important;font-size:clamp(11px,.92vw,15px)!important;color:#587079!important}