/* thinkspace - landing experience styling (v3)

   VT323 is used everywhere user-visible - headline, ENTER, subtitles.
   Inter is reserved for fine print (NASA credit, audio-experience note),
   so those small notes feel different from the body of the experience.
   The visual hierarchy between headline and ENTER is produced via
   size, letter-spacing and weight-of-shadow, never via mixing fonts.
*/

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

:root {
  --bg:           #000;
  --ink:          #e6e1d3;             /* light grey-cream */
  --ink-bright:   #f4efde;
  --ink-soft:     rgba(230, 225, 211, 0.78);
  --ink-quiet:    rgba(230, 225, 211, 0.55);
  --ink-dim:      rgba(230, 225, 211, 0.42);
  --warm-glow:    rgba(255, 224, 168, 0.92);

  /* Single retro-game font for everything user-visible. */
  --font-main:    'VT323', 'Courier New', ui-monospace, monospace;
  --font-fine:    'Inter', 'Helvetica Neue', 'Arial', system-ui, sans-serif;
  --font-fallback:'Cormorant Garamond', 'Georgia', serif;

  /* Position of the visible black hole in the landing still image.
     The image is 2:1 displayed object-fit:cover; on a 16:9 viewport
     the centre stays near 50% horizontally and the hole sits just
     below mid. */
  --hole-x: 50%;
  --hole-y: 59%;
  --hole-size:   96px;          /* invisible click hit-area diameter */
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ─── Preface (typewriter gate before the homepage) ─────────────────── */
/* Black full-screen overlay shown on first visit only. The three
   sentences appear one at a time, each typing out letter by letter
   with a calming typewriter cadence. Continue advances to the homepage.
   Defaults to OPAQUE so the homepage never flashes underneath before
   the preface covers it; we fade OUT on dismissal. */
.preface {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;       /* above the landing layer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms ease;
}
/* Suppressed: when the preface has been seen before, the inline
   `display:none` set by JS hides it instantly with no fade. */
.preface.dismissed {
  opacity: 0;
  pointer-events: none;
}
.preface-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 720px;
  text-align: center;
}
.preface-text {
  margin: 0;
  font-family: var(--font-main, 'VT323', monospace);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: rgba(244, 239, 222, 0.92);
  text-shadow:
    0 0 12px rgba(244, 239, 222, 0.30),
    0 0 28px rgba(255, 220, 180, 0.12);
}
.preface-cursor {
  display: inline-block;
  margin-left: 2px;
  color: rgba(244, 239, 222, 0.78);
  animation: prefaceCursorBlink 1100ms steps(2, end) infinite;
  opacity: 1;
  transition: opacity 600ms ease;
}
/* Hidden once the final sentence has finished typing - no lingering cursor
   after "rush here." The blink animation must be cancelled too, otherwise it
   keeps overriding opacity and the cursor stays visible. */
.preface-cursor.hidden { opacity: 0 !important; animation: none !important; }

/* The studio signature: a stationary 3D heart-shaped Rubik's cube ABOVE a
   single signature line "a Cinematiq work", together inside one tactile 3D
   No container - the cube floats on the black with the word "click" beneath it.
   The mark of the studio. */
.preface-sig {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  cursor: var(--cursor-thinkspace, pointer);
  opacity: 0;
  transition: opacity 1400ms ease, transform 200ms cubic-bezier(0.3, 0.7, 0.2, 1);
  z-index: 2;
}
.preface-sig.in { opacity: 1; }
/* The press: just a soft sink, no panel. */
.preface-sig.pressed,
.preface-sig.in:active {
  transform: translate(-50%, calc(-50% + 3px)) scale(0.97);
}
.preface-sig.dismissed { opacity: 0; transform: translate(-50%, -50%) scale(1.25); pointer-events: none; transition: opacity 900ms ease, transform 900ms ease; }
/* The implied Rubik's cube - three visible faces, each a 3x3 grid of tiles
   whose colours quietly blink through so it reads as alive. Pure CSS 3D
   (real faces + perspective), the studio's mark restored over the heart. */
.ps-cube-wrap {
  perspective: 620px;
  width: 96px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 2px 12px rgba(255, 226, 180, 0.22));
}
.pc-spin {
  position: relative;
  width: 64px; height: 64px;
  transform-style: preserve-3d;
  animation: pcSpin 19s linear infinite;
}
@keyframes pcSpin {
  from { transform: rotateX(-26deg) rotateY(-42deg); }
  to   { transform: rotateX(-26deg) rotateY(318deg); }
}
.pc-face {
  position: absolute;
  width: 64px; height: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px; padding: 4px;
  box-sizing: border-box;
  background: rgba(10, 8, 4, 0.22);
  border-radius: 7px;
  /* every visible face shows its cells (no all-black faces); rear faces hide
     so the spinning cube reads solid, not see-through */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pc-front  { transform: translateZ(32px); }
.pc-right  { transform: rotateY(90deg) translateZ(32px); }
.pc-top    { transform: rotateX(90deg) translateZ(32px); }
.pc-back   { transform: rotateY(180deg) translateZ(32px); }
.pc-left   { transform: rotateY(-90deg) translateZ(32px); }
.pc-bottom { transform: rotateX(-90deg) translateZ(32px); }
.pc-cell {
  border-radius: 3px;
  /* Every cell always shows its colour (so no face ever reads as black); the
     blink just pulses it brighter for life. The background transition is what
     animates the SOLVE: when the password is accepted, every cell glides to
     its face's single colour. */
  background: var(--c, #e7c9a0);
  filter: brightness(0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background 900ms ease, filter 900ms ease, box-shadow 900ms ease;
  animation-name: pcBlink;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
/* The resolved cube: spin rests, every face homogeneous, a quiet glow. */
.pc-spin.solved { animation-play-state: paused; }
.pc-spin.solved .pc-cell {
  filter: brightness(1.12);
  box-shadow: 0 0 9px var(--c, #e7c9a0), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
/* The password gate beneath the cube. */
.ps-pass {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 700ms ease;
}
.ps-pass.in { opacity: 1; }
.ps-pass.shake { animation: psShake 420ms ease; }
@keyframes psShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.ps-pass-input {
  background: transparent; border: none;
  border-bottom: 1px solid rgba(244, 239, 222, 0.35);
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 21px; letter-spacing: 0.42em; text-align: center;
  color: rgba(244, 239, 222, 0.92); caret-color: rgba(244, 239, 222, 0.8);
  width: 178px; padding: 6px 4px; outline: none;
}
.ps-pass-input::placeholder { color: rgba(244, 239, 222, 0.26); letter-spacing: 0.24em; }
.ps-pass-input:focus { border-bottom-color: rgba(255, 232, 190, 0.7); }
.ps-pass.accepted .ps-pass-input { opacity: 0.35; transition: opacity 900ms ease; }
.ps-pass-err {
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase;
  color: rgba(216, 74, 58, 0.9); min-height: 18px;
}
@keyframes pcBlink {
  0%, 100% { filter: brightness(0.66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
  20%      { filter: brightness(1.35); box-shadow: 0 0 12px var(--c, #e7c9a0), inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
  45%      { filter: brightness(0.66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
}
/* "click" - the single quiet cue beneath the cube, in the intro typewriter
   font. A soft breath invites the press; the typing begins right after. */
.ps-text {
  font-family: var(--font-main, 'VT323', monospace);
  font-style: normal;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(244, 239, 222, 0.46);
  white-space: nowrap;
  line-height: 1;
  animation: prefaceClickBreath 3000ms ease-in-out infinite;
}
/* The blinking underscore. These keyframes were accidentally deleted in
   123f2a0 while four elements (tabs, ENTER, continue) still referenced them,
   which silently killed every blinking cursor in the product. Never remove. */
@keyframes prefaceCursorBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes prefaceClickBreath {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.85; }
}
/* Mobile: the cube + one line; the gate stays closed. */
.ps-text-mobile {
  white-space: normal; text-align: center; max-width: 78vw;
  line-height: 1.7; letter-spacing: 0.14em; animation: none;
  opacity: 0.7;
}
/* The build's watermark, beneath "click": quiet, red, lowercase. */
.ps-confidential {
  font-family: var(--font-main, 'VT323', monospace);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.26em;
  text-transform: lowercase;
  color: rgba(216, 74, 58, 0.85);
  white-space: nowrap;
  line-height: 1;
  margin-top: 2px;
}
.preface-continue {
  margin: 0;
  padding: 10px 22px 11px;
  background: transparent;
  border: 1px solid rgba(244, 239, 222, 0.40);
  border-radius: 2px;
  color: rgba(244, 239, 222, 0.88);
  font-family: var(--font-main, 'VT323', monospace);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: var(--cursor-thinkspace, pointer);
  opacity: 0;
  transition: opacity 1100ms ease, background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.preface-continue.visible { opacity: 1; }
.preface-continue:hover,
.preface-continue:focus-visible {
  background: rgba(244, 239, 222, 0.06);
  border-color: rgba(244, 239, 222, 0.80);
  color: rgba(255, 250, 232, 1);
  outline: none;
}
.preface-continue .preface-underscore {
  display: inline-block;
  margin-left: 4px;
  animation: prefaceCursorBlink 1100ms steps(2, end) infinite;
}

/* Tap-to-begin invitation - required to warm the audio context before
   the typewriter starts (Web Audio autoplay policy). Disappears on tap. */
.preface-begin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 12px 26px 13px;
  background: transparent;
  border: 1px solid rgba(244, 239, 222, 0.22);
  border-radius: 2px;
  color: rgba(244, 239, 222, 0.78);
  font-family: var(--font-main, 'VT323', monospace);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: var(--cursor-thinkspace, pointer);
  animation: prefaceBeginBreathe 2600ms ease-in-out infinite;
  transition: opacity 700ms ease;
  z-index: 2;
}
.preface-begin:hover,
.preface-begin:focus-visible {
  background: rgba(244, 239, 222, 0.05);
  border-color: rgba(244, 239, 222, 0.55);
  color: rgba(255, 250, 232, 1);
  outline: none;
}
.preface-begin.dismissed { opacity: 0; pointer-events: none; }
@keyframes prefaceBeginBreathe {
  0%, 100% { opacity: 0.68; }
  50%      { opacity: 1.0;  }
}

/* ─── Cursors ─────────────────────────────────────────────────────── */
/* THINKSPACE cursor - one unified cursor for the whole product.
   Reads as a small luminous point of light with a soft halo: precise
   enough to be the drawing/writing cursor inside the cosmos, while
   visually coherent with the cosmic-paper aesthetic.

   Structure:
     · bright cream centre (1.6 px radius) - the "ink point"
     · middle ring (6 px) - the present-moment hairline
     · outer halo (10 px) - the cosmic glow

   Hotspot is dead-centre (14, 14) so click and stroke positions land
   exactly on the bright point.

   The same cursor is used on:
     · the landing chrome (ENTER THE ABYSS, the hole hit area)
     · the cosmos default
     · the in-cosmos drawing surface
   The mallet cursor below stays separate - it only appears when
   hovering a singing bowl, where it carries genuine semantic meaning. */
:root {
  /* Light-wand cursor: a slender wand trailing down-right from a glowing
     four-point star of light. Hotspot at the star (the tip of the light). */
  /* base64-encoded so the data URI never fails to parse (the older ;utf8, form
     with literal spaces/angle-brackets was rejected by Safari/Firefox, which
     dropped the cursor to the OS arrow fallback - the 'flipping' bug). */
  --cursor-thinkspace: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48bGluZSB4MT0nOScgeTE9JzknIHgyPScyNScgeTI9JzI1JyBzdHJva2U9JyNEOEM5QTAnIHN0cm9rZS13aWR0aD0nMS4zJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIG9wYWNpdHk9JzAuNjUnLz48Y2lyY2xlIGN4PSc5JyBjeT0nOScgcj0nOScgZmlsbD0nI0ZGRTlCMCcgb3BhY2l0eT0nMC4xMCcvPjxjaXJjbGUgY3g9JzknIGN5PSc5JyByPSc2JyBmaWxsPScjRkZGMUM4JyBvcGFjaXR5PScwLjE3Jy8+PGNpcmNsZSBjeD0nOScgY3k9JzknIHI9JzMuNCcgZmlsbD0nI0ZGRjdFNicgb3BhY2l0eT0nMC4zMCcvPjxwYXRoIGQ9J005IDEuNSBMMTAuMyA3LjcgTDE2LjUgOSBMMTAuMyAxMC4zIEw5IDE2LjUgTDcuNyAxMC4zIEwxLjUgOSBMNy43IDcuNyBaJyBmaWxsPScjRkZGN0U2Jy8+PGNpcmNsZSBjeD0nOScgY3k9JzknIHI9JzEuMicgZmlsbD0nI0ZGRkZGRicvPjwvc3ZnPg==") 9 9, pointer;

  --cursor-mallet: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyOCcgaGVpZ2h0PScyOCcgdmlld0JveD0nMCAwIDI4IDI4Jz48Y2lyY2xlIGN4PSc4JyBjeT0nOCcgcj0nNC41JyBmaWxsPScjRjhFNkJEJyBzdHJva2U9JyNBODc3NDInIHN0cm9rZS13aWR0aD0nMS4yJy8+PGxpbmUgeDE9JzEwLjUnIHkxPScxMC41JyB4Mj0nMjInIHkyPScyMicgc3Ryb2tlPScjQTg3NzQyJyBzdHJva2Utd2lkdGg9JzIuMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+") 8 8, pointer;

  /* Back-compat aliases so existing variable references keep resolving
     while pointing at the new unified cursor. Phase B will remove these
     alongside the call sites. */
  --cursor-solar-cross: var(--cursor-thinkspace);
  --cursor-glyph:       var(--cursor-thinkspace);
  --cursor-paint:       var(--cursor-thinkspace);
}

/* The light-wand cursor must ALWAYS be the cursor, everywhere in thinkspace -
   it used to revert to the OS arrow/hand on any element that set its own
   cursor (buttons, canvases, dynamically-built overlays) or that fell through
   to `auto`. We force it universally with !important and carve out only two
   exceptions: text fields keep a caret, and the singing-bowl mallet overrides
   on bowl hover (higher specificity + !important, so it still wins). */
*, *::before, *::after, *:disabled, *[disabled] {
  cursor: var(--cursor-thinkspace) !important;
}
/* explicit structural targets - the WebGL canvas and the scroll roots are where
   the OS arrow most often leaks back in; force the wand on them directly. And
   suppress text-selection everywhere except real inputs, because a drag that
   starts a selection is what flips the cursor to the arrow/I-beam mid-experience
   (the 'reverts when I click elsewhere' bug). DISABLED elements (the think input
   while the AI replies) also force a native cursor unless covered explicitly. */
html, body, #cosmos, #cosmos-canvas, canvas, #landing, .landing-root, .cosmos {
  cursor: var(--cursor-thinkspace) !important;
}
button:disabled, input:disabled, textarea:disabled { cursor: var(--cursor-thinkspace) !important; }
body, #cosmos, .cosmos, #landing, .landing-root {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
input, textarea, [contenteditable="true"] { cursor: text !important; -webkit-user-select: text; user-select: text; }
/* the letter overlay must keep the cosmic cursor stable over the parchment +
   selectable text (it was reverting to the default arrow). */
.about-overlay, .about-overlay *, .about-frame, .about-frame * { cursor: var(--cursor-thinkspace) !important; user-select: none; }

/* Mallet only appears over an active singing bowl (cosmos.js toggles
   .is-bowl-hover on cosmosEl when the raycaster detects a bowl). */
.cosmos.is-bowl-hover,
.cosmos.is-bowl-hover *,
.cosmos.is-bowl-hover canvas { cursor: var(--cursor-mallet) !important; }

html, body {
  /* Nothing may widen the layout viewport: a single nowrap headline used to
     create ~100px of horizontal overflow on narrow windows, which shifted
     every centred fixed element off-centre. */
  overflow-x: clip;
}
body {
  position: relative;
  cursor: var(--cursor-thinkspace);   /* unified cosmic cursor */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The minimise mark: a quiet icon pinned to the input box's top-right. */
.ai-min-icon {
  position: absolute; top: -26px; right: 2px;
  width: 24px; height: 22px; line-height: 20px;
  background: rgba(8, 10, 18, 0.55); border: 1px solid rgba(244, 239, 222, 0.22);
  border-radius: 5px; color: rgba(244, 239, 222, 0.65);
  font-size: 15px; text-align: center; padding: 0;
  cursor: var(--cursor-thinkspace, pointer);
  transition: color 0.2s, border-color 0.2s;
}
.ai-min-icon:hover { color: rgba(255, 250, 232, 0.95); border-color: rgba(255, 232, 190, 0.6); }

/* ABOUT: the creator's letter. One quiet word on the landing; an elegant
   double-hairline frame with corner marks, parchment-dark, Cormorant body. */
.about-btn {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%); z-index: 6;
  background: none; border: none;
  font-family: var(--font-main, 'VT323', monospace); font-size: 21px;
  letter-spacing: 0.22em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.58); cursor: var(--cursor-thinkspace, pointer);
  transition: color 250ms ease;
}
.about-btn:hover { color: rgba(255, 240, 210, 0.95); }
.about-btn.dismissed { opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
/* The same letter, reachable from the cosmos home (top-right, closable). */
.about-btn-cosmos {
  position: fixed; top: 22px; right: 64px; z-index: 12;
  background: none; border: none;
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px;
  letter-spacing: 0.18em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.4); cursor: var(--cursor-thinkspace, pointer);
  opacity: 0; pointer-events: none; transition: opacity 600ms ease, color 250ms ease;
}
.about-btn-cosmos.on { opacity: 1; pointer-events: auto; }
.about-btn-cosmos:hover { color: rgba(255, 240, 210, 0.95); }
.about-overlay {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(3, 4, 12, 0.9);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  align-items: flex-start; justify-content: center; padding: 5vh 4vw;
  opacity: 0; transition: opacity 700ms ease; overflow-y: auto;
}
.about-overlay.show { display: flex; opacity: 1; }
.about-card { max-width: 680px; width: 100%; }
/* the inner-reading-report aesthetic: aged cream paper, soft inner glow */
.about-frame {
  position: relative; padding: 60px 64px 52px;
  background: linear-gradient(160deg, #f7f2e8 0%, #f0e9d8 55%, #ede4cf 100%);
  border: 1px solid rgba(127, 116, 96, 0.3); border-radius: 5px;
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: rgba(45, 33, 16, 0.9);
}
/* a big, visible gilt double-rule border drawn inside the paper, with an
   inner hairline, so the letter reads as a framed, illuminated page. */
.about-frame::before {
  content: ""; position: absolute; inset: 16px; pointer-events: none; border-radius: 2px;
  border: 2.5px solid rgba(150, 106, 38, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(150, 106, 38, 0.18),
    inset 0 0 0 5px rgba(247, 242, 232, 0.0),
    inset 0 0 0 6.5px rgba(150, 106, 38, 0.32);
}
/* illuminated corner flourishes anchoring the gilt frame. */
.about-frame::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(184,134,11,0.5) 0 6px, transparent 7px) top left / 26px 26px no-repeat,
    radial-gradient(circle at 100% 0, rgba(184,134,11,0.5) 0 6px, transparent 7px) top right / 26px 26px no-repeat,
    radial-gradient(circle at 0 100%, rgba(184,134,11,0.5) 0 6px, transparent 7px) bottom left / 26px 26px no-repeat,
    radial-gradient(circle at 100% 100%, rgba(184,134,11,0.5) 0 6px, transparent 7px) bottom right / 26px 26px no-repeat;
}
/* a quiet 'share' pill beside close (top-left), fixed so it persists on scroll. */
.about-share {
  display: none; position: fixed; top: 20px; right: 116px; z-index: 96;
  background: rgba(10, 10, 18, 0.55); border: 1px solid rgba(244, 239, 222, 0.4);
  border-radius: 999px; padding: 8px 20px;
  font-family: var(--font-main, 'VT323', monospace); font-size: 15px;
  letter-spacing: 0.18em; text-transform: lowercase; color: rgba(244, 239, 222, 0.9);
  cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s; backdrop-filter: blur(4px);
}
.about-share:hover { background: rgba(40, 30, 18, 0.7); border-color: rgba(255, 236, 198, 0.7); }
/* slightly heavier body for readability (founder note). */
.about-body { position: relative; z-index: 1; font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: normal; font-size: 18px; font-weight: 400; line-height: 1.8; color: rgba(74, 52, 26, 0.92); }
.about-body p { margin: 0 0 16px; font-style: normal; }
.about-salutation { font-style: italic; font-size: 18.5px; }
.about-h { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.3; color: rgba(86, 58, 26, 0.94); margin: 26px 0 12px; }
.about-lead { font-family: 'Playfair Display', Georgia, serif; font-style: normal; font-size: 21px; line-height: 1.45; color: rgba(86, 58, 26, 0.94); clear: none; }
.about-lead em { font-style: italic; }
.about-body em { font-style: italic; }
.about-body strong { font-weight: 500; color: rgba(70, 46, 20, 0.95); }
.about-hl { color: rgba(120, 70, 20, 0.95); font-weight: 600; }
.about-underline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* a soft highlighter mark, in the letter's ink palette */
.about-mark { background: linear-gradient(180deg, transparent 54%, rgba(196, 150, 60, 0.32) 54%); padding: 0 2px; }
.about-strike { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.55; }
.about-values { margin: 0 0 16px; padding-left: 26px; }
.about-values li { margin: 0 0 14px; padding-left: 4px; }
.about-magic { font-weight: 700; letter-spacing: 0.06em; color: rgba(120, 70, 20, 0.95); animation: aboutMagic 3.5s ease-in-out infinite; }
@keyframes aboutMagic { 0%,100% { text-shadow: 0 0 0 rgba(184,134,11,0); } 50% { text-shadow: 0 0 9px rgba(184,134,11,0.6); } }
.about-sign { margin-top: 24px; font-family: 'Caveat', cursive; font-size: 28px; line-height: 1.25; color: rgba(70, 50, 24, 0.92); }
/* clear, legible close affordance (#9) - a labelled pill, not a tiny glyph. */
/* persistent + clear of the frame: fixed to the viewport's top-right, in the
   dark margin, so it stays put while you scroll the letter. */
.about-close {
  display: none; position: fixed; top: 20px; right: 24px; z-index: 96;
  background: rgba(10, 10, 18, 0.55); border: 1px solid rgba(244, 239, 222, 0.4);
  border-radius: 999px; padding: 8px 20px;
  font-family: var(--font-main, 'VT323', monospace); font-size: 15px;
  letter-spacing: 0.18em; text-transform: lowercase; color: rgba(244, 239, 222, 0.9);
  cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(4px);
}
.about-close:hover { background: rgba(40, 30, 18, 0.7); border-color: rgba(255, 236, 198, 0.7); color: rgba(255, 248, 230, 1); }
.about-close.show, .about-share.show { display: inline-flex; align-items: center; }

/* ─── Landing layer ───────────────────────────────────────────────── */

.landing {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10;
  opacity: 1;
  /* Matched to silhouette DISPERSE_MS (4200ms): the black landing ground
     dissolves to reveal the cosmos at the same pace the particles spiral
     away, so the full dissolve is seen flowing into the universe. */
  transition: opacity 4200ms ease;
}
.landing.fading-out {
  opacity: 0;
  pointer-events: none;
}

/* Stage 1: still image */
.landing-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  background: #000;
  opacity: 1;
  transition: opacity 1600ms ease;
  pointer-events: none;
}
.landing-still.dismissed {
  opacity: 0;
}

/* Stage 2: video that takes over on click. */
.landing-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  background: #000;
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
}
.landing-video.playing {
  opacity: 1;
}
/* Video fades to black ~10s before the silhouette dissolves, so the
   final beats of the monologue land on a quiet black ground. */
.landing-video.fading-out {
  opacity: 0;
  transition: opacity 6500ms ease;
}

/* ─── Landing embers (subtle motion around the disk perimeter) ────── */

.landing-embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 900ms ease;
  z-index: 2;
  mix-blend-mode: screen;
}
.landing-embers.dismissed {
  opacity: 0;
}

/* ─── Hero copy - Inter wordmark with sheen on THINKSPACE ──────────── */
/* This is the loudest mark on the page.  Same scale as the previous
   retro headline (clamp 22–38 px) but in Inter so it reads as a brand,
   not as in-game text.  Bold enough to be unmistakably readable; the
   word "THINKSPACE" carries a slow drifting sheen across its glyphs. */

/* ─── thinkspace logo lockup - wordmark + byline as one mark ─────────── */
.landing-logo {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;                       /* #3: tighter so wordmark + byline read as one combo mark */
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  padding-bottom: 18px;           /* room for the sheen rule below the combo */
  transition: opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-logo.visible   { opacity: 1; }
.landing-logo.dismissed { opacity: 0; transition: opacity 900ms ease; }
/* #3: the sheen rule now sits cleanly BELOW the whole combo (not overlapping
   the headline), slightly heavier, with a slow sheen sweeping across it. */
.landing-logo::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 88px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(255,236,198,0) 0%, rgba(255,240,205,0.85) 50%, rgba(255,236,198,0) 100%);
  background-size: 220% 100%;
  animation: comboRuleSheen 5200ms ease-in-out infinite;
}
@keyframes comboRuleSheen { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

.landing-subwordmark {
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  font-style: normal; font-size: clamp(12.5px, 1.25vw, 15.5px);
  letter-spacing: 0.34em; text-transform: lowercase;
  text-align: center; margin-top: 1px;
  /* #4: a slow sheen sweeps across the byline so the combo feels alive. */
  color: rgba(244, 239, 222, 0.58);
  background: linear-gradient(100deg,
    rgba(244,239,222,0.45) 0%, rgba(244,239,222,0.45) 38%,
    rgba(255,248,224,1) 50%, rgba(244,239,222,0.45) 62%, rgba(244,239,222,0.45) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bylineSheen 5200ms ease-in-out infinite;
}
@keyframes bylineSheen { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.landing-wordmark {
  /* The brand mark - half of a single designed lockup (brand :: slogan). The
     slogan below shares this EXACT serif so the two read as one mark, the way
     Nike :: Just Do It are inseparable. Refined, not thick. */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  /* #2: the slogan is the hero; the wordmark is the smaller mark above it. */
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.012em;
  text-indent: 0;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--ink-bright);
  animation: wordmarkPulse 4600ms ease-in-out infinite;
}
@keyframes wordmarkPulse {
  0%, 100% {
    text-shadow: 0 0 14px rgba(230, 225, 211, 0.50), 0 0 30px rgba(255, 220, 180, 0.22);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 26px rgba(247, 240, 222, 0.92), 0 0 56px rgba(255, 224, 180, 0.48);
    transform: scale(1.03);
  }
}
/* Byline - sits beneath the wordmark, sharing its letter-spacing so the
   two read as one designed lockup. A hairline rule above it ties them. */
.landing-byline {
  position: relative;
  font-family: var(--font-fine);            /* Inter - fine print */
  font-weight: 400;
  font-size: clamp(9.5px, 0.92vw, 11.5px);
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  color: rgba(244, 239, 222, 0.46);
  white-space: nowrap;
  padding-top: 11px;
}
.landing-byline::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 1px;
  background: linear-gradient(90deg,
    rgba(244, 239, 222, 0) 0%,
    rgba(244, 239, 222, 0.32) 50%,
    rgba(244, 239, 222, 0) 100%);
}
@media (max-width: 760px) {
  .landing-wordmark { font-size: clamp(15px, 4vw, 20px); letter-spacing: 0.34em; text-indent: 0.34em; }
  .landing-byline   { letter-spacing: 0.32em; text-indent: 0.32em; }
}

.landing-headline {
  position: absolute;
  left: 50%;
  top: 27%;   /* lowered so there's breathing room below the "an immersive experience" line */
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 16px 24px 0;
  white-space: nowrap;

  /* The SLOGAN - the line meant to stay with people. It shares the brand's
     EXACT serif (the cohesion) and sits beneath it as tracked caps, tied by a
     hairline rule, so the lockup reads as one designed mark. */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  /* #2: the slogan now leads the lockup - larger than the wordmark above it. */
  font-size: clamp(26px, 3.7vw, 44px);
  line-height: 1.10;
  letter-spacing: 0.20em;
  text-indent: 0.20em;
  text-transform: uppercase;
  text-align: center;
  /* A solid warm tone (no sheen) so the slogan reads as a calm, designed line
     in the same colour family as the wordmark. */
  color: rgba(255, 242, 214, 0.85);

  /* Fades in as a single block. */
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%, -50%) translateY(6px);
  transition:
    opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter  1600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 6;
}
.landing-headline.visible {
  opacity: 1;
  filter: blur(0)
    drop-shadow(0 0 10px rgba(255, 240, 200, 0.35))
    drop-shadow(0 0 26px rgba(255, 220, 180, 0.18));
  transform: translate(-50%, -50%) translateY(0);
}
/* the headline collapse: 'inner universe' -> 'innerverse', once per session */
.lh-inner, .lh-pre, .lh-verse { display: inline-block; }
/* 'uni' shows at its natural width at rest (so 'INNER UNIVERSE' is plainly
   visible), then JS measures it and transitions it to 0 for the merge. */
.lh-uni { display: inline-block; overflow: hidden; white-space: pre; opacity: 1; vertical-align: bottom;
  transition: max-width 2600ms cubic-bezier(0.62,0,0.30,1), opacity 2200ms ease, margin-left 2600ms cubic-bezier(0.62,0,0.30,1); }
/* #4 THE CINEMATIC MERGE: 'inner universe' slowly marries into 'innerverse'.
   The 'uni' fades while the gap closes over a long, eased motion the eye can
   actually follow; the two surviving words lean toward the seam as they fuse;
   then a glow blooms and a sheen sweeps as the new word is born. A small
   celebration of the marriage of the two words. */
/* NOTE: only max-width/opacity/margin are animated here - NOT transform.
   A transform on these clipped children would create its own paint layer with
   no background to fill, making 'innerverse' vanish under background-clip:text.
   The closing gap alone carries the merge; the glow + sheen carry the birth. */
/* the merge itself is driven by JS (it measures 'uni' then transitions its
   max-width to 0); this class only carries the birth glow + sheen. */
.landing-headline.lh-collapsed-instant .lh-uni { max-width: 0 !important; opacity: 0; margin-left: -0.55em; transition: none; }
.lh-word { display: inline-block; }

/* the surface-crossing flash when you pass through a body's shell into its
   interior world - a bloom of the body's own colour that swells then clears. */
#interior-cross {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
}
#interior-cross.bloom { animation: interiorCross 1100ms cubic-bezier(0.4,0,0.3,1) 1 both; }
@keyframes interiorCross {
  0%   { opacity: 0;    transform: scale(1.35); }
  34%  { opacity: 0.82; transform: scale(1.05); }
  60%  { opacity: 0.5;  transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(0.96); }
}
/* the birth glow + sheen now ride ONLY the newly-born word ('innerverse'),
   not the whole sentence - so 'build your' stays calm while 'innerverse' is
   the thing that flares into being. */
.landing-headline.lh-collapse .lh-word {
  background-image: linear-gradient(100deg,
    rgba(255,242,214,0.92) 0%, rgba(255,242,214,0.92) 30%,
    #fff7e0 44%, #fffefb 50%, #fff7e0 56%,
    rgba(255,242,214,0.92) 70%, rgba(255,242,214,0.92) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    lhSheenSweep 2200ms cubic-bezier(0.4,0,0.2,1) 1500ms 1 both,
    lhBirthGlow 2600ms ease 900ms 1 both;
}
@keyframes lhSheenSweep { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
/* a brighter, fuller birth-flash when 'innerverse' is born */
@keyframes lhBirthGlow {
  0%   { filter: drop-shadow(0 0 10px rgba(255,240,200,0.3)); }
  44%  { filter: drop-shadow(0 0 40px rgba(255,248,222,1)) drop-shadow(0 0 90px rgba(255,226,182,0.85)) drop-shadow(0 0 140px rgba(255,214,150,0.5)); }
  100% { filter: drop-shadow(0 0 14px rgba(255,240,200,0.5)) drop-shadow(0 0 34px rgba(255,220,180,0.28)); }
}

/* (The tying hairline now lives under the combo as .landing-logo::after, so
   the headline no longer carries its own overlapping rule.) */

@media (max-width: 760px) {
  .landing-headline {
    white-space: normal;
    max-width: 88vw;
    font-size: clamp(22px, 6vw, 30px);
    letter-spacing: 0.18em;
  }
}

/* "inner" italic emphasis inside the hero. */
.landing-headline em.inner {
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}
.landing-headline.dismissed {
  opacity: 0;
  animation: none;
  transition: opacity 900ms ease;
}

@keyframes brandSheen {
  0%   { background-position: 110% 0; }
  60%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

/* ─── Subline beneath the hero - the quiet promise ──────────────────── */
/* Cormorant italic, sentence case: a soft poetic line under the VT323
   hero ("there is an entire universe inside your mind."). */

.hero-tagline {
  position: absolute;
  left: 50%;
  top: 29.5%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(244, 239, 222, 0.80);
  text-shadow:
    0 0 12px rgba(230, 225, 211, 0.30),
    0 0 26px rgba(255, 220, 180, 0.18),
    0 0 60px rgba(0, 0, 0, 0.92);
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 1600ms ease 600ms;
}
.hero-tagline.visible { opacity: 1; }
.hero-tagline.dismissed {
  opacity: 0;
  transition: opacity 700ms ease;
}

/* Byline strikethrough - "OVERTHINK" is struck through; "INTROSPECT"
   is the surviving word. Slight desaturation on the struck text so the
   eye reads "INTROSPECT" first. */
.hero-tagline s {
  text-decoration-line: line-through;
  text-decoration-thickness: from-font;
  text-decoration-color: rgba(244, 239, 222, 0.70);
  color: rgba(244, 239, 222, 0.55);
  margin-right: 0.18em;
}

/* THINKSPACE - sheen wordmark inside the byline. */
.hero-tagline .brand {
  font-weight: 700;
  letter-spacing: 0.22em;
  background-image: linear-gradient(
    100deg,
    rgba(244, 239, 222, 0.72) 0%,
    rgba(244, 239, 222, 0.72) 28%,
    rgba(255, 250, 228, 1.00) 40%,
    rgba(255, 255, 250, 1.00) 50%,
    rgba(255, 250, 228, 1.00) 60%,
    rgba(244, 239, 222, 0.72) 72%,
    rgba(244, 239, 222, 0.72) 100%
  );
  background-size: 280% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brandSheen 5200ms cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
  filter: drop-shadow(0 0 6px rgba(255, 240, 200, 0.55));
}

@media (max-width: 760px) {
  .hero-tagline {
    font-size: clamp(15px, 3.4vw, 20px);
    letter-spacing: 0.14em;
    max-width: 92vw;
    white-space: nowrap;
  }
}

/* ─── Invisible click target over the hole ───────────────────────── */

.hole-hit {
  position: absolute;
  left: var(--hole-x);
  top:  var(--hole-y);
  width:  var(--hole-size);
  height: var(--hole-size);
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 0;
  z-index: 4;
  border-radius: 50%;
}
.hole-hit:focus-visible {
  outline: 1px solid rgba(255, 220, 160, 0.45);
  outline-offset: 4px;
}

/* ─── ENTER below the hole - smaller, calmer, button-like ────────── */

.enter-cta {
  position: absolute;
  left: var(--hole-x);
  /* Tight: just under the hole, not floating in space below */
  top:  calc(var(--hole-y) + 9%);
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 5px 12px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  outline: none;
  z-index: 5;
  /* Founder revision: snappier hover (160 ms) so the response is felt
     immediately. Opacity transition (fade-in on appear) stays slow. */
  transition: opacity 1400ms ease, color 160ms ease, text-shadow 160ms ease;

  display: inline-flex;
  align-items: baseline;
  gap: 0;

  font-family: var(--font-main);
  font-weight: 400;
  /* Founder revision: smaller, less imposing CTA size. */
  font-size: clamp(13px, 1.25vw, 17px);
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-shadow:
    0 0 4px  rgba(255, 230, 190, 0.40),
    0 0 14px rgba(255, 210, 160, 0.16);
}
.enter-cta.visible {
  opacity: 1;
  pointer-events: auto;
}
.enter-cta.dismissed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
/* Hover: brighten only - no letter-spacing change (per design feedback). */
.enter-cta:hover,
.enter-cta:focus-visible {
  color: var(--ink-bright);
}
.enter-cta:hover .enter-label,
.enter-cta:hover .enter-underscore,
.enter-cta:focus-visible .enter-label,
.enter-cta:focus-visible .enter-underscore {
  color: #fff7e2;
  text-shadow:
    0 0 8px  rgba(255, 230, 180, 0.95),
    0 0 22px rgba(255, 200, 140, 0.55);
}
/* When the click has happened, hold a brief pressed feel before the
   monologue begins. */
.enter-cta.pressed {
  color: #fff7e2;
  text-shadow:
    0 0 10px rgba(255, 235, 195, 0.95),
    0 0 26px rgba(255, 200, 140, 0.55);
}
.enter-cta:focus-visible {
  outline: none;
}

.enter-label {
  display: inline-block;
}

.enter-underscore {
  display: inline-block;
  margin-left: 0.10em;
  transform: translateY(-0.05em);
  font-family: var(--font-main);
  color: inherit;
  animation: underscoreBlink 1100ms steps(1, end) infinite;
}

@keyframes underscoreBlink {
  0%, 50%   { opacity: 1.0; }
  51%, 100% { opacity: 0.0; }
}

/* SKIP link - appears ONLY during the intro monologue, top-right.
   Lighter shade for readability against the dark sky.  Fades in after
   audio starts, fades out before the closing line. */
.landing-skip {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: 0;
  font-family: var(--font-main);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(238, 232, 215, 0.72);     /* lighter shade, readable */
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
  padding: 8px 12px;
  cursor: pointer;
  opacity: 0;
  z-index: 9;
  transition: opacity 1200ms ease, color 240ms ease;
}
.landing-skip:hover { color: rgba(255, 250, 232, 1); }
.landing-skip.visible { opacity: 1; }
.landing-skip.fading-out { opacity: 0; transition: opacity 2400ms ease; }

/* ─── Fine-print notes (NASA credit, audio experience) ─────────────── */
/* Same typographic family as each other - distinct from the body of
   the experience.  Inter at low weight, wide tracking, tiny size. */

.fine-note {
  position: absolute;
  font-family: var(--font-fine);
  font-weight: 300;
  font-size: clamp(9.5px, 0.78vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.62);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  white-space: nowrap;
}

/* Audio-experience note - landing only, bottom-centre. */
.audio-note {
  left: 50%;
  bottom: 5.2vh;
  transform: translateX(-50%);
  transition: opacity 1600ms ease;
}
.audio-note.visible {
  opacity: 0.74;
}
.audio-note.dismissed {
  opacity: 0;
  transition: opacity 700ms ease;
}

/* NASA credit - bottom LEFT corner (per founder spec).  Higher-contrast
   colour for readability against the bright accretion-disk frames. */
.nasa-credit {
  left: 14px;
  bottom: 12px;
  right: auto;
  top: auto;
  max-width: none;
  width: max-content;
  text-align: left;
  /* Step 10 polish: bump up so the credit is readable at default desktop. */
  font-size: clamp(9px, 0.68vw, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow: visible;
  line-height: 1.0;
  color: rgba(248, 244, 226, 0.92);            /* brighter cream */
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.98),
    0 0 12px rgba(0, 0, 0, 0.92),
    0 1px 2px rgba(0, 0, 0, 0.85);
  transition: opacity 1800ms ease;
}
.nasa-credit.visible {
  opacity: 0.95;
}
.nasa-credit.fading-out {
  opacity: 0;
  transition: opacity 2400ms ease;
}

/* ─── Silhouette canvas overlay ───────────────────────────────────── */

.silhouette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1800ms ease;
  mix-blend-mode: normal;
  z-index: 6;
}
.silhouette.visible { opacity: 1; }

/* ψ glow - a soft warm halo behind the ψ glyph ONLY. Tight radius so
   it emphasises just the symbol, not a wide area of the brow. Fades
   in on the "singularity" cue, out at dispersion. */
.psi-glow {
  position: absolute;
  left: 50%;
  /* Aligned to the ψ glyph: figureBox in silhouette.js puts fy at
     0.14·H and size at 0.80·H, so ψ at FEATURES y=0.115 lands at
     0.14·H + 0.115·0.80·H ≈ 0.232·H. */
  top: 23.2%;
  /* TINY - no bigger than the ψ glyph itself. The radial gradient
     fades fully to transparent at 100% and we use mix-blend-mode:
     screen so any residual box edge is invisible against the dark
     silhouette ground. Reads as a luminous warmth THROUGH the ψ. */
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  /* `closest-side` makes the gradient reach full transparency at the edge
     MIDPOINTS (not the corners), so it's a clean circle inscribed in the
     box with fully transparent corners - no square halo. Colour/texture
     unchanged. */
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(255, 220, 175, 0.85) 0%,
    rgba(255, 205, 150, 0.55) 30%,
    rgba(255, 190, 125, 0.18) 65%,
    rgba(255, 180, 110, 0.00) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2400ms ease;
  z-index: 5;
}
.psi-glow.visible { opacity: 1; }
.psi-glow.fading-out {
  opacity: 0;
  transition: opacity 1800ms ease;
}
@media (max-width: 720px) {
  .psi-glow { width: 22px; height: 22px; }
}

/* IGNORAMUS chest glow - a wider, softer sibling of the psi glow. The chest
   inscription sits at FEATURES y=0.362, so 0.14H + 0.362*0.80H ≈ 0.43H. */
/* The phrase spans three stacked lines (IGNORAMUS y0.362 / et y0.400 /
   IGNORABIMUS y0.438), centred near 0.40 -> 0.14H + 0.40*0.80H ≈ 0.46H. The
   glow is a tall, soft ellipse covering the WHOLE phrase, not just the top
   word - a subtle luminance on the inscription that invites curiosity. */
.ign-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 190px;
  height: 130px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(255, 224, 175, 0.42) 0%,
    rgba(255, 210, 150, 0.26) 38%,
    rgba(255, 195, 130, 0.10) 68%,
    rgba(255, 185, 115, 0.00) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2400ms ease;
  z-index: 5;
}
.ign-glow.visible { opacity: 1; }
.ign-glow.fading-out { opacity: 0; transition: opacity 1800ms ease; }
@media (max-width: 720px) { .ign-glow { width: 150px; height: 104px; } }

/* The whole-figure evaporation aura: a soft warm luminosity enveloping the
   seated figure (centre ~50%/51%, ~70% of viewport height). Blooms just
   before the figure disperses, then fades with it - a magical last breath. */
.silhouette-aura {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 40%;
  height: 74%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side at 50% 48%,
    rgba(255, 226, 180, 0.30) 0%,
    rgba(255, 208, 152, 0.18) 38%,
    rgba(250, 195, 140, 0.07) 68%,
    rgba(250, 190, 135, 0.00) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3000ms ease;
  z-index: 4;
}
.silhouette-aura.visible { opacity: 1; animation: silAuraBreath 5200ms ease-in-out infinite; }
.silhouette-aura.fading-out { opacity: 0; animation: none; transition: opacity 2600ms ease; }
@keyframes silAuraBreath {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1.0; }
}

/* ─── Intelligent Orb (WebGL - six-pointed sigil) ──────────────────── */
/* Initial state: at the silhouette's face position, modest size.
   Centered state: viewport centre, larger.  The transition is long
   and ease-in-out so the orb glides rather than snapping into place. */

.landing-orb {
  position: absolute;
  left: 50%;
  top: 22%;                           /* face region of the silhouette */
  width: 15vmin;                       /* #15: smaller - sits within the face */
  height: 15vmin;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  /* Truly transparent - the shader handles the orb's own falloff. */
  background: transparent;
  /* Long, gentle ease-in-out so the motion to centre feels like a
     glide, not a snap.  Same curve on every animated property. */
  transition:
    opacity 1800ms ease,
    top    2800ms cubic-bezier(0.45, 0, 0.20, 1),
    width  2800ms cubic-bezier(0.45, 0, 0.20, 1),
    height 2800ms cubic-bezier(0.45, 0, 0.20, 1),
    transform 2800ms cubic-bezier(0.45, 0, 0.20, 1);
}
.landing-orb.visible {
  opacity: 1;
}
.landing-orb.centered {
  top: 50%;
  width:  46vmin;
  height: 46vmin;
  transform: translate(-50%, -50%) scale(1.0);
}
.landing-orb.dismissed {
  opacity: 0;
  transition: opacity 1400ms ease;
}

/* ─── Subtitle overlay ────────────────────────────────────────────── */
/* Same retro font as the rest of the site - VT323. */

.subtitle {
  /* #4: fixed + dvh so the subtitle is anchored to the live viewport. When the
     window is resized (e.g. leaving app-fullscreen for a windowed tab), an
     absolutely-positioned bottom:9vh measured against a stale container height
     pushed the subtitle off-screen. dvh tracks the dynamic viewport. */
  position: fixed;
  left: 8vw;
  right: 8vw;
  bottom: 9dvh;
  text-align: center;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.40;
  letter-spacing: 0.025em;
  color: var(--ink-bright);
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.95),
    0 0 36px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 720ms ease, transform 720ms ease;
  pointer-events: none;
  max-width: 940px;
  margin: 0 auto;
  z-index: 7;
}
.subtitle.visible {
  opacity: 0.96;
  transform: translateY(0);
}

/* ─── Cosmic chrome - eye toggle + mic ───────────────────────────────── */
/* Two minimal affordances during the cosmic canvas. No labels - the
   intelligence is never named. The eye carries the felt quality of
   listening; the mic carries the act of speaking into the cosmos. */
.cosmic-eye, .cosmic-mic {
  position: fixed;
  z-index: 12;
  background: transparent;
  border: 1px solid rgba(244, 239, 222, 0.18);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-thinkspace, pointer);
  color: rgba(244, 239, 222, 0.85);
  transition: border-color 240ms ease, background 240ms ease, opacity 240ms ease, transform 240ms ease;
  opacity: 0.88;
}
.cosmic-eye:hover, .cosmic-mic:hover,
.cosmic-eye:focus-visible, .cosmic-mic:focus-visible {
  border-color: rgba(244, 239, 222, 0.55);
  background: rgba(244, 239, 222, 0.04);
  opacity: 1;
  outline: none;
}
.cosmic-eye {
  top: 16px;
  right: 16px;
}
.cosmic-mic {
  bottom: 16px;
  right: 16px;
}
.cosmic-eye.is-closed { opacity: 0.55; }
.cosmic-mic.recording {
  border-color: rgba(255, 200, 160, 0.75);
  animation: cosmicMicPulse 1400ms ease-in-out infinite;
}
@keyframes cosmicMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 160, 0.30); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 200, 160, 0.0); }
}

