@font-face{font-family:'Jua';src:url('./fonts/jua.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('./fonts/outfit.woff') format('woff');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--forest:#063b2d;--deep:#03281f;--cream:#fff3ce;--gold:#ffd85c;--muted:#a9c6ac;font-family:'Jua',system-ui,sans-serif;color:var(--cream);background:#021e18;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 20%,#14583e 0,#062e24 50%,#011a15 100%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #fff4b6;outline-offset:5px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}h1,h2,p{margin:0}button,a{user-select:none}a{color:inherit}button{transition:transform .12s,filter .15s}button:hover{filter:brightness(1.06)}
.app-shell{position:relative;isolation:isolate;width:min(100%,480px);min-height:100dvh;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#0c503b00,#042c23b0 90%)}
.home-screen{min-height:100dvh;display:flex;flex-direction:column;padding:calc(24px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));position:relative}.home-tools{display:flex;justify-content:flex-end;position:relative;z-index:2}.icon{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font:28px/1 'Jua',sans-serif;color:#ffedb6;background:linear-gradient(145deg,#276352,#073b30 60%,#02271e);border:1px solid #6caa8260;box-shadow:inset 1px 2px 2px #b9efd526,0 4px 7px #001d17b3}.home-content{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;padding-bottom:22px}.brand{mix-blend-mode:lighten;position:relative;overflow:hidden;margin:0;flex:none;mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent)}.brand img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;mix-blend-mode:normal}.brand-home{width:calc(100% + 40px);aspect-ratio:1.72;max-width:500px}.home-tagline{font-size:17px;letter-spacing:.4px;color:#e0e5bc;margin:6px 0 22px}.home-progress{display:flex;align-items:center;gap:7px;border:1px solid #60896380;box-shadow:inset 0 1px 1px #d9fff00e;background:#022b23a6;border-radius:30px;padding:10px 16px;font:14px 'Jua',sans-serif;color:#b9d1b5}.home-progress strong{color:var(--cream);font-family:'Outfit',sans-serif;font-size:19px;margin-left:8px}.gold{color:var(--gold);text-shadow:0 2px 0 #9d6a1e,0 0 10px #ffcf4920}.home-progress .gold{font-size:22px;margin-right:2px}.home-actions{width:100%;max-width:330px;text-align:center;margin-top:30px}.start-button,.primary{width:100%;background:linear-gradient(170deg,#fff39d 0,#ffdf62 22%,#ffc33d 68%,#f3a42c);color:#063b2d;border:2px solid #ffe98a;border-radius:22px;box-shadow:inset 0 3px 1px #fffbc5,inset 0 -4px 1px #ef991b,0 5px 0 #b87119,0 10px 22px #001b1580;text-shadow:0 1px #ffed91;padding:19px 24px;font-size:28px;display:flex;align-items:center;justify-content:center;gap:25px}.start-button span{font-size:18px}.resume-note{min-height:22px;margin-top:15px;font-size:14px;color:#b6cbb0}.text-button{font-size:16px;background:none;color:#c5d7b8;padding:12px 14px;border-radius:12px}.text-button>span{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #829c76;border-radius:50%;font-size:15px;margin-right:6px}.home-actions>.text-button{margin-top:7px}.home-footer{text-align:center;position:relative;z-index:1;padding-top:16px}.home-footer a{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;text-decoration:none;color:#a9c3a4;font:13px/1.6 'Outfit','Jua',sans-serif;padding:10px 5px}.home-footer a:hover{color:var(--cream)}.contact-email{opacity:.75;margin-left:4px}
.garden{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.garden i{position:absolute;bottom:-65px;width:80px;height:220px;border-radius:100% 0 100% 0;background:linear-gradient(72deg,#073e28,#20713b 47%,#619637 49%,#174f31 53%,#083724);box-shadow:inset 2px 0 1px #90bc4e30;opacity:.5;transform:rotate(18deg)}.garden i:nth-child(1){left:-20px;bottom:-12px;transform:rotate(-24deg)}.garden i:nth-child(2){left:40px;transform:rotate(27deg)}.garden i:nth-child(3){left:-35px;bottom:116px;transform:rotate(-20deg);opacity:.25}.garden i:nth-child(4){right:-8px;transform:rotate(-73deg)}.garden i:nth-child(5){right:55px;bottom:-100px;transform:rotate(-38deg)}.garden i:nth-child(6){right:-58px;bottom:104px;transform:rotate(-47deg);opacity:.28}.garden span{position:absolute;font-size:23px;color:#fdd265;bottom:70px;left:10px;text-shadow:0 0 16px #e6d14299;animation:glimmer 5s ease-in-out infinite}.garden span:last-child{bottom:100px;left:auto;right:12px;font-size:16px;animation-delay:2s}
.game{padding:calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));min-height:100dvh}.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-8px 0 8px}.brand-game{width:min(65%,250px);aspect-ratio:2.05}.game-status{display:grid;grid-template-columns:1fr 1fr 1.22fr;gap:8px;margin-bottom:16px}.stage-badge,.stat{border:1px solid #63987a70;background:linear-gradient(140deg,#145642d9,#06372cef);box-shadow:inset 0 2px 1px #94caa82e,0 4px 7px #001e1850;border-radius:18px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.stage-badge>span{font:800 12px 'Outfit',sans-serif;letter-spacing:1.5px;color:#e2dcb0}.stage-badge strong{font:800 30px/.98 'Outfit',sans-serif;color:var(--gold)}.stat>span{font-size:14px;color:#bbd4bf}.stat strong{font:800 30px/1.05 'Outfit',sans-serif;color:var(--gold)}.star-stat strong{font-size:23px;white-space:nowrap;color:var(--cream)}.star-stat .gold{font-size:28px}.lesson{font-size:14px;line-height:1.65;padding:11px 14px;border-radius:14px;margin:0 0 15px;background:#0c493ac9;border:1px solid #a7bd6a48;color:#e0e9c7}.board-frame{border:2px solid #ffef91;border-radius:32px;padding:9px;background:linear-gradient(150deg,#fff4a5 0,#ffdc5a 10%,#ffa925 48%,#ffd958 82%,#f9ad26 100%);box-shadow:inset 0 2px 0 #fff8bd,inset 0 -4px 0 #e58d13,0 7px 0 #85581980,0 12px 24px #001c1770}.board-shell{position:relative;background:radial-gradient(ellipse at 40% 10%,#0b4839,#022b22);border:3px solid #092e22;border-radius:22px;box-shadow:inset 0 3px 8px #0009;padding:9px}.board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:7px;touch-action:none;user-select:none;-webkit-user-select:none}.tile,.empty{aspect-ratio:1;min-width:0;border-radius:17%;position:relative}.tile{display:grid;place-items:center;padding:0 0 3px;border:1px solid #fffbe0;background:linear-gradient(145deg,#fffbe7,#fff0c9 70%,#f6dfac);color:#04382c;box-shadow:inset 1px 3px 1px #fffef0,inset 0 -5px 0 #ddc492,0 3px 2px #01271e90;font:900 clamp(30px,10vw,52px)/1 'Outfit',sans-serif;text-shadow:0 1px 0 #ffffff60;overflow:visible}.tile>span:first-child{position:relative;z-index:2;pointer-events:none}.tile .star{position:absolute;z-index:3;right:-2px;top:-5px;color:#ffda50;font:25px/1 sans-serif;-webkit-text-stroke:1px #af731b;filter:drop-shadow(0 2px 1px #976122);pointer-events:none}.tile.selected{background:linear-gradient(145deg,#fff39b,#ffd34e 40%,#ffb32e);border-color:#fff091;box-shadow:inset 0 3px 1px #fffbc5,inset 0 -4px 0 #ed8f22,0 0 0 2px #ffbc33;transform:scale(.97)}.tile.selected:after{content:'';position:absolute;z-index:1;bottom:0;right:0;width:47%;height:30%;border-radius:100% 0 15% 0;background:linear-gradient(135deg,#ff954e,#ed5a47);pointer-events:none}.empty{background:#f1e4b247;border:2px dashed #d3d6ac22;box-shadow:inset 0 2px 7px #001f172b}.board-shell svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}.board-shell polyline{fill:none;stroke:#ffe970;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.82;filter:drop-shadow(0 0 3px #ffcf5780)}.tile.falling{animation:settle .22s ease-out both}.feedback{margin:17px 6px 0;text-align:center;padding:13px 8px;min-height:51px;border-radius:18px;border:1px solid #5eaa7d60;box-shadow:inset 0 2px 1px #84c6a827;background:#04382bc4;color:#c9dfbc;font-size:15px;line-height:1.55}.feedback.good{color:#ffe47d}.game>.primary{margin-top:16px;font-size:19px;padding:13px}
dialog{color:var(--cream);background:linear-gradient(145deg,#13513e,#042d23);border:1px solid #8bc18a70;box-shadow:inset 0 2px 0 #c3efc627,0 24px 80px #0009;width:min(92vw,400px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;padding:25px;border-radius:27px}dialog::backdrop{background:#00180fe0;backdrop-filter:blur(5px)}dialog h2{text-align:center;font-size:27px;margin-bottom:18px;font-weight:400}dialog p{font-size:15px;line-height:1.7;color:#cde0c4}dialog .primary{font-size:20px;border-radius:17px;padding:14px;margin-top:23px;box-shadow:inset 0 2px 0 #fff9b7,0 3px 0 #a7771c}.secondary{width:100%;margin-top:14px;padding:13px 18px;background:#ffffff09;border:1px solid #95c19c3b;border-radius:15px;color:#cbe0c2;font-size:16px}.settings-list{display:grid;gap:10px}.settings-list button{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#022d2499;border:1px solid #85b09238;border-radius:14px;font-size:17px;text-align:left}.settings-list span{font-size:15px;color:var(--gold)}.settings-note{font-size:13px;text-align:center;margin-top:17px}.result-content{text-align:center}.result-stage{font:800 14px 'Outfit',sans-serif;letter-spacing:2px;color:#afcaa8}.result-symbol{font-size:40px;color:var(--gold);text-shadow:0 3px 0 #996b23;margin:18px 0}.result-content h2{font-size:34px;margin:0 0 12px}.failed .result-symbol{color:#bad0b3}.help-tabs{display:flex;gap:6px;margin-bottom:20px}.help-tabs button{flex:1;padding:10px 3px;border-radius:12px;background:#ffffff06;color:#bed4b3;font-size:14px;border:1px solid #749c7638}.help-tabs button[aria-pressed=true]{color:#083d2d;background:#ffdc67;border-color:#ffe6a3}.help-demo{position:relative;background:#022c23b0;border:1px solid #93bb8240;border-radius:20px;padding:23px 18px 33px;overflow:hidden;margin-bottom:16px}.demo-track{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;position:relative}.demo-tile{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;color:#063b2d;background:linear-gradient(140deg,#fffae2,#ffeec2);box-shadow:inset 0 -4px #d9c18d,0 3px 4px #002119;font:800 39px 'Outfit',sans-serif;position:relative;z-index:1;animation:demo-select 4s infinite}.demo-tile:nth-child(2){animation-delay:.4s}.demo-tile:nth-child(3){animation-delay:.8s}.demo-star{position:absolute;font:20px sans-serif;top:-5px;right:0;color:#ffd755;text-shadow:0 2px #a97e21}.demo-stroke{position:absolute;z-index:2;left:16.6%;right:16.6%;height:6px;top:50%;background:#ffe35d;transform-origin:left;animation:demo-line 4s infinite;border-radius:8px}.demo-hand{position:absolute;z-index:3;top:65%;left:11%;font-size:27px;filter:drop-shadow(0 3px 3px #001c1980);animation:demo-drag 4s infinite}.demo-caption{font:15px 'Jua',sans-serif;text-align:center;color:#ffdf78;margin-top:16px}.help-copy{min-height:76px}.help-note{border-top:1px solid #a6be8730;margin-top:14px;padding-top:14px;font-size:14px}.help-keyboard{font-size:12px;margin-top:12px;color:#a6c3a7}.gravity-demo{height:170px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:10px;padding:4px 24px;position:relative}.gravity-demo .demo-tile{font-size:32px;aspect-ratio:auto;animation:none}.gravity-demo .demo-tile:nth-child(-n+3){animation:demo-fall 4s infinite}.gravity-demo .demo-tile:nth-child(n+4){animation:demo-pop 4s infinite}.motion-caption{display:none}.demo-toggle{display:block;margin:0 auto 10px;padding:8px 12px;background:#ffffff08;border-radius:10px;font-size:13px;color:#c7dcb7}.help-demo.paused *{animation-play-state:paused!important}
@keyframes glimmer{50%{opacity:.4;transform:scale(.8)}}@keyframes settle{from{transform:translateY(var(--fall-y,-15px));opacity:.7}to{transform:translateY(0);opacity:1}}@keyframes demo-select{0%,12%,85%,100%{background:#fff2cc;transform:scale(1)}22%,72%{background:#ffd04d;transform:scale(.95)}}@keyframes demo-line{0%,14%{transform:scaleX(0);opacity:0}20%{opacity:1}52%,70%{transform:scaleX(1);opacity:1}80%,100%{opacity:0;transform:scaleX(1)}}@keyframes demo-drag{0%,12%{left:11%;opacity:0}18%{opacity:1}52%,68%{left:78%;opacity:1}78%,100%{left:78%;opacity:0}}@keyframes demo-pop{0%,32%,95%,100%{opacity:1;transform:scale(1)}42%,85%{opacity:0;transform:scale(.4)}}@keyframes demo-fall{0%,42%,95%,100%{transform:translateY(0)}58%,85%{transform:translateY(calc(100% + 10px))}}
@media(min-width:600px){.app-shell{box-shadow:0 0 100px #00180b99;border-inline:1px solid #56826728}.home-screen{min-height:100dvh}.brand-home{max-width:470px}.game-header{margin-bottom:0}}
@media(max-width:359px){.home-screen{padding-inline:18px}.home-tagline{font-size:15px}.home-actions{margin-top:24px}.home-progress{font-size:12px;gap:5px}.game{padding-inline:12px}.game-header .icon{width:38px;height:38px;font-size:24px}.game-status{gap:6px}.stat>span{font-size:12px}.stage-badge,.stat{min-height:68px;border-radius:15px}.star-stat strong{font-size:19px}.board-frame{padding:7px;border-radius:27px}.board-shell{padding:7px;border-radius:18px}.board{gap:5px}.tile{font-size:clamp(26px,9vw,35px)}.tile .star{font-size:19px;right:-3px;top:-4px}.feedback{font-size:14px;margin-inline:2px}.contact-email{font-size:12px}dialog{padding:20px}.lesson{font-size:13px}}
@media(max-height:720px){.home-screen{padding-top:16px}.home-content{padding-bottom:0}.brand-home{max-width:360px}.home-tagline{margin-bottom:15px}.home-actions{margin-top:22px}.start-button{padding:15px}.home-footer{padding-top:3px}.game-header{margin-top:-10px}.brand-game{max-width:185px}.game-status{margin-bottom:12px}.stage-badge,.stat{min-height:67px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.demo-stroke{transform:scaleX(1)}.demo-hand{left:74%}.demo-tile{background:#ffdc6c}.motion-caption{display:block;font-size:13px;text-align:center;color:#c5d8b9;margin-top:10px}.demo-toggle{display:none}}

/* An opaque backdrop lets the black-matted logo blend inside the isolated shell. */
.app-shell{background:radial-gradient(ellipse at 50% 30%,#0c503b,#042c23 90%)}

/* Compact mobile layout; the supplied black-matted artwork blends on screen. */
.brand{mix-blend-mode:screen;mask-image:none;-webkit-mask-image:none}
.brand img{object-fit:cover;mix-blend-mode:normal}
.home-screen{min-height:100svh;padding:calc(12px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom))}
.home-tools{height:40px}.home-tools .icon{width:40px;height:40px;font-size:25px}
.home-content{justify-content:center;padding:0 0 25px;gap:0}
.brand-home{width:min(100%,320px,calc((100svh - 292px)*1.62));min-width:190px;aspect-ratio:1.62;max-width:320px}
.home-tagline{font-size:15px;margin:8px 0 13px}
.home-progress{padding:7px 13px;font-size:13px}.home-progress strong{font-size:17px}
.home-actions{margin-top:20px;max-width:310px}.start-button{font-size:26px;padding:15px 22px;border-radius:19px}
.resume-note{font-size:13px;min-height:20px;margin-top:12px}
.home-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px}
.home-links .text-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;text-decoration:none;font-size:14px;padding:8px 9px}
.home-links .text-button>span{flex:none;font-size:13px;width:20px;height:20px}
.home-links .contact-button{color:#b9d1b0}
.game{min-height:100svh;padding:calc(6px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom))}
.game-header{margin:0 0 6px;height:80px;gap:6px}.brand-game{width:136px;max-width:136px;aspect-ratio:1.62}
.game-header .icon{width:40px;height:40px;font-size:25px}
.game-status{margin-bottom:10px;gap:7px}.stage-badge,.stat{min-height:58px;border-radius:14px;gap:2px}
.stage-badge>span{font-size:10px}.stage-badge strong,.stat strong{font-size:25px}.stat>span{font-size:12px}.star-stat strong{font-size:21px}.star-stat .gold{font-size:23px}
.lesson{padding:8px 11px;margin-bottom:9px;font-size:13px;line-height:1.5}
.board-frame{margin-inline:auto;max-width:100%;padding:7px;border-radius:27px;flex:none}
.board-shell{padding:7px;border-radius:18px;container-type:inline-size}.board{gap:6px}
.tile{font-size:clamp(26px,12cqw,49px)}.tile .star{font-size:clamp(17px,6cqw,24px)}
.feedback{min-height:40px;padding:9px 7px;margin:11px 4px 0;border-radius:14px;font-size:14px;line-height:1.4}

.game>.primary{margin-top:10px;padding:10px;font-size:17px}
.settings-list .reset-setting{color:#ffcc9d}.reset-copy{text-align:center}.reset-error{margin-top:14px;color:#ffc295}
@media(max-width:359px){.home-screen{padding-inline:18px}.home-links{gap:3px}.home-links .text-button{font-size:13px;padding-inline:7px}.game{padding-inline:10px}.game-header{height:72px}.brand-game{width:122px}.game-status{gap:5px}.board{gap:5px}.tile .star{right:-2px}.star-stat strong{font-size:19px}}
@media(max-height:620px){.home-content{padding-bottom:0}.home-actions{margin-top:14px}.home-tagline{margin-block:5px 10px}.game-header{height:64px}.brand-game{width:108px}.game-status{margin-bottom:8px}.stage-badge,.stat{min-height:52px}.lesson{font-size:12px;margin-bottom:7px}.feedback{margin-top:9px}}
@media(orientation:landscape) and (max-height:500px){.home-content{padding-top:5px}.brand-home{min-width:140px;width:160px}.home-screen{height:auto}.home-tools{position:absolute;right:15px;top:12px}.home-actions{margin-top:10px}.home-tagline{margin-block:3px 7px}.start-button{padding-block:10px}.resume-note{margin-top:8px}}

/* Clear, moderately rounded numerals with open counters at small tile sizes. */
.tile,.demo-tile{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-variant-numeric:lining-nums tabular-nums}

.home-tools{align-items:center;gap:12px}.home-tools .icon{margin-left:auto}
.install-button{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:7px 12px;border:1px solid #89bb8140;border-radius:20px;background:#033a2b88;color:#d5e7c4;font-size:13px}
.install-button span{font:800 18px 'Outfit',sans-serif;color:var(--gold)}
.update-button{margin-top:12px;padding:10px 14px;border:1px solid #e6d06860;border-radius:12px;background:#ffe07c15;color:var(--gold);font-size:13px}
.install-icon{display:block;margin:0 auto 14px;border-radius:18px}
#install-dialog h2{font-size:24px;margin-bottom:8px}.install-intro{text-align:center}
.install-guide{display:grid;gap:14px;margin:20px 0}.install-guide b{color:var(--gold);font-weight:400}
#install-dialog .install-note{font-size:13px;border-top:1px solid #8eb48740;padding-top:14px;color:#b8d0af}

.coming-screen{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));text-align:center}
.coming-content{width:100%;max-width:360px}.complete-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #b4c77555;border-radius:24px;color:#d6e4bd;background:#032e2488;font:700 12px 'Outfit',sans-serif;letter-spacing:1.5px}.complete-badge>span:first-child{color:var(--gold);font-size:18px}
.coming-mango{display:block;width:clamp(100px,23svh,160px);height:auto;margin:22px auto 18px;border-radius:32%;box-shadow:0 0 48px #ffde4a12}
.coming-eyebrow{font:800 17px 'Outfit',sans-serif;letter-spacing:4px;color:var(--gold);margin-bottom:12px}
#coming-title{font-size:31px;font-weight:400;line-height:1.3;outline:none}.complete-copy{margin-top:17px;font-size:14px;color:#e2e9c7;line-height:1.6}.coming-copy{margin-top:10px;color:#b5cdb2;font-size:14px;line-height:1.8}.coming-thanks{font-size:13px;color:#dce7ba;margin-top:18px}.coming-thanks span{color:var(--gold)}
#coming-home{margin:25px auto 0;max-width:290px;font-size:22px;padding:14px}
@media(max-height:620px){.coming-screen{padding-block:18px}.coming-mango{width:90px;margin-block:12px}.coming-eyebrow{font-size:14px;margin-bottom:8px}#coming-title{font-size:27px}.complete-copy{margin-top:12px}.coming-thanks{margin-top:12px}#coming-home{margin-top:18px}}