@charset "UTF-8";
:root {
  color-scheme:light;
  --ink:#263e2c;
  --green:#315a3d;
  --green-dark:#23432e;
  --muted:#7b8674;
  --paper:#fafbf3;
  --line:#dfe5d4;
  --accent:#dba756;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#f0f3e8;
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default
}
button,a {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #83a66d;
  outline-offset:4px
}
button {
  border:0
}
a {
  color:inherit;
  text-decoration:none
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.svg-symbols {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.app-shell {
  position:relative;
  width:min(1176px,100%);
  margin:auto;
  padding:0 32px 20px;
  z-index:1
}
.site-header {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px
}
.brand-mark {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#e4eccd;
  border-radius:15px;
  transform:rotate(-5deg)
}
.brand-mark .icon {
  width:29px;
  height:29px;
  stroke-width:1.45
}
.brand-name {
  font-size:23px;
  font-weight:650;
  letter-spacing:2px;
  display:block
}
.brand-dot {
  color:#a5b48c
}
.brand-tagline {
  display:block;
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:4px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.quiet-button,.icon-button {
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:12px;
  min-height:44px;
  transition:background .15s
}
.quiet-button {
  padding:8px 13px;
  font-size:13px
}
.quiet-button:hover,.icon-button:hover {
  background:#e3e9d9
}
.icon-button {
  width:44px;
  padding:0
}
.nav-counter {
  color:var(--muted);
  font-size:11px;
  font-variant-numeric:tabular-nums
}
.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:28px;
  align-items:stretch
}
.play-column {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px
}
.level-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:30px
}
.level-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
h1 {
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  margin:0
}
.level-badge {
  background:#e1e8d5;
  color:#55704a;
  padding:5px 7px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.mode-chip {
  font-size:10px;
  line-height:1.5;
  letter-spacing:.5px;
  padding:4px 8px;
  background:#f8faef;
  border:1px solid #dfe6d3;
  border-radius:20px;
  color:#768069;
  white-space:nowrap
}
.time-display {
  display:flex;
  align-items:center;
  gap:6px;
  color:#6d7b65;
  font-size:13px;
  font-variant-numeric:tabular-nums
}
.time-display .icon {
  width:16px;
  height:16px
}
.goal-panel {
  background:var(--paper);
  border:1px solid #e2e7d7;
  border-radius:18px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 28px 25px;
  overflow:hidden;
  box-shadow:0 3px 0 #e6ebdb
}
.goal-main {
  min-width:0
}
.eyebrow {
  font-size:11px;
  letter-spacing:1.5px;
  font-weight:600;
  color:#708164;
  display:flex;
  align-items:center;
  gap:12px
}
.eyebrow>span {
  font-size:10px;
  font-weight:400;
  color:#929a86;
  letter-spacing:.5px
}
.equation {
  display:flex;
  align-items:center;
  gap:13px;
  min-height:63px;
  font-variant-numeric:tabular-nums;
  font-weight:650;
  font-size:37px;
  line-height:1.2;
  padding-top:9px
}
.operand {
  display:inline-flex;
  width:38px;
  min-height:43px;
  align-items:center;
  justify-content:center;
  border-bottom:2px solid #bdc8a8;
  color:#b3bea2;
  transition:color .2s,border-color .2s
}
.operand.filled {
  color:var(--green);
  border-color:var(--green)
}
.math-symbol {
  font-size:27px;
  color:#7c8c6a;
  font-weight:400
}
.target-number {
  color:var(--green-dark);
  font-size:44px;
  letter-spacing:-1px
}
.goal-side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  padding-left:18px
}
.score-label {
  font-size:10px;
  letter-spacing:1px;
  color:#8d967e
}
.goal-side>strong {
  font-size:24px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1
}
.combo {
  font-size:10px;
  color:#a0a88e;
  white-space:nowrap;
  transition:color .2s
}
.combo.active {
  color:#b58732
}
.progress-track {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:#e5ebd9;
  overflow:hidden
}
.progress-track>span {
  display:block;
  height:100%;
  width:0;
  background:#8daa6a;
  transition:width .35s
}
.board-frame {
  border-radius:20px;
  overflow:hidden;
  background:#e1e8cd;
  border:1px solid #cbd7b4;
  box-shadow:0 5px 0 #d8e0c4,0 13px 35px #516c2d09;
  min-width:0
}
.board-toolbar {
  padding:15px 20px 13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  background:#edf1df;
  border-bottom:1px solid #d4ddc1;
  font-size:11px;
  letter-spacing:.4px
}
.path-instruction {
  display:flex;
  align-items:center;
  gap:7px;
  color:#71815e
}
.status-dot {
  width:5px;
  height:5px;
  background:#8ba469;
  border-radius:50%;
  flex:none
}
.remaining-label {
  color:#7b886a;
  white-space:nowrap
}
.remaining-label strong {
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  color:#4a633a;
  margin:0 3px
}
.board-viewport {
  position:relative;
  overflow:auto;
  overscroll-behavior:contain;
  height:min(56vh,565px);
  min-height:320px;
  padding:27px 16px 16px;
  scrollbar-color:#a3b286 #e1e8cd;
  scrollbar-width:thin;
  scroll-behavior:smooth;
  background:radial-gradient(ellipse at 50% 25%,#eff2dc70,transparent 65%),#dce5c5
}
.board {
  position:relative;
  width:100%;
  max-width:660px;
  margin-inline:auto;
  isolation:isolate
}
.trail {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible
}
.tile {
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:var(--tile-size);
  height:var(--tile-size);
  transform:translate(var(--tile-x),var(--tile-y));
  padding:0;
  border-radius:8px;
  background:linear-gradient(145deg,#fffff9,#eef1e4);
  border:1px solid #b1bea0;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #a5b58c,0 4px 7px #3c52201a;
  font-size:clamp(22px,2.6vw,31px);
  font-weight:650;
  color:#374e34;
  font-variant-numeric:tabular-nums;
  line-height:1;
  z-index:2;
  transition:transform .25s cubic-bezier(.22,.7,.3,1),background .16s,box-shadow .16s,color .16s,opacity .16s;
  user-select:none;
  -webkit-user-select:none
}
.tile:before {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid #fff9;
  border-radius:5px;
  pointer-events:none
}
.tile:hover {
  background:#fffffc;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #9baa81,0 5px 12px #3c52202b
}
.tile.is-neighbor {
  background:#f5f8e8;
  border-color:#809e65
}
.tile.is-selected {
  color:#fbfff0;
  background:linear-gradient(145deg,#6b8d51,#41633d);
  border-color:#3a5c34;
  box-shadow:inset 0 1px 0 #a3bc8a,0 3px 0 #2e4d28,0 0 0 3px #71965c40;
  z-index:3
}
.tile.is-selected:before {
  border-color:#e9f5d538
}
.tile.is-hinted {
  background:#fff8d9;
  border-color:#d6ad54;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #b99b4d,0 0 0 3px #ebcb7052
}
.tile.is-hinted:after {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:10px;
  border:2px solid #dab151;
  animation:hint-pulse 1.4s ease-out infinite;
  pointer-events:none
}
.tile.is-wrong {
  background:#f8e3d5;
  color:#95543c;
  border-color:#c98d71;
  box-shadow:0 3px 0 #b9866c
}
.tile.is-removing {
  opacity:0;
  transform:translate(var(--tile-x),var(--tile-y)) scale(.68) rotate(-5deg);
  pointer-events:none
}
.board.force-mode .tile {
  border-color:#cba66a;
  background:linear-gradient(145deg,#fff9e8,#f1e4c6);
  color:#816239
}
.board.force-mode .tile:hover {
  background:#f7d99d
}
.trail-entry {
  position:absolute;
  left:2px;
  top:-20px;
  line-height:14px;
  font-size:10px;
  letter-spacing:1px;
  color:#7a8c62
}
.board-bottom {
  min-height:35px;
  padding:9px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  background:#e8edd9;
  color:#7b8969;
  font-size:10px;
  border-top:1px solid #d4ddc1
}
.scroll-cue {
  display:inline-flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
  color:#8f9b7d
}
.scroll-cue .icon {
  width:13px;
  height:13px
}
.tool-dock {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) 54px;
  gap:10px;
  margin-top:4px
}
.tool-button {
  min-height:66px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:#fafbf2;
  border:1px solid #e1e6d7;
  border-radius:13px;
  position:relative;
  box-shadow:0 2px 0 #e1e6d6;
  transition:background .15s,transform .15s
}
.tool-button:hover:not(:disabled) {
  background:#fffef7;
  transform:translateY(-1px)
}
.tool-icon {
  width:32px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  flex:none
}
.hint-tool .tool-icon {
  color:#b58b39;
  background:#f5eedb
}
.undo-tool .tool-icon {
  color:#6b8c6c;
  background:#e9efdf
}
.force-tool .tool-icon {
  color:#ad8b5b;
  background:#f2eadd
}
.tool-label {
  font-size:12px;
  font-weight:500;
  text-align:left;
  white-space:nowrap
}
.tool-detail {
  display:block;
  font-size:9px;
  color:#9aa18e;
  font-weight:400;
  margin-top:4px;
  letter-spacing:.2px
}
.tool-count {
  position:absolute;
  right:7px;
  top:7px;
  font-size:9px;
  line-height:17px;
  min-width:17px;
  border-radius:50%;
  background:#edf0e4;
  color:#839176;
  text-align:center;
  font-variant-numeric:tabular-nums
}
.tool-button:disabled {
  opacity:.43;
  box-shadow:none
}
.force-tool[aria-pressed=true] {
  background:#f6ecd3;
  border-color:#c6a563;
  box-shadow:0 0 0 2px #d3b97833
}
.restart-button {
  background:transparent;
  color:#879377;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:10px;
  min-height:56px
}
.restart-button:hover {
  background:#e7ecdd
}
.restart-button .icon {
  width:20px;
  height:20px
}
.save-note {
  margin:0 2px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  color:#a0a994;
  letter-spacing:.3px
}
.save-note>.icon {
  width:12px;
  height:12px
}
.save-note>span:last-child {
  margin-left:auto
}
.sidebar {
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:46px
}
.journey-panel,.how-panel {
  padding:20px;
  border-radius:18px;
  border:1px solid #dfe6d3;
  background:#f7f9ef
}
.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.panel-title h2 {
  font-size:13px;
  letter-spacing:1px;
  font-weight:600;
  margin:0
}
.panel-title>span {
  font-size:10px;
  color:#929e85;
  font-variant-numeric:tabular-nums
}
.panel-title>.icon {
  width:18px;
  height:18px;
  color:#8eaa73
}
.journey-art {
  position:relative;
  height:130px;
  overflow:hidden;
  margin:16px -4px 4px;
  border-radius:10px;
  background:#eaf0dc
}
.art-sun {
  position:absolute;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#f6e8bd;
  right:36px;
  top:12px
}
.art-hill {
  position:absolute;
  width:190px;
  height:100px;
  border-radius:50% 50% 0 0;
  bottom:-33px;
  transform:rotate(-12deg)
}
.hill-one {
  background:#d7e1c3;
  left:-30px
}
.hill-two {
  background:#c4d3ad;
  right:-54px;
  bottom:-38px;
  transform:rotate(11deg)
}
.art-bamboo {
  position:absolute;
  width:8px;
  background:#a4bd88;
  bottom:0;
  border-radius:3px;
  box-shadow:inset 2px 0 #ffffff25
}
.art-bamboo:before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 26px,#6f935a55 27px 29px)
}
.art-bamboo:after {
  content:"";
  position:absolute;
  width:25px;
  height:9px;
  top:20px;
  left:5px;
  background:#88a76b;
  border-radius:100% 0 100% 0;
  transform:rotate(-32deg);
  box-shadow:-22px 24px 0 #99b77c,2px 40px 0 #99b77c
}
.bamboo-one {
  left:27px;
  height:120px;
  transform:rotate(-4deg)
}
.bamboo-two {
  left:57px;
  height:96px;
  transform:rotate(5deg)
}
.bamboo-three {
  right:18px;
  height:90px;
  transform:rotate(5deg)
}
.art-tile {
  position:absolute;
  display:grid;
  place-items:center;
  bottom:22px;
  width:44px;
  height:48px;
  border-radius:8px;
  background:#fffef3;
  border:1px solid #b4c29d;
  box-shadow:0 4px 0 #aebd95;
  font-size:25px;
  font-weight:600;
  transform:rotate(-9deg);
  left:91px;
  color:#547146
}
.art-tile:last-child {
  left:135px;
  bottom:27px;
  transform:rotate(10deg)
}
.journey-caption {
  text-align:center;
  font-size:10px;
  letter-spacing:1px;
  color:#869571;
  margin:13px 0 17px
}
.chapter-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px
}
.chapter-button {
  aspect-ratio:1;
  border-radius:9px;
  background:#edf1e2;
  border:1px solid #e0e7d1;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  position:relative
}
.chapter-button.current {
  background:#436640;
  color:#fcfff0;
  border-color:#436640;
  box-shadow:0 3px 0 #2f502d
}
.chapter-button.passed {
  color:#6e8c4f;
  background:#e5edd6
}
.chapter-button.locked {
  color:#b2baa3;
  background:#f1f4e9;
  border-color:#e9edde
}
.chapter-button.locked:after {
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  bottom:5px;
  left:calc(50% - 1.5px);
  background:#b5bea5;
  border-radius:50%
}
.text-button {
  padding:8px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:transparent;
  color:#788c64;
  font-size:11px;
  min-height:40px
}
.text-button:hover {
  color:#315a3d
}
.text-button .icon {
  width:14px;
  height:14px
}
.journey-panel>.text-button {
  width:100%;
  margin-top:10px
}
.how-panel ol {
  list-style:none;
  padding:0;
  margin:19px 0
}
.how-panel li {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:17px
}
.how-panel li>span {
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:#9da98b
}
.how-panel li p {
  font-size:11px;
  line-height:1.7;
  margin:0;
  color:#74836a
}
.gentle-note {
  border-top:1px dashed #d9e1c9;
  padding-top:15px;
  color:#9ba68d;
  font-size:10px;
  line-height:1.9;
  letter-spacing:.4px
}
.sidebar-footer {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.6px;
  color:#a7b297;
  padding:3px
}
.tiny-leaf {
  font-size:15px;
  color:#a8b789
}
.scenery {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.scenery:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 0,#fffdf6 0,transparent 55%),radial-gradient(ellipse at 0 90%,#d7e1c645,transparent 60%)
}
.scenery i {
  position:absolute;
  bottom:-100px;
  left:calc(50% - 670px);
  width:22px;
  height:86vh;
  background:repeating-linear-gradient(0deg,transparent 0 115px,#b5c59d15 115px 120px),linear-gradient(90deg,#c5d1b420,#c2cfad0a);
  border-radius:7px;
  transform:rotate(-8deg)
}
.scenery i:nth-child(2) {
  left:calc(50% - 710px);
  height:75vh;
  transform:rotate(4deg)
}
.scenery i:nth-child(3) {
  left:auto;
  right:calc(50% - 685px);
  transform:rotate(8deg);
  height:95vh
}
.scenery i:nth-child(4) {
  left:auto;
  right:calc(50% - 725px);
  height:70vh;
  transform:rotate(-3deg)
}
.scenery i:nth-child(5) {
  left:calc(50% - 630px);
  height:40vh;
  width:13px
}
.toast {
  position:fixed;
  left:50%;
  bottom:max(28px,env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  background:#2e4935f5;
  color:#f7f9ef;
  padding:13px 20px;
  border-radius:12px;
  font-size:12px;
  line-height:1.7;
  opacity:0;
  pointer-events:none;
  z-index:30;
  max-width:min(90vw,500px);
  width:max-content;
  text-align:center;
  transition:opacity .2s,transform .2s;
  box-shadow:0 5px 24px #20332121
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.toast.warning {
  background:#866b41f5
}
.modal {
  padding:28px;
  width:min(460px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  border:1px solid #d5dfc4;
  border-radius:24px;
  background:#fafbf2;
  color:var(--ink);
  box-shadow:0 24px 90px #1427192e
}
.modal::backdrop {
  background:#233a2c69;
  backdrop-filter:blur(5px)
}
.modal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px
}
.modal-heading .icon-button {
  width:32px;
  min-height:32px;
  color:#8d9b7b
}
.modal-heading .icon {
  width:19px;
  height:19px
}
.modal-kicker {
  font-size:10px;
  letter-spacing:1px;
  color:#8b9c76
}
.modal h2 {
  font-size:25px;
  font-weight:600;
  letter-spacing:1px;
  margin:10px 0 16px;
  line-height:1.45
}
.modal-description {
  font-size:12px;
  line-height:1.9;
  color:#819073;
  margin:0 0 20px
}
.help-example {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#edf2df;
  padding:20px;
  border-radius:15px;
  margin:20px 0
}
.help-example>span {
  width:46px;
  height:49px;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:600;
  background:#fffff6;
  border:1px solid #becba9;
  border-radius:8px;
  box-shadow:0 3px 0 #a8bb8f
}
.help-example>b {
  font-size:21px;
  color:#80936c;
  font-weight:400
}
.help-example>strong {
  font-size:34px;
  font-weight:600
}
.help-copy {
  font-size:12px;
  line-height:1.9;
  color:#839174
}
.help-copy p {
  margin:15px 0
}
.help-copy b {
  color:#4b6641;
  font-weight:500
}
.primary-button,.secondary-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:15px 20px;
  border-radius:12px;
  font-size:13px;
  line-height:1.5;
  min-height:48px
}
.primary-button {
  background:var(--green);
  color:#fcfff2;
  box-shadow:0 3px 0 #203e29
}
.primary-button:hover {
  background:#426c4a
}
.secondary-button {
  background:#eaf0df;
  color:#708263
}
.help-modal>.primary-button {
  width:100%;
  margin-top:22px
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px
}
.levels-modal {
  width:min(640px,calc(100% - 32px))
}
.level-map {
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:9px;
  padding:3px 0
}
.map-level {
  aspect-ratio:1;
  min-height:44px;
  border-radius:10px;
  background:#edf2e2;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  position:relative;
  border:1px solid #dee7d0
}
.map-level.current {
  background:#446b40;
  color:#fff
}
.map-level.passed {
  background:#e3edcf;
  color:#5c7944
}
.map-level.passed:after {
  content:"★";
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
  font-size:8px;
  color:#a6ae72
}
.map-level:disabled {
  color:#bac3ac;
  background:#f2f5eb;
  border-color:#e7ecde
}
.map-note {
  font-size:10px;
  color:#9aa68b;
  text-align:center;
  margin:20px 0 0
}
.win-modal {
  text-align:center;
  overflow:hidden
}
.win-emblem {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border-radius:23px;
  background:#e6eed4;
  color:#648846;
  margin:5px auto 20px;
  transform:rotate(-7deg)
}
.win-emblem .icon {
  width:42px;
  height:42px;
  stroke-width:1.2
}
.win-modal>.modal-kicker {
  display:block
}
.win-modal h2 {
  margin-top:10px;
  font-size:27px
}
.win-stars {
  display:flex;
  justify-content:center;
  gap:10px;
  margin:18px 0
}
.win-stars .icon {
  width:34px;
  height:34px;
  fill:#e3bb64;
  color:#d7ab4e;
  stroke-width:1.1
}
.win-stars .icon.empty {
  fill:#e4e9d9;
  color:#d1d9c3
}
.win-description {
  font-size:11px;
  color:#94a183;
  margin:16px 0 23px;
  line-height:1.7
}
.win-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  border-top:1px solid #e0e7d5;
  border-bottom:1px solid #e0e7d5;
  padding:21px 0;
  margin-bottom:26px
}
.win-stats>div {
  display:flex;
  flex-direction:column;
  gap:9px
}
.win-stats span {
  font-size:10px;
  color:#91a080
}
.win-stats strong {
  font-size:21px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.win-modal>.primary-button {
  width:100%
}
.win-actions {
  display:flex;
  justify-content:center;
  gap:35px;
  margin-top:13px
}
.celebration {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:25
}
.confetti-leaf {
  position:absolute;
  top:-30px;
  width:9px;
  height:17px;
  background:#93b36d;
  border-radius:0 85% 0 85%;
  animation:leaf-fall 2.9s ease-in forwards
}
.confetti-leaf:nth-child(3n) {
  background:#dac078;
  width:7px;
  height:12px
}
.confetti-leaf:nth-child(3n + 1) {
  background:#bdce9d
}
.score-pop {
  position:absolute;
  font-size:15px;
  font-weight:650;
  pointer-events:none;
  color:#547f3d;
  z-index:5;
  animation:score-rise .8s ease-out forwards
}
.noscript-note {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:#f0f3e8;
  z-index:100;
  margin:0;
  padding:24px
}
.tile.is-selected.is-hinted {
  color:#fbfff0;
  background:linear-gradient(145deg,#6b8d51,#41633d);
  border-color:#3a5c34;
  box-shadow:inset 0 1px 0 #a3bc8a,0 3px 0 #2e4d28,0 0 0 3px #d6b75b55
}
.tile:after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:9px
}
.tile.is-hinted:after {
  inset:-3px
}
@keyframes hint-pulse {
  0%,100% {
    opacity:.85
  }
  50% {
    opacity:.25
  }
}
@keyframes score-rise {
  from {
    opacity:1;
    transform:translateY(0)
  }
  to {
    opacity:0;
    transform:translateY(-42px)
  }
}
@keyframes leaf-fall {
  to {
    transform:translate3d(70px,110vh,0) rotate(650deg);
    opacity:0
  }
}
@media(min-width:601px) {
  .app-shell {
    height:100dvh;
    min-height:680px;
    display:flex;
    flex-direction:column;
    padding-bottom:18px
  }
  .site-header {
    height:84px;
    min-height:84px
  }
  .game-layout {
    flex:1;
    min-height:0;
    grid-template-rows:minmax(0,1fr)
  }
  .play-column {
    height:100%;
    min-height:0;
    gap:12px
  }
  .level-heading,.goal-panel,.tool-dock,.save-note {
    flex-shrink:0
  }
  .goal-panel {
    padding-block:16px 20px
  }
  .board-frame {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column
  }
  .board-toolbar,.board-bottom {
    flex-shrink:0
  }
  .board-viewport {
    flex:1;
    height:auto;
    min-height:0
  }
  .sidebar {
    padding-top:42px;
    max-height:100%;
    overflow:auto;
    scrollbar-width:thin
  }
  .how-panel {
    margin-bottom:0
  }
  .sidebar-footer {
    padding-bottom:8px
  }
}
.win-modal {
  overflow-x:hidden;
  overflow-y:auto
}
@media(min-width:1500px) {
  .site-header {
    height:100px;
    min-height:100px
  }
  .app-shell {
    padding-bottom:28px
  }
}
@media(max-width:1050px) {
  .app-shell {
    padding-inline:24px
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 225px;
    gap:22px
  }
  .journey-panel,.how-panel {
    padding:17px
  }
  .tool-button {
    gap:7px;
    padding:10px 8px
  }
  .tool-detail {
    display:none
  }
  .tool-icon {
    width:27px
  }
  .tool-label {
    font-size:11px
  }
  .goal-panel {
    padding-inline:22px
  }
  .equation {
    gap:11px
  }
  .goal-side {
    padding-left:12px
  }
  .sidebar-footer {
    font-size:8px;
    letter-spacing:0
  }
  .art-tile {
    left:70px
  }
  .art-tile:last-child {
    left:113px
  }
}
@media(max-width:820px) {
  .game-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .sidebar {
    display:none
  }
  .app-shell {
    max-width:710px
  }
  .site-header {
    height:90px
  }
  .tool-detail {
    display:block
  }
  .tool-label {
    font-size:12px
  }
  .tool-icon {
    width:34px
  }
  .tool-button {
    padding:10px 15px;
    gap:10px
  }
  .board-viewport {
    height:min(56vh,535px)
  }
}
@media(max-width:600px) {
  html,body {
    height:100%;
    overflow:hidden
  }
  .app-shell {
    height:100dvh;
    max-height:100dvh;
    padding:0 12px max(10px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column
  }
  .site-header {
    height:72px;
    min-height:72px;
    gap:8px
  }
  .brand {
    gap:8px
  }
  .brand-mark {
    width:33px;
    height:35px;
    border-radius:11px
  }
  .brand-mark .icon {
    width:24px;
    height:24px
  }
  .brand-name {
    font-size:18px;
    letter-spacing:1px
  }
  .brand-tagline {
    font-size:8px;
    letter-spacing:1.1px;
    margin-top:3px
  }
  .header-actions {
    gap:1px
  }
  .icon-button {
    width:37px;
    min-height:42px
  }
  .icon-button .icon {
    width:20px;
    height:20px
  }
  .quiet-button {
    gap:5px;
    padding:6px 7px;
    font-size:11px
  }
  .quiet-button .icon {
    width:17px;
    height:17px
  }
  .nav-counter {
    display:none
  }
  .game-layout {
    display:flex;
    flex:1;
    min-height:0
  }
  .play-column {
    gap:10px;
    flex:1;
    min-height:0
  }
  .level-heading {
    min-height:25px
  }
  .level-title {
    gap:7px
  }
  h1 {
    font-size:12px;
    letter-spacing:.5px
  }
  .level-badge {
    font-size:10px;
    padding:4px 6px
  }
  .mode-chip {
    font-size:9px;
    padding:3px 6px
  }
  .time-display {
    font-size:11px;
    gap:4px
  }
  .time-display .icon {
    width:14px;
    height:14px
  }
  .goal-panel {
    border-radius:14px;
    padding:12px 16px 15px;
    flex-shrink:0;
    min-height:103px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1px;
    gap:8px
  }
  .eyebrow>span {
    font-size:8px;
    letter-spacing:0
  }
  .equation {
    font-size:30px;
    gap:10px;
    min-height:50px;
    padding-top:6px
  }
  .operand {
    width:29px;
    min-height:37px
  }
  .math-symbol {
    font-size:22px
  }
  .target-number {
    font-size:36px
  }
  .goal-side {
    gap:6px;
    padding-left:10px
  }
  .score-label {
    font-size:8px
  }
  .goal-side>strong {
    font-size:20px
  }
  .combo {
    font-size:8px
  }
  .board-frame {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    border-radius:16px;
    box-shadow:0 3px 0 #d8e0c4
  }
  .board-toolbar {
    padding:11px 12px 10px;
    font-size:9px;
    flex-shrink:0;
    letter-spacing:0
  }
  .remaining-label strong {
    font-size:12px
  }
  .path-instruction {
    gap:5px
  }
  .board-viewport {
    height:auto;
    min-height:0;
    flex:1;
    padding:26px 9px 12px
  }
  .tile {
    font-size:24px;
    border-radius:7px
  }
  .tile:before {
    border-radius:4px;
    inset:3px
  }
  .board-bottom {
    min-height:30px;
    padding:7px 10px;
    font-size:8px;
    flex-shrink:0;
    gap:5px
  }
  .scroll-cue {
    font-size:8px
  }
  .scroll-cue .icon {
    width:11px;
    height:11px
  }
  .tool-dock {
    grid-template-columns:repeat(3,minmax(0,1fr)) 42px;
    gap:7px;
    margin-top:4px;
    flex-shrink:0
  }
  .tool-button {
    padding:9px 8px;
    min-height:57px;
    gap:6px;
    border-radius:11px
  }
  .tool-icon {
    width:26px;
    height:29px;
    background:transparent!important
  }
  .tool-icon .icon {
    width:23px;
    height:23px
  }
  .tool-label {
    font-size:11px
  }
  .tool-detail {
    display:none
  }
  .tool-count {
    font-size:8px;
    min-width:14px;
    line-height:14px;
    right:4px;
    top:3px
  }
  .restart-button {
    min-height:54px;
    font-size:8px;
    gap:5px
  }
  .restart-button .icon {
    width:19px;
    height:19px
  }
  .save-note {
    display:none
  }
  .toast {
    bottom:calc(84px + env(safe-area-inset-bottom));
    font-size:11px;
    max-width:calc(100vw - 28px);
    padding:11px 15px
  }
  .modal {
    padding:23px;
    max-height:calc(100dvh - 30px);
    border-radius:21px
  }
  .modal h2 {
    font-size:23px
  }
  .help-copy {
    font-size:11px
  }
  .help-example {
    gap:12px;
    padding:16px
  }
  .help-example>span {
    width:40px;
    height:44px;
    font-size:25px
  }
  .help-example>strong {
    font-size:30px
  }
  .level-map {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px
  }
  .map-level {
    font-size:12px
  }
  .levels-modal {
    max-height:85dvh
  }
  .win-modal h2 {
    font-size:24px
  }
  .win-stars .icon {
    width:31px;
    height:31px
  }
  .win-stats strong {
    font-size:18px
  }
  .modal-actions {
    gap:8px
  }
  .modal-actions>button {
    font-size:12px;
    padding-inline:14px
  }
  .scenery {
    display:none
  }
  body.three-numbers .equation {
    gap:7px;
    font-size:26px
  }
  body.three-numbers .operand {
    width:25px
  }
  body.three-numbers .math-symbol {
    font-size:20px
  }
  body.three-numbers .target-number {
    font-size:32px
  }
  body.three-numbers .goal-side {
    padding-left:5px
  }
  body.three-numbers .combo {
    display:none
  }
}
@media(max-width:360px) {
  .app-shell {
    padding-inline:9px
  }
  .site-header {
    height:65px;
    min-height:65px
  }
  .brand-tagline {
    display:none
  }
  .brand-name {
    font-size:17px
  }
  .brand-mark {
    width:31px;
    height:33px
  }
  .level-nav>span {
    display:none
  }
  .quiet-button {
    padding-inline:5px
  }
  .header-actions .icon-button {
    width:33px
  }
  .goal-panel {
    padding-inline:12px
  }
  .eyebrow>span {
    display:none
  }
  .goal-side>strong {
    font-size:18px
  }
  .combo {
    font-size:7px
  }
  .equation {
    gap:8px
  }
  .tool-dock {
    gap:5px;
    grid-template-columns:repeat(3,minmax(0,1fr)) 36px
  }
  .tool-button {
    padding-inline:6px;
    gap:4px
  }
  .tool-label {
    font-size:10px
  }
  .tool-icon {
    width:23px
  }
  .tool-icon .icon {
    width:21px;
    height:21px
  }
  .board-viewport {
    padding-inline:5px
  }
  .board-bottom>span:first-child {
    max-width:200px
  }
  .modal {
    padding:20px
  }
  .win-stats {
    gap:4px
  }
}
@media(max-height:650px) and (max-width:600px) {
  .site-header {
    height:57px;
    min-height:57px
  }
  .play-column {
    gap:8px
  }
  .goal-panel {
    min-height:85px;
    padding-block:8px 12px
  }
  .equation {
    min-height:41px;
    padding-top:3px
  }
  .eyebrow>span {
    display:none
  }
  .board-toolbar {
    padding-block:8px
  }
  .board-bottom {
    min-height:25px;
    padding-block:5px
  }
  .tool-button {
    min-height:49px
  }
  .tool-dock {
    margin-top:2px
  }
  .restart-button {
    min-height:49px
  }
  .level-heading {
    min-height:23px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .confetti-leaf {
    display:none
  }
}