/* ─── Cosmos world - the 3D galaxy + post-landing experience ─────────── */
/* Hidden initially.  Becomes visible after landing fades, when cosmos.js
   has mounted and the Three.js scene is rendering its first frame. */

.cosmos {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2200ms ease;
}
.cosmos.visible {
  opacity: 1;
  pointer-events: auto;
}

.cosmos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The 3D orb canvas - sits centred above the galaxy, scales with vmin
   so it reads at the right size in either landing or cosmos.  Position
   set inline by cosmos.js so it can match the landing orb's final spot. */
.cosmos-orb {
  position: absolute;
  left: 50%;
  top: 38%;
  width:  42vmin;
  height: 42vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 1600ms ease, top 2400ms cubic-bezier(0.45, 0, 0.20, 1),
              width 2400ms cubic-bezier(0.45, 0, 0.20, 1),
              height 2400ms cubic-bezier(0.45, 0, 0.20, 1);
}
.cosmos-orb.visible { opacity: 1; }

/* ─── Cosmos card - the unified dialog vocabulary used by every text
       panel in the cosmos (dialogue, actions, fact, AI session).  One
       look across all surfaces so the UI reads as a calm system,
       not a series of one-off widgets. */
.cosmos-card {
  background: rgba(8, 6, 18, 0.70);
  border: 1px solid rgba(230, 225, 211, 0.16);
  border-radius: 6px;
  padding: 16px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.55);
}

