:root { --svara-css: 1; }

/* self-hosted fonts */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

  /* one hour. the room was four palettes with a picker; it is now dark only,
     so these are the values that were :root.h-dark. */
  :root {
    --bg-idle: #2B211A;
    --bg-listening: #2E241C;
    --text-ghost: rgba(214, 190, 160, 0.35);
    --text-dim: rgba(214, 190, 160, 0.55);
    --text-soft: rgba(224, 202, 174, 0.72);
    --accent-warm: rgba(224, 150, 96, 0.55);
    --accent-solid: rgba(224, 150, 96, 0.68);
    --accent-glow: rgba(224, 160, 110, 0.12);
    --hairline: rgba(214, 190, 160, 0.1);
    --hover-wash: rgba(214, 190, 160, 0.06);
    --wave: rgba(214, 175, 135, 0.28);
    --wave-hover: rgba(214, 175, 135, 0.44);
    --track: rgba(214, 190, 160, 0.14);
    --veil: rgba(43, 33, 26, 0.97);
    --danger-soft: rgba(224, 130, 95, 0.7);
  }

  html, body { height: 100%; }

  body {
    background: var(--bg-idle);
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: default;
    transition: background 2s ease;
  }

  body.listening { background: var(--bg-listening); }

  .space {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.8s ease;
  }

  .space.hidden { opacity: 0; pointer-events: none; }

  /* ---------- Thinking space ---------- */
  .thinking-space { z-index: 2; }

  .hint {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-ghost);
    position: absolute;
    bottom: 48px;
    text-align: center;
    padding: 0 24px;
    transition: opacity 1.5s ease;
  }

  .hint.fade { opacity: 0; }

  .orb-container {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-warm);
    position: relative;
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1),
                height 1.2s cubic-bezier(0.4,0,0.2,1),
                background 1.2s ease;
    will-change: transform;
  }

  .orb::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: var(--accent-glow);
    opacity: 0;
    transition: opacity 1.2s ease;
  }

  body.listening .orb {
    width: 26px;
    height: 26px;
    background: var(--accent-solid);
  }

  body.listening .orb::after { opacity: 1; }

  .duration {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 13px;
    color: var(--text-ghost);
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 1s ease;
    white-space: nowrap;
  }

  body.listening .duration { opacity: 1; }

  /* ear line — names the input device */
  .ear-line {
    position: absolute;
    top: 100%;
    margin-top: 64px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 1.5s ease;
    white-space: nowrap;
    pointer-events: none;
  }

  .ear-line.show { opacity: 1; }
  .ear-line.notice { color: var(--text-dim); }

  /* saved whisper */
  .saved-note {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 1.2s ease;
    white-space: nowrap;
    pointer-events: none;
  }

  .saved-note.show { opacity: 1; }

  /* ---------- Library ---------- */
  .library-space {
    z-index: 1;
    padding: 60px 40px 140px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .library-header {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 40px;
  }

  .library-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 28px;
    color: var(--text-soft);
    margin-bottom: 8px;
  }

  .library-count {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
  }

  .entries {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .entry-block {
    border-bottom: 1px solid var(--hairline);
    animation: fadeUp 0.6s ease both;
  }

  .entry {
    display: flex;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    gap: 18px;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .entry-date {
    font-weight: 300;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    min-width: 96px;
  }

  .entry-wave {
    flex: 1;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 1.5px;
    overflow: hidden;
  }

  .entry-wave .bar {
    width: 2px;
    min-height: 2px;
    border-radius: 1px;
    background: var(--wave);
    transition: background 0.3s ease;
    flex-shrink: 0;
  }

  .entry:hover .bar { background: var(--wave-hover); }

  .entry.playing .bar {
    background: var(--accent-warm);
    animation: entryPulse 1.5s ease-in-out infinite alternate;
  }

  @keyframes entryPulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }

  .entry-duration {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    min-width: 40px;
    text-align: right;
  }

  .entry-remove {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0.45;
    transition: opacity 0.4s ease, color 0.3s ease;
    padding: 4px 0 4px 8px;
    white-space: nowrap;
  }

  .entry-take {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0.45;
    transition: opacity 0.4s ease, color 0.3s ease;
    padding: 4px 0 4px 8px;
    white-space: nowrap;
  }

  .entry-take { cursor: pointer; }
  .entry:hover .entry-take { opacity: 1; }
  .entry-take:hover { opacity: 1; color: var(--text-soft); }

  .entry-remove { cursor: pointer; }

  .entry:hover .entry-remove { opacity: 1; }

  .entry-remove:hover { opacity: 1; color: var(--text-soft); }

  .entry-remove.confirm { color: var(--danger-soft); opacity: 1; }

  @media (hover: none) {
    .entry-remove, .entry-take { opacity: 0.55; }
  }

  .empty-note {
    width: 100%;
    max-width: 560px;
    margin: 40px auto 0;
    font-weight: 300;
    font-size: 13px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
  }

  /* the shelf is silent while it works and only speaks when it could not
     finish. a short shelf with nothing said is the room lying by omission. */
  .shelf-note {
    width: 100%;
    max-width: 560px;
    margin: 28px auto 0;
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0.7;
  }

  .random-btn {
    margin: 36px auto 0;
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 24px;
    transition: all 0.5s ease;
  }

  .random-btn:hover {
    color: var(--text-dim);
    background: var(--hover-wash);
  }

  .back-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    pointer-events: none;
  }

  /* ---------- Playback bar ---------- */
  .playback-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 40px 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(transparent, var(--veil) 40%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 5;
  }

  .playback-bar.visible { opacity: 1; pointer-events: all; }

  .playback-date {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-dim);
    min-width: 96px;
    transition: opacity 1.5s ease;
  }

  .playback-date.veiled { opacity: 0; }

  .playback-progress {
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .playback-track {
    width: 100%;
    height: 2px;
    background: var(--track);
    border-radius: 1px;
    overflow: hidden;
  }

  .playback-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-warm);
    border-radius: 1px;
    transition: none;
  }

  .playback-time {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-ghost);
    letter-spacing: 1px;
    min-width: 84px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 600px) {
    .library-space { padding: 48px 24px 140px; }
    .playback-bar { padding: 20px 24px 40px; }
    .entry-date { min-width: 72px; font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01s !important; }
  }

