*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}body{margin:0;background:#100c29;font:16px/1.6 var(--af-font-body)}[hidden]{display:none!important}a{color:#7cf8d2;text-underline-offset:4px}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #7cf8d2;outline-offset:4px}.btn{padding:12px 20px;display:inline-flex;align-items:center;justify-content:center}.school-top{max-width:1260px;padding:22px 28px;margin:auto;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #b59aff38;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px}.school-sign{font:600 12px/1.2 var(--af-font-mono);letter-spacing:.08em;color:#7cf8d2;border-left:1px solid #b59aff55;padding-left:14px}.school-top>a:last-child{font-size:14px;color:#ded5ef}main{max-width:1204px;padding:0 28px;margin:auto}.school-hero{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center;padding:70px 0 50px}.eyebrow{font:700 11px/1.5 var(--af-font-mono);letter-spacing:.12em;color:#7cf8d2}.school-hero h1{font:900 clamp(44px,6vw,76px)/1.01 var(--af-font-body);letter-spacing:-.055em;color:#fff6df;margin:18px 0 24px}.school-hero p:not(.eyebrow){font-size:17px;color:#c2b8df;max-width:40ch}.school-hero .btn{margin-top:12px}.school-illustration{position:relative;height:415px;border-radius:40% 45% 25% 35%;background:#f4e5bb;transform:rotate(-3deg);overflow:hidden;box-shadow:20px 25px #c4a1f11a}.paper-grid{position:absolute;inset:0;background:linear-gradient(#705e9a18 1px,transparent 1px),linear-gradient(90deg,#705e9a18 1px,transparent 1px);background-size:28px 28px}.fraction-stamp{position:absolute;top:40px;left:55px;transform:rotate(12deg);display:grid;place-items:center;color:#41274d;font:800 58px/.9 var(--af-font-body)}.fraction-stamp hr{width:60px;border:0;border-top:5px solid #41274d;margin:10px 0}.pizza{position:absolute;right:30px;top:100px;width:205px;height:205px;border-radius:50%;background:conic-gradient(#e4976e 0 90deg,#b694d5 90deg 180deg,#89bea4 180deg 270deg,#f4e5bb 270deg);border:8px solid #573457;transform:rotate(10deg)}.pizza:after{content:'';position:absolute;inset:calc(50% - 2px) -3px auto;height:4px;background:#573457;transform:rotate(0)}.pizza:before{content:'';position:absolute;inset:-3px auto -3px calc(50% - 2px);width:4px;background:#573457}.scribble{position:absolute;bottom:45px;left:35px;color:#573457;font:900 25px/1 var(--af-font-body);letter-spacing:-.04em;transform:rotate(3deg)}.shape{position:absolute}.triangle{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:50px solid #cb7d7c;left:55px;bottom:100px;transform:rotate(-15deg)}.diamond{width:36px;height:36px;background:#7cad98;transform:rotate(45deg);top:35px;right:65px}.school-star{position:absolute;left:35%;top:42%;font-size:62px;color:#8d66b7}.school-status{font:600 11px/1.6 var(--af-font-mono);letter-spacing:.04em;color:#c2b8df;border-block:1px solid #b59aff38;padding:15px 0;margin:20px 0 30px}.school-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.school-grid article{border:1px solid #b59aff44;border-radius:20px;overflow:hidden;background:#1f173c}.school-cover{height:235px;padding:28px;position:relative;overflow:hidden;display:flex;align-items:center;gap:20px}.school-cover b{font:900 38px/.95 var(--af-font-body);letter-spacing:-.04em;position:relative;z-index:1}.school-cover>span{position:absolute;font:900 150px/1 var(--af-font-body);right:15px;top:25px;opacity:.15}.fraction-cover{background:#dec698;color:#3f3049}.signal-cover{background:#224f50;color:#d7f2d9}.fraction-bar{display:flex;position:absolute;bottom:25px;left:28px;width:60%;height:22px;border:2px solid #513954;border-radius:5px;overflow:hidden}.fraction-bar i{width:25%;border-right:2px solid #513954;background:#9474af}.fraction-bar i:last-child{background:#f4e5bb;border:0}.signal-dots{position:absolute;right:28px;bottom:20px;line-height:.9;color:#94e0b0;opacity:.4;font-size:35px}.school-card-body{display:grid;gap:12px;padding:28px}.school-card-body h2{font-size:26px;letter-spacing:-.03em;margin:0}.school-card-body p{color:#c2b8df;margin:0}.school-card-body .eyebrow{color:#7cf8d2;font-size:10px}.school-card-body .skill-line{font-size:12px;color:#ddc9f7}.school-card-body .btn{justify-self:start;margin-top:8px}.teacher-guide{padding:60px 0 35px}.teacher-guide>h2{font-size:38px;letter-spacing:-.04em;margin:15px 0 25px}.teacher-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}.teacher-columns h3{font-size:17px;line-height:1.4}.teacher-columns p,.teacher-columns li{color:#c2b8df;font-size:14px}.teacher-columns li{padding-bottom:12px}.teacher-columns ol{padding-left:18px}.teacher-guide details{border:1px solid #b59aff44;border-radius:12px;padding:16px 20px;margin:20px 0;color:#c2b8df;font-size:14px}.teacher-guide summary{cursor:pointer;min-height:30px;color:#fff6df;font-weight:700}.school-footer{border-top:1px solid #b59aff38;padding:20px 0 40px;font:600 12px/1.5 var(--af-font-mono);color:#7cf8d2;display:flex;gap:15px;justify-content:space-between;flex-wrap:wrap}.school-footer span{color:#c2b8df}.school-top .af-wordmark:after{animation:none;display:none}#schoolLoad{color:#ff879e}#schoolMount{min-width:0;isolation:isolate}@media(max-width:760px){.school-top{padding:18px}.brand{font-size:19px}.school-sign{padding-left:8px;font-size:10px}main{padding:0 16px}.school-hero{grid-template-columns:1fr;gap:30px;padding-top:35px}.school-hero h1{font-size:54px}.school-illustration{height:290px;max-width:400px;width:100%;justify-self:center;margin-bottom:10px}.pizza{width:155px;height:155px;top:75px}.fraction-stamp{top:35px;left:35px;font-size:40px}.fraction-stamp hr{width:45px}.scribble{bottom:28px;font-size:21px}.triangle{bottom:75px;border-bottom-width:35px;border-left-width:20px;border-right-width:20px}.school-grid,.teacher-columns{grid-template-columns:1fr}.school-cover{height:210px}.teacher-guide{padding-top:35px}.teacher-columns{gap:5px}.teacher-guide>h2{font-size:31px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}@media(forced-colors:active){.school-grid article,.school-status,.teacher-guide details{border:1px solid CanvasText}.school-cover{background:Canvas;color:CanvasText}}

/* Game mode has one compact header and a viewport-sized stage. */
body[data-school-playing="true"]{height:100svh;display:flex;flex-direction:column;overflow:hidden}
body[data-school-playing="true"] .school-top{flex:none;width:100%;max-width:none;padding:10px 16px;box-sizing:border-box;gap:12px}
body[data-school-playing="true"] .school-top .af-wordmark,body[data-school-playing="true"] .school-sign{display:none}
body[data-school-playing="true"] main{flex:1;min-height:0;width:100%;max-width:none;padding:0;display:flex;box-sizing:border-box}
body[data-school-playing="true"] #schoolPlayer{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
body[data-school-playing="true"] #schoolMount{flex:1;height:auto;min-height:0;border-radius:0;overflow:auto;overscroll-behavior:contain}
#schoolGameTitle{font:700 clamp(17px,3vw,24px)/1.2 var(--af-font-body);margin:0 0 0 auto;color:var(--af-cream)}
#schoolLoad:empty{display:none}
@media(max-width:450px){body[data-school-playing="true"] .school-top{gap:8px;padding:8px}body[data-school-playing="true"] #schoolBack{font-size:13px;padding:8px}#schoolGameTitle{font-size:17px}}