/* Scan's colours and serif stack. No web fonts. */
:root {
  --ground: #0f2a5e;
  --bone: #f4eddb;
  --sky: #8cc4e8;
  --coral: #ff9a82;
  --head: #fff3bf;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, "Noto Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--bone); font: 400 17px/1.45 var(--serif); font-variant-numeric: lining-nums; overflow-x: hidden; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--head); outline-offset: 3px; }

/* The first screen is the forest; the controls sit low on it, and the page scrolls on to the words. */
#first { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ground); }
#forest { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#forest:active { cursor: grabbing; }
#forest:focus-visible { outline-offset: -6px; }
#plain { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; margin: 0; padding: 2rem; text-align: center; font-size: 17px; pointer-events: none; }

.mark { position: absolute; left: max(18px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); right: 18px; pointer-events: none; }
/* The headline, sub-line and count share one solid plate, like the label, so no branch cuts through a word. */
.lede { width: fit-content; max-width: 100%; padding: 6px 10px 5px; background: var(--ground); border: 1px solid var(--sky); border-radius: 3px; }
h1 { margin: 0; font-size: 19px; font-weight: 400; font-style: italic; }
#sub { margin: 2px 0 4px; max-width: 30rem; color: var(--bone); font-size: 14px; line-height: 1.3; }
#count { margin: 0; color: var(--sky); font-size: 15px; }
/* A solid plate, so the words read over the canopy. */
#label { display: block; width: fit-content; max-width: 100%; margin: 8px 0 0; padding: 4px 10px; font-size: 15px; color: var(--bone); background: var(--ground); border: 1px solid var(--sky); border-radius: 3px; pointer-events: auto; }
#label:empty, #label[data-held] { display: none; }
#status { display: block; width: fit-content; max-width: 100%; margin: 8px 0 0; padding: 4px 10px; font-size: 15px; background: var(--ground); border: 1px solid var(--sky); border-radius: 3px; pointer-events: auto; }
#status[hidden], #tools[hidden], #resume[hidden], #share[hidden] { display: none; }
#resume { min-height: 44px; margin-left: 4px; font-size: 14px; }
/* The label and its link tools share a line where they fit, so the crown is not buried under a stack. */
.tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
#tools { display: flex; gap: 6px; margin-top: 8px; pointer-events: auto; }
#tools button { min-height: 44px; font-size: 14px; background: var(--ground); }
/* A demo forest says so: the same plate as the label, flat and solid. */
#demo-tag { display: block; width: fit-content; max-width: 100%; margin: 6px 0 0; padding: 4px 10px; font-size: 15px; color: var(--bone); background: var(--ground); border: 1px solid var(--sky); border-radius: 3px; }
#demo-tag[hidden] { display: none; }
/* ?clip=1: nothing but the forest and the tree's label. */
html.clip .deck, html.clip #tree-note, html.clip .lede, html.clip #demo-tag, html.clip #status, html.clip #tools { display: none; }

#tree-note { position: absolute; z-index: 3; left: max(18px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + 4.6rem); max-width: min(26rem, calc(100vw - 36px)); margin: 0; padding: 8px 12px; font-size: 15px; color: var(--bone); background: var(--ground); border: 1px solid var(--sky); border-radius: 3px; }
.mark #tree-note { position: static; max-width: min(26rem, 100%); margin-top: 8px; pointer-events: auto; }
#tree-note a { display: inline-block; margin-left: .4em; color: var(--head); }

.deck { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px max(18px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); isolation: isolate; pointer-events: none; }
/* The scrim sits behind the controls and no further: on a phone they span the width, and on a wider screen
   it ends a little past them, fading out, so the forest to their right is not washed out. */
.deck::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 100%; background: linear-gradient(to top, rgba(15, 42, 94, .94) 55%, rgba(15, 42, 94, 0)); }
@media (min-width: 640px) {
  .deck::before { width: calc(24rem + 36px + 5rem); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); }
}
.inner { width: min(100%, 24rem); pointer-events: auto; }
/* The one quiet line. The link ends it; its padding makes a 44px target without making the line taller. Most of the padding goes upward, because the price row, painted later, would cover it below. */
#quiet { margin: 0 0 4px; font-size: 13px; line-height: 1.3; color: var(--sky); }
#quiet-link { padding: 25px 5px 5px; color: var(--sky); }
#pay { display: flex; gap: 6px; }
#pay button { flex: 1; }
#rail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 14px; color: var(--sky); }

button { min-width: 44px; min-height: 44px; padding: 2px 11px; font: inherit; color: var(--bone); background: rgba(15, 42, 94, .6); border: 1px solid rgba(244, 237, 219, .5); border-radius: 3px; cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { background: var(--bone); color: var(--ground); }
button:disabled { opacity: .5; cursor: not-allowed; }
#rail button { font-size: 14px; }
#rail a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

#words { background: var(--ground); padding: 40px max(18px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
#words .column { width: min(100%, 34rem); }
#words h2 { margin: 1.6em 0 .4em; font-size: 19px; font-weight: 400; font-style: italic; }
#words h2:first-child { margin-top: 0; }
#units { font-size: 15px; color: var(--sky); }
#units button { min-height: 44px; font-size: 14px; }
#words p { margin: 0 0 .9em; }
#bot-links { list-style: none; margin: 0 0 .9em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
#bot-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--sky); }

code { font-size: .92em; }

/* The legal page: the same type and colours as #words, on the ground. */
body.legal { background: var(--ground); }
.legal main { padding: 40px max(18px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.legal .column { width: min(100%, 34rem); }
.legal h1 { margin: 0 0 .8em; font-size: 19px; }
.legal p { margin: 0 0 .9em; }
.legal a.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); }
.legal mark { padding: 0 .25em; color: var(--ground); background: var(--head); }

/* The sheet a price opens. A bottom sheet on a phone; on a wide screen a small card above the price row, the forest not dimmed.
   A solid plate in the same type, with no glow. */
#sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; padding: 0; color: var(--bone); background: var(--ground); border: 0; border-top: 1px solid var(--sky); font-size: 14px; line-height: 1.35; }
#sheet::backdrop { background: rgba(15, 42, 94, .5); }
.sheet-card { padding: 14px max(18px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
#sheet p { margin: 0 0 8px; }
#sheet-head { font-size: 16px; }
#sheet-head:focus-visible { outline-offset: 2px; }
#sheet-terms { color: var(--bone); }
#sheet-more, #sheet-demo { color: var(--sky); }
#sheet #sheet-more { margin-bottom: 12px; }
#sheet-more a { padding: 12px 0; white-space: nowrap; }
.sheet-actions { display: flex; align-items: center; gap: 8px; }
#sheet-pay { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 2px 18px; color: var(--ground); background: var(--bone); border: 1px solid var(--bone); border-radius: 3px; text-decoration: none; cursor: pointer; }
#sheet-pay[hidden], #sheet-off[hidden], #sheet-demo[hidden] { display: none; }
#sheet #sheet-off { margin: 0; }
@media (min-width: 640px) and (min-height: 501px) {
  #sheet { inset: auto auto var(--sheet-bottom, 9rem) max(18px, env(safe-area-inset-left)); width: 24rem; border: 1px solid var(--sky); border-radius: 3px; }
  #sheet::backdrop { background: transparent; }
  .sheet-card { padding: 12px 14px 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  #sheet[open] { animation: sheet-in .18s ease-out; }
  @keyframes sheet-in { from { transform: translateY(12px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }