/* A light integration layer; the original classroom artwork and controls stay intact. */
:root { --navy:#082b52; --gold:#f7cc68; }
.toolkit-return { display:inline-flex; align-items:center; min-height:42px; margin:12px 28px 0; padding:9px 15px; border:1px solid #e7c579; border-radius:100px; background:#fff8e9f5; color:#082b52; font:700 13px/1.3 system-ui,sans-serif; text-decoration:none; box-shadow:0 2px 10px #082b5214; }
.toolkit-return:hover { background:#fff0c4; }
.toolkit-return:focus-visible { outline:3px solid #fff; box-shadow:0 0 0 6px #082b52; }
.illustrated-header .brand { box-shadow:0 2px 8px #12395d14; }
.illustrated-header .active-class { border:1px solid #ead6a6; }
.illustrated-header .nav-button { letter-spacing:.005em; }
.illustrated-header .brand-block { padding-top:5px; padding-bottom:7px; }
.toolkit-embedded .app-shell { padding-top:12px; }
.presenting .toolkit-return { display:none!important; }
@media (max-width:700px) {
  .toolkit-return { margin:9px 12px 0; }
  .illustrated-header .brand-block { padding-top:2px; padding-bottom:2px; }
  .illustrated-header .nav-button:not(:disabled):active { transform:scale(.98); }
  .illustrated-header .header-actions { gap:12px; }
  .illustrated-header .nav-button { min-height:48px; }
}
@media (prefers-reduced-motion:reduce) { .toolkit-return { transition:none; } }

@font-face{font-family:Inter;src:url('../assets/fonts/Inter-Latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--cream:#fff8e2;--paper:#fff8e2;--navy:#14265d}
body,input,select,textarea,.dialog{font-family:Inter,Arial,sans-serif}
.dialog,.modal,.modal input,.modal select,.modal textarea,.toolkit-return{background-color:#fff8e2}

/* Keep the complete supplied Teacher Tools sign centered, regardless of class name. */
.illustrated-header .brand-block{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:0 16px 4px}
.illustrated-header .brand{grid-column:2;grid-row:1;justify-self:center;justify-content:center;max-width:100%;margin:0}
.illustrated-header .brand.has-artwork{padding:0;border:0;border-radius:0;background:none;box-shadow:none;line-height:0}
.illustrated-header .brand.has-artwork .brand-logo{display:block;width:clamp(300px,32vw,460px);height:auto;max-width:100%;max-height:none;object-fit:contain;filter:drop-shadow(0 3px 5px #092e5626)}
.illustrated-header .mini-timer{grid-column:1;grid-row:1;justify-self:start;margin:0;max-width:100%}
.illustrated-header .active-class{grid-column:3;grid-row:1;justify-self:end;max-width:100%;overflow-wrap:anywhere;white-space:normal}
@media(max-width:1000px){
  .illustrated-header .brand-block{grid-template-columns:1fr 1fr;gap:6px 12px;padding:0 4px 4px}
  .illustrated-header .brand{grid-column:1/-1;grid-row:1;width:min(420px,100%)}
  .illustrated-header .brand.has-artwork .brand-logo{width:100%;height:auto}
  .illustrated-header .mini-timer{grid-column:1;grid-row:2}
  .illustrated-header .active-class{grid-column:2;grid-row:2;margin:0}
}
@media(max-width:700px){
  .illustrated-header .brand{width:min(370px,100%)}
  .illustrated-header .active-class{font-size:12px;padding:6px 10px}
}

/* Weather belongs to the scene, behind the classroom controls. */
.seasonal-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;contain:strict}
.seasonal-particle{position:absolute;left:var(--x);top:0;display:block;width:var(--size);height:var(--size);opacity:var(--opacity);animation:scene-weather-fall var(--duration) var(--delay) linear infinite;will-change:transform;pointer-events:none}
.falling-leaf{filter:drop-shadow(0 1px 1px #50301320)}
.leaf-shape{display:block;width:100%;height:68%;margin-top:15%;background:var(--leaf-color);border-radius:4% 70% 4% 70%;transform:rotate(-38deg)}
.leaf-shape:after{content:"";position:absolute;left:11%;top:46%;width:90%;height:1px;background:#6e3c2b70;transform:rotate(32deg);transform-origin:left center}
.snowflake{background:#fff;border-radius:50%;box-shadow:0 0 4px #ffffff40}
.seasonal-atmosphere[data-paused="true"] .seasonal-particle{animation-play-state:paused}
@keyframes scene-weather-fall{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg)}
  45%{transform:translate3d(var(--drift),45vh,0) rotate(calc(var(--turn)*.42))}
  100%{transform:translate3d(0,112vh,0) rotate(var(--turn))}
}
body.reduced-motion .seasonal-atmosphere{display:none!important}
@media(prefers-reduced-motion:reduce){.seasonal-atmosphere{display:none!important}}