/* Login-only styles; the illustration uses CSS transforms, without JS or WebGL. */
body.login-screen{background:#f4f5f0;color:#243b3a;min-height:100dvh}
.login-screen .app{display:block;width:min(100%,1040px);max-width:1040px;margin:auto;padding:0 32px;box-sizing:border-box;background:transparent;box-shadow:none}
.login-screen .flash{margin:20px 0 0;border-radius:12px}
.simple-login{padding:38px 0 22px}
.simple-brand{display:flex;align-items:center;gap:12px;margin-bottom:48px}
.simple-brand img{width:42px;height:42px;object-fit:contain}
.simple-brand strong,.simple-brand span{display:block}.simple-brand strong{font-size:17px;letter-spacing:-.03em}.simple-brand span{margin-top:2px;color:#64756d;font-size:11px}
.simple-login-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:84px}
.simple-login-form{max-width:360px;padding:12px 0}
.simple-eyebrow{color:#5e786f;font-size:9px;letter-spacing:.18em;font-weight:700}
.simple-login-form h1{font-size:38px;line-height:1.15;letter-spacing:-.045em;font-weight:600;margin:12px 0;color:#203e36}
.simple-login-form>p{color:#69796f;font-size:13px;margin:0 0 30px}
.simple-login-form label{display:block;font-size:12px;font-weight:600;margin:19px 0 9px;color:#334b42}
.simple-login-form input:not([type=hidden]){box-sizing:border-box;width:100%;min-height:52px;border:1px solid #cad4c9;border-radius:11px;background:#fff;color:#233d34;font:inherit;font-size:15px;padding:13px 15px;box-shadow:none}
.simple-login-form input:focus-visible{outline:2px solid #3a7561;outline-offset:3px}
.simple-login-form .pin-code{margin:0;height:52px}
.simple-login-form .pin-input{height:52px}
.simple-login-form .pin-boxes{gap:8px}
.simple-login-form .pin-boxes span{height:52px;border:1px solid #cad4c9;border-radius:10px;background:#fff;color:#294e40;box-shadow:none;font-size:25px}
.simple-login-form .pin-code.focused .pin-boxes span.active{border-color:#3a7561;box-shadow:0 0 0 2px #3a756120}
.simple-login-form #login-pin-note{display:block;font-size:10px;color:#718176;margin-top:10px}
.simple-submit{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;padding:12px 18px;margin-top:25px;background:#254d3e;color:#fff;border:1px solid #254d3e;border-radius:11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.simple-submit:hover{background:#193b2e}.simple-submit span{font-size:19px}
.simple-activate{font-size:11px;text-align:center;color:#687a6e;margin:18px 0 0}.simple-activate a{color:#2b6049;font-weight:600;text-underline-offset:3px}
.simple-game-link{position:relative;display:flex;flex-direction:column;min-width:0;min-height:440px;padding:25px 26px 27px;border:1px solid #d2ddd0;border-radius:25px;background:radial-gradient(ellipse at 48% 38%,#f0f4df,#e3ebdd 75%);color:#244b3e;text-decoration:none;overflow:hidden;isolation:isolate;transition:border-color .2s,box-shadow .2s}
.simple-game-link:hover{border-color:#88a58c;box-shadow:0 16px 32px #28482d0d}
.simple-game-tag{position:relative;z-index:1;font-size:9px;font-weight:600;letter-spacing:.17em;color:#67816a}
.simple-game-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;position:relative;z-index:1}
.simple-game-caption h2{font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:0 0 7px;color:#294f3c}
.simple-game-caption p{font-size:11px;color:#5f7762;line-height:1.5;margin:0 0 14px}
.simple-game-caption small{font-size:9px;color:#607d65;border:1px solid #b9cdb6;border-radius:20px;padding:4px 8px}
.simple-game-arrow{display:grid;place-items:center;flex:0 0 37px;height:37px;border:1px solid #a8c1a8;border-radius:50%;font-size:20px}
.simple-login-footer{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid #dce2d7;color:#7a897d;font-size:10px}
.simple-game-link:focus-visible,.simple-submit:focus-visible,.simple-activate a:focus-visible{outline:3px solid #6b9177;outline-offset:5px}
/* A tiny cutaway classroom, modeled with CSS planes and cuboids. */
.login-miniature{position:relative;height:260px;perspective:850px;pointer-events:none}
.mini-shadow{position:absolute;width:230px;height:100px;left:50%;top:50%;background:#77906c22;border-radius:50%;filter:blur(16px);transform:translate(-50%,-8%) rotate(-14deg)}
.mini-room{position:absolute;width:210px;height:180px;left:50%;top:56%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(58deg) rotateZ(-36deg);animation:mini-room-float 7s ease-in-out infinite}
.mini-room *{position:absolute;box-sizing:border-box;transform-style:preserve-3d}
.mini-floor{inset:0;background:repeating-linear-gradient(90deg,transparent 0 34px,#c4cfb5 35px 36px),repeating-linear-gradient(0deg,#e3e8ce 0 34px,#c4cfb5 35px 36px);border:5px solid #a4b69a;box-shadow:7px 9px 0 #8ea58a;border-radius:3px}
.mini-back{left:0;top:0;width:210px;height:105px;transform-origin:top;transform:rotateX(90deg);background:#fbf9e9;border:5px solid #b9c7a7;border-bottom:11px solid #93ad8e}
.mini-board{left:26px;top:21px;width:104px;height:56px;border:5px solid #d3b88c;background:#355b4b;box-shadow:0 2px 0 #a18c65}
.mini-board i{height:2px;width:45px;background:#bdd0b7;left:12px;top:11px;opacity:.7}.mini-board i:nth-child(2){top:22px;width:65px}.mini-board i:nth-child(3){top:32px;width:30px}
.mini-clock{right:19px;top:24px;width:24px;height:24px;border:3px solid #9caf93;background:#fffdef;border-radius:50%}.mini-clock:after{content:'';position:absolute;left:8px;top:4px;width:5px;height:8px;border-left:2px solid #4f715b;border-bottom:2px solid #4f715b}
.mini-side{left:0;top:0;width:105px;height:180px;transform-origin:left;transform:rotateY(-90deg);background:#d4dfc5;border:5px solid #b2c1a2}
.mini-side>span{left:20px;top:27px;width:60px;height:79px;border:6px solid #f5f5df;background:linear-gradient(90deg,transparent 46%,#f5f5df 47% 54%,transparent 55%),linear-gradient(0deg,transparent 46%,#f5f5df 47% 54%,transparent 55%),#a4c3ba}
.mini-desk{width:52px;height:35px;left:40px;top:68px;background:#cfaa78;border:3px solid #e7c99d;transform:translateZ(27px);box-shadow:3px 3px 0 #9a7b57}
.mini-desk:before,.mini-desk:after{content:'';position:absolute;width:5px;height:27px;background:#526952;top:25px;transform-origin:top;transform:rotateX(-90deg)}.mini-desk:before{left:4px}.mini-desk:after{right:4px}
.mini-desk i{width:21px;height:15px;left:9px;top:6px;background:#f9f2d8;border-left:3px solid #6f9a83;border-radius:1px}
.mini-desk b{width:37px;height:19px;left:5px;top:44px;background:#708c6e;border:3px solid #9db293;transform:translateZ(-13px)}
.desk-two{left:124px;top:68px}.desk-three{left:85px;top:131px}
.mini-door{right:-1px;top:-1px;width:40px;height:85px;transform-origin:top;transform:rotateX(90deg) translateZ(1px);border:4px solid #c6ac82;background:#749780}
.mini-door span{right:5px;top:45px;width:5px;height:5px;background:#eddb9f;border-radius:50%}
.mini-plant{right:15px;top:119px;width:19px;height:19px;border-radius:50%;background:#b38664;transform:translateZ(9px)}
.mini-plant i{left:7px;top:5px;width:5px;height:34px;background:#637c4d;transform-origin:bottom;transform:rotateX(-90deg)}
.mini-plant b{left:-7px;top:-9px;width:32px;height:30px;background:#75985c;border-radius:50% 40% 50% 30%;transform:translateZ(33px)}
@keyframes mini-room-float{50%{transform:translate(-50%,calc(-50% - 6px)) rotateX(58deg) rotateZ(-33deg)}}
@media(prefers-reduced-motion:reduce){.mini-room{animation:none}.simple-game-link,.simple-submit{transition:none}}
@media(max-width:800px){.login-screen .app{padding:0 24px}.simple-login-grid{gap:38px}.simple-login-form h1{font-size:32px}.simple-game-link{padding:22px;min-height:420px}.simple-brand{margin-bottom:30px}.simple-game-caption h2{font-size:20px}.login-miniature{transform:scale(.85)}}
@media(max-width:620px){.login-screen .app{max-width:440px;padding:0 24px}.simple-login{padding-top:25px}.simple-login-grid{grid-template-columns:1fr;gap:30px}.simple-login-form{max-width:none;padding:0}.simple-login-form h1{font-size:33px}.simple-login-form>p{margin-bottom:25px}.simple-game-link{min-height:0;padding:18px 20px;display:grid;grid-template-columns:115px 1fr;gap:14px;align-items:center;border-radius:18px}.simple-game-tag{display:none}.login-miniature{height:130px;transform:scale(.5);transform-origin:center;grid-column:1;grid-row:1}.mini-room{top:55%}.simple-game-caption{margin:0;grid-column:2;grid-row:1;gap:8px}.simple-game-caption h2{font-size:18px}.simple-game-caption p{font-size:10px;margin-bottom:10px}.simple-game-arrow{flex-basis:27px;height:27px;font-size:16px}.simple-game-caption small{font-size:8px}.simple-login-footer{margin-top:28px;padding-top:17px;font-size:9px}.simple-login-footer span{display:none}}