.challenge-page{--photo:url('assets/flowers.jpg')}
.challenge-page .page{max-width:1240px;padding:30px 42px 22px}
.challenge-page .masthead{margin-bottom:44px}
.challenge-page main{grid-template-columns:minmax(280px,1fr) minmax(0,570px);gap:58px}
.challenge-intro{padding-top:38px}
.challenge-intro .eyebrow{color:#61765f;font-size:11px;letter-spacing:.08em}
.challenge-intro h1{font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.6;letter-spacing:-.035em;margin:18px 0}
.challenge-lead{font-size:14px;line-height:2;color:#647060;margin:0 0 14px}
.original-post{font-size:11px;text-underline-offset:4px;color:#677a62}
.app-pitch{margin-top:38px;padding-top:24px;border-top:1px solid #cfd7c8;max-width:330px}
.app-pitch .pitch-kicker{font-size:12px;margin:0 0 9px}
.app-pitch h2{font-size:24px;font-weight:600;letter-spacing:-.03em;margin:0 0 12px}
.app-pitch>p{font-size:13px;line-height:1.9;color:#65735f}
.app-pitch .primary{max-width:290px;margin:18px 0 0}
.app-pitch .small-note{font-size:9px;margin:9px 0 16px}
.easy-link{font-size:11px;text-underline-offset:4px}
.mobile-app-pitch{display:none}
.challenge-page .play-area{padding:24px;border-radius:28px;background:#fffaf0ad}
.challenge-page .game-top h2{font-size:19px}
.challenge-page .instruction{margin:14px 0 12px}
.challenge-page .progress-row{gap:10px;margin-bottom:16px}
.challenge-page #remaining{color:#466044}
.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.challenge-page .rule-key{gap:12px;font-size:10px;margin:0}
.challenge-page .rule-key b{width:21px;height:21px;font-size:18px;border-radius:5px}
.board-tool{font-size:11px;min-height:36px;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:5px 2px}
.board-tool[aria-pressed=true]{font-weight:650}
.zoom-tools{display:flex;align-items:center;gap:12px;margin:-2px 0 12px}
.zoom-tools .secondary{padding:9px 14px;font-size:11px;flex-shrink:0}
.zoom-tools p{font-size:10px;line-height:1.7;margin:0;color:#64775f}
.board-viewport{width:100%;aspect-ratio:1;overflow:hidden;position:relative;border-radius:10px;overscroll-behavior:contain}
.board-viewport.zoomed{overflow:auto;scrollbar-width:thin;scrollbar-color:#9aad91 #e6e9df}
.board-viewport.zoomed .board-wrap{width:200%}
.board-viewport.panning .board-wrap,.board-viewport.panning .cell{cursor:grab}
.board-viewport.panning.dragging .board-wrap,.board-viewport.panning.dragging .cell{cursor:grabbing}
.challenge-page .board{gap:4px}
.challenge-page .cell{border-radius:7px}
.challenge-page .cell.start,.challenge-page .cell.goal{font-size:clamp(10px,1.3vw,14px)}
.challenge-page .cell .mark{padding:3px;border-radius:4px}
.challenge-page .cell .symbol{width:39%;height:39%;stroke-width:4.5}
.challenge-page .cell.visited .symbol{padding:1px;border-radius:3px;background:#faf9f3eb}
.challenge-page .cell.tip{box-shadow:inset 0 0 0 1.5px white,inset 0 0 0 3px #2b594a}
.challenge-page .cell.hint{box-shadow:inset 0 0 0 3px #a96c20,0 0 0 2px #f3c7759c;z-index:4}
.challenge-page .cell:focus-visible{outline:2px solid #a76c20;outline-offset:1px;z-index:5}
.challenge-page .start-cue{transform:translate(0,-50%);animation:none;padding:7px 9px;left:7%;top:20.8%;font-size:10px}
.challenge-page .start-cue:after{bottom:auto;top:calc(50% - 5px);left:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:6px solid #fff;border-left:0}
.challenge-page .completed-photo{border-radius:10px}
.challenge-page .board-wrap.complete .completed-photo{transform:none;box-shadow:none}
.challenge-page .status{font-size:11px;min-height:38px;margin:12px 0 10px}
.challenge-page .play-controls{grid-template-columns:1fr 1.45fr 1fr;gap:7px}
.challenge-page .secondary{border-radius:12px;font-size:11px}
.fixed-note{font-size:9px;line-height:1.6;text-align:center;color:#84907b;margin:10px 0 0}
.challenge-page footer{margin-top:42px}
.challenge-page .success-actions a{display:inline-flex;align-items:center}
@media(max-width:900px){
  .challenge-page .page{padding:20px 22px}
  .challenge-page main{gap:30px;grid-template-columns:minmax(250px,1fr) minmax(0,500px)}
  .challenge-intro h1{font-size:28px}
}
@media(max-width:800px){
  .challenge-page .page{max-width:540px;padding:18px 16px 24px}
  .challenge-page .masthead{margin-bottom:24px}
  .challenge-page .tag{font-size:9px}
  .challenge-page main{display:block}
  .challenge-intro{padding:0 4px 22px}
  .challenge-intro .eyebrow{font-size:10px;margin:0 0 10px}
  .challenge-intro h1{font-size:29px;line-height:1.45;margin:0 0 10px}
  .challenge-lead{font-size:12px;line-height:1.8;margin:0 0 6px}
  .original-post{font-size:10px}
  .desktop-pitch{display:none}
  .mobile-app-pitch{display:block;margin:28px 10px 0;max-width:none;padding-top:24px}
  .mobile-app-pitch .primary{max-width:none}
  .challenge-page .play-area{padding:16px 14px;border-radius:24px}
  .challenge-page .game-top h2{font-size:17px}
  .challenge-page .instruction{font-size:11px;margin:13px 0 12px}
  .challenge-page .progress-row span{font-size:10px}
  .challenge-page .progress-row{gap:9px;margin-bottom:9px}
  .challenge-page .board{gap:3px}
  .challenge-page .cell{border-radius:4px}
  .challenge-page .cell .mark{padding:2px;border-radius:3px}
  .challenge-page .cell.start,.challenge-page .cell.goal{font-size:11px}
  .challenge-page .cell.visited .symbol{padding:1px;border-radius:2px}
  .challenge-page .start-cue{font-size:9px;padding:5px 7px}
  .challenge-page .rule-key{gap:9px}
  .challenge-page .status{font-size:10px;min-height:35px;margin:10px 0}
  .challenge-page .secondary{font-size:10px}
  .challenge-page footer{margin-top:30px}
}
@media(max-width:360px){
  .challenge-page .page{padding:15px 11px 22px}
  .challenge-page .tag{font-size:8px;padding:6px 7px}
  .challenge-intro h1{font-size:27px}
  .challenge-page .play-area{padding:14px 10px}
  .challenge-page .board{gap:2px}
  .challenge-page .cell.start,.challenge-page .cell.goal{font-size:9px}
  .challenge-page .rule-key{font-size:9px}
}