:root {
  --paper: #f4efe6;
  --ink: #24182c;
  --blossom: #6b2d78;
  --petal: #c45c9a;
  --mist: #c9a4cf;
  --blue: #1a4fbf;
  --lift: 0 1px 0 rgba(36, 24, 44, 0.05), 0 8px 22px rgba(36, 24, 44, 0.14);
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  color-scheme: light;
}

.skip {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 30;
  padding: 8px 14px;
  background: var(--blossom);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
  outline: 3px solid var(--petal);
  outline-offset: 2px;
}

body {
  display: grid;
  grid-template-rows: 6px auto minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
}

.blossom-bar {
  background: linear-gradient(90deg, #4a1d54, var(--blossom), var(--petal), var(--blossom), #4a1d54);
  background-size: 220% 100%;
  animation: bloom-bar 14s linear infinite;
}

@keyframes bloom-bar {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(6deg); }
}

.opening {
  position: fixed;
  inset: 0;
  z-index: 24;
  pointer-events: auto;
  background: var(--paper);
  cursor: pointer;
}

.opening-fall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.opening.is-ambient {
  z-index: 14;
  pointer-events: none;
  background: transparent;
  cursor: default;
  opacity: 1;
}

/* Botanical scene owns all structural ink. CSS owns only layout and type. */
body[data-botanical-frame="2"] main::after { display: none; }
body[data-botanical-frame="2"] header { border-bottom-color: transparent; }
body[data-botanical-frame="2"] #sheet { clip-path: none; }
body[data-botanical-frame="2"] .plan-steps { border: 0; margin: 0; padding: 0; }
body[data-botanical-frame="2"] .plan-steps li::before { display: none; }
body[data-botanical-frame="2"] .plan-steps li {
  padding: 0; margin: 0 0 18px;
  opacity: clamp(0, calc((var(--instruction-age, -1000) - var(--step-delay, 280)) / 180), 1);
  transform: none;
}
body.scene-ready[data-botanical-frame="2"] .plan-steps li { opacity: 1; transform: none; }
body[data-botanical-frame="2"] .plan-steps li { color: #665568; }
body[data-botanical-frame="2"] .plan-steps li:first-child { color: #3c2941; }
body[data-botanical-frame="2"] .plan-steps li strong { font-weight: 600; }
body[data-botanical-frame="2"] .plan-hint { color: #3c2941; font-weight: 600; line-height: 1.5; }
body[data-botanical-frame="2"] .plan-steps li:nth-child(2) { --step-delay: 390; }
body[data-botanical-frame="2"] .plan-steps li:nth-child(3) { --step-delay: 500; }
body[data-botanical-frame="2"] .plan-steps li:nth-child(4) { --step-delay: 610; }
body[data-botanical-frame="2"] .plan-steps li:nth-child(5) { --step-delay: 720; }
body[data-botanical-frame="2"] .plan-steps li:nth-child(6) { --step-delay: 830; }
body.scene-skipped[data-botanical-frame="2"] .plan-steps li { transition: none; }
.field-heading { display: none; }
body[data-botanical-frame="2"] .field-heading { display: block; margin: 0 0 28px; opacity: min(var(--heading-clearance, 0), clamp(0, calc((var(--scene-progress, 0) - .55) / .25), 1)); }
body.scene-ready[data-botanical-frame="2"] .field-heading { opacity: 1; }
.field-eyebrow { font: 9px/1.5 system-ui,sans-serif; letter-spacing: .19em; color: #715776; margin: 0 0 14px; }
.field-heading h2 { font: 400 46px/.98 Palatino,Georgia,serif; letter-spacing: -.045em; margin: 0 0 18px; color: #3c2941; }
.field-heading h2 em { color: #77538e; font-weight: 400; }
.field-intro { font: 15px/1.5 Palatino,Georgia,serif; color: #786975; margin: 0; }
@media (min-width:900px) {
  body[data-mode="marathon"][data-botanical-frame="2"] #sheet { padding: 205px 38px 32px 82px; }
  body[data-botanical-frame="2"] .plan-steps { max-width: 360px; font-size: 14px; line-height: 1.45; }
}
@media (max-width:899px) {
  body[data-mode="marathon"][data-botanical-frame="2"] #sheet { padding: 44px 28px 20px 30px; }
  body[data-botanical-frame="2"] .field-heading { margin-bottom: 22px; opacity: min(var(--heading-clearance, 0), clamp(0, calc((var(--scene-progress, 0) - .95) / .05), 1)); }
  .field-heading h2 { font-size: 32px; }
  .field-heading h2 br { display: none; }
  .field-heading h2 em::before { content: " "; white-space: pre; }
  .field-eyebrow { margin-bottom: 9px; font-size: 8px; }
  .field-intro { display: none; }
  body[data-botanical-frame="2"] .plan-steps { font-size: 13px; line-height: 1.45; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-botanical-frame="2"] .opening.is-ambient { display: block; }
  body[data-botanical-frame="2"] .plan-steps li { transition: none; }
}

.blossom-bar,
header,
#sheet {
  position: relative;
  z-index: 12;
}

.tools { z-index: 12; }

header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px 8px;
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  border-bottom: 1px solid rgba(75, 55, 44, 0.48);
  background: var(--paper);
}

.mark {
  width: 36px;
  height: 36px;
  flex: none;
  transform-origin: 50% 80%;
  animation: sway 4.8s ease-in-out infinite;
}

.titles { min-width: 0; flex: 1; }

h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.lede {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.3;
  max-width: 34em;
}

.tally {
  margin: 0 0 0 auto;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: center;
}

.count {
  margin: 0;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#reset-seen {
  min-height: 32px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

.count.idle { font-size: 1.2rem; align-self: center; }

.count small {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

button, input {
  font: inherit;
  color: var(--ink);
}

button {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button:hover {
  background: #ebe4d8;
}

button:active {
  transform: translateY(1px);
}

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

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

button[aria-pressed="true"]:hover {
  background: #5a2466;
  border-color: #5a2466;
}

button[aria-pressed="true"]:focus-visible,
#start:focus-visible {
  outline-color: var(--paper);
}

button:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
  background: var(--paper);
}

main { position: relative; min-height: 0; background: var(--paper); touch-action: none; }
main[data-botanical-clip] {
  z-index:13;
  margin-right:calc(-1 * var(--map-bleed-x, 0px));
  margin-bottom:calc(-1 * var(--map-bleed-y, 0px));
}
main[data-botanical-clip] .tools {
  right:calc(10px + env(safe-area-inset-right) + var(--map-bleed-x, 0px));
  bottom:calc(12px + var(--map-bleed-y, 0px));
}

main::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(180deg, #3d3029 0 30%, #654a3b 31% 66%, #9f7965 67% 78%, #513a31 79% 100%);
  clip-path: polygon(0 31%, 8% 18%, 17% 38%, 28% 20%, 39% 43%, 51% 22%, 63% 37%, 74% 16%, 87% 35%, 100% 22%, 100% 80%, 89% 67%, 77% 86%, 65% 66%, 53% 83%, 40% 64%, 29% 82%, 16% 62%, 7% 79%, 0 68%);
  filter: drop-shadow(0 2px 1px rgba(36, 24, 44, 0.28));
}

body[data-botanical-frame="1"] main::after {
  opacity: 0;
}

canvas#map {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.plan-spin {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.plan-spin[hidden] { display: none; }

.plan-spin span {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(36, 24, 44, 0.28);
  border-top-color: #6b2d78;
  border-radius: 50%;
  animation: plan-spin 0.7s linear infinite;
}

@keyframes plan-spin {
  to { transform: rotate(360deg); }
}

.petal-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.chip {
  position: absolute;
  left: 12px;
  right: calc(72px + var(--map-bleed-x, 0px));
  margin: 0;
  padding: 8px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 22px 11px 24px 13px / 14px 24px 16px 22px;
  font-size: 1.05rem;
  z-index: 2;
  line-height: 1.25;
  box-shadow: var(--lift);
}

#loc-note { top: 12px; }

.next-chip {
  bottom: calc(12px + var(--map-bleed-y, 0px));
  left: 12px;
  right: auto;
  width: fit-content;
  max-width: calc(100% - 240px - var(--map-bleed-x, 0px));
  font-weight: 700;
}

.sun-card {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 24px 12px 26px 15px / 16px 28px 18px 24px;
  pointer-events: none;
  line-height: 1.2;
  max-width: none;
  box-shadow: none;
}

.sun-card.is-live { border-color: var(--blossom); }

.sun-title {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sun-card p {
  margin: 0;
  font-size: 0.78rem;
}

.sun-card p + p { margin-top: 2px; }

.sun-row.is-now {
  font-weight: 700;
  color: var(--blossom);
}

.sun-now {
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blossom);
}

.sun-now:empty { display: none; }

.tools {
  position: absolute;
  bottom: 12px;
  right: calc(10px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 2;
}

.tools button {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--paper);
  box-shadow: var(--lift);
}

#start, #recenter, #stop {
  width: auto;
  min-width: 48px;
  padding: 0 14px;
  font-size: 0.95rem;
}

#start {
  background: var(--blossom);
  color: var(--paper);
  border-color: var(--blossom);
}

#start:hover {
  background: #5a2466;
  border-color: #5a2466;
}

#start:disabled {
  background: var(--blossom);
  color: var(--paper);
  border-color: var(--blossom);
  opacity: 0.38;
  cursor: default;
}

#start:disabled:hover {
  background: var(--blossom);
  border-color: var(--blossom);
}

.map-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 239, 230, 0.86);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.map-veil[hidden] { display: none; }

