:root {
  color: #203c3c;
  background: #f0f1e8;
  font: 100%/1.65 "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

/* 用記事簿的日期欄和格線組織資訊，字體由裝置提供，離線時也可閱讀。 */
main {
  width: min(100% - 2rem, 40rem);
  margin: clamp(2rem, 7vw, 5rem) auto;
}

header { margin-bottom: 2rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.15; }
h2 { font-size: 1.15rem; }
[hidden] { display: none !important; }
.eyebrow { color: #8c3825; margin-bottom: .65rem; font-weight: 700; }
.intro { margin-top: .8rem; }

.record {
  border: 1px solid #849391;
  border-top: .45rem solid #203c3c;
  background: #fcfcf6;
  padding: clamp(1rem, 4vw, 1.75rem);
}

.record-heading, .record-date {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  justify-content: space-between;
}

.record-heading { padding-bottom: .75rem; border-bottom: 1px solid #b3bcb4; }
.stamp { color: #8c3825; font-size: .8rem; font-weight: 700; }
.record-date { justify-content: start; margin-block: 1rem; }
.record-date time { font-size: clamp(1.75rem, 6vw, 3rem); font-weight: 700; }
.record-date span { color: #8c3825; font-weight: 700; }

.settings, .controls { display: flex; flex-wrap: wrap; gap: .75rem; }
.settings label { display: grid; flex: 1 1 8rem; gap: .25rem; }
.controls { margin-top: 1rem; }

select, button {
  min-height: 2.75rem;
  border: 1px solid #5d7370;
  border-radius: .25rem;
  padding: .45rem .75rem;
  color: inherit;
  background: #fcfcf6;
  font: inherit;
}

button { cursor: pointer; }
#restart, #skip, .primary { background: #203c3c; color: #fff; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid #9c432d; outline-offset: 3px; }
.note, footer { margin-top: 1rem; color: #465b59; font-size: .9rem; }
#debt-notice:empty { margin: 0; }
footer p + p { margin-top: .25rem; }

.ledger { border-top: 1px solid #b3bcb4; margin-top: 1.1rem; padding-top: .75rem; }
.caption { color: #465b59; font-size: .85rem; }
.ledger dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0 0; }
.ledger dt { font-size: .86rem; color: #465b59; }
.ledger dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.cohort-report, .life-history { border-top: 1px solid #b3bcb4; margin-top: 1.25rem; padding-top: .85rem; }
.cohort-report h3, .cohort-metric h4, .life-history h3, .history-rows h4 { margin: 0; font-size: 1rem; }
.cohort-metric { margin-top: .6rem; padding: .65rem .8rem; border: 1px solid #b3bcb4; background: #f4f4e8; }
.cohort-metric dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; margin: .35rem 0 0; }
.cohort-metric dt { color: #465b59; font-size: .86rem; }
.cohort-metric dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cohort-report .caption + .caption { margin-top: .2rem; }
@media (min-width: 32rem) {
  .cohort-metric dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.history-rows { margin: .65rem 0 0; padding-inline-start: 1.4rem; }
.history-rows li { padding: .55rem 0; }
.history-rows li + li { border-top: 1px solid #b3bcb4; }
.history-rows li::marker, .history-date { color: #8c3825; font-size: .85rem; font-weight: 700; }
.history-rows dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .65rem; margin: .3rem 0 0; }
.history-rows dt { color: #465b59; }
.history-rows dd { margin: 0; overflow-wrap: anywhere; }

.scene { margin-top: 1rem; border-top-color: #8c3825; }
.scene h2 { font-size: 1.55rem; }
.scene-summary, .scene details, .scene .caption { margin-top: .75rem; }
.scene .primary { margin-top: .65rem; }
.scene details { border-block-start: 1px solid #b3bcb4; padding-block: .55rem; }
.scene summary { cursor: pointer; font-weight: 700; }
.scene details p { margin-top: .45rem; }
.scene a { color: #80341f; }
.scene-art { display: block; width: 100%; height: auto; margin-top: .65rem; }
.scene blockquote { margin: .7rem 0 0; padding-left: .65rem; border-left: 2px solid #b3bcb4; }
.choices { display: grid; gap: .55rem; }
.choice { text-align: start; font-weight: 700; background: #f4f4e8; padding: .65rem .8rem; }
.choice:hover { background: #e9ebdb; }
.choice span { display: block; color: #465b59; font-weight: 400; font-size: .9rem; }
.result { margin-block: .65rem; padding: .65rem .85rem; background: #edeedf; border-left: 3px solid #8c3825; }
.result h3 { margin: 0 0 .25rem; font-size: 1rem; }
.result p:empty { display: none; }
.result p + p:not(:empty) { margin-top: .4rem; }

.family-options { min-inline-size: 0; margin: .8rem 0; padding: .65rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.family-options > .caption { grid-column: 1 / -1; }
.family-card { display: block; padding: .65rem; border: 1px solid #87978d; background: #f4f4e8; cursor: pointer; overflow-wrap: anywhere; }
.family-card:has(input:checked) { border: 2px solid #8c3825; background: #edeedf; }
.family-card:focus-within { outline: 2px solid #8c3825; outline-offset: 2px; }
.family-card h3 { margin: .35rem 0; font-size: 1.05rem; }
.family-card p { font-size: .9rem; }
.goal-options { min-inline-size: 0; margin: .8rem 0; padding: .65rem; display: grid; gap: .5rem; }
.goal-option { display: block; cursor: pointer; overflow-wrap: anywhere; }
.goal-option strong { margin-inline-start: .35rem; }
.goal-option span { display: block; color: #465b59; font-size: .85rem; }
.choice .goal-hint { margin-top: .35rem; color: #80341f; font-weight: 700; }
.ending-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.25rem; }
.ending-report > section { min-width: 0; margin-top: 0; padding-top: .85rem; border-top: 1px solid #b3bcb4; }
.ending-report .cohort-metric dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.goals-report h3, .goal-result h4 { margin: 0; font-size: 1rem; }
.goal-result { margin-top: .6rem; padding: .65rem .8rem; border: 1px solid #b3bcb4; background: #f4f4e8; overflow-wrap: anywhere; }
.goal-result p { font-size: .9rem; margin-top: .35rem; }
@media (min-width: 52rem) { .ending-report { grid-template-columns: repeat(2, minmax(0, 1fr)); } }