:root {
  color-scheme: light;
  --canvas: #f8f4ee;
  --paper: #fffdfa;
  --ink: #302725;
  --muted: #6f615a;
  --red: #782d3a;
  --deep-red: #5e1f2d;
  --line: #ece3d9;
  --sage: #315b49;
  --serif: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --lift: 0 8px 24px #42281809, 0 2px 5px #42281805;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #eee8df; }
body {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  box-shadow: 0 0 64px #3d251211;
}
h1, h2, h3, p, dl, dd { margin: 0; }
button, select { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 20px;
  background: var(--paper);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: .91rem; font-weight: 700; letter-spacing: .06em; }
.brand .icon { width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: var(--red); color: #ffead2; }
.masthead button {
  min-height: 44px;
  margin-right: -4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: .78rem;
  font-weight: 650;
}
.shell { padding: 0 16px 12px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: -16px;
  padding: 19px 24px 31px;
  background: radial-gradient(ellipse at 79% 11%, #9a4852, transparent 68%), linear-gradient(125deg, #692635, #7e3242);
  color: #ffeed7;
}
.hero-art { position: absolute; z-index: -1; inset: 0 2% 0 auto; width: min(46%, 205px); height: 100%; pointer-events: none; }
.hero-label { color: #efc9a6; font-size: .62rem; font-weight: 650; letter-spacing: .23em; }
.wordmark { margin-top: 4px; font: 800 clamp(2.3rem, 10vw, 3.05rem)/1.12 var(--serif); letter-spacing: .055em; }
.greeting { margin-top: 8px; color: #f7dfca; font-size: .8rem; line-height: 1.45; }

.calendar, .tips { border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: var(--lift); }
.calendar { position: relative; margin-top: -14px; }
.calendar-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 5px;
  align-items: center;
  padding: 16px 13px 13px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.day-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f7f1eb;
  color: var(--red);
}
.day-arrow:hover, .day-arrow:active { background: #f0e2da; }
.day-arrow .icon { width: 16px; height: 16px; }
#prev-day .icon { transform: rotate(180deg); }
.date-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 7px; color: var(--muted); font-size: .73rem; font-variant-numeric: tabular-nums; }
.day-info h1 { margin-top: 4px; color: var(--red); font: 800 clamp(1.85rem, 8vw, 2.4rem)/1.16 var(--serif); letter-spacing: .04em; }
.paper { padding: 13px 15px 15px; }
.do-dont { display: grid; gap: 6px; margin-bottom: 11px; }
.do-dont > div { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 8px; }
.do-dont dt { display: grid; height: 24px; place-items: center; border-radius: 7px; font: 700 .82rem/1 var(--serif); }
.do dt { background: #e9f1e9; color: #365842; }
.dont dt { background: #f6e9e5; color: #8c3d42; }
.do-dont dd { align-self: center; font-size: .83rem; line-height: 1.5; }
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.daily-grid > section { padding: 8px 10px; border-radius: 10px; background: #f8f3ed; }
.daily-grid h2 { color: var(--muted); font-size: .69rem; font-weight: 630; letter-spacing: .06em; }
.daily-value { display: grid; gap: 3px; margin-top: 4px; font-size: .78rem; line-height: 1.34; }
.daily-value > span { color: var(--muted); }
.daily-value strong { color: var(--ink); }
.swatch { display: inline-block; width: .72em; height: .72em; border: 1px solid #5e402c40; border-radius: 50%; }

.entry { max-width: 410px; margin-inline: auto; }
.entry .paper { padding: 20px 19px 18px; }
.entry-mark { display: grid; width: 36px; height: 36px; place-items: center; margin: 0 auto 7px; border-radius: 50%; background: #f5e9e5; color: var(--red); }
.entry h1 { color: var(--red); text-align: center; font: 800 1.8rem/1.22 var(--serif); }
fieldset { min-width: 0; margin: 17px 0 12px; padding: 0; border: 0; }
legend { margin-bottom: 7px; padding: 0; font-size: .84rem; font-weight: 650; }
.date-fields { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 7px; }
select { width: 100%; min-width: 0; min-height: 46px; padding-inline: 8px; border: 1px solid #e5d9cf; border-radius: 8px; background: #faf6f0; font-size: 16px; }
.primary { position: relative; width: 100%; min-height: 47px; padding: 8px 28px; border: 0; border-radius: 9px; background: var(--red); color: #fff; font-weight: 700; }
.primary span { position: absolute; right: 13px; }
.primary:hover, .primary:active { background: var(--deep-red); }
.form-note { margin-top: 10px; text-align: center; color: var(--muted); font-size: .74rem; }

.tips { margin-top: 12px; padding: 13px 15px 0; }
.tips h2 { display: flex; align-items: center; gap: 7px; color: var(--red); font-size: .79rem; font-weight: 700; letter-spacing: .035em; }
.tips h2 .icon { width: 16px; height: 16px; }
.tips-body { font-size: .83rem; line-height: 1.58; }
.tip-intro { margin: 7px 0 1px; }
.tip-title { margin-bottom: 3px; font: 800 1.2rem/1.37 var(--serif); }
#tip-action, .tip-list dd { color: #5d514b; }
.tip-list > div { padding-block: 8px; border-top: 1px solid var(--line); }
.tip-list { margin-top: 8px; }
.tip-list dl { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 7px; }
.tip-list dt { display: flex; align-items: center; align-self: start; gap: 4px; color: var(--red); font-size: .76rem; font-weight: 700; }
.tip-list dt .icon { width: 15px; height: 15px; flex: none; }
#health-row dt { color: var(--sage); }
#wealth-row dt { color: #785528; }
.reading-basis { border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.reading-basis summary { min-height: 44px; padding-block: 11px; cursor: pointer; }
.reading-basis p { padding-bottom: 12px; }

.insurance {
  margin: 8px 0 1px;
  padding: 12px 12px 0;
  border: 1px solid #dce6db;
  border-radius: 12px;
  background: #f0f5ee;
}
.insurance-label { display: flex; align-items: center; gap: 5px; color: var(--sage); font-size: .71rem; font-weight: 700; letter-spacing: .05em; }
.insurance-label .icon { width: 17px; height: 17px; }
.insurance h3 { margin: 4px 0 3px; color: #254333; font-size: 1rem; font-weight: 740; line-height: 1.4; }
.insurance-answer { color: #43554a; font-size: .82rem; line-height: 1.6; }
.insurance details { margin-top: 6px; border-top: 1px solid #d9e4d9; }
.insurance summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 2px;
  color: var(--sage);
  font-size: .79rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.insurance summary::-webkit-details-marker { display: none; }
.insurance summary::after { width: 7px; height: 7px; margin-right: 3px; border-right: 1.5px solid; border-bottom: 1.5px solid; content: ""; transform: translateY(-2px) rotate(45deg); }
.insurance details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.insurance .collapse-label, .insurance details[open] .expand-label { display: none; }
.insurance details[open] .collapse-label { display: inline; }
.insurance-body { padding: 0 0 11px; color: #43554a; font-size: .8rem; line-height: 1.56; }
.insurance-steps { margin: 0; padding-left: 1.3em; }
.insurance-steps li + li { margin-top: 6px; }
.insurance-steps li::marker { color: var(--sage); font-weight: 700; }
.insurance-steps strong { display: block; color: #2e4d3b; }
.insurance-action { margin-top: 9px; padding: 7px 9px; border-radius: 8px; background: #e4eee3; }
.insurance-action strong { display: block; margin-bottom: 1px; color: #2e4d3b; font-size: .73rem; }
footer { padding: 15px 2px 4px; text-align: center; color: var(--muted); font-size: .7rem; }

@media (max-width: 355px) {
  .shell { padding-inline: 12px; }
  .hero { margin-inline: -12px; padding-inline: 19px; }
  .paper, .tips { padding-inline: 12px; }
}