/* Dialogue card - sits below the orb.  Lines are written one at a
   time inside the card; each fades in/out for a calm rhythm. */
.cosmos-dialogue {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  max-width: min(80vw, 560px);
  text-align: center;
  font-family: var(--font-main);
  font-weight: 400;
  /* Bumped to 17→20px so onboarding + monologue lines are properly
     readable per founder spec. */
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink-bright);
  opacity: 0;
  transition: opacity 1000ms ease;
  pointer-events: none;
  z-index: 8;
  padding: 14px 26px;
  background: rgba(8, 6, 18, 0.70);
  border: 1px solid rgba(230, 225, 211, 0.16);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 226, 180, 0.10), 0 0 70px rgba(255, 220, 170, 0.06);
}
.cosmos-dialogue.visible {
  opacity: 0.98;
}
/* THINK onboarding: float the lines above the centred chat vessel so they
   are readable instead of hidden behind it. */
.cosmos-dialogue.think-onboard {
  /* Slightly lower than the old 19% so the words sit close to the galaxy
     they are pointing at (the arrow bridges the remaining distance). */
  top: 26%;
  z-index: 30;
  max-width: min(86vw, 600px);
}
/* The onboarding arrow from the introduction text down to the galaxy. */
.galaxy-arrow {
  position: fixed; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 29; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.galaxy-arrow.in { opacity: 1; }
.ga-line {
  width: 1px; flex: 1;
  background: repeating-linear-gradient(180deg,
    rgba(255, 232, 190, 0.5) 0 4px, transparent 4px 9px);
}
.ga-tip {
  width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.4px solid rgba(255, 232, 190, 0.7);
  border-bottom: 1.4px solid rgba(255, 232, 190, 0.7);
  transform: rotate(45deg);
}
.cosmos-dialogue.fading {
  opacity: 0;
}
.cosmos-dialogue:empty {
  display: none;
}

/* Action slot - NEXT button, name input, with/without AI buttons live
   here.  Sits just below the dialogue card. */
.cosmos-actions {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  width: min(78vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 9;
  pointer-events: none;
}
.cosmos-actions > * { pointer-events: auto; }
.cosmos-actions:empty { display: none; }
/* #8: in the without-AI journal, the palette/toolbar sits lower so it's
   out of the drawing area. */
.cosmos-actions:has(.cosmos-doodle-toolbar) { top: 85%; }

/* Retro button - refined, smaller scale than v3 for a more mature
   look.  Same Sound.click vocabulary on every press. */
.cosmos-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  border: 1px solid rgba(230, 225, 211, 0.28);
  background: rgba(8, 6, 18, 0.62);
  padding: 8px 18px;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  outline: none;
  border-radius: 3px;
  transition: color 280ms ease, border-color 280ms ease,
              background 280ms ease, text-shadow 280ms ease;
  text-shadow: 0 0 4px rgba(255, 230, 190, 0.24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cosmos-btn:hover, .cosmos-btn:focus-visible {
  color: var(--ink-bright);
  border-color: rgba(255, 230, 190, 0.55);
  background: rgba(20, 14, 40, 0.72);
  text-shadow: 0 0 10px rgba(255, 230, 190, 0.75);
}
.cosmos-btn .underscore {
  display: inline-block;
  margin-left: 0.35em;
  animation: underscoreBlink 1100ms steps(1, end) infinite;
}

.cosmos-btn-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.cosmos-btn-row-wrap { max-width: 360px; }

/* Mode-prompt card - the single panel that shows both the question
   ("do you want to:" / "how do you want to think today?") AND the
   buttons together.  No sequential reveal. */
.cosmos-mode-card {
  background: rgba(8, 6, 18, 0.72);
  border: 1px solid rgba(230, 225, 211, 0.18);
  border-radius: 6px;
  padding: 16px 22px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.cosmos-mode-question {
  font-family: var(--font-main);
  font-size: clamp(14px, 1.25vw, 16px);
  letter-spacing: 0.05em;
  color: var(--ink-bright);
  text-align: center;
}

/* ─── Persistent "begin a new session" affordance ───────────────────── */
/* Pinned bottom-center so it's always reachable. Hidden during an
   active session via .is-session. The chooser itself reappears at the
   end of each session, but this button is the user's quiet re-entry
   point if they've dismissed the chooser and want to start again. */
/* THINK + PRACTICE tabs, pinned bottom-centre, side by side. */
/* #7: a small onboarding tip anchored just above a tab (the practice tab),
   with a caret pointing down at it - so the intro appears WHERE the new tab is,
   not centred on screen. Positioned in JS via getBoundingClientRect. */
.cosmos-tip {
  position: fixed;
  transform: translate(-50%, -100%);
  max-width: 290px;
  padding: 9px 14px;
  background: rgba(8, 6, 18, 0.84);
  border: 1px solid rgba(230, 225, 211, 0.14);
  border-radius: 10px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(244, 239, 222, 0.93);
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cosmos-tip.in { opacity: 1; transform: translate(-50%, calc(-100% - 4px)); }
.cosmos-tip em { font-style: italic; color: #e0a45f; }
.cosmos-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: rgba(8, 6, 18, 0.84);
  border-right: 1px solid rgba(230, 225, 211, 0.14);
  border-bottom: 1px solid rgba(230, 225, 211, 0.14);
}

/* The "source" link appended to a bowl's original visible citation line - a
   quiet hyperlink to the cited work's verified public edition. The citation
   itself is unchanged; this only adds discovery next to it. */
.tw-source-link { color: #e0a45f; text-decoration: none; border-bottom: 1px solid rgba(224, 164, 95, 0.4); white-space: nowrap; }
.tw-source-link:hover { color: #f0b873; }

/* #8: "saved to Read" note inside the inner-reading card, and the analysis
   preview inside a Read session card. */
.ir-saved-note {
  margin: 14px auto 4px; max-width: 80%; text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 13px; letter-spacing: 0.03em; color: rgba(74, 60, 40, 0.6);
}
.arc-w-koan { font-style: italic; color: rgba(255, 232, 192, 0.86); margin-top: 4px; }
.arc-open-reading { margin-top: 12px; }

/* ─── Inner Universe: explore a node (hover label + detail panel) ───────── */
.iu-hover-label {
  position: fixed; z-index: 22; pointer-events: none;
  font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.06em;
  color: rgba(244, 239, 222, 0.94); background: rgba(6, 6, 16, 0.72);
  border: 1px solid rgba(244, 239, 222, 0.1); border-radius: 4px;
  padding: 4px 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 200ms ease; text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
.iu-hover-label.on { opacity: 1; }
.cosmos.iu-node-hover { cursor: var(--cursor-thinkspace, pointer); }
/* soul-body hover: an elegant one-line of what this part of you is */
.iu-hover-label.iu-soul-hover-tip {
  white-space: normal; max-width: 270px; padding: 9px 14px; border-radius: 9px;
  background: rgba(8, 8, 18, 0.82); border-color: rgba(244, 239, 222, 0.16);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* the space theme is the VT323 terminal type used across the innerverse - the
   hover name now matches it (it was serif, which clashed). */
.iu-soul-hover-tip b {
  display: block; font-family: var(--font-main, 'VT323', monospace); font-weight: 400;
  font-size: 19px; letter-spacing: 0.14em; text-transform: lowercase; color: rgba(252, 246, 232, 1); margin-bottom: 0;
  text-shadow: 0 0 12px rgba(255, 230, 180, 0.4);
}
.iu-soul-hover-tip { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; line-height: 1.45; color: rgba(244, 239, 222, 0.8); }
/* hover: a small name eyebrow above the line that says what the body represents */
.iu-soul-hover-tip .iu-soul-eyebrow {
  display: block; font-family: var(--font-main, 'VT323', monospace);
  font-size: 11px; letter-spacing: 0.22em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.45); margin-bottom: 4px;
}
.iu-soul-hover-tip .iu-soul-repr {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 18px; line-height: 1.35; letter-spacing: 0.01em; color: rgba(252, 246, 232, 0.96);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

.iu-detail {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%) translateX(12px);
  width: 282px; z-index: 24; pointer-events: none;
  background: rgba(6, 6, 16, 0.82); border: 1px solid rgba(244, 239, 222, 0.1);
  border-radius: 6px; padding: 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.iu-detail.on { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.iud-type { font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 10px; }
.iud-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 500; line-height: 1.25; color: rgba(248, 243, 228, 0.96); margin-bottom: 12px; }
/* The epistemic frame: feeling vs fact, said once, quietly. */
.iud-frame { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(198, 212, 240, 0.66); margin: -4px 0 12px; }
.iud-div { width: 24px; height: 1px; background: rgba(244, 239, 222, 0.18); margin-bottom: 14px; }
.iud-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal; font-size: 14px; color: rgba(244, 239, 222, 0.5); line-height: 1.6; border-left: 1.5px solid rgba(244, 239, 222, 0.12); padding-left: 10px; margin-bottom: 16px; }
.iud-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.iud-tag { font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border: 1px solid rgba(244, 239, 222, 0.12); border-radius: 3px; color: rgba(244, 239, 222, 0.55); }
.iud-tag-struct { color: #e0a45f; border-color: rgba(224, 164, 95, 0.4); }
.iud-freq { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.06em; text-transform: lowercase; color: rgba(255, 220, 170, 0.78); margin: -2px 0 12px; }
.iud-threads { border-top: 1px solid rgba(244, 239, 222, 0.08); padding-top: 12px; margin-bottom: 14px; }
.iud-threads-label { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(243, 208, 99, 0.6); margin-bottom: 8px; }
.iud-thread-row { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14.5px; line-height: 1.5; color: rgba(244, 239, 222, 0.8); margin-bottom: 6px; }
.iud-thread-conn { color: rgba(243, 208, 99, 0.85); }
.iud-thread-other { color: rgba(248, 243, 228, 0.95); }
.iud-insight { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14.5px; font-style: normal; color: rgba(244, 239, 222, 0.6); line-height: 1.65; border-top: 1px solid rgba(244, 239, 222, 0.08); padding-top: 14px; margin-bottom: 14px; }
.iud-dots-label { font-family: var(--font-main, 'VT323', monospace); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 239, 222, 0.3); margin-bottom: 7px; }
.iud-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.iud-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 239, 222, 0.14); }
.iud-dot.on { background: rgba(244, 239, 222, 0.8); box-shadow: 0 0 5px rgba(255, 226, 180, 0.4); }

/* Domain filter chips - the universe's primary navigation. */
.iu-filters {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  max-width: 92vw; z-index: 13; pointer-events: none;
  opacity: 0; transition: opacity 600ms ease;
}
.iu-filters.on { opacity: 1; pointer-events: auto; }
.iu-chip {
  font-family: var(--font-main, 'VT323', monospace); font-size: 16px; letter-spacing: 0.06em;
  text-transform: lowercase; padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(244, 239, 222, 0.2); border-radius: 999px; background: rgba(6, 6, 16, 0.6);
  color: rgba(244, 239, 222, 0.72); cursor: var(--cursor-thinkspace, pointer); white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.iu-chip:hover { border-color: rgba(244, 239, 222, 0.45); color: rgba(244, 239, 222, 0.95); }
.iu-chip.active { background: rgba(244, 239, 222, 0.12); border-color: rgba(244, 239, 222, 0.55); color: rgba(248, 243, 228, 1); }
.iu-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Passive body-type legend - the index to the kinds of thought. Vertically
   centred on the left edge so it reads as part of the navigation, not a
   footnote lost in a corner. */
.iu-legend {
  position: fixed; top: 50%; left: 30px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 18px 15px; border-radius: 12px;
  background: rgba(5, 5, 14, 0.42); border: 1px solid rgba(244, 239, 222, 0.08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 11; pointer-events: none; opacity: 0; transition: opacity 600ms ease;
}
.iu-legend.on { opacity: 0.95; }
.iu-leg-label { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(244, 239, 222, 0.58); margin-bottom: 9px; }
.iu-leg-row { display: flex; align-items: center; gap: 11px; font-family: var(--font-main, 'VT323', monospace); font-size: 17px; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(244, 239, 222, 0.85); }
.iu-leg-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 9px currentColor; }
@media (max-width: 760px) { .iu-legend { left: 12px; padding: 10px 12px; } .iu-leg-row { font-size: 13px; } }

/* #8b/c: the "what keeps returning" insight bar - a grounded reading of the
   whole inner universe, shown quietly along the bottom. */
.iu-insight {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  max-width: 780px; width: 90vw; text-align: center; z-index: 11; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.iu-insight.on { opacity: 1; }
.iu-insight-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 222, 0.32); margin-bottom: 7px; }

/* #7: the "inner universe" -> "innerverse" collapse title. Driven entirely by
   one coordinated set of keyframe animations (no JS timers). */
.iv-title { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 60; pointer-events: none; animation: ivFade 5s ease forwards; }
.iv-words { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(34px, 6vw, 64px); color: rgba(248, 243, 228, 0.95); letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 0 30px rgba(0, 0, 0, 0.7); }
.iv-sp, .iv-uni { display: inline-block; overflow: hidden; vertical-align: bottom; }
.iv-sp { width: 0.32em; animation: ivCollapse 5s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.iv-uni { animation: ivCollapseFade 5s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
.iv-inner, .iv-verse { animation: ivLit 5s ease forwards; }
@keyframes ivFade { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ivCollapse { 0%, 28% { width: 0.32em; } 44%, 100% { width: 0; } }
@keyframes ivCollapseFade { 0%, 28% { max-width: 1.6em; opacity: 1; } 44%, 100% { max-width: 0; opacity: 0; } }
@keyframes ivLit { 0%, 40% { color: rgba(248, 243, 228, 0.95); text-shadow: 0 0 30px rgba(0, 0, 0, 0.7); } 54%, 100% { color: #f3d063; text-shadow: 0 0 26px rgba(243, 208, 99, 0.45); } }
/* The same collapse, inline inside the onboarding monologue line - the
   moment the product earns its name in front of the user. */
.iv-inline { white-space: nowrap; }
/* The HUD nameplate: name + tracking, designed into the top-left corner. */
.iv-home-plate {
  position: fixed; top: 22px; left: 30px;
  z-index: 11; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.iv-home-plate.on { opacity: 1; }
.iv-home-plate.iv-naming { transition: none; }
.iv-home-plate.iv-naming .ivp-name { font-size: 34px; transition: font-size 1.2s ease; }
.iv-words .iv-uni { display: inline-block; overflow: hidden; animation: ivUniCollapse 5s cubic-bezier(0.7,0,0.3,1) forwards; }
.iv-words .iv-inner, .iv-words .iv-verse { animation: ivLitGold 5s ease forwards; }
@keyframes ivUniCollapse { 0%,30% { max-width: 1.6em; opacity: 1; } 48%,100% { max-width: 0; opacity: 0; } }
@keyframes ivLitGold { 0%,40% { color: rgba(248,243,228,0.95); } 56%,100% { color: #f3d063; } }
/* #21: more prominent and heavier, with a soft gold bloom. */
.ivp-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 30px; letter-spacing: 0.02em; color: rgba(245, 214, 120, 0.96);
  text-shadow: 0 0 18px rgba(243, 208, 99, 0.35), 0 0 30px rgba(0, 0, 0, 0.8);
}
.ivp-rule { width: 54px; height: 1.5px; background: rgba(243, 208, 99, 0.4); margin: 9px 0 9px 1px; }
.ivp-stats {
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 17px; letter-spacing: 0.07em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.68);
}
@media (max-width: 760px) { .iv-home-plate { left: 14px; top: 14px; } .ivp-name { font-size: 24px; } }
/* soulsearch entry on the home plate */
.ivp-soulsearch {
  /* the plate is pointer-events:none (so its text never blocks the 3D canvas), so
     this BUTTON must re-enable pointer events or a real click passes straight
     through it - the reason soulsearch "did nothing" for the founder (a
     programmatic .click() in tests masked it). */
  pointer-events: auto;
  margin-top: 14px; display: inline-flex; align-items: center; gap: 2px;
  background: rgba(244, 239, 222, 0.06); border: 1px solid rgba(244, 239, 222, 0.22);
  border-radius: 999px; padding: 6px 16px;
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase;
  color: rgba(248, 243, 228, 0.86); cursor: var(--cursor-thinkspace, pointer);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ivp-soulsearch:hover { background: rgba(255, 240, 200, 0.12); border-color: rgba(255, 230, 190, 0.5); color: rgba(255, 246, 224, 0.98); }
.ivp-ss-arrow { opacity: 0.7; }
/* a quiet "demo" link beneath the summary */
.ivp-demo {
  margin-top: 14px; display: inline-block; background: none; border: none; padding: 2px 0;
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase;
  color: rgba(245, 214, 120, 0.78); cursor: var(--cursor-thinkspace, pointer); transition: color 0.2s;
}
.ivp-demo:hover { color: rgba(255, 236, 170, 1); }
/* DEMO MODE: clear all the chrome so the innerverse is the whole frame. */
body.cosmos-demo #iv-home-name,
body.cosmos-demo #cosmos-tabs,
body.cosmos-demo .iu-whatis,
body.cosmos-demo .ts-account,
body.cosmos-demo #cosmos-reset,
body.cosmos-demo #cosmos-volume,
body.cosmos-demo #iu-legend,
body.cosmos-demo #iu-filters { opacity: 0 !important; pointer-events: none !important; transition: opacity 700ms ease; }
.demo-exit {
  position: fixed; left: 50%; bottom: 5vh; transform: translateX(-50%);
  font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.22em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.4); z-index: 50; pointer-events: none;
  opacity: 0; animation: demoHintFade 4.5s ease forwards;
}
@keyframes demoHintFade { 0% { opacity: 0; } 16% { opacity: 0.7; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
/* the soulsearch panel (reuses the practice-sheet backdrop) */
.ss-card { max-width: 620px; }
.ss-inputrow { margin: 22px auto 0; display: flex; gap: 10px; width: min(90%, 520px); }
.ss-input {
  flex: 1; background: rgba(8, 8, 18, 0.6); border: 1px solid rgba(244, 239, 222, 0.22); border-radius: 10px;
  padding: 13px 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px;
  color: rgba(248, 243, 228, 0.96); outline: none; caret-color: rgba(255, 240, 200, 0.9);
}
.ss-input::placeholder { color: rgba(244, 239, 222, 0.4); font-style: italic; }
.ss-input:focus { border-color: rgba(255, 230, 190, 0.5); }
.ss-go {
  flex: 0 0 auto; width: 48px; border-radius: 10px; border: 1px solid rgba(244, 239, 222, 0.22);
  background: rgba(244, 239, 222, 0.06); color: rgba(248, 243, 228, 0.92); font-size: 22px;
  cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s;
}
.ss-go:hover { background: rgba(255, 240, 200, 0.12); border-color: rgba(255, 230, 190, 0.5); }
.ss-answer {
  margin: 22px auto 4px; width: min(90%, 540px); min-height: 0; max-height: 42vh; overflow-y: auto;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.62;
  color: rgba(245, 238, 218, 0.95); text-align: left; opacity: 0; transition: opacity 600ms ease;
}
.ss-answer.show { opacity: 1; }
.ss-answer.ss-loading { font-style: italic; color: rgba(244, 239, 222, 0.55); }
/* soulsearch sits at the TOP-CENTRE and reads like a clean search (founder ask:
   "how would google design it") - a single calm bar, the answer beneath it. */
#cosmos-soulsearch { align-items: flex-start; }
#cosmos-soulsearch .ss-card { margin-top: 11vh; max-width: 680px; text-align: center; }
#cosmos-soulsearch .ss-inputrow { margin-top: 18px; width: min(94%, 600px); }
#cosmos-soulsearch .ss-input { padding: 16px 22px; font-size: 20px; border-radius: 999px; background: rgba(8, 8, 18, 0.72); box-shadow: 0 6px 26px rgba(0,0,0,0.4); }
#cosmos-soulsearch .ss-input:focus { box-shadow: 0 6px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,230,190,0.35); }
#cosmos-soulsearch .ss-go { width: 52px; border-radius: 999px; }
#cosmos-soulsearch .ss-answer { text-align: center; margin-top: 26px; }

/* ── account: a quiet mark + menu, pricing card, privacy — in the cosmic voice ── */
.ts-account {
  position: fixed; top: 18px; right: 18px; z-index: 41; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(8, 8, 18, 0.4); border: 1px solid rgba(244, 239, 222, 0.18);
  color: rgba(244, 239, 222, 0.7); cursor: var(--cursor-thinkspace, pointer);
  transition: color 0.2s, border-color 0.2s, background 0.2s; backdrop-filter: blur(4px);
}
.ts-account:hover { color: rgba(255, 246, 224, 0.98); border-color: rgba(255, 230, 190, 0.5); }
/* the profile mark belongs only to the home cosmos; inside any world or overlay it
   would crowd the close button, so retire it whenever one is open. */
body:has(#soul-interior) #ts-account,
body:has(.ts-pricing) #ts-account,
body:has(.ts-privacy) #ts-account,
.cosmos.in-session #ts-account { display: none !important; }
/* the feeling SKY (weather shade + aurora) belongs to the home cosmos only - inside
   a world it would wash the world's own colour (a red sky was tinting every
   interior amber). Suppress it whenever an interior is open. */
body:has(#soul-interior) #universe-weather,
body:has(#soul-interior) #cosmos-aurora { opacity: 0 !important; }
.ts-acct-pop {
  position: fixed; top: 60px; right: 18px; z-index: 60; width: min(300px, 86vw);
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: rgba(10, 10, 20, 0.92); border: 1px solid rgba(244, 239, 222, 0.16); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-6px); transition: opacity 240ms ease, transform 240ms ease;
}
.ts-acct-pop.show { opacity: 1; transform: translateY(0); }
.ts-acct-nudge { top: auto; bottom: 96px; right: 50%; transform: translateX(50%) translateY(8px); text-align: center; align-items: center; }
.ts-acct-nudge.show { transform: translateX(50%) translateY(0); }
.ts-acct-email { font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.04em; color: rgba(250, 244, 228, 0.96); word-break: break-all; }
.ts-acct-line { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.5; color: rgba(244, 239, 222, 0.74); }
.ts-acct-btn {
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.14em; text-transform: lowercase;
  padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 230, 190, 0.4);
  background: rgba(255, 240, 200, 0.08); color: rgba(255, 246, 224, 0.96); cursor: var(--cursor-thinkspace, pointer);
  transition: background 0.2s, border-color 0.2s;
}
.ts-acct-btn:hover { background: rgba(255, 240, 200, 0.16); border-color: rgba(255, 230, 190, 0.7); }
.ts-acct-link {
  font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.12em; text-transform: lowercase;
  background: none; border: none; text-align: left; padding: 4px 2px; color: rgba(244, 239, 222, 0.62);
  cursor: var(--cursor-thinkspace, pointer); transition: color 0.2s;
}
.ts-acct-link:hover { color: rgba(255, 246, 224, 0.95); }
.ts-acct-danger { color: rgba(224, 130, 130, 0.7); }
.ts-acct-danger:hover { color: rgba(240, 150, 150, 0.95); }
.ts-pricing, .ts-privacy {
  position: fixed; inset: 0; z-index: 62; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 6, 14, 0.82); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 400ms ease;
}
.ts-pricing.show, .ts-privacy.show { opacity: 1; }
.ts-pricing-card, .ts-privacy-card {
  width: min(420px, 88vw); text-align: center; padding: 38px 34px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 14, 28, 0.92), rgba(8, 7, 16, 0.86));
  border: 1px solid rgba(244, 239, 222, 0.16); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
}
.ts-pricing-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.28em; text-transform: lowercase; color: rgba(244, 239, 222, 0.5); margin-bottom: 14px; }
.ts-pricing-price { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px; color: rgba(250, 244, 228, 0.98); line-height: 1; }
.ts-pricing-price span { font-size: 18px; color: rgba(244, 239, 222, 0.55); }
.ts-pricing-list { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-direction: column; gap: 10px; }
.ts-pricing-list li { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: rgba(245, 238, 218, 0.9); }
.ts-pricing-go, .ts-pricing .ts-acct-google { width: 100%; padding: 13px; font-size: 15px; }
.ts-pricing-later { display: block; margin: 14px auto 0; background: none; border: none; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.14em; text-transform: lowercase; color: rgba(244, 239, 222, 0.45); cursor: var(--cursor-thinkspace, pointer); }
.ts-pricing-later:hover { color: rgba(244, 239, 222, 0.8); }
.ts-privacy-card { text-align: left; max-width: min(480px, 90vw); }
.ts-privacy-h { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: rgba(250, 244, 228, 0.98); margin-bottom: 14px; }
.ts-privacy-card p, .ts-privacy-card li { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; line-height: 1.6; color: rgba(245, 238, 218, 0.82); }
.ts-privacy-card ul { padding-left: 18px; margin: 12px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.ts-privacy-close { width: 100%; }
/* No italics in the innerverse (founder direction): the insight reads in
   the onboarding face, plain and clear. */
.iu-insight-txt { font-family: var(--font-main, 'VT323', monospace); font-style: normal; font-size: 17px; letter-spacing: 0.03em; line-height: 1.5; color: rgba(244, 239, 222, 0.8); text-shadow: 0 0 16px rgba(0, 0, 0, 0.6); }
/* The koan, enthroned: top of the universe, under a hand-drawn enso. */
.iu-koan {
  position: fixed; top: 66px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 640px; width: 88vw; text-align: center;
  z-index: 11; pointer-events: none;
  opacity: 0; transition: opacity 1100ms ease;
}
.iu-koan.on { opacity: 1; }
.iu-koan-enso { width: 34px; height: 34px; transform: rotate(-12deg); filter: drop-shadow(0 0 8px rgba(243, 208, 99, 0.25)); }
.iu-koan-text {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal; font-weight: 500;
  font-size: 21px; line-height: 1.45; color: rgba(248, 240, 218, 0.94);
  text-shadow: 0 0 22px rgba(243, 208, 99, 0.22), 0 0 16px rgba(0, 0, 0, 0.65);
}
@media (max-width: 760px) { .iu-koan { top: 58px; } .iu-koan-text { font-size: 17px; } }

/* The veil between session end and the constellation review: the journal
   never reappears once a session is complete. */
/* LAYERING CONTRACT for the post-session sequence (do not violate):
   journal chrome < veil(128) < reveal(130) < reading(132) < review(135).
   The bug this guards against: the reading once sat at z 60, opened UNDER
   the veil, and the flow waited forever on a card nobody could see -
   the founder's "complete blank dark screen" after ending a session. */
.session-veil {
  position: fixed; inset: 0; z-index: 128;
  background: radial-gradient(ellipse at 50% 40%, rgba(16, 13, 26, 0.97), rgba(3, 3, 9, 0.995) 70%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 700ms ease; pointer-events: none;
}
.session-veil.on { opacity: 1; pointer-events: auto; }
.sv-text {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 19px; color: rgba(244, 239, 222, 0.55);
  animation: svBreath 3200ms ease-in-out infinite;
}
@keyframes svBreath { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* The forming state: the honest empty sky. */
.iu-forming {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-family: var(--font-main, 'VT323', monospace); font-size: 19px;
  letter-spacing: 0.06em; text-transform: lowercase; text-align: center;
  color: rgba(244, 239, 222, 0.6); text-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
  z-index: 10; pointer-events: none; opacity: 0; transition: opacity 1200ms ease;
}
.iu-forming.on { opacity: 1; }
/* The observed line: the detector engine speaking arithmetic. */
.iu-observed {
  margin-top: 8px; font-family: var(--font-main, 'VT323', monospace);
  font-size: 15px; letter-spacing: 0.04em; text-transform: lowercase;
  color: rgba(255, 220, 170, 0.82); text-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
}

/* The art journal's single quiet cue. */
.aj-cue {
  position: fixed; top: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-main, 'VT323', monospace); font-size: 16px;
  letter-spacing: 0.08em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.55); text-shadow: 0 0 14px rgba(0, 0, 0, 0.7);
  z-index: 24; pointer-events: none; opacity: 0; transition: opacity 1200ms ease;
}
.aj-cue.on { opacity: 1; }
/* Flow book pages. */
.arc-flow-row {
  text-align: left; background: rgba(244, 239, 222, 0.035);
  border: 1px solid rgba(244, 239, 222, 0.12); border-radius: 6px;
  padding: 18px 22px; margin-bottom: 14px;
}
.arc-flow-still { display: block; max-width: 300px; border-radius: 4px; margin: 10px 0; border: 1px solid rgba(244, 239, 222, 0.1); }
.arc-flow-note { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: rgba(244, 239, 222, 0.75); margin-top: 6px; }
/* The art page replayer. */
.art-replay {
  position: fixed; inset: 0; z-index: 140; background: rgba(2, 3, 9, 0.97);
  opacity: 0; transition: opacity 600ms ease;
}
.art-replay.show { opacity: 1; }
.art-replay-canvas { position: absolute; inset: 0; }
.art-replay-close { position: absolute; top: 18px; right: 22px; }

/* The one emergence screen. */
.em-block { margin: 8px 0 18px; }
.em-head { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; color: rgba(248, 243, 228, 0.96); margin-bottom: 4px; }
.em-note { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(244, 239, 222, 0.55); margin-bottom: 12px; }
.em-themes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.em-theme { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; color: rgba(243, 208, 99, 0.92); border: 1px solid rgba(243, 208, 99, 0.3); border-radius: 999px; padding: 5px 16px; }
.iud-reading { color: rgba(248, 243, 228, 0.95); font-size: 16.5px; line-height: 1.6; }
.bp-cite { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.1em; color: rgba(120, 104, 70, 0.85); margin: -2px 0 12px; }
.bp-text em { color: #9a7b30; font-style: italic; }

/* Unlock reveal: every new world with its FULL rendered asset. */
.pu-grid { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 10px 0 22px; }
.pu-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pu-snap { width: 190px; height: 190px; filter: drop-shadow(0 0 26px rgba(255, 240, 210, 0.18)); animation: puBloom 1400ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pu-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; color: rgba(248, 243, 228, 0.97); text-transform: lowercase; }
.pu-const { width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--pc, #cdb68a) 0%, transparent 65%);
  filter: blur(6px); opacity: 0.8; animation: puBloom 1400ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
/* Insight dialog sections. */
.iud-sec { margin-bottom: 16px; }
.iud-sec-label { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 220, 170, 0.6); margin-bottom: 7px; }
.iud-sec-li { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15.5px; line-height: 1.55; color: rgba(248, 243, 228, 0.9); margin-bottom: 6px; }
.iud-quiet { color: rgba(244, 239, 222, 0.5); }
.iud-theme-row { margin-bottom: 10px; }
.iud-theme-nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: rgba(248, 243, 228, 0.95); }
.iud-theme-ct { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; color: rgba(255, 220, 170, 0.6); margin-left: 6px; }
/* The black hole answers with the universe. */
.iu-fact {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%);
  max-width: 560px; width: 88vw; text-align: center; z-index: 30; pointer-events: auto;
  opacity: 0; transition: opacity 900ms ease;
}
.iu-fact.on { opacity: 1; }
.iu-fact-txt { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1.6; color: rgba(244, 239, 222, 0.92); text-shadow: 0 0 24px rgba(0, 0, 0, 0.8); }
/* The universe, in one sentence, under the nameplate. */
.ivp-summary { margin-top: 8px; max-width: 320px; font-family: var(--font-main, 'VT323', monospace); font-size: 15px; line-height: 1.55; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(244, 239, 222, 0.78); }
.ivp-feeling { margin-top: 10px; max-width: 320px; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; line-height: 1.5; letter-spacing: 0.06em; text-transform: lowercase; color: rgba(216, 150, 140, 0.82); }

/* The portal unlock reveal: a glass membrane blooming. */
.portal-unlock .cr-title { text-transform: lowercase; }
.pu-bubble {
  position: relative; width: 150px; height: 150px; margin: 6px auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 38%, rgba(255,255,255,0.015) 62%, transparent 75%);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.12), inset -8px -12px 36px var(--pc, #cdb68a), 0 0 46px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  animation: puBloom 1600ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.pu-core {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--pc, #cdb68a); filter: blur(1px);
  box-shadow: 0 0 22px var(--pc, #cdb68a);
  animation: puCore 3200ms ease-in-out infinite;
}
@keyframes puBloom { 0% { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes puCore { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
/* Tonight's themes, flowing into their portals. */
.theme-grid { gap: 18px; }
.th-card {
  width: 210px; padding: 20px 22px; border-radius: 10px; text-align: center;
  background: rgba(244, 239, 222, 0.045); border: 1px solid rgba(244, 239, 222, 0.14);
}
.th-tag { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 220, 170, 0.6); margin-bottom: 8px; }
.th-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; color: rgba(248, 243, 228, 0.97); line-height: 1.2; }
.th-portal { margin-top: 9px; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.1em; text-transform: lowercase; }
/* The theme panel's edit row: the person's authority over their map. */
.iud-edit { display: flex; gap: 8px; margin-top: 14px; }
.iud-rename, .iud-merge {
  flex: 1; min-width: 0; background: rgba(6, 6, 14, 0.6);
  border: 1px solid rgba(244, 239, 222, 0.18); border-radius: 4px;
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px;
  color: rgba(244, 239, 222, 0.85); padding: 7px 9px; outline: none;
}
.iud-rename:focus { border-color: rgba(255, 232, 190, 0.6); }
.iud-theme-name { text-transform: lowercase; }

/* #8g: the post-session constellation review screen. */
.cr-review {
  position: fixed; inset: 0; z-index: 135;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 16, 32, 0.96), rgba(3, 3, 9, 0.99) 70%);
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
  opacity: 0; transition: opacity 900ms ease;
}
.cr-review.show { opacity: 1; }
.cr-inner { max-width: 920px; width: 92vw; text-align: center; padding: 6vh 2vw; }
.cr-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 222, 0.52); margin-bottom: 10px; }
.cr-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 42px); font-weight: 500; font-style: italic; color: rgba(248, 243, 228, 0.96); margin-bottom: 14px; }
.cr-note { font-family: var(--font-main, 'VT323', monospace); font-size: 18px; letter-spacing: 0.03em; color: rgba(244, 239, 222, 0.7); max-width: 560px; margin: 0 auto 40px; line-height: 1.65; }
.cr-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 46px; }
.cr-card { position: relative; width: 198px; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.cr-card.in { opacity: 1; transform: translateY(0); }
.cr-card.removed { opacity: 0.3; }
.cr-card.removed .cr-body { filter: grayscale(0.7) brightness(0.5); }
.cr-card.removed .cr-name { text-decoration: line-through; }
.cr-body { width: 132px; height: 132px; }
.cr-meta { margin-top: 4px; }
.cr-type { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
.cr-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: rgba(248, 243, 228, 0.97); line-height: 1.3; }
.cr-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; color: rgba(244, 239, 222, 0.58); margin-top: 6px; line-height: 1.45; }
.cr-remove { position: absolute; top: 2px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(244, 239, 222, 0.18); background: rgba(6, 6, 16, 0.7); color: rgba(244, 239, 222, 0.6); font-size: 15px; line-height: 1; cursor: var(--cursor-thinkspace, pointer); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.cr-remove:hover { border-color: rgba(224, 120, 110, 0.6); color: #e0786e; }
.cr-card.removed .cr-remove { background: rgba(224, 120, 110, 0.15); border-color: rgba(224, 120, 110, 0.4); color: #e0786e; }
.cr-done { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.16em; text-transform: lowercase; padding: 12px 32px; border-radius: 999px; border: 1px solid rgba(244, 239, 222, 0.35); background: rgba(244, 239, 222, 0.06); color: rgba(248, 243, 228, 0.92); cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s; }
.cr-done:hover { background: rgba(244, 239, 222, 0.14); border-color: rgba(244, 239, 222, 0.6); }

/* ─── #14 emergence screen: horizontal, collection-style per type ─────── */
.em-screen .cr-inner.em-inner { max-width: 1180px; width: 94vw; padding: 5vh 2vw 6vh; }
.em-section { margin: 0 0 34px; }
.em-section + .em-section { padding-top: 22px; border-top: 1px solid rgba(244, 239, 222, 0.10); }
.em-h {
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 17px; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: rgba(255, 242, 214, 0.92); margin: 0 0 4px;
}
.em-by {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 19px; color: rgba(244, 239, 222, 0.66); margin: 0 0 20px;
}
/* the horizontal collection row - scrolls sideways if it overflows */
.em-row {
  display: flex; gap: 22px; justify-content: center; align-items: flex-start;
  flex-wrap: wrap;
}
.em-card {
  position: relative; width: 210px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 246, 224, 0.05), rgba(255, 246, 224, 0.015));
  border: 1px solid rgba(244, 239, 222, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(14px);
  animation: emCardIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.em-card-self { width: 232px; }
.em-row .em-card:nth-child(2) { animation-delay: 90ms; }
.em-row .em-card:nth-child(3) { animation-delay: 180ms; }
.em-row .em-card:nth-child(4) { animation-delay: 270ms; }
.em-row .em-card:nth-child(5) { animation-delay: 360ms; }
@keyframes emCardIn { to { opacity: 1; transform: translateY(0); } }
.em-snap { width: 150px; height: 150px; filter: drop-shadow(0 0 26px rgba(255, 240, 210, 0.20)); }
.em-orb, .em-const {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--pc, #cdb68a), rgba(8, 8, 16, 0.9) 72%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--pc, #cdb68a) 50%, transparent);
}
.em-status {
  font-family: var(--font-main, 'VT323', monospace); font-size: 11px;
  letter-spacing: 0.18em; padding: 2px 9px; border-radius: 999px;
  align-self: center; margin-bottom: 2px;
}
.em-new { color: #0a0a12; background: rgba(255, 224, 150, 0.92); }
.em-updated { color: rgba(244, 239, 222, 0.85); background: rgba(244, 239, 222, 0.12); border: 1px solid rgba(244, 239, 222, 0.25); }
.em-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px;
  color: rgba(248, 243, 228, 0.97); line-height: 1.2; text-align: center;
}
.em-desc {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: rgba(244, 239, 222, 0.62);
  text-align: center; margin-top: 2px;
}
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.em-chip {
  font-family: var(--font-main, 'VT323', monospace); font-size: 12px;
  letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px;
  color: rgba(244, 239, 222, 0.78); background: rgba(244, 239, 222, 0.07);
  border: 1px solid rgba(244, 239, 222, 0.14);
}

/* during any session (think / art / flow) the home chrome is hidden so a session
   never renders on top of a live, clickable innerverse (the art-journal loop). */
.cosmos.in-session #cosmos-tabs,
.cosmos.in-session #iv-home-name,
.cosmos.in-session #iu-whatis,
.cosmos.in-session #iu-legend,
.cosmos.in-session #cosmos-reset {
  visibility: hidden !important; pointer-events: none !important;
}
/* the universe feelings-tint AND the post-session aurora belong to the innerverse,
   never inside a session - either bled a mustard/red wash over the think/flow
   screen (the aurora especially, if the next session began while it was still
   fading). Hidden whenever a session owns the screen. */
.cosmos.in-session #universe-weather,
.cosmos.in-session #cosmos-aurora { opacity: 0 !important; }
.cosmos-tabs {
  /* a vertical strip on the RIGHT edge (THINK, READ, FLOW, ADVICE top-to-bottom),
     centred so it clears the top-right profile + the bottom corners (volume left,
     reset right). Frees the whole screen for the worlds. No transform -> the wand
     cursor never reverts here. The full-height container is click-through; only the
     buttons take pointer events. */
  position: fixed;
  right: 14px;
  top: 0;
  bottom: 0;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  max-width: none;
  z-index: 12;
  pointer-events: none;
}
.cosmos-tabs > * { pointer-events: auto; }
.cosmos-tabs .cosmos-begin { width: 132px; justify-content: center; box-sizing: border-box; }
.cosmos-begin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 30px 12px;
  /* Solid-filled affordance - warm bone fill so it reads as the one clear
     way in, not a ghost outline. */
  background: rgba(244, 239, 222, 0.92);
  border: 1px solid rgba(255, 244, 220, 0.9);
  border-radius: 999px;
  color: rgba(10, 12, 18, 0.92);
  font-family: var(--font-main, 'VT323', monospace);
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: var(--cursor-thinkspace, pointer);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(255, 232, 190, 0.45), 0 0 64px rgba(255, 220, 170, 0.22);
  transition: opacity 600ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  z-index: 12;
}
.cosmos-begin.visible {
  opacity: 0.98;
  pointer-events: auto;
  /* #17: a slow breathing glow so the one way in quietly draws the eye. */
  animation: reflectGlow 3600ms ease-in-out infinite;
}
@keyframes reflectGlow {
  0%, 100% { box-shadow: 0 0 26px rgba(255, 232, 190, 0.40), 0 0 60px rgba(255, 220, 170, 0.18); }
  50%      { box-shadow: 0 0 40px rgba(255, 240, 205, 0.72), 0 0 96px rgba(255, 224, 178, 0.40); }
}
.cosmos-begin.visible:hover,
.cosmos-begin.visible:focus-visible { animation: none; }
.cosmos-begin:hover,
.cosmos-begin:focus-visible {
  background: rgba(255, 250, 236, 1);
  border-color: rgba(255, 240, 210, 1);
  color: rgba(6, 8, 12, 1);
  box-shadow: 0 0 30px rgba(255, 232, 190, 0.5);
  outline: none;
}
.cosmos-begin-cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: 700;
  animation: prefaceCursorBlink 1100ms steps(2, end) infinite;
}
/* PRACTICE - secondary (outlined) tab beside the filled THINK. */
.cosmos-practice {
  background: rgba(8, 10, 16, 0.42);
  border: 1px solid rgba(244, 239, 222, 0.34);
  color: rgba(244, 239, 222, 0.82);
  box-shadow: none;
}
.cosmos-practice:hover,
.cosmos-practice:focus-visible {
  background: rgba(16, 20, 28, 0.6);
  border-color: rgba(255, 230, 190, 0.7);
  color: rgba(255, 250, 232, 1);
  box-shadow: 0 0 22px rgba(255, 232, 190, 0.22);
}
.cosmos-practice[hidden] { display: none; }
/* Selected/open tab reads as solid-filled. */
.cosmos-practice.is-active {
  background: rgba(244, 239, 222, 0.92);
  color: rgba(10, 12, 18, 0.92);
  border-color: rgba(255, 244, 220, 0.9);
  box-shadow: 0 0 22px rgba(255, 232, 190, 0.28);
}
.cosmos-practice.is-active:hover { background: rgba(255, 250, 236, 1); color: rgba(6, 8, 12, 1); }

/* Practices chooser dialogue - opens on the same screen. */
.cosmos-practice-sheet {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  background: rgba(3, 6, 14, 0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 500ms ease;
}
.cosmos-practice-sheet.show { display: flex; opacity: 1; }
.cosmos-practice-card {
  width: min(92vw, 640px);
  text-align: center;
  padding: 8px 4px;
}
.cosmos-practice-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 28px);
  color: rgba(244, 240, 222, 0.95);
}
.cosmos-practice-note {
  margin-top: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: rgba(244, 239, 222, 0.74);
}
.cosmos-practice-grid {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 560px) { .cosmos-practice-grid { grid-template-columns: 1fr; } }
.cosmos-practice-opt {
  background: rgba(244, 239, 222, 0.04);
  border: 1px solid rgba(244, 239, 222, 0.16);
  border-radius: 8px;
  padding: 20px 18px;
  cursor: pointer; text-align: left;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.cosmos-practice-opt:hover {
  background: rgba(244, 239, 222, 0.08);
  border-color: rgba(255, 230, 190, 0.5);
  transform: translateY(-2px);
}
.cosmos-practice-opt-name {
  font-family: 'VT323', monospace; font-size: 17px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 244, 220, 0.95);
}
.cosmos-practice-opt-desc {
  margin-top: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px; line-height: 1.5;
  color: rgba(244, 239, 222, 0.6);
}
.cosmos-practice-close {
  margin-top: 26px;
  background: rgba(244, 239, 222, 0.08); border: 1px solid rgba(244, 239, 222, 0.4);
  border-radius: 999px; padding: 11px 30px;
  font-family: 'VT323', monospace; font-size: 17px;
  letter-spacing: 0.2em; text-transform: lowercase;
  color: rgba(244, 239, 222, 0.92); cursor: var(--cursor-thinkspace, pointer);
  transition: background 0.2s, border-color 0.2s;
}
.cosmos-practice-close:hover { background: rgba(244, 239, 222, 0.18); border-color: rgba(255, 236, 198, 0.7); color: rgba(255, 250, 232, 1); }

/* ─── inner readings space (saved reports) ───────────────────────────── */
.crs-list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; text-align: left; }
.crs-item {
  display: flex; align-items: baseline; gap: 16px;
  background: rgba(244, 239, 222, 0.04);
  border: 1px solid rgba(244, 239, 222, 0.14);
  border-radius: 6px; padding: 12px 16px; cursor: pointer; text-align: left;
  transition: background 200ms ease, border-color 200ms ease;
}
.crs-item:hover { background: rgba(244, 239, 222, 0.08); border-color: rgba(255, 230, 190, 0.5); }
.crs-date { font-family: 'VT323', monospace; font-size: 12px; letter-spacing: 0.18em; color: rgba(255, 226, 180, 0.7); flex: 0 0 auto; }
.crs-snip { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; color: rgba(244, 239, 222, 0.8); }
.crs-empty { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: rgba(244, 239, 222, 0.5); padding: 20px; text-align: center; }

/* "what is this?" hover primer, top-right of the home. */
.iu-whatis { position: fixed; top: 18px; right: 62px; height: 34px; display: flex; align-items: center; z-index: 13; opacity: 0; pointer-events: none; transition: opacity 600ms ease; }
.iu-whatis.on { opacity: 1; pointer-events: auto; }
.iu-whatis-btn { background: none; border: none; font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.16em; text-transform: lowercase; color: rgba(248, 244, 232, 0.92); cursor: var(--cursor-thinkspace, pointer); }
.iu-whatis-btn:hover { color: rgba(255, 250, 240, 1); }
.iu-whatis-card { position: absolute; top: 28px; right: 0; width: 340px; padding: 20px 22px; border-radius: 10px; background: rgba(8, 8, 16, 0.94); border: 1px solid rgba(244, 239, 222, 0.18); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 280ms ease, transform 280ms ease; }
.iu-whatis:hover .iu-whatis-card { opacity: 1; transform: translateY(0); }
.wic-h { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 220, 170, 0.7); margin: 12px 0 4px; }
.wic-h:first-child { margin-top: 0; }
.wic-p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; line-height: 1.55; color: rgba(248, 244, 232, 0.94); margin-bottom: 12px; }
.wic-p:last-child { margin-bottom: 0; }
/* reset-view button beside THINK. */
/* #7: moved to the bottom-right so it never sits on the volume slider
   (bottom-left) or the centered reflect button. */
.cosmos-reset { position: fixed; right: 26px; bottom: 26px; z-index: 12; padding: 9px 18px; border-radius: 999px; background: rgba(8, 10, 16, 0.5); border: 1px solid rgba(244, 239, 222, 0.28); color: rgba(244, 239, 222, 0.7); cursor: var(--cursor-thinkspace, pointer); opacity: 0; pointer-events: none; transition: opacity 600ms ease, color 0.2s, border-color 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.16em; text-transform: lowercase; backdrop-filter: blur(4px); }
.cosmos-reset:hover { color: rgba(248, 243, 228, 0.95); border-color: rgba(244, 239, 222, 0.5); background: rgba(12, 14, 22, 0.7); }
.cosmos-reset.on { opacity: 1; pointer-events: auto; }
.cosmos-reset:hover { color: rgba(255, 250, 232, 0.95); border-color: rgba(255, 230, 190, 0.6); }

/* hover-brighten any line in an insight dialog. */
.iud-hoverable .iud-sec-li, .iud-hoverable .iud-quote, .iud-hoverable .iud-reading { transition: color 0.18s ease, opacity 0.18s ease; }
.iud-hoverable .iud-sec-li:hover, .iud-hoverable .iud-quote:hover, .iud-hoverable .iud-reading:hover { color: rgba(255, 250, 236, 1); }
.iud-lead { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1.5; color: rgba(248, 243, 228, 0.96); margin: 4px 0 12px; transition: color 0.18s ease; }
.iud-lead:hover { filter: brightness(1.12); }
.iud-hl { color: #f3d063; }
.iud-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-family: var(--font-main, 'VT323', monospace); font-size: 20px; color: rgba(244, 239, 222, 0.5); cursor: var(--cursor-thinkspace, pointer); z-index: 2; }
.iud-close:hover { color: rgba(255, 250, 232, 0.95); }
/* hover-brighten ALL home text surfaces */
.ivp-summary, .ivp-name, .iu-koan-text, .iu-leg-row, .iu-chip { transition: color 0.18s ease, filter 0.18s ease; }
.ivp-summary:hover, .ivp-name:hover, .iu-koan-text:hover { filter: brightness(1.18); }
.ivp-summary em, .ivp-summary .ivp-role { color: rgba(243, 208, 99, 0.95); font-style: normal; }
/* book dialogue turns + koan treatment. */
.bp-turn { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.75; margin-bottom: 14px; color: rgba(40, 38, 56, 0.95); }
.bp-who { display: block; font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(110, 104, 134, 0.75); margin-bottom: 3px; }
.bp-turn-you { color: rgba(52, 50, 70, 0.82); }
.bp-koan-wrap { text-align: center; margin: 24px 0 8px; }
.bp-koan-mark { font-family: 'Songti SC','SimSun',serif; font-size: 30px; color: rgba(150, 130, 90, 0.55); line-height: 1; margin-bottom: 6px; }
.bp-koan-label { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.34em; color: rgba(120, 104, 70, 0.75); margin-bottom: 8px; }
/* advice symmetric + bullets. */
.adv-cards { align-items: stretch; }
.adv-card { display: flex; flex-direction: column; min-height: 220px; }
.adv-dot { color: rgba(255, 220, 170, 0.7); margin-right: 8px; }
.adv-empty { color: rgba(244, 239, 222, 0.4); }

/* THE BOOKSHELF: glowy white ethereal covers (readtab reference). */
.book-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 150px)); gap: 26px; justify-content: center; margin: 8px 0 26px; }
.book-cover {
  position: relative; width: 150px; aspect-ratio: 2 / 3; border-radius: 6px 10px 10px 6px; padding: 20px 16px 16px;
  border-left: 3px solid rgba(180, 172, 200, 0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(168deg, #f7f5f0 0%, #efece4 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 26px rgba(255, 250, 238, 0.28), 0 0 60px rgba(255, 250, 238, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: var(--cursor-thinkspace, pointer);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-cover:hover { transform: translateY(-4px); box-shadow: 0 0 38px rgba(255, 250, 238, 0.45), 0 0 80px rgba(255, 250, 238, 0.18), 0 14px 36px rgba(0, 0, 0, 0.5); }
.book-num { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: lowercase; color: rgba(120, 112, 144, 0.6); }
.book-sym { width: 30px; height: 30px; color: rgba(70, 66, 88, 0.55); }
.book-sym svg { width: 100%; height: 100%; }
.book-title { font-size: 16px; line-height: 1.25; color: rgba(58, 56, 78, 0.95); text-align: center; max-width: 100%; overflow-wrap: break-word; text-transform: lowercase; }
.book-date { font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(90, 86, 110, 0.62); }
.book-time { font-family: var(--font-main, 'VT323', monospace); font-size: 10.5px; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(90, 86, 110, 0.45); margin-top: 1px; }
/* Inside the book: white pages, horizontal turns, fullscreen. */
.book-overlay {
  position: fixed; inset: 0; z-index: 138; display: none;
  background: rgba(3, 4, 12, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 4vh 3vw;
  opacity: 0; transition: opacity 500ms ease;
}
.book-overlay.show { display: flex; opacity: 1; }
/* the end-of-session report: the SAME cream book-page as the book's first page,
   so the report is byte-identical in content + look. Scrollable + closeable. */
.session-report { position: fixed; inset: 0; z-index: 220; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 4vw; overflow-y: auto; background: rgba(3, 4, 12, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 450ms ease; }
.session-report.show { opacity: 1; }
/* THE SELF REVEAL - the recognition moment. Unfolds slowly: eyebrow -> figure ->
   reveal -> continue, so it lands like being seen, not like reading a card. */
.self-reveal { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; padding: 8vh 7vw; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, rgba(14,12,24,0.82), rgba(3,3,9,0.97) 76%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 1.6s ease; }
.self-reveal.show { opacity: 1; }
.srv-motes { position: absolute; inset: 0; pointer-events: none; }
.srv-mote { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--sc, #c9bfa0); box-shadow: 0 0 6px var(--sc, #c9bfa0); opacity: 0; animation: srvTwinkle 5s ease-in-out infinite; }
@keyframes srvTwinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } }
.srv-inner { position: relative; max-width: 720px; text-align: center; }
.srv-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.34em; text-transform: lowercase; color: rgba(245, 214, 120, 0.62); margin-bottom: 30px; opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease 0.5s, transform 1.4s ease 0.5s; }
.srv-figure { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(28px, 4vw, 40px); color: rgba(250, 244, 228, 0.99); line-height: 1.2; margin-bottom: 26px; opacity: 0; transform: translateY(10px); transition: opacity 1.6s ease 1.4s, transform 1.6s ease 1.4s; }
.srv-reveal { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.62; color: rgba(245, 238, 222, 0.93); opacity: 0; transform: translateY(10px); transition: opacity 1.8s ease 2.6s, transform 1.8s ease 2.6s; }
.srv-continue { display: inline-block; margin-top: 42px; background: none; border: 1px solid rgba(245, 214, 120, 0.4); border-radius: 999px; padding: 11px 26px; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.16em; text-transform: lowercase; color: rgba(245, 214, 120, 0.9); cursor: var(--cursor-thinkspace, pointer); pointer-events: auto; opacity: 0; transition: opacity 1.4s ease 4.6s, background 0.2s, border-color 0.2s; }
.srv-continue:hover { background: rgba(255, 240, 200, 0.1); border-color: rgba(255, 230, 190, 0.7); }
.self-reveal.show .srv-eyebrow, .self-reveal.show .srv-figure, .self-reveal.show .srv-reveal, .self-reveal.show .srv-continue { opacity: 1; transform: translateY(0); }
.session-report .sr-page { width: min(680px, 92vw); flex: none; }
.session-report .sr-close { position: absolute; top: 16px; right: 18px; background: none; border: 1px solid rgba(70, 64, 96, 0.3); border-radius: 999px; padding: 6px 16px; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.16em; text-transform: lowercase; color: rgba(70, 64, 96, 0.7); cursor: var(--cursor-thinkspace, pointer); z-index: 2; }
.session-report .sr-close:hover { color: rgba(40, 36, 60, 0.95); border-color: rgba(70, 64, 96, 0.6); }
.session-report .sr-saved-note { margin-top: 24px; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.08em; color: rgba(90, 84, 116, 0.7); text-align: center; }
.book-frame { position: relative; width: min(760px, 94vw); max-height: 88vh; display: flex; align-items: stretch; gap: 12px; }
.book-page {
  position: relative;
  flex: 1; overflow-y: auto; padding: 44px 46px 38px; border-radius: 8px;
  background: linear-gradient(170deg, #faf8f3 0%, #f1eee6 100%);
  box-shadow: 0 0 40px rgba(255, 250, 238, 0.2), 0 18px 60px rgba(0, 0, 0, 0.55);
  color: rgba(40, 38, 56, 0.96);
}
/* #8: a faint zen enso watermark behind every page, consistent across books. */
/* the Giacometti sculpture as a small, faint page watermark (replaces the
   circle/enso art the founder didn't want). */
.book-page::before {
  /* a deliberate, centred page watermark (was a small figure jammed in the corner,
     half-cut by the text, reading as random). Now a tall, very faint sculpture
     behind the whole page - intentional, elegant, never colliding with the text. */
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: auto; height: 82%; aspect-ratio: 1 / 2.4;
  pointer-events: none; z-index: 0; opacity: 0.045; filter: sepia(0.5) contrast(0.9);
  background: url("assets/art-Tate.png") center / contain no-repeat;
}
.book-page > * { position: relative; z-index: 1; }
.bp-head { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(110, 104, 134, 0.7); margin-bottom: 18px; }
.bp-head.bp-head-lg { font-size: 22px; font-weight: 700; letter-spacing: 0.16em; color: rgba(70, 64, 96, 0.95); margin-bottom: 22px; }
.bp-label { font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(150, 110, 60, 0.95); margin: 22px 0 8px; }
/* #8/#14 readability: the letter's EB Garamond, a touch larger, higher contrast. */
.bp-text { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.8; margin-bottom: 10px; color: rgba(40, 38, 56, 0.96); }
.bp-quiet { color: rgba(90, 86, 110, 0.6); }
.bp-koan { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 23px; line-height: 1.5; text-align: center; color: rgba(70, 62, 104, 0.98); margin: 14px 0 22px; }
.bp-enso { display: block; width: 54px; height: 54px; margin: 0 auto 6px; color: rgba(120, 100, 60, 0.7); }
.bp-li { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.7; margin-bottom: 6px; color: rgba(40, 38, 56, 0.95); }
.bp-li span { color: rgba(110, 104, 134, 0.75); margin-right: 6px; }
.bp-pre { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 17.5px; line-height: 1.8; white-space: pre-wrap; color: rgba(40, 38, 56, 0.95); }
.bp-poemline { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.7; text-align: center; }
.bp-still { display: block; max-width: 100%; border-radius: 6px; margin: 14px auto; background: #06070f; }
.bp-art-canvas { display: block; width: 100%; max-width: 520px; aspect-ratio: 16/10; border-radius: 6px; margin: 14px auto; background: #06070f; }
.bp-maximize { display: inline-block; margin: 0 auto; }
.bp-btn { display: block; margin: 18px auto 0; background: none; border: 1px solid rgba(110, 104, 134, 0.4); border-radius: 999px; padding: 9px 22px; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.14em; text-transform: lowercase; color: rgba(70, 66, 96, 0.85); cursor: var(--cursor-thinkspace, pointer); }
.bp-btn:hover { border-color: rgba(70, 66, 96, 0.8); }
.book-turn { align-self: center; width: 44px; height: 64px; border-radius: 8px; background: rgba(244, 239, 222, 0.06); border: 1px solid rgba(244, 239, 222, 0.18); color: rgba(244, 239, 222, 0.75); font-size: 28px; cursor: var(--cursor-thinkspace, pointer); }
.book-turn:disabled { opacity: 0.2; cursor: default; }
/* #9/#15: a clear labelled close, large enough to hit, never confused with
   the fullscreen toggle. */
.book-x { position: absolute; top: -42px; right: 0; z-index: 3; background: rgba(244, 239, 222, 0.08); border: 1px solid rgba(244, 239, 222, 0.4); border-radius: 999px; padding: 7px 20px; color: rgba(244, 239, 222, 0.9); font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.18em; text-transform: lowercase; cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s; }
.book-x:hover { background: rgba(244, 239, 222, 0.18); border-color: rgba(244, 239, 222, 0.7); }
.book-full { position: absolute; top: -40px; right: 96px; z-index: 3; background: none; border: none; color: rgba(244, 239, 222, 0.5); font-size: 18px; cursor: var(--cursor-thinkspace, pointer); }
.book-full:hover { color: rgba(244, 239, 222, 0.85); }
.book-count { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.2em; color: rgba(244, 239, 222, 0.5); }

/* The read room's two shelves: readings (papers to return to) and the
   sessions record. One purpose per shelf, generous type. */
.arc-shelves { display: flex; gap: 8px; justify-content: center; margin: 4px 0 22px; }
.arc-shelf-btn {
  font-family: var(--font-main, 'VT323', monospace); font-size: 17px; letter-spacing: 0.14em;
  text-transform: lowercase; padding: 8px 24px; border-radius: 999px;
  border: 1px solid rgba(244, 239, 222, 0.22); background: transparent;
  color: rgba(244, 239, 222, 0.6); cursor: var(--cursor-thinkspace, pointer);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.arc-shelf-btn:hover { color: rgba(248, 243, 228, 0.95); border-color: rgba(244, 239, 222, 0.45); }
.arc-shelf-btn.on { background: rgba(244, 239, 222, 0.12); border-color: rgba(244, 239, 222, 0.55); color: rgba(248, 243, 228, 1); }
.arc-spine-readings { display: flex; flex-direction: column; gap: 14px; }
.arc-reading-row {
  text-align: left; background: rgba(244, 239, 222, 0.035);
  border: 1px solid rgba(244, 239, 222, 0.12); border-radius: 6px;
  padding: 18px 22px; cursor: var(--cursor-thinkspace, pointer);
  transition: border-color 0.2s, background 0.2s;
}
.arc-reading-row:hover { border-color: rgba(255, 220, 170, 0.5); background: rgba(244, 239, 222, 0.06); }
.arc-reading-date { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 220, 170, 0.7); margin-bottom: 7px; }
.arc-reading-nature { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.45; color: rgba(248, 243, 228, 0.94); }
.arc-reading-koan { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.45; color: rgba(243, 208, 99, 0.8); margin-top: 7px; }

/* The journal: one page at a time, turned. */
.arc-journal { display: flex; align-items: stretch; gap: 14px; }
.arc-journal-page {
  flex: 1; text-align: left; background: rgba(244, 239, 222, 0.04);
  border: 1px solid rgba(244, 239, 222, 0.14); border-radius: 8px;
  padding: 26px 30px; cursor: var(--cursor-thinkspace, pointer);
  transition: border-color 0.2s, background 0.2s;
}
.arc-journal-page:hover { border-color: rgba(255, 220, 170, 0.5); background: rgba(244, 239, 222, 0.07); }
.arc-journal-open { margin-top: 16px; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255, 220, 170, 0.7); }
.arc-page-turn {
  flex: 0 0 44px; border-radius: 8px; border: 1px solid rgba(244, 239, 222, 0.14);
  background: transparent; color: rgba(244, 239, 222, 0.6); font-size: 26px;
  cursor: var(--cursor-thinkspace, pointer); transition: border-color 0.2s, color 0.2s;
}
.arc-page-turn:hover:not(:disabled) { color: rgba(255, 250, 232, 0.95); border-color: rgba(255, 220, 170, 0.5); }
.arc-page-turn:disabled { opacity: 0.25; cursor: default; }
.arc-journal-count { text-align: center; margin-top: 12px; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.2em; color: rgba(244, 239, 222, 0.45); }

/* ADVICE: three artful cards, hand-drawn symbols, a real checklist. */
.adv-sheet { max-width: 1000px; width: 94vw; }
.adv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin: 6px 0 10px; }
.adv-card {
  text-align: left; min-width: 0;
  background: rgba(244, 239, 222, 0.04); border: 1px solid rgba(244, 239, 222, 0.13);
  border-radius: 10px; padding: 20px 20px 16px;
}
@media (max-width: 720px) { .adv-cards { grid-template-columns: 1fr; } }
.adv-sym { width: 34px; height: 34px; color: rgba(255, 220, 170, 0.75); margin-bottom: 10px; }
.adv-sym svg { width: 100%; height: 100%; }
.adv-label { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 220, 170, 0.65); margin-bottom: 12px; }
.adv-li { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; line-height: 1.45; color: rgba(248, 243, 228, 0.92); margin-bottom: 9px; }
.adv-li.done { color: rgba(244, 239, 222, 0.42); text-decoration: line-through; }
.adv-check { display: flex; gap: 10px; align-items: flex-start; cursor: var(--cursor-thinkspace, pointer); margin-bottom: 9px; }
.adv-check input { display: none; }
.adv-box { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; border: 1px solid rgba(255, 220, 170, 0.5); border-radius: 3px; position: relative; }
.adv-check input:checked + .adv-box { background: rgba(255, 220, 170, 0.25); }
.adv-check input:checked + .adv-box::after { content: '\2713'; position: absolute; left: 2px; top: -3px; color: rgba(255, 232, 190, 0.95); font-size: 14px; }
.adv-check .adv-li { margin-bottom: 0; }
/* Flow groups: creative | spiritual. */
.flow-group-label { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 220, 170, 0.5); margin: 18px 0 10px; text-align: center; }

/* The reminders sheet: at most a handful of lines, never a wall. */
.rem-card { max-width: 560px; }
.rem-sec { margin: 0 0 20px; text-align: left; }
.rem-label { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 220, 170, 0.65); margin-bottom: 9px; }
.rem-li { display: flex; gap: 10px; align-items: flex-start; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.55; color: rgba(248, 243, 228, 0.92); margin-bottom: 7px; }
.rem-mark { font-family: var(--font-main, 'VT323', monospace); color: rgba(255, 220, 170, 0.7); flex-shrink: 0; line-height: 1.55; }
.crs-spawn {
  margin-top: 24px;
  background: rgba(244, 239, 222, 0.92); color: rgba(10, 12, 18, 0.92);
  border: none; border-radius: 999px; padding: 11px 28px 12px;
  font-family: 'VT323', monospace; font-size: 15px;
  letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 22px rgba(255, 232, 190, 0.28);
}
.crs-spawn:hover { background: rgba(255, 250, 236, 1); }

/* ─── node view (tapping a body in the Inner Universe) ────────────────── */
.csv-card.nodeview { max-width: 460px; text-align: left; }
.nv-type { font-family: 'VT323', monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 226, 180, 0.62); }
.nv-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; color: rgba(255, 250, 236, 0.97); margin: 8px 0 14px; }
.nv-domains { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.nv-dom { font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(198, 212, 240, 0.7); border: 1px solid rgba(198, 212, 240, 0.22); border-radius: 999px; padding: 3px 10px; }
.nv-quotes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.nv-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.45; color: rgba(244, 239, 222, 0.72); border-left: 1px solid rgba(244, 239, 222, 0.2); padding-left: 12px; }
.nv-actions { display: flex; gap: 12px; align-items: center; }
.nv-archive { background: rgba(255, 226, 180, 0.1); border: 1px solid rgba(255, 226, 180, 0.4); border-radius: 999px; color: rgba(255, 244, 220, 0.95); font-family: 'VT323', monospace; font-size: 13px; letter-spacing: 0.14em; padding: 8px 18px; cursor: var(--cursor-thinkspace, pointer); }
.nv-archive:hover { background: rgba(255, 226, 180, 0.18); }
.nv-close { background: none; border: none; color: rgba(244, 239, 222, 0.5); font-family: 'VT323', monospace; font-size: 12px; letter-spacing: 0.16em; cursor: var(--cursor-thinkspace, pointer); }
.nv-close:hover { color: rgba(244, 239, 222, 0.85); }