body[data-live="0"] .petal-layer { visibility: hidden; }

body[data-live="0"] #find-path { display: none; }

body[data-gate="1"] #sheet,
body[data-gate="1"] .tools {
  visibility: hidden;
}

#sheet {
  max-height: 38vh;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 0;
  padding: 15px 12px calc(10px + env(safe-area-inset-bottom));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  background: var(--paper);
  clip-path: polygon(0 8px, 10% 2px, 21% 7px, 33% 1px, 45% 8px, 57% 3px, 69% 7px, 81% 1px, 91% 6px, 100% 2px, 100% 100%, 0 100%);
}

.plan-card {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.plan-card[hidden] { display: none; }

.branch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  margin: 0 0 8px;
  padding-top: 2px;
}

.branch:not(:has(.plan-stat:not(:empty))) { display: none; }

.branch:has(#plan-count:not(:empty)):has(#plan-time:not(:empty))::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 18%;
  width: 64%;
  height: 1.5px;
  background: var(--blossom);
  opacity: 0.4;
}

.plan-lead, .plan-stat, .plan-hint { margin: 0; }

.plan-stat { font-weight: 700; }

.plan-stat:empty { display: none; }

#plan-count,
#plan-time {
  position: relative;
  padding-top: 30px;
  text-align: center;
  font-size: 0.95rem;
}

