*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--red: #f5372a;--blue: #1177ee;--yellow: #fbc013;--cream: #fff6e3;--white: #ffffff;--ink: #17161a;--line: 4px;--line-thick: 5px;--radius: 28px;--radius-sm: 18px;--radius-pill: 999px;--pop: 0 6px 0 var(--ink);--pop-sm: 0 4px 0 var(--ink);--pop-lg: 0 9px 0 var(--ink);--spring: cubic-bezier(.34, 1.8, .5, 1);font-family:Helvetica,Helvetica Neue,Arial,sans-serif;font-synthesis:weight;color:var(--ink);background-color:var(--red)}body{min-height:100dvh;background-color:var(--red);color:var(--ink)}h1,h2,h3,.btn,.tab,.check__name,.card__name,.topbar__name{font-family:ui-rounded,SF Pro Rounded,Hiragino Maru Gothic ProN,Helvetica,Helvetica Neue,Arial,sans-serif;font-weight:800;letter-spacing:-.02em}.shell{min-height:100dvh;max-width:44rem;margin-inline:auto;padding:1.25rem 1.25rem 2.5rem;display:flex;flex-direction:column;gap:1.5rem}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.topbar__mark{display:flex;align-items:center;gap:.6rem}.topbar__bowl{display:grid;place-items:center;width:3rem;height:3rem;font-size:1.6rem;line-height:1;background-color:var(--yellow);border:var(--line) solid var(--ink);border-radius:var(--radius-sm);box-shadow:var(--pop-sm)}.topbar__name{font-size:1.4rem;color:var(--white);text-shadow:3px 3px 0 var(--ink)}.tabs{display:flex;gap:.5rem;padding:.35rem;background-color:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--pop-sm)}.tab{padding:.55rem 1.15rem;min-height:2.75rem;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font-size:1rem;transition:transform .18s var(--spring),background-color .18s ease}.tab:hover{transform:translateY(-2px) rotate(-1.5deg)}.tab.active{background-color:var(--blue);color:var(--white)}.page{display:flex;flex-direction:column;gap:1.25rem;flex:1}.page--lost{align-items:center;text-align:center;justify-content:center;gap:1rem}.section-title{font-size:1.15rem;color:var(--white);text-shadow:2px 2px 0 var(--ink);margin-block-start:.5rem}.hero{background-color:var(--yellow);border:var(--line-thick) solid var(--ink);border-radius:var(--radius);box-shadow:var(--pop-lg);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}.hero--slim{background-color:var(--blue);color:var(--white)}.hero__date{font-size:.95rem;font-weight:700}.hero__title{font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.05}.hero__sub{font-size:1.05rem;font-weight:600}.meter{position:relative;height:2.25rem;margin-block-start:.75rem;background-color:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius-pill);overflow:hidden}.meter__fill{display:block;height:100%;background-color:var(--blue);border-radius:var(--radius-pill);transition:width .45s var(--spring)}.meter__dog{position:absolute;inset-block:0;right:.6rem;display:grid;place-items:center;font-size:1.15rem}.meter__dog--happy{animation:pop-in .5s var(--spring)}.checklist,.card-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1rem}.check{background-color:var(--white);border:var(--line-thick) solid var(--ink);border-radius:var(--radius);box-shadow:var(--pop);transition:transform .2s var(--spring),box-shadow .2s var(--spring),background-color .2s ease}.check:hover{transform:translateY(-4px) rotate(-.8deg);box-shadow:var(--pop-lg)}.check:has(.check__box:focus-visible){outline:var(--line) solid var(--blue);outline-offset:4px}.check:active{transform:translateY(2px);box-shadow:var(--pop-sm)}.check--given{background-color:var(--yellow)}.check__label{position:relative;display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;min-height:5rem;cursor:pointer}.check__box{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.check__tick{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;background-color:var(--white);border:var(--line) solid var(--ink);border-radius:14px;transition:transform .22s var(--spring),background-color .22s ease}.check__tick:after{content:"";width:1.1rem;height:.6rem;border-left:var(--line) solid var(--white);border-bottom:var(--line) solid var(--white);border-radius:2px;transform:rotate(-45deg) scale(0);transition:transform .28s var(--spring)}.check--given .check__tick{background-color:var(--blue);transform:rotate(-6deg) scale(1.08)}.check--given .check__tick:after{transform:rotate(-45deg) scale(1) translate(1px,-2px)}.check__emoji{font-size:1.9rem;line-height:1}.check__text{display:flex;flex-direction:column;flex:1}.check__name{font-size:1.2rem}.check__dose{font-size:.95rem;font-weight:600}.check__status{flex:none;padding:.35rem .75rem;font-size:.85rem;font-weight:700;background-color:var(--cream);border:3px solid var(--ink);border-radius:var(--radius-pill)}.check--given .check__status{background-color:var(--red);color:var(--white)}.cheer{padding:1rem;text-align:center;font-size:1.25rem;font-weight:800;color:var(--ink);background-color:var(--yellow);border:var(--line-thick) solid var(--ink);border-radius:var(--radius);box-shadow:var(--pop);animation:pop-in .45s var(--spring)}.card{background-color:var(--white);border:var(--line-thick) solid var(--ink);border-radius:var(--radius);box-shadow:var(--pop);padding:1.1rem 1.25rem}.card--row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;transition:transform .2s var(--spring)}.card--row:hover{transform:rotate(.8deg)}.card__emoji{font-size:1.8rem;line-height:1}.card__text{display:flex;flex-direction:column;flex:1;min-width:8rem}.card__name{font-size:1.15rem}.card__dose{font-size:.95rem;font-weight:600}.card__actions{display:flex;gap:.5rem}.fieldset{border:0;padding:0;display:flex;flex-direction:column;gap:1rem}.fieldset__legend{font-weight:800;font-size:1.05rem;padding:0}.field{display:flex;flex-direction:column;gap:.4rem;border:0;padding:0}.field__label{font-weight:700;font-size:.95rem;padding:0}.field__input{min-height:3.25rem;padding:.65rem 1rem;font-size:1.05rem;font-weight:600;color:var(--ink);background-color:var(--cream);border:var(--line) solid var(--ink);border-radius:var(--radius-sm);transition:transform .18s var(--spring),background-color .18s ease}.field__input:focus-visible{outline:none;background-color:var(--white);transform:translateY(-2px);box-shadow:var(--pop-sm)}.emoji-row{display:flex;flex-wrap:wrap;gap:.5rem}.emoji-pick{width:3rem;height:3rem;font-size:1.4rem;line-height:1;background-color:var(--cream);border:var(--line) solid var(--ink);border-radius:14px;cursor:pointer;transition:transform .2s var(--spring),background-color .2s ease}.emoji-pick:hover{transform:translateY(-3px) rotate(-6deg)}.emoji-pick--on{background-color:var(--yellow);transform:rotate(-6deg) scale(1.1);box-shadow:var(--pop-sm)}.btn{display:inline-grid;place-items:center;min-height:3.25rem;padding:.7rem 1.5rem;font-size:1.05rem;color:var(--ink);background-color:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--pop-sm);text-decoration:none;cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s var(--spring)}.btn:hover:not(:disabled){transform:translateY(-4px) rotate(-1.5deg);box-shadow:var(--pop)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--blue{background-color:var(--blue);color:var(--white)}.btn--red{background-color:var(--red);color:var(--white)}.btn--yellow{background-color:var(--yellow)}.btn--ghost{background-color:var(--cream)}.btn--small{min-height:2.75rem;padding:.45rem 1rem;font-size:.95rem}.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}.empty{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:2.5rem 1.5rem;background-color:var(--white);border:var(--line-thick) solid var(--ink);border-radius:var(--radius);box-shadow:var(--pop-lg)}.empty__emoji{font-size:3.5rem;line-height:1;animation:wiggle 2.4s var(--spring) infinite}.empty__title{font-size:1.5rem}.pawprints{text-align:center;font-size:1.1rem;letter-spacing:.5rem;opacity:.85}@keyframes pop-in{0%{transform:scale(.6) rotate(-8deg)}to{transform:scale(1) rotate(0)}}@keyframes wiggle{0%,70%,to{transform:rotate(0)}80%{transform:rotate(12deg)}90%{transform:rotate(-12deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-color-scheme:dark){:root{--cream: #fdf1d6;background-color:#0f0e12}body{background-color:#0f0e12}.topbar__name,.section-title{text-shadow:3px 3px 0 var(--red)}.pawprints{color:var(--yellow)}}