/* ---------- the corner (leave · seal · empty) ---------- */
/* the three acts, folded. one word in the corner; the list opens upward above
   it, so nothing has to share a position and the corner stays quiet until it
   is asked. */
.doings {
  position: fixed;
  bottom: 20px;
  left: 28px;
  max-width: 320px;
  z-index: 6;
}
.doings-word,
.doing-word,
.doing-choice span {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  cursor: pointer;
  transition: color 0.4s ease;
}
.doings-word:hover,
.doing-word:hover,
.doing-choice span:hover { color: var(--text-dim); }

/* what a word does, said before it does it — the same shape for all three, so
   the room explains itself one way rather than three. */
.doing-note {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 1.6;
  color: var(--text-ghost);
  margin-bottom: 10px;
}
.doing-choice { display: flex; gap: 22px; flex-wrap: wrap; }

/* the twelve words. the one place in the room where text is meant to be
   selected and carried away, so it opts back into selection the rest of the
   room turns off, and sits a shade brighter than a ghost line — it is the
   thing being read, not a hint about something else. */
.phrase-words {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  margin-bottom: 14px;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.doing-said { max-width: 300px; }
.doings-word.open { color: var(--text-dim); }
.doings-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

/* ---------- read (the words) ---------- */
.entry-read {
  font-weight: 300;
  font-size: 11px;
  color: var(--text-ghost);
  letter-spacing: 0.5px;
  opacity: 0.45;
  transition: opacity 0.4s ease, color 0.3s ease;
  padding: 4px 0 4px 8px;
  white-space: nowrap;
}
.entry-read { cursor: pointer; }
.entry:hover .entry-read { opacity: 1; }
.entry-read:hover { opacity: 1; color: var(--text-soft); }
@media (hover: none) { .entry-read { opacity: 0.55; } }

.entry-body {
  display: none;
  padding: 0 0 22px;
}
.entry-body.open { display: block; }

.entry-body .words {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  max-width: 480px;
  white-space: pre-wrap;
}

.entry-body .body-line,
.knock-body .body-line {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
}
/* a second line under the first is context, not instruction — it sits back a
   shade so the two do not read as equally loud. used in the knock and in the
   entry body, so it is not scoped to either. */
.body-line.quiet {
  opacity: 0.72;
  margin-top: 6px;
  max-width: 480px;
  line-height: 1.7;
}
.entry-body .doing-choice { margin-top: 12px; }

.whisper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.whisper input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  padding: 6px 2px;
  width: 220px;
  outline: none;
}
.whisper input::placeholder { color: var(--text-ghost); }
.whisper input:focus { border-bottom-color: var(--text-ghost); }
.whisper button {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.3s ease;
}
.whisper button:hover { color: var(--text-dim); }

/* ---------- the reading room ---------- */
.reading-room {
  position: fixed;
  inset: 0;
  background: var(--bg-idle);
  z-index: 20;
  overflow-y: auto;
  padding: 72px 32px 96px;
  animation: roomFade 0.5s ease both;
  cursor: default;
}
@keyframes roomFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reading-room .rr-column {
  max-width: 560px;
  margin: 0 auto;
}
.reading-room .rr-date {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-ghost);
  margin-bottom: 28px;
}
.reading-room .rr-words {
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}
.reading-room .rr-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  pointer-events: none;
}

