:root {
  --paper: #EEEFE1;
  --ink: #3B362C;
  /* Text colours. Every word uses --ink or --ink-quiet, which both pass the WCAG AA
     readability standard against the paper (10.3:1 and 5.8:1). --ink-faint is only for
     decorative lines and borders, never for words. */
  --ink-quiet: #5F5B50;
  --ink-faint: rgba(59, 54, 44, 0.24);
  --rust: #A35B37;
  /* Fonts ("Classic picture book"), served from fonts/ (see tools/get-fonts.py).
     Words: Goudy Bookletter 1911. Small labels and numbers: Alegreya SC (small capitals).
     Thai and Japanese letters come from Trirong and Zen Old Mincho. */
  --font-quote: "Goudy Bookletter 1911", "Trirong", "Zen Old Mincho", Georgia, serif;
  --font-ui: "Alegreya SC", "Goudy Bookletter 1911", "Trirong", "Zen Old Mincho", Georgia, serif;
  color-scheme: light;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- a breathing figure ----------
   Every picture is the same 1254×1254 square. The .fig box shows only the
   middle of it (where the animal, rock and water are), with soft edges.
   The breathing and blinking are drawn on a canvas inside it (see breath.js). */
.fig {
  position: relative;
  aspect-ratio: 916 / 865;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
.fig .frame {
  position: absolute;
  width: 136.9%;          /* 1254 / 916 */
  aspect-ratio: 1;
  left: -18.34%;          /* 168 / 916 */
  top: -27.75%;           /* 240 / 865 */
}
.fig img, .fig canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  user-select: none; -webkit-user-select: none;
}

/* ---------- choosing a companion ---------- */
.picker {
  min-height: 100%;
  box-sizing: border-box;
  padding: calc(clamp(40px, 8vh, 88px) + env(safe-area-inset-top, 0px)) 16px calc(48px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4vh, 40px);
}
.picker header { text-align: center; display: grid; gap: 10px; }
.picker h1 {
  margin: 0;
  font-family: var(--font-quote); font-weight: 400;
  font-size: clamp(40px, 7vw, 58px); letter-spacing: 0; line-height: 1;
}
.picker header p { margin: 0; font-family: var(--font-quote); font-size: 20px; color: var(--ink); }
/* The translated subtitle under "Sit a While" (not shown in English). */
.picker header .subtitle {
  margin-top: -2px;
  font-family: var(--font-quote); font-weight: 400; font-size: clamp(20px, 2.8vw, 24px);
  color: var(--ink-quiet);
}

.grid {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 2vw, 24px) clamp(8px, 3vw, 32px);
}
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  border: 0; background: none; padding: 0 0 10px; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 18px;
}
.card .name {
  margin-top: -6%;
  font: 500 17px/1.2 var(--font-ui); letter-spacing: 0.06em;
  color: var(--ink);
  transition: color .4s;
}
.card:hover .name { color: var(--ink); }
.card:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---------- sitting with a companion ---------- */
.sit {
  height: 100%;
  box-sizing: border-box;
  padding-inline: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.sit .fig { width: min(100vw, 62vh, 640px); }
/* A thought under the animal: fades in, stays a while, fades out. */
.thought {
  min-height: 7.4em; width: min(40rem, 100%); margin-top: -4vh;
  position: relative; z-index: 6;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 3.2s ease, transform 3.2s ease;
}
.thought.show { opacity: 1; transform: none; }
.thought p {
  margin: 0;
  font-family: var(--font-quote); font-weight: 400; color: var(--ink);
  font-size: clamp(24px, calc(17px + 1.3vw), 32px); line-height: 1.4; text-wrap: balance;
}
.thought p:lang(th), .thought p:lang(ja) { font-size: clamp(21px, calc(14px + 1.3vw), 29px); line-height: 1.7; }
/* Japanese: break lines between natural phrases, never before small kana or closing marks. */
.thought p:lang(ja) { word-break: auto-phrase; line-break: strict; }
.thought cite {
  font: 500 15px/1.2 var(--font-ui); letter-spacing: 0.06em;
  color: var(--ink-quiet);
}

#rain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ---------- the two faint corner controls: back (top-left) and settings (top-right) ---------- */
.corner {
  position: fixed; z-index: 7;
  top: calc(8px + env(safe-area-inset-top, 0px));
  border: 0; background: none; cursor: pointer; padding: 12px;
  color: var(--ink-quiet);
  transition: color .4s, opacity 1.6s ease;
}
.corner:hover, .corner:focus-visible, .corner[aria-expanded="true"] { color: var(--ink); }
.corner:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
/* While sitting quietly, they fade almost away; a tap or mouse move brings them back. */
body.idle .corner { opacity: 0.12; transition: color .4s, opacity 3s ease; }
/* On a computer, the mouse pointer hides too, until the mouse moves. */
body.idle, body.idle * { cursor: none !important; }

.back {
  left: calc(8px + env(safe-area-inset-left, 0px));
  font: 500 17px/1 var(--font-ui); letter-spacing: 0.06em;
}
.settings-btn {
  right: calc(8px + env(safe-area-inset-right, 0px));
  top: calc(2px + env(safe-area-inset-top, 0px));
  line-height: 0;
}
.settings-btn svg { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }

/* ---------- settings panel ---------- */
.panel {
  position: fixed; z-index: 8;
  top: calc(52px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: min(330px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 18px 20px; display: grid; gap: 16px;
  background: rgba(238, 239, 225, 0.94);
  border: 1px solid var(--ink-faint); border-radius: 14px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.panel.open { opacity: 1; transform: none; pointer-events: auto; }
.row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); align-items: center; gap: 12px; }
.row > span {
  font: 500 16px/1.2 var(--font-ui); letter-spacing: 0.05em;
  color: var(--ink-quiet);
}

/* Thin sliders: a hairline track with a small ink dot. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink-faint); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink-faint); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -6px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink-quiet);
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink-quiet);
}

/* A small three-way choice (Night: Auto / On / Off). */
.seg { display: flex; border: 1px solid var(--ink-faint); border-radius: 999px; overflow: hidden; }
.seg button {
  flex: 1 1 auto; border: 0; background: none; padding: 9px 8px; cursor: pointer; white-space: nowrap;
  font: 500 16px/1 var(--font-ui); color: var(--ink-quiet);
  transition: background .4s, color .4s;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }

/* ---------- privacy note ----------
   A faint link at the foot of the settings panel opens a quiet page over everything. */
.privacy-link {
  justify-self: center; margin-top: 2px;
  border: 0; background: none; cursor: pointer; padding: 6px 10px;
  font: 500 14px/1 var(--font-ui); letter-spacing: 0.05em; color: var(--ink-quiet);
}
.privacy-link:hover, .privacy-link:focus-visible { color: var(--ink); }
.privacy-link:focus-visible, .privacy-back:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.privacy {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: calc(48px + env(safe-area-inset-top, 0px)) 16px calc(48px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.8s ease;
}
.privacy.fading { opacity: 0; }
.privacy-inner { width: min(32rem, 100%); text-align: center; display: grid; gap: 18px; }
.privacy h2 { margin: 0 0 6px; font: 400 clamp(30px, 6vw, 40px)/1.1 var(--font-quote); color: var(--ink); }
.privacy p { margin: 0; font: 400 clamp(19px, 2.6vw, 22px)/1.5 var(--font-quote); color: var(--ink); text-wrap: balance; }
.privacy p:lang(ja), .privacy h2:lang(ja) { word-break: auto-phrase; line-break: strict; }
.privacy-back {
  justify-self: center; margin-top: 18px;
  border: 0; background: none; cursor: pointer; padding: 12px;
  font: 500 17px/1 var(--font-ui); letter-spacing: 0.06em; color: var(--ink-quiet);
}
.privacy-back:hover { color: var(--ink); }

/* ---------- night mode ----------
   A warm, muted layer over everything: it dims the paper, pictures and words evenly,
   so they still match each other. Fades in and out slowly. */
.night-veil {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: #A39C8E; mix-blend-mode: multiply;
  opacity: 0; transition: opacity 4s ease;
}
body.night .night-veil { opacity: 1; }
/* The veil dims the words too, so at night the quieter words use full ink to stay readable. */
body.night { --ink-quiet: var(--ink); }

select {
  font: 500 16px/1 var(--font-ui); color: var(--ink);
  background: transparent; border: 1px solid var(--ink-faint); border-radius: 999px;
  padding: 8px 12px; width: 100%;
}
input[type="range"]:focus-visible, select:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---------- choosing a length: 5 · 10 · 20 · ∞ ----------
   One tap starts the timer and the sound together. */
.begin {
  position: fixed; left: 0; right: 0; z-index: 7;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-inline: 16px;
  transition: opacity 2s ease;
}
.begin.leaving { opacity: 0; }
.lengths { display: flex; align-items: center; gap: 4px; color: var(--ink-quiet); }
.lengths button {
  position: relative;
  min-width: 52px; min-height: 52px; padding: 0 8px;
  border: 0; background: none; cursor: pointer;
  font: 500 23px/1 var(--font-ui); color: var(--ink-quiet);
  font-variant-numeric: lining-nums;
  transition: color .4s;
}
/* Alegreya SC draws ∞ small, so it's enlarged to sit with the numbers. */
.lengths button[data-len="0"] { font-size: 34px; }
.lengths button:hover, .lengths button:focus-visible { color: var(--ink); }
/* The last choice is softly highlighted, with a tiny dot beneath. */
.lengths button[aria-pressed="true"] { color: var(--ink); }
.lengths button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%;
  background: currentColor;
}
.lengths button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 6px; }
.whisper {
  margin: 0;
  font: 500 14px/1.4 var(--font-ui); letter-spacing: 0.04em;
  color: var(--ink-quiet); text-align: center; text-wrap: balance;
}

/* Time left: hidden, fades in for a few seconds when the screen is tapped. */
.time-left {
  position: fixed; left: 0; right: 0; z-index: 7; margin: 0;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  text-align: center; pointer-events: none;
  font: 500 18px/1 var(--font-ui); letter-spacing: 0.05em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  opacity: 0; transition: opacity 1.2s ease;
}
.time-left.show { opacity: 1; }

/* Gentle fade between the two screens. */
.view { transition: opacity 1.2s ease; }
.view.fading { opacity: 0; }

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .thought { transition-duration: 1.5s; }
}

/* ---------- Thai and Japanese ----------
   Thai letters come from Trirong and Japanese from Zen Old Mincho (both in the font lists
   above). Wide letter spacing pulls Thai letters apart, so labels get gentle spacing,
   and a slightly larger size so they read as clearly as the English. */
:lang(th) :is(.card .name, .row > span, .whisper, .time-left, .back, .seg button),
:lang(ja) :is(.card .name, .row > span, .whisper, .time-left, .back, .seg button) {
  letter-spacing: 0.02em;
}
:lang(th) :is(.card .name, .row > span, .back), :lang(ja) :is(.card .name, .row > span, .back) { font-size: 17px; }
:lang(th) .whisper, :lang(ja) .whisper { font-size: 15px; }
:lang(th) .seg button { font-size: 15px; padding-inline: 6px; }
:lang(th) .picker header p, :lang(ja) .picker header p { line-height: 1.6; }