*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    body {
      background: #070810;
      color: #d8d8e0;
      font-family: 'Cormorant Garamond', Georgia, serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    #stage {
      position: fixed; inset: 0;
      width: 100vw; height: 100vh;
      display: block;
      cursor: crosshair;
    }

    /* Cummings + Eliot lines — ephemeral, fades through the session */
    #poem {
      position: fixed;
      top: 9vh;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-size: clamp(0.98rem, 1.1vw + 0.55rem, 1.22rem);
      line-height: 1.55;
      color: rgba(216, 216, 224, 0.68);
      pointer-events: none;
      max-width: min(560px, calc(100vw - 440px));
      letter-spacing: 0.02em;
      transition: opacity 2.8s ease;
      opacity: 0;
      text-shadow: 0 0 24px rgba(0,0,0,0.6);
    }
    #poem.visible { opacity: 1; }
    #poem small {
      display: block;
      font-style: normal;
      font-size: 0.68em;
      margin-top: 0.6em;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(201, 168, 108, 0.55);
    }

    /* Chunk-speaks overlay — fading serif near the hovered point */
    #speaks {
      position: fixed;
      pointer-events: none;
      max-width: 360px;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 0.98rem;
      line-height: 1.45;
      color: rgba(232, 232, 240, 0.92);
      text-shadow: 0 0 18px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.8);
      opacity: 0;
      transition: opacity 0.35s ease;
      z-index: 10;
    }
    #speaks.on { opacity: 1; }

    /* Corpus echo — when the visitor whispers, the most telling chunk surfaces here
       as prose. The terrain is the body; this is the body speaking back. */
    #corpus-echo {
      position: fixed;
      left: 50%;
      bottom: 200px;
      transform: translateX(-50%);
      max-width: 620px;
      width: calc(100% - 40px);
      text-align: center;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-size: clamp(1rem, 1.05vw + 0.6rem, 1.2rem);
      line-height: 1.6;
      color: rgba(232, 214, 178, 0.94);
      text-shadow: 0 0 32px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.7);
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.6s ease;
      z-index: 7;
      letter-spacing: 0.005em;
    }
    #corpus-echo.visible { opacity: 1; }
    #corpus-echo .echo-src {
      display: block;
      font-style: normal;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(201, 168, 108, 0.62);
      margin-top: 0.7em;
    }
    @media (max-width: 700px) {
      #corpus-echo { bottom: 188px; font-size: 0.98rem; }
    }
    #speaks .src {
      display: block;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.66rem;
      letter-spacing: 0.08em;
      color: rgba(201, 168, 108, 0.78);
      margin-bottom: 0.4em;
      word-break: break-all;
    }

    /* Whisper composer — primary invitation. Sits ABOVE the room-orbit so the
       text field is the first interactive surface, not buried under the dock. */
    #whisper {
      position: fixed;
      bottom: 128px;
      left: 50%;
      transform: translateX(-50%);
      width: min(640px, calc(100vw - 32px));
      z-index: 47;
      display: flex;
      gap: 0.6rem;
      align-items: stretch;
      pointer-events: auto;
    }
    #whisper input {
      flex: 1;
      background: rgba(8, 9, 14, 0.72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(216,216,224,0.14);
      color: #e8e8f0;
      padding: 0.9rem 1.1rem;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.05rem;
      font-style: italic;
      border-radius: 2px;
      outline: none;
      letter-spacing: 0.01em;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    #whisper input::placeholder { color: rgba(216,216,224,0.38); font-style: italic; }
    #whisper input:focus {
      border-color: rgba(201,168,108,0.5);
      background: rgba(10, 11, 18, 0.82);
    }
    #whisper button {
      background: transparent;
      color: rgba(201,168,108,0.85);
      border: 1px solid rgba(201,168,108,0.32);
      padding: 0 1.3rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    #whisper button:hover {
      background: rgba(201,168,108,0.12);
      border-color: rgba(201,168,108,0.65);
      color: rgba(232,210,160,1);
    }
    #whisper button[disabled] { opacity: 0.4; cursor: wait; }

    /* Readout strip — anti-hallucination: shows what is actually being fetched */
    #readout {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 4;
      padding: 0.5rem 1rem;
      background: linear-gradient(to bottom, rgba(6,7,12,0.72), rgba(6,7,12,0));
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.64rem;
      color: rgba(200,200,210,0.55);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: flex;
      gap: 1.2rem;
      justify-content: center;
      flex-wrap: wrap;
      pointer-events: none;
    }
    #readout .lbl { color: rgba(140,150,170,0.4); margin-right: 0.4em; }
    #readout .v { color: rgba(220,220,230,0.85); }
    #readout .v.blue { color: #6aa9d8; }
    #readout .v.amber { color: #d8a866; }
    #readout .v.green { color: #86c99a; }
    #readout .v.red { color: #d8686a; }

    /* Back link — tucked bottom-right so it does not collide with the house mark */
    #back {
      position: fixed;
      bottom: 14px;
      right: 14px;
      z-index: 5;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(180,180,200,0.5);
      text-decoration: none;
      padding: 0.3rem 0.55rem;
      transition: color 0.3s ease;
    }
    #back:hover { color: rgba(232,210,160,0.95); }

    /* Legend — subtle */
    #legend {
      position: fixed;
      bottom: 220px;
      right: 14px;
      z-index: 4;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(180,180,200,0.55);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      pointer-events: none;
      text-align: right;
    }
    #legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.55em; vertical-align: middle; }

    /* Small screens */
    @media (max-width: 700px) {
      #poem { font-size: 1rem; top: 13vh; padding: 0 1rem; max-width: calc(100vw - 32px); }
      #whisper { bottom: 132px; width: 94vw; }
      #whisper input { font-size: 0.95rem; padding: 0.75rem 0.9rem; }
      #whisper button { padding: 0 0.9rem; font-size: 0.6rem; }
      #readout { font-size: 0.56rem; gap: 0.7rem; }
      #legend { bottom: 240px; font-size: 0.55rem; }
    }


    /* ── Reader panel — vertical scroll on the left, terrain stays alive ──
       The boxes don't pop visitors off the page; they slide a column of prose
       in from the left, and the prose's tinted words wire into the manifold
       behind it. The panel is translucent so you read AND see the corpus
       glowing through the words. */
    .somewhere-reader {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: min(560px, 46vw);
      z-index: 60;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, rgba(6,7,12,0.94) 0%, rgba(8,10,18,0.86) 100%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-right: 1px solid rgba(232, 214, 178, 0.10);
      box-shadow: 18px 0 70px rgba(0,0,0,0.35);
      color: rgba(232, 224, 208, 0.92);
      transform: translateX(-105%);
      opacity: 0;
      transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
      pointer-events: auto;
    }
    .somewhere-reader[hidden] { display: none; }
    body.reader-open .somewhere-reader { transform: translateX(0); opacity: 1; }
    .reader-bar {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px 12px;
      border-bottom: 1px solid rgba(232, 214, 178, 0.10);
      gap: 12px;
    }
    .reader-room-label {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.45rem;
      letter-spacing: 0.02em;
      color: rgba(232, 214, 178, 0.94);
    }
    .reader-controls {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .reader-controls button {
      background: rgba(232, 214, 178, 0.06);
      border: 1px solid rgba(232, 214, 178, 0.16);
      color: rgba(232, 224, 208, 0.78);
      font: 11px/1 ui-monospace, monospace;
      padding: 6px 9px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .reader-controls button:hover {
      background: rgba(232, 214, 178, 0.12);
      color: rgba(255, 235, 195, 0.95);
      border-color: rgba(232, 214, 178, 0.32);
    }
    .reader-progress {
      flex: 0 0 auto;
      height: 1px;
      background: rgba(232, 214, 178, 0.08);
      position: relative;
    }
    .reader-progress > div {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, rgba(201,168,108,0.65), rgba(232,214,178,0.95));
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reader-scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 28px 32px 60vh;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(1.02rem, 1.1vw + 0.65rem, 1.18rem);
      line-height: 1.7;
      letter-spacing: 0.005em;
      scroll-behavior: smooth;
    }
    .reader-scroll:focus { outline: none; }
    .reader-scroll::-webkit-scrollbar { width: 6px; }
    .reader-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    .reader-scroll::-webkit-scrollbar-thumb { background: rgba(232,214,178,0.18); border-radius: 3px; }
    .reader-piece {
      transition: opacity 0.6s ease;
      opacity: 0.42;
      margin: 0 0 1.2em;
    }
    .reader-piece.active { opacity: 1; }
    .reader-h1 {
      font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem);
      line-height: 1.2;
      margin: 0.6em 0 0.4em;
      color: rgba(255, 235, 195, 0.96);
      font-weight: 500;
      letter-spacing: -0.005em;
      opacity: 1;
    }
    .reader-h2 {
      font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.55rem);
      line-height: 1.3;
      margin: 1.5em 0 0.5em;
      color: rgba(255, 220, 175, 0.92);
      font-weight: 500;
      opacity: 1;
    }
    .reader-h3 {
      font-size: 1.1rem;
      margin: 1.2em 0 0.4em;
      color: rgba(232, 214, 178, 0.85);
      opacity: 1;
    }
    .reader-blockquote {
      border-left: 2px solid rgba(232,214,178,0.32);
      padding-left: 1.1em;
      font-style: italic;
      margin: 1.4em 0;
      color: rgba(232, 220, 200, 0.88);
    }
    .reader-figcaption {
      font: 11px/1.4 ui-monospace, monospace;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(201,168,108,0.62);
      margin: 0.4em 0 1.6em;
    }
    /* Tinted words — the wires into the manifold. Color is set inline by the
       module so each word carries its dominant repo's hue. The hover lift is
       what tells you a word is connected to specific chunks behind the page. */
    .rmw {
      cursor: help;
      transition: text-shadow 0.25s ease, filter 0.25s ease;
      text-shadow: 0 0 0 transparent;
    }
    .rmw:hover {
      text-shadow: 0 0 14px currentColor, 0 0 4px currentColor;
      filter: brightness(1.18) saturate(1.2);
    }
    .reader-foot {
      flex: 0 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 9px 18px;
      border-top: 1px solid rgba(232, 214, 178, 0.08);
      font: 10px/1.4 ui-monospace, monospace;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(201, 168, 108, 0.55);
    }
    .reader-foot-hint { text-align: right; flex: 0 1 auto; opacity: 0.78; }

    /* When the reader is open, the reader IS the room. Strip every overlay
       that introduces, names, or describes the room — they're duplicative
       once the prose itself is on the page. Keep only the manifold (the
       point of the reading), the heartbeat (ambient state), the whisper
       field (agency to interject), and the legend (decoder for tints). */
    body.reader-open #poem,
    body.reader-open #speaks,
    body.reader-open #corpus-echo,
    body.reader-open .house-mark,
    body.reader-open .house-panel { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
    body.reader-open .house-panel { visibility: hidden; }
    /* The dock fades way back but stays reachable — the close button on the
       reader is the primary exit, but the dock lets the visitor jump rooms. */
    body.reader-open .house-orbit { opacity: 0.18; transition: opacity 0.35s ease; }
    body.reader-open .house-orbit:hover,
    body.reader-open .house-orbit:focus-within { opacity: 0.92; }
    /* Lift whisper field + heartbeat + house-orbit + readout into the manifold's
       new viewport (right of the panel). The manifold itself shifts via mapXY(); these
       overlays follow it. */
    body.reader-open #whisper { left: calc(min(560px, 46vw) + (100vw - min(560px, 46vw)) / 2); transform: translate(-50%, -50%); }
    body.reader-open .somewhere-heartbeat { left: calc(min(560px, 46vw) + 22px); bottom: 140px; }
    body.reader-open .house-orbit { left: calc(min(560px, 46vw) + (100vw - min(560px, 46vw)) / 2); transform: translateX(-50%); }
    body.reader-open #readout { left: min(560px, 46vw); }

    @media (max-width: 760px) {
      .somewhere-reader { width: 100vw; }
      /* On mobile the reader takes the full screen; everything else gets out of the way. */
      body.reader-open #whisper,
      body.reader-open .somewhere-heartbeat,
      body.reader-open .house-orbit { display: none; }
    }

    /* Agents: they can scrape this surface. Readable markup, stable endpoints. */
    [data-agent-note] { display: none; }

    .somewhere-modes {
      display: none; /* superseded by .house-orbit */
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      z-index: 40;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      width: min(720px, calc(100vw - 28px));
      pointer-events: auto;
    }
    .somewhere-mode {
      border: 1px solid rgba(244,239,231,.18);
      border-radius: 999px;
      padding: 9px 12px;
      background: rgba(5,5,8,.58);
      backdrop-filter: blur(10px);
      color: #f4efe7;
      text-decoration: none;
      font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .somewhere-mode:hover {
      border-color: rgba(255,210,161,.62);
      background: rgba(255,210,161,.12);
    }
    .somewhere-mode span {
      color: rgba(244,239,231,.62);
      text-transform: none;
      letter-spacing: 0;
      margin-left: 4px;
    }
    @media (max-width: 640px) {
      .somewhere-modes { bottom: 12px; gap: 6px; }
      .somewhere-mode { font-size: 10px; padding: 7px 9px; }
    }



.somewhere-room-shortcuts{display:none}/* superseded by .house-orbit; was floating above the field */
.somewhere-room-shortcuts.legacy{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(4,6,12,.58);backdrop-filter:blur(14px)}
.somewhere-room-shortcuts a{color:rgba(238,242,255,.72);text-decoration:none;font:10px/1.1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;padding:7px 9px;border-radius:999px}
.somewhere-room-shortcuts a:hover{color:#fff;background:rgba(255,255,255,.09)}
.house-fallback{display:none;padding:18px;color:rgba(235,238,250,.82)}.house-fallback a{color:#fff}.house-frame.frame-missing iframe{display:none}.house-frame.frame-missing .house-fallback{display:block}
@media(max-width:760px){.somewhere-room-shortcuts{left:12px;right:12px;bottom:12px;justify-content:center}}

/* ── Connect room ─────────────────────────────────────────── */
.house-connect-room {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(4,6,12,.96);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.house-connect-room[hidden] { display: none; }
.connect-inner {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.connect-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 72px 32px 120px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.connect-block {
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: 2.5rem;
}
.connect-block:last-of-type { border-bottom: none; }
.connect-block h2 {
  font: 400 1.1rem/1.3 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(238,242,255,.72);
  margin: 0 0 1rem;
}
.connect-lede { color: rgba(220,225,240,.82); font-size: .95rem; line-height: 1.7; margin-bottom: 1rem; }
.connect-block p { color: rgba(200,208,230,.78); font-size: .92rem; line-height: 1.7; margin: 0 0 .9rem; }
.connect-block a { color: rgba(168,200,232,.9); }
.connect-arrive-readout { font: .8rem ui-monospace,monospace; color: rgba(168,200,232,.62); margin-bottom: .6rem; min-height: 1.2em; }
.connect-arrive-form textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 10px 12px;
  color: rgba(238,242,255,.92); font: .9rem/1.6 ui-monospace, monospace;
  resize: vertical; min-height: 72px;
}
.connect-arrive-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.connect-arrive-discipline { font: .72rem ui-monospace,monospace; color: rgba(168,200,232,.52); }
.connect-arrive-controls button, .connect-offer-btns button, .connect-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px; padding: 7px 16px;
  color: rgba(238,242,255,.9); font: .82rem ui-monospace, monospace;
  cursor: pointer; transition: background .15s, border-color .15s;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  display: inline-block;
}
.connect-arrive-controls button:hover, .connect-offer-btns button:hover, .connect-btn:hover {
  background: rgba(255,255,255,.13); border-color: rgba(255,210,161,.5);
}
.connect-arrive-status { font: .78rem ui-monospace,monospace; color: rgba(168,200,232,.72); margin-top: 6px; min-height: 1.2em; }
.connect-field { margin-bottom: 1rem; }
.connect-field label { display: block; font: .78rem ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(168,200,232,.72); margin-bottom: 6px; }
.field-optional { opacity: .55; font-style: italic; text-transform: none; }
.connect-field input[type="text"], .connect-field input[type="url"],
.connect-field textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 9px 12px;
  color: rgba(238,242,255,.92); font: .9rem/1.5 ui-monospace, monospace;
  resize: vertical;
}
.connect-substrate-opts { display: flex; gap: 8px; margin-top: 4px; }
.connect-substrate-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; padding: 5px 12px;
  color: rgba(200,208,230,.8); font: .78rem ui-monospace,monospace;
  cursor: pointer; text-transform: uppercase; letter-spacing: .06em;
}
.connect-substrate-btn.active { background: rgba(255,210,161,.15); border-color: rgba(255,210,161,.5); color: #fff; }
.connect-offer-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.connect-offer-note { font: .76rem ui-monospace,monospace; color: rgba(168,200,232,.55); margin-top: 8px; }
.connect-offer-status { font: .78rem ui-monospace,monospace; color: rgba(168,200,232,.72); margin-top: 6px; min-height: 1.2em; }
.connect-offering-received { padding: 14px; background: rgba(168,200,232,.07); border-radius: 6px; }
.connect-offering-received p { color: rgba(220,225,240,.9); }
.connect-others-empty { color: rgba(180,185,205,.6); font-size: .9rem; }
.connect-others-list { list-style: none; padding: 0; margin: 0; }
.connect-others-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(200,208,230,.8); font-size: .88rem; }
.connect-others-list a { color: rgba(168,200,232,.9); }
.connect-network-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1rem; }
.connect-btn-sec { background: transparent; border-color: rgba(255,255,255,.15); color: rgba(180,185,205,.8); }
.connect-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: .8rem; }
.connect-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  background: rgba(255,255,255,.03); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.connect-card:hover { border-color: rgba(255,210,161,.4); background: rgba(255,210,161,.06); }
.connect-card-label { font: .7rem ui-monospace,monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(168,200,232,.6); }
.connect-card-title { font: .95rem/1.3 ui-monospace,monospace; color: rgba(238,242,255,.9); }
.connect-return {
  display: block; margin: 0 auto 2rem;
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px; padding: 8px 20px;
  color: rgba(180,185,205,.8); font: .8rem ui-monospace,monospace;
  cursor: pointer; letter-spacing: .08em; text-transform: uppercase;
}
.connect-return:hover { border-color: rgba(255,210,161,.4); color: #fff; }
@media(max-width: 640px) {
  .connect-scroll { padding: 56px 18px 100px; }
}

\n/* Somewhere House — integrated terrain / voice / album / letter architecture */
.somewhere-house {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.house-mark {
  position: fixed;
  left: 22px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: rgba(244,239,231,.78);
  text-transform: uppercase;
  letter-spacing: .14em;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.house-kicker { font-size: 10px; color: rgba(255,210,161,.82); }
.house-title { font-size: 11px; color: rgba(244,239,231,.62); }

.house-orbit {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(1020px, calc(100vw - 26px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  pointer-events: auto;
}

.house-room {
  min-height: 58px;
  border: 1px solid rgba(244,239,231,.17);
  border-radius: 16px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,210,161,.08), transparent 70%),
    rgba(5,5,8,.58);
  color: #f4efe7;
  backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.house-room span {
  display: block;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1;
  color: #ffd2a1;
  letter-spacing: -.025em;
}

.house-room em {
  display: block;
  margin-top: 5px;
  color: rgba(244,239,231,.62);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-room:hover,
.house-room.active {
  transform: translateY(-2px);
  border-color: rgba(255,210,161,.58);
  background: rgba(255,210,161,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.32), 0 0 34px rgba(255,210,161,.10);
}

.house-panel {
  position: fixed;
  right: 18px;
  top: 60px;
  width: min(320px, calc(100vw - 44px));
  border: 1px solid rgba(244,239,231,.16);
  border-radius: 22px;
  padding: 16px 18px;
  background: rgba(5,5,8,.62);
  color: #f4efe7;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 90px rgba(0,0,0,.34);
  pointer-events: auto;
}

.house-panel-kicker {
  margin: 0 0 10px;
  color: #ffd2a1;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
}

.house-panel h1 {
  margin: 0 0 10px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: .98;
  letter-spacing: -.045em;
}

.house-panel p {
  margin: 0 0 12px;
  color: rgba(244,239,231,.78);
  font: 13px/1.5 ui-serif, Georgia, "Times New Roman", serif;
}

.house-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.house-actions button,
.house-actions a,
.house-frame-bar button,
.house-frame-bar a {
  border: 1px solid rgba(255,210,161,.24);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,210,161,.07);
  color: #f4efe7;
  text-decoration: none;
  cursor: pointer;
  font: 11px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.house-actions button:hover,
.house-actions a:hover,
.house-frame-bar button:hover,
.house-frame-bar a:hover {
  border-color: rgba(255,210,161,.66);
  background: rgba(255,210,161,.14);
}

.house-frame {
  position: fixed;
  inset: 16px;
  z-index: 55;
  border: 1px solid rgba(255,210,161,.24);
  border-radius: 28px;
  overflow: hidden;
  background: #050508;
  box-shadow: 0 30px 140px rgba(0,0,0,.72);
  pointer-events: auto;
}

.house-frame-bar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 18px;
  background: rgba(5,5,8,.92);
  border-bottom: 1px solid rgba(244,239,231,.13);
  color: rgba(244,239,231,.78);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}

.house-frame-bar span {
  margin-right: auto;
  color: #ffd2a1;
}

.house-frame iframe {
  width: 100%;
  height: calc(100% - 48px);
  border: 0;
  background: #050508;
}

@media (max-width: 760px) {
  .house-mark { top: 12px; left: 14px; }
  .house-panel {
    top: 56px;
    left: 14px;
    right: 14px;
    width: auto;
    padding: 14px;
  }
  .house-orbit {
    bottom: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100vw - 20px);
    gap: 6px;
  }
  .house-room { min-height: 50px; padding: 7px 9px; border-radius: 12px; }
  .house-room span { font-size: 15px; }
  .house-room em { font-size: 9px; margin-top: 3px; }
  .house-frame { inset: 8px; border-radius: 18px; }
  .house-frame-bar { height: 54px; flex-wrap: wrap; align-content: center; }
  .house-frame iframe { height: calc(100% - 54px); }
}

@media (max-height: 680px) and (min-width: 761px) {
  .house-panel { max-width: 340px; padding: 16px; }
  .house-panel h1 { font-size: 30px; }
  .house-panel p { font-size: 13px; }
  .house-room { min-height: 54px; }
}



#arrival-note {
  display: none; /* signal lives in the whisper placeholder + corpus echo now */
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 45;
  width: min(720px, calc(100vw - 34px));
  color: rgba(244,239,231,.68);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: center;
  pointer-events: none;
}
#arrival-note strong { color: rgba(255,210,161,.88); font-weight: 400; }
@media (max-width: 760px) { #arrival-note { bottom: 86px; font-size: 11px; } }


.house-room.lens-pulse {
  animation: lensPulse 1.4s ease-out 1;
}
@keyframes lensPulse {
  0% { box-shadow: 0 0 0 rgba(255,210,161,0); transform: translateY(0); }
  22% { box-shadow: 0 0 36px rgba(255,210,161,.34); transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 rgba(255,210,161,0); transform: translateY(0); }
}

/* Somewhere Heartbeat — one state, two readers: human glyph + agent packet */
.somewhere-heartbeat {
  position: fixed;
  left: 18px;
  bottom: 208px;
  z-index: 46;
  width: min(250px, calc(100vw - 44px));
  border: 1px solid rgba(244,239,231,.14);
  border-radius: 22px;
  padding: 12px 13px 11px;
  background: rgba(5,5,8,.52);
  color: rgba(244,239,231,.76);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,.24);
  pointer-events: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.heartbeat-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  align-items: center;
}

.heartbeat-glyph {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,161,.78) 0 2px, transparent 3px),
    conic-gradient(from var(--phase, 0deg), rgba(255,210,161,.95), rgba(132,194,255,.72), rgba(244,239,231,.22), rgba(255,210,161,.95));
  box-shadow: 0 0 30px rgba(255,210,161,.18);
  animation: heartbeatSpin 18s linear infinite, heartbeatPulse 4.8s ease-in-out infinite;
}

