:root {
  --bg: #f4efe6;
  --ink: #241f1a;
  --line: #8a7352;
  --muted: #3f3a34;
  --soft: rgba(36, 31, 26, 0.06);
  --serif: "Songti SC", "Songti TC", "STSong", "SimSun", "Noto Serif SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --measure: 36em;
  --body: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.85;
  font-weight: 400;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; }

img { height: auto; border: 0; display: block; }

button, input, textarea { font: inherit; color: inherit; }

button {
  background: transparent;
  border: 1px solid var(--line);
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
}

a { color: inherit; }

p, h1, h2, h3, ul, ol, figure { margin-top: 0; }

h1, h2, h3, .song {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
}

.measure { max-width: var(--measure); }

.quiet {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.skip {
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 8;
  background: var(--bg);
  color: var(--ink);
  min-height: 44px;
  padding: 8px 12px;
}

.skip:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.read-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.read-switch a {
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.read-switch a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.choice-row, .step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.choice-row button, .step-row button {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: break-word;
}

button[aria-pressed="true"] {
  background: var(--soft);
  border-color: var(--ink);
}

.swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid var(--ink);
  vertical-align: -3px;
}

.answers { display: grid; gap: 8px; margin: 12px 0; }

.answers button { width: 100%; min-width: 0; overflow-wrap: break-word; }

[data-mark]:empty { display: none; }

[data-mark] {
  display: inline-block;
  margin-right: 8px;
  letter-spacing: 0.08em;
  font-size: 16px;
}

.reasons { margin: 8px 0 16px; padding-left: 1.2em; }

.reasons li + li { margin-top: 6px; }

.chosen:empty { display: none; }

.framing {
  border-left: 2px solid var(--line);
  padding-left: 14px;
  margin: 16px 0;
}

.earth-mark {
  width: 88px;
  height: auto;
  display: block;
  margin: 8px 0 12px;
}

.grounding-svg {
  width: min(420px, 100%);
  height: auto;
  display: block;
  overflow: hidden;
}

.grounding-svg .part { opacity: 0.34; }

.grounding-svg.is-step-0 [data-part="feet"],
.grounding-svg.is-step-1 [data-part="roots"],
.grounding-svg.is-step-2 [data-part="branches"] { opacity: 1; }

.diagram-note { margin-top: 8px; }

details {
  margin: 28px 0 12px;
  border-top: 1px solid var(--line);
}

summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 22px;
}

.source-list { padding-left: 1.2em; }

.source-list li + li { margin-top: 4px; }

.page-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  border-top: 1px solid var(--line);
  padding: 18px 0 36px;
}

.page-foot a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}