:root{
  --red:#e63946; --yellow:#ffd23f; --blue:#247ba0; --navy:#17324d;
  --cream:#f8f4e8; --white:#fffdf7; --green:#2a9d8f; --orange:#f4a261;
  --shadow:0 10px 24px rgba(23,50,77,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cream);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--navy)}
button,input{font:inherit}.app{width:100%;height:100%;position:relative;overflow:hidden}
.screen{width:100%;height:100%;display:flex;flex-direction:column;background:var(--cream)}
.topbar{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 18px;background:var(--white);border-bottom:4px solid var(--navy);z-index:20}
.brand{font-weight:900;font-size:clamp(22px,3vw,38px);letter-spacing:.02em}
.top-actions{display:flex;gap:12px;justify-self:end;align-items:center}
.icon-btn{width:58px;height:58px;border:4px solid var(--navy);border-radius:18px;background:white;display:grid;place-items:center;font-size:31px;box-shadow:0 4px 0 var(--navy);cursor:pointer}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.battery{width:76px;height:36px;border:4px solid var(--navy);border-radius:8px;padding:3px;position:relative;background:white;display:none}
.battery::after{content:"";position:absolute;right:-10px;top:9px;width:7px;height:12px;border-radius:0 4px 4px 0;background:var(--navy)}
.battery-fill{height:100%;border-radius:3px;background:var(--green);transition:width .25s}.battery.low{display:block}.battery.critical{animation:breathe 28s infinite}.battery-plug{position:absolute;left:-29px;top:-4px;font-size:25px;display:none}.battery.charging .battery-plug,.battery.very-low .battery-plug{display:block}
@keyframes breathe{0%,96%,100%{transform:scale(1)}98%{transform:scale(1.08)}}
.content{flex:1;min-height:0;position:relative;padding:18px}
.home-grid{height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:18px}
.tile{border:5px solid var(--navy);border-radius:28px;box-shadow:0 8px 0 var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:900;color:var(--navy);min-width:0}
.tile:active{transform:translateY(5px);box-shadow:0 3px 0 var(--navy)}.tile-icon{font-size:clamp(56px,8vw,110px)}.tile-label{font-size:clamp(20px,3vw,38px)}
.tile.red{background:#ffb6bd}.tile.yellow{background:#ffe788}.tile.blue{background:#a8d8ee}.tile.white{background:#fff}.tile.orange{background:#ffd0a3}.tile.green{background:#b9eadf}
.activity-wrap{height:100%;position:relative;border:5px solid var(--navy);border-radius:26px;overflow:hidden;background:white;box-shadow:var(--shadow)}
.activity-tools{position:absolute;left:14px;bottom:14px;display:flex;gap:12px;z-index:15}.activity-tools .icon-btn{background:var(--white)}
/* Switchboard */
.switchboard{height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:10px;background:#d8ecf4;position:relative;overflow:hidden}
.switch-card{position:relative;z-index:3;border:4px solid var(--navy);border-radius:24px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:space-around;padding:10px;box-shadow:0 5px 0 var(--navy);cursor:pointer}.switch-card .emoji{font-size:clamp(38px,6vw,80px)}
.toggle{width:98px;height:56px;border:4px solid var(--navy);border-radius:30px;background:#c9d0d6;padding:4px;display:flex;align-items:center}.toggle-knob{width:40px;height:40px;border-radius:50%;background:white;border:3px solid var(--navy);transition:transform .18s}.switch-card.on .toggle{background:var(--yellow)}.switch-card.on .toggle-knob{transform:translateX(40px)}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:8}.star{position:absolute;font-size:28px;animation:twinkle 1.7s infinite alternate}.bubble{position:absolute;border:3px solid #6ec5ff;border-radius:50%;background:rgba(255,255,255,.4);animation:rise 5s linear infinite}.drop{position:absolute;width:4px;height:26px;border-radius:3px;background:#348ed1;animation:fall 1.1s linear infinite}.train{position:absolute;bottom:70px;left:-180px;font-size:88px;animation:train 6s linear infinite}.wind-leaf{position:absolute;font-size:34px;animation:blow 4s linear infinite}
@keyframes twinkle{to{transform:scale(1.35);opacity:.35}}@keyframes rise{from{transform:translateY(110vh)}to{transform:translateY(-25vh)}}@keyframes fall{from{transform:translateY(-20vh)}to{transform:translateY(120vh)}}@keyframes train{to{transform:translateX(calc(100vw + 360px))}}@keyframes blow{from{transform:translateX(-20vw) rotate(0)}to{transform:translateX(120vw) rotate(720deg)}}
/* Tap & Make */
.make-area{height:100%;background:#fffdf7;position:relative;overflow:hidden}.shape-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}.shape-choice{width:62px;height:62px;border:4px solid var(--navy);border-radius:17px;background:white;font-size:32px;box-shadow:0 4px 0 var(--navy)}.shape-choice.active{background:var(--yellow)}
.made-shape{position:absolute;width:78px;height:78px;transform:translate(-50%,-50%);touch-action:none;user-select:none;display:grid;place-items:center;font-size:74px;filter:drop-shadow(0 4px 0 rgba(23,50,77,.25));transition:filter .15s}.made-shape.growing{filter:drop-shadow(0 0 12px var(--yellow))}.pop{animation:pop .22s forwards}@keyframes pop{to{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
/* Buttons */
.buttons-grid{height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:18px;padding:18px;background:#fff4cf}.big-trigger{border:5px solid var(--navy);border-radius:50%;box-shadow:0 8px 0 var(--navy);font-size:clamp(42px,8vw,100px);background:white}.big-trigger:nth-child(3n+1){background:#ffb6bd}.big-trigger:nth-child(3n+2){background:#ffe788}.big-trigger:nth-child(3n){background:#a8d8ee}.big-trigger:active{transform:translateY(5px);box-shadow:0 3px 0 var(--navy)}.event-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.event{position:absolute;font-size:72px;animation:eventFly 1.7s ease-out forwards}@keyframes eventFly{0%{transform:scale(.25) rotate(0);opacity:0}25%{opacity:1}100%{transform:translateY(-180px) scale(1.4) rotate(330deg);opacity:0}}
/* Color */
.color-lab{height:100%;display:grid;grid-template-columns:130px 1fr;position:relative}.color-controls{display:flex;flex-direction:column;gap:12px;padding:14px;background:#f5f0e3;border-right:4px solid var(--navy)}.color-btn,.light-btn{flex:1;min-height:50px;border:4px solid var(--navy);border-radius:18px;box-shadow:0 4px 0 var(--navy);font-size:30px}.color-btn.red{background:var(--red)}.color-btn.yellow{background:var(--yellow)}.color-btn.blue{background:#3a86ff}.light-btn{background:white}.color-stage{position:relative;overflow:hidden;background:#fff;transition:background .25s,filter .25s}.spotlight{position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(10px);transform:translate(-50%,-50%);pointer-events:none}
/* Drawing */
.drawing-layout{height:100%;display:grid;grid-template-columns:110px 1fr;background:#ece6d6}.drawing-tools{display:flex;flex-direction:column;gap:10px;padding:12px;border-right:4px solid var(--navy)}.paint-btn{flex:1;border:4px solid var(--navy);border-radius:16px;box-shadow:0 4px 0 var(--navy);font-size:26px}.paint-btn.red{background:var(--red)}.paint-btn.yellow{background:var(--yellow)}.paint-btn.blue{background:#3a86ff}.paint-btn.rainbow{background:linear-gradient(180deg,var(--red),var(--yellow),#3a86ff)}.paint-btn.eraser{background:white}.paint-btn.active{outline:6px solid white;outline-offset:-10px}.draw-canvas{width:100%;height:100%;background:white;touch-action:none;display:block}
/* Physics */
.physics-stage{height:100%;position:relative;background:linear-gradient(#cfeeff 0 70%,#f1d39d 70%);overflow:hidden}.physics-object{position:absolute;width:76px;height:76px;border:4px solid var(--navy);touch-action:none;user-select:none;display:grid;place-items:center;font-size:55px;box-shadow:0 5px 0 rgba(23,50,77,.35)}.physics-object.ball{border-radius:50%;background:var(--red)}.physics-object.block{border-radius:12px;background:var(--yellow)}
/* Modals */
.modal-backdrop{position:fixed;inset:0;background:rgba(23,50,77,.48);display:grid;place-items:center;z-index:100}.modal{width:min(560px,88vw);max-height:86vh;overflow:auto;background:var(--white);border:5px solid var(--navy);border-radius:28px;padding:24px;box-shadow:0 10px 0 var(--navy);text-align:center}.modal h2{font-size:34px;margin:0 0 12px}.modal p{font-size:20px}.modal input{width:100%;font-size:30px;text-align:center;text-transform:uppercase;padding:12px;border:4px solid var(--navy);border-radius:15px}.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}.adult-btn{border:4px solid var(--navy);border-radius:16px;background:white;padding:12px 18px;font-weight:800;box-shadow:0 4px 0 var(--navy);cursor:pointer}.adult-btn.primary{background:var(--yellow)}.adult-btn.danger{background:#ffb6bd}.settings-list{display:grid;gap:12px;text-align:left}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border:3px solid var(--navy);border-radius:16px;padding:12px;background:white}.settings-row input[type=range]{width:180px}.small-note{font-size:14px;opacity:.75}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:white;padding:10px 18px;border-radius:999px;z-index:200;font-weight:800}
@media(max-height:560px){.topbar{height:62px}.icon-btn{width:48px;height:48px;font-size:25px}.content{padding:10px}.home-grid{gap:10px}.tile{border-radius:20px}.activity-tools .icon-btn{width:50px;height:50px}.shape-choice{width:50px;height:50px}}
/* Parent engagement dashboard */
.dashboard-modal{width:min(860px,94vw);text-align:left}
.dashboard-modal>h2,.dashboard-modal>p{text-align:center}
.dashboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stat-card{border:3px solid var(--navy);border-radius:18px;background:white;padding:16px;display:flex;flex-direction:column;gap:5px;text-align:center}
.stat-card strong{font-size:clamp(22px,3vw,34px);text-transform:capitalize}
.stat-card span{font-size:14px;opacity:.78;font-weight:700}
.dashboard-section{border:3px solid var(--navy);border-radius:18px;background:white;padding:14px;margin:12px 0}
.dashboard-section h3{margin:0 0 10px;font-size:22px}
.usage-table{width:100%;border-collapse:collapse}.usage-table td{padding:8px 4px;border-bottom:1px solid rgba(23,50,77,.18)}.usage-table tr:last-child td{border-bottom:0}.usage-table td:last-child{text-align:right;font-weight:800}
.heatmap-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.heatmap-heading select{border:3px solid var(--navy);border-radius:12px;padding:8px;background:white;font-weight:800;color:var(--navy)}
.heat-canvas{display:block;width:100%;height:auto;max-height:280px;border-radius:12px;background:var(--white)}
@media(max-width:700px){.dashboard-cards{grid-template-columns:repeat(2,1fr)}}

.snowflake{position:absolute;top:-50px;font-size:28px;animation:snowfall 4.5s linear infinite}.lightning-flash{position:absolute;inset:0;display:grid;place-items:center;font-size:180px;animation:flash 3s infinite}.rainbow-arc{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:min(34vw,280px);animation:rainbowPulse 2.4s ease-in-out infinite}
@keyframes snowfall{to{transform:translateY(120vh) rotate(360deg)}}@keyframes flash{0%,88%,94%,100%{opacity:0}89%,93%{opacity:1;background:rgba(255,255,255,.55)}}@keyframes rainbowPulse{50%{transform:translate(-50%,-50%) scale(1.08)}}
.shape-triangle{font-size:86px}.shape-choice[data-shape="triangle"]{font-size:38px}
.level-dots{display:block;font-size:11px;letter-spacing:1px;color:var(--navy);background:rgba(255,255,255,.72);border-radius:999px;padding:2px}
.drawing-layout{grid-template-columns:190px 1fr}.drawing-tools{display:grid;grid-template-rows:1fr auto}.paint-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.brush-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}.paint-btn,.brush-btn{min-height:48px;border:4px solid var(--navy);border-radius:14px;box-shadow:0 4px 0 var(--navy);font-weight:900}.paint-btn.black{background:#111;color:white}.paint-btn.white{background:white}.brush-btn{background:white}.brush-btn:nth-child(1){font-size:12px}.brush-btn:nth-child(2){font-size:22px}.brush-btn:nth-child(3){font-size:34px}.brush-btn.active,.paint-btn.active{outline:5px solid #63d2ff;outline-offset:-8px}
.physics-toolbar{position:absolute;z-index:12;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.physics-toolbar button{width:64px;height:58px;border:4px solid var(--navy);border-radius:16px;background:white;box-shadow:0 4px 0 var(--navy);font-size:28px}.physics-object.triangle{background:#3a86ff;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.physics-stage{padding-top:70px}

/* V9 layout and interaction refinements */
.activity-wrap{padding-bottom:82px;background:var(--white)}
.activity-tools{left:14px;bottom:10px;height:58px;align-items:center}
.cleanup-broom{position:absolute;z-index:90;font-size:clamp(190px,28vw,330px);left:-130px;top:8%;pointer-events:none;animation:broomZigZag 4.7s ease-in-out forwards;transform-origin:center}
@keyframes broomZigZag{
  0%{left:-130px;top:8%;transform:rotate(-15deg)}
  18%{left:24%;top:63%;transform:rotate(12deg)}
  36%{left:48%;top:18%;transform:rotate(-12deg)}
  54%{left:70%;top:65%;transform:rotate(12deg)}
  72%{left:42%;top:32%;transform:rotate(-10deg)}
  88%{left:78%;top:12%;transform:rotate(10deg)}
  100%{left:calc(100% + 140px);top:62%;transform:rotate(15deg)}
}
.switchboard{grid-template-rows:repeat(3,1fr);gap:10px;padding:12px}
.switch-card{min-height:0;border-radius:18px;padding:6px}.switch-card .emoji{font-size:clamp(30px,4.2vw,58px)}
.toggle{width:78px;height:46px}.toggle-knob{width:32px;height:32px}.switch-card.on .toggle-knob{transform:translateX(31px)}
.bubble{border:3px solid rgba(50,150,235,.8);background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.95) 0 8%,rgba(142,220,255,.35) 20%,rgba(255,170,230,.22) 55%,rgba(255,255,255,.08) 75%);box-shadow:inset -6px -7px 12px rgba(77,150,230,.18),0 0 8px rgba(255,255,255,.8);animation:rise 6.5s linear infinite, bubbleWobble 1.6s ease-in-out infinite alternate}
.bubble::after{content:"";position:absolute;width:22%;height:15%;left:20%;top:17%;border-radius:50%;background:rgba(255,255,255,.9);transform:rotate(-28deg)}
@keyframes bubbleWobble{from{margin-left:-9px}to{margin-left:10px}}
.rainbow-arc{z-index:2}.lightning-flash{z-index:5}
.shape-toolbar{flex-direction:column;align-items:center}.shape-tool-row,.shape-color-row{display:flex;gap:10px}.shape-color{width:48px;height:36px;border:4px solid var(--navy);border-radius:13px;background:var(--shape-color);box-shadow:0 4px 0 var(--navy)}.shape-color.active{outline:5px solid #63d2ff;outline-offset:-8px}
.shape-icon,.motion-button-shape{display:block;width:36px;height:36px;background:var(--shape-color,#e63946);margin:auto}
.shape-icon.circle,.motion-button-shape.ball{border-radius:50%}.shape-icon.square,.motion-button-shape.block{border-radius:5px}.shape-icon.triangle,.motion-button-shape.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-icon.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}
.made-shape{width:82px;height:82px;font-size:0;background:var(--shape-color)}.made-shape.shape-circle{border-radius:50%}.made-shape.shape-square{border-radius:10px}.made-shape.shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.made-shape.shape-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}
.color-btn{position:relative}.level-number{display:block;font-size:24px;font-weight:950;line-height:1;background:rgba(255,255,255,.8);border-radius:10px;margin:0 auto 3px;width:34px;padding:3px}.level-dots{font-size:10px}
.paint-btn.black,.paint-btn.white{font-size:0}
.motion-lab{height:100%;position:relative}.physics-toolbar{top:8px;flex-direction:column;align-items:center;gap:7px}.motion-shape-row,.motion-color-row{display:flex;gap:9px}.motion-color{width:46px!important;height:34px!important;background:var(--object-color)!important}.motion-color.active{outline:5px solid #63d2ff;outline-offset:-8px}.motion-button-shape{width:34px;height:34px}.physics-toolbar button{display:grid;place-items:center}.physics-object{background:var(--object-color)!important;font-size:0;box-shadow:0 5px 0 rgba(23,50,77,.35)}.physics-object.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);border:0}.physics-stage{padding-top:112px}

/* V10 layout and visual refinements */
.content.activity-content{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
}
.content.activity-content .activity-wrap{min-height:0;height:auto}
.activity-tools{
  position:static;
  display:flex;
  gap:12px;
  z-index:15;
  justify-content:flex-start;
  align-items:center;
  min-height:58px;
}
.activity-tools .icon-btn{background:var(--white)}

/* Lightning stays visible without flashing the whole screen. */
.lightning-flash{
  inset:8% 5% auto auto;
  width:auto;
  height:auto;
  display:block;
  font-size:min(25vw,190px);
  opacity:.95;
  animation:lightningDrift 2.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.95));
}
@keyframes lightningDrift{from{transform:translateY(-5px) rotate(-3deg)}to{transform:translateY(7px) rotate(3deg)}}

/* Make the Light switch affect the whole board and the switch panels. */
.switchboard{transition:background .25s,box-shadow .25s}
.switchboard.light-active{
  background:radial-gradient(circle at 50% 42%,#fffbd2 0,#ffe780 48%,#ffc94f 100%);
  box-shadow:inset 0 0 70px rgba(255,255,255,.95);
}
.switchboard .switch-card{transition:background .25s,box-shadow .25s,filter .25s}
.switchboard.light-active .switch-card{
  background:rgba(255,255,229,.96);
  box-shadow:0 5px 0 var(--navy),0 0 22px rgba(255,238,87,.85);
  filter:brightness(1.06);
}
.switchboard.light-active .switch-card[data-key="light"]{
  box-shadow:0 5px 0 var(--navy),0 0 36px 10px rgba(255,242,91,.95);
}

/* Keep every shape icon centered and fully opaque. */
.shape-choice{display:grid;place-items:center;overflow:visible}
.shape-icon{width:38px;height:38px;flex:0 0 38px;opacity:1;transform:none}
.shape-icon.star{width:42px;height:42px;flex-basis:42px;transform:translateY(1px);background:var(--shape-color,#e63946)}

/* The spotlight now reveals hidden geometric discoveries. */
.color-stage{touch-action:none;cursor:crosshair}
.spotlight{
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(255,255,255,.88) 0 22%,rgba(255,255,255,.48) 48%,rgba(255,255,255,0) 72%);
  filter:none;
  box-shadow:0 0 32px rgba(255,255,255,.75);
}
.color-discoveries{position:absolute;inset:0;pointer-events:none}
.color-discovery{
  position:absolute;
  transform:translate(-50%,-50%) scale(.75);
  font-size:clamp(44px,7vw,88px);
  font-weight:950;
  color:rgba(23,50,77,.10);
  opacity:.16;
  transition:opacity .14s,transform .14s,color .14s,text-shadow .14s;
}
.color-discovery.revealed{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.05);
  color:rgba(23,50,77,.92);
  text-shadow:0 3px 0 rgba(255,255,255,.8),0 0 18px rgba(255,255,255,.95);
}

@media(max-height:560px){
  .content.activity-content{gap:7px}
  .activity-tools{min-height:48px}
}

/* V11 Switch Lab depth and geometry */
.fx-layer{position:absolute;inset:0;pointer-events:none}
.fx-rear{z-index:1;overflow:hidden}
.fx-front{z-index:8;overflow:hidden}
.switch-card{z-index:3;background:rgba(255,255,255,.72);backdrop-filter:blur(2px)}
.switchboard.light-active .switch-card{background:rgba(255,255,229,.78)}
.fx-star{position:absolute;font-size:28px;animation:twinkle 1.7s infinite alternate}
.bubble{aspect-ratio:1/1;border-radius:50%!important}
.rainbow-arc{
  z-index:1;
  left:50%;top:52%;
  font-size:min(68vw,620px);
  opacity:.88;
  filter:saturate(1.18) drop-shadow(0 10px 14px rgba(23,50,77,.15));
  animation:rainbowFloat 3.4s ease-in-out infinite alternate;
}
@keyframes rainbowFloat{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-52%) scale(1.035)}}
.lightning-flash{
  position:absolute;
  inset:auto;
  width:auto;height:auto;
  display:block;
  opacity:.92;
  line-height:1;
  animation:lightningDrift 2.4s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.98)) drop-shadow(0 0 8px rgba(72,111,255,.65));
}

/* V11: shape stars never inherit the Switch Lab animation. */
.shape-icon.star{animation:none!important;opacity:1!important}

/* V11 Color Lab: movable colored light overlay */
.spot-color-btn{
  flex:1;min-height:50px;
  border:4px solid var(--navy);border-radius:18px;
  box-shadow:0 4px 0 var(--navy);background:white;
  display:grid;place-items:center;
}
.spot-lens{
  width:42px;height:42px;border-radius:50%;
  background:var(--spot-button-color,#e63946);
  border:4px solid var(--navy);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.32);
}
.spotlight{
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(var(--spot-rgb,230,57,70),.72) 0 20%,rgba(var(--spot-rgb,230,57,70),.48) 38%,rgba(var(--spot-rgb,230,57,70),.22) 58%,rgba(var(--spot-rgb,230,57,70),0) 74%);
  filter:none;
  mix-blend-mode:multiply;
  box-shadow:none;
}
.spotlight.white-spot{mix-blend-mode:screen}

/* V11: keep all three brush-size controls unmistakably visible. */
.drawing-tools{grid-template-rows:minmax(0,1fr) 68px;min-height:0}
.paint-grid{min-height:0}
.brush-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:8px;min-height:68px}
.brush-btn{display:grid;place-items:center;min-height:56px;padding:0;background:#fff}
.brush-dot{display:block;border-radius:50%;background:#111}
.brush-dot.small{width:10px;height:10px}.brush-dot.medium{width:22px;height:22px}.brush-dot.large{width:36px;height:36px}


/* V12: make the home and Switch Lab grids use every available pixel. */
.home-grid{grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}
.home-grid .tile{min-height:0;height:100%}
.switchboard{grid-template-rows:repeat(3,minmax(0,1fr));align-content:stretch}
.switch-card{min-width:0;min-height:0;height:100%;padding:6px}
.switch-card .emoji{font-size:clamp(34px,5.2vw,72px)}
.toggle{width:clamp(70px,8vw,98px);height:clamp(44px,6vw,56px)}
.toggle-knob{width:clamp(30px,4.2vw,40px);height:clamp(30px,4.2vw,40px)}

/* V12 Motion Lab: sticks replace triangles and rotate as they move. */
.motion-button-shape.stick{width:48px;height:14px;border-radius:999px}
.physics-object.stick{
  width:86px;height:24px;border-radius:999px;
  transform-origin:center center;
}


/* V13: the activity footer is outside the lab, so the lab itself needs no reserved bottom padding. */
.content.activity-content .activity-wrap{padding:0!important}
.content.activity-content .switchboard{width:100%;height:100%;min-height:0}

/* V14: brightness is a visible 0-5 control, matching the color controls. */
.brightness-btn{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;place-items:center;gap:0 6px;padding:4px 8px!important}
.brightness-btn .brightness-icon{grid-row:1 / span 2;font-size:32px}
.brightness-btn .level-number{font-size:24px;font-weight:1000;line-height:1}
.brightness-btn .level-dots{font-size:10px;letter-spacing:-1px;white-space:nowrap}

/* V14: the Art Lab toolbar is a guaranteed-visible top row. */
.drawing-layout{height:100%;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:92px minmax(0,1fr)!important;background:#ece6d6}
.drawing-tools{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(210px,1fr)!important;grid-template-rows:1fr!important;gap:12px;padding:10px 12px!important;border-right:0!important;border-bottom:4px solid var(--navy);min-height:0}
.paint-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px;min-height:0}
.brush-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;padding:0!important;min-height:0!important}
.paint-btn,.brush-btn{min-height:0!important;height:68px!important}
.draw-canvas{min-height:0}


/* V15 polish fixes */
/* The train emoji faces left by default; flip it so it points in its travel direction. */
.train{transform:scaleX(-1)}
@keyframes train{from{transform:translateX(0) scaleX(-1)}to{transform:translateX(calc(100vw + 360px)) scaleX(-1)}}

/* Brightness uses exactly the same visual box and centered stack as the three color levels. */
.brightness-btn{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:0!important;font-size:30px!important}
.brightness-btn .brightness-icon{display:none!important}
.brightness-btn .level-number{display:block;font-size:24px!important;font-weight:950!important;line-height:1!important;background:rgba(255,255,255,.8);border-radius:10px;margin:0 auto 3px!important;width:34px;padding:3px}
.brightness-btn .level-dots{display:block;font-size:10px!important;letter-spacing:1px!important;white-space:nowrap}