/* ─── the Archive (memory view) ──────────────────────────────────────── */
.cosmos-archive-inner { width: min(680px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
.arc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 6px; }
.arc-chip { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(244, 239, 222, 0.18); border-radius: 999px; color: rgba(244, 239, 222, 0.65); font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.12em; padding: 5px 12px; cursor: var(--cursor-thinkspace, pointer); }
.arc-chip.on { border-color: rgba(255, 226, 180, 0.6); color: rgba(255, 248, 232, 0.95); }
.arc-chip-dot { width: 7px; height: 7px; border-radius: 50%; }
.arc-spine { position: relative; margin: 16px 0; padding-left: 22px; overflow-y: auto; flex: 1; }
.arc-spine::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(rgba(244, 239, 222, 0.04), rgba(244, 239, 222, 0.22), rgba(244, 239, 222, 0.04)); }
.arc-month { font-family: 'VT323', monospace; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 222, 0.4); margin: 18px 0 10px -22px; padding-left: 22px; }
.arc-row { position: relative; margin-bottom: 12px; }
.arc-dot { position: absolute; left: -20px; top: 14px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.arc-card { display: block; width: 100%; text-align: left; background: rgba(244, 239, 222, 0.03); border: 1px solid rgba(244, 239, 222, 0.12); border-radius: 8px; padding: 12px 15px; cursor: var(--cursor-thinkspace, pointer); transition: border-color 200ms ease, background 200ms ease; }
.arc-card:hover { border-color: rgba(255, 226, 180, 0.4); background: rgba(244, 239, 222, 0.06); }
.arc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.arc-domain { font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.arc-date { font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(244, 239, 222, 0.5); }
.arc-wisdom { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.4; color: rgba(255, 250, 236, 0.92); }
.arc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.arc-tag { font-family: 'VT323', monospace; font-size: 10px; letter-spacing: 0.08em; color: rgba(244, 239, 222, 0.45); background: rgba(244, 239, 222, 0.05); border-radius: 4px; padding: 2px 7px; }
.arc-detail { overflow: hidden; max-height: 0; transition: max-height 320ms ease; }
.arc-detail.open { max-height: 60vh; margin-top: 8px; overflow-y: auto; }
.arc-subtabs { display: flex; gap: 8px; margin: 4px 0 10px; }
.arc-subtab { background: none; border: none; border-bottom: 1px solid transparent; color: rgba(244, 239, 222, 0.55); font-family: 'VT323', monospace; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 2px; cursor: var(--cursor-thinkspace, pointer); }
.arc-subtab.on { color: rgba(255, 244, 220, 0.95); border-bottom-color: rgba(255, 226, 180, 0.6); }
.arc-w-line { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.65; color: rgba(244, 239, 222, 0.88); margin: 0 0 10px; }
.arc-w-line em { color: #f3d063; font-style: italic; }
.arc-w-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 239, 222, 0.38); margin-bottom: 8px; }
.arc-w-src { font-family: 'VT323', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 239, 222, 0.4); }
.arc-transcript { white-space: pre-wrap; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; line-height: 1.55; color: rgba(244, 239, 222, 0.74); margin: 0; }
.arc-scribble-note { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: rgba(244, 239, 222, 0.5); }
.arc-play { background: rgba(255, 226, 180, 0.1); border: 1px solid rgba(255, 226, 180, 0.4); border-radius: 999px; color: rgba(255, 244, 220, 0.95); font-family: 'VT323', monospace; font-size: 12px; letter-spacing: 0.14em; padding: 7px 16px; cursor: var(--cursor-thinkspace, pointer); }
/* Footer stacks vertically + centered so the spawn pill, its description, and
   the close link line up cleanly (was a mis-baselined row). */
