:root{--tile: #cfe5e0;--tile-deep: #a8ccc6;--cream: #f7f1e6;--porcelain: #fffdf8;--ink: #2e2a33;--warm: #e8a04a;--warm-deep: #b4712a;--rose: #e8798a;--mint: #4fb8a6;--muted: #8b8795;--display: "Baloo 2", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif;--radius: 16px;--radius-lg: 26px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#fbebd0;color:var(--ink);font-family:var(--body);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--mint);outline-offset:3px}#app{height:100dvh;display:flex;flex-direction:column;align-items:center;max-width:30rem;margin:0 auto;padding:0 .55rem}.sheet{width:100%;height:100%;display:block}.hud{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding:.7rem .2rem .5rem}.hud__right{flex:none;width:44%;max-width:10.5rem;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}.clock{font-family:var(--display);font-weight:700;font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums}.sub{margin-top:.15rem;font-weight:700;font-size:.86rem;letter-spacing:.04em;color:var(--muted);white-space:nowrap}.meter{width:100%;height:1.5rem;border:3px solid var(--ink);border-radius:999px;background:var(--porcelain);overflow:hidden;box-shadow:0 3px 0 var(--ink)}.meter__fill{height:100%;width:100%;background:var(--mint);transition:width .12s linear,background .22s ease}.dots{font-size:.95rem;letter-spacing:.22em;color:var(--rose)}.stage{position:relative;flex:1;min-height:0;margin:0 -.55rem;width:calc(100% + 1.1rem)}canvas.field{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#cfe5e0eb;z-index:10}.overlay[hidden]{display:none}@keyframes panel-in{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}.panel{animation:panel-in .24s cubic-bezier(.2,.9,.3,1.1) both;width:min(21rem,100%);text-align:center;padding:1.5rem 1.4rem 1.3rem;background:var(--porcelain);border:3px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 8px 0 var(--ink)}.panel__title{margin:0;font-family:var(--display);font-weight:700;font-size:1.5rem}.panel__score{margin:.2rem 0 .1rem;font-family:var(--display);font-weight:800;font-size:3.1rem;line-height:1.05;color:var(--warm);text-shadow:0 4px 0 var(--warm-deep);font-variant-numeric:tabular-nums}.panel__unit{margin:0 0 .8rem;font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.panel__rows{margin:0 0 .8rem;padding:.55rem .2rem;border-top:2px solid var(--tile);border-bottom:2px solid var(--tile);display:flex;flex-direction:column;gap:.3rem}.panel__rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}.panel__rows dt{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.panel__rows dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem}.panel__line{margin:0;font-size:1rem;color:var(--rose);font-weight:700}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.panel__kicker{margin:.2rem 0 0;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.steps{width:100%;margin:0 0 .45rem;padding:0;list-style:none;display:flex;gap:.3rem}.steps li{flex:1;min-width:0;text-align:center;padding:.22rem 0;border:2px solid var(--tile-deep);border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:.03em;color:var(--muted);background:var(--porcelain);transition:background .2s ease,color .2s ease,border-color .2s ease}.steps li.now{background:var(--ink);border-color:var(--ink);color:var(--porcelain)}.steps li.done{background:var(--tile);border-color:var(--mint);color:var(--ink)}.steps li.done:before{content:"✓ ";color:var(--mint)}.coach{position:absolute;left:50%;top:.6rem;z-index:5;width:max-content;max-width:calc(100% - 2rem);margin:0;padding:.5rem .95rem;transform:translate(-50%,-6px);background:var(--porcelain);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);font-weight:800;font-size:1rem;line-height:1.3;text-align:center;opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s ease}.coach--on{opacity:1;transform:translate(-50%)}.tray{position:absolute;left:.6rem;right:.6rem;bottom:.7rem;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.55rem;animation:panel-in .24s cubic-bezier(.2,.9,.3,1.1) both}.tray[hidden]{display:none}.tray__row{display:flex;gap:.5rem;width:100%;max-width:24rem}.pick,.treat{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .3rem .5rem;background:var(--porcelain);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);font-weight:800;font-size:.82rem;line-height:1.15;cursor:pointer}.pick canvas{width:3.6rem;height:3.6rem}.pick:active,.treat:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.pick--on{background:var(--tile);border-color:var(--ink);outline:3px solid var(--mint);outline-offset:-7px}.treat{flex:none;flex-direction:row;gap:.5rem;padding:.45rem 1.2rem .45rem .7rem;background:var(--warm);font-family:var(--display);font-size:1.15rem;color:var(--ink)}.treat canvas{width:2.6rem;height:2.6rem}.overlay{overflow-y:auto;padding:.8rem 0}.photos{display:flex;justify-content:center;gap:.6rem;margin:0 0 .8rem}.photo{margin:0;width:8.2rem;padding:.35rem .35rem .2rem;background:#fff;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);transform:rotate(-2.5deg)}.photo--after{transform:rotate(2deg)}.photo img{display:block;width:100%;aspect-ratio:350 / 360;object-fit:cover}.photo figcaption{padding-top:.15rem;font-family:var(--display);font-weight:700;font-size:.95rem}.wall{margin:0 0 .75rem}.wall__title{margin:0 0 .3rem;font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.wall__row{display:flex;justify-content:center;gap:.3rem;flex-wrap:wrap}.wall__row canvas{width:2.6rem;height:2.6rem;background:var(--tile);border:2px solid var(--ink);border-radius:50%}.jar{position:absolute;left:.7rem;bottom:.8rem;z-index:4;width:4.1rem;height:4.1rem;padding:0;display:grid;place-items:center;background:var(--porcelain);border:3px solid var(--ink);border-radius:50%;box-shadow:0 4px 0 var(--ink);cursor:pointer}.jar[hidden]{display:none}.jar canvas{width:2.9rem;height:2.9rem}.jar:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.jar:disabled{opacity:.45;cursor:default}.jar__count{position:absolute;right:-.35rem;top:-.35rem;min-width:1.6rem;height:1.6rem;padding:0 .3rem;display:grid;place-items:center;background:var(--warm);border:2.5px solid var(--ink);border-radius:999px;font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1}@keyframes jar-nudge{0%,to{transform:none}20%{transform:translateY(-6px) rotate(-6deg)}40%{transform:translateY(0) rotate(5deg)}60%{transform:translateY(-4px) rotate(-3deg)}80%{transform:none}}.jar--nudge{animation:jar-nudge .9s ease 2}:root{--share-ink: var(--ink);--share-card: var(--porcelain);--share-accent: var(--mint);--home-ink: var(--ink);--home-card: var(--porcelain)}.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;overflow-y:auto;background:#fbebd0;padding:.9rem 1rem 2rem}.menu[hidden]{display:none}.menu>*{max-width:26rem;margin-left:auto;margin-right:auto}.menu__top{display:flex}.menu__title{margin:1.1rem auto .2rem;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;text-align:center}.menu__tag{margin:0 auto 1.1rem;text-align:center;font-weight:700;font-size:clamp(.88rem,4.1vw,1rem);color:var(--muted)}.card{margin-bottom:.9rem;padding:1rem 1rem 1.05rem;background:var(--porcelain);border:3px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 5px 0 var(--ink)}.card--today{background:#fff6e4}.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}.card__kicker{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-deep)}.card__stat{font-weight:700;font-size:.82rem;color:var(--muted);text-align:right}.card__name{margin:.25rem 0 .3rem;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,6.3vw,1.6rem);line-height:1.1}.card__body{margin:0 0 .6rem;line-height:1.4}.todaydog{margin:.45rem 0 .7rem;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fbebd0}.todaydog canvas{display:block;width:100%;height:11.5rem}.todaydog__name{padding:.3rem .6rem .25rem;font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.25;text-align:center;background:var(--porcelain);border-top:3px solid var(--ink)}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:0 0 .95rem;padding:0;list-style:none}.facts li{display:grid;place-items:center;padding:.35rem .3rem;font-weight:800;font-size:.86rem;line-height:1.2;text-align:center;color:var(--ink);background:var(--tile);border:2px solid var(--mint);border-radius:12px}.btn.btn--practice{display:flex;flex-direction:column;align-items:center;gap:.05rem}.btn__note{font-family:var(--body);font-weight:700;font-size:.85rem;color:var(--muted)}.textlink{display:block;margin:.7rem auto 0;padding:.55rem .9rem;background:none;border:0;font-weight:800;font-size:.98rem;color:var(--warm-deep);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px;cursor:pointer}.btn{display:block;width:100%;padding:.8rem 1rem;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);background:var(--warm);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);cursor:pointer}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.btn--ghost{background:var(--porcelain);font-size:1.02rem}.btn--share{background:var(--mint);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18);font-size:1.25rem}.panel__actions{display:flex;flex-direction:column;gap:.55rem;margin:0 0 .9rem}.panel__hint{margin:-.15rem 0 .1rem;font-size:.82rem;font-weight:700;color:var(--muted)}.panel__home{margin-top:.8rem;display:flex;justify-content:center}.back{flex:none;align-self:center;display:grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;color:var(--ink);background:var(--porcelain);border:3px solid var(--ink);border-radius:50%;box-shadow:0 3px 0 var(--ink);cursor:pointer}.back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.hud__left{flex:1;min-width:0}.tut{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20}.tut[hidden]{display:none}.tut__hole{position:absolute;border:3px dashed var(--warm);border-radius:var(--radius);box-shadow:0 0 0 9999px #2e2a33d6;pointer-events:none;transition:left .24s ease,top .24s ease,width .24s ease,height .24s ease,border-radius .24s ease}.tut__hole--round{border-radius:50%}.tut__card{position:absolute;left:0;right:0;bottom:.8rem;width:min(26rem,calc(100% - 1.2rem));margin:0 auto;padding:1rem 1.1rem .75rem;text-align:center;background:var(--porcelain);border:3px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--ink);animation:panel-in .24s cubic-bezier(.2,.9,.3,1.1) both}.tut__card--top{top:.8rem;bottom:auto}.tut__step{margin:0 0 .15rem;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-deep)}.tut__title{margin:0 0 .3rem;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.15}.tut__text{margin:0 0 .85rem;font-size:1.05rem;line-height:1.45}.tut__skip{margin-top:.2rem;font-size:.9rem;color:var(--muted)}@media (max-height: 700px){.tut__card{padding:.8rem .9rem .6rem}.tut__title{font-size:1.3rem}.tut__text{font-size:.98rem;margin-bottom:.65rem}}