/* The clay objects support the controls; every result and choice stays live HTML. */
body{background:radial-gradient(ellipse at 50% 0,#f7fffd 0,#daf5ed 60%,#bfe3db 100%) fixed}
.wrap{max-width:1100px}.title{max-width:960px}.title h1{font-size:clamp(2.3rem,5vw,3.7rem)}
.clay-cover{width:100%;max-width:830px;border-radius:28px;animation:none;box-shadow:0 8px 0 #1a78621a;margin:22px auto}
.hook{font-weight:700}.lesson-brief{max-width:660px;margin:10px auto 22px;font-size:1.12rem}
.demo{height:128px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.demo img{height:125px;width:150px;object-fit:contain}.demo-button{position:absolute;bottom:0;background:#087466;color:white;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:800;box-shadow:0 4px #06574e}
.sample-results{flex-direction:column;gap:12px}.sample-results .dot{width:28px;height:28px}.demo-decide{gap:7px}.demo-decide span{padding:12px;background:#087466;color:white;border-radius:12px;font-size:14px;font-weight:750}.demo-decide span+span{background:#fff0e7;color:#893a25;border:2px solid #d6a188}
.tool-intro{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;background:#fffdf7;border-radius:22px;padding:16px 20px;margin-bottom:12px;border:1px solid #fff}
.tool-art{width:120px;height:120px;object-fit:contain}.tool-intro h2{font-size:1.5rem;margin-bottom:5px}.tool-intro p{margin-bottom:6px}.company-claim{font-size:.88rem;color:#5d5545}.company-claim strong{color:#324c4a}
.test-budget{text-align:center;background:#e6f6ee;border-radius:16px;padding:12px;min-width:115px}.test-budget strong{font-size:2rem;line-height:1.1;display:block;color:#08685d}.test-budget span{font-size:.85rem}
.board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.board-heading p{margin:0}.legend{font-size:.84rem;color:#3b5853}.tile{border:2px solid transparent;padding:13px 16px;gap:7px}.tile.co{border-color:#b5d7ca;background:#f9fffc}.tile-head{align-items:center}.tile .count{font-weight:600}.tile button{align-self:stretch;padding:9px 14px;min-height:46px}.tile .dots{min-height:24px}.dot.y{color:white;font-size:12px}.group-tag{font-size:.71rem;letter-spacing:.05em;color:#41645b;text-transform:uppercase;font-weight:800}.group-tag.empty{color:#536266}
.decision-dock{background:#f7fffaed;border:1px solid #c0d9cf;border-radius:18px;padding:12px 14px;margin-top:15px;box-shadow:0 5px 0 #345c4911}.decision-dock .row{margin-top:0;align-items:center}.decision-dock .reset{margin-right:auto;padding:10px 13px;font-size:.88rem}
.feedback{scroll-margin:12px}.feedback p{font-weight:600}.new{animation:pop .3s ease-out}.outcome-stage{height:140px;position:relative;background:linear-gradient(#f0f8fd 73%,#d4ddd5 73%,#d4ddd5 79%,#7c8b90 79%);border-radius:20px;overflow:hidden;margin:14px auto;max-width:720px}
.outcome-stage img{width:145px;height:140px;object-fit:contain;position:absolute;left:5%;bottom:2px}.outcome-stage.bus img{animation:bus-arrives 2.8s cubic-bezier(.35,.1,.6,1) both}.bus-stop{position:absolute;right:18px;top:12px;font-weight:700;background:#fff;padding:5px 10px;border-radius:9px;box-shadow:0 2px 8px #213b4122}.late-label{position:absolute;left:20px;top:12px;color:#923d27;font-weight:800}.outcome-stage.scan{background:#dff6ee}.scan img{left:calc(50% - 70px)}.scan-line{position:absolute;top:30%;width:90px;height:3px;left:calc(50% - 62px);background:#099282;animation:scan 1.6s 2 alternate}.truth-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:12px;align-items:center;margin:9px 0}.truth-row .bar{display:block;margin:0;height:12px;min-height:0;background:#dae8df;border-radius:12px;overflow:hidden}.truth-row .bar span{height:100%;display:block;background:#0c8b76;border-radius:12px}
@keyframes bus-arrives{0%,25%{transform:translateX(0)}100%{transform:translateX(280px)}}@keyframes scan{from{top:20%}to{top:74%}}
@media(max-width:700px){.clay-cover{margin:15px auto}.title{padding:0}.title h1{font-size:2.5rem}.hook{font-size:1.02rem}.goal{font-size:1rem}.demo{grid-row:1/3;height:90px;margin:0}.demo img{height:90px;width:100px}.demo-button{font-size:10px;padding:4px}.demo-decide{flex-direction:column;gap:4px}.demo-decide span{font-size:11px;padding:5px 8px}.lesson-brief{font-size:1rem}.tool-intro{grid-template-columns:72px 1fr;gap:10px;padding:12px}.tool-art{width:72px;height:84px}.tool-intro h2{font-size:1.28rem}.tool-intro p{font-size:.93rem}.company-claim{font-size:.8rem!important}.test-budget{grid-column:1/3;display:flex;gap:8px;align-items:center;justify-content:center;padding:5px}.test-budget strong{font-size:1.3rem}.test-budget small{font-size:.82rem}.board-heading{align-items:flex-start;font-size:.9rem}.legend{white-space:nowrap;font-size:.74rem}.tiles{gap:8px}.tile{padding:10px;gap:7px}.tile-head{display:block}.tile-head strong{font-size:.93rem;display:block;min-height:40px;line-height:1.3}.tile .count{font-size:.76rem}.tile button{font-size:.82rem;padding:9px 6px}.dots{gap:4px}.dot{width:17px;height:17px;font-size:10px}.decision-dock{position:sticky;bottom:5px;z-index:3;padding:9px}.decision-dock .row{gap:7px}.decision-dock .btn{flex:1;padding:10px 8px;font-size:.9rem}.decision-dock .reset{min-height:44px;font-size:.8rem;flex-basis:100%;box-shadow:none;padding:5px}.truth-row{grid-template-columns:1fr auto;gap:5px;font-size:.86rem}.truth-row .bar{grid-column:1/3;grid-row:auto}.truth-row>span:last-child{text-align:right}.conseq.panel{padding:16px}.conseq .big{font-size:1.05rem}.outcome-stage.bus img{animation-name:bus-small}@keyframes bus-small{0%,25%{transform:translateX(0)}100%{transform:translateX(110px)}}}
@media(min-width:351px) and (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.decision-dock{position:static}.tile .btn{align-self:stretch;padding:9px 6px}.tool-intro{gap:6px}.tile-head strong{min-height:32px}}
@media(max-width:350px){.tiles{grid-template-columns:1fr}.tile-head strong{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.outcome-stage.bus img{left:50%}}


/* Four distinct views: title, illustrated lesson connection, rules, play. */
.connection{max-width:880px;margin:50px auto;display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:center;min-height:430px}
.connection[hidden]{display:none}.connection-art{display:grid;place-items:center;background:radial-gradient(ellipse,#ffffffd9,transparent 70%);min-height:290px}.connection-art img{width:260px;height:280px;object-fit:contain;filter:drop-shadow(0 14px 10px #24324b17)}
.connection h2{font-size:2.25rem;line-height:1.12;margin:10px 0 20px}.connection-copy p:not(.eyebrow){font-size:1.12rem;line-height:1.55;max-width:520px}.connection .btn{margin-top:15px}.how h2{margin-bottom:25px}.how .small-note{max-width:720px;margin:14px auto 20px;line-height:1.5}.footer[hidden]{display:none}.feedback:empty{display:none}.brand{font-size:.8rem;opacity:.8}.bar{background:none;border:0;box-shadow:none}.progress-row{display:none}
@media(max-width:700px){.connection{grid-template-columns:1fr;gap:0;margin:12px auto 25px;min-height:0;text-align:center}.connection-art{min-height:170px}.connection-art img{width:175px;height:175px}.connection h2{font-size:1.7rem;margin:7px 0 15px}.connection-copy p:not(.eyebrow){font-size:1rem;line-height:1.5}.connection .btn{margin-top:8px}.how h2{font-size:1.5rem;margin-bottom:16px}.how .small-note{font-size:.84rem}}

/* Testing bench: a tool station beside four result boards. */
.testing-workbench{display:grid;grid-template-columns:245px minmax(0,1fr);gap:28px;margin-top:20px}.tool-intro{display:flex;flex-direction:column;text-align:center;gap:8px;align-self:start;padding:8px 5px;background:none;border:0;box-shadow:none}.tool-art{width:155px;height:155px}.tool-number{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#54734a}.tool-intro h2{font-size:1.65rem;margin:8px 0}.tool-intro p{font-size:.97rem;line-height:1.4}.company-claim{background:#ffffffb8;border-radius:15px;padding:12px!important;margin:12px 0!important;font-size:.87rem!important}.test-budget{width:130px;border:2px dashed #88a77d;border-radius:14px;background:#ffffee;padding:10px}.test-budget strong{font-size:2.2rem}.test-budget small{display:none}.board-heading{margin:0 0 12px;padding:0;align-items:center}.board-heading p{margin:0}.board-heading .check{font-size:.8rem}.legend{font-size:.78rem;white-space:nowrap}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tile{min-height:204px;display:flex;flex-direction:column;background:#fffef8;border:2px solid #d6dccb;border-radius:7px 7px 20px 20px;box-shadow:0 7px 0 #42663e16;padding:16px}.tile.co{border-color:#81a575;background:#f6faee}.tile-head{min-height:58px}.tile-head strong{font-size:1rem}.tile .dots{flex:1;align-content:start;min-height:65px;margin:10px 0}.tile .dot{width:24px;height:24px;font-size:.85rem}.tile .btn{font-size:.87rem;padding:10px}.group-tag{font-size:.69rem}.decision-dock{margin-top:23px;background:none;border:0;box-shadow:none;padding:0}.decision-dock .row{justify-content:flex-end}
@media(max-width:700px){.testing-workbench{grid-template-columns:1fr;gap:14px;margin-top:8px}.tool-intro{display:grid;grid-template-columns:65px minmax(0,1fr) 64px;text-align:left;gap:9px;padding:0}.tool-art{width:65px;height:80px}.tool-number{font-size:.66rem}.tool-intro h2{font-size:1.2rem;margin:3px 0}.tool-intro p{font-size:.83rem;margin:4px 0}.company-claim{padding:8px!important;font-size:.78rem!important;margin:6px 0!important}.test-budget{width:64px;padding:8px 3px;text-align:center}.test-budget strong{font-size:1.7rem}.test-budget span{font-size:.66rem}.board-heading{gap:8px}.board-heading strong{font-size:.87rem}.board-heading .check{font-size:.74rem}.legend{font-size:.69rem}.tiles{gap:9px}.tile{padding:10px;min-height:215px}.tile .dot{width:20px;height:20px;font-size:.73rem}.tile-head strong{font-size:.91rem}.tile-head .count{font-size:.74rem}.tile .btn{padding:9px 5px;font-size:.77rem;min-height:44px}.decision-dock{margin-top:17px}.decision-dock .row{flex-wrap:wrap}.decision-dock .btn{font-size:.85rem;min-height:46px}}