.arc-foot { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; padding-top: 18px; }
.arc-spawn-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.arc-spawn { background: rgba(244, 239, 222, 0.9); color: rgba(10, 12, 18, 0.92); border: none; border-radius: 999px; padding: 9px 22px; font-family: 'VT323', monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; cursor: var(--cursor-thinkspace, pointer); }
.arc-spawn:hover { background: rgba(255, 250, 236, 1); }
.arc-spawn:disabled { opacity: 0.38; cursor: default; }
.arc-spawn:disabled:hover { background: rgba(244, 239, 222, 0.9); }
.arc-spawn-note { font-family: var(--font-main, 'VT323', monospace); font-size: 12px; letter-spacing: 0.05em; line-height: 1.45; color: rgba(244, 239, 222, 0.42); text-align: center; max-width: 340px; }
/* Read description in the onboarding font (VT323), not the serif of the practice sheet. */
.cosmos-archive-inner .cosmos-practice-note { font-family: var(--font-main, 'VT323', monospace); font-style: normal; font-size: 14px; letter-spacing: 0.04em; }

/* ─── saved-star view (chooser / playback / journal) ─────────────────── */
.cosmos-star-view {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  background: rgba(3, 6, 14, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 360ms ease;
  overflow-y: auto;
}
.cosmos-star-view.show { display: flex; opacity: 1; }
.csv-card {
  width: min(92vw, 560px);
  margin: 6vh auto; text-align: center;
}
.csv-card--wide { width: min(94vw, 820px); }
.csv-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  color: rgba(255, 248, 230, 0.96);
  letter-spacing: 0.02em;
}
.csv-opts { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.csv-opt {
  background: rgba(244, 239, 222, 0.04);
  border: 1px solid rgba(244, 239, 222, 0.16);
  border-radius: 8px; padding: 18px 22px;
  cursor: pointer; text-align: left;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.csv-opt:hover:not([disabled]) {
  background: rgba(244, 239, 222, 0.08);
  border-color: rgba(255, 230, 190, 0.5);
  transform: translateY(-2px);
}
.csv-opt[disabled] { opacity: 0.32; cursor: default; }
.csv-opt-name {
  font-family: 'VT323', monospace; font-size: 16px;
  letter-spacing: 0.22em; color: rgba(255, 244, 220, 0.95);
}
.csv-opt-desc {
  margin-top: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px; color: rgba(244, 239, 222, 0.6);
}
.csv-close, .csv-dl {
  margin-top: 24px; background: none; border: none;
  font-family: 'VT323', monospace; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 222, 0.5); cursor: pointer;
}
.csv-close:hover, .csv-dl:hover { color: rgba(255, 250, 232, 0.95); }
.csv-actions { display: flex; gap: 26px; justify-content: center; }
.csv-journal {
  margin-top: 24px; text-align: left;
  max-height: 64vh; overflow-y: auto;
  padding: 4px 8px;
}
.csv-line { margin-bottom: 18px; }
.csv-who {
  display: block;
  font-family: 'VT323', monospace; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 5px;
}
.csv-line--you .csv-who { color: rgba(255, 226, 180, 0.7); }
.csv-line--ts  .csv-who { color: rgba(184, 200, 255, 0.7); }
.csv-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px; line-height: 1.55;
  color: rgba(244, 240, 222, 0.94);
}

