@font-face {
  font-family: system;
  src: local("Inter"), local("SF Pro Display"), local("Segoe UI");
}
* {
  box-sizing: border-box;
}
html {
  --bg: #f4f6f5;
  --surface: #fff;
  --ink: #1b2925;
  --muted: #6d7c71;
  --line: #e9eeeb;
  --accent: #d8ed9a;
  --soft: #edf3ed;
  --violet: #998ac4;
  font-family:
    system,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
svg:focus-visible {
  outline: 3px solid #91aa67;
  outline-offset: 3px;
}
svg {
  height: 20px;
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
p {
  line-height: 1.55;
}
h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 15px;
}
a {
  color: inherit;
  text-decoration: none;
}
.shell {
  display: flex;
  min-height: 100vh;
  max-width: 1480px;
  margin: auto;
}
aside {
  width: 224px;
  flex-shrink: 0;
  padding: 38px 24px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 750;
  font-size: 27px;
  letter-spacing: -1px;
}
.brand small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15px;
  margin-top: 3px;
  color: var(--muted);
}
.brand-mark {
  display: grid;
  place-items: center;
  background: var(--accent);
  width: 43px;
  height: 43px;
  border-radius: 14px;
  color: #20302a;
  font-size: 29px;
  font-weight: 750;
}
nav {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
nav button {
  text-align: left;
  padding: 14px 19px;
  border-radius: 13px;
  font-size: 14px;
  color: #7c8b83;
  font-weight: 550;
}
nav button.active {
  background: #e3ecdc;
  color: #284132;
}
.aside-note {
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}
main {
  width: 100%;
  min-width: 0;
  padding: 36px 40px 24px;
  max-width: 1200px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.4px;
  color: var(--muted);
  line-height: 1.5;
}
h1 {
  font-size: 31px;
  letter-spacing: -1.2px;
  margin-top: 7px;
  font-weight: 650;
}
.icon-button {
  border: 1px solid var(--line);
  background: var(--surface);
  height: 42px;
  width: 42px;
  border-radius: 50%;
  font-size: 23px;
  flex-shrink: 0;
}
#content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero {
  background: #223a30;
  border-radius: 24px;
  min-height: 220px;
  color: #f8fbf5;
  display: flex;
  overflow: hidden;
  position: relative;
  padding: 30px 34px;
  isolation: isolate;
}
.hero-copy {
  max-width: 75%;
  z-index: 2;
}
.overline {
  font-size: 10px;
  letter-spacing: 2px;
  color: #c1d79c;
}
.hero h2 {
  font-size: 29px;
  font-weight: 530;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 12px 0;
}
.hero p {
  max-width: 520px;
  color: #c2cfc5;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 23px;
  background: #d8ed9a;
  padding: 10px 14px;
  border-radius: 10px;
  color: #233c2d;
  font-size: 12px;
  font-weight: 650;
}
.hero-link svg {
  width: 15px;
  height: 15px;
}
.orbit {
  position: absolute;
  right: 8px;
  top: 9px;
  width: 240px;
  height: 240px;
  opacity: 0.8;
  z-index: 0;
  display: grid;
  place-items: center;
}
.orbit i {
  position: absolute;
  border: 1px solid #b6d09055;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: rotate(-20deg) scaleX(0.75);
}
.orbit i:nth-child(2) {
  transform: rotate(45deg) scaleX(0.75);
}
.orbit i:nth-child(3) {
  transform: rotate(105deg) scaleX(0.75);
}
.orbit span {
  font-size: 80px;
  font-weight: 500;
  letter-spacing: -9px;
  color: #d5e9ab;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.section-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-head h2 svg {
  color: #8a9b8c;
}
.text-button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #728d66;
  font-weight: 550;
  padding: 0;
  white-space: nowrap;
}
.text-button svg {
  height: 13px;
  width: 13px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid #e9eeebaa;
  border-radius: 18px;
  text-align: left;
  overflow: hidden;
  padding: 17px 17px 0;
  transition: transform 0.15s;
}
.metric-card:hover {
  transform: translateY(-2px);
}
.metric-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #78867e;
  font-size: 12px;
}
.metric-heading > svg {
  margin-left: auto;
  height: 12px;
  width: 12px;
  color: #a4afa8;
}
.metric-icon {
  height: 28px;
  width: 28px;
  border-radius: 9px;
  background: #f0ecf8;
  color: #9483bb;
  display: grid;
  place-items: center;
}
.metric-icon svg {
  width: 16px;
  height: 16px;
}
.tone-1 .metric-icon {
  background: #ebf3e3;
  color: #84a45d;
}
.tone-2 .metric-icon {
  background: #eef0f6;
  color: #8a98ba;
}
.tone-3 .metric-icon {
  background: #eaf3f5;
  color: #82aebc;
}
.metric-value {
  font-size: 29px;
  letter-spacing: -1px;
  margin: 16px 0 5px;
  white-space: nowrap;
}
.metric-value small {
  font-size: 12px;
  letter-spacing: 0;
  color: #939f96;
  font-weight: 400;
}
.metric-foot {
  font-size: 10px;
  color: #8f9c94;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.mini-chart {
  height: 44px;
  overflow: hidden;
  margin: 10px -6px -1px;
  color: #aa99d0;
}
.tone-1 .mini-chart {
  color: #9fbc78;
}
.tone-2 .mini-chart {
  color: #9fa9c8;
}
.tone-3 .mini-chart {
  color: #86b5c1;
}
.spark {
  display: block;
  width: 100%;
  height: 44px;
}
.chart-line {
  stroke: currentColor;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.chart-point,
.chart-bar {
  fill: currentColor;
}
.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.panel {
  padding: 24px;
  background: var(--surface);
  border: 1px solid #e8ede9a0;
  border-radius: 20px;
  text-align: left;
  min-width: 0;
}
.muted,
.subtle {
  font-size: 11px;
  color: var(--muted);
}
.subtle {
  line-height: 1.65;
}
.nutrition-main {
  font-size: 34px;
  letter-spacing: -1.3px;
  margin-top: 2px;
}
.nutrition-main small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.macros > div {
  border-right: 1px solid var(--line);
}
.macros > div:last-child {
  border: 0;
}
.macros span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
}
.macros strong {
  font-size: 17px;
  font-weight: 550;
}
.macros small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.meal-list {
  margin: 17px 0;
}
.meal-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0;
}
.meal-list > div > div {
  min-width: 0;
}
.meal-list strong {
  font-size: 12px;
  font-weight: 600;
}
.meal-list p {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}
.meal-list time {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #b8cba4;
}
.dot.green {
  background: #adc88c;
}
.dot.violet {
  background: #b5a5cc;
}
.task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.task:last-child {
  border: 0;
}
.task-circle {
  height: 16px;
  width: 16px;
  border: 1.5px solid #d4ded6;
  border-radius: 5px;
  flex-shrink: 0;
}
.task strong {
  font-size: 12px;
  font-weight: 550;
}
.event-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}
.task p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.task .tag {
  margin-left: auto;
}
.tag {
  display: inline-block;
  background: #f1f2ef;
  color: #8a9288;
  padding: 5px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 550;
  white-space: nowrap;
}
.tag.green {
  background: #edf3e6;
  color: #7a965e;
}
.count {
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
}
.task-list {
  margin-bottom: 15px;
}
.goal-preview {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  gap: 15px;
}
.goal-preview:last-child {
  border: 0;
}
.goal-preview h3 {
  font-size: 13px;
  margin: 9px 0 4px;
  font-weight: 550;
}
.goal-preview p {
  font-size: 10px;
  color: var(--muted);
}
.goal-preview > svg {
  width: 15px;
  height: 15px;
  color: #a6b09f;
}
.reflection-part {
  display: flex;
  gap: 12px;
  margin: 22px 0;
}
.reflection-part .dot {
  margin-top: 6px;
}
.reflection-part small {
  font-size: 9px;
  letter-spacing: 1px;
  color: #92a08e;
}
.reflection-part p {
  font-size: 12px;
  white-space: pre-wrap;
  margin-top: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reflection .text-button {
  margin-top: 20px;
}
.update-note {
  font-size: 10px;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
}
.update-note svg {
  height: 12px;
  width: 12px;
}
footer {
  font-size: 10px;
  color: #9aa69e;
  padding: 25px 0 4px;
  text-align: center;
}
.notice {
  padding: 13px 17px;
  background: #edf2e5;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 18px;
  line-height: 1.6;
}
.notice.error {
  background: #faeee8;
  color: #955e4e;
}
.notice button {
  font-size: 12px;
  text-decoration: underline;
}
.welcome {
  text-align: center;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.welcome h2 {
  font-size: 29px;
}
.welcome p {
  font-size: 14px;
  color: var(--muted);
}
.primary {
  background: var(--accent);
  padding: 13px 23px;
  border-radius: 12px;
  font-size: 13px;
}
.secondary {
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  margin-top: 15px;
}
.empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}
.empty .subtle {
  display: block;
  margin-top: 15px;
}
.journal-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.journal-tabs button,
.range-buttons button {
  padding: 10px 15px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--muted);
}
.journal-tabs button.selected {
  background: var(--ink);
  color: var(--bg);
}
.journal-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 24px;
}
.journal-heading h2 {
  font-size: 24px;
  margin-top: 7px;
}
.journal-heading select {
  max-width: 280px;
}
.range-buttons {
  display: flex;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
  margin-bottom: 18px;
}
.range-buttons button.selected {
  background: var(--soft);
  color: var(--ink);
}
.date-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}
.date-controls label {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: var(--muted);
  min-width: 0;
  flex: 1;
}
.date-controls input,
.date-controls select {
  display: block;
  width: 100%;
  margin-top: 7px;
}
input,
select {
  min-width: 0;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  font-size: 12px;
  min-height: 40px;
}
.chart-stat {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
}
.chart-stat > strong {
  font-size: 34px;
  font-weight: 550;
  letter-spacing: -1px;
}
.chart-stat small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
.chart-stat > span {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.plot {
  min-height: 210px;
  color: #99b675;
}
.history-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 150px;
  touch-action: pan-y;
}
.grid-line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.axis-label {
  fill: var(--muted);
  stroke: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
}
.chart-caption {
  font-size: 11px;
  text-align: center;
  color: var(--muted);
  min-height: 32px;
  margin-top: 3px;
}
.chart-cursor {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.4;
}
.record {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.record p {
  font-size: 12px;
  white-space: pre-wrap;
  margin-top: 4px;
}
.record p:first-of-type {
  color: var(--muted);
}
.diary-entry {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.diary-entry h3 {
  font-size: 13px;
  margin: 17px 0 6px;
}
.diary-entry p {
  font-size: 13px;
  white-space: pre-wrap;
}
.goals-intro {
  padding: 6px 2px 14px;
}
.goals-intro h2 {
  font-size: 33px;
  line-height: 1.17;
  letter-spacing: -1px;
  margin: 14px 0;
}
.goals-intro p {
  font-size: 13px;
  color: var(--muted);
}
.goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.goal-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  align-items: flex-start;
}
.goal-card h2 {
  margin: 20px 0 10px;
  font-size: 20px;
}
.goal-card p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
}
.goal-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  color: var(--muted);
  font-size: 10px;
}
.goal-detail {
  scroll-margin-top: 20px;
}
.goal-detail > .section-head h2 {
  margin-top: 10px;
}
.goal-detail > p {
  font-size: 13px;
  white-space: pre-wrap;
}
.goal-detail h3 {
  margin: 22px 0 12px;
}
.goal-detail .history-chart {
  color: #96ae75;
}
.criteria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0;
}
.criteria > div {
  padding: 15px;
  background: var(--soft);
  border-radius: 12px;
}
.criteria strong {
  font-size: 13px;
}
.criteria p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.skeleton {
  height: 170px;
  background: linear-gradient(110deg, #e9eeeb 10%, #f8faf8 45%, #e9eeeb 80%);
  background-size: 200% 100%;
  border-radius: 20px;
  animation: pulse 1.5s linear infinite;
}
.hero-skeleton {
  height: 220px;
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
@keyframes pulse {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
html[data-theme="dark"] {
  --bg: #14201b;
  --surface: #1b2a23;
  --ink: #edf4e9;
  --muted: #9aa99c;
  --line: #2b3c30;
  --soft: #283a2c;
}
.dark {
}
html[data-theme="dark"] .hero {
  background: #2a4435;
}
html[data-theme="dark"] nav button.active {
  background: #2d422f;
  color: #d1e5bc;
}
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel {
  border-color: #2a3c31;
}
html[data-theme="dark"] .tag.green {
  background: #30472b;
  color: #b4ce96;
}
html[data-theme="dark"] .tag {
  background: #2a392d;
  color: #a2b49f;
}
html[data-theme="dark"] .notice {
  background: #293d2e;
}
html[data-theme="dark"] .notice.error {
  background: #462e28;
  color: #e8bfae;
}
html[data-theme="dark"] .skeleton {
  background: linear-gradient(110deg, #26392c, #314637, #26392c);
  background-size: 200% 100%;
}
@media (max-width: 1050px) {
  aside {
    width: 180px;
    padding: 30px 18px;
  }
  main {
    padding: 30px 24px;
  }
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .two-columns {
    gap: 16px;
  }
  .panel {
    padding: 20px;
  }
  .orbit {
    right: -45px;
  }
  .hero-copy {
    max-width: 82%;
  }
}
@media (max-width: 680px) {
  html {
    font-size: 14px;
  }
  .shell {
    display: block;
  }
  aside {
    position: fixed;
    top: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    z-index: 10;
    background: var(--surface);
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 7px 16px
      calc(
        7px +
          max(
            env(safe-area-inset-bottom),
            var(--tg-content-safe-area-inset-bottom, 0px)
          )
      );
  }
  .brand,
  .aside-note {
    display: none;
  }
  nav {
    margin: 0;
    flex-direction: row;
    justify-content: space-around;
    gap: 8px;
  }
  nav button {
    flex: 1;
    text-align: center;
    border-radius: 10px;
    padding: 13px 4px;
    font-size: 12px;
  }
  main {
    padding: calc(23px + var(--tg-content-safe-area-inset-top, 0px)) 18px
      calc(
        90px +
          max(
            env(safe-area-inset-bottom),
            var(--tg-content-safe-area-inset-bottom, 0px)
          )
      );
    max-width: 100%;
  }
  header {
    margin-bottom: 22px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  h1 {
    font-size: 29px;
  }
  #content {
    gap: 22px;
  }
  .hero {
    border-radius: 20px;
    min-height: 216px;
    padding: 25px 23px;
  }
  .hero h2 {
    font-size: 25px;
    line-height: 1.2;
  }
  .hero-copy {
    max-width: 86%;
  }
  .hero p {
    font-size: 12px;
    max-width: 245px;
  }
  .hero-link {
    font-size: 11px;
    padding: 10px 12px;
    margin-top: 20px;
  }
  .orbit {
    right: -79px;
    top: 30px;
    width: 220px;
    height: 220px;
    opacity: 0.28;
  }
  .orbit span {
    font-size: 72px;
  }
  .metric-grid {
    gap: 12px;
  }
  .metric-card {
    padding: 14px 14px 0;
    border-radius: 16px;
  }
  .metric-heading {
    font-size: 11px;
    gap: 7px;
  }
  .metric-heading > svg {
    width: 10px;
  }
  .metric-value {
    font-size: 28px;
    margin-top: 13px;
  }
  .metric-value small {
    font-size: 11px;
  }
  .metric-foot {
    font-size: 9px;
  }
  .two-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .panel {
    padding: 21px;
    border-radius: 18px;
  }
  .section-head h2 {
    font-size: 16px;
  }
  .text-button {
    font-size: 11px;
  }
  .nutrition-main {
    font-size: 36px;
  }
  .meal-list p {
    max-width: 220px;
  }
  .skeleton-grid {
    grid-template-columns: 1fr 1fr;
  }
  .update-note {
    align-items: flex-start;
    line-height: 1.8;
  }
  .update-note svg {
    margin-top: 3px;
  }
  .date-controls {
    gap: 7px;
  }
  .date-controls input,
  .date-controls select {
    padding: 9px 5px;
    font-size: 10px;
  }
  .journal-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .journal-heading select {
    max-width: 100%;
    width: 100%;
  }
  .metric-select-label {
    width: 100%;
  }
  .journal-tabs {
    gap: 0;
  }
  .journal-tabs button {
    font-size: 10px;
    padding: 10px 9px;
  }
  .range-buttons {
    gap: 0;
    justify-content: space-between;
  }
  .range-buttons button {
    padding: 9px 10px;
    font-size: 11px;
  }
  .chart-stat > strong {
    font-size: 30px;
  }
  .chart-stat {
    gap: 13px;
  }
  .history-chart {
    min-height: 135px;
  }
  .plot {
    min-height: 185px;
  }
  .goal-grid {
    grid-template-columns: 1fr;
  }
  .goal-card {
    min-height: 190px;
  }
  .goals-intro h2 {
    font-size: 29px;
  }
  .criteria {
    grid-template-columns: 1fr;
  }
  footer {
    line-height: 1.8;
    font-size: 9px;
  }
  .icon-button {
    height: 38px;
    width: 38px;
  }
  .chart-caption {
    font-size: 10px;
  }
  .record {
    font-size: 12px;
  }
  .goal-detail {
    scroll-margin-top: 15px;
  }
}