:root{--ink:#263750;--muted:#64748b;--cream:#faf8f2;--white:#fff;--blue:#346ee5;--blue-dark:#1e54ca;--orange:#ffc27c;--mint:#d4f3e3;--pink:#ffdfdd;--yellow:#fff0b7;--border:#e6e9e9;--shadow:0 15px 50px rgba(41,62,74,.09);font-family:ui-rounded,"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 12% 14%,#fff8e7 0,transparent 29%),radial-gradient(circle at 93% 25%,#e9f7ec 0,transparent 27%),var(--cream)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #67aeef;outline-offset:3px}a{color:inherit;text-decoration:none}main{flex:1}.page{max-width:1220px;margin:auto;padding:30px 28px 82px}.is-hidden{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.155em;color:#607d87;text-transform:uppercase}h1,h2,h3,p{margin:0}h1,h2{letter-spacing:-.045em}h1{font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.11}h2{font-size:1.65rem}p{line-height:1.62;color:#5c6c7e}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:1260px;width:100%;margin:auto;padding:0 28px}.brand{font-size:1.05rem;letter-spacing:-.06em;font-weight:950;white-space:nowrap;display:flex;align-items:center;gap:11px}.brand-mark{display:inline-grid;place-items:center;background:#ffbb75;width:41px;height:41px;border-radius:13px;color:#503a4d;font-size:2.1rem;line-height:1}.brand-accent{color:#e87859}.brand-pusle{color:#789099;font-weight:800}.topnav{display:flex;align-items:center;gap:4px;background:#ffffffa8;padding:5px;border:1px solid #f1eae1;border-radius:14px}.nav-button{border:0;background:transparent;color:#62758a;padding:10px 17px;border-radius:10px;font-weight:750;font-size:.9rem;white-space:nowrap}.nav-button:hover,.nav-button.is-active{background:#e8f0ff;color:#2a59b4}.nav-teacher{background:#fff6e6;color:#8d5a2c}.nav-teacher.is-active{background:#ffdb9c;color:#754722}
.hero{min-height:492px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:48px 0 56px}.hero-copy>.eyebrow{color:#348a79;margin-bottom:19px}.hero-copy h1{max-width:680px;font-size:clamp(2.8rem,5.3vw,4.75rem)}.text-highlight{color:#ed8967}.hero-copy>p{font-size:1.13rem;max-width:540px;margin-top:21px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:33px}.hero-copy .tiny-note{margin-top:24px;font-size:.8rem;color:#8a98a5}.btn{border:0;display:inline-flex;justify-content:center;align-items:center;gap:12px;border-radius:13px;padding:12px 18px;line-height:1.15;font-weight:800;font-size:.96rem;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 9px 24px #346ee530}.btn-primary:hover{background:var(--blue-dark)}.btn-outline{background:white;color:var(--ink);box-shadow:inset 0 0 0 1.5px #dbe4e9}.btn-outline:hover{background:#f5f8fc}.btn-soft{background:#eaf1fe;color:#315fb6}.btn-soft:hover{background:#dbe9fc}.btn-xl{padding:17px 26px;font-size:1.03rem}.fullwidth{width:100%}
.hero-art{height:420px;position:relative;display:grid;place-items:center}.sample-puzzle{width:320px;height:320px;transform:rotate(-7deg);filter:drop-shadow(14px 28px 30px #43425e1a);display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:5px}.sample-slice{display:grid;place-items:center;font-size:6rem;background:#d4efce;box-shadow:inset 0 0 0 2px #fff8f4}.piece-one{border-radius:27px 0 0 0;transform:translate(-6px,-7px)}.piece-two{background:#f5de9f;border-radius:0 29px 0 0;transform:translate(10px,9px)}.piece-three{background:#f8c8c5;border-radius:0 0 0 29px;transform:translate(-8px,12px)}.piece-four{background:#cbdcf7;border-radius:0 0 29px 0;transform:translate(9px,1px)}.floating-shape{font-size:4.8rem;position:absolute;color:#89bcaf}.floating-shape-one{top:10px;right:40px;transform:rotate(18deg)}.floating-shape-two{bottom:22px;left:32px;color:#f5c673;font-size:5rem}.hero-sticker{position:absolute;right:20px;bottom:38px;background:#fff;color:#4b6679;border-radius:16px;padding:12px 15px;font-size:1.2rem;font-weight:900;transform:rotate(9deg);box-shadow:0 14px 26px #26375016}.hero-sticker>span{color:#ed8c83;margin-left:6px}.section-heading{margin:16px 0 24px}.section-heading h2{margin-top:8px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:275px;border:1px solid #fff;padding:27px;border-radius:26px;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature-card-green{background:#dbf4e8}.feature-card-yellow{background:#fff0c6}.feature-card-pink{background:#fce4e3}.feature-icon{font-size:2.6rem;line-height:1.3}.feature-heading{font-size:1.35rem;letter-spacing:-.025em;font-weight:900;margin:13px 0 8px}.feature-text{font-size:.94rem;line-height:1.6;max-width:285px;color:#556a74}.feature-action{margin-top:auto;padding-top:22px;font-size:.93rem;font-weight:900;color:#3b678b}
.centered-page{min-height:66vh;display:grid;place-items:center}.entry-card{background:white;border:1px solid #ecedeb;border-radius:25px;padding:45px;box-shadow:var(--shadow);text-align:center;max-width:520px;width:100%}.large-icon{font-size:3.5rem;margin-bottom:13px}.entry-card h1{font-size:2.3rem;margin:11px 0}.entry-card>p{margin:13px 0 25px}.code-form{display:flex;gap:9px}.code-form input{min-width:0;flex:1;text-align:center;letter-spacing:.18em;font-size:1.5rem;font-weight:850;text-transform:uppercase;padding:13px 10px;border:2px solid #e6ebee;border-radius:12px}.code-form button{flex-shrink:0}.inline-error{color:#bd4758;font-size:.88rem;min-height:1.6em;margin-top:10px}.small-muted{font-size:.84rem;color:#7d8a98}
.play-page{max-width:1460px;padding-top:18px}.play-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:23px}.play-head h1{font-size:2.5rem;margin-top:6px}.play-head p{margin-top:6px}.play-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px;align-items:start}.controls-panel{padding:24px;background:white;border:1px solid #ebeeed;border-radius:22px;box-shadow:0 8px 30px #35465c0b}.control-title{display:flex;justify-content:space-between;font-weight:900;font-size:1.15rem;margin-bottom:20px}.control-title span{color:#a0b1c2}.control-label{font-size:.82rem;font-weight:850;display:block;margin:15px 0 8px}.controls-panel select,.teacher-card select,.teacher-card input:not([type=checkbox]),.stacked-form input,.library-search input{width:100%;border:1.5px solid #dfe5e9;background:#fff;border-radius:11px;padding:12px;font-weight:700;color:var(--ink)}.label-with-value{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.label-with-value .control-label{margin:8px 0}.value-pill{border-radius:999px;padding:6px 10px;font-weight:900;font-size:.78rem;background:#e9f2fd;color:#4970b2}.controls-panel input[type=range]{width:100%;accent-color:#346ee5;cursor:pointer;margin:9px 0}.range-labels{display:flex;justify-content:space-between;color:#94a3b4;font-size:.7rem}.switch-row{display:flex;align-items:center;position:relative;justify-content:space-between;gap:6px;font-size:.86rem;font-weight:800;margin:20px 0}.switch-row input{position:absolute;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.switch{height:24px;width:43px;border-radius:99px;background:#cbd5e1;position:relative;pointer-events:none;transition:background .2s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}.switch-row input:checked~.switch{background:#3e7adf}.switch-row input:checked~.switch:after{transform:translateX(19px)}.switch-row input:focus-visible~.switch{outline:3px solid #67aeef;outline-offset:3px}.side-divider{height:1px;background:#edf0f1;margin:24px 0}.stats-title{font-size:.84rem;font-weight:900;color:#6d7a88}.big-progress{font-size:2.8rem;font-weight:950;letter-spacing:-.04em;margin:4px 0}.progress-track{height:11px;border-radius:999px;background:#eaf0f2;overflow:hidden;margin-bottom:21px}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#66cba2,#349cbb);transition:width .28s}.stats-row{display:flex;justify-content:space-between;font-size:.86rem;margin:11px 0;color:#788797}.stats-row strong{color:var(--ink)}.reference-panel{background:#f4f8f8;border:1px solid #e9efed;margin-top:24px;border-radius:14px;padding:12px}.reference-caption{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:.79rem;font-weight:900}.reference-caption button{border:0;background:none;color:#4c77bc;font-weight:850;font-size:.78rem}.reference-panel img{display:block;width:100%;aspect-ratio:1.55;object-fit:contain;background:#e5eceb;border-radius:7px}.reference-panel.is-collapsed img{display:none}.attribution{font-size:.67rem;color:#7e8b96;line-height:1.4;margin-top:8px;word-break:break-word}.attribution a{text-decoration:underline}.board-wrapper{min-width:0}.board-top{background:#fff;border:1px solid #e8efec;border-radius:18px 18px 0 0;border-bottom:0;padding:13px 19px;display:flex;align-items:center;justify-content:space-between;color:#788594;font-size:.79rem;gap:8px}.live-dot{width:8px;height:8px;border-radius:50%;background:#5cc49c;display:inline-block;margin-right:5px}.board-top span:first-child{font-weight:800;color:#647783}.board{position:relative;display:grid;place-items:center;overflow:hidden;min-height:500px;height:min(66vh,730px);border:1px solid #dce9e5;background-color:#dcece7;background-image:radial-gradient(#adc8bf68 1.2px,transparent 1.2px);background-size:23px 23px;touch-action:none;user-select:none}.board:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 60px #9abbb017}.board .puzzle-svg{height:100%;width:100%;touch-action:none;cursor:grab}.board .puzzle-svg.dragging{cursor:grabbing}.piece-outline{cursor:grab;stroke:rgba(255,255,255,.9);stroke-width:2.5;paint-order:stroke;filter:drop-shadow(2px 4px 3px #203d453d)}.puzzle-svg.dragging .piece-outline{cursor:grabbing}.puzzle-piece:hover .piece-outline{stroke:#e9f8ff;stroke-width:4;filter:drop-shadow(3px 6px 4px #203d4550)}.board-tools{display:flex;justify-content:space-between;gap:7px;padding:12px 13px;background:#fff;border:1px solid #e8efec;border-top:0;border-radius:0 0 18px 18px}.tool-group{display:flex;gap:7px;align-items:center}.tool-button{border:1px solid #dfe7e9;background:#f7fafb;border-radius:9px;padding:9px 11px;min-height:38px;min-width:38px;color:#496075;font-size:.85rem;font-weight:900}.tool-button:hover{background:#ecf4fa}.tool-button:disabled{opacity:.4;cursor:default}.danger-button{color:#b56256;background:#fff9f6}.board-instructions{font-size:.74rem;color:#8b96a0;margin:12px 4px;line-height:1.65}.loading-state{text-align:center;font-size:1.18rem;font-weight:900;color:#507e77}.entry-card .small-muted{margin:20px 0 0}
.teacher-page{max-width:1130px}.teacher-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 0 35px}.teacher-heading h1{font-size:3rem;margin:8px 0}.teacher-heading p{font-size:1.08rem}.teacher-bubble{font-size:4.2rem;background:#fff0c6;border-radius:24px;padding:18px;transform:rotate(8deg)}.teacher-login{margin:auto}.teacher-login h2{margin-bottom:9px}.stacked-form{text-align:left;display:grid;gap:10px}.stacked-form label,.teacher-card>label{font-size:.83rem;font-weight:850;display:block;margin:17px 0 7px}.stacked-form button{margin-top:5px}.teacher-tools-header{display:flex;justify-content:space-between;color:#3c9179;font-size:.87rem;font-weight:800;margin-bottom:18px}.link-button{border:0;background:transparent;color:#6b7b90;text-decoration:underline}.teacher-tabs{display:flex;gap:7px;border-bottom:1px solid #e1e9e5;margin-bottom:22px}.tab-button{border:0;background:transparent;padding:12px 18px;color:#718190;font-weight:850;border-radius:10px 10px 0 0}.tab-button.is-active{background:#e2f1ed;color:#2f8276}.creator-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.teacher-card{border:1px solid #e6ebe9;background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 36px #30435009}.teacher-card h2{font-size:1.28rem;letter-spacing:-.025em;margin-bottom:18px}.dropzone{border:2px dashed #bfcbd4;border-radius:16px;display:grid;place-items:center;min-height:255px;background:#f7fafb;cursor:pointer;transition:background .2s;margin-bottom:15px;overflow:hidden}.dropzone:hover{background:#eef5fd}.dropzone #uploadPlaceholder{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.88rem;color:#798897}.dropzone strong{color:#344f66}.upload-icon{font-size:4rem;font-weight:300;color:#83a3b1}.dropzone img{width:100%;height:255px;object-fit:contain}.teacher-card .check-line{display:flex;align-items:center;gap:12px;font-weight:750;font-size:.87rem;cursor:pointer;margin:14px 0}.check-line input{width:18px;height:18px;accent-color:#4578cf}.teacher-card .btn-primary{margin-top:21px}.created-card{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#e6f5e9;border:1px solid #b6ddc6;border-radius:22px;padding:29px;margin-top:20px}.created-card h2{margin:8px 0 12px}.created-code{font-size:3rem;letter-spacing:.16em;font-weight:950;color:#1a5f4e}.created-card>img{width:160px;height:160px;border-radius:12px;background:#fff;border:8px solid #fff}.created-card p{font-size:.8rem;margin:9px 0}.created-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.list-box{display:grid;gap:10px}.puzzle-list-item{display:flex;align-items:center;gap:14px;border:1px solid #e9efed;border-radius:13px;padding:10px;background:#fbfcfd}.puzzle-list-item img{width:81px;height:59px;object-fit:cover;border-radius:8px}.puzzle-list-item .item-info{flex:1}.item-info strong{display:block;font-size:.94rem}.item-info small{font-size:.75rem;color:#7e8d98}.puzzle-list-item button{background:#eef5ff;color:#3869ad;border:0;border-radius:9px;padding:9px 10px;font-size:.8rem;font-weight:850}.library-heading{display:flex;justify-content:space-between;gap:15px;align-items:center}.library-search{display:grid;grid-template-columns:1fr 180px auto;gap:9px;margin:22px 0}.library-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.candidate{border:1px solid #e7ebe9;border-radius:13px;overflow:hidden;background:#f7fafb;display:flex;flex-direction:column}.candidate img{width:100%;height:134px;object-fit:cover;background:#eef0f0}.candidate-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:5px}.candidate strong{font-size:.8rem;overflow-wrap:anywhere}.candidate p{font-size:.73rem}.candidate a{text-decoration:underline;font-size:.7rem;color:#356bc4}.candidate button{margin-top:auto;border:0;background:#e4f3e9;border-radius:8px;font-weight:800;padding:9px;color:#358269;font-size:.75rem}
.footer{border-top:1px solid #e9e6dd;max-width:1260px;width:100%;margin:auto;padding:26px 28px 36px;display:flex;justify-content:space-between;font-size:.8rem;color:#90a0a4}.footer>div{display:flex;gap:18px}.brand-footer{font-weight:950;color:#668391}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#253b4c;color:#fff;box-shadow:0 15px 30px #253b4c34;padding:13px 22px;border-radius:14px;font-size:.9rem;font-weight:850;z-index:100}.modal-overlay{position:fixed;inset:0;background:#2130468a;display:grid;place-items:center;z-index:200;padding:20px;backdrop-filter:blur(4px)}.win-modal{max-width:460px;width:100%;background:#fff;border-radius:28px;padding:40px;text-align:center;box-shadow:0 22px 100px #151f3e4f}.win-emoji{font-size:5rem;animation:pop .55s cubic-bezier(.2,1.8,.4,1)}.win-modal h2{font-size:2.5rem;margin:12px 0}.win-modal p{margin:8px 0 24px}.win-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}@keyframes pop{from{transform:scale(.4) rotate(-18deg)}to{transform:scale(1) rotate(0)}}
@media(max-width:850px){.topbar{height:auto;padding:16px;align-items:flex-start;flex-direction:column;gap:10px}.topnav{width:100%;overflow-x:auto}.nav-button{padding:10px 11px;font-size:.81rem}.page{padding:20px 16px 60px}.hero{grid-template-columns:1fr;padding-top:26px;gap:0}.hero-art{height:310px}.sample-puzzle{height:245px;width:245px}.sample-slice{font-size:4.7rem}.feature-grid{gap:11px}.feature-card{padding:18px;min-height:260px}.play-layout{grid-template-columns:1fr}.controls-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.controls-panel>.control-title{grid-column:1/-1;margin:0}.controls-panel>.side-divider{display:none}.controls-panel>.stats-title,.controls-panel>.big-progress,.controls-panel>.progress-track,.controls-panel>.stats-row,.controls-panel>.reference-panel{grid-column:2}.controls-panel>.stats-title{grid-row:2;align-self:end}.controls-panel>.big-progress{grid-row:3}.controls-panel>.progress-track{grid-row:4}.controls-panel>.stats-row{margin:2px 0}.controls-panel>#playSettings{grid-column:1;grid-row:2/9}.controls-panel>.reference-panel{margin-top:7px}.board{height:min(68vh,660px)}.library-results{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.brand{font-size:1rem}.topbar{padding:14px}.page{padding:12px 14px 55px}.hero{padding:26px 0 30px;min-height:0}.hero-copy h1{font-size:3.1rem}.hero-copy>p{font-size:1rem}.hero-art{height:270px}.sample-puzzle{height:210px;width:210px}.sample-slice{font-size:3.8rem}.hero-sticker{right:8px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:155px;padding:18px;display:grid;grid-template-columns:68px 1fr;gap:0 12px}.feature-icon{grid-row:1/4;align-self:center}.feature-heading{margin:6px 0 4px}.feature-text{font-size:.86rem}.feature-action{padding-top:9px}.entry-card{padding:29px 20px}.entry-card h1{font-size:1.9rem}.code-form{flex-direction:column}.code-form input{width:100%}.play-head{align-items:flex-start;gap:12px;flex-wrap:wrap}.play-head h1{font-size:2rem}.play-layout{gap:13px}.controls-panel{grid-template-columns:1fr;padding:17px}.controls-panel>.control-title,.controls-panel>#playSettings,.controls-panel>.stats-title,.controls-panel>.big-progress,.controls-panel>.progress-track,.controls-panel>.stats-row,.controls-panel>.reference-panel{grid-column:1;grid-row:auto}.controls-panel>.stats-title{margin-top:8px}.controls-panel>.reference-panel{display:none}.controls-panel .side-divider{display:none}.board{height:min(65vh,680px);min-height:390px}.board-top{padding:12px;font-size:.74rem}.board-top>#boardHint{display:none}.board-tools{flex-wrap:wrap}.tool-button{font-size:.79rem;padding:8px}.board-instructions{font-size:.7rem}.teacher-heading h1{font-size:2.4rem}.teacher-bubble{display:none}.creator-layout{grid-template-columns:1fr}.created-card{flex-direction:column;text-align:center}.created-code{font-size:2.55rem}.created-actions{justify-content:center}.teacher-tabs{gap:0}.tab-button{font-size:.8rem;padding:11px}.library-search{grid-template-columns:1fr 1fr}.library-search input{grid-column:1/-1}.library-results{grid-template-columns:repeat(2,1fr)}.footer>div{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* On phones the puzzle must be visible BEFORE the optional settings panel. */
@media(max-width:640px){
  .play-layout{display:flex;flex-direction:column}
  .board-wrapper{order:0;width:100%}
  .controls-panel{order:1;width:100%}
  .board-top>#boardHint{display:inline;font-weight:900;color:#318c77;white-space:nowrap}
}
/* Sillu-inspired student workspace: controls, activity, reference. */
:root{--cream:#edf7fa;--ink:#243d4a;--blue:#edb82e;--blue-dark:#dfaa1b}
body{background:#edf7fa}.topbar{max-width:1600px;height:72px;padding:12px 24px}.topnav{border:2px solid #284958;border-radius:16px;background:#fffdf4}.nav-button{color:#284958;min-height:44px}.nav-button.is-active{background:#ffe38b;color:#243d4a}.brand-mark{background:#ffdb77;color:#284958;border:2px solid #284958}.brand-accent{color:#347f83}.brand-pusle{color:#284958}.btn-primary{color:#243d4a;border:2px solid #284958;box-shadow:0 4px 0 #284958}.btn-outline{border:2px solid #284958;box-shadow:0 4px 0 #284958;background:#fffdf4}.btn:active{transform:translateY(3px)}
.home-page{max-width:1200px;padding-top:clamp(20px,6vh,80px)}.student-welcome{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;background:#fffdf4;padding:36px;border:3px solid #284958;border-radius:32px;box-shadow:0 8px 0 #284958}.welcome-photo{overflow:hidden;border:3px solid #284958;border-radius:24px;transform:rotate(-2deg)}.welcome-photo img{display:block;width:100%;height:auto;aspect-ratio:1.2;object-fit:cover}.welcome-copy h1{margin:12px 0 18px;font-size:clamp(2.5rem,4vw,4rem)}.welcome-copy p{font-size:1.05rem}.student-choices{display:flex;gap:16px;margin:28px 0}.student-choices .btn{flex:1}.welcome-copy .tiny-note{font-size:.85rem}.footer{border:0;padding:16px 24px;max-width:1600px}
.play-page{max-width:1600px;padding:8px 24px 16px}.play-head{margin-bottom:12px;align-items:center}.play-head .eyebrow{display:none}.play-head h1{font-size:1.65rem;margin:0}.play-head p{font-size:.85rem;margin:3px 0 0}.play-layout{grid-template-columns:205px minmax(0,1fr) 230px;gap:14px;align-items:stretch}.controls-panel{padding:15px;border:2px solid #284958;border-radius:18px;box-shadow:none;min-height:0;overflow:auto}.control-title{font-size:1rem;margin-bottom:8px}.control-label{margin:9px 0 5px}.controls-panel select{padding:9px;font-size:.85rem}.switch-row{margin:12px 0}.controls-panel .btn{font-size:.78rem;white-space:normal;padding:10px}.side-divider{margin:14px 0}.big-progress{font-size:2rem}.progress-track{margin-bottom:10px}.stats-row{margin:7px 0}.board-wrapper{display:flex;flex-direction:column;min-height:0}.board{flex:1;height:auto;min-height:0;background-color:#d8edef;border:2px solid #284958;border-top:0;border-bottom:0}.board-top{border:2px solid #284958;border-bottom:0;min-height:40px;padding:10px 12px;background:#fffdf4}.board-tools{border:2px solid #284958;border-top:0;padding:8px;background:#fffdf4;flex-wrap:wrap}.board-instructions{font-size:.7rem;margin:6px 0 0}.picture-column{min-width:0;overflow:auto}.reference-panel{margin:0;padding:12px;border:2px solid #284958;border-radius:18px;background:#fffdf4}.reference-panel img{aspect-ratio:auto;max-height:48vh;object-fit:contain;border-radius:10px;background:#e7f0ed}.reference-caption{font-size:.9rem}.attribution{color:#536674;font-size:.7rem}.tool-button{min-height:36px;min-width:36px;padding:7px;font-size:.75rem}.playing .footer{display:none}
.ops-page{background:#faf7ef}.ops-page .btn-primary{background:#f8bc78}.ops-page .topbar{height:76px}.ops-page .teacher-heading h1{font-size:2.3rem}.ops-page .teacher-login{border:2px solid #284958}.register-link{text-decoration:underline;font-weight:800}.legacy-claim{margin:0 0 20px;font-size:.8rem;color:#617281}.legacy-claim summary{cursor:pointer}.legacy-claim form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}.legacy-claim input{padding:10px;border:1px solid #adc3cb;border-radius:8px}.teacher-login .btn{margin-top:14px}
@media(min-width:1001px){body.playing{height:100dvh;min-height:0;overflow:hidden}.playing main{min-height:0;display:flex}.playing .topbar{flex-shrink:0}.play-page{width:100%;height:100%;display:flex;flex-direction:column}.play-head{flex-shrink:0}.play-layout{flex:1;min-height:0}.board-instructions{flex-shrink:0}}
@media(max-width:1200px) and (min-width:1001px){.play-layout{grid-template-columns:180px minmax(0,1fr) 190px}.play-page{padding:8px 12px 12px}.controls-panel{padding:12px}.board-top>#boardHint{display:none}}
@media(max-width:1000px){.topbar{height:auto;flex-direction:row;align-items:center;gap:10px;padding:12px 16px}.topnav{width:auto;overflow:visible}.nav-button{padding:8px 10px}.play-page{padding:10px 14px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px}.board-wrapper{grid-column:1;grid-row:1;order:0}.picture-column{grid-column:2;grid-row:1}.board{height:55vh;min-height:340px;flex:auto}.controls-panel{grid-column:1/-1;grid-row:2;display:block;order:2}.controls-panel #playSettings{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:center}.controls-panel .control-label{margin:4px 0}.controls-panel .range-labels{display:none}.controls-panel .stats-row{display:inline-flex;gap:12px;margin-right:20px}.reference-panel{display:block}.student-welcome{gap:25px;padding:25px}.student-choices{flex-direction:column}.footer>div{gap:5px}}
@media(max-width:640px){.brand{font-size:.78rem;gap:6px}.brand-mark{width:30px;height:30px;font-size:1.5rem}.brand-pusle{display:none}.topbar{padding:10px}.nav-button{font-size:.8rem;min-height:40px;padding:8px}.student-welcome{grid-template-columns:1fr;padding:20px;gap:22px;border-radius:24px}.home-page{padding:14px 14px 35px}.welcome-photo img{max-height:240px;aspect-ratio:1.7}.welcome-copy h1{font-size:2.5rem}.student-choices{flex-direction:row;gap:10px;margin:20px 0}.student-choices .btn{font-size:.9rem;padding:13px 10px}.welcome-copy p{font-size:.95rem}.play-head h1{font-size:1.25rem}.play-head{gap:8px;flex-wrap:nowrap}.play-head .btn{font-size:.75rem;padding:10px}.play-layout{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.board{height:53vh;min-height:280px}.board-top{padding:8px;font-size:.65rem}.board-top>#boardHint{display:none}.board-tools{gap:6px}.tool-group{flex-wrap:wrap;gap:4px}.tool-button{font-size:.65rem;padding:6px;min-width:30px}.reference-panel{padding:7px}.reference-caption{font-size:.7rem;flex-wrap:wrap;gap:6px}.reference-caption button{font-size:.7rem}.attribution{font-size:.6rem}.picture-column{overflow:visible}.controls-panel #playSettings{grid-template-columns:1fr 1fr}.footer{font-size:.65rem;padding:16px}.teacher-heading{padding:10px 0 24px}.ops-page .teacher-heading h1{font-size:1.9rem}}
/* Full-screen puzzle desk: one slim rail, no page heading. */
.header-brands{display:flex;align-items:center;gap:18px;min-width:0}.header-brands a{display:flex;align-items:center;flex-shrink:0}.header-brands img{display:block;width:auto;object-fit:contain}.school-brand img{height:42px;max-width:105px}.nuti-brand img{height:40px;max-width:130px}.game-brand img{height:42px;max-width:150px}.topbar{max-width:none;padding:8px 16px;height:64px;flex-direction:row;align-items:center;flex-shrink:0}.topnav{width:auto;flex-shrink:0;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:13px}.nav-button{min-height:40px;padding:8px 13px}.next-picture{display:none;border-left:1px solid #28495833;border-radius:0 9px 9px 0}.playing .next-picture{display:block}.playing{height:100dvh;min-height:0;overflow:hidden}.playing main{display:flex;min-height:0}.playing .play-page{max-width:none;width:100%;height:100%;padding:0 8px 8px;display:flex;flex-direction:column}.playing .play-layout{display:grid;grid-template-columns:minmax(0,1fr) 174px;gap:8px;flex:1;min-height:0}.playing .board-wrapper{grid-column:1;grid-row:1;min-width:0;min-height:0;width:100%;display:flex;flex-direction:column}.playing .board{height:auto;min-height:0;flex:1;border:2px solid #284958;border-radius:0 0 14px 14px}.playing .board-tools{flex-shrink:0;padding:4px 6px;border:2px solid #284958;border-bottom:0;border-radius:12px 12px 0 0;flex-wrap:nowrap;gap:4px}.playing .tool-group{gap:4px;flex-wrap:nowrap}.playing .tool-button{font-size:.72rem;min-height:32px;min-width:32px;padding:5px 8px}.playing .picture-column{grid-column:2;grid-row:1;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:8px}.playing .reference-panel{padding:8px;border-radius:12px;flex-shrink:0}.playing .reference-caption{font-size:.76rem;gap:4px}.playing .reference-panel img{max-height:25vh}.playing .attribution{font-size:.6rem}.playing .controls-panel{display:block;width:100%;overflow:visible;padding:10px;border-radius:12px;flex-shrink:0}.playing .controls-panel #playSettings{display:block}.playing .settings-fields{display:block}.playing .controls-panel summary{cursor:pointer;font-size:.85rem;font-weight:850;padding:5px 0}.playing .controls-panel .control-label{display:block;margin:10px 0 4px;font-size:.72rem}.playing .controls-panel select{font-size:.75rem;padding:8px 5px}.playing .controls-panel .range-labels{display:flex;font-size:.6rem}.playing .controls-panel .switch-row{font-size:.72rem}.playing .side-divider{display:block;margin:8px 0}.playing .stats-title{font-size:.65rem;font-weight:700}.playing .big-progress{font-size:1.5rem;margin:4px 0}.playing .progress-track{height:7px;margin-bottom:8px}.playing .stats-row{display:flex;font-size:.65rem;margin:5px 0}.playing .footer{display:none}
@media(max-width:800px){.header-brands{gap:10px}.school-brand img{height:30px;max-width:70px}.nuti-brand img{height:28px;max-width:90px}.game-brand img{height:30px;max-width:100px}.topbar{padding:6px 8px;gap:8px;height:54px}.nav-button{font-size:.72rem;padding:6px 8px;min-height:36px}.playing .play-layout{grid-template-columns:minmax(0,1fr) 135px;gap:6px}.playing .tool-button{padding:4px 5px;font-size:.65rem}.playing .play-page{padding:0 5px 5px}.playing .controls-panel{padding:8px}.playing .reference-caption{font-size:.65rem}}
@media(max-width:580px){.topbar{height:auto;min-height:82px;flex-wrap:wrap;justify-content:center;gap:3px;padding:4px 6px}.header-brands{justify-content:center;width:100%;gap:16px;height:27px}.header-brands img{height:25px}.topnav{padding:2px}.nav-button{font-size:.74rem;min-height:34px;padding:6px 12px}.playing .play-layout{grid-template-columns:minmax(0,1fr) 96px;gap:4px}.playing .reference-panel{padding:5px}.playing .reference-caption{flex-wrap:wrap;font-size:.6rem}.playing .reference-caption button{font-size:.6rem}.playing .attribution{font-size:.52rem;max-height:52px;overflow:auto}.playing .controls-panel{padding:5px}.playing .controls-panel summary{font-size:.7rem}.playing #playSettings[open] .settings-fields{position:fixed;z-index:30;right:8px;top:125px;width:210px;max-height:65dvh;overflow:auto;background:#fffdf4;border:2px solid #284958;padding:12px;border-radius:12px;box-shadow:0 8px 25px #243d4a44}.playing .tool-button{font-size:.6rem;min-width:25px;min-height:32px;padding:3px}.playing .board-tools{gap:2px;padding:3px;flex-wrap:wrap}.playing .tool-group{gap:2px}.playing .stats-title{font-size:.58rem}.playing .stats-row{font-size:.58rem}.playing .big-progress{font-size:1.2rem}}