.entry-body .words {
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- playback pause/quit ---------- */
.playback-quit {
  font-weight: 300;
  font-size: 15px;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 4px 2px 4px 10px;
  transition: color 0.3s ease;
  line-height: 1;
}
.playback-quit:hover { color: var(--text-dim); }

.entry.playing.paused .bar {
  animation: none;
  opacity: 0.7;
}

/* ---------- the knock (standalone sign-in) ---------- */
.knock {
  width: 100%;
  max-width: 560px;
  margin: 44px auto 0;
}
.knock-line {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  cursor: pointer;
  transition: color 0.4s ease;
  display: block;
  width: fit-content;
}
.knock-line:hover { color: var(--text-dim); }
.knock-line + .knock-line { margin-top: 10px; }
.knock-body { margin-top: 10px; }
/* the two ways into a sealed room, side by side. the phrase used to be the
   only offer here; now it sits beside the one that takes a single tap. */
#sealed .doing-choice { margin-top: 4px; }
#sealed .body-line + .doing-choice { margin-top: 10px; }

/* ---------- strata (folded time) ---------- */
.stratum {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 18px 0 18px 2px;
  transition: color 0.4s ease;
  user-select: none;
  -webkit-user-select: none;
}
.stratum:hover { color: var(--text-dim); }
.stratum.open { color: var(--text-dim); }

/* ---------- the wipe ---------- */


/* ---------- custody ember ---------- */
.entry-keep-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-warm);
  margin: 0 8px;
  flex-shrink: 0;
  pointer-events: none;
}
/* in flight */
.entry-keep-dot.syncing {
  animation: emberPulse 1.6s ease-in-out infinite;
}
/* in flight, and long enough that the person might wonder. the same breath,
   drawn out — nothing is wrong yet, but this is no longer quick. */
.entry-keep-dot.syncing.slow {
  animation-duration: 4s;
}
/* queued behind others — nothing is wrong, it simply has not had its turn */
.entry-keep-dot.waiting {
  opacity: 0.3;
}
/* tried, did not land. the one state worth noticing, so it is the one that
   looks different rather than merely dimmer. */
.entry-keep-dot.stranded {
  background: var(--danger-soft);
  opacity: 0.75;
}
@keyframes emberPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.5); opacity: 0.9; }
}

/* ---------- a page, not a room ----------
   the room is a fixed surface that never scrolls and never lets text be
   selected. a page of plain statements needs the opposite of both, so it opts
   out rather than the room loosening its own rules. */
body.page {
  overflow: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
}

.page-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  color: var(--text-dim);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.3px;
}

.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: var(--text-soft);
  margin-bottom: 18px;
}

.page-lead { color: var(--text-ghost); margin-bottom: 40px; }

.page-head {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: lowercase;
  color: var(--accent-warm);
  margin-top: 34px;
  margin-bottom: 8px;
}

.page-body p + p { margin-top: 12px; }
.page-body strong { font-weight: 400; color: var(--text-soft); }

/* the room's own words, quoted inside a sentence about them */
.page-word { color: var(--text-soft); }

