:root{color:#e9f2f8;font-synthesis:none;text-rendering:optimizelegibility;background:#10202f;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100dvh;margin:0;overflow:hidden}.lesson-shell{place-items:center;width:100vw;height:100dvh;display:grid;position:relative;overflow:hidden}.lesson-shell>h1{display:none}#app{width:min(100vw, calc(100dvh * var(--stage-aspect-ratio)));height:min(100dvh, calc(100vw / var(--stage-aspect-ratio)));line-height:0;position:relative;overflow:hidden}#app canvas{width:100%!important;height:100%!important;display:block!important}#start-lesson{z-index:15;color:#10202f;font:inherit;cursor:pointer;background:#e9f2f8;border:1px solid #b9d5e6;border-radius:.4rem;margin:0;padding:.6rem 1rem;font-weight:700;position:fixed;bottom:1.75rem;left:50%;translate:-50%}#start-lesson.start-lesson-button--image{background:0 0;border:none;padding:0}#start-lesson img{width:min(24rem,92vw);height:auto;display:block}#start-lesson:disabled{cursor:wait;opacity:.6}.return-to-lobby{z-index:15;color:#e9f2f8;margin:0;font-weight:700;position:fixed;bottom:1.75rem;left:50%;translate:-50%}.status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lobby-shell{--sky:#9ad7f3;--ground:#9b6438;--accent:#d66d2f;color:#17344a;background:radial-gradient(circle at 18% 16%, #fffc 0 4%, transparent 4.5%), radial-gradient(circle at 72% 12%, #ffffffa6 0 6%, transparent 6.5%), linear-gradient(var(--sky) 0 68%, var(--ground) 68%);place-items:center;min-height:100vh;padding:1.5rem;display:grid;overflow:hidden}.lobby-winter{--sky:#cce9f7;--ground:#f6fbff;--accent:#397eb4}.lobby-spring{--sky:#aee4f1;--ground:#75b957;--accent:#e44c83}.lobby-summer{--sky:#78cff1;--ground:#e8c662;--accent:#e77628}.lobby-b{filter:saturate(1.06)}.lobby-c{filter:hue-rotate(-4deg)saturate(1.12)}.lobby{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffd1;border:5px solid #ffffffbf;border-radius:2rem;width:min(100%,640px);min-height:min(480px,100vh - 3rem);padding:clamp(1.25rem,4vw,2rem);box-shadow:0 1.5rem 4rem #1e405547}.lobby-header{text-align:center}.lobby-header h1{color:#17344a;margin:0;font-size:clamp(2rem,8vw,3.4rem);line-height:1}.lobby-header p{margin:.4rem 0}.lobby-eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;font-weight:800}.lobby-path{grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;margin-top:1.5rem;display:grid}.lesson-card{color:#17344a;min-height:12rem;font:inherit;cursor:pointer;background:linear-gradient(#fff7c5,#ffd45e);border:0;border-radius:4rem 4rem 1.2rem 1.2rem;align-content:space-between;padding:.75rem .55rem;transition:translate .12s,box-shadow .12s;display:grid;box-shadow:0 .45rem #d19a26}.lesson-card:hover:not(:disabled),.lesson-card:focus-visible:not(:disabled){translate:0 -.25rem;box-shadow:0 .7rem #d19a26}.lesson-card:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.5}.lesson-card[data-completed=true]{background:linear-gradient(#dcffd0,#8dd76d);box-shadow:0 .45rem #4b9b45}.lesson-number{color:#fff;background:var(--accent);border-radius:50%;justify-self:center;place-items:center;width:2.6rem;height:2.6rem;font-size:1.25rem;font-weight:900;display:grid}.lesson-description{font-size:.82rem;font-weight:800;line-height:1.15}.lesson-state{text-transform:uppercase;font-size:.68rem;font-weight:700;line-height:1.1}.lobby-message{text-align:center;min-height:1.4em;margin:1.25rem 0 0}.more-button{color:#fff;background:var(--accent);box-shadow:0 .35rem 0 color-mix(in srgb, var(--accent), #000 28%);font:inherit;cursor:pointer;border:0;border-radius:999px;margin:.75rem auto 0;padding:.75rem 1.4rem;font-weight:900;display:block}@media (width<=600px){.lobby-path{grid-template-columns:1fr}.lesson-card{text-align:left;border-radius:999px;grid-template-columns:auto 1fr auto;align-items:center;min-height:auto}}.setup-shell{color:#17344a;background:radial-gradient(circle at 15% 20%,#fff 0 3%,#0000 3.5%),radial-gradient(circle at 80% 15%,#fff9 0 5%,#0000 5.5%),linear-gradient(160deg,#8bd5f2,#dff4fb 62%,#82bc66 62%);place-items:center;min-height:100vh;padding:4.5rem 1.5rem 1.5rem;display:grid}.setup-card{text-align:center;background:#ffffffe0;border:5px solid #ffffffc7;border-radius:2rem;width:min(100%,640px);padding:clamp(1.5rem,5vw,3rem);box-shadow:0 1.5rem 4rem #1e405540}.setup-card h1{color:#17344a;margin:.25rem 0 .75rem;font-size:clamp(2rem,8vw,3.3rem)}.setup-eyebrow{color:#dc662c;letter-spacing:.15em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:900}.setup-lead{margin-bottom:1.5rem}.main-actions{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.setup-primary,.setup-secondary,.student-button{font:inherit;border:0;border-radius:1rem;padding:1rem;font-weight:900}.setup-primary{color:#fff;cursor:pointer;background:#dc662c;box-shadow:0 .35rem #a74418}.setup-secondary{color:#526775;background:#d9e3e8}.main-actions button{place-content:center;gap:.35rem;min-height:8rem;font-size:1.2rem;display:grid}.main-actions small,.student-button small{font-size:.72rem;font-weight:600}.student-list{gap:.65rem;max-height:17rem;margin:1.5rem 0;padding:.25rem;display:grid;overflow-y:auto}.student-button{color:#17344a;cursor:pointer;background:#dff4fb;justify-content:space-between;align-items:center;display:flex;box-shadow:0 .25rem #96c8dc}.empty-students{color:#607786}.add-student-form{text-align:left;gap:.55rem;display:grid}.add-student-form label{font-weight:800}.add-student-form div{grid-template-columns:1fr auto;gap:.6rem;display:grid}.add-student-form input{min-width:0;font:inherit;border:2px solid #96c8dc;border-radius:.8rem;padding:.75rem}.tutorial-steps{text-align:left;gap:.75rem;margin:1.5rem 0;display:grid}.tutorial-steps article{background:#e9f6fb;border-radius:1rem;grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding:.75rem 1rem;display:grid}.tutorial-steps strong{color:#fff;background:#dc662c;border-radius:50%;place-items:center;width:2.5rem;height:2.5rem;display:grid}.tutorial-steps p{margin:0}.nav-overlay-layer{z-index:8;pointer-events:none;position:absolute;inset:0}.nav-overlay-canvas{width:100%!important;height:100%!important;display:block!important;position:absolute!important;inset:0!important}.nav-overlay-hit{z-index:9;opacity:0;cursor:pointer;pointer-events:auto;border:0;padding:0;position:absolute}.nav-overlay-hit:focus-visible{outline-offset:2px;opacity:.15;outline:4px solid #fff600}.nav-overlay-title{pointer-events:none;position:absolute;overflow:hidden}.nav-overlay-title-banner{color:#fff;text-align:center;text-wrap:balance;background:#3b4384;border:2px solid #f7f8f8;border-radius:.4rem;place-items:center;width:100%;height:100%;margin:0;padding:0 10.5% 0 5%;font-family:Arial Rounded MT Bold,Arial,sans-serif;font-size:clamp(.5rem,2.3vw,1.05rem);font-weight:800;line-height:1.1;transition:translate .25s ease-out;display:grid;translate:100%}.nav-overlay-title[data-open=true] .nav-overlay-title-banner{translate:0}@media (prefers-reduced-motion:reduce){.nav-overlay-title-banner{transition-duration:0s}}.confirm-dialog{color:#17344a;border:0;border-radius:1rem;max-width:min(90vw,26rem);padding:1.5rem;box-shadow:0 1rem 4rem #00000059}.confirm-dialog::backdrop{background:#10202f8c}.confirm-form{gap:1.25rem;margin:0;display:grid}.confirm-message{text-align:center;margin:0;font-size:1.1rem;font-weight:800;line-height:1.3}.confirm-actions{justify-content:center;gap:.75rem;display:flex}.confirm-actions button{cursor:pointer;border:0;border-radius:999px;min-width:6rem;padding:.6rem 1.4rem;font-size:1rem;font-weight:800}.confirm-no{color:#17344a;background:#d7e3ec}.confirm-yes{color:#fff;background:#dc662c}.confirm-actions button:focus-visible{outline-offset:2px;outline:3px solid #24376d}@media (width<=520px){.main-actions{grid-template-columns:1fr}.main-actions button{min-height:6rem}}.legacy-screen{background:#24376d;place-items:center;width:100vw;height:100dvh;display:grid;overflow:hidden}.legacy-stage{width:min(100vw, calc(100dvh * var(--stage-aspect-ratio)));height:min(100dvh, calc(100vw / var(--stage-aspect-ratio)));background:#fff;position:relative;overflow:hidden}.splash-screen,.splash-stage{background:#67bff9}.splash-player,.splash-ruffle-player{width:100%;height:100%;display:block}.splash-skip{z-index:4;color:#17344a;font:inherit;cursor:pointer;background:#ffffffd9;border:2px solid #ffffffd9;border-radius:.5rem;padding:.55rem .9rem;font-weight:700;position:absolute;bottom:1rem;right:1rem}.splash-skip:not(:focus-visible):not(.splash-skip-visible){clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;overflow:hidden}.splash-skip:focus-visible{outline-offset:3px;outline:4px solid #fff600}.splash-status:not(.status){z-index:4;color:#17344a;text-align:center;background:#ffffffe6;margin:0;padding:.65rem;position:absolute;bottom:4rem;left:1rem;right:1rem}.splash-loading{z-index:3;text-align:center;background:#67bff9;grid-template-columns:min(30rem,100%);place-content:center;justify-items:center;gap:1.25rem;padding:2rem;display:grid;position:absolute;inset:0}.splash-loading-title{color:#12405f;margin:0;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800}.splash-loading-track{background:#fff9;border-radius:999px;width:min(20rem,60%);height:.75rem;position:relative;overflow:hidden}.splash-loading-bar{inset-block:0;border-radius:inherit;background:#12405f;width:40%;animation:1.4s ease-in-out infinite splash-loading-slide;position:absolute;left:0}@keyframes splash-loading-slide{0%{translate:-110%}to{translate:260%}}.splash-loading-detail{color:#17344a;margin:0;font-size:clamp(.95rem,2.5vw,1.15rem)}@media (prefers-reduced-motion:reduce){.splash-loading-bar{width:100%;animation:none}}.legacy-background,.extracted-artwork{width:100%;height:100%;display:block;position:absolute;inset:0}.extracted-artwork-canvas{width:100%!important;height:100%!important;display:block!important;position:absolute!important;inset:0!important}.legacy-background{object-fit:fill}.extracted-artwork{pointer-events:none}.legacy-hit{z-index:3;opacity:0;cursor:pointer;border:0;padding:0;position:absolute}.legacy-hit:focus-visible,.lesson-card:focus-visible,.lobby-rollover:focus-visible{outline-offset:3px;opacity:.15;outline:4px solid #fff600}.main-instructor-hit{width:22.4%;height:10.5%;top:38%;left:61.6%}.main-admin-hit{width:22.4%;height:10.5%;top:60.1%;left:61.7%}.legacy-main-prompt{z-index:2;color:#fff;text-align:center;width:44.7%;margin:0;font-family:Arial Rounded MT Bold,Arial,sans-serif;font-size:clamp(.85rem,3.75vw,1.5rem);font-weight:900;line-height:1.25;position:absolute;top:42%;left:12.7%}.welcome-instructor-hit{width:22.4%;height:10.5%;top:37.2%;left:62.2%}.welcome-add-hit{width:21.6%;height:16.3%;top:55%;left:62.2%}.tutorial-continue-hit{width:11%;height:9%;top:89%;left:87%}.tutorial-copy{z-index:2;color:#355f80;width:31%;font-size:clamp(.65rem,2.2vw,1.05rem);line-height:1.25;position:absolute;top:31%;left:12%}.tutorial-copy h2{color:#dc662c;margin:0 0 .75rem;font-size:1.35em}.tutorial-copy ol{gap:.55rem;margin:0;padding-left:1.25rem;display:grid}.legacy-student-list{z-index:3;background:#fff;align-content:start;gap:.2rem;width:47%;height:49%;max-height:none;margin:0;padding:.35rem;display:grid;position:absolute;top:28.4%;left:11.8%;overflow-y:auto}.legacy-student-list .student-button{min-height:2.4rem;box-shadow:none;background:#fff;border-radius:0;padding:.35rem .55rem;font-size:clamp(.7rem,2.2vw,.95rem)}.legacy-student-list .student-button:hover,.legacy-student-list .student-button:focus-visible{background:#cce7f4}.add-student-dialog,.setup-dialog{color:#17344a;border:4px solid #354a87;border-radius:1rem;box-shadow:0 1rem 4rem #00000073}.add-student-dialog::backdrop,.setup-dialog::backdrop{background:#10202f99}.setup-dialog-form{text-align:left;gap:.55rem;min-width:min(22rem,80vw);display:grid}.setup-dialog-form h2,.setup-dialog-form p{margin:0}.setup-dialog-form p{font-weight:700}.setup-dialog-error{color:#b42318;min-height:1.2em;margin:0;font-weight:800}.setup-dialog-actions{grid-template-columns:1fr auto;gap:.6rem;display:grid}.setup-dialog-form input{min-width:0;font:inherit;border:2px solid #96c8dc;border-radius:.8rem;padding:.75rem}.legacy-lobby .lobby-rollovers{z-index:3;pointer-events:none;display:block;position:absolute;inset:0}.legacy-lobby .lobby-rollover{opacity:0;min-height:0;box-shadow:none;cursor:pointer;pointer-events:auto;background:0 0;border:0;padding:0;position:absolute}.legacy-lobby .lobby-path{z-index:4;pointer-events:none;margin:0;display:block;position:absolute;inset:0}.legacy-lobby .lesson-card{opacity:0;min-height:0;box-shadow:none;pointer-events:auto;border-radius:50%;padding:0;position:absolute}.legacy-lobby .lesson-card:disabled{pointer-events:none}.legacy-lobby .lobby-status-stack{z-index:3;flex-direction:column;align-items:center;gap:20px;max-width:92%;display:flex;position:absolute;top:2%;left:50%;translate:-50%}.lobby-student-status{color:#fff;background:#24376de0;border-radius:999px;margin:0;padding:.25rem .7rem;font-size:clamp(.65rem,2vw,.85rem);font-weight:800}.legacy-lobby .lobby-message{color:#fff;text-align:center;background:#10483ee0;border-radius:1rem;min-height:0;margin:0;padding:.45rem 1rem;font-size:clamp(1rem,3vw,1.35rem);font-weight:900;line-height:1.2}@media (width<=600px){.legacy-lobby .lobby-message{font-size:clamp(.72rem,2.6vw,.95rem)}}.legacy-lobby .more-button{z-index:5;position:absolute;bottom:12%;right:4%}.legacy-lobby .more-handle{z-index:7;cursor:pointer;background:0 0;border:0;padding:0;position:absolute}.legacy-lobby .more-handle:focus-visible{outline-offset:3px;outline:4px solid #fff600}.legacy-lobby .lobby-reward{z-index:6;position:absolute;inset:0}.legacy-lobby .lobby-reward-movie{width:100%;height:100%;display:block}.legacy-lobby .lobby-reward-status{color:#fff;background:#24376de0;border-radius:999px;margin:0;padding:.7rem 1.6rem;font-size:clamp(.7rem,2vw,1rem);font-weight:900;position:absolute;top:50%;left:50%;translate:-50% -50%}.legacy-lobby .lobby-reward-skip{z-index:7;color:#fff;font:inherit;cursor:pointer;background:#24376dc7;border:0;border-radius:999px;padding:.35rem .9rem;font-size:clamp(.6rem,1.8vw,.8rem);font-weight:900;position:absolute;bottom:4%;right:2%}.legacy-lobby .lobby-reward-skip:focus-visible{outline-offset:3px;outline:4px solid #fff600}.setup-animation{z-index:6;position:absolute;inset:0}.legacy-lobby .setup-animation,.legacy-lobby .setup-animation .extracted-artwork-canvas{pointer-events:none}.legacy-lobby .setup-animation .setup-animation-clicker,.legacy-lobby .more-handle{pointer-events:auto}.setup-animation-clicker{font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:3%;display:flex;position:absolute;inset:0}.setup-animation-clicker.is-playing{justify-content:flex-end;align-items:flex-end}.setup-animation-hint{color:#fff;background:#24376de0;border-radius:999px;align-items:center;gap:.4rem;padding:.7rem 1.6rem;font-size:clamp(.9rem,3vw,1.4rem);font-weight:900;display:inline-flex;box-shadow:0 .35rem #1a284e}.setup-animation-hint:before{content:"▶";font-size:.9em}.setup-animation-clicker.is-playing .setup-animation-hint{box-shadow:none;background:#24376dc7;padding:.35rem .9rem;font-size:clamp(.6rem,1.8vw,.8rem)}.setup-animation-clicker.is-playing .setup-animation-hint:before{content:none}.setup-animation-clicker:focus-visible .setup-animation-hint{outline-offset:3px;outline:4px solid #fff600}.legacy-lobby[data-intro=playing] .lobby-path,.legacy-lobby[data-intro=playing] .lobby-status-stack{display:none}.visually-hidden{clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;position:absolute!important;overflow:hidden!important}