/* The chooser is a light dialog that doesn't overpower - a dimmed backdrop,
   not an opaque cover. The content views may be maximised. */
.cosmos-star-view.is-chooser { background: rgba(3, 6, 14, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cosmos-star-view.is-chooser .csv-card {
  background: rgba(8, 10, 18, 0.78);
  border: 1px solid rgba(244, 239, 222, 0.14);
  border-radius: 12px;
  padding: 26px 28px; margin: auto;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  width: min(92vw, 600px);
}
.csv-stamp {
  font-family: 'VT323', monospace; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244, 239, 222, 0.5); margin-bottom: 10px;
}
.csv-opts--row { flex-direction: row; gap: 12px; }
.csv-opts--row .csv-opt { flex: 1; text-align: center; padding: 16px 12px; }
.csv-opts--row .csv-opt-desc { font-size: 12.5px; }
@media (max-width: 560px) { .csv-opts--row { flex-direction: column; } }

/* Journal + Wisdom views: the beige "paper" of the production inner-reading
   report, so revisiting an entry feels like opening a kept page. */
.csv-card--report {
  background: linear-gradient(180deg, #f3ecd9 0%, #ece2c9 100%);
  color: #2a2417;
  border-radius: 8px;
  padding: 40px clamp(24px, 4vw, 56px) 30px;
  margin: 6vh auto;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
  width: min(94vw, 720px);
}
.csv-report-head {
  font-family: 'VT323', monospace; font-size: 14px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(60, 50, 30, 0.7); text-align: center; margin-bottom: 8px;
}
.csv-report-body { margin-top: 18px; text-align: left; max-height: 62vh; overflow-y: auto; }
.csv-card--report .csv-sub { color: rgba(60, 50, 30, 0.6); text-align: center; }
.csv-card--report .csv-journal { max-height: 60vh; }
.csv-card--report .csv-text { color: #2a2417; }
.csv-card--report .csv-line--you .csv-who { color: #9a6a2a; }
.csv-card--report .csv-line--ts  .csv-who { color: #5a6a9a; }
.csv-card--report .csv-close, .csv-card--report .csv-dl { color: rgba(60, 50, 30, 0.6); }
.csv-card--report .csv-close:hover, .csv-card--report .csv-dl:hover { color: rgba(40, 30, 15, 0.95); }
.csv-wisdom-bowl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px; line-height: 1.7; color: #2a2417;
  padding: 14px 0; border-bottom: 1px solid rgba(60, 50, 30, 0.12);
}
.csv-wisdom-bowl:last-child { border-bottom: none; }
.csv-playback { margin-top: 22px; }
.csv-sub {
  margin-top: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 14px; color: rgba(244, 239, 222, 0.55);
}

/* Saved-star hover: cursor + floating tooltip. */
.cosmos.is-star-hover { cursor: pointer; }
.cosmos-star-tip {
  position: fixed; z-index: 50; pointer-events: none;
  max-width: 230px;
  background: rgba(8, 10, 18, 0.9);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(244, 239, 222, 0.16);
  border-radius: 7px; padding: 10px 13px;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transition: opacity 200ms ease;
}
.cosmos-star-tip.show { opacity: 1; }
/* The node name is the person's own words - serif, readable, prominent. */
.cst-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; line-height: 1.25; color: rgba(255, 248, 232, 0.97); }
/* The node type tag (feeling / open question / ...): small, muted amber. */
.cst-type { font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 226, 180, 0.62); }
/* The domains this spans: a distinct cool, quiet line. */
.cst-context { font-family: 'VT323', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(198, 212, 240, 0.6); }
/* The person's own quote: italic, set apart with a soft left rule. */
.cst-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 13px; line-height: 1.4; color: rgba(244, 239, 222, 0.6);
  border-left: 1px solid rgba(244, 239, 222, 0.18); padding-left: 8px; margin-top: 1px; }

/* koan-status bowl retired: the koan is text on the insight bar now. */

/* Ripples echoing across the galaxy when the user speaks into the space. */
.cosmos-ripple {
  position: fixed;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  /* A soft warm ring (the galaxy's own light), not a bright flash. */
  border: 1px solid rgba(255, 226, 180, 0.26);
  pointer-events: none;
  z-index: 8;
  /* Slow and gentle - a felt swell you can follow outward, not a snap. */
  animation: cosmosRipple 5600ms ease-out forwards;
}
@keyframes cosmosRipple {
  0%   { transform: scale(0.3); opacity: 0.0; }
  18%  { opacity: 0.3; }
  100% { transform: scale(20); opacity: 0; }
}

/* ─── FLOW / SEEK home chooser ──────────────────────────────────────── */
/* No panel chrome - the cosmos itself is the backdrop. The prompt and
   the two buttons sit alone in space, VT323 cadence, calm spacing.
   Buttons are billboard-style (looks like 3D text) but rendered in DOM. */
.cosmos-mode-chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  pointer-events: auto;
}
.cosmos-mode-chooser .cosmos-mode-question {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.7vw, 23px);
  letter-spacing: 0.06em;
  color: rgba(244, 239, 222, 0.92);
  text-shadow:
    0 0 12px rgba(244, 239, 222, 0.30),
    0 0 28px rgba(255, 220, 180, 0.16);
  text-align: center;
}
.cosmos-mode-buttons {
  display: flex;
  gap: 36px;
  transition: opacity 700ms ease;
}
.cosmos-mode-buttons.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.cosmos-mode-buttons.is-revealing {
  opacity: 1;
  pointer-events: auto;
}
.cosmos-mode-btn {
  background: transparent;
  border: 1px solid rgba(244, 239, 222, 0.30);
  border-radius: 2px;
  padding: 10px 26px 11px;
  color: rgba(244, 239, 222, 0.88);
  font-family: var(--font-main);
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: var(--cursor-thinkspace, pointer);
  transition: background 200ms ease, color 160ms ease, border-color 160ms ease, text-shadow 200ms ease;
}
.cosmos-mode-btn:hover,
.cosmos-mode-btn:focus-visible {
  background: rgba(244, 239, 222, 0.06);
  border-color: rgba(244, 239, 222, 0.80);
  color: rgba(255, 250, 232, 1);
  text-shadow:
    0 0 8px rgba(255, 230, 180, 0.70),
    0 0 22px rgba(255, 210, 160, 0.35);
  outline: none;
}
.cosmos-mode-btn .underscore {
  display: inline-block;
  margin-left: 4px;
  animation: prefaceCursorBlink 1100ms steps(2, end) infinite;
}
.cosmos-mode-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(12px, 1.0vw, 14px);
  color: rgba(244, 239, 222, 0.55);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Fade-in helper for staggered onboarding text (chooser, dialogue) so
   sentences settle one after another instead of all snapping in. The
   per-class delay variants pace each line. */
.fade-in {
  opacity: 0;
  animation: fadeInSoft 1100ms ease forwards;
}
.fade-delayed-1 { animation-delay: 1100ms; }
.fade-delayed-2 { animation-delay: 1900ms; }
@keyframes fadeInSoft {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Practice prelude - one Cormorant italic line above the practice
   buttons that ties the choice back to the user's recent journal. */
.cosmos-mode-prelude {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(14px, 1.25vw, 17px);
  color: rgba(244, 240, 222, 0.78);
  text-align: center;
  letter-spacing: 0.01em;
  max-width: 32ch;
  line-height: 1.4;
}

/* Inner Map body - calm read-out of the intelligence layer. */
.cosmos-map-body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
  color: rgba(244, 240, 222, 0.92);
  text-align: center;
  letter-spacing: 0.01em;
}
.cosmos-map-body b {
  font-weight: 600;
  color: rgba(255, 232, 192, 1);
  font-style: italic;
}

/* Entry card "noticed -" meta footer (intelligence read of the entry). */
.cosmos-entry-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(230, 225, 211, 0.12);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(230, 225, 211, 0.72);
  text-align: center;
}
.entry-meta-label {
  font-family: var(--font-main);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.78);
  margin-right: 4px;
}
.cosmos-entry-header { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cosmos-entry-summary {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 13.5px;
  color: rgba(230, 225, 211, 0.85);
  text-align: center;
}
.cosmos-entry-practice { display: flex; flex-direction: column; gap: 6px; }
.cosmos-entry-pracname {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.75);
  text-align: center;
}

/* Name input - looks like a typewriter line, not a web form. */
.cosmos-input {
  width: min(76vw, 380px);
  text-align: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(230, 225, 211, 0.45);
  padding: 6px 4px;
  font-family: var(--font-main);
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.06em;
  color: var(--ink-bright);
  outline: none;
  caret-color: rgba(255, 230, 190, 0.95);
  text-shadow: 0 0 6px rgba(255, 230, 190, 0.30);
}
.cosmos-input::placeholder {
  color: rgba(230, 225, 211, 0.32);
  font-style: italic;
}

/* Volume control - fixed bottom-left, quiet, expands on hover. */
.cosmos-volume {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(8, 6, 18, 0.55);
  border: 1px solid rgba(230, 225, 211, 0.18);
  border-radius: 22px;
  color: rgba(230, 225, 211, 0.74);
  backdrop-filter: blur(3px);
  transition: opacity 800ms ease;
  opacity: 0.55;
}
.cosmos-volume:hover { opacity: 1.0; }
.cosmos-volume-mute {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cosmos-volume-mute.muted #cosmos-volume-wave { display: none; }
/* #20: a thicker track + larger thumb + taller hit area so the slider is
   easy to grab and adjust without straining. */
.cosmos-volume-slider {
  -webkit-appearance: none; appearance: none;
  width: 112px; height: 6px;
  background: rgba(230, 225, 211, 0.36);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.cosmos-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 230, 190, 0.95);
  box-shadow: 0 0 8px rgba(255, 220, 170, 0.9);
  cursor: pointer;
}
.cosmos-volume-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 230, 190, 0.92);
  box-shadow: 0 0 6px rgba(255, 220, 170, 0.85);
  cursor: pointer;
}

/* Wisdom card - appears when the user taps an empty patch of sky.
   Click-outside-to-close (no explicit close button - minimal chrome).
   The wisdom line is the body; the attribution is the divider below. */
.cosmos-fact {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  width: min(80vw, 460px);
  padding: 26px 30px 22px;
  background: rgba(8, 6, 18, 0.82);
  border: 1px solid rgba(230, 225, 211, 0.18);
  border-radius: 6px;
  text-align: center;
  color: var(--ink-bright);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.6);
}
.cosmos-fact.visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}
.cosmos-fact-body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.55;
  color: rgba(244, 240, 222, 0.95);
  margin-bottom: 14px;
}
.cosmos-fact-attr {
  font-family: var(--font-main);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.72);
}

/* HOME icon - top-right.  Fades in only when user is away from the
   default galaxy vantage (inside a region, mid-session, etc). */
.cosmos-home {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(8, 6, 18, 0.6);
  border: 1px solid rgba(230, 225, 211, 0.25);
  color: rgba(230, 225, 211, 0.78);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease, color 240ms ease, border-color 240ms ease;
  backdrop-filter: blur(4px);
  z-index: 11;
}
.cosmos-home.visible { opacity: 0.85; pointer-events: auto; }
.cosmos-home:hover  { opacity: 1; color: var(--ink-bright); border-color: rgba(255, 230, 190, 0.55); }

/* Drawing canvas overlay - covers full screen when active. */
.cosmos-doodle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
  z-index: 5;
  cursor: crosshair;
}
.cosmos-doodle.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: var(--cursor-paint);   /* paint blob while drawing */
}

/* Doodle toolbar - bottom strip.  RESTART + colour swatches sit
   together above a single bold SAVE STAR primary CTA. */
.cosmos-doodle-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.cosmos-doodle-tools {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: rgba(8, 6, 18, 0.55);
  border: 1px solid rgba(230, 225, 211, 0.14);
  border-radius: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* FLOW mic button: visible icon with cosmic glow. Pulses while recording. */
.cosmos-doodle-mic-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  color: rgba(244, 239, 222, 0.85) !important;
}
.cosmos-doodle-mic-btn:hover,
.cosmos-doodle-mic-btn:focus-visible {
  background: rgba(244, 239, 222, 0.08) !important;
  color: rgba(255, 250, 232, 1) !important;
}
.cosmos-doodle-mic-btn.is-recording {
  border-color: rgba(255, 200, 160, 0.75) !important;
  color: rgba(255, 230, 190, 1) !important;
  animation: micBtnPulse 1400ms ease-in-out infinite;
}
@keyframes micBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 160, 0.30); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 200, 160, 0.0); }
}
.cosmos-btn-primary {
  font-size: clamp(14px, 1.2vw, 16px) !important;
  padding: 10px 28px !important;
  letter-spacing: 0.24em !important;
  /* Warm amber-on-dark, consistent with the rest of thinkspace (no purple). */
  background: rgba(46, 38, 28, 0.7) !important;
  border-color: rgba(255, 230, 190, 0.55) !important;
  color: var(--ink-bright) !important;
  text-shadow: 0 0 8px rgba(255, 230, 190, 0.55) !important;
}
.cosmos-btn-primary:hover {
  background: rgba(70, 56, 36, 0.82) !important;
  box-shadow: 0 0 22px rgba(255, 230, 190, 0.35);
}
.cosmos-swatches {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.cosmos-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(230, 225, 211, 0.28);
  cursor: pointer;
  outline: none;
  transition: transform 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease;
}
.cosmos-swatch:hover { transform: scale(1.12); border-color: rgba(255, 230, 190, 0.65); }
.cosmos-swatch.is-selected {
  transform: scale(1.18);
  border-color: rgba(255, 250, 220, 0.95);
  box-shadow: 0 0 10px rgba(255, 230, 190, 0.55);
}

/* Entry card - shown when a user-star inside an active constellation
   is clicked.  Displays the saved doodle or AI transcript. */
.cosmos-entry {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(82vw, 600px);
  max-height: 80vh;
  padding: 22px 26px 24px;
  background: rgba(8, 6, 18, 0.92);
  border: 1px solid rgba(230, 225, 211, 0.20);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.6);
  color: var(--ink-bright);
  font-family: var(--font-main);
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, width 320ms ease, max-height 320ms ease;
  overflow-y: auto;
}
.cosmos-entry.visible { opacity: 1; pointer-events: auto; }
.cosmos-entry.is-expanded {
  width: 92vw;
  max-height: 88vh;
}
.cosmos-entry-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(230, 225, 211, 0.22);
  border-radius: 4px;
  color: rgba(230, 225, 211, 0.70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease, border-color 200ms ease;
  z-index: 2;
}
.cosmos-entry-expand:hover {
  color: var(--ink-bright);
  border-color: rgba(255, 230, 190, 0.55);
}

/* NOTICED - the primary intelligence block.  Sits below summary,
   ABOVE the raw entry body.  Larger + more prominent than body. */
.cosmos-entry-noticed {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(255, 220, 170, 0.06);
  border-left: 2px solid rgba(255, 220, 170, 0.62);
  border-radius: 0 4px 4px 0;
}
.cosmos-entry-noticed:empty { display: none; }
.entry-noticed-label {
  font-family: var(--font-main);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.88);
  margin-bottom: 6px;
}
.entry-noticed-body {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(248, 244, 226, 0.96);
}

.cosmos-entry-label {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(230, 225, 211, 0.65);
  text-transform: uppercase;
  text-align: center;
}
.cosmos-entry-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}
.cosmos-entry-doodle {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}
.cosmos-entry-transcript { display: flex; flex-direction: column; gap: 12px; }
.cosmos-entry-turn { display: flex; flex-direction: column; gap: 4px; }
.cosmos-entry-role {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.55);
}
.cosmos-entry-turn.is-user .cosmos-entry-role { color: rgba(255, 220, 170, 0.78); }
.cosmos-entry-text {
  font-family: var(--font-fine);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-bright);
}
.cosmos-entry-turn.is-guide .cosmos-entry-text {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 16px;
}
.cosmos-entry-close {
  align-self: center;
  background: transparent;
  border: 1px solid rgba(230, 225, 211, 0.22);
  padding: 4px 12px;
  font-family: var(--font-main);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.62);
  cursor: pointer;
  border-radius: 3px;
  transition: color 240ms ease, border-color 240ms ease;
}
.cosmos-entry-close:hover {
  color: var(--ink-bright);
  border-color: rgba(255, 230, 190, 0.55);
}

/* ─── Inner Reading card ─────────────────────────────────────────── */
/* The earned scripture.  Shown after a constellation surfaces.
   Reads as a single beautiful page; click outside to dismiss. */
.cosmos-reading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  width: min(88vw, 580px);
  max-height: 84vh;
  padding: 26px 30px;
  background: rgba(8, 6, 18, 0.92);
  border: 1px solid rgba(255, 220, 170, 0.32);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 6px 36px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(120, 60, 200, 0.20);
  color: var(--ink-bright);
  font-family: var(--font-main);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease, transform 600ms ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cosmos-reading.visible {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  pointer-events: auto;
}
.reading-art {
  text-align: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 9px rgba(120, 160, 255, 0.40));
}
.reading-art svg { display: inline-block; vertical-align: middle; }
.reading-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
}
.reading-btn {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 7px 18px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.reading-btn:hover { color: #fff; border-color: rgba(255, 220, 170, 0.6); }
.reading-header {
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 220, 170, 0.20);
}
.reading-title {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: 0.18em;
  color: rgba(255, 232, 192, 1);
  text-shadow: 0 0 10px rgba(255, 220, 170, 0.40);
}
.reading-sub {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(230, 225, 211, 0.55);
  margin-top: 6px;
}
.reading-section { display: flex; flex-direction: column; gap: 4px; }
.reading-label {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.78);
}
.reading-body {
  font-family: var(--font-main);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(244, 240, 222, 0.96);
}
.reading-italic { font-style: italic; color: rgba(255, 240, 200, 0.96); }
.reading-koan {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 220, 170, 0.20);
}
.reading-lenses { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.reading-lens { display: flex; flex-direction: column; gap: 3px; }
.reading-citation {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 11.5px;
  color: rgba(230, 225, 211, 0.45);
  text-align: center;
  margin-top: 8px;
}

/* AI status - quiet line under the input. */
.cosmos-ai-status {
  margin-top: 6px;
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.55);
  min-height: 14px;
  text-align: center;
}

/* ─── AI conversation panel (with-AI mode) ───────────────────────────── */
/* Production-style layout: small phase chip at top, large Cormorant
   italic AI message centred, multi-line user textarea with clear
   separation from the AI text + the reply/end buttons. */

.cosmos-ai-panel {
  position: absolute;
  left: 50%;
  /* Sit below the orb's lower edge with breathing room.  Orb sits at
     top ~38%, panel at top ~62% so the question never overlaps. */
  top: 62%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 9;
  pointer-events: none;
}
.cosmos-ai-panel > * { pointer-events: auto; }

/* THINK variant - when the chat vessel coexists with the drawing
   canvas, it presents as a centered translucent panel ("vessel") with
   a subtle border + glow. The canvas around it remains usable for
   scribbling, stickies, and sound circles. */
.cosmos-ai-panel--think {
  top: 50%;
  /* No vessel box - the dialogue is open to the space. Only the koan sits in
     a soft onboarding-style panel; the input floats just beneath it. The user
     is speaking into the galaxy, not into a form. */
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  gap: 14px;
  width: min(86vw, 560px);
  z-index: 14;
}
/* The koan itself carries the only surface - the same calm panel as the
   onboarding lines. */
.cosmos-ai-panel--think .ai-question {
  background: rgba(8, 6, 18, 0.66);
  border: 1px solid rgba(230, 225, 211, 0.16);
  border-radius: 8px;
  padding: 16px 24px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
  min-height: 0;
  max-width: 520px;
}
/* Input + mic in a row so typing never spills under the mic. */
/* the mic sits INSIDE the text box on the right, not as a separate button beside
   it - the input reserves room on the right and the mic is absolutely placed. */
