.teaching-scene{margin:2.4rem 0;border:1px solid #d5dfd2;border-radius:20px;background:#f4f3e9;overflow:hidden;color:#20392f;scroll-margin-top:100px}.scene-heading{padding:1.7rem 1.7rem .6rem}.scene-heading h3{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.15;margin:.6rem 0}.scene-heading p{max-width:66ch;font-size:1rem;line-height:1.65}.scene-image{position:relative;background:#ece7db}.scene-image img{display:block;width:100%;height:auto;aspect-ratio:3/2}.scene-point{position:absolute;left:var(--point-x);top:var(--point-y);transform:translate(-50%,-50%);width:44px;height:44px;border:2px solid #fff;border-radius:50%;background:#203c30;color:white;font-family:inherit;font-size:1rem;font-weight:600;box-shadow:0 2px 10px #14291d44;cursor:pointer}.scene-point[aria-pressed=true]{background:#d6e79a;color:#1a3429}.scene-point:focus-visible,.scene-controls button:focus-visible,.scene-question button:focus-visible,.scene-question a:focus-visible{outline:3px solid #203c30;outline-offset:4px}.scene-mechanism{padding:.5rem 1.2rem 0;background:#e5ecdf}.scene-mechanism svg{width:100%;height:auto;display:block}.scene-mechanism rect{fill:#fff;stroke:#b7c7ae}.scene-mechanism text{font:14px Arial,sans-serif;fill:#203c30}.scene-flow{fill:none;stroke:#426859;stroke-width:3;stroke-dasharray:7 5;animation:scene-flow 1.2s linear infinite;animation-play-state:paused}.scene-arrow{fill:none;stroke:#426859;stroke-width:3}.teaching-scene[data-playing=true] .scene-flow{animation-play-state:running}.scene-mechanism>span{display:block;font-size:.75rem;padding:.2rem 0 .6rem;color:#425848}.scene-controls{display:flex;align-items:center;gap:1rem;padding:1rem 1.7rem;font-size:.85rem}.scene-controls button,.scene-question button,.scene-question a{border:1px solid #426859;border-radius:24px;padding:.7rem 1rem;background:#fff;color:#203c30;font:inherit;cursor:pointer}.scene-notes{padding:0 1.7rem 0 3rem;display:grid;gap:.7rem;list-style:decimal}.scene-notes li{padding:.65rem .7rem;border-radius:10px}.scene-notes li[data-active=true]{background:#dce8c9}.scene-notes strong{font-size:1.02rem}.scene-notes p{margin:.3rem 0;font-size:.94rem;line-height:1.65}.scene-evidence{margin:1.2rem 1.7rem;padding:1rem;border:1px solid #c4d1bf;border-radius:12px}.scene-evidence summary{font-weight:600;cursor:pointer}.scene-evidence p{font-size:.9rem;line-height:1.6}.scene-question{padding:1.4rem 1.7rem;background:#e6ebdf}.scene-question p{font-size:1.1rem;line-height:1.6;margin:.6rem 0}.scene-question small{display:block;font-size:.78rem;margin:.7rem 0 0}.guide-visual-entry{margin:1.5rem 0;padding:1.25rem;border-left:3px solid #76955d;background:#edf1e5}.guide-visual-entry p{font-size:.95rem}.guide-visual-entry a{color:#234b37;font-weight:600}.article-body .teaching-scene p{max-width:none}.sewer-network{margin:2rem 0;padding:1.5rem;border:1px solid #c7d4be;border-radius:18px;background:#edf2e8}.sewer-network a{color:#264f39}.sewer-network li{margin:.8rem 0}.local-sewer-bars{display:grid;gap:.7rem;margin:1.2rem 0}.local-sewer-bar{display:grid;grid-template-columns:90px 1fr 70px;gap:.7rem;align-items:center;font-size:.9rem}.local-sewer-bar span:nth-child(2){background:#dde6d2;border-radius:6px;min-height:16px}.local-sewer-bar i{display:block;height:16px;background:#456b53;border-radius:6px;width:var(--share)}.local-sewer-note{font-size:.86rem;line-height:1.6}.visual-learning-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0}.visual-learning-paths a{padding:1.25rem;background:#edf1e5;border:1px solid #c9d5bf;border-radius:15px;color:#244333;text-decoration:none}.visual-learning-paths h3{font-size:1.35rem;line-height:1.2}.visual-learning-paths p{font-size:.9rem;line-height:1.5}@keyframes scene-flow{to{stroke-dashoffset:-24}}.motion-paused .scene-flow{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.scene-flow{animation:none!important}}@media(max-width:600px){.scene-heading,.scene-question{padding:1.1rem}.scene-controls{padding:.8rem 1.1rem;flex-wrap:wrap}.scene-notes{padding:0 1rem 0 2.25rem}.scene-evidence{margin:1rem}.scene-point{width:38px;height:38px}.scene-mechanism{padding:.4rem .5rem}.scene-mechanism text{font-size:14px}.visual-learning-paths{grid-template-columns:1fr}.local-sewer-bar{grid-template-columns:72px 1fr 55px;gap:.4rem}.teaching-scene{border-radius:14px}}@media print{.scene-controls,.scene-point,.scene-question button{display:none!important}.scene-flow{animation:none!important}.teaching-scene{break-inside:avoid}.scene-evidence{display:block}}

.sewer-study{margin:2rem 0;padding:1.5rem;border:1px solid #c6d2bd;border-radius:18px;background:#f4f3e9;color:#20392f;scroll-margin-top:100px}
.sewer-study h3{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;margin:.6rem 0 1rem}.sewer-study h4{font-size:1.2rem;margin:.7rem 0}.sewer-study p,.sewer-route-key{font-size:.94rem;line-height:1.65}.sewer-study svg{width:100%;height:auto;display:block}.sewer-study svg text{font:16px Arial,sans-serif;fill:#20392f}.sewer-diagram-box{fill:#fffef5;stroke:#c1ccb7;stroke-width:2}.sewer-route{fill:none;stroke:#4a6b53;stroke-width:7}.sewer-arrow{fill:none;stroke:#4a6b53;stroke-width:3}.sewer-route-storm{stroke:#3d7d90;stroke-dasharray:14 7}.sewer-arrow-storm{stroke:#3d7d90}.sewer-route-foundation{stroke:#936b34;stroke-dasharray:3 8;stroke-linecap:round}.sewer-arrow-foundation{stroke:#936b34}.sewer-route-reverse{stroke:#925636;stroke-dasharray:10 7}.sewer-arrow-reverse{stroke:#925636}.sewer-route-key{padding-left:1.5rem;display:grid;gap:.5rem}.sewer-study-limit{padding:1rem;border-left:3px solid #789361;background:#e6eddf}.sewer-specimen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.sewer-specimen{padding:1rem;border:1px solid #c8d3bf;border-radius:12px;background:#fffef5}.sewer-specimen svg{max-width:240px;margin:auto}.sewer-specimen p{margin:.45rem 0}.sewer-valve-states{margin:1rem 0;padding:1rem;border:1px solid #c4d2b8;border-radius:12px}.sewer-valve-states legend{font-weight:600;padding:0 .5rem}.sewer-state-control{width:20px;height:20px;vertical-align:middle;margin:.5rem .3rem .5rem .5rem;accent-color:#365c42}.sewer-state-control+label{display:inline-block;padding:.5rem .75rem .5rem .2rem;cursor:pointer;line-height:1.4}.sewer-state-control:focus-visible{outline:3px solid #244b35;outline-offset:3px}.sewer-state-panel{margin-top:.8rem;padding:1rem;background:#fffef5;border-radius:10px}.sewer-state-closed-panel{display:none}.sewer-state-closed-control:checked~.sewer-state-open-panel{display:none}.sewer-state-closed-control:checked~.sewer-state-closed-panel{display:block}.sewer-valve-chamber{fill:#e4e9da;stroke:#304d3c;stroke-width:3}.sewer-flap{fill:none;stroke:#304d3c;stroke-width:7;stroke-linecap:round}.sewer-held-water{fill:none;stroke:#608ba0;stroke-width:5;stroke-dasharray:4 4}
@media(max-width:600px){.sewer-study{padding:1rem}.sewer-specimen-grid{grid-template-columns:1fr 1fr;gap:.6rem}.sewer-specimen{padding:.8rem}.sewer-specimen h4{font-size:1.05rem}.sewer-state-panel{padding:.6rem}.sewer-valve-states{padding:.6rem}.sewer-state-control+label{font-size:.9rem}.sewer-study svg text{font-size:17px}}
@media(max-width:380px){.sewer-specimen-grid{grid-template-columns:1fr}}
@media print{.sewer-state-control,.sewer-state-control+label{display:none}.sewer-state-panel{display:block!important}.sewer-study{break-inside:avoid}}
.sewer-diagram-scroll{max-width:100%;overflow-x:auto}.sewer-diagram-scroll:focus-visible{outline:3px solid #244b35;outline-offset:3px}.sewer-diagram-hint{display:none}.sewer-valve-states{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:.35rem .6rem}.sewer-state-control{margin:.3rem 0}.sewer-state-control+label{padding:.5rem 0}.sewer-state-panel{grid-column:1/-1;min-width:0}
@media(max-width:700px){.sewer-diagram-scroll svg{min-width:620px;max-width:none}.sewer-diagram-hint{display:block;font-size:.8rem!important;color:#425848}}
@media print{.sewer-diagram-scroll{overflow:visible}.sewer-diagram-scroll svg{min-width:0}.sewer-diagram-hint{display:none}}

.scene-question a{display:inline-block;text-decoration:none}

/* Mobile number labels retain reviewed feature anchors through visible leaders. */
.scene-marker-leaders,.scene-flow-labels{display:none}
.scene-point{left:var(--mobile-point-x,var(--point-x));top:var(--mobile-point-y,var(--point-y))}
.scene-image:has(.scene-point:not([hidden])) .scene-marker-leaders{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scene-marker-leaders line{stroke:#203c30;stroke-width:1.5;vector-effect:non-scaling-stroke}
.scene-marker-leaders circle{fill:#203c30;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
@media(max-width:600px){
 .scene-point{left:var(--mobile-point-x,var(--point-x));top:var(--mobile-point-y,var(--point-y))}
 .scene-image:has(.scene-point:not([hidden])) .scene-marker-leaders{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
 .scene-marker-leaders line{stroke:#203c30;stroke-width:1.5;vector-effect:non-scaling-stroke}
 .scene-marker-leaders circle{fill:#203c30;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
 .scene-flow-labels{display:grid;gap:.45rem;padding:.6rem .25rem;font-size:.94rem;line-height:1.5}
 .scene-flow-labels>span{padding:.45rem .65rem;border-left:2px solid #789361;background:#fffef5}
}
@media print{.scene-marker-leaders{display:none!important}}

/* Native labels wrap at every width; fixed SVG text cannot fit longer lessons. */
.scene-mechanism svg{height:2rem}
.scene-mechanism svg text,.scene-mechanism svg rect{display:none}
.scene-flow-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;padding:.45rem 0 .65rem;font-size:.94rem;line-height:1.5}
.scene-flow-labels>span{min-width:0;overflow-wrap:anywhere;padding:.65rem .8rem;border:1px solid #b7c7ae;border-radius:10px;background:#fff}
@media(max-width:600px){.scene-flow-labels{grid-template-columns:1fr;gap:.45rem;padding:.6rem .25rem}.scene-flow-labels>span{padding:.45rem .65rem}}


/* These four original portrait diagrams retain their shape and readable labels. */
.teaching-scene [hidden]{display:none!important}
.scene-interaction-hint{padding:0 1.7rem .9rem;margin:.5rem 0;color:#244b38;font-size:.94rem;line-height:1.6}
.scene-selection{margin:1rem 1.7rem;padding:1rem 1.1rem;border:2px solid #426859;border-left-width:6px;border-radius:12px;background:#fffef5;scroll-margin-top:110px}
.scene-selection strong{display:block;font-size:1.08rem;line-height:1.5}
.scene-selection p{margin:.55rem 0 0;font-size:1rem;line-height:1.65}
.scene-diagram-points{display:none}
.scene-diagram-points:has(.scene-point:not([hidden])){display:flex;flex-wrap:wrap;gap:.65rem;padding:.8rem 1.2rem;background:#ece7db}
.teaching-scene .scene-diagram-points .scene-point{position:static;transform:none;flex:0 1 auto!important;width:auto;height:auto;min-height:44px;min-width:44px;max-width:100%;padding:.65rem .85rem;display:inline-flex;align-items:center;gap:.65rem;border-radius:12px;text-align:left;line-height:1.45;box-shadow:none}
.scene-point-name{overflow-wrap:anywhere;min-width:0;font-weight:500}
.scene-note-select{display:inline-flex;align-items:center;gap:.65rem;max-width:100%;min-height:44px;padding:.45rem .7rem;border:1px solid #76955d;border-radius:10px;background:#fffef5;color:#203c30;font:inherit;font-weight:600;text-align:left;line-height:1.5;cursor:pointer}
.scene-note-select>span:first-child{flex:0 0 auto;padding:.1rem .45rem;border-radius:50%;background:#203c30;color:#fff}
.scene-note-select>span:last-child{min-width:0;overflow-wrap:anywhere}
.scene-note-select[aria-pressed=true]{background:#dce8c9;border-color:#203c30}
.scene-note-select:focus-visible{outline:3px solid #203c30;outline-offset:4px}
.scene-notes li[data-active=true]{outline:2px solid #426859;outline-offset:1px}
@media(max-width:600px){.scene-interaction-hint{padding:0 1.1rem .8rem}.scene-selection{margin:.85rem 1.1rem;padding:.85rem}.teaching-scene .scene-diagram-points .scene-point{min-height:44px;flex-basis:auto}.scene-image .scene-point{width:44px;height:44px}}
@media print{.scene-note-select,.scene-selection,.scene-interaction-hint{display:none!important}.scene-notes [data-scene-note-label][hidden]{display:inline!important}}
.scene-image img[src="/visuals/heat-pump-four-job-heating-cycle.webp"],
.scene-image img[src="/visuals/heat-pump-fictional-energy-balance.webp"],
.scene-image img[src="/visuals/structure-floor-support-routes.webp"],
.scene-image img[src="/visuals/structure-four-record-questions.webp"] {
  max-height: 650px;
  object-fit: contain;
  background: #f6f1e7;
}
/* Portrait teaching figures stay at their authored width on wide screens. */
.scene-image img[width="480"]{max-width:480px;margin-inline:auto}