*{box-sizing:border-box}body{margin:0;background:#f4f1e9;color:#263c37;font-family:system-ui,'Malgun Gothic',sans-serif}main{max-width:1060px;margin:auto;padding:25px 28px}header{display:flex;justify-content:space-between;align-items:center}a{color:inherit;text-decoration:none;font-weight:750}header span{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:#657b70}button{font:inherit;cursor:pointer;border:1px solid #b8c6ba;background:#fffdf7;color:#263c37;border-radius:12px;min-height:44px;padding:10px 16px}button:hover{background:#e4eadf}button:focus-visible,a:focus-visible{outline:3px solid #b35f27;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.intro{margin:36px 0 25px}.eyebrow{font-size:12px;letter-spacing:2px;color:#657b70}h1{font-size:34px;margin:10px 0}h2{font-size:14px;margin:0 0 14px}p{line-height:1.6}.intro>p:last-child{color:#657b70;font-size:14px}.play{display:grid;grid-template-columns:150px minmax(260px,380px) 190px;justify-content:space-between;gap:28px;align-items:start}.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);aspect-ratio:1;gap:4px}.target{width:140px;gap:3px}.cell{border-radius:7px;display:flex;align-items:center;justify-content:center;position:relative;min-width:0;min-height:0;padding:0;border:1px solid #b8c6ba;background:#e6e8dc;font-size:20px}.target .cell{border:0;border-radius:3px;font-size:11px}.cell.on{background:#284d43;color:#f8f3dc}.cell.off{color:#829287}.cell.cover{box-shadow:inset 0 0 0 3px #c27e42}.cell.anchor:after{content:attr(data-piece);position:absolute;top:2px;left:3px;font-size:11px;font-weight:800;background:#faf3dc;color:#263c37;border-radius:3px;padding:1px 3px}.board{touch-action:none}.boardtop{display:flex;justify-content:space-between;gap:5px}.boardtop span{font-size:12px;color:#8a542c}#status{font-size:13px;min-height:23px;margin:10px 0}.legend{font-size:11px;color:#657b70}.piece{width:100%;display:flex;align-items:center;gap:14px;margin-bottom:8px;text-align:left;touch-action:none}.piece.selected{outline:3px solid #b66e37;background:#fff5df}.mini{display:grid;grid-template-columns:repeat(3,12px);grid-template-rows:repeat(3,12px);gap:2px}.mini i{background:transparent;border-radius:2px}.mini i.filled{background:#44695b}.mini i.origin{position:relative}.mini i.origin:after{content:'';position:absolute;width:4px;height:4px;top:4px;left:4px;background:white;border-radius:50%}.piece small{display:block;font-size:11px;color:#657b70}.pieces h2 small{font-weight:400;font-size:10px}#remove{width:100%;font-size:12px}.toolbar{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}.hint{min-height:28px;text-align:center;font-size:14px;color:#856039}#finish{text-align:center;padding:20px;background:#e1e8db;border-radius:18px;margin:18px 0}#finish h2{font-size:20px}.primary{background:#284d43;color:white;border:0}nav{display:flex;gap:6px;justify-content:center;margin-top:25px;flex-wrap:wrap}nav button{min-width:44px;padding:8px}nav .current{background:#284d43;color:white}footer{text-align:center;font-size:11px;color:#6b7e70;margin:24px 0 0}#instructions{padding:16px;background:#e1e8db;font-size:13px;border-radius:12px;margin-top:16px}[hidden]{display:none!important}@media(max-width:720px){main{padding:18px 16px}.intro{margin:24px 0 20px}h1{font-size:27px}.play{grid-template-columns:80px minmax(0,1fr);gap:14px}.target{width:80px}.legend{font-size:9px}.pieces{grid-column:1/-1}.pieces h2{margin-bottom:10px}#pieces{display:flex;gap:10px}.piece{flex:1;min-width:0;gap:8px;padding:9px}.mini{grid-template-columns:repeat(3,9px);grid-template-rows:repeat(3,9px);gap:1px}.mini i.origin:after{top:3px;left:3px;width:3px;height:3px}.piece small{font-size:9px}#remove{width:auto}.boardtop{display:block}.boardtop h2{margin-bottom:6px}.boardtop span{display:block;margin-bottom:7px}.cell{font-size:16px}.toolbar{gap:6px}.toolbar button{padding:9px;font-size:12px}}
@media(max-width:720px){.play{grid-template-columns:1fr}.play>aside:first-child{display:grid;grid-template-columns:90px 1fr;column-gap:14px;align-items:center}.play>aside:first-child h2{grid-column:2;margin:0}.play>aside:first-child .target{grid-column:1;grid-row:1/3}.play>aside:first-child .legend{grid-column:2}.work{width:100%;max-width:380px;justify-self:center}.pieces{grid-column:1}.boardtop{display:flex;align-items:center}.boardtop h2{margin-bottom:12px}}

.mini i.origin:after{background:#b56b32;box-shadow:0 0 0 1px #fff}
.welcome{max-width:720px;margin:60px auto;text-align:center;background:#fffdf7;border:1px solid #cbd4c5;border-radius:24px;padding:30px}.welcome h1{font-size:30px;line-height:1.4}.welcome p{font-size:14px}.welcome button{margin:6px}.welcome-demo{display:flex;align-items:center;justify-content:center;gap:20px;padding:24px 0}.welcome-demo span{font-weight:700}.welcome-demo small{font-size:12px;font-weight:400;color:#657b70}.saved-summary{color:#657b70;font-size:12px!important}.goal-card{background:#e2e9da;border:2px solid #8a9e83;padding:15px;border-radius:16px}.goal-card .target{width:100%;max-width:140px}.goal-card h2{font-size:15px}.work{border:2px dashed #8e9c91;border-radius:16px;padding:14px;background:#fffdf7}.pieces{background:#eae2d3;border-radius:16px;padding:14px}.coach{background:#fff0cf;border-left:4px solid #b56b32;padding:14px 18px;font-size:15px;line-height:1.7;margin:0 0 22px}.guide-spot{outline:3px solid #b56b32;outline-offset:-4px;font-size:15px;font-weight:800;background:#ffe3a4!important;color:#633b20!important}.guide-spot:before{content:'↓';position:absolute;top:1px;right:4px}#practiceBanner{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#e4eadf;border-radius:12px;padding:8px 14px;margin-top:18px;font-size:12px}#practiceBanner button{font-size:12px;padding:7px}.play{grid-template-columns:180px minmax(260px,408px) 220px;gap:20px}.target .cell{aspect-ratio:1}@media(max-width:720px){.welcome{padding:24px 15px;margin:25px auto}.welcome h1{font-size:25px}.welcome-demo{gap:10px;font-size:13px}.welcome button{width:100%;margin:6px 0}.play{grid-template-columns:1fr;gap:16px}.play>aside.goal-card{grid-template-columns:75px 1fr;padding:12px;column-gap:14px}.goal-card .target{width:75px}.goal-card h2{font-size:15px}.goal-card .legend{font-size:11px}.work{padding:8px;max-width:408px}.boardtop h2{font-size:12px}.boardtop span{font-size:11px}.pieces{padding:12px}.coach{font-size:13px;padding:12px}.pieces h2 small{font-size:10px}}
.welcome-goal{margin:0;padding:12px;border-radius:12px;background:#e2e9da}.welcome-goal figcaption{font-size:12px;font-weight:700;margin-bottom:8px}.welcome-goal .target{width:100px}.welcome-demo .cell{font-weight:400}.guided .pieces h2 small{display:none}.guided #remove{display:none}.guided #finish{margin:10px 0 0;padding:12px}.guided #finish .eyebrow{display:none}.guided #finish h2{font-size:15px}.guided #next{width:100%}
.compact-label{display:none}.toolbar #remove{width:auto}
@media(max-width:720px){.learning main{padding:10px 16px}.learning header{display:none}.guided #practiceBanner{margin:0;padding:4px 8px;font-size:11px}.guided #practiceBanner button{font-size:11px;white-space:nowrap}.guided .intro{display:flex;align-items:center;gap:10px;margin:12px 0}.guided .intro .eyebrow{font-size:10px;letter-spacing:0;margin:0}.guided .intro h1{font-size:20px;margin:0}.guided #subtitle{display:none}.guided .coach{padding:8px 10px;margin:0 0 10px;font-size:13px;line-height:1.5;min-height:55px}.guided .play{grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}.guided .play>aside.goal-card{display:flex;flex-direction:column;align-items:center;grid-column:1;grid-row:1;padding:8px;gap:0}.guided .goal-card h2{font-size:12px;margin:0 0 5px;line-height:1.4}.guided .goal-card .target{width:64px}.guided .goal-card .legend{font-size:10px;margin:5px 0 0;line-height:1.4}.guided .pieces{grid-column:2;grid-row:1;padding:8px;display:flex;flex-direction:column;justify-content:center}.guided .pieces h2{font-size:12px;margin:0 0 8px}.guided #pieces{display:block}.guided .piece:not(.selected){display:none}.guided .piece{padding:8px;gap:10px;margin:0;min-height:58px}.guided .piece .mini{grid-template-columns:repeat(3,12px);grid-template-rows:repeat(3,12px)}.guided .piece small{font-size:10px}.guided .work{grid-column:1/-1;grid-row:2;width:100%;padding:8px}.guided .boardtop h2{margin:0 0 7px}.guided .boardtop span{margin:0 0 7px}.guided #status{font-size:12px;line-height:1.5;margin:7px 0 0;min-height:18px}.guided #finish{padding:6px;margin:6px 0 0}.guided #finish h2{display:none}.guided .toolbar{margin-top:10px}.guided .hint{margin:0;min-height:0}.learning footer{margin-top:10px;font-size:10px}.guided .board .cell{font-size:16px}}
/* One mobile play layout for every puzzle, including the guided lessons. */
@media(max-width:720px){
 main{padding:10px 16px}header{min-height:44px}header span{display:none}
 #game .intro{display:flex;align-items:center;gap:8px;margin:12px 0}
 #game .intro .eyebrow{font-size:10px;letter-spacing:0;margin:0;white-space:nowrap}
 #game .intro h1{font-size:20px;margin:0;line-height:1.3}
 #game #subtitle{display:none}
 #game #practiceBanner{margin-top:8px;padding:4px 8px;font-size:11px}
 #game #practiceBanner button{font-size:11px;white-space:nowrap}
 #game .play{grid-template-columns:82px minmax(0,1fr);gap:8px;align-items:stretch}
 #game .play>.goal-card{display:flex;flex-direction:column;align-items:center;grid-column:1;grid-row:1;padding:7px;gap:0;min-width:0}
 #game .wide-label{display:none}#game .compact-label{display:inline}
 #game .goal-card h2{font-size:12px;margin:0 0 5px;line-height:1.4}
 #game .goal-card .target{width:64px}
 #game .goal-card .legend{font-size:10px;margin:5px 0 0;line-height:1.4;white-space:nowrap}
 #game .legend-marks{display:none}
 #game .pieces{grid-column:2;grid-row:1;padding:8px;min-width:0;display:flex;flex-direction:column;justify-content:center}
 #game .pieces h2{font-size:12px;margin:0 0 8px}#game .pieces h2 small{display:none}
 #game #pieces{display:flex;gap:6px;width:100%}
 #game .piece,#game .piece:not(.selected){display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:3px;margin:0;padding:5px 3px;min-width:44px;min-height:76px;text-align:center;font-size:12px}
 #game .piece .mini{grid-template-columns:repeat(3,12px);grid-template-rows:repeat(3,12px);gap:1px}
 #game .piece small{font-size:10px;line-height:1.3;white-space:nowrap}
 #game .work{grid-column:1/-1;grid-row:2;width:100%;padding:8px;min-width:0}
 #game .boardtop h2,#game .boardtop span{margin:0 0 7px}
 #game .boardtop h2{font-size:12px}#game .boardtop span{font-size:11px}
 #game #status{font-size:12px;line-height:1.5;margin:7px 0 0;min-height:18px}
 #game #finish{padding:8px;margin:8px 0 0}#game #finish .eyebrow{display:none}
 #game #finish h2{font-size:13px;margin:0 0 8px}#game #next{width:100%;font-size:13px}
 #game .toolbar{margin-top:10px}#game .hint{margin:0;min-height:0}
 footer{margin-top:12px}
}