#plan-count::before,
#plan-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  background: url("mark.svg") center / contain no-repeat;
}

#plan-climb {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-left: 22px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  background: url("mark.svg") left 0.1em / 14px 14px no-repeat;
}

.plan-lead {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.plan-lead:empty { display: none; }

.plan-hint {
  margin: 0 0 8px 22px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #5c4a62;
}

  .plan-steps {
  list-style: none;
  margin: 4px 0 0 6px;
  padding: 0 0 0 12px;
  border-left: 1.5px solid rgba(101, 74, 59, 0.42);
  font-size: 0.88rem;
  line-height: 1.35;
}

.plan-steps li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 8px;
}

.plan-steps li::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 0.15em;
  width: 13px;
  height: 13px;
  background: url("mark.svg") center / contain no-repeat;
}

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}

.plan-actions:not(:has(button:not([hidden]))) {
  display: none;
}

#plan-go {
  min-height: 44px;
}

#plan-clear {
  margin-top: 0;
  min-height: 44px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: var(--blossom);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#plan-clear:hover { background: transparent; }

.sheet-tools {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  padding: 0 0 8px;
}

.sheet-tools button {
  flex: 1;
  min-height: 40px;
  font-size: 0.9rem;
  font-weight: 700;
}

.sheet-tools:not(:has(button:not([hidden]))) {
  display: none;
}