.cosmos-ai-panel--think .ai-input-row {
  position: relative;
  display: block;
  width: min(82vw, 460px);
}
.cosmos-ai-panel--think .ai-input-row .ai-input { width: 100%; padding-right: 46px; box-sizing: border-box; }
.cosmos-ai-panel--think .ai-input-row .ai-mic {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ─── the journal galaxy (the Milky Way you talk to) ─────────────────────
   The galaxy sits at the centre; the question floats above it and the input
   below, both with no box. After a reply they fade so the galaxy rests. */
.journal-galaxy {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.86);
  z-index: 8;                       /* a background presence, behind the chat */
  cursor: var(--cursor-thinkspace, pointer);
  opacity: 0;
  transition: opacity 1800ms ease, transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cinematic fade-into-position after the onboarding - a memorable arrival. */
.journal-galaxy.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.journal-galaxy canvas { display: block; }

.cosmos-ai-panel--think.is-galaxy,
.cosmos-ai-panel--think.is-galaxy.is-revealing,
.cosmos-ai-panel--think.is-galaxy.is-revealing.is-revealed {
  /* CRITICAL: clear the panel transform. A transformed element becomes the
     containing block for its position:fixed children, which was pinning the
     question + input to the panel's 0x0 box at top-left instead of the
     viewport. With transform:none the fixed children resolve to the viewport. */
  position: static; width: 0; height: 0; padding: 0; pointer-events: none;
  transform: none !important; top: auto; left: auto;
}
.cosmos-ai-panel--think.is-galaxy .ai-min-label,
.cosmos-ai-panel--think.is-galaxy .ai-mode,
.cosmos-ai-panel--think.is-galaxy .ai-bowls-prompt,
.cosmos-ai-panel--think.is-galaxy .ai-footer-row { display: none !important; }
/* The original chat, laid out around the centred visual: thinkspace's message
   sits just ABOVE it, the input just BELOW it (the AI:Human shape, with the
   living visual in the background). The question keeps the ORIGINAL soft box +
   VT323 type (inherited from .cosmos-ai-panel--think .ai-question) - only its
   position changes here. Messages persist; the dialogue never auto-dissolves. */
.cosmos-ai-panel--think.is-galaxy .ai-question {
  /* Sits JUST above the galaxy (was 30% - too far up, read as a floating box).
     No box at all: glowing text on the starfield, so the person is speaking
     INTO the galaxy, not into a form. The dark text-shadow carries legibility. */
  position: fixed; left: 50%; top: 39%; transform: translate(-50%, -50%);
  z-index: 16; pointer-events: none; transition: opacity 600ms ease;
  background: none; border: none; box-shadow: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.cosmos-ai-panel--think.is-galaxy .ai-input-wrap {
  /* Sits JUST below the galaxy (was 70%) so the question, the galaxy, and the
     input read as one continuous conversation rather than three stranded boxes. */
  position: fixed; left: 50%; top: 55%; transform: translateX(-50%);
  width: min(460px, 82vw); z-index: 16; pointer-events: auto; transition: opacity 600ms ease;
}
/* The input in galaxy mode: a soft, smaller, centred field - not the heavy
   slab. Text is centred so it never looks left-stranded under the question. */
.cosmos-ai-panel--think.is-galaxy .ai-input {
  min-height: 50px; max-height: 96px; overflow-y: auto; resize: none;
  /* A clearly visible, softly 3D field: gradient body + a raised top edge and
     inset floor so it reads as a real pressable surface against the galaxy. */
  background: linear-gradient(180deg, rgba(22, 20, 38, 0.74), rgba(8, 6, 18, 0.62));
  border: 1px solid rgba(232, 226, 212, 0.30);
  border-radius: 14px;
  text-align: center;
  /* symmetric side padding reserves the mic's space on the right (and matches it
     on the left) so typed text never runs under the mic and stays centred. */
  padding: 14px 58px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.10),
    inset 0 -2px 8px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 226, 180, 0.12),
    0 0 60px rgba(255, 220, 170, 0.07);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.cosmos-ai-panel--think.is-galaxy .ai-input:focus {
  border-color: rgba(255, 230, 190, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.12),
    inset 0 -2px 8px rgba(0, 0, 0, 0.5),
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 226, 180, 0.22),
    0 0 72px rgba(255, 220, 170, 0.12);
}
.cosmos-ai-panel--think.is-galaxy .ai-input::placeholder { text-align: center; }
/* A quiet minimise control just under the input - hides the dialogue so only
   thinkspace remains; clicking the visual brings it back, same conversation. */
.cosmos-ai-panel--think.is-galaxy .ai-minimise {
  position: fixed; left: 50%; top: 76%; transform: translateX(-50%);
  width: auto; height: auto; z-index: 16; pointer-events: auto;
  font-family: var(--font-main); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(230, 225, 211, 0.55);
  background: none; border: none; cursor: var(--cursor-thinkspace, pointer);
  transition: opacity 600ms ease, color 200ms ease;
}
.cosmos-ai-panel--think.is-galaxy .ai-minimise:hover { color: rgba(244, 239, 222, 0.85); }
/* Minimised: the dialogue hides; only thinkspace (the visual) remains. */
.cosmos-ai-panel--think.is-galaxy.galaxy-closed .ai-question,
.cosmos-ai-panel--think.is-galaxy.galaxy-closed .ai-input-wrap,
.cosmos-ai-panel--think.is-galaxy.galaxy-closed .ai-minimise {
  opacity: 0; pointer-events: none;
}
/* Fade-in when the dialogue is revealed last in the onboarding. */
.cosmos-ai-panel--think.is-revealing {
  opacity: 0;
  transform: translate(-50%, -48%);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cosmos-ai-panel--think.is-revealing.is-revealed {
  opacity: 1;
  transform: translate(-50%, -50%);
}
/* Fade-in when the dialogue is revealed last in the onboarding. */
.cosmos-ai-panel--think.is-revealing {
  opacity: 0;
  transform: translate(-50%, -48%);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cosmos-ai-panel--think.is-revealing.is-revealed {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Minimise control - top-right of the dialogue vessel. Collapses the panel
   to a small pill so the canvas (drawing, sound, writing) gets the space;
   click again to re-open the dialogue. */
.ai-minimise {
  position: absolute;
  top: 4px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: rgba(244, 239, 222, 0.55);
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 1;
  cursor: var(--cursor-thinkspace, pointer);
  padding: 0;
  z-index: 2;
}
.ai-minimise:hover { color: rgba(255, 250, 232, 0.95); }
.ai-min-label { display: none; }

.cosmos-ai-panel--think.is-minimised {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
  min-width: 0;
  padding: 8px 18px 9px;
  cursor: var(--cursor-thinkspace, pointer);
}
.cosmos-ai-panel--think.is-minimised > .ai-mode,
.cosmos-ai-panel--think.is-minimised > .ai-question,
.cosmos-ai-panel--think.is-minimised > .ai-bowls-prompt,
.cosmos-ai-panel--think.is-minimised > .ai-input-wrap,
.cosmos-ai-panel--think.is-minimised > .ai-footer-row {
  display: none;
}
.cosmos-ai-panel--think.is-minimised .ai-minimise { position: static; }
.cosmos-ai-panel--think.is-minimised .ai-min-label {
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 222, 0.78);
}

/* Sound petal button - same visual register as the mic and color
   swatches in the FLOW toolbar. */
.cosmos-doodle-sound-btn {
  background: transparent;
  border: 1px solid rgba(244, 239, 222, 0.28);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 239, 222, 0.78);
  cursor: var(--cursor-thinkspace, pointer);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.cosmos-doodle-sound-btn:hover,
.cosmos-doodle-sound-btn:focus-visible {
  background: rgba(244, 239, 222, 0.06);
  border-color: rgba(255, 230, 190, 0.65);
  color: rgba(255, 250, 232, 1);
  outline: none;
}
.cosmos-doodle-sound-btn.is-active {
  background: rgba(255, 220, 170, 0.10);
  border-color: rgba(255, 220, 170, 0.78);
  color: rgba(255, 250, 232, 1);
  animation: soundPulse 1800ms ease-in-out infinite;
}
@keyframes soundPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 220, 170, 0); }
  50%      { box-shadow: 0 0 18px rgba(255, 220, 170, 0.45); }
}

/* End-session - quiet text link, now in a footer row BELOW the input
   (founder spec).  Centred. */
.ai-footer-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}
.ai-end-link {
  background: transparent;
  border: 0;
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.55);
  cursor: pointer;
  padding: 6px 12px;
  transition: color 240ms ease;
}
.ai-end-link:hover { color: var(--ink-bright); }

/* Microphone button - sits inside the textarea wrap. */
.ai-input-wrap { position: relative; }
.ai-mic {
  position: absolute;
  right: 8px;
  bottom: 30px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(230, 225, 211, 0.22);
  border-radius: 50%;
  color: rgba(230, 225, 211, 0.62);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 220ms ease, border-color 220ms ease,
              background 220ms ease, box-shadow 220ms ease;
}
.ai-mic:hover { color: var(--ink-bright); border-color: rgba(255, 230, 190, 0.55); }
.ai-mic.recording {
  color: rgba(255, 220, 170, 1);
  border-color: rgba(255, 220, 170, 0.85);
  background: rgba(255, 220, 170, 0.10);
  box-shadow: 0 0 12px rgba(255, 220, 170, 0.55);
  animation: micPulse 1100ms ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 220, 170, 0.55); }
  50%      { box-shadow: 0 0 22px rgba(255, 220, 170, 0.90); }
}

.ai-mode {
  font-family: var(--font-main);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 230, 190, 0.75);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

/* KOAN/WISDOM in VT323 (the geeky retro font used elsewhere in the
   product), per founder spec - consistent with the rest of Thinkspace. */
.ai-question {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  text-align: center;
  max-width: 640px;
  min-height: 42px;
  opacity: 0;
  /* Slow, meditative cross-dissolve between koans - opacity + a soft blur
     so each question settles in rather than snapping. */
  transition: opacity 850ms ease, filter 850ms ease;
  filter: blur(0);
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.95),
    0 0 32px rgba(0, 0, 0, 0.65);
}
.ai-question.visible { opacity: 0.96; }
.ai-question.fading  { opacity: 0; filter: blur(3px); }
/* When the orb is thinking/listening, the same area shows a status
   line in a distinct style (smaller, italic, lower opacity) so the
   user understands it's a transient state, not the next question. */
.ai-question.is-status {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(230, 225, 211, 0.62);
  letter-spacing: 0.10em;
}
/* The "thinking" indicator: three soft animated dots, NO box, NO text - just
   the gentle pulse of the AI gathering a reply. Lives in the question slot. */
.ai-dots { display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.ai-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(244, 239, 222, 0.72);
  box-shadow: 0 0 8px rgba(255, 226, 180, 0.35);
  animation: aiDotPulse 1.4s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiDotPulse {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* #C: the "a reflection is forming" beat shown while the inner reading gathers. */
.reflection-forming {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; pointer-events: none;
  opacity: 0; transition: opacity 900ms ease;
}
.reflection-forming.in { opacity: 1; }
.rf-glow {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 180, 0.5), rgba(255, 210, 150, 0.12) 50%, rgba(255, 200, 140, 0) 72%);
  animation: rfPulse 2.2s ease-in-out infinite;
}
@keyframes rfPulse {
  0%, 100% { transform: scale(0.8);  opacity: 0.55; }
  50%      { transform: scale(1.1);  opacity: 1; }
}
.rf-text {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 17px; letter-spacing: 0.02em; color: rgba(244, 239, 222, 0.82);
  display: flex; align-items: center; gap: 10px;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.7);
}

/* "tap a bowl" prompt - small calm line shown only in WISDOM phase. */
.ai-bowls-prompt {
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.62);
  text-align: center;
  opacity: 0;
  transition: opacity 800ms ease;
  margin-top: -6px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}
.ai-bowls-prompt.visible { opacity: 0.85; }

/* Textarea + buttons block - distinct vocabulary from the AI text. */
.ai-input-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.ai-input {
  width: 100%;
  min-height: 64px;
  max-height: 28vh;
  padding: 12px 14px;
  font-family: var(--font-fine);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-bright);
  background: rgba(8, 6, 18, 0.72);
  border: 1px solid rgba(230, 225, 211, 0.22);
  border-radius: 4px;
  outline: none;
  resize: vertical;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  caret-color: rgba(255, 230, 190, 0.95);
  transition: border-color 240ms ease;
}
.ai-input:focus { border-color: rgba(255, 230, 190, 0.55); }
.ai-input::placeholder { color: rgba(230, 225, 211, 0.42); font-style: italic; }

.ai-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ai-status {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.55);
}
.ai-btn-row { display: flex; flex-direction: row; gap: 10px; }
.cosmos-btn-quiet {
  background: transparent;
  border-color: rgba(230, 225, 211, 0.18);
  color: rgba(230, 225, 211, 0.55);
}
.cosmos-btn-quiet:hover { color: var(--ink-bright); border-color: rgba(230, 225, 211, 0.45); background: transparent; }

/* Bowl content panel - fixed-height surface below the bowls row that
   crossfades the active bowl's wisdom in place.  Reads as the bowl
   "speaking" - a tradition naming itself + a quiet body paragraph. */
.cosmos-bowl-content {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  width: min(86vw, 580px);
  padding: 16px 22px;
  background: rgba(8, 6, 18, 0.78);
  border: 1px solid rgba(230, 225, 211, 0.18);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 11;
}
.cosmos-bowl-content.visible { opacity: 1; }
.cosmos-bowl-content.fading  { opacity: 0; }
.bowl-tradition {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.85);
  margin-bottom: 8px;
}
.bowl-body {
  /* Same geeky retro font as the rest of Thinkspace, per founder spec. */
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.025em;
  color: rgba(244, 240, 222, 0.96);
}

/* Entry card - bowl-style turn inside transcript view (F11). */
.cosmos-entry-bowl {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 220, 170, 0.32);
}
.cosmos-entry-tradition {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.75);
  margin-bottom: 4px;
}

/* Mobile-friendly tweaks for the AI panel. */
@media (max-width: 760px) {
  .cosmos-ai-panel { top: 50%; width: 92vw; gap: 14px; }
  .ai-question     { font-size: clamp(17px, 4.6vw, 22px); }
  .ai-input        { font-size: 14px; min-height: 56px; }
}

/* Mobile-friendly tweaks for cosmos */
@media (max-width: 760px) {
  .cosmos-dialogue { top: 54%; max-width: 88vw; font-size: clamp(13px, 3.4vw, 16px); padding: 12px 18px; }
  .cosmos-actions  { top: 68%; width: 88vw; }
  .cosmos-btn { padding: 8px 14px; font-size: 12px; }
}

/* Safe-area honoured everywhere */
@supports (padding: max(0px)) {
  body {
    padding-top:    env(safe-area-inset-top);
    padding-right:  env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
  }
}

/* === PRACTISE - VISUALISE / SOUND / MEDITATE / CHANT === */

/* VISUALISE - Pollinations.ai render stage */
.visualise-stage {
  width: 100%;
  min-height: 80px;
  margin: 10px 0 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visualise-stage.is-loading {
  min-height: 200px;
  background: rgba(8, 4, 18, 0.45);
  border: 1px dashed rgba(255, 230, 190, 0.22);
}
.visualise-pulse {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(248, 244, 226, 0.78);
  animation: visPulse 1.8s ease-in-out infinite;
}
@keyframes visPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.visualise-error {
  font-family: var(--font-fine);
  font-size: 12px;
  color: rgba(255, 200, 180, 0.78);
}
.visualise-img {
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(255, 230, 190, 0.18);
}

/* SOUND - handpan */
.handpan {
  margin-bottom: 12px;
  cursor: var(--cursor-mallet, pointer);
}
.hp-tone {
  transition: fill 200ms ease, stroke 200ms ease;
  cursor: var(--cursor-mallet, pointer);
}
.hp-tone:hover {
  fill: rgba(255, 235, 200, 0.14);
  stroke: rgba(255, 235, 200, 0.72);
}
.hp-tone.is-ringing {
  fill: rgba(255, 220, 170, 0.34);
  stroke: rgba(255, 220, 170, 0.95);
}
.handpan-hint {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(248, 244, 226, 0.72);
  margin-bottom: 12px;
}

/* MEDITATE - breath pacer */
.meditate-pacer {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}
.meditate-orb {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 220, 170, 0.35) 0%,
    rgba(255, 200, 150, 0.18) 40%,
    rgba(40, 20, 80, 0.1) 70%,
    transparent 100%);
  border: 1px solid rgba(255, 230, 190, 0.30);
  transition: transform 600ms ease-in-out;
}
.meditate-breath {
  position: absolute;
  bottom: -14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(248, 244, 226, 0.72);
  letter-spacing: 0.02em;
}
.meditate-timer {
  font-family: var(--font-main);
  font-size: 22px;
  letter-spacing: 0.18em;
  color: rgba(248, 244, 226, 0.86);
  margin-bottom: 14px;
}

/* CHANT - mantra cards */
.chant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}
.chant-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(8, 4, 18, 0.55);
  border: 1px solid rgba(230, 225, 211, 0.18);
  border-radius: 4px;
  color: var(--ink-bright);
  cursor: pointer;
  text-align: left;
  transition: border-color 200ms ease, background 200ms ease;
}
.chant-card:hover {
  border-color: rgba(255, 230, 190, 0.55);
  background: rgba(20, 12, 36, 0.72);
}
.chant-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-style: italic;
  color: rgba(255, 230, 190, 0.95);
}
.chant-meaning {
  font-family: var(--font-fine);
  font-size: 12px;
  color: rgba(248, 244, 226, 0.78);
}
.chant-tradition {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 220, 170, 0.55);
}
.chant-active {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 28px);
  color: rgba(255, 230, 190, 0.95);
  margin-bottom: 4px;
}
.chant-active-meaning {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(248, 244, 226, 0.72);
  margin-bottom: 16px;
}
.chant-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.chant-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(230, 225, 211, 0.12);
  border: 1px solid rgba(230, 225, 211, 0.22);
  transition: background 200ms ease, border-color 200ms ease;
}
.chant-dot.is-on {
  background: rgba(255, 220, 170, 0.85);
  border-color: rgba(255, 220, 170, 0.95);
}

/* === Without-AI replay (saved-entry video playback) === */
.cosmos-entry-playback {
  position: relative;
  width: 100%;
}
.cosmos-entry-playback .playback-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(4, 2, 12, 0.55);
  border: 1px solid rgba(230, 225, 211, 0.10);
  border-radius: 4px;
  overflow: hidden;
}
.cosmos-entry.is-expanded .cosmos-entry-playback .playback-stage {
  aspect-ratio: 16 / 9;
}
.cosmos-entry-playback .playback-canvas,
.cosmos-entry-playback .playback-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 700ms ease;
}
.cosmos-entry-playback .playback-still {
  opacity: 0;
  object-fit: contain;
}
.cosmos-entry-playback .playback-stickies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cosmos-entry-playback .playback-sticky {
  position: absolute;
  border: 1px solid rgba(255, 230, 190, 0.45);
  background: rgba(8, 4, 18, 0.35);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: var(--font-fine);
  font-size: 11px;
  line-height: 1.35;
  color: rgba(248, 244, 226, 0.92);
  overflow: hidden;
}
.cosmos-entry-playback .playback-replay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(8, 4, 18, 0.72);
  border: 1px solid rgba(230, 225, 211, 0.20);
  border-radius: 3px;
  color: rgba(248, 244, 226, 0.88);
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms ease, color 200ms ease, border-color 200ms ease;
}
.cosmos-entry-playback .playback-replay.is-visible { opacity: 1; }
.cosmos-entry-playback .playback-replay:hover {
  color: var(--ink-bright);
  border-color: rgba(255, 230, 190, 0.55);
}

/* ── v11 soul-body interior: the person's own charged moments, no taxonomy ── */
.soul-interior {
  position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center;
  /* immersive: only a soft vignette, so the 3D interior world shows through. */
  background: radial-gradient(ellipse at 50% 45%, rgba(3, 3, 9, 0) 28%, rgba(3, 3, 9, 0.55) 100%);
  opacity: 0; transition: opacity 900ms ease; overflow-y: auto; padding: 6vh 4vw;
  pointer-events: none;
}
.soul-interior .si-inner { pointer-events: auto; }
.soul-interior.show { opacity: 1; }
.si-inner { max-width: 720px; width: 92vw; text-align: center; position: relative; }
.si-close {
  position: absolute; top: -10px; right: 0; z-index: 2;
  background: rgba(244, 239, 222, 0.1); border: 1px solid rgba(244, 239, 222, 0.45);
  border-radius: 999px; padding: 11px 26px; color: rgba(244, 239, 222, 0.95);
  font-family: var(--font-main, 'VT323', monospace); font-size: 18px; letter-spacing: 0.18em;
  text-transform: lowercase; cursor: var(--cursor-thinkspace, pointer);
  transition: background 0.2s, border-color 0.2s;
}
.si-close:hover { background: rgba(244, 239, 222, 0.2); border-color: rgba(255, 230, 190, 0.7); }
.si-close:hover { background: rgba(244, 239, 222, 0.18); }
.si-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(244, 239, 222, 0.5); margin-bottom: 8px; }
.si-recur { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: rgba(243, 208, 99, 0.85); margin-bottom: 22px; }
.si-nodes { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.si-node {
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.6;
  color: rgba(248, 243, 228, 0.94); padding: 16px 22px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 246, 224, 0.05), rgba(255, 246, 224, 0.015));
  border: 1px solid rgba(244, 239, 222, 0.12);
}
.si-res { padding: 14px 20px; border-radius: 12px; border: 1px solid rgba(243, 208, 99, 0.22); background: rgba(243, 208, 99, 0.05); }
.si-res-concept { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: rgba(245, 214, 120, 0.96); }
.si-res-src { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.08em; color: rgba(244, 239, 222, 0.55); margin-top: 4px; }
.si-empty { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; color: rgba(244, 239, 222, 0.6); }

/* ── v11 soul emergence (post-session reveal) ── */
.se-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 22px 0 30px; }
.se-card {
  width: 260px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,246,224,0.05), rgba(255,246,224,0.015));
  border: 1px solid rgba(244,239,222,0.12);
}
.se-orb {
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--pc, #cdb68a), rgba(8,8,16,0.9) 72%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--pc, #cdb68a) 55%, transparent);
}
.se-moment {
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 17px; line-height: 1.55;
  color: rgba(248,243,228,0.92); text-align: center;
}

/* ── v11 resonance react on wisdom bowls (bodhi leaf) ── */
.bowl-cite-em { color: #f3d063; font-style: italic; }
/* the bodhi react is ALWAYS visible on a wisdom bowl - tap what resonates. */
.bowl-resonate {
  position: absolute; bottom: 8px; right: 12px; height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 3px; cursor: var(--cursor-thinkspace, pointer);
  color: rgba(244, 236, 219, 0.62); transition: color 0.25s, transform 0.2s; opacity: 1;
}
.bowl-resonate svg { width: 28px; height: 28px; flex: 0 0 auto; }
.bowl-resonate-cap { font-family: var(--font-main, 'VT323', monospace); font-size: 12.5px; letter-spacing: 0.16em; text-transform: lowercase; color: rgba(244, 236, 219, 0.5); white-space: nowrap; }
.bowl-resonate:hover { color: rgba(243, 208, 99, 0.95); }
.bowl-resonate:hover .bowl-resonate-cap { color: rgba(243, 208, 99, 0.85); }
.bowl-resonate.marked .bowl-resonate-cap { color: rgba(243, 196, 83, 0.9); }
.soul-graph .si-node-res { font-style: italic; }
.soul-graph .si-receipt-pop .si-res-src { font-family: var(--font-main,'VT323',monospace); font-size: 13px; letter-spacing: 0.08em; color: rgba(245,214,120,0.7); margin-top: 8px; text-align: center; }
.bowl-resonate.marked { color: #f3c453; }
.bowl-resonate.marked svg path { fill: rgba(243, 196, 83, 0.28); }

/* #9: comfortable hit area for the small glyph close buttons in-product. */
.bowl-close, .iud-close, .ir-close-x, #ir-close-btn {
  min-width: 34px !important; min-height: 34px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 24px !important; line-height: 1;
}

/* v11 interior title + description (legibility: name each part of the self) */
.si-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 38px; color: rgba(248, 243, 228, 0.98); letter-spacing: 0.02em; margin-bottom: 4px; }
.si-desc { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 19px; color: rgba(244, 239, 222, 0.84); margin-bottom: 18px; }

