/* The Thales lesson: one grounded scene, three steps. */
[data-page=thales] .lesson{padding-top:28px}
[data-page=thales] .person-hero{padding-bottom:25px}
[data-page=thales] .life-section{margin-top:54px}
.shadow-lab{margin-top:30px;border:1px solid #d2ccba;border-radius:14px;background:#fcfaf5;overflow:hidden}
.shadow-lab [hidden]{display:none!important}
.shadow-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #dcd6c8;background:#ede9df}
.shadow-steps button{padding:18px 13px;background:transparent;display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;line-height:1.3;border-bottom:3px solid transparent}
.shadow-steps button+button{border-left:1px solid #dcd6c8}
.shadow-steps button:hover{background:#f5f2ea}
.shadow-steps button[aria-pressed=true]{background:#fcfaf5;border-bottom-color:var(--green);color:var(--green);font-weight:600}
.shadow-steps button>span{border:1px solid #b7b7a8;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;font-size:16px}
.shadow-steps button[aria-pressed=true]>span{color:#fff;background:var(--green);border-color:var(--green)}
.shadow-steps button:focus-visible{outline-offset:-5px}
.shadow-instruction{padding:24px 30px 18px}
.shadow-instruction h3{font-size:29px;line-height:1.25}
.shadow-instruction h3:focus{outline:none}
.shadow-instruction p{font-size:19px;margin-top:8px;max-width:820px;color:#4d4b40}

/* Scene */
.shadow-scene{margin:0 22px}
.shadow-scene>svg{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #d8dbc9;user-select:none;-webkit-user-select:none}
.scene-canvas{position:relative}
.shadow-scene .ghost-copy{cursor:pointer;animation:ghost-pulse 1.4s ease-in-out infinite}
@keyframes ghost-pulse{50%{fill-opacity:.6}}
.stack-on-graph{position:absolute;transform:translateY(-100%);display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 18px 7px 8px;border-radius:999px;background:var(--copper);color:#fff;font-size:17px;font-weight:600;white-space:nowrap;box-shadow:0 3px 12px #5c341f47;transition:left .45s ease,top .45s ease,background .15s}
.stack-on-graph:hover{background:#7d4127}
.stack-on-graph:focus-visible{outline-offset:3px}
.stack-on-graph .plus{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--copper);display:grid;place-items:center;font-size:24px;line-height:1;font-weight:700}
@media(prefers-reduced-motion:reduce){.shadow-scene .ghost-copy{animation:none}.stack-on-graph{transition:none}}
.shadow-scene .sun-handle{cursor:grab;touch-action:none}
.shadow-scene svg.dragging,.shadow-scene svg.dragging .sun-handle{cursor:grabbing}
.shadow-scene text{font-family:var(--sans);paint-order:stroke;stroke:#fcfaf5;stroke-width:6px;stroke-linejoin:round}
.shadow-scene .lbl{font-size:24px;font-weight:700;fill:#3f3e34}
.shadow-scene .lbl-big{font-size:30px}
.shadow-scene .lbl-sm{font-size:18px;fill:#5d5a4c}
.shadow-scene .lbl-green{fill:var(--green)}
.shadow-scene .lbl-copper{fill:var(--copper)}
.shadow-scene .lbl-angle{font-size:22px;fill:#8a6212}
.shadow-scene .lbl-num{font-size:19px;font-weight:700;fill:var(--copper)}
.shadow-scene .lbl-bar{font-size:15px;font-weight:700;stroke:none}
.shadow-scene .lbl-hint{font-size:20px;font-weight:600;fill:#8a6212}
.shadow-scene figcaption{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px;padding:12px 0 4px;font-size:16px;color:#5f5c4d;line-height:1.5}
.scene-key{display:flex;align-items:center;gap:9px}
.scene-key i{display:inline-block;width:24px;height:4px}
.sun-key{background:#cf9d36}
.shade-key{height:14px!important;background:#3b3a3024;border:1px solid #3b3a3040}
.shadow-key{height:8px!important;background:#4a473c}

/* Controls */
.shadow-controls{padding:18px 30px 6px}
.shadow-lab input[type=range]{width:100%;height:30px;margin:0;accent-color:#aa7026;cursor:pointer;display:block}
.shadow-lab .slider-label{font-size:19px;margin-bottom:4px}
.shadow-lab .slider-label output{font-size:22px}
.range-endpoints{display:flex;justify-content:space-between;gap:15px;font-size:16px;color:#686353;margin-top:4px;line-height:1.4}
.range-endpoints span:last-child{text-align:right}

/* Readouts */
.shadow-measurements{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0 10px;margin:18px 30px 0}
.shadow-measurements>div{padding:12px 18px;display:grid;gap:2px;border:1px solid #d7d2c3;border-radius:8px;background:#fff}
.shadow-measurements .operator{align-self:center;font:36px var(--serif);color:#6d6a5b;padding-top:18px}
.measurement-label{font-size:17px;line-height:1.4;color:#5f5c4d;display:flex;align-items:center;gap:9px}
.measurement-label i{display:inline-block;width:18px;height:18px;border-radius:4px;flex-shrink:0}
.tower-key{background:var(--green)}.stick-key{background:var(--copper)}
.shadow-measurements output{font:34px var(--serif);color:var(--green);font-variant-numeric:tabular-nums}
.shadow-measurements>div:nth-child(2) output{color:var(--copper)}
.shadow-measurements .shadow-ratio{background:#e9eee5;border-color:#c6d3c4}
.shadow-measurements .shadow-ratio output{color:var(--ink)}
.shadow-observation{margin:18px 30px 22px;max-width:860px;font-size:20px;line-height:1.55;font-weight:500}
.shadow-result{margin:0 30px 24px;padding:20px 24px;background:#e6efe7;border-left:4px solid var(--green);border-radius:4px}
.shadow-result .equation{text-align:left;font-size:36px;color:var(--green);margin:0 0 6px}
.shadow-result p:last-child{font-size:19px;margin:0}
.shadow-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 30px;border-top:1px solid #dcd6c8;background:#f6f3ec}
.shadow-bottom-left{display:flex;gap:8px 26px;flex-wrap:wrap}
.shadow-bottom .quiet-button{font-size:17px;min-height:44px;color:var(--copper)}
.shadow-bottom .quiet-button:hover{text-decoration:underline;text-underline-offset:5px}
.shadow-bottom .action{flex-shrink:0;font-size:18px}

/* Why it works */
.shadow-reasoning{margin:40px 0 25px}
.shadow-reasoning>h3{font-size:29px;margin-bottom:22px}
.shadow-reasoning>div{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reason{padding:20px;border:1px solid #ddd6c6;border-radius:10px;background:#fcfaf5}
.reason svg{display:block;width:140px;height:auto;margin-bottom:14px}
.reason p{font-size:19px;line-height:1.55;margin:0}
.reason strong{display:block;color:var(--green);font-weight:600;margin-bottom:6px;font-size:20px}

@media(max-width:760px){
  .shadow-steps button{flex-direction:column;gap:8px;font-size:16px;padding:14px 6px;justify-content:start}
  .shadow-instruction{padding:20px 18px 14px}
  .shadow-instruction h3{font-size:25px}
  .shadow-instruction p{font-size:18px}
  .shadow-scene{margin:0}
  .shadow-scene>svg{border-radius:0;border-left:0;border-right:0}
  .shadow-scene .lbl{font-size:38px}
  .shadow-scene .lbl-big{font-size:42px}
  .shadow-scene .lbl-angle{font-size:34px}
  .shadow-scene .lbl-num{font-size:30px}
  .shadow-scene .lbl-hint{font-size:40px}
  .shadow-scene .lbl-sm,.shadow-scene .lbl-bar{display:none}
  .shadow-scene figcaption{gap:6px 16px;padding:10px 8px 2px}
  .shadow-controls{padding:16px 18px 4px}
  .shadow-measurements{margin:16px 14px 0;gap:0 6px}
  .shadow-measurements>div{padding:10px 8px}
  .shadow-measurements .operator{font-size:26px;padding-top:22px}
  .shadow-measurements .measurement-label{font-size:16px;gap:6px}
  .measurement-label i{display:none}
  .shadow-measurements output{font-size:24px;white-space:nowrap}
  .stack-on-graph{padding:7px}
  .stack-on-graph .stack-text{display:none}
  .stack-on-graph .plus{width:34px;height:34px;font-size:28px}
  .shadow-observation{margin:16px 18px 20px;font-size:19px}
  .shadow-result{margin:0 14px 20px;padding:16px}
  .shadow-result .equation{font-size:26px}
  .shadow-bottom{padding:14px 18px;flex-direction:column-reverse;align-items:stretch;gap:10px}
  .shadow-bottom .action{width:100%}
  .shadow-bottom-left{justify-content:space-between}
  .shadow-reasoning>div{grid-template-columns:1fr;gap:14px}
}