#city-status {
  margin: 0 0 8px;
}

.find-note {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.35;
}

.city-gate {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  background: rgba(36, 24, 44, 0.38);
}

.city-gate[hidden] { display: none; }

.city-card {
  width: min(34rem, 100%);
  max-height: min(92dvh, 720px);
  overflow: auto;
  padding: 18px 16px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 34px 17px 38px 20px / 22px 42px 25px 36px;
  box-shadow: var(--lift);
}

.city-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blossom);
}

.city-title {
  margin: 6px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}

.city-copy {
  margin: 6px 0 12px;
  font-size: 0.92rem;
  line-height: 1.35;
}

.city-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.4rem, 1fr));
  gap: 8px;
}

.city-list button {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.city-list button[aria-pressed="true"] {
  background: var(--blossom);
  color: var(--paper);
  border-color: var(--blossom);
}

.city-list button.is-wait {
  font-weight: 600;
  opacity: 0.88;
}

.city-list button.is-live {
  font-weight: 700;
}

.live-pip {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--blossom);
  border: 1.5px solid var(--blossom);
}

.city-list button[aria-pressed="true"] .live-pip {
  background: var(--paper);
  color: var(--blossom);
  border-color: var(--paper);
}

.wait-card {
  margin: 4px 0 12px;
  padding: 14px 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 30px 14px 32px 18px / 20px 34px 22px 30px;
  background: var(--paper);
}

.wait-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
}

.wait-card p + p {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.82;
}

.wait-go {
  margin: 12px 0 0;
  width: 100%;
  font-weight: 700;
  background: var(--blossom);
  color: var(--paper);
  border-color: var(--blossom);
}

.wait-go:hover {
  background: #5a2466;
  border-color: #5a2466;
}

#city-gate-close {
  width: 100%;
  margin: 8px 0 0;
  font-weight: 700;
}

#use-location {
  width: 100%;
  margin: 12px 0 0;
  min-height: 44px;
  font-weight: 700;
  background: var(--blossom);
  color: var(--paper);
  border-color: var(--blossom);
}

#city-note {
  margin: 10px 0 0;
}

.walk {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 28px 12px 30px 16px / 18px 32px 20px 27px;
  margin: 0 0 8px;
  padding: 8px 12px;
  min-height: 64px;
}

.walk:nth-child(even) {
  border-radius: 13px 30px 16px 27px / 32px 18px 28px 20px;
}

.walk .num {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  min-width: 1.4rem;
  color: var(--walk-ink, var(--ink));
}

.walk[aria-pressed="true"] .num { color: var(--paper); }

.walk-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: block;
}

.walk p { margin: 2px 0 0; font-size: 0.98rem; }

.quiet {
  margin: 12px 4px;
  font-size: 0.98rem;
  opacity: 0.72;
}

.walk .lead { font-size: 0.98rem; line-height: 1.35; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

.stats div {
  margin: 0;
  padding: 8px 10px;
  border-radius: 18px 9px 20px 11px / 11px 20px 12px 18px;
  background: rgba(244, 239, 230, 0.18);
}

.walk[aria-pressed="true"] .stats div {
  background: var(--paper);
  color: var(--ink);
}

.walk[aria-pressed="true"] .stats dt { opacity: 0.72; }

.stats dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.82;
}