.heartbeat-glyph::before,
.heartbeat-glyph::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid rgba(5,5,8,.72);
  background: rgba(5,5,8,.42);
}

.heartbeat-glyph::after {
  inset: 17px;
  background: rgba(255,210,161,.9);
  border: 0;
  box-shadow: 0 0 18px rgba(255,210,161,.42);
}

@keyframes heartbeatSpin { to { transform: rotate(360deg); } }
@keyframes heartbeatPulse {
  0%, 100% { filter: saturate(.92); opacity: .82; }
  50% { filter: saturate(1.28); opacity: 1; }
}

.heartbeat-kicker {
  color: rgba(255,210,161,.86);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.heartbeat-whisper {
  margin-top: 4px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(244,239,231,.78);
}

.heartbeat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  color: rgba(244,239,231,.48);
  font-size: 10px;
}

.heartbeat-agent {
  margin-top: 9px;
  border-top: 1px solid rgba(244,239,231,.10);
  padding-top: 8px;
}

.heartbeat-agent summary {
  cursor: pointer;
  color: rgba(132,194,255,.74);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.heartbeat-agent pre {
  max-height: 150px;
  overflow: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(244,239,231,.62);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .somewhere-heartbeat {
    display: none;
  }
  .heartbeat-whisper { font-size: 12px; }
}

@media (max-height: 720px) {
  .somewhere-heartbeat {
    transform: scale(.86);
    transform-origin: left bottom;
  }
}


.house-shape-room { position: fixed; inset: 0; background: rgba(8,5,3,0.92); color: #f0e7d0; z-index: 60; display: flex; align-items: stretch; justify-content: center; padding: 0; backdrop-filter: blur(6px); }
.house-shape-room[hidden] { display: none; }
.shape-inner { width: min(1200px, 96vw); height: 96vh; margin: 2vh auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; background: linear-gradient(180deg, rgba(28,18,10,0.92) 0%, rgba(8,5,3,0.96) 100%); border: 1px solid rgba(232,214,178,0.18); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.shape-bar { display: flex; flex-direction: column; gap: 8px; }
.shape-kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232,214,178,0.7); }
.shape-lede { margin: 0; font-size: 15px; line-height: 1.5; max-width: 760px; color: #f0e7d0; }
.shape-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.shape-controls button { background: rgba(255,216,150,0.08); color: #ffd896; border: 1px solid rgba(255,216,150,0.32); padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; }
.shape-controls button:hover { background: rgba(255,216,150,0.18); border-color: rgba(255,216,150,0.6); }
.shape-stage { flex: 1 1 auto; display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 18px; min-height: 0; }
.shape-svg { width: 100%; height: 100%; display: block; max-height: 100%; }
.shape-readout { padding: 18px 20px; border: 1px solid rgba(232,214,178,0.18); border-radius: 14px; background: rgba(8,5,3,0.6); display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: auto; }
.shape-readout-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,214,178,0.65); margin: 0; }
.shape-readout-title { margin: 0; font-size: 22px; line-height: 1.25; color: #ffd896; }
.shape-readout-body { margin: 0; font-size: 14px; line-height: 1.55; color: #f0e7d0; }
.shape-readout-foot { margin: auto 0 0 0; font-size: 12px; color: rgba(232,214,178,0.6); font-style: italic; }
.shape-node { cursor: pointer; transition: transform 0.18s ease, opacity 0.18s ease; }
.shape-node:hover { transform: scale(1.06); }
.shape-node circle { fill: rgba(8,5,3,0.85); stroke: rgba(232,214,178,0.55); stroke-width: 1.5; }
.shape-node.active circle { fill: rgba(255,216,150,0.18); stroke: #ffd896; stroke-width: 2; }
.shape-node text { fill: #f0e7d0; font-size: 11px; font-weight: 500; pointer-events: none; }
.shape-node.active text { fill: #ffd896; }
.shape-edge { fill: none; stroke: rgba(232,214,178,0.22); stroke-width: 1.4; }
.shape-edge.active { stroke: #ffd896; stroke-width: 2; opacity: 0.95; }
.shape-return { align-self: flex-end; background: rgba(255,216,150,0.08); color: #ffd896; border: 1px solid rgba(255,216,150,0.32); padding: 6px 14px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.shape-return:hover { background: rgba(255,216,150,0.18); border-color: rgba(255,216,150,0.6); }
@media (max-width: 720px) {
  .shape-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .shape-readout { max-height: 38vh; }
}