:root{--cloud-ink-near:#f7f7f3;--cloud-ink-far:#151513}
html[data-theme='day']{--cloud-ink-near:#151713;--cloud-ink-far:#efeee7}
.word,.word.selected,
html[data-theme='day'] .word,
html[data-theme='day'] .word.selected{
  color:color-mix(in srgb,var(--cloud-ink-near) var(--depth-tone,50%),var(--cloud-ink-far));
  transition:color .16s;
}

/* A small waveform fits within the label padding and does not change its hitbox. */
body[data-soundscape-state='playing'][data-sound-muted='false'][data-soundscape-room='1'] .word[data-sound-track] {
  --sound-track-ink: color-mix(in srgb, var(--word-focus, var(--cloud-ink-near)) 88%, currentColor);
}
body[data-soundscape-state='playing'][data-sound-muted='false'][data-soundscape-room='1'] .word[data-sound-track] > span {
  color: var(--sound-track-ink);
  filter: none !important;
  text-shadow: 0 1px 4px var(--bg), 0 0 10px color-mix(in srgb, var(--sound-track-ink) 32%, transparent);
}
body[data-soundscape-state='playing'][data-sound-muted='false'][data-soundscape-room='1'] .word[data-sound-track]::after {
  content: '';
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: 1px;
  width: 14px;
  height: 7px;
  color: var(--sound-track-ink);
  background:
    linear-gradient(currentColor, currentColor) left center / 2px 60% no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 2px 40% no-repeat;
  pointer-events: none;
}

/* The title remains a context note on a phone, leaving the volume its own field. */
@media(max-width:650px){
  .title-block{top:120px;left:24px;right:24px;max-width:340px}
  .title-block>.eyebrow{font-size:7px;line-height:1.5;letter-spacing:1.6px}
  .title-block h1{font-size:38px;line-height:1.05;letter-spacing:-2px;margin:7px 0 8px}
  .title-block .intro{font-size:clamp(9px,2.65vw,10.5px);line-height:1.45}
  html[data-writing='hand'] .title-block>.eyebrow{font-size:9px;line-height:1.4;letter-spacing:.7px}
  html[data-writing='hand'] .title-block h1{font-size:42px;line-height:1.05;letter-spacing:-.8px;margin:7px 0 8px}
  html[data-writing='hand'] .title-block .intro{font-size:clamp(10px,2.95vw,11.5px);line-height:1.45}
}
@media(max-width:650px) and (max-height:699px){
  .title-block{top:112px}
  .title-block h1{font-size:34px;margin:5px 0 7px}
  .title-block .intro{font-size:9px;line-height:1.4}
  html[data-writing='hand'] .title-block h1{font-size:38px;margin:5px 0 7px}
  html[data-writing='hand'] .title-block .intro{font-size:10px;line-height:1.4}
}
@media(max-height:520px) and (min-aspect-ratio:5/4){
  .title-block{left:28px;top:96px;max-width:228px}
  .title-block>.eyebrow{font-size:7px;line-height:1.4;letter-spacing:1.3px}
  .title-block h1{font-size:34px;letter-spacing:-1.8px;line-height:1.05;margin:7px 0 9px}
  .title-block .intro{font-size:9.5px;line-height:1.5}
  html[data-writing='hand'] .title-block>.eyebrow{font-size:9px;line-height:1.4;letter-spacing:.5px}
  html[data-writing='hand'] .title-block h1{font-size:39px;line-height:1.05;letter-spacing:-.6px;margin:7px 0 9px}
  html[data-writing='hand'] .title-block .intro{font-size:11px;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){.word{transition:none}}
@media(max-width:360px){
  .main-nav{gap:12px}
  .main-nav button>span{display:none}
  .footer-actions{gap:12px}
  .footer-actions>button:last-child{white-space:nowrap}
  .footer-actions>button:last-child>span{display:none}
}