.stats dd {
  margin: 2px 0 0;
  font-size: 1.28rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.marathon-card {
  align-items: start;
  padding: 14px 14px 16px;
}

.noscript {
  padding: 12px;
}

@media (min-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: 6px auto minmax(0, 1fr); }
  body[data-mode="marathon"] { grid-template-columns: minmax(0, 1fr) minmax(460px, 40%); }
  .blossom-bar { grid-column: 1 / -1; }
  header { grid-column: 1 / -1; }
  #sheet {
    grid-column: 2;
    grid-row: 3;
    max-height: none;
    border-top: 0;
    border-left: 0;
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 6px 100%, 1px 90%, 7px 78%, 2px 65%, 8px 51%, 1px 37%, 7px 23%, 2px 10%);
  }
  main::after {
    left: auto;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 12px;
    height: auto;
    background: linear-gradient(90deg, #3d3029 0 30%, #654a3b 31% 66%, #9f7965 67% 78%, #513a31 79% 100%);
    clip-path: polygon(29% 0, 76% 0, 65% 9%, 84% 19%, 63% 30%, 82% 41%, 61% 52%, 79% 63%, 58% 74%, 80% 86%, 67% 100%, 24% 100%, 36% 88%, 18% 77%, 38% 65%, 20% 54%, 41% 42%, 21% 31%, 39% 20%, 20% 10%);
  }
  body[data-mode="marathon"] #sheet { padding: 16px 18px 20px; }
  body[data-mode="marathon"] .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  body[data-mode="marathon"] .stats dd { font-size: 1.55rem; }
  main { grid-column: 1; grid-row: 3; }
  .wait-card { margin-top: 8px; padding: 18px 16px 20px; }
  .wait-title { font-size: 1.22rem; }
}

@media (max-width: 899px) {
  body[data-mode="marathon"] #sheet { max-height: 46vh; }
}

