/* School stories share the same palette, each with its own scene. */
.school-scene{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex-direction:column}
.school-scene:before{content:"";position:absolute;inset:12% 7% 5%;z-index:-1;background:radial-gradient(ellipse,#b8dfc94d,transparent 68%);border-radius:50%;pointer-events:none}
.school-scene img{display:block;object-fit:contain;max-width:100%;animation:school-drift 7s ease-in-out infinite;transform-origin:50% 85%;filter:drop-shadow(0 13px 15px #4c806312)}
.login-illustration{width:100%;max-width:450px;margin:14px 0 0;height:244px}
.login-illustration img{width:400px;height:232px}
.story{padding:32px 0 30px}.story h1{font-size:clamp(34px,3.2vw,52px);margin:21px 0 18px}.story p{margin-bottom:0}.story-cards{margin-top:18px;gap:24px}.story-cards>div{font-size:14px}.story-cards small{margin-top:5px;font-size:10px}
.school-spark{position:absolute;pointer-events:none;z-index:-1;animation:school-sparkle 5s ease-in-out infinite;color:#b69a55;font-size:22px;line-height:1}
.school-spark.one{top:22%;left:8%;animation-delay:-1s}.school-spark.two{top:17%;right:10%;color:#7ba990;font-size:15px;animation-delay:-3s}.school-spark.three{bottom:20%;right:5%;color:#83b79a;font-size:17px;animation-delay:-2s}
.motion-toggle{font-size:9px;letter-spacing:.2px;color:#527361;padding:5px 8px;border:0;background:#ffffff24;border-radius:20px;align-self:flex-end;display:flex;align-items:center;gap:5px;min-height:28px;position:absolute;bottom:0;right:9px}
.motion-toggle:before{content:"Ⅱ";font-size:10px}.motion-toggle:hover{background:#ffffff7a}.motion-toggle[aria-pressed="true"]:before{content:"▷"}
.welcome-art.school-scene{flex:0 0 340px;width:340px;height:250px;margin:0 10px 0 0}
.welcome-art.school-scene:before{inset:5%;width:auto;height:auto;background:radial-gradient(ellipse,#b8e5cc45,transparent 70%);box-shadow:none;border:0;border-radius:50%;transform:none}
.welcome-art.school-scene:after{display:none}
.welcome-art.school-scene img{width:330px;height:245px;filter:drop-shadow(0 14px 15px #38735213)}
.welcome-art .school-spark.one{left:1%;top:18%}.welcome-art .school-spark.two{right:3%;top:30%}
.motion-paused .school-scene img,.motion-paused .school-spark{animation-play-state:paused}
@keyframes school-drift{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-6px) rotate(.35deg)}}
@keyframes school-sparkle{0%,100%{opacity:.4;transform:translateY(0) scale(.9)}50%{opacity:.9;transform:translateY(-7px) scale(1.1)}}
@media(min-width:1600px){.login-illustration{height:275px;max-width:490px}.login-illustration img{height:270px;width:450px}.story{padding:30px 0}.welcome-art.school-scene{width:390px;flex-basis:390px;height:270px}.welcome-art.school-scene img{width:380px;height:270px}}
@media(max-width:1100px){.login-illustration{height:220px}.login-illustration img{height:210px;width:360px}.story{padding:30px 0 20px}.story h1{font-size:36px}.welcome-art.school-scene{width:255px;flex-basis:255px;height:225px;margin:0}.welcome-art.school-scene img{width:250px;height:220px}.welcome{gap:15px}.welcome h2{font-size:28px}}
@media(max-width:760px){.login-story{padding-top:25px}.story{padding:20px 0 0}.story h1{font-size:27px;line-height:1.22;margin:0}.login-illustration{height:155px;max-width:300px;margin:9px auto -3px}.login-illustration img{width:260px;height:155px}.login-illustration .motion-toggle{right:-9px;bottom:0;font-size:8px}.login-panel{padding-top:13px}.login-form h2{margin-top:16px}.login-illustration .school-spark.one{left:3%;font-size:18px}.login-illustration .school-spark.two{right:1%}.welcome{flex-wrap:wrap;padding-bottom:15px}.welcome>div:first-child{flex:1 1 100%}.welcome-art.school-scene{display:flex;flex:0 0 100%;width:100%;height:210px;margin:0 auto 5px}.welcome-art.school-scene img{width:285px;height:210px}.welcome-art .motion-toggle{right:15px;bottom:0}.welcome-art .school-spark.one{left:12%}.welcome-art .school-spark.two{right:12%}.school-scene:before{inset:6% 15%}.story-cards{display:none}}
@media(prefers-reduced-motion:reduce){.school-scene img,.school-spark{animation:none!important}.motion-toggle{display:none}}
@media print{.school-scene,.motion-toggle{display:none!important}}