/* book analysis citations (match the wisdom page, no longer drab) */
/* inline so it never breaks the sentence mid-flow (founder caught the para break). */
.bp-cite-inline { font-family: var(--font-main, 'VT323', monospace); font-size: 0.62em; letter-spacing: 0.08em; color: rgba(120, 104, 70, 0.85); }
.bp-cite-inline::before { content: " ("; } .bp-cite-inline::after { content: ") "; }

/* v11 interior mirror: the three voices grounded in receipts */
.si-witness { font-family: 'EB Garamond','Cormorant Garamond',Georgia,serif; font-size: 22px; line-height: 1.55; color: rgba(248,243,228,0.96); margin: 6px auto 6px; max-width: 600px; }
.si-receipt { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 15px; color: rgba(244,239,222,0.5); margin-bottom: 18px; }
.si-tension { margin: 18px auto; max-width: 600px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(244,239,222,0.14); background: linear-gradient(180deg, rgba(255,246,224,0.05), rgba(255,246,224,0.015)); }
.si-frag { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 18px; line-height: 1.5; color: rgba(248,243,228,0.9); }
.si-vs { font-family: var(--font-main,'VT323',monospace); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243,208,99,0.7); margin: 6px 0; }
.si-question { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 19px; line-height: 1.5; color: rgba(245,214,120,0.95); margin-top: 12px; }
.si-koan-wrap { margin: 26px auto 6px; max-width: 560px; }
.si-koan-wrap .bp-enso { display: block; width: 48px; height: 48px; margin: 0 auto 8px; color: rgba(200,180,130,0.65); }
.si-koan { font-family: 'Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 23px; line-height: 1.5; color: rgba(230,224,200,0.96); }

/* the spirit world's sound-poem invitation */
.si-sound { margin: 26px auto 0; display: inline-block; background: rgba(255,224,170,0.08); border: 1px solid rgba(255,224,170,0.42); border-radius: 999px; padding: 11px 28px; font-family: var(--font-main,'VT323',monospace); font-size: 15px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255,236,200,0.92); cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s, border-color 0.2s; }
.si-sound:hover { background: rgba(255,224,170,0.18); border-color: rgba(255,236,200,0.75); }
.si-cur { margin-left: 3px; animation: prefaceCursorBlink 1100ms steps(2, end) infinite; }

/* analysis page: clearer section sub-labels + koan label (founder asked what nature/shadow mean) */
.bp-sub { font-family: 'EB Garamond','Cormorant Garamond',Georgia,serif; font-style: italic; font-size: 14px; color: rgba(110, 96, 70, 0.78); margin: -4px 0 8px; }
.bp-koan-label { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(150, 110, 60, 0.85); text-align: center; margin-bottom: 8px; }

/* ADVICE: three life-areas, each with this-week + practice, larger + readable */
.adv-area { font-family: var(--font-main, 'VT323', monospace); font-size: 18px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 220, 170, 0.92); margin-bottom: 12px; text-align: center; }
.adv-sect { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 239, 222, 0.55); margin: 16px 0 7px; }
.adv-sheet .adv-li { font-size: 16.5px; line-height: 1.5; }
.adv-sheet .adv-check { margin-bottom: 8px; }
.adv-share { display: block; margin: 22px auto 0; background: rgba(80, 200, 120, 0.12); border: 1px solid rgba(80, 200, 120, 0.5); border-radius: 999px; padding: 11px 26px; font-family: var(--font-main,'VT323',monospace); font-size: 15px; letter-spacing: 0.1em; text-transform: lowercase; color: rgba(200, 245, 215, 0.95); cursor: var(--cursor-thinkspace, pointer); transition: background 0.2s; }
.adv-share:hover { background: rgba(80, 200, 120, 0.22); }

/* ── INTERIOR KNOWLEDGE-GRAPH: the body interior as a navigable constellation ── */
/* ── the worlds' interior text: matches the onboarding copy (VT323), force from
   precision not florality ── */
.si-intro {
  /* sits at the BOTTOM so the navigation cue never overlays the constellation name,
     description, and node phrases at the top + centre of the world. */
  position: fixed; bottom: 7vh; left: 0; right: 0; text-align: center; z-index: 3; pointer-events: none;
  font-family: var(--font-main, 'VT323', monospace); font-size: 17px; letter-spacing: 0.08em;
  color: rgba(245, 238, 218, 0.8); padding: 0 12vw; line-height: 1.5;
  opacity: 0; transform: translateY(6px); transition: opacity 1600ms ease, transform 1600ms ease;
  text-shadow: 0 0 22px rgba(0,0,0,0.85);
}
.si-intro.show { opacity: 1; transform: translateY(0); }
/* a cluster header word - the theme, always legible; hover reveals its meaning */
/* a CONSTELLATION label: its name (the figure) + an always-visible short
   description beneath it. Centred above the figure. */
.si-cluster {
  position: absolute; transform: translate(-50%, -130%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none; transition: opacity 500ms ease; text-align: center;
}
.si-cluster-name {
  font-family: var(--font-main, 'VT323', monospace); font-size: 17px; letter-spacing: 0.16em;
  text-transform: lowercase; color: rgba(250, 244, 228, 0.96); white-space: nowrap;
  text-shadow: 0 0 14px rgba(0,0,0,0.95), 0 0 22px rgba(0,0,0,0.7);
}
.si-cluster-desc {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 15px; letter-spacing: 0.01em; line-height: 1.4; color: rgba(244, 239, 222, 0.7);
  max-width: 260px; white-space: normal; text-align: center;
  text-shadow: 0 0 12px rgba(0,0,0,0.92);
}
/* a therapy-voice node line - revealed on approach, read at the pace of drift */
.si-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.03em;
  color: rgba(245, 238, 218, 0.96); max-width: 280px; text-align: center; line-height: 1.5;
  text-shadow: 0 0 16px rgba(0,0,0,0.95), 0 0 26px rgba(0,0,0,0.8);
  opacity: 0; transition: opacity 900ms ease;
}
/* INSIDE A WORLD: the phrase IS the node - a clean, readable hero sitting on its
   star. Override the card styling that leaks from the panel .si-node above (no
   box, no padding, no border) so it reads as a luminous name in space. The
   strong dark halo keeps it legible over ANY world colour (fixes white-on-white).
   Tap to HOLD: it brightens and lifts to gold. */
.soul-graph .si-node {
  font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; line-height: 1.45; letter-spacing: 0.01em;
  padding: 0; border: none; background: none; border-radius: 0;
  max-width: 220px; pointer-events: auto; cursor: var(--cursor-thinkspace, pointer);
  color: rgba(252, 248, 236, 0.97);
  text-shadow: 0 1px 2px rgba(0,0,0,0.98), 0 0 14px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.85);
  transition: opacity 700ms ease, color 240ms ease, text-shadow 240ms ease, transform 240ms ease;
}
.soul-graph .si-node:hover { color: #fff; }
.soul-graph .si-node.held {
  color: #ffe6a6; transform: translate(-50%, -50%) scale(1.06);
  text-shadow: 0 1px 2px rgba(0,0,0,0.98), 0 0 16px rgba(255,210,130,0.55), 0 0 34px rgba(0,0,0,0.85);
}
.soul-graph .si-node-res { font-size: 16px; }
/* the birth nameplate: announces the one world that emerged/grew this session */
.world-birth {
  position: fixed; top: 30vh; left: 0; right: 0; text-align: center; z-index: 30; pointer-events: none;
  opacity: 0; transform: translateY(10px); transition: opacity 1200ms ease, transform 1200ms ease;
}
.world-birth.show { opacity: 1; transform: translateY(0); }
.wb-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.28em; text-transform: lowercase; color: rgba(244, 239, 222, 0.55); margin-bottom: 8px; }
.wb-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(30px, 5vw, 52px); color: rgba(248, 243, 228, 0.98); letter-spacing: 0.02em; text-shadow: 0 0 30px rgba(255, 240, 200, 0.4); }
/* the "what surfaced tonight" collection card (gacha-style reveal of the worlds
   that emerged/grew this session). */
.emerged-screen { position: fixed; inset: 0; z-index: 34; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
.emerged-screen.show { opacity: 1; pointer-events: auto; }
.em-card { background: linear-gradient(180deg, rgba(14,12,26,0.82), rgba(8,7,16,0.7)); border: 1px solid rgba(244,239,222,0.18); border-radius: 16px; padding: 30px 38px; min-width: 280px; max-width: 86vw; text-align: center; backdrop-filter: blur(9px); box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.em-eyebrow { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.28em; text-transform: lowercase; color: rgba(244,239,222,0.55); margin-bottom: 18px; }
.em-item { display: flex; align-items: center; gap: 12px; justify-content: flex-start; margin: 10px auto; width: max-content; }
.em-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 12px currentColor; flex: 0 0 auto; }
.em-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: rgba(248,243,228,0.98); }
.em-tag { font-family: var(--font-main, 'VT323', monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: lowercase; color: rgba(244,239,222,0.4); }
.em-line { font-family: var(--font-main, 'VT323', monospace); font-size: 15px; letter-spacing: 0.04em; line-height: 1.5; color: rgba(245,238,218,0.85); margin: 18px auto 22px; max-width: 420px; }
.em-close { font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.16em; text-transform: lowercase; padding: 9px 26px; border-radius: 999px; border: 1px solid rgba(244,239,222,0.35); background: rgba(244,239,222,0.06); color: rgba(248,243,228,0.92); cursor: var(--cursor-thinkspace, pointer); }
/* feelings at the universe level: a soft red shade over the whole sky when
   negative feelings emerged (intensity-scaled); transparent otherwise. */
.universe-weather { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2400ms ease, background 2400ms ease; mix-blend-mode: screen; }
/* mic listening hint - sits near the input, never clobbers the AI question */
.ai-mic-hint { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 8px; white-space: nowrap; font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.1em; color: rgba(190, 205, 255, 0.9); text-shadow: 0 0 10px rgba(0,0,0,0.7); opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
.ai-mic-hint.on { opacity: 1; }
/* the interior zoom slider - vertical, right edge (the 10k-stars depth control) */
.si-zoom { position: fixed; right: 26px; top: 50%; transform: translateY(-50%) rotate(270deg); width: 200px; height: 4px; z-index: 6; -webkit-appearance: none; appearance: none; background: rgba(244,239,222,0.18); border-radius: 4px; cursor: var(--cursor-thinkspace, pointer); }
.si-zoom::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(248,243,228,0.92); box-shadow: 0 0 10px rgba(255,240,200,0.5); cursor: var(--cursor-thinkspace, pointer); }
.si-zoom::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: rgba(248,243,228,0.92); box-shadow: 0 0 10px rgba(255,240,200,0.5); }
.soul-interior.soul-graph { display: block; padding: 0; }
.soul-graph .si-head { position: fixed; top: 5vh; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 2; }
.soul-graph .si-head .si-title { margin-bottom: 2px; }
.soul-graph .si-head .si-desc { margin-bottom: 0; opacity: 0.9; }
/* the witness synthesis: what this whole part of you holds (the 'seen' line) */
.soul-graph .si-head .si-witness {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.45;
  color: rgba(248, 243, 228, 0.96); max-width: 600px; margin: 9px auto 0; padding: 0 16px;
  text-shadow: 0 0 16px rgba(0,0,0,0.9);
}
.soul-graph .si-recur { font-size: 15px; margin: 6px 0 0; }
.soul-graph .si-close { position: fixed; top: 5vh; right: 4vw; left: auto; pointer-events: auto; z-index: 60; }
.si-graph-layer { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
/* a node star's neutral label - the only words floating in the world. Readable
   first: solid legible plate, clear serif, strong contrast against any backdrop. */
.soul-graph .si-node {
  position: absolute; transform: translate(-50%, -135%);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; line-height: 1.3; letter-spacing: 0.01em;
  color: rgba(252, 248, 236, 0.98); padding: 5px 11px; border-radius: 10px;
  background: rgba(10, 9, 18, 0.82); border: 1px solid rgba(244, 239, 222, 0.22);
  max-width: 190px; text-align: center; white-space: normal;
  pointer-events: auto; cursor: var(--cursor-thinkspace, pointer);
  transition: opacity 500ms ease, background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 22px rgba(255,226,180,0.10);
}
.soul-graph .si-node:hover { background: rgba(26, 22, 38, 0.92); border-color: rgba(245, 214, 120, 0.7); transform: translate(-50%, -135%) scale(1.04); }
.soul-graph .si-node.open { background: rgba(34, 28, 46, 0.95); border-color: rgba(245, 214, 120, 0.95); box-shadow: 0 4px 18px rgba(0,0,0,0.6), 0 0 30px rgba(245,214,120,0.3); }
/* cluster label - quiet but legible header naming the region of the graph */
.si-cl {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(248, 224, 160, 0.82); pointer-events: none; white-space: nowrap;
  transition: opacity 800ms ease; text-shadow: 0 0 10px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,1);
}
/* the receipt: the verbatim words behind a tapped node */
.soul-graph .si-receipt-pop {
  position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%) translateY(14px);
  max-width: 620px; width: 88vw; text-align: center; z-index: 6;
  opacity: 0; pointer-events: none; transition: opacity 400ms ease, transform 400ms ease;
}
.soul-graph .si-receipt-pop.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.soul-graph .si-receipt-pop .si-receipt {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.5;
  color: rgba(248, 243, 228, 0.92); margin: 0; padding: 16px 22px; border-radius: 14px;
  background: rgba(8, 8, 16, 0.66); border: 1px solid rgba(244, 239, 222, 0.16);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 30px rgba(255, 226, 180, 0.12), 0 0 64px rgba(255, 220, 170, 0.06);
}
.soul-graph .si-receipt-pop .si-pop-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 24px; color: rgba(252, 248, 236, 0.99); margin-bottom: 10px; }
.soul-graph .si-receipt-pop .si-detail { font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; color: rgba(244, 239, 222, 0.86); margin-bottom: 14px; }
.soul-graph .si-receipt-pop .si-receipt { font-size: 17px; opacity: 0.8; }
.soul-graph .si-receipt-pop .si-question { font-size: 19px; margin-top: 12px; }
/* knowledge reading-graph: a source leaf's panel - WHY to read it + a link, no quotes */
.soul-graph .si-res-work { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 23px; color: rgba(250, 246, 236, 0.99); margin-bottom: 8px; }
.soul-graph .si-res-why { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 1.5; color: rgba(244, 239, 222, 0.9); margin-bottom: 8px; }
.soul-graph .si-res-concept { font-family: var(--font-main, 'VT323', monospace); font-size: 13px; letter-spacing: 0.18em; text-transform: lowercase; color: rgba(150, 200, 240, 0.78); margin-bottom: 12px; }
.soul-graph .si-res-link { display: inline-block; font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(140, 196, 240, 0.95); text-decoration: none; border-bottom: 1px solid rgba(140, 196, 240, 0.4); padding-bottom: 1px; cursor: var(--cursor-thinkspace, pointer); }
.soul-graph .si-res-link:hover { color: rgba(190, 224, 255, 1); border-color: rgba(190, 224, 255, 0.8); }
/* thinker nodes are the map (quieter); source leaves invite the tap */
.soul-graph .si-node-thinker { font-style: italic; color: rgba(244, 239, 222, 0.9); cursor: default; border-color: rgba(150, 200, 240, 0.28); }
.soul-graph .si-node-source { border-color: rgba(150, 200, 240, 0.5); }
.soul-graph .si-node-source:hover { border-color: rgba(190, 224, 255, 0.85); }
/* koan at the foot of the world - a held contemplation, designed: enso, a quiet
   gold label, then the line in a readable italic on a soft plate. */
.si-koan-foot {
  position: fixed; left: 50%; bottom: 4.5vh; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 2;
  max-width: 600px; width: 86vw; padding: 16px 26px 14px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(12,10,22,0.6), rgba(8,7,16,0.18) 78%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.si-koan-foot .bp-enso { display: block; width: 34px; height: 34px; margin: 0 auto 7px; color: rgba(214, 188, 130, 0.78); }
.si-koan-label { font-family: var(--font-main, 'VT323', monospace); font-size: 11.5px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(245, 214, 120, 0.6); margin-bottom: 8px; }
.si-koan-foot .si-koan { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.5; color: rgba(245, 240, 224, 0.98); text-shadow: 0 0 18px rgba(0,0,0,0.9); }
.si-empty-graph { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 480px; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; color: rgba(244, 239, 222, 0.62); }

/* 'what to notice' cue: arrives softly when you enter a world, then fades */
.si-notice {
  position: fixed; left: 50%; top: 13vh; transform: translateX(-50%) translateY(-6px);
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px;
  color: rgba(245, 214, 120, 0.82); text-align: center; max-width: 80vw; pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity 1100ms ease, transform 1100ms ease;
  text-shadow: 0 0 14px rgba(0,0,0,0.8);
}
.si-notice.in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* AURORA: soft, FLOWING curtains of light that undulate across the upper sky
   after a session integrates - not vertical bars. Wide blurred ribbon layers,
   each drifting + waving, green-dominant with the weather colour woven in. */
.cosmos-aurora { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; opacity: 0; }
/* the soft ground-glow the curtains rise out of */
.cosmos-aurora .aur-veil {
  position: absolute; left: -10%; right: -10%; top: -18%; height: 62%;
  background: radial-gradient(ellipse at 50% 0%, rgba(57,230,160,0.14) 0%, rgba(57,230,160,0.04) 44%, transparent 72%);
  filter: blur(40px);
}
/* each ribbon: a wide, soft, blurred curtain. The vertical-ray texture is a
   faint repeating sheen INSIDE the band (irregular), not hard bars; the band
   itself flows horizontally and waves. */
.cosmos-aurora .aur-ribbon {
  position: absolute; left: -20%; width: 140%;
  background:
    repeating-linear-gradient(96deg, transparent 0, rgba(255,255,255,0.05) 12px, transparent 34px),
    linear-gradient(92deg, transparent 0%, var(--c1) 28%, var(--c2) 60%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, #000 35%, transparent 78%);
  filter: blur(22px); mix-blend-mode: screen; opacity: 0.55;
  border-radius: 50%;
  animation-name: aurFlow; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes aurFlow {
  0%   { transform: translateX(-6%) translateY(0) skewX(-8deg) scaleY(0.92); opacity: 0.35; }
  50%  { transform: translateX(6%)  translateY(-3%) skewX(6deg) scaleY(1.08); opacity: 0.7; }
  100% { transform: translateX(-4%) translateY(2%) skewX(-5deg) scaleY(0.96); opacity: 0.4; }
}
/* a soft drifting FOG that gives the aurora intricate, particulate texture */
.cosmos-aurora .aur-fog {
  position: absolute; left: -20%; right: -20%; top: -10%; height: 64%;
  background:
    radial-gradient(ellipse 40% 60% at 30% 30%, rgba(80,230,170,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 40%, rgba(120,240,200,0.08) 0%, transparent 62%),
    radial-gradient(ellipse 35% 70% at 50% 20%, rgba(60,200,150,0.07) 0%, transparent 65%);
  filter: blur(34px); mix-blend-mode: screen;
  animation: aurFogDrift 16s ease-in-out infinite alternate;
}
@keyframes aurFogDrift { 0% { transform: translateX(-3%) scale(1.04); } 100% { transform: translateX(4%) scale(1.12); } }
/* soft, blurred, drifting glows behind the motes - radial only, never banded */
.cosmos-aurora .aur-cloud {
  position: absolute; border-radius: 50%; filter: blur(38px); mix-blend-mode: screen;
  animation-name: aurCloudDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes aurCloudDrift {
  0%   { transform: translate(-3%, 1%) scale(1.0);  opacity: 0.6; }
  100% { transform: translate(4%, -2%) scale(1.14); opacity: 1.0; }
}
/* scattered sparkles - fine particulate twinkle */
.cosmos-aurora .aur-sparkles { position: absolute; inset: 0; }
.cosmos-aurora .aur-spark {
  position: absolute; border-radius: 50%; background: var(--sc, #cfeede);
  box-shadow: 0 0 6px var(--sc, #cfeede); opacity: 0; mix-blend-mode: screen;
  animation-name: aurTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes aurTwinkle { 0%,100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.85; transform: scale(1.1); } }

/* post-session "what emerged" read: stays until dismissed, with a close icon */
.cosmos-emerged { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 700ms ease; }
.cosmos-emerged.show { opacity: 1; pointer-events: auto; }
.cosmos-emerged .ce-card {
  position: relative; max-width: 600px; width: 84vw; padding: 30px 34px 28px; text-align: center;
  background: rgba(10, 9, 18, 0.82); border: 1px solid rgba(244, 239, 222, 0.18); border-radius: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 60px rgba(0,0,0,0.6), 0 0 40px rgba(255, 226, 180, 0.1);
}
/* these cues match the ONBOARDING copy (the VT323 monospace used after the cube),
   not a serif - so every guiding line across the product reads as one voice. */
.cosmos-emerged .ce-text { font-family: var(--font-main, 'VT323', monospace); font-style: normal; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.7; letter-spacing: 0.02em; color: rgba(248, 243, 228, 0.97); }
.cosmos-emerged .ce-close {
  position: absolute; top: 8px; right: 12px; background: none; border: none; line-height: 1;
  font-family: 'Cormorant Garamond', serif; font-size: 28px; color: rgba(244, 239, 222, 0.6);
  cursor: var(--cursor-thinkspace, pointer); padding: 4px 8px; transition: color 0.2s;
}
.cosmos-emerged .ce-close:hover { color: rgba(255, 240, 210, 0.98); }

/* interior cluster legend (top-left) - orients the reader, Obsidian-style */
.soul-graph .si-legend { position: fixed; top: 5vh; left: 4vw; z-index: 5; pointer-events: none; }
.soul-graph .si-legend-title { font-family: var(--font-main,'VT323',monospace); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(245,214,120,0.55); margin-bottom: 10px; }
.soul-graph .si-legend-row { display: flex; align-items: center; gap: 9px; font-family: 'EB Garamond', Georgia, serif; font-size: 16px; color: rgba(248,243,228,0.92); margin-bottom: 7px; }
.soul-graph .si-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,214,120,0.7); box-shadow: 0 0 8px rgba(245,214,120,0.6); flex: 0 0 auto; }

/* PARENT HUB label - the cluster, clickable to collapse/expand its children */
.soul-graph .si-hub {
  position: absolute; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  font-family: var(--font-main, 'VT323', monospace); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(248, 224, 160, 0.95); background: rgba(10, 9, 18, 0.78); border: 1px solid rgba(245, 214, 120, 0.4);
  cursor: var(--cursor-thinkspace, pointer); white-space: nowrap; pointer-events: auto;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 22px rgba(245,214,120,0.12); transition: opacity 500ms ease, border-color 0.2s, background 0.2s;
}
.soul-graph .si-hub:hover { border-color: rgba(245, 214, 120, 0.8); background: rgba(20, 17, 30, 0.88); }
.soul-graph .si-hub-count { font-size: 11px; color: rgba(10, 9, 18, 0.95); background: rgba(245, 214, 120, 0.85); border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.soul-graph .si-hub.collapsed { border-style: dashed; color: rgba(245, 214, 120, 0.75); }
.soul-graph .si-hub.collapsed .si-hub-count { background: rgba(245, 214, 120, 0.55); }

/* placeholder musical note hit-targets in the world interiors (no text yet) */
.soul-graph .si-note-hit {
  position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%;
  cursor: var(--cursor-thinkspace, pointer); pointer-events: auto; z-index: 4;
  transition: background 0.2s; background: transparent;
}
.soul-graph .si-note-hit:hover { background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); }