@media (max-width: 599px) {
  .lede { display: none; }
  header { align-items: center; padding-top: 6px; padding-bottom: 6px; }
  .mark { width: 32px; height: 32px; }
  h1 { font-size: 1.12rem; }
  .sheet-tools { flex-direction: column; }
  .marathon-card .lead { display: none; }
  body[data-mode="marathon"] #sheet { max-height: 50vh; }
  .marathon-card { padding: 10px 12px 12px; }
  .stats { gap: 6px; margin-top: 8px; }
  .stats dd { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blossom-bar, .mark, .plan-spin span { animation: none; }
  .petal-layer { display: none; }
  .opening { display: none; }
  button:active { transform: none; }
}

/* The opening becomes one hands-on branch, then gives its space to the map. */
body[data-tutorial] .field-heading,
body[data-tutorial] #plan-steps,
body[data-tutorial] #plan-hint { display:none; }
body[data-tutorial="pending"] #plan-card,
body[data-tutorial="active"] #plan-card { display:none; }
body[data-tutorial] #sheet { height:auto; }
#lesson-replay { margin-left:auto; min-width:52px; min-height:40px; background:transparent; color:var(--blossom); border:1px solid #a88caf; }
body[data-tutorial="active"] #lesson-replay,body[data-tutorial="pending"] #lesson-replay { display:none; }
#walkthrough { position:relative; max-width:360px; }
#walkthrough[hidden] { display:none; }
body[data-tutorial="pending"] #walkthrough { opacity:min(var(--heading-clearance,0),clamp(0,calc((var(--scene-progress,0) - .92) / .08),1)); }
#lesson-progress { height:32px; display:flex; justify-content:space-between; margin:0 0 18px; }
.lesson-bud { width:22px; height:28px; display:block; }
#lesson-title { font:400 34px/1.04 Palatino,Georgia,serif; letter-spacing:-.025em; color:#3c2941; margin:0 0 14px; }
#lesson-copy { font-size:16px; line-height:1.45; margin:0 0 12px; }
#lesson-status { min-height:42px; margin:0 0 14px; color:var(--blossom); font:600 13px/1.5 system-ui,sans-serif; }
body[data-lesson-farewell] #lesson-status { color:transparent; }
body[data-lesson-farewell] .lesson-controls { visibility:hidden; }
@media(prefers-reduced-motion:no-preference) {
  body[data-lesson-farewell] #lesson-title { animation:journey-farewell 240ms ease-out both; }
  @keyframes journey-farewell { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
}
.lesson-controls { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#lesson-skip { flex:none; background:transparent; border:0; text-decoration:underline; color:#665568; padding:8px 4px; font-size:12px; min-height:44px; }
#map-load-error { position:absolute; z-index:13; left:16px; top:16px; max-width:calc(100% - 80px); padding:14px 18px; background:var(--paper); border:1px solid #766052; border-radius:18px 9px; box-shadow:0 2px 8px #443c3820; }
#map-load-error[hidden] { display:none; }
#map-load-error p { margin:0 0 10px; }
body[data-mode="marathon"][data-tutorial="complete"] { grid-template-columns:minmax(0,1fr); grid-template-rows:6px auto minmax(0,1fr) auto; }
body[data-tutorial="complete"] main { grid-column:1; grid-row:3; }
body[data-mode="marathon"][data-tutorial="complete"] #sheet { grid-column:1; grid-row:4; padding:10px 16px 8px 28px; max-height:25vh; overflow:auto; }
body[data-tutorial="complete"] #plan-card { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin:0; padding:0; }
body[data-tutorial="complete"] #plan-card[hidden] { display:none; }
body[data-tutorial="complete"] #plan-bloom { display:flex; flex-wrap:wrap; gap:4px 18px; border:0; padding:0; margin:0; }
body[data-tutorial="complete"] #plan-bloom::before,
body[data-tutorial="complete"] #plan-bloom::after { display:none; }
body[data-tutorial="complete"] .plan-stat { margin:0; font-size:13px; background:none; padding:0; }
body[data-tutorial="complete"] #plan-count,body[data-tutorial="complete"] #plan-time,body[data-tutorial="complete"] #plan-climb { padding:0; order:initial; background:none; }
body[data-tutorial="complete"][data-plan="0"] #sheet { display:none; }
body[data-tutorial="complete"] .plan-stat:empty { display:none; }
body[data-tutorial="complete"] #plan-count::before,body[data-tutorial="complete"] #plan-time::before { display:none; }
body[data-tutorial="complete"] .sheet-tools { margin:0; }
body[data-tutorial="complete"] #plan-lead { margin:0; }
/* The guide yields to a larger map; remaining chrome is a quiet field-guide edge. */
body[data-lesson-transition] #lesson-replay { pointer-events:none; }
body[data-lesson-transition] main { overflow:hidden; }
body[data-tutorial="complete"] header { box-shadow:0 1px 0 #8e796c; }
body[data-mode="marathon"][data-tutorial="complete"] #sheet { border-top:1.5px solid #766052; background:#f4efe6; padding-top:12px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
body[data-tutorial="complete"] #plan-count { color:#6b2d78; display:flex; align-items:center; gap:7px; }
body[data-tutorial="complete"] #plan-count:not(:empty)::before { content:""; display:block; position:static; flex:none; width:18px; height:18px; transform:none; background:url("mark.svg") center/contain no-repeat; }
body[data-tutorial="complete"] #plan-time,body[data-tutorial="complete"] #plan-climb { color:#51433f; font-weight:400; }
body[data-tutorial="complete"] #plan-clear,body[data-tutorial="complete"] #lesson-replay { border:1px solid #8e796c; border-radius:18px 9px 18px 9px; background:#f8f3eb; color:#51433f; min-height:44px; }
body[data-tutorial="complete"] #plan-clear { margin-left:auto; font-size:12px; padding:7px 14px; }
body[data-tutorial="complete"] .tools button { border-color:#766052; color:#51433f; border-radius:50% 45% 50% 45%; box-shadow:0 2px 5px #443c381c; }
@media(min-width:900px) {
  body[data-mode="marathon"][data-tutorial="pending"],body[data-mode="marathon"][data-tutorial="active"] { grid-template-columns:minmax(0,1fr) 360px; }
  body[data-mode="marathon"][data-tutorial="pending"] #sheet,body[data-mode="marathon"][data-tutorial="active"] #sheet { padding:190px 28px 24px 52px; }
}
@media(max-width:899px) {
  body[data-mode="marathon"][data-tutorial="pending"] #sheet,body[data-mode="marathon"][data-tutorial="active"] #sheet { padding:26px 22px 12px 30px; max-height:44vh; }
  #walkthrough { max-width:none; }
  #lesson-progress { height:20px; margin:0 0 8px; max-width:300px; }
  .lesson-bud { height:20px; }
  #lesson-title { font-size:25px; margin-bottom:8px; }
  #lesson-copy { font-size:14px; line-height:1.35; margin-bottom:8px; }
  #lesson-status { min-height:18px; font-size:12px; margin-bottom:5px; }
}
@media(max-height:500px) and (min-width:600px) {
  #lesson-progress { height:20px; margin:0 0 8px; max-width:300px; }
  .lesson-bud { height:20px; }
  #lesson-title { font-size:25px; margin-bottom:8px; }
  #lesson-copy { font-size:14px; line-height:1.35; margin-bottom:8px; }
  #lesson-status { min-height:18px; font-size:12px; margin-bottom:5px; }
  body[data-tutorial="complete"] header .lede { display:none; }
  body[data-mode="marathon"][data-tutorial="pending"],body[data-mode="marathon"][data-tutorial="active"] { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:6px auto minmax(0,1fr); }
  body[data-tutorial="active"] .blossom-bar,body[data-tutorial="pending"] .blossom-bar,body[data-tutorial="active"] header,body[data-tutorial="pending"] header { grid-column:1/-1; }
  body[data-tutorial="active"] main,body[data-tutorial="pending"] main { grid-column:1;grid-row:3; }
  body[data-mode="marathon"][data-tutorial="active"] #sheet,body[data-mode="marathon"][data-tutorial="pending"] #sheet { grid-column:2;grid-row:3;max-height:none;padding:32px 18px 12px 28px; }
}
@media(max-height:500px) and (max-width:599px) {
  .tools { flex-direction:row; }
  body[data-mode="marathon"][data-tutorial="pending"] #sheet,body[data-mode="marathon"][data-tutorial="active"] #sheet { padding:12px 16px 8px 24px; max-height:52vh; }
  #lesson-progress { height:16px; margin-bottom:4px; }
  #lesson-title { font-size:22px; margin-bottom:6px; }
  #lesson-copy { font-size:13px; }
}
/* A compact botanical odometer, confined to the guide's reserved copy space. */
.rooted-counter { display:inline-flex;align-items:baseline;gap:.35em;max-width:100%;flex-wrap:wrap;color:#71556f;font-variant-numeric:tabular-nums; }
.rooted-wheels { display:inline-flex;align-items:baseline;color:#56365e;font-weight:600; }
.rooted-wheel { display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom; }
.rooted-reel { display:flex;flex-direction:column;transform:translateY(calc(var(--rooted-stop) * -1.2em));animation:rooted-turn var(--rooted-duration) cubic-bezier(.14,.65,.18,1) both; }
.rooted-reel > span { display:block;height:1.2em;line-height:1.2;flex:none; }
.rooted-counter[data-paused="true"] .rooted-reel { animation-play-state:paused; }
@keyframes rooted-turn { from {transform:translateY(0);} to {transform:translateY(calc(var(--rooted-stop) * -1.2em));} }
@media (prefers-reduced-motion:reduce) { .rooted-reel {animation:none;} }