.page-foot { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.page-body a { color: var(--text-ghost); text-decoration: none; transition: color 0.4s ease; }
.page-body a:hover { color: var(--text-dim); }

/* the one way out of the room that is not an act: a page saying what is kept.
   it mirrors 'the room' in the opposite corner — same height, same weight —
   so the two things you can leave by sit at either end of the same line.
   quieter than a ghost word, because nobody should have to read it. */
.keeps-link {
  position: fixed;
  bottom: 20px;
  right: 28px;
  z-index: 6;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  text-decoration: none;
  opacity: 0.7;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.keeps-link:hover { color: var(--text-dim); opacity: 1; }

/* ---------- finding ----------
   the count is the handle: '6 entries · find'. the input takes the whole
   line's place rather than appearing under it, so the header never grows a
   row, and the result count sits beside the input where it can be watched
   narrowing rather than read afterwards. */
.library-find {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.find-word {
  color: var(--text-ghost);
  cursor: pointer;
  transition: color 0.4s ease;
}
.find-word:hover { color: var(--text-soft); }

.find-count {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  white-space: nowrap;
}

/* the scope of a search, said when it opens and only when it is true */
.find-note {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-ghost);
  opacity: 0.72;
  margin-top: 8px;
}

.find-input {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  padding: 4px 2px;
  width: 240px;
  max-width: 100%;
  outline: none;
}
.find-input::placeholder { color: var(--text-ghost); }
.find-input:focus { border-bottom-color: var(--text-ghost); }

/* what matched, under the row it matched. a shade below a ghost line, because
   it is evidence rather than something the room is saying. */
.entry-hit {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--text-ghost);
  opacity: 0.8;
  max-width: 480px;
  margin: -6px 0 4px;
  padding-bottom: 6px;
}

/* ---------- the first visit ----------
   the room has no title and does not explain itself. but a person arriving at
   a dark screen with an orb on it has been told how and never what, so it says
   what it is exactly once — to someone who has nothing — and never again after
   the first stream exists. absolutely positioned so its arrival and departure
   never move the orb. */
.first-line {
  position: absolute;
  bottom: calc(50% + 96px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.6px;
  color: var(--text-ghost);
  white-space: nowrap;
  pointer-events: none;
  animation: firstLineIn 2.4s ease-out both;
  transition: opacity 1.2s ease;
}
.first-line.fade { opacity: 0; }

@keyframes firstLineIn {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------- what is this ----------
   a word, not a symbol. every affordance in the room is language — enter,
   take, remove, find, the room — and a chevron would be the only glyph in it.
   sits in the corner the room otherwise leaves empty, quiet until asked. */
.what {
  position: fixed;
  top: 22px;
  right: 26px;
  max-width: 300px;
  z-index: 6;
  text-align: right;
}

.what-word {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  opacity: 0.6;
  cursor: pointer;
  transition: color 0.4s ease, opacity 0.4s ease;
  display: inline-block;
}
.what-word:hover { color: var(--text-dim); opacity: 1; }

.what-note {
  margin-top: 12px;
  text-align: left;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  letter-spacing: 0.2px;
  color: var(--text-ghost);
  animation: whatIn 0.5s ease-out both;
}
.what-note p + p { margin-top: 10px; }
.what-note a {
  color: var(--text-ghost);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.4s ease;
}
.what-note a:hover { color: var(--text-dim); }

@keyframes whatIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* the room is listening — nothing else should be speaking. and the library is
   a different space: the corner word belongs to the room you speak into. */
body.listening .what { opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
/* it leaves with the first line, at the first stream */
.what.fade { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
/* .space.hidden is opacity + pointer-events, and opacity applies to the whole
   subtree — so the corner fades with the thinking space on its own. this only
   makes it unreachable rather than merely invisible. */
.thinking-space.hidden .what { display: none; }

/* ---------- after a stream ----------
   the moment between speaking and keeping. doing nothing keeps it — the
   room should not ask you to appraise your own thinking, least of all in the
   seconds right after saying it. only letting go takes a hand. */
.after {
  position: absolute;
  bottom: 48px;
  display: flex;
  gap: 26px;
  animation: afterIn 0.6s ease-out both;
}

.after-word {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  cursor: pointer;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.after-word:hover { color: var(--text-dim); }
.after-word.going { color: var(--danger-soft); }

@keyframes afterIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- how the room looks ----------
   two words in the corners, tapped to cycle. not a panel and not a settings
   screen: the palette is the room's colour and the form is what happens
   around the orb while it listens. generous invisible hit area, because a
   near-miss on a small word used to land on the room and start a recording. */
.pick {
  position: fixed;
  top: 22px;
  z-index: 6;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--text-ghost);
  opacity: 0.55;
  cursor: pointer;
  padding: 16px 20px;
  margin: -16px -20px;
  transition: color 0.4s ease, opacity 0.4s ease;
}
.pick:hover { color: var(--text-dim); opacity: 1; }
.pick-pal { left: 26px; }
.pick-form { right: 26px; }
/* while the room is listening it should be the only thing speaking */
body.listening .pick { opacity: 0; pointer-events: none; }
.thinking-space.hidden .pick { display: none !important; }

/* ---------- the forms ----------
   each sits behind the orb and only draws while listening. the orb itself
   fades out so the form has the centre to itself. */
.forms { position: absolute; inset: 0; pointer-events: none; }
.form-layer { position: absolute; inset: 0; display: none; }
.form-layer.on { display: block; }
body.listening .orb { opacity: 0; transition: opacity 0.9s ease; }

#formWash {
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 62%);
  opacity: 0;
}

#formHorizon .h-line,
#formHorizon .h-halo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  will-change: transform, opacity;
}
#formHorizon .h-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-solid), transparent);
}
#formHorizon .h-halo {
  height: 3px;
  background: linear-gradient(to right, transparent, var(--accent-glow), transparent);
  filter: blur(6px);
}

#formDust canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#formAperture svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
#formAperture circle { stroke: var(--accent-solid); }

#formTide .t-water {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, var(--accent-glow), transparent);
  transform-origin: bottom center;
  will-change: transform;
}
#formTide .t-surface {
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-solid), transparent);
  will-change: bottom;
}