:root {
  font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  color:#273f33;
  background:#eef3e8;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,input:focus-visible {
  outline:3px solid #e9a95b;
  outline-offset:3px
}
.page-wrap {
  min-height:100vh;
  padding:24px 16px 64px;
  background:radial-gradient(circle at 12% 3%,#fff6db 0,transparent 32%),radial-gradient(circle at 95% 30%,#dcebd5 0,transparent 35%),#eef3e8
}
.app-shell {
  max-width:580px;
  margin:auto;
  background:#fbfcf5;
  border:1px solid #e5eadb;
  border-radius:32px;
  box-shadow:0 24px 80px #53715324;
  overflow:hidden
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 28px 0
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  font-size:20px;
  letter-spacing:.03em
}
.brand-icon {
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  background:#d8ecce;
  border-radius:12px;
  color:#4f8a61;
  font-size:23px
}
.icon-button {
  border:0;
  background:#eff4e9;
  color:#536e5b;
  width:37px;
  height:37px;
  border-radius:13px;
  font-size:22px
}
.intro {
  padding:30px 28px 24px
}
.eyebrow,.mini-label {
  font-size:11px;
  line-height:1.4;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;
  color:#739278;
  margin:0 0 9px
}
.intro h1 {
  font-size:36px;
  line-height:1.26;
  letter-spacing:-.03em;
  margin:0;
  color:#234d38
}
.intro h1 em {
  font-style:normal;
  color:#74aa71
}
.intro-copy {
  font-size:13px;
  color:#728075;
  line-height:1.8;
  max-width:320px;
  margin:14px 0 0
}
.progress-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 22px 20px;
  padding:24px;
  border-radius:25px;
  background:linear-gradient(130deg,#dcefd4,#eef7dd 55%,#f8f1d3);
  min-height:190px;
  position:relative;
  overflow:hidden
}
.progress-card:after {
  content:"✦";
  position:absolute;
  font-size:96px;
  color:#ffffff5c;
  top:-43px;
  left:57%;
  pointer-events:none
}
.progress-copy {
  z-index:1;
  min-width:0
}
.progress-copy h2 {
  font-size:21px;
  line-height:1.4;
  margin:0 0 6px;
  color:#2e6348
}
.progress-description {
  font-size:12px;
  line-height:1.65;
  color:#68826f;
  margin:0 0 14px;
  max-width:235px
}
.progress-pill {
  display:inline-block;
  font-size:11px;
  font-weight:800;
  background:#ffffffad;
  color:#3f7b54;
  border-radius:999px;
  padding:7px 10px
}
.progress-ring {
  --progress:0%;
  flex:0 0 118px;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#72ad77 var(--progress),#ffffffbf 0);
  box-shadow:0 9px 22px #5d946647;
  z-index:1
}
.ring-inner {
  width:94px;
  height:94px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#fbfdf4;
  box-shadow:inset 0 0 0 1px #e7f0e1
}
.ring-inner strong {
  font-size:37px;
  line-height:1;
  color:#366d4d
}
.ring-inner span {
  font-size:11px;
  color:#8ba18b;
  margin-top:5px
}
.today-card,.calendar-card {
  margin:0 22px 18px;
  padding:24px;
  background:#fff;
  border:1px solid #edf0e7;
  border-radius:24px;
  box-shadow:0 9px 30px #456b4b0c
}
.section-heading,.meadow-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.section-heading h2,.meadow-heading h2 {
  font-size:20px;
  line-height:1.25;
  margin:0;
  color:#2e513b
}
.status-tag {
  font-size:11px;
  font-weight:800;
  color:#9a9566;
  background:#f7f3df;
  border-radius:999px;
  padding:7px 10px;
  white-space:nowrap
}
.status-tag.success {
  color:#407b51;
  background:#e5f3df
}
.status-tag.event {
  color:#a66f5c;
  background:#f8e8df
}
.status-tag.sex {
  color:#6c8393;
  background:#eaf1f4
}
.today-date {
  color:#89968b;
  font-size:12px;
  margin:9px 0 20px
}
.today-actions {
  display:grid;
  grid-template-columns:1fr 120px;
  gap:9px
}
.primary-button,.outline-button {
  border:0;
  border-radius:14px;
  padding:13px 10px;
  font-size:13px;
  font-weight:800;
  min-height:46px
}
.primary-button {
  color:#fff;
  background:#3f8257;
  box-shadow:0 6px 12px #3f82572b
}
.primary-button:hover {
  background:#327048
}
.outline-button {
  background:#f4f8ef;
  color:#508161;
  border:1px solid #dceadd
}
.primary-button span {
  font-size:16px;
  margin-right:5px
}
.quiet-note {
  font-size:11px;
  color:#97a398;
  line-height:1.6;
  margin:13px 0 0
}
.calendar-top {
  align-items:center;
  margin-bottom:22px
}
.month-controls {
  display:flex;
  align-items:center;
  gap:8px;
  color:#728675;
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}
.month-controls button {
  border:0;
  border-radius:50%;
  height:25px;
  width:25px;
  background:#f0f5ed;
  color:#658269;
  font-size:22px;
  line-height:14px
}
.month-controls button:disabled {
  opacity:.3;
  cursor:default
}
.weekday-row,.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  text-align:center
}
.weekday-row {
  font-size:11px;
  color:#a1ada1;
  margin-bottom:8px
}
.calendar-day {
  aspect-ratio:1;
  max-height:49px;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#69766b;
  font-size:12px;
  display:grid;
  place-items:center;
  position:relative
}
.calendar-day:not(:disabled):hover {
  background:#eef5e9
}
.calendar-day:disabled {
  cursor:default;
  color:#cbd3c8
}
.calendar-day.success {
  background:#e1f0d8;
  color:#3d7b4f;
  font-weight:800
}
.calendar-day.event {
  background:#f9e6df;
  color:#ab6955;
  font-weight:800
}
.calendar-day.sex {
  background:#eaf1f4;
  color:#6c8393;
  font-weight:800
}
.calendar-day.has-sex-note:after {
  box-shadow:0 0 0 2px #f6f8ee
}
.calendar-day.today {
  border:2px solid #8bb98b
}
.calendar-day.has-note:after {
  content:"";
  position:absolute;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}
.calendar-legend {
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  font-size:10px;
  color:#98a59a;
  margin-top:20px
}
.calendar-legend span {
  display:flex;
  align-items:center;
  gap:5px
}
.legend-dot {
  height:8px;
  width:8px;
  border-radius:50%;
  display:inline-block
}
.legend-dot.done {
  background:#86bd83
}
.legend-dot.event {
  background:#e6aa96
}
.legend-dot.empty {
  background:#dfe7d9
}
.urge-button {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  width:calc(100% - 44px);
  margin:0 22px 18px;
  border:1px solid #f1dfcc;
  background:#fff7ec;
  border-radius:20px;
  padding:15px 18px;
  color:#936b51
}
.urge-emoji {
  font-size:30px;
  line-height:1
}
.urge-button strong,.urge-button small {
  display:block
}
.urge-button strong {
  font-size:14px
}
.urge-button small {
  font-size:11px;
  margin-top:3px;
  color:#ae927e
}
.urge-button .arrow {
  margin-left:auto;
  font-size:23px;
  color:#bd9278
}
.meadow-card {
  margin:0 22px 24px;
  border-radius:24px;
  background:#f5f9ed;
  border:1px solid #e7f0df;
  padding:23px 22px 16px;
  overflow:hidden
}
.meadow-copy {
  color:#849486;
  font-size:11px;
  line-height:1.6;
  margin:10px 0 0
}
.pet-count {
  font-size:11px;
  font-weight:800;
  background:#e6f1dc;
  color:#668b63;
  padding:7px 11px;
  border-radius:999px;
  white-space:nowrap
}
.meadow-counts {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px
}
.poop-count {
  font-size:10px;
  font-weight:800;
  background:#f2e6d8;
  color:#805c3e;
  padding:7px 9px;
  border-radius:999px;
  white-space:nowrap
}
.meadow-sky {
  height:236px;
  position:relative;
  overflow:hidden;
  margin:10px -22px 0;
  background:linear-gradient(#f5f9ed 0%,#e5f1e1 68%,#c5e5b0 69%,#a8d58e 100%)
}
.sun {
  position:absolute;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fae3a2;
  top:30px;
  right:35px;
  box-shadow:0 0 0 11px #fae3a24d
}
.cloud {
  position:absolute;
  height:16px;
  width:55px;
  background:#fff9;
  border-radius:20px;
  top:45px;
  left:34px
}
.cloud:before,.cloud:after {
  content:"";
  position:absolute;
  background:#fff9;
  border-radius:50%;
  width:24px;
  height:24px;
  top:-10px;
  left:9px
}
.cloud:after {
  width:20px;
  height:20px;
  top:-5px;
  left:27px
}
.cloud-two {
  left:auto;
  right:100px;
  top:19px;
  transform:scale(.6)
}
.meadow-ground {
  position:absolute;
  inset:auto 0 0;
  height:96px;
  background:#a9d48e;
  border-radius:48% 48% 0 0 / 30% 30% 0 0;
  z-index:0
}
.meadow-ground:before {
  content:"";
  position:absolute;
  inset:24px -12px -20px;
  background:#97c980;
  border-radius:40% 40% 0 0
}
.meadow-ground i {
  position:absolute;
  display:block;
  width:5px;
  height:13px;
  border-radius:50%;
  background:#6cab70;
  top:13px;
  left:12%;
  transform:rotate(24deg)
}
.meadow-ground i:nth-child(2) {
  left:31%;
  top:27px
}
.meadow-ground i:nth-child(3) {
  left:55%;
  top:17px
}
.meadow-ground i:nth-child(4) {
  left:73%;
  top:30px
}
.meadow-ground i:nth-child(5) {
  left:91%;
  top:14px
}
.pets {
  position:absolute;
  bottom:13px;
  left:15px;
  right:15px;
  display:flex;
  align-items:flex-end;
  gap:1px;
  z-index:2;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:18px 4px 0
}
.pets::-webkit-scrollbar {
  display:none
}
.poops {
  position:absolute;
  left:7px;
  right:7px;
  bottom:3px;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-auto-rows:24px;
  align-items:center;
  justify-items:center;
  padding:0 2px;
  pointer-events:none;
  z-index:1
}
.poop {
  display:grid;
  place-items:center;
  width:100%;
  height:24px
}
.poop svg {
  width:30px;
  height:28px;
  display:block;
  filter:drop-shadow(0 2px 1px #6b49302b)
}
.poop:nth-child(3n+2) svg {
  transform:scale(.84) rotate(-8deg)
}
.poop:nth-child(3n) svg {
  transform:scale(1.04) rotate(7deg)
}
.pet-button {
  --fur:#d8a871;
  --ear:#a97654;
  --blush:#ebaa8f;
  border:0;
  background:transparent;
  padding:0 0 3px;
  min-width:91px;
  position:relative;
  transition:transform .2s
}
.pet-button:hover {
  transform:translateY(-4px)
}
.pet-button svg {
  width:90px;
  height:100px;
  display:block;
  filter:drop-shadow(0 5px 4px #62935c4a)
}
.pet-button.pet-bounce svg {
  animation:petbounce .5s ease
}
.pet-button.pet-bounce:after {
  content:"♥";
  position:absolute;
  color:#e9928b;
  font-size:23px;
  top:-4px;
  left:38px;
  animation:heartfloat .7s ease forwards
}
.pet-button:nth-child(3n+2) {
  --fur:#e6d7bd;
  --ear:#a47d69;
  --blush:#e7ae9c
}
.pet-button:nth-child(3n) {
  --fur:#bc9b85;
  --ear:#795b57;
  --blush:#db9a8b
}
.empty-meadow {
  position:absolute;
  bottom:74px;
  left:0;
  right:0;
  text-align:center;
  color:#91ae85;
  font-size:13px;
  font-weight:800;
  z-index:1
}
.pet-speech {
  font-size:11px;
  color:#5b8c5e;
  text-align:center;
  line-height:1.5;
  margin:10px 0 0;
  min-height:34px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f9fbf3;
  border:1px solid #edf2e6;
  border-radius:12px;
  position:relative;
  z-index:3
}
.pets[data-mood="uncomfortable"] .pet-button svg {
  filter:drop-shadow(0 5px 4px #95775a4a) saturate(.9)
}
.pets[data-mood="smelly"] .pet-button svg,
.pets[data-mood="weak"] .pet-button svg {
  filter:drop-shadow(0 5px 4px #8793794a) saturate(.72)
}
.pets[data-mood="weak"] .pet-button {
  transform:rotate(-3deg)
}
.pets[data-mood="weak"] .pet-button:nth-child(even) {
  transform:rotate(3deg)
}
.site-footer {
  text-align:center;
  padding:0 25px 29px;
  color:#a4afa3;
  font-size:10px
}
.site-footer button {
  background:none;
  border:none;
  color:#709a72;
  text-decoration:underline;
  padding:0;
  font-size:10px
}
.modal {
  border:0;
  border-radius:24px;
  width:min(430px,calc(100% - 24px));
  max-height:calc(100vh - 30px);
  overflow:auto;
  padding:24px;
  background:#fffdf8;
  color:#294c38;
  box-shadow:0 25px 90px #1b402c55
}
.modal::backdrop {
  background:#1d3f3288;
  backdrop-filter:blur(3px)
}
.modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between
}
.modal-head h2 {
  margin:0;
  font-size:21px
}
.modal-close {
  border:0;
  background:#eff4e9;
  color:#66806b;
  border-radius:50%;
  font-size:22px;
  width:30px;
  height:30px;
  line-height:26px
}
.modal-subtitle {
  font-size:12px;
  color:#95a095;
  margin:8px 0 20px
}
.success-choice {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid #dcebd6;
  border-radius:16px;
  background:#f6faf1;
  padding:13px;
  color:#456f50
}
.success-choice.active {
  border:2px solid #68aa72;
  background:#eaf6e4
}
.success-choice strong,.success-choice small,.event-field strong,.event-field small,.settings-action strong,.settings-action small {
  display:block
}
.success-choice strong,.event-field strong,.settings-action strong {
  font-size:13px
}
.success-choice small,.event-field small,.settings-action small {
  font-size:10px;
  color:#91a092;
  margin-top:3px
}
.choice-check {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#dcefd8;
  color:#5ca765;
  font-weight:900
}
.success-choice.active .choice-check {
  background:#5ca765;
  color:#fff
}
.editor-divider {
  text-align:center;
  color:#a3ada2;
  font-size:10px;
  margin:17px 0;
  position:relative
}
.editor-divider:before {
  content:"";
  height:1px;
  background:#e7eee4;
  position:absolute;
  left:0;
  right:0;
  top:50%
}
.editor-divider span {
  background:#fffdf8;
  position:relative;
  padding:0 10px
}
.event-field {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eef1e9;
  gap:12px
}
.stepper {
  display:flex;
  align-items:center;
  gap:4px
}
.stepper button {
  border:0;
  background:#ebf3e8;
  color:#4c8657;
  width:29px;
  height:29px;
  border-radius:9px;
  font-size:18px
}
.stepper input {
  width:48px;
  text-align:center;
  border:1px solid #dce9da;
  border-radius:9px;
  padding:5px 2px;
  appearance:textfield
}
.stepper input::-webkit-inner-spin-button {
  appearance:none
}
.sex-field {
  cursor:pointer
}
.sex-field input {
  width:19px;
  height:19px;
  accent-color:#61a56b
}
.editor-hint {
  font-size:11px;
  color:#7d9480;
  min-height:19px;
  margin:13px 0
}
.modal-actions {
  display:grid;
  gap:8px
}
.text-button {
  border:0;
  background:transparent;
  color:#9ca79b;
  padding:9px
}
.urge-illustration {
  text-align:center;
  font-size:64px;
  color:#c1dbcd;
  margin:8px 0
}
.urge-illustration span {
  font-size:27px;
  color:#e8c978;
  position:relative;
  top:-35px
}
.urge-main {
  font-size:14px;
  line-height:1.9;
  color:#617767
}
.urge-progress {
  font-size:12px;
  line-height:1.7;
  color:#4d8057;
  background:#edf7e8;
  border-radius:13px;
  padding:12px
}
.urge-modal .primary-button {
  width:100%;
  margin-top:9px
}
.settings-copy {
  font-size:12px;
  line-height:1.8;
  color:#758a79;
  margin:18px 0
}
.settings-action {
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  width:100%;
  border:1px solid #e4ecdf;
  background:#f7faf4;
  border-radius:14px;
  padding:12px;
  margin-bottom:8px;
  color:#4c7656
}
.settings-action>span:first-child {
  font-size:20px;
  background:#e5f1e0;
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:10px
}
.danger-action {
  background:#fff8f4;
  border-color:#f3e5df;
  color:#a86d60
}
.danger-action>span:first-child {
  background:#f8e8e1
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  background:#294c38;
  color:#fff;
  border-radius:999px;
  padding:10px 17px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  max-width:calc(100% - 30px);
  text-align:center;
  z-index:10
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
@keyframes petbounce {
  0%,100% {
  transform:translateY(0)
}
50% {
  transform:translateY(-9px) rotate(3deg)
}

}
@keyframes heartfloat {
  0% {
  opacity:0;
  transform:translateY(8px)
}
50% {
  opacity:1
}
100% {
  opacity:0;
  transform:translateY(-23px)
}

}
@media(max-width:480px) {
  .page-wrap {
  padding:0;
  background:#fbfcf5
}
.app-shell {
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:100vh
}
.intro h1 {
  font-size:33px
}
.progress-card {
  padding:21px;
  min-height:176px
}
.progress-ring {
  flex-basis:104px;
  width:104px;
  height:104px
}
.ring-inner {
  width:82px;
  height:82px
}
.ring-inner strong {
  font-size:32px
}
.progress-copy h2 {
  font-size:19px
}

}
@media(max-width:350px) {
  .topbar {
  padding-left:20px;
  padding-right:20px
}
.intro {
  padding-left:20px;
  padding-right:20px
}
.progress-card,.today-card,.calendar-card,.meadow-card {
  margin-left:15px;
  margin-right:15px
}
.urge-button {
  width:calc(100% - 30px);
  margin-left:15px;
  margin-right:15px
}
.progress-card {
  gap:10px;
  padding:17px
}
.progress-ring {
  flex-basis:86px;
  width:86px;
  height:86px
}
.ring-inner {
  width:68px;
  height:68px
}
.ring-inner strong {
  font-size:26px
}
.progress-description {
  font-size:11px
}
.today-actions {
  grid-template-columns:1fr 103px
}
.today-card,.calendar-card {
  padding:19px
}
.meadow-counts {
  gap:4px
}
.meadow-heading {
  flex-wrap:wrap
}
.meadow-heading>div:first-child {
  width:100%
}
.meadow-counts {
  width:100%;
  justify-content:flex-start
}
.poop-count,.pet-count {
  padding:6px 7px;
  font-size:9px
}
.month-controls {
  gap:3px
}
.calendar-day {
  border-radius:9px
}

}