/* Quintic opacity ramp: zero slope at both ends, with a solid matching seam. */
.landing-scene-fade {
 position:absolute;z-index:10;inset:auto 0 -1px;
 height:calc(240px + var(--landing-blend-extension,0px));pointer-events:none;
 background:linear-gradient(180deg,
  rgba(var(--landing-story-rgb,242,234,220),0) 0%,
  rgba(var(--landing-story-rgb,242,234,220),.00856) 10%,
  rgba(var(--landing-story-rgb,242,234,220),.05792) 20%,
  rgba(var(--landing-story-rgb,242,234,220),.16308) 30%,
  rgba(var(--landing-story-rgb,242,234,220),.31744) 40%,
  rgba(var(--landing-story-rgb,242,234,220),.5) 50%,
  rgba(var(--landing-story-rgb,242,234,220),.68256) 60%,
  rgba(var(--landing-story-rgb,242,234,220),.83692) 70%,
  rgba(var(--landing-story-rgb,242,234,220),.94208) 80%,
  rgba(var(--landing-story-rgb,242,234,220),.99144) 90%,
  rgb(var(--landing-story-rgb,242,234,220)) 98%,rgb(var(--landing-story-rgb,242,234,220)) 100%);
}
/* Mobile Safari may magnify small editable text on focus. Keep controls at a
   readable size instead of disabling the user's viewport/pinch zoom. This
   shared rule also covers lazy-loaded authentication and profile forms. */
@media (max-width:700px), (any-pointer:coarse) {
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]),
  textarea,
  select,
  [contenteditable=""],
  [contenteditable="true"],
  [contenteditable="plaintext-only"] {
    font-size:max(16px, 1em)!important;
  }
}
/* Solid ivory actions use the landing page's warm ink in every state.
   Translucent glass controls and destructive actions retain their own palette. */
button:is(
  .profile-setup__continue,
  .mp-auth__submit,
  .onboarding__button--primary,
  .onboarding-photo__continue,
  .onboarding-place__enter,
  .profile-panel__save:not(.profile-panel__save--danger),
  .profile-links__commit,
  .profile-links__retry,
  .camera-preview__start,
  .invitation-card__join,
  .private-invitation-acceptance__accept,
  .environment-preview__action,
  .room-composer__send
) {
  color:var(--action-ink, #17130f);
  text-shadow:none;
}
/* Landing ivory for primary actions; blue glass remains for place controls. */
:root {
  --action-blue-rgb: 90 127 195;
  --action-fill: #e8d2af;
  --action-fill-hover: #f2e0c4;
  --action-ink: #17130f;
  --action-fill-pressed: #d8c09c;
  --action-glass-ink: #f5f8ff;
  --action-border: #e8d2af;
  --action-glass: rgb(var(--action-blue-rgb) / .13);
  --action-glass-hover: rgb(var(--action-blue-rgb) / .23);
  --action-focus: #e8d2af;
  --entry-ink: #f4efe7;
  --entry-ink-soft: rgb(244 239 231 / .7);
  --entry-error: #ffbcb0;
}
/* Shared backdrop for authentication and onboarding. */
:root {
  --entry-background: radial-gradient(90% 80% at 18% 50%, rgba(44, 71, 105, 0.28), transparent 66%),
    radial-gradient(70% 60% at 83% 10%, rgba(117, 75, 52, 0.16), transparent 62%),
    linear-gradient(145deg, #070a10 0%, #0a0e15 52%, #100d0d 100%);
}
/* Canonical panel material, shared by landing and app. */
:root {
  --panel-tint-a: rgba(29, 24, 21, 0.3);
  --panel-tint-b: rgba(19, 16, 15, 0.41);
  --panel-filter: blur(34px) saturate(180%) brightness(1.14);
  --panel-rim: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.7),
    rgba(206, 226, 255, 0.18) 28%,
    rgba(255, 255, 255, 0.06) 54%,
    rgba(255, 222, 182, 0.22) 78%,
    rgba(255, 255, 255, 0.4)
  );
  /* Cheap insurance now that more of the room comes through: what is behind
     this text is a painting nobody controls. */
  --panel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 18px 44px -14px rgba(0, 0, 0, 0.42),
    0 40px 96px -30px rgba(0, 0, 0, 0.44);
}
.platform-web {
  --panel-tint-a: rgba(30, 25, 22, 0.38);
  --panel-tint-b: rgba(20, 17, 16, 0.49);
  --panel-filter: blur(31px) saturate(173%) brightness(1.12);
}
@media (max-resolution: 1.25dppx) {
  .platform-web {
    --panel-tint-a: rgba(31, 26, 23, 0.6);
    --panel-tint-b: rgba(21, 18, 17, 0.7);
    --panel-filter: blur(17px) saturate(160%) brightness(1.08);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --panel-tint-a: rgba(37, 30, 26, 0.955); --panel-tint-b: rgba(24, 20, 18, 0.975); }
}
/* ---------------------------------------------------------------------------
   Manyplace — chrome for a room you sit in, not an app you operate.
   The painting carries the visual richness. Everything here stays quiet:
   glass that borrows the room's lamplight, and nothing that asks to be looked at.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  src: url('/runtime/31da55e7376d4b1c463549bb18c264434adc6185b81b0e09a05236218938c195/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  /* `swap`, never `block`: a room that shows no text for three seconds on a
     cold start is worse than one that briefly falls back to a system serif. */
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/runtime/31da55e7376d4b1c463549bb18c264434adc6185b81b0e09a05236218938c195/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  /* `swap`, never `block`: a room that shows no text for three seconds on a
     cold start is worse than one that briefly falls back to a system serif. */
  font-display: swap;
}

:root {
  /* Ink is warm, never pure white — the room is lit by tungsten, not daylight. */
  --ink: #f4efe7;
  --ink-soft: rgba(244, 239, 231, 0.58);
  --ink-faint: rgba(244, 239, 231, 0.34);

  /* The single accent, borrowed from the lamps. Reserved for *you* — never
     spent on anyone else, so the eye always knows which one it is. */
  --lamp: #f2b45c;

  --glass-bg: rgba(26, 22, 20, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --glass-lip: rgba(255, 255, 255, 0.16);
  --glass-blur: 32px;
  /* Enough to soften what is behind, not enough to erase it. At 60px the pill
     went completely flat and read as painted plastic: you could not see
     *through* it, and seeing through is the whole cue. */
  --bar-blur: 24px;

  --bar-h: 46px;
  --bar-inset: 14px;
  /* Native window controls sit outside the web content. */
  --chrome-left: 14px;
  --radius: 15px;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  color-scheme: dark;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  background: #0b0908;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A room is not a document: nothing here is selectable or draggable. */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

img {
  -webkit-user-drag: none;
}

/* iOS otherwise treats the room as a photograph: holding the painting opens
   Share / Save to Photos and tears the person out of the spatial interaction.
   Scope this to scenery and seated portraits so editable text and real links
   retain their native long-press affordances. */
#plate,
#environment,
#stage canvas,
#stage video,
.seat__disc {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/*
   Layer order, in one place.

   Everything painted over the plate needs an explicit z-index, because an
   explicit one beats DOM order however late a thing is appended. The ambient
   layers have carried 1-4 since they were written, which quietly meant the
   star canvas (inset: 0, z-index: 4) was painting over the top bar, over the
   people, and over anything else added afterwards without one.

        1-4   ambient: sky, foliage, glows, point canvas
          6   scrim under the top bar
         10   occupants
         11   empty-seat slots
         36   hover card while visible — deliberate focus temporarily rises
              above spatial speech
         34   room messages
         35   gestures in flight and at rest
         40   lately
         50   bars
         60   modal scrim

   #vignette is deliberately left below the ambient layers: it deepens the
   painting's corners, and lamplight should not be dimmed by it.
*/

/* --- the room ------------------------------------------------------------ */

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* The conversation lens is a body-level sibling, while room decisions live
   inside this fixed stacking context. Lift the context for the full lifetime
   of a decision (including its exit animation), so the lens cannot cover or
   intercept any of the choices. The safety dialog still owns the top layer. */
#stage:has(> .ask-scrim) {
  z-index: 110;
}

/* Positioned explicitly from coverRect() rather than object-fit, so the plate
   and the avatars sitting on it derive from one identical source of truth.
   Retina keeps the transform path; at standard density Stage writes final,
   physically snapped bounds to avoid WKWebView's retained-image softness. */
/* Deliberately *not* `will-change: transform` — promoting the plate to its own
   compositing layer makes the bars' backdrop-filter sample a stale copy and
   ghost. The transform only changes on window resize, so there is nothing to
   optimise here anyway. */
#plate {
  position: absolute;
  max-width: none;
  transform-origin: top left;
}

/* One transparent low-power surface for curated semantic materials. The exact
   room plate remains underneath as loading, reduced-motion, and WebGL fallback. */
#environment {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 210ms ease;
}

#environment.environment--visible {
  opacity: 1;
}

/*
   A scrim under the top bar's band.

   The bar's appearance was entirely at the mercy of whatever the plate happened
   to put behind it, and that changes with window shape: coverRect() re-crops
   the plate, so a wide-short window pushes the horizon up into the bar's band.
   Over the ceiling it read as glass; across the sunset it read as a smear, with
   the mullions still countable through it.

   This makes the backdrop predictable whatever the painting is doing. It also
   gives the macOS traffic lights something even to sit on, instead of arbitrary
   artwork. The cost is a very slight darkening along the top edge, always.
*/
#top-scrim,
.crossing__top-scrim {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(8, 6, 5, 0.3),
    rgba(8, 6, 5, 0.14) 55%,
    transparent 100%
  );
  /* Weighted left: the bar occupies the left third now, and so do the traffic
     lights. The rest of the painting keeps its own top edge. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 32%, transparent 62%);
  mask-image: linear-gradient(to right, #000 0, #000 32%, transparent 62%);
}

/* Deepens the corners so the glass has something to sit against. Barely there. */
#vignette,
.crossing__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    118% 88% at 50% 44%,
    transparent 44%,
    rgba(6, 4, 3, 0.26) 82%,
    rgba(6, 4, 3, 0.52) 100%
  );
}

/* --- glass --------------------------------------------------------------- */

/* One material for every surface the top bar opens.
   
   The room-activity panel, the music controls and the leave confirmation were
   three different recipes — and on web the browser-safe block turned two of
   them into 0.91-0.97 opaque cards at blur(20px) with no brightness, which is
   the grey-plastic recipe this app spent a long time getting away from. Held as
   properties rather than repeated, so the tiers are one edit each and nothing
   can drift again. */


.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  /* The inner top lip is what separates glass from a grey rectangle: a real
     pane catches a line of light along its upper edge. */
  box-shadow:
    inset 0 1px 0 var(--glass-lip),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 10px 34px rgba(0, 0, 0, 0.3);
}

/*
   The bar: a pill, not a band.

   It used to span the window, so it read as a slab laid across the painting.
   With no `right` and no width, an absolutely positioned flex box shrinks to
   fit its contents.
*/
.bar {
  position: absolute;
  z-index: 50;
  left: var(--bar-inset);
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 7px 0 17px;
}

/*
   Liquid glass.

   The previous surface was a 50%-opaque dark fill, which is why it read as grey
   plastic. Three things make it glass instead:

   1. `brightness()` on the backdrop. This is the one that matters — it makes
      the pill look *lit from behind* rather than painted over. Without it no
      amount of blur reads as glass.
   2. A white tint at low alpha with high saturation, rather than a dark fill.
      Real glass has no colour of its own; it takes the room's. Keeping the tint
      light and the saturation high is what lets the ceiling's blue and the
      lamps' amber come through as themselves. If this ever starts looking like
      a grey card, the fix is *less tint and more saturate*, never a darker fill.
   3. A gradient rim, brightest along the top. Done with a transparent border
      and two backgrounds rather than a mask, because `mask-composite` keywords
      differ between engines and WKWebView is the target.

   True edge refraction would need feDisplacementMap on the backdrop, which
   WKWebView does not support. The rim and the brightness are the honest
   approximation.
*/
#top-bar {
  top: var(--bar-inset);
  left: var(--chrome-left);
  /* Only ever used on arrival — see `.room--arriving`. */
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.16, 0.72, 0.25, 1);
  border-radius: 999px;
}


/* --- top bar contents ---------------------------------------------------- */

.room-glyph {
  width: 19px;
  height: 19px;
  color: var(--ink-soft);
  flex: none;
}

/* An instruction while a mode is running, in the slot the session used to
   hold. Nothing else in the bar ever speaks. */
.bar__prompt {
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.move-prompt-mobile {
  display: none;
}

.bar__prompt[hidden] {
  display: none;
}

/* --- lately -------------------------------------------------------------- */

/* Circular, like the reference's tab items — a light capsule appears under the
   pointer rather than a square tint. */
/* `display: grid` below outranks the UA's `[hidden]`; without this a hidden
   control keeps its seat in the bar. */
.icon-btn[hidden] {
  display: none;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  /* Availability is the default contract for header actions. New controls
     must not look disabled merely because they have no feature-specific CSS;
     quieter states are expressed explicitly below. */
  color: rgba(249, 248, 246, 0.88);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.icon-btn:disabled,
.icon-btn[aria-disabled='true'] {
  color: rgba(244, 239, 231, 0.35);
  cursor: default;
}

.icon-btn:disabled .icon-btn__glyph,
.icon-btn[aria-disabled='true'] .icon-btn__glyph {
  opacity: 0.35;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--ink);
}

.icon-btn__glyph {
  width: 18.5px;
  height: 18.5px;
  transition: opacity 220ms ease;
}

/* Chat state lives in the icon: speech lines fill the bubble while chat is on
   — whatever stage it has settled into — and drain from it when chat is off,
   leaving an empty, quieter bubble. No slash: off is a legitimate choice for
   silence, not an error to be struck through. */
.icon-btn__speech-line {
  opacity: 1;
  transition: opacity 220ms ease;
}

.icon-btn--chat-off .icon-btn__speech-line {
  opacity: 0;
}

.icon-btn--chat-off .icon-btn__glyph {
  opacity: 0.55;
}

/* Muting is a state, not a disabled control: quieter, but still plainly there. */
.icon-btn--sound.icon-btn--muted {
  color: rgba(244, 239, 231, 0.42);
}

.icon-btn--sound:focus-visible,
.volume-popover__mute:focus-visible,
.volume-popover__disclose:focus-visible,
.volume-popover__range:focus-visible {
  outline: 1px solid rgba(255, 222, 174, 0.78);
  outline-offset: 2px;
}

/* A tiny instrument panel, not a player. Two faders and three small moments;
   no heading, no numbers — the glyphs carry the words on hover. */
.volume-popover {
  position: absolute;
  z-index: 51;
  width: 238px;
  padding: 13px 14px 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  backdrop-filter: var(--panel-filter);
  -webkit-backdrop-filter: var(--panel-filter);
  background:
    linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box,
    var(--panel-rim) border-box;
  box-shadow: var(--panel-shadow);
  transform-origin: 34px -8px;
  animation: volume-popover-in 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.volume-popover[hidden] {
  display: none;
}

@keyframes volume-popover-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.volume-popover__row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.volume-popover__row + .volume-popover__row {
  margin-top: 10px;
}

/* A muted channel keeps its place: the track ghosts and the thumb hollows —
   "your level is kept, just not sounding" — and unmuting returns exactly there. */
.volume-popover__row--muted .volume-popover__slider {
  opacity: 0.42;
}

.volume-popover__row--muted .volume-popover__range::-webkit-slider-thumb {
  background: transparent;
  border-color: rgba(244, 239, 231, 0.62);
  box-shadow: none;
}

.volume-popover__row--muted .volume-popover__range::-moz-range-thumb {
  background: transparent;
  border-color: rgba(244, 239, 231, 0.62);
  box-shadow: none;
}

.volume-popover__mute {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink-soft);
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

/* A silenced mark wears the slash — the same vocabulary everywhere. */
.volume-popover__mute--off {
  color: rgba(244, 239, 231, 0.34);
}

.volume-popover__mute--off::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1.2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  background: rgba(244, 239, 231, 0.52);
  pointer-events: none;
}

/* A mark's name floats beside it on hover; nothing else ever moves. */
.volume-popover__word {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46, 40, 38, 0.92);
  color: rgba(244, 239, 231, 0.72);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.volume-popover__mute:hover .volume-popover__word,
.volume-popover__mute:focus-visible .volume-popover__word {
  opacity: 1;
}

.volume-popover__mute:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.13);
}

.volume-popover__glyph {
  width: 16px;
  height: 16px;
}

.volume-popover__slider {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* The authored default is a contextual calibration point, not permanent room
   furniture. Its dot appears only while this fader is being considered; the
   drag detent still catches there whether or not the dot is visible. */
.volume-popover__notch {
  position: absolute;
  top: calc(50% + 5px);
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(244, 239, 231, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.volume-popover__slider:hover .volume-popover__notch,
.volume-popover__slider:focus-within .volume-popover__notch {
  opacity: 1;
}

.volume-popover__notch-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(46, 40, 38, 0.94);
  color: rgba(244, 239, 231, 0.68);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Defaults at the right endpoint keep their pill inside the panel. */
.volume-popover__notch--end .volume-popover__notch-label {
  right: -2px;
  left: auto;
  transform: none;
}

.volume-popover__range[data-at-default='true']:active + .volume-popover__notch .volume-popover__notch-label,
.volume-popover__range[data-at-default='true']:focus-visible + .volume-popover__notch .volume-popover__notch-label {
  opacity: 1;
}

/* The explicit ask, on the master it expands: click to unfold the trims,
   click to fold them back. It flips while open — the one disclosure here,
   and it tells the truth. Collapsed, the group is one object: no orphaned
   marks, no half-shown state. */
/* The disclosure's column exists on every row — empty where there is no
   disclosure — so all tracks share the same endpoints. */
.volume-popover__tail {
  width: 22px;
  flex: none;
}

.volume-popover__disclose {
  display: grid;
  place-items: center;
  width: 22px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 239, 231, 0.4);
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.volume-popover__disclose:hover,
.volume-popover__disclose:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.075);
  outline: 0;
}

.volume-popover__disclose-glyph {
  width: 12px;
  height: 12px;
  transition: transform 170ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.volume-popover__disclose[aria-expanded='true'] .volume-popover__disclose-glyph {
  transform: rotate(180deg);
}

.volume-popover__bloom {
  margin-top: 10px;
  padding-left: 39px;
  animation: volume-popover-in 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.volume-popover__bloom[hidden] {
  display: none;
}

/* Children keep their settings under a muted parent; they only dim. */
.volume-popover__bloom--parent-muted {
  opacity: 0.5;
}

.volume-popover__row--small + .volume-popover__row--small {
  margin-top: 5px;
}

.volume-popover__row--small {
  gap: 9px;
}

.volume-popover__row--small .volume-popover__mute {
  width: 24px;
  height: 24px;
  background: transparent;
}

.volume-popover__row--small .volume-popover__mute--off::before {
  width: 15px;
}

.volume-popover__row--small .volume-popover__glyph {
  width: 14px;
  height: 14px;
}

.volume-popover__row--small .volume-popover__range {
  height: 16px;
}

.volume-popover__range {
  --range-fill: 32%;
  width: 100%;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.volume-popover__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(255, 223, 181, 0.78) 0 var(--range-fill),
    rgba(244, 239, 231, 0.18) var(--range-fill) 100%
  );
}

.volume-popover__range::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: #f1ded0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
  appearance: none;
  -webkit-appearance: none;
}

/* Once the label fades, the ring quietly confirms that the thumb is resting
   on the authored level. Position may differ by source; the vocabulary does
   not. */
.volume-popover__range[data-at-default='true']::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px rgba(255, 222, 174, 0.3),
    0 1px 5px rgba(0, 0, 0, 0.48);
}

.volume-popover__range::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.18);
}

.volume-popover__range::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 223, 181, 0.78);
}

.volume-popover__range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: #f1ded0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
}

.volume-popover__range[data-at-default='true']::-moz-range-thumb {
  box-shadow:
    0 0 0 2px rgba(255, 222, 174, 0.3),
    0 1px 5px rgba(0, 0, 0, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .volume-popover,
  .volume-popover__bloom {
    animation: none;
  }
}

/* Leaving is not a dangerous act, so this never turns red — it just warms
   slightly, the way everything else here does. */
.icon-btn--exit:hover {
  color: var(--lamp);
}

/* A dot, never a number. It marks personal gestures and new room messages;
   greetings alone remain too ambient to light it. */
.lately-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 2px rgba(20, 16, 14, 0.55);
}

.lately-dot[hidden] {
  display: none;
}

/* Position comes from the button that opened it, set in room/index.ts. Same
   glass family as the pill so the chrome reads as one set of objects, but
   tinted a touch deeper: this one carries text you actually read. */
.lately {
  position: absolute;
  width: 326px;
  padding: 15px 6px 9px;
  z-index: 40;
  border: 1px solid transparent;
  border-radius: 18px;
  backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  background:
    linear-gradient(rgba(22, 18, 16, 0.62), rgba(22, 18, 16, 0.72)) padding-box,
    linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.42),
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.22)
      )
      border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 12px 38px rgba(0, 0, 0, 0.42);
}

.lately__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0 12px 10px;
}

/* Capped rather than growing without limit. A dozen entries would run the panel
   most of the way down the window, which stops reading as a small record and
   starts reading as a feed — the exact thing this is not. The title stays put
   above the scroll, so the panel keeps its shape however much is in it. */
.lately__rows {
  display: flex;
  flex-direction: column;
  max-height: min(310px, calc(100vh - 190px));
  overflow-y: auto;
  /* Never hand a scroll gesture through to whatever is behind the panel. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 239, 231, 0.22) transparent;
}

.lately__rows::-webkit-scrollbar {
  width: 7px;
}

.lately__rows::-webkit-scrollbar-track {
  background: transparent;
}

.lately__rows::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(244, 239, 231, 0.18);
}

.lately__rows:hover::-webkit-scrollbar-thumb {
  background: rgba(244, 239, 231, 0.3);
}

/* Aligned to the first line, not the block centre. A name long enough to wrap
   used to leave the face and the glyph floating beside the middle of two lines,
   which made every row a slightly different shape. */
.lately__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
}

/* Room-wide entries are background, not post: no face, and visibly quieter —
   something heard across the room rather than said to you. */
.lately__row--room {
  opacity: 0.62;
}

.lately__face {
  width: 26px;
  height: 26px;
  margin-top: 1px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 550;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.09);
  filter: var(--avatar-filter, none);
}

/* Holds the column so the glyphs stay aligned whether or not there is a face. */
.lately__face--none {
  background: transparent;
}

.lately__glyph {
  width: 15px;
  height: 15px;
  margin-top: 6px;
  flex: none;
  color: var(--lamp);
}

.lately__what {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}

.lately__text {
  min-width: 0;
  flex: 1;
}

.lately__when {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 1px;
}

/* What people see most of the time, so it must not feel like a wasted trip.
   Not "no notifications", not an illustration, not an exclamation. */
.lately__empty {
  padding: 2px 12px 8px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* Messages carry more language than gestures, but not more urgency. The face
   and name establish who spoke; the room itself remains visible between rows. */
.lately__row--message {
  position: relative;
  gap: 10px;
  padding-right: 42px;
  opacity: 1;
  transition: background-color 260ms ease;
}

.lately__row--focused {
  background: linear-gradient(90deg, rgba(242, 180, 92, 0.12), transparent 88%);
}

.lately__row--menu-open {
  background: linear-gradient(90deg, rgba(242, 180, 92, 0.095), transparent 92%);
}

.lately__message-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.lately__message-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lately__message-head .lately__when {
  flex: none;
  margin: 0;
  font-size: 10.5px;
}

.lately__message-copy {
  margin-top: 2px;
  color: rgba(250, 245, 237, 0.88);
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lately__message-more {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(244, 239, 231, 0.32);
  font: 600 14px/1 var(--font-ui);
  letter-spacing: 1px;
  opacity: 0.42;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.lately__row--message:hover .lately__message-more,
.lately__message-more:focus-visible,
.lately__message-more[aria-expanded='true'] {
  color: rgba(250, 246, 239, 0.86);
  background: rgba(255, 255, 255, 0.07);
  opacity: 1;
  outline: 0;
}

.lately-actions-popover {
  position: fixed;
  z-index: 100;
  width: max-content;
  min-width: 186px;
  padding: 5px;
  border: 1px solid rgba(255, 235, 209, 0.15);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(54, 34, 23, 0.97), rgba(24, 20, 18, 0.985));
  box-shadow:
    inset 0 1px rgba(255, 241, 222, 0.1),
    0 16px 38px rgba(0, 0, 0, 0.5);
  transform-origin: right top;
  animation: lately-actions-in 140ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.lately-actions-popover[data-placement='above'] {
  transform-origin: right bottom;
}

.lately-actions__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(244, 239, 231, 0.72);
  font: 400 12px/1.25 var(--font-ui);
  text-align: left;
  white-space: nowrap;
}

.lately-actions__item:hover,
.lately-actions__item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  outline: 0;
}

.lately-actions__item--danger {
  color: rgba(242, 171, 145, 0.82);
}

.lately-actions__item--separated {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 8px 8px;
}

.lately-actions-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(7, 5, 4, 0.38);
}

.lately-actions-sheet {
  position: relative;
  width: min(100%, 460px);
  padding: 24px 14px 12px;
  border: 1px solid rgba(255, 235, 209, 0.15);
  border-radius: 25px 25px 16px 16px;
  background: linear-gradient(150deg, rgba(54, 35, 24, 0.98), rgba(24, 20, 18, 0.99));
  box-shadow:
    inset 0 1px rgba(255, 241, 222, 0.11),
    0 28px 80px rgba(0, 0, 0, 0.58);
  animation: lately-sheet-in 190ms cubic-bezier(0.18, 0.76, 0.22, 1) both;
}

.lately-actions-sheet__handle {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.2);
  transform: translateX(-50%);
}

.lately-actions-sheet__eyebrow {
  margin: 0 7px 6px;
  color: rgba(244, 224, 197, 0.52);
  font: 500 10.5px/1 var(--font-ui);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.lately-actions-sheet__message {
  display: -webkit-box;
  margin: 0 7px 14px;
  overflow: hidden;
  color: rgba(252, 246, 238, 0.78);
  font: 400 13px/1.45 var(--font-ui);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lately-actions-sheet__items {
  display: grid;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lately-actions__cancel {
  margin-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(244, 239, 231, 0.5);
  text-align: center;
}

@keyframes lately-actions-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lately-actions-popover,
  .lately-actions-sheet {
    animation: none;
  }
}

@keyframes lately-sheet-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- room speech -------------------------------------------------------- */

#room-messages {
  position: absolute;
  inset: 0;
  z-index: 34;
  overflow: hidden;
  pointer-events: none;
}

.room-message {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 13px 11px;
  border: 1px solid rgba(255, 239, 216, 0.28);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(64, 38, 22, 0.9), rgba(31, 23, 19, 0.91)) padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 9px 28px rgba(0, 0, 0, 0.36);
  color: rgba(255, 248, 237, 0.94);
  font: 400 13.5px/1.42 var(--font-ui);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  translate: 0 5px;
  /* Speech stays visually above the room without becoming an invisible wall:
     avatars underneath remain the pointer and touch targets. The full message
     and its safety actions remain available from Lately. */
  pointer-events: none;
  transition: opacity 250ms ease, translate 250ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.room-message--positioned {
  visibility: visible;
}

.room-message__copy {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.room-message::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 239, 216, 0.24);
  border-bottom: 1px solid rgba(255, 239, 216, 0.24);
  background: #2a1d17;
  transform: rotate(45deg);
}

.room-message[data-tail-edge='bottom']::after {
  bottom: -6px;
  left: calc(var(--room-message-tail, 50%) - 5px);
}

.room-message[data-tail-edge='left']::after {
  top: calc(var(--room-message-tail, 50%) - 5px);
  left: -6px;
  transform: rotate(135deg);
}

.room-message[data-tail-edge='right']::after {
  top: calc(var(--room-message-tail, 50%) - 5px);
  right: -6px;
  transform: rotate(-45deg);
}

.room-message--in {
  opacity: 1;
  translate: 0 0;
}

/* New speech naturally wins by DOM order. Inspecting somebody temporarily
   brings only their sentence forward, without making speech intercept the
   pointer or changing the room's otherwise quiet appearance. */
.room-message--prioritized {
  z-index: 1;
}

/* --- people -------------------------------------------------------------- */

#occupants {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.seat {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: auto;
  /* Establishes the container so initials can size against the disc, which
     changes with both the seat's perspective scale and the window size. */
  container-type: size;
  /* Opacity is the ONLY animated property. Never add transform here — a
     stationary thing gaining opacity is the weakest possible attention magnet,
     and that is the entire point. */
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.5, 1);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: default;
}

/* A slightly larger target than the drawn disc, so the pointer catches earlier
   and loses it later. Modest, because the far end of the table is crowded and
   overlapping targets would be worse than a small one. */
.seat::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
}

.seat__disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  /* Per-room, from room.json. Static — never animate `filter`, it forces
     repaints. See RoomManifest.avatarFilter for why this belongs to the room. */
  filter: var(--avatar-filter, none);
  /* The cream ring is the room's lamplight caught on the edge of a photo. */
  box-shadow:
    0 0 0 var(--ring, 3px) rgba(255, 238, 212, 0.82),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Everyone's ring is the room's ink; yours is the room's light. Reads as the
   lamps catching you rather than as a UI marker stuck onto the painting. */
.seat--you .seat__disc {
  box-shadow:
    0 0 0 var(--ring, 3px) var(--lamp),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Your face is a control, so it answers the pointer. Ring only — never scale:
   seat scale is perspective, so growing on hover reads as lurching forward and
   fights the geometry the room is drawn in. */
.seat--actionable .seat__disc {
  transition: box-shadow 200ms ease;
}

.seat--actionable:hover .seat__disc,
.seat--actionable:focus-visible .seat__disc {
  box-shadow:
    0 0 0 var(--ring, 3px) #ffd291,
    0 0 18px rgba(242, 180, 92, 0.45),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

.seat:focus-visible {
  outline: 1px solid rgba(255, 210, 145, 0.86);
  outline-offset: 7px;
  border-radius: 50%;
}

.seat__disc--initials {
  font-family: var(--font-ui);
  font-size: 34cqw;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: rgba(255, 248, 236, 0.92);
}

.seat__glyph {
  position: absolute;
  width: 30%;
  height: 30%;
  bottom: -6%;
  color: #fff;
  stroke-width: 1.7;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}

.seat--right .seat__glyph {
  right: -8%;
}

.seat--left .seat__glyph {
  left: -8%;
}

/* --- hover card ---------------------------------------------------------- */

.card {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 180px;
  max-width: 260px;
  padding: 12px 15px;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0;
  z-index: 36;
  /* One card node is reused for every person and interaction state. Geometry
     is measured afresh in HoverCard.show(), so animating it would expose the
     previous render's anchor before settling beside the selected avatar. Keep
     the material arrival soft; keep its spatial relationship immediate. */
  transition: opacity 160ms ease;
}

.card__body {
  display: block;
}

.card__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.card__more {
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
  margin: -4px -6px -4px auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(235, 239, 245, 0.44);
  font: 600 14px/1 var(--font-ui);
  letter-spacing: 1px;
}

.card__more[hidden] {
  display: none;
}

.card__more:hover,
.card__more:focus-visible,
.card__more[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(248, 245, 240, 0.88);
  outline: 0;
}

.card__menu {
  position: absolute;
  top: 38px;
  right: 9px;
  z-index: 3;
  display: grid;
  width: 224px;
  gap: 2px;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(255, 231, 199, 0.13);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(47, 30, 23, 0.985), rgba(23, 20, 19, 0.99));
  box-shadow: inset 0 1px 0 rgba(255, 241, 221, 0.1), 0 18px 44px rgba(0, 0, 0, 0.5);
}

.card__menu[hidden] { display: none; }

.card__menu-item {
  border: 0;
  border-radius: 8px;
  padding: 7px 9px;
  background: transparent;
  color: rgba(235, 239, 245, 0.64);
  font: 400 12px var(--font-ui);
  text-align: left;
}

.card__menu-item:hover,
.card__menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.065);
  color: rgba(249, 245, 239, 0.9);
  outline: 0;
}

.card__menu-label {
  margin: 6px 5px 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.085);
  color: rgba(230, 207, 179, 0.45);
  font: 500 9px/1 var(--font-ui);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.card__menu-item--danger {
  color: rgba(239, 187, 166, 0.7);
}

.card__menu-item--danger:hover,
.card__menu-item--danger:focus-visible {
  background: rgba(169, 80, 58, 0.16);
  color: rgba(255, 221, 209, 0.94);
}

.card--in {
  opacity: 1;
}

/* The card takes the pointer, because you have to be able to travel into it to
   use what is inside. */
.card {
  pointer-events: auto;
}

/*
   The bridge.

   The trip from an avatar to its card crossed a ~14px dead gap, and leaving the
   avatar cancelled the hover — which is what made hovering feel broken. It was
   never a problem with hover; it was a hole in the geometry. This gives the gap
   to the card, so the journey cannot be lost.

   It has to sit above the other avatars, or crossing a crowded table would hand
   the hover to whoever you passed over on the way.
*/
.card::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: 100%;
  width: 30px;
}

.card--left::before {
  right: auto;
  left: 100%;
}

.card__actions {
  display: flex;
  gap: 4px;
  margin: 11px -6px -2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.card__actions--sectioned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card--own:not(.card--composing) {
  min-width: 248px;
  max-width: 280px;
}

.card__actions--sectioned[data-count='4'] {
  grid-template-columns: minmax(96px, 1.45fr) minmax(52px, 0.8fr) minmax(58px, 0.85fr);
}

.card__actions[hidden] {
  display: none;
}

.card__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: default;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.card__action--wide {
  position: relative;
  grid-column: 1 / -1;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin-top: 1px;
  padding: 7px 9px 5px;
  color: var(--ink-faint);
}

.card__actionGlyph {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 1.4;
  color: currentColor;
}

.card__actionLabel {
  position: relative;
  display: inline-block;
}

.card__action:not([aria-disabled='true']):hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

.card__action--danger {
  color: rgba(239, 174, 151, 0.68);
}

.card__action--danger:not([aria-disabled='true']):hover {
  color: rgba(255, 205, 184, 0.94);
  background: rgba(184, 79, 52, 0.13);
}

.card__extra[hidden] { display: none; }

.card--composing {
  width: min(360px, calc(100vw - 24px));
  max-width: 360px;
}

.card--composing .card__body {
  opacity: 1;
}

.card--composing .card__line,
.card--composing .card__meta,
.card--composing .card__where {
  display: none;
}

.card--composing .card__name {
  color: rgba(255, 247, 236, 0.86);
}

.card--composing .card__extra {
  animation: room-composer-arrive 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.room-composer {
  display: grid;
  gap: 8px;
  margin: 11px -5px -3px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.room-composer__label {
  color: rgba(255, 244, 230, 0.74);
  font: 500 11.5px/1.2 var(--font-ui);
  letter-spacing: 0.015em;
}

@keyframes room-composer-arrive {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.room-composer__input {
  width: 100%;
  min-height: 74px;
  resize: none;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  outline: 0;
  background: rgba(9, 7, 6, 0.26);
  color: rgba(255, 249, 240, 0.94);
  font: 400 13px/1.45 var(--font-ui);
  caret-color: var(--lamp);
  user-select: text;
  -webkit-user-select: text;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.room-composer__input::placeholder {
  color: rgba(244, 239, 231, 0.32);
}

.room-composer__input:focus {
  border-color: rgba(255, 210, 145, 0.42);
  background: rgba(9, 7, 6, 0.36);
  box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.07);
}

.room-composer__footer {
  display: flex;
  align-items: center;
  min-height: 30px;
  gap: 7px;
}

.room-composer__counter {
  color: var(--ink-faint);
  font: 400 10.5px/1 var(--font-ui);
}

.room-composer__status {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: rgba(244, 211, 183, 0.58);
  font: 400 10.5px/1.25 var(--font-ui);
}

.room-composer__cancel,
.room-composer__send {
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  font: 500 11.5px/1 var(--font-ui);
}

.room-composer__cancel {
  background: transparent;
  color: var(--ink-faint);
}

.room-composer__send {
  background: rgba(244, 218, 177, 0.92);
  color: rgba(28, 20, 15, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.room-composer__send:disabled {
  opacity: 0.32;
}

/* Rationed and already used. The action stays unmistakably unavailable; the
   separate arc carries time, so brightness never lies about clickability. */
.card__action--spent {
  color: rgba(244, 239, 231, 0.3);
}

.card__action--spent:hover {
  background: transparent;
  color: rgba(244, 239, 231, 0.3);
}

.card__action--pending,
.card__gesture--pending {
  color: rgba(244, 239, 231, 0.5);
  background: rgba(255, 255, 255, 0.035);
}

.card__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 26;
  font-size: 17px;
  line-height: 1.05;
  font-weight: 550;
  letter-spacing: -0.003em;
  color: var(--ink);
}

.card__origin {
  flex: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.card__origin[hidden] {
  display: none;
}

.card__line {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 5px;
}

.card__activity-lead,
.card__activity-detail {
  min-width: 0;
}

.card__meta {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* Where they are and what time it is there. Sits slightly apart from the
   activity lines above it: those are about now, this is about them. */
.card__where {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 9px;
}

.card__where[hidden] {
  display: none;
}

/* Small enough to read as a mark rather than a sticker, and left in its true
   colours — the room's avatar filter has no business recolouring a flag. */
.card__flag {
  width: 15px;
  height: 11.25px;
  flex: none;
  border-radius: 1.5px;
  object-fit: cover;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.card__flag[hidden] {
  display: none;
}

.card__pin {
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: 1px;
  color: rgba(224, 194, 154, 0.58);
}

.card__pin[hidden] {
  display: none;
}

/* Hovering one names it in place of the where-line, so the card carries no
   permanent labels for three things you use once an hour. */
.card__gestures {
  display: flex;
  gap: 4px;
  margin: 11px -6px -2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.card__gestures[hidden] {
  display: none;
}

/* Writing opens something; the gestures beside it send the moment they are
   pressed. Four glyphs of one size in one row have no way of saying that on
   their own, and a whole extra row with its own rule was the old way of
   saying it — 47px of card to carry one distinction. The wider gap either
   side does most of the work; the hairline confirms it and costs no height. */
.card__rule {
  flex: none;
  align-self: center;
  width: 1px;
  height: 15px;
  margin: 0 6px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.11);
}

.card__gesture--lead .card__gestureGlyph {
  width: 17px;
  height: 17px;
}

.card__gesture {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 5px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: default;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    opacity 300ms ease;
}

.card__gesture:not([aria-disabled='true']):hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--lamp);
}

/* Spent. It does not disappear and it does not scold — it simply stops
   answering, which is the quietest way to say "not again just yet". */
.card__gesture--spent {
  color: rgba(244, 239, 231, 0.28);
}

.card__gesture--spent:hover {
  background: transparent;
  color: rgba(244, 239, 231, 0.28);
}

.card__gestureVisual {
  position: relative;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
}

.card__cooldownArc {
  flex: none;
  visibility: hidden;
  opacity: 0;
  overflow: visible;
  transform: rotate(-90deg);
  transition: opacity 140ms ease;
}

.card__cooldownArc--active {
  visibility: visible;
  opacity: 1;
}

.card__cooldownArc--action {
  position: absolute;
  top: 50%;
  right: calc(100% + 3px);
  width: 11px;
  height: 11px;
  transform: translateY(-50%) rotate(-90deg);
}

.card__cooldownArc--gesture {
  position: absolute;
  inset: 0;
  width: 29px;
  height: 29px;
}

.card__cooldownTrack {
  fill: none;
  stroke: rgba(242, 180, 92, 0.72);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.card__gestureGlyph {
  width: 19px;
  height: 19px;
}

/* --- gestures over a head ------------------------------------------------ */

#gestures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above the hover card. A gesture departs from under the panel you clicked to
     send it, and a card open over somebody else hid marks landing on them. */
  z-index: 35;
}

.mark {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(26, 22, 20, 0.62);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.4);
  color: var(--lamp);
  pointer-events: auto;
  opacity: 0;
  /* Opacity only on arrival — never a float-up, which is Instagram's grammar
     and is engineered specifically to pull the eye. The transform transition is
     for one case only: the row is centred over the head, so a second mark
     arriving nudges its neighbour aside. Rare, small, and better than leaving a
     lone mark permanently off-centre. */
  transition:
    opacity 1500ms ease,
    transform 420ms ease;
}

.mark--in {
  opacity: 1;
}

/* In flight. Driven by the Web Animations API rather than a transition, so the
   whole arc is one declaration and lands exactly on the resting mark. */
.mark--flying {
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.mark__glyph {
  width: 62%;
  height: 62%;
}

/* Who it was from, on hover only. The gesture is the message; a permanent
   name would turn it into a caption. */
.mark__from {
  position: absolute;
  top: 100%;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(26, 22, 20, 0.8);
  color: var(--ink-soft);
  font-size: 11.5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.mark:hover .mark__from {
  opacity: 1;
}

/* --- empty seats --------------------------------------------------------- */

#slots {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

.slot {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: default;
  /* Visible at rest: the slots only exist while you are choosing a seat, and
     hunting for an invisible target is not calm, just annoying. They vanish
     entirely the moment you sit down. */
  opacity: 0.42;
  transition: opacity 380ms ease;
}

.slot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 238, 212, 0.62);
  background: radial-gradient(circle, rgba(255, 226, 176, 0.16), transparent 72%);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.slot:hover,
.slot:focus-visible {
  opacity: 1;
  transition-duration: 160ms;
}

.slot[aria-disabled='true']:not(.slot--pending):hover,
.slot[aria-disabled='true']:not(.slot--pending):focus-visible {
  opacity: 0.42;
}

.slot[aria-disabled='true']:not(.slot--pending):hover::after,
.slot[aria-disabled='true']:not(.slot--pending):focus-visible::after {
  border-style: dashed;
  border-color: rgba(255, 238, 212, 0.62);
  box-shadow: none;
}

.slot--pending {
  opacity: 1;
}

.slot--pending::after {
  border-style: solid;
  border-color: var(--lamp);
  background: radial-gradient(circle, rgba(255, 226, 176, 0.24), transparent 72%);
  box-shadow: 0 0 0 4px rgba(242, 180, 92, 0.12);
}

.slot:hover::after,
.slot:focus-visible::after {
  border-style: solid;
  border-color: var(--lamp);
  box-shadow:
    0 0 0 4px rgba(242, 180, 92, 0.14),
    0 6px 20px rgba(0, 0, 0, 0.4);
}

.slot[hidden] {
  display: none;
}

/* --- the sit prompt ------------------------------------------------------ */

.ask-scrim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 60;
  /* Read twice: once as the dimming behind the panel, and again as part of the
     backdrop the panel itself samples. Heavy here makes the panel above it look
     like a slab however light its own pigment is. */
  background: rgba(8, 6, 5, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.ask-scrim--in {
  opacity: 1;
  pointer-events: auto;
}

/* The room stays visible behind the leave prompt, because the room is the
   thing being decided about. A blackout would make it feel like an exit. */
.ask-scrim--light {
  background: rgba(8, 6, 5, 0.3);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

/* Keeps its presence with the reassurance line gone: a leave prompt that
   shrinks to a tooltip reads as trivial, and this one is not. */
.confirm {
  min-width: 396px;
  padding: 42px 46px 38px;
  text-align: center;
}

/* The gap used to sit on .confirm, whose only child is this wrapper — so it
   spaced nothing, and the question sat directly on top of the buttons. */
.confirm__body {
  text-shadow: var(--panel-text-shadow);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.confirm__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.confirm__stay,
.confirm__go {
  padding: 11px 30px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  cursor: default;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

/* Staying is where the eye lands and where focus starts. */
.confirm__stay {
  border: 1px solid rgba(242, 180, 92, 0.42);
  background: rgba(242, 180, 92, 0.12);
  color: var(--ink);
  outline: none;
}

.confirm__stay:hover,
.confirm__stay:focus-visible {
  border-color: rgba(242, 180, 92, 0.72);
  background: rgba(242, 180, 92, 0.2);
}

/* Quiet, not red. Leaving a room is not a dangerous act, it is just an act,
   and alarming someone about it would be the loudest thing in the app. */
.confirm__go {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--ink-soft);
}

.confirm__go:hover {
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--ink);
}

.ask {
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid transparent;
  border-radius: 22px;
  backdrop-filter: var(--panel-filter);
  -webkit-backdrop-filter: var(--panel-filter);
  background:
    linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box,
    var(--panel-rim) border-box;
  box-shadow: var(--panel-shadow);
}

.ask--detail {
  min-width: 360px;
}

.ask__question {
  text-shadow: var(--panel-text-shadow);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--ink);
}

/* Five in a single row rather than a grid: arrow keys become left/right with
   no ambiguity, there is no second row for the eye to travel to, and the
   numbers read as a sequence rather than a keypad. */
.ask__options {
  display: grid;
  grid-template-columns: repeat(5, 92px);
  gap: 9px;
}

.ask__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 17px 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  white-space: nowrap;
  cursor: default;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    color 180ms ease;
}

/* Lit from within by the room's own lamplight, rather than filled with a flat
   highlight — the tile warms up the way everything else here does. */
.ask__choice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 58% at 50% 34%, rgba(242, 180, 92, 0.3), transparent 72%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.ask__choice > * {
  position: relative;
}

/* One tile is always current: your last activity, pre-selected, so the common
   case is Enter, Enter. Arrow keys and hover move it. */
.ask__choice--on {
  border-color: rgba(242, 180, 92, 0.62);
  color: var(--ink);
}

.ask__choice--on::before {
  opacity: 1;
}

.ask__glyph {
  width: 22px;
  height: 22px;
}

/* "(optional)" belongs beside the question, not in the placeholder — the
   placeholder's job is to show what a good answer looks like, and it was being
   spent on a caveat. */
.ask__optional {
  margin-left: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
  opacity: 0.75;
}

.ask__field { position: relative; }

.ask__field.detail-field--prefixed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  transition: border-color 150ms ease;
}

.ask__field.detail-field--prefixed:focus-within {
  border-color: rgba(242, 180, 92, 0.55);
}

.ask__field.detail-field--prefixed .ask__input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding-left: 4px;
  background: transparent;
}

.ask__remaining {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  opacity: 0.6;
  pointer-events: none;
}

.ask__remaining[hidden] {
  display: none;
}

/* Centred under a centred question. Right-aligning it made the panel lean,
   and there is only one action — nothing for it to be aligned against. */
.ask__actions {
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

/* Named for what it does rather than for the key it mirrors. Enter still
   submits; it simply is not announced. */
.ask__enter {
  padding: 8px 20px;
  border: 1px solid rgba(242, 180, 92, 0.42);
  border-radius: 10px;
  background: rgba(242, 180, 92, 0.12);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  cursor: default;
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.ask__enter:hover {
  border-color: rgba(242, 180, 92, 0.72);
  background: rgba(242, 180, 92, 0.2);
}

.ask__input {
  width: 100%;
  display: block;
  resize: none;
  line-height: 1.45;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
  transition: border-color 150ms ease;
}

.ask__input::placeholder {
  color: rgba(244, 239, 231, 0.26);
}

.ask__input:focus {
  border-color: rgba(242, 180, 92, 0.55);
}

/* Fixed words and editable words are adjacent grid cells, never two layers of
   text that can drift when a webfont or viewport changes. */
.detail-prefix {
  min-width: max-content;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  color: rgba(244, 239, 231, 0.55);
  cursor: text;
}

.ask__field .detail-prefix {
  padding-left: 14px;
  font: 15px/1.45 var(--font-ui);
}

/* --- ambient ------------------------------------------------------------ */

/* Everything in this section obeys one rule: opacity and transform only, never
   `filter` (which forces repaints), and never on the plate itself. */

.sky,
.foliage,
.glow,
.points {
  position: absolute;
  pointer-events: none;
}

.sky__band,
.sky__inner {
  position: absolute;
  pointer-events: none;
}

/* A pane of glass. Overflow-clipped to the gap between two mullions, so the
   frame stays welded to the base plate while the sky behind it moves. */
/* The aperture. Fixed, aligned to the pane, and NEVER animated — animating
   this instead of the image slides the window opening across the plate and
   leaves ghost mullions, which is exactly what it did the first time.

   The horizontal feather matters: a drifting image pulls in content from
   outside the pane, and that content is the neighbouring mullion. Feathered
   edges mean it arrives at zero opacity. */
.sky {
  overflow: hidden;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge, 30px),
    #000 calc(100% - var(--edge, 30px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge, 30px),
    #000 calc(100% - var(--edge, 30px)),
    transparent 100%
  );
}

/* Vertical feather, on its own level so the two masks compose without needing
   mask-composite (whose keywords differ across engines). */
.sky__band {
  top: 0;
  left: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 var(--feather, 70%),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 var(--feather, 70%),
    transparent 100%
  );
}

/* The only thing that moves. */
.sky__inner {
  background-repeat: no-repeat;
  animation-name: sky-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

/* ~1.7px/sec, which is genuinely how fast cloud crosses a view like this.
   The plate and sky source are pixel-aligned at zero. Starting there makes the
   deferred ambient mount invisible; the later drift keeps the authored speed
   without reloading the clouds at a displaced position. */
@keyframes sky-drift {
  0%, 50%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(var(--drift, 6px), 0, 0);
  }
  75% {
    transform: translate3d(calc(var(--drift, 6px) * -1), 0, 0);
  }
}

/* Distant foliage shimmers rather than sways: at this painted range real sway
   is sub-pixel, so translating it would be inventing motion. */
.foliage {
  z-index: 2;
  background: rgba(188, 214, 255, 0.5);
  mix-blend-mode: soft-light;
  opacity: 0;
  animation-name: shimmer;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* One per lamp, sitting exactly where the lamp already is. Light is additive,
   which is the whole reason none of this needs the plate cut into layers. */
.glow {
  z-index: 3;
  border-radius: 50%;
  /* Stops approximate inverse-square falloff: a tight bright core and a long
     faint tail. A single linear ramp reads as fog, not as light. */
  background: radial-gradient(
    circle,
    rgba(255, 202, 132, 0.95) 0%,
    rgba(255, 196, 124, 0.48) 10%,
    rgba(255, 190, 114, 0.2) 24%,
    rgba(255, 184, 106, 0.075) 44%,
    rgba(255, 180, 100, 0.02) 66%,
    transparent 80%
  );
  mix-blend-mode: screen;
  opacity: 0;
  /* The track carries its own shape, so interpolation must be linear, and it
     must NOT alternate — a noise track played backwards is a palindrome, and
     the turn is visible as a bounce. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Village lights, stars and dust, all in one low-rate canvas. Hundreds of DOM
   nodes would be absurd; hundreds of fillRects at 12fps are free. */
.points {
  inset: 0;
  z-index: 4;
}

/* --- onboarding ---------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.onboarding {
  position: absolute;
  inset: 0;
  /* `hidden` can still be scrolled programmatically when a focused control is
     replaced between steps. `clip` keeps this genuinely stage-like. */
  overflow: clip;
  isolation: isolate;
  background: var(--entry-background);
  transition: opacity 460ms ease, filter 460ms ease;
}

.onboarding--leaving {
  opacity: 0;
  filter: blur(8px);
}

.onboarding__aurora {
  position: absolute;
  z-index: -1;
  inset: -20%;
  opacity: 0.54;
  background:
    radial-gradient(35% 35% at 28% 39%, rgba(80, 116, 159, 0.2), transparent 72%),
    radial-gradient(24% 30% at 65% 70%, rgba(190, 123, 66, 0.08), transparent 75%);
  filter: blur(34px);
  animation: onboarding-breathe 12s ease-in-out infinite alternate;
}

/* The doorway lockup is shared by every in-app brand label and follows the
   public landing page's geometry, type, and optical baseline. */
.onboarding__brand {
  position: absolute;
  z-index: 3;
  top: 25px;
  left: var(--chrome-left);
  pointer-events: none;
  transition: opacity 460ms ease;
}

.onboarding-welcome {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.035em;
  color: rgba(248, 243, 236, 0.94);
  text-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
}

.onboarding--welcoming .onboarding-welcome {
  animation: onboarding-welcome 2.08s ease both;
}

.onboarding--welcoming .onboarding__brand {
  opacity: 0;
}

.onboarding--welcoming .onboarding__world-wrap {
  opacity: 0;
  transform: translateX(-18px) scale(0.97);
  animation: none;
}

.onboarding--welcoming .onboarding__panel {
  opacity: 0;
  transform: translateX(16px);
  animation: none;
}

.onboarding__scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(350px, 0.94fr) minmax(480px, 1.06fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  padding: 78px clamp(60px, 9vw, 164px) 54px;
}

.onboarding__world-wrap {
  justify-self: end;
  display: grid;
  justify-items: center;
  gap: 28px;
  animation: onboarding-world-arrive 1.2s cubic-bezier(0.16, 0.72, 0.25, 1) backwards;
}

.onboarding__world {
  position: relative;
  width: clamp(310px, 36vw, 540px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(210, 226, 247, 0.3),
    0 0 0 4px rgba(176, 207, 243, 0.055),
    0 30px 110px rgba(0, 0, 0, 0.64),
    0 0 110px rgba(70, 117, 168, 0.14);
}

.onboarding__world-image,
.onboarding-people,
.onboarding__world-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.onboarding__world-image {
  z-index: 0;
  inset: -3%;
  background: var(--runtime-onboarding-world-image, none) center 45% / cover no-repeat;
  filter: saturate(0.88) brightness(0.78) contrast(1.04);
  transform: scale(1.03);
  animation: onboarding-world-drift 18s ease-in-out infinite alternate;
}

.onboarding__world-glass {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 70%, transparent 45%, rgba(3, 5, 9, 0.36) 80%, rgba(3, 5, 9, 0.72) 100%),
    radial-gradient(circle at 29% 18%, rgba(235, 245, 255, 0.24), transparent 21%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.1), transparent 25% 72%, rgba(130, 169, 213, 0.08));
  box-shadow:
    inset 18px 22px 52px rgba(221, 238, 255, 0.08),
    inset -26px -34px 70px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* The orb is a product glimpse rather than an illustration. Four real seat
   positions make the room feel inhabited; one card briefly demonstrates what
   the profile fields become, then the people are left for quiet exploration. */
.onboarding-people {
  z-index: 2;
}

.onboarding-person {
  position: absolute;
  z-index: 1;
  top: calc(var(--person-y) - clamp(17px, 1.725vw, 25px));
  left: calc(var(--person-x) - clamp(17px, 1.725vw, 25px));
  width: clamp(34px, 3.45vw, 50px);
  height: clamp(34px, 3.45vw, 50px);
  opacity: 0;
  transition: opacity 700ms ease;
}

.onboarding--arrived .onboarding-person {
  opacity: 1;
}

/* The active preview is a tooltip surface. It must own the local stacking
   order so a later avatar in the DOM cannot paint over its text. */
.onboarding-person--open {
  z-index: 4;
}

.onboarding-person__avatar-scale {
  width: 100%;
  height: 100%;
  transform: scale(calc(var(--person-scale) - 0.06));
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.16, 0.72, 0.25, 1);
}

.onboarding--arrived .onboarding-person__avatar-scale {
  transform: scale(var(--person-scale));
}

.onboarding--arrived .onboarding-person--clara,
.onboarding--arrived .onboarding-person--clara .onboarding-person__avatar-scale {
  transition-delay: 90ms;
}

.onboarding--arrived .onboarding-person--rafael,
.onboarding--arrived .onboarding-person--rafael .onboarding-person__avatar-scale {
  transition-delay: 180ms;
}

.onboarding--arrived .onboarding-person--thomas,
.onboarding--arrived .onboarding-person--thomas .onboarding-person__avatar-scale {
  transition-delay: 270ms;
}

.onboarding-person__avatar {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 1.5px solid rgba(241, 221, 194, 0.72);
  border-radius: 50%;
  padding: 0;
  background: #2a2e38;
  box-shadow:
    0 0 0 2px rgba(224, 235, 247, 0.12),
    0 7px 18px rgba(0, 0, 0, 0.48),
    inset 0 1px rgba(255, 255, 255, 0.2);
  cursor: default;
  filter: saturate(0.88) brightness(0.92);
  transition: filter 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.onboarding-person__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.onboarding-person__avatar:hover,
.onboarding-person__avatar:focus-visible,
.onboarding-person--open .onboarding-person__avatar {
  outline: 0;
  filter: saturate(1) brightness(1.04);
  box-shadow:
    0 0 0 2px rgba(238, 218, 191, 0.23),
    0 8px 22px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(111, 148, 188, 0.15);
  transform: translateY(-1px);
}

.onboarding-person__card {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: max-content;
  min-width: 144px;
  max-width: 160px;
  display: block;
  border: 1px solid rgba(222, 233, 245, 0.16);
  border-radius: 12px;
  margin-top: -39px;
  padding: 9px 10px;
  background: linear-gradient(145deg, rgba(19, 24, 31, 0.97), rgba(9, 12, 17, 0.98));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(0, 0, 0, 0.54);
  pointer-events: none;
  animation: onboarding-person-card-in 180ms ease-out backwards;
}

.onboarding-person__card[hidden] {
  display: none;
}

.onboarding-person__card--right {
  left: calc(100% + 11px);
  transform-origin: left center;
}

.onboarding-person__card--left {
  right: calc(100% + 11px);
  transform-origin: right center;
}

.onboarding-person__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.onboarding-person__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 13px var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: rgba(249, 245, 239, 0.94);
}

.onboarding-person__activity {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 11px;
  color: rgba(237, 241, 246, 0.74);
}

.onboarding-person__duration {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 10px;
  color: rgba(226, 233, 242, 0.55);
}

.onboarding-person__where {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  overflow: hidden;
}

.onboarding-person__origin {
  flex: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.onboarding-person__place {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: rgba(226, 233, 242, 0.65);
}

.onboarding-person__flag {
  width: 12px;
  height: 8px;
  flex: none;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.onboarding-person__pin {
  width: 10px;
  height: 10px;
  flex: none;
  color: rgba(224, 194, 154, 0.6);
}

@keyframes onboarding-person-card-in {
  from { opacity: 0; }
}

.onboarding__world-caption {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: rgba(230, 235, 241, 0.42);
  letter-spacing: 0.005em;
}

.onboarding__panel {
  width: min(100%, 540px);
  justify-self: start;
  padding: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(220, 231, 244, 0.13);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(28, 33, 42, 0.76), rgba(18, 20, 27, 0.7)) padding-box;
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 34px 100px rgba(0, 0, 0, 0.45);
  animation: onboarding-panel-arrive 850ms 120ms cubic-bezier(0.16, 0.72, 0.25, 1) backwards;
}

/* The first step asks one thing and therefore shows one thing. It deliberately
   drops the panel, progress, labels and supporting prose used by later steps;
   empty space is part of the invitation. */
.onboarding--name .onboarding__panel {
  width: min(100%, 540px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.onboarding--photo .onboarding__panel {
  position: relative;
  width: min(100%, 540px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.onboarding--place .onboarding__panel {
  position: relative;
  width: min(100%, 540px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.onboarding--name .onboarding__progress,
.onboarding--photo .onboarding__progress,
.onboarding--place .onboarding__progress,
.onboarding--place .onboarding__world-caption,
.onboarding--photo .onboarding__world-caption,
.onboarding--name .onboarding__world-caption {
  display: none;
}

.onboarding--name .onboarding__body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding--name .onboarding__title {
  max-width: none;
  font-size: clamp(40px, 3.8vw, 50px);
  text-align: center;
  white-space: nowrap;
}

.onboarding-name__entry {
  position: relative;
  width: min(100%, 446px);
  height: 60px;
  display: flex;
  align-items: center;
  margin-top: 34px;
  padding: 5px 7px 5px 22px;
  border: 1px solid rgba(221, 232, 244, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(112deg, rgba(220, 233, 248, 0.07), rgba(151, 174, 202, 0.022) 58%, rgba(218, 177, 124, 0.035)),
    rgba(3, 6, 11, 0.24);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.075),
    inset 0 -1px rgba(0, 0, 0, 0.16),
    0 18px 52px rgba(0, 0, 0, 0.16);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.onboarding-name__entry:focus-within {
  border-color: rgba(231, 211, 184, 0.3);
  background-color: rgba(3, 6, 11, 0.36);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.09),
    inset 0 -1px rgba(0, 0, 0, 0.18),
    0 0 0 3px rgba(220, 180, 126, 0.035),
    0 20px 56px rgba(0, 0, 0, 0.19);
}

.onboarding-name__entry--ready {
  border-color: rgba(231, 205, 171, 0.24);
}

.onboarding-name__input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(248, 245, 240, 0.94);
  font: 400 22px var(--font-display);
  letter-spacing: -0.012em;
  user-select: text;
  -webkit-user-select: text;
}

.onboarding-name__input::placeholder {
  color: rgba(230, 236, 244, 0.27);
  font: 400 14px var(--font-ui);
  letter-spacing: 0;
}

.onboarding-name__continue {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: rgba(240, 220, 194, 0.12);
  font: 400 18px var(--font-ui);
  cursor: pointer;
  opacity: 0.35;
  transform: scale(0.94);
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.onboarding-name__entry--ready .onboarding-name__continue {
  color: var(--action-ink);
  border-color: var(--action-border);
  background: var(--action-fill);
  opacity: 1;
  transform: scale(1);
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
}

.onboarding-name__entry--ready .onboarding-name__continue:hover {
  color: var(--action-ink);
  background: var(--action-fill-hover);
  transform: translateX(1px);
}

.onboarding-name__continue:focus-visible {
  outline: 1px solid var(--action-focus);
  outline-offset: 2px;
}

.onboarding-name__continue:disabled {
  pointer-events: none;
}

.onboarding-name__error {
  margin-top: 11px;
  font-size: 11px;
  color: rgba(246, 171, 154, 0.74);
}

.onboarding-name__error:empty {
  display: none;
}

.onboarding--photo .onboarding__body {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-35px);
}

.onboarding--photo .onboarding__title {
  max-width: none;
  margin-top: 25px;
  font-size: clamp(38px, 3.4vw, 46px);
  text-align: center;
  white-space: nowrap;
}

.onboarding-step__back {
  position: absolute;
  top: 30px;
  left: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(230, 236, 243, 0.34);
  font: 400 18px var(--font-ui);
  transition: color 180ms ease, background-color 180ms ease;
}

.onboarding-step__back:hover {
  color: rgba(248, 244, 238, 0.85);
  background: rgba(255, 255, 255, 0.05);
}

.onboarding--photo .onboarding__avatar {
  width: 96px;
  height: 96px;
  border-color: rgba(229, 214, 194, 0.26);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 0 0 5px rgba(195, 214, 236, 0.025),
    inset 0 1px rgba(255, 255, 255, 0.2);
}

.onboarding-photo__avatar-pick {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 180ms ease;
}

.onboarding-photo__avatar-pick .onboarding__avatar {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.onboarding-photo__avatar-pick:hover {
  transform: translateY(-1px);
}

.onboarding-photo__avatar-pick:hover .onboarding__avatar {
  border-color: rgba(239, 218, 191, 0.48);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.4),
    0 0 0 5px rgba(214, 225, 239, 0.045),
    inset 0 1px rgba(255, 255, 255, 0.24);
}

.onboarding-photo__avatar-pick:disabled {
  cursor: wait;
  opacity: 0.58;
}

.onboarding-photo__choices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 38px;
}

.onboarding-photo__choose,
.onboarding-photo__continue {
  min-height: 48px;
  border-radius: 999px;
  font: 500 12.5px var(--font-ui);
}

.onboarding-photo__choose {
  padding: 0 20px;
  border-color: rgba(226, 233, 242, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 242, 236, 0.78);
}

.onboarding-photo__continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--action-border);
  padding: 0 17px;
  background: var(--action-fill);
  color: var(--action-ink);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.onboarding-photo__continue:hover {
  color: var(--action-ink);
  background: var(--action-fill-hover);
}

.onboarding-photo__continue--ready {
  border-color: var(--action-border);
  color: var(--action-ink);
  background: var(--action-fill);
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
}

.onboarding-photo__continue--ready:hover {
  transform: translateY(-1px);
  background: var(--action-fill-hover);
}

.onboarding-photo__arrow {
  font-size: 16px;
  font-weight: 400;
}

.onboarding-photo__initials {
  margin-top: 13px;
  border: 0;
  padding: 3px 2px;
  background: transparent;
  color: rgba(229, 235, 242, 0.3);
  font: 400 10.5px var(--font-ui);
}

.onboarding-photo__initials:hover {
  color: rgba(244, 240, 235, 0.68);
}

.onboarding-step__back:focus-visible,
.onboarding-photo__avatar-pick:focus-visible,
.onboarding-photo__continue:focus-visible,
.onboarding-photo__initials:focus-visible,
.onboarding-place__enter:focus-visible,
.onboarding-place__community:focus-visible {
  outline: 1px solid var(--action-focus);
  outline-offset: 3px;
}

.onboarding--place .onboarding__body {
  position: relative;
  width: 100%;
  height: 146px;
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding--place .onboarding__title {
  max-width: none;
  font-size: clamp(36px, 3.2vw, 44px);
  text-align: center;
  white-space: nowrap;
  transform: translateY(6px);
}

.onboarding-place__optional {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(228, 235, 243, 0.3);
  font: 600 9.5px var(--font-ui);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.onboarding-place__back {
  top: -34px;
}

.onboarding-place__fields {
  position: absolute;
  top: 86px;
  left: 50%;
  width: min(100%, 540px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  transform: translateX(-50%);
}

.onboarding--place .onboarding-place__input {
  height: 52px;
  border-radius: 999px;
  padding-inline: 19px;
  background-color: rgba(3, 6, 11, 0.25);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.onboarding--place .onboarding-place__input::placeholder {
  color: rgba(230, 236, 244, 0.3);
}

.onboarding--place .onboarding-place__input--empty {
  color: rgba(230, 236, 244, 0.3);
}

.onboarding-place__enter {
  position: absolute;
  top: 158px;
  left: 50%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--action-border);
  border-radius: 999px;
  padding: 0 20px;
  color: var(--action-ink);
  background: var(--action-fill);
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
  font: 500 12.5px var(--font-ui);
  transform: translateX(-50%);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.onboarding-place__enter:hover {
  background: var(--action-fill-hover);
  box-shadow: inset 0 1px rgb(255 255 255 / .14);
  transform: translateX(-50%) translateY(-1px);
}

.onboarding-place__arrow {
  font-size: 16px;
}

.onboarding-place__community {
  position: absolute;
  top: 218px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 5px 7px;
  color: rgba(230, 236, 244, 0.42);
  background: transparent;
  font: 450 11px var(--font-ui);
  transform: translateX(-50%);
  transition: color 180ms ease, transform 180ms ease;
}

.onboarding-place__community:hover {
  color: rgba(248, 244, 238, 0.8);
  transform: translateX(-50%) translateY(-1px);
}

.onboarding-place__community-icon {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.86;
}

.onboarding-place__external {
  margin-left: -2px;
  font-size: 10px;
  opacity: 0.58;
}

.onboarding__progress {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 18px;
  margin-bottom: 30px;
}

.onboarding__progress-label {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 233, 242, 0.32);
}

.onboarding__progress-mark {
  width: 18px;
  height: 1px;
  border-radius: 2px;
  background: rgba(226, 233, 242, 0.15);
  transition: width 280ms ease, background-color 280ms ease;
}

.onboarding__progress-mark--current {
  width: 34px;
  background: rgba(237, 215, 184, 0.7);
}

.onboarding__progress-mark--past {
  background: rgba(237, 215, 184, 0.34);
}

.onboarding__body {
  min-height: 390px;
}

.onboarding__body--arriving {
  animation: onboarding-step 360ms cubic-bezier(0.16, 0.72, 0.25, 1) backwards;
}

.onboarding__eyebrow {
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(227, 201, 166, 0.62);
}

.onboarding__title {
  max-width: 440px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 46;
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.035em;
  color: rgba(248, 245, 240, 0.96);
}

.onboarding__copy {
  max-width: 450px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(226, 233, 242, 0.49);
}

.onboarding__field,
.profile-panel__field {
  display: grid;
  gap: 8px;
}

.onboarding__field {
  margin-top: 28px;
}

.onboarding__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 27px;
}

.onboarding__field-row .onboarding__field {
  margin-top: 0;
}

.onboarding__label,
.profile-panel__field > span {
  font-size: 11.5px;
  color: rgba(232, 237, 244, 0.54);
}

.onboarding__input,
.profile-panel__input {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(222, 232, 244, 0.13);
  border-radius: 13px;
  padding: 0 15px;
  outline: 0;
  background: rgba(3, 6, 11, 0.32);
  color: rgba(248, 245, 240, 0.92);
  font: 400 14px var(--font-ui);
  user-select: text;
  -webkit-user-select: text;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.onboarding__input::placeholder,
.profile-panel__input::placeholder {
  color: rgba(230, 236, 244, 0.22);
}

.onboarding__input:focus,
.profile-panel__input:focus {
  border-color: rgba(237, 211, 175, 0.5);
  background: rgba(3, 6, 11, 0.47);
  box-shadow: 0 0 0 3px rgba(220, 180, 126, 0.07);
}

.onboarding__select,
.profile-panel__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(235, 239, 244, 0.42) 50%),
    linear-gradient(135deg, rgba(235, 239, 244, 0.42) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.onboarding__error,
.profile-panel__error {
  min-height: 19px;
  margin-top: 7px;
  font-size: 11.5px;
  color: rgba(246, 171, 154, 0.8);
}

.onboarding__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.onboarding__actions--end {
  justify-content: flex-end;
}

.onboarding__button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  font: 500 13px var(--font-ui);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.onboarding__button--primary {
  color: #171310;
  background: linear-gradient(135deg, #f2e8da, #dbc19e);
  box-shadow: 0 8px 25px rgba(186, 132, 75, 0.15), inset 0 1px rgba(255, 255, 255, 0.7);
}

.onboarding__button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 30px rgba(186, 132, 75, 0.22), inset 0 1px rgba(255, 255, 255, 0.7);
}

.onboarding__button--quiet {
  color: rgba(235, 239, 244, 0.5);
  background: transparent;
}

.onboarding__button--quiet:hover {
  color: rgba(248, 245, 240, 0.9);
  background: rgba(255, 255, 255, 0.055);
}

.onboarding__button:focus-visible,
.onboarding__photo-button:focus-within,
.profile-chip:focus-visible,
.profile-panel button:focus-visible {
  outline: 1px solid rgba(243, 215, 178, 0.82);
  outline-offset: 3px;
}

.onboarding__aside {
  margin-top: 17px;
  text-align: right;
  font-size: 10.5px;
  color: rgba(230, 235, 242, 0.26);
}

.onboarding__photo {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}

.onboarding__avatar,
.profile-panel__avatar,
.profile-chip__avatar-inner {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: rgba(249, 243, 235, 0.92);
  background:
    radial-gradient(circle at 32% 24%, rgba(132, 160, 193, 0.42), transparent 55%),
    linear-gradient(145deg, #4a5267, #282b38);
}

.onboarding__avatar img,
.profile-panel__avatar img,
.profile-chip__avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboarding__avatar {
  width: 108px;
  height: 108px;
  flex: none;
  border: 2px solid rgba(239, 218, 191, 0.34);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
  font-size: 34px;
}

.onboarding__photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.onboarding__photo-button,
.profile-panel__photo-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(226, 233, 242, 0.14);
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 12px;
  color: rgba(242, 240, 235, 0.72);
}

.onboarding__photo-button:hover,
.profile-panel__photo-pick:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
}

.onboarding__photo-button--busy,
.profile-panel__photo-pick--busy {
  opacity: 0.48;
  pointer-events: none;
}

.onboarding__privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(226, 233, 242, 0.31);
}

.onboarding__privacy-mark {
  color: rgba(224, 190, 145, 0.52);
}

@keyframes onboarding-breathe {
  to { transform: translate3d(2%, -1%, 0) scale(1.04); }
}

@keyframes onboarding-welcome {
  0% { opacity: 0; transform: translateY(5px); letter-spacing: -0.055em; }
  12%, 78% { opacity: 1; transform: translateY(0); letter-spacing: -0.035em; }
  100% { opacity: 0; transform: translateY(-3px); letter-spacing: -0.025em; }
}

@keyframes onboarding-world-arrive {
  from { opacity: 0; }
}

@keyframes onboarding-panel-arrive {
  from { opacity: 0; }
}

@keyframes onboarding-world-drift {
  to { transform: scale(1.065) translate3d(-0.6%, -0.4%, 0); }
}

@keyframes onboarding-step {
  from { opacity: 0; }
}

/* --- lobby controls ------------------------------------------------------ */

/* The profile is the more personal of the two controls, so it carries the
   stronger glass and the user's face while Community stays one step quieter. */

.profile-chip {
  position: absolute;
  z-index: 40;
  top: 22px;
  right: 24px;
  height: 44px;
  max-width: 184px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 13px 4px 4px;
  /* The same glass as #top-bar, deliberately: two pieces of chrome in opposite
     corners have to read as one substance or the corners fight. This carried
     a 69%-opaque blue-grey fill with no brightness for a long time, which is
     the grey-plastic failure described above — it made the one piece of the
     interface that is *you* the dullest thing on screen. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)) padding-box,
    linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.58),
        rgba(255, 255, 255, 0.1) 42%,
        rgba(255, 255, 255, 0.3)
      )
      border-box;
  backdrop-filter: blur(22px) saturate(150%) brightness(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 12px 34px rgba(0, 0, 0, 0.26);
  color: rgba(244, 241, 236, 0.86);
  transition: filter 180ms ease, transform 180ms ease, opacity 300ms ease;
}

.profile-chip:hover,
.profile-chip[aria-expanded='true'] {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.profile-chip__avatar {
  width: 34px;
  height: 34px;
  flex: none;
}

.profile-chip__avatar-inner {
  width: 100%;
  height: 100%;
  /* --lamp is reserved for the current user, and this is the current user —
     the one place in the app where spending it is exactly on the rule. It is
     also what makes a 34px face in a corner findable at a glance. */
  border: 1px solid rgba(242, 180, 92, 0.46);
  box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
  font-size: 14px;
  transition: border-color 200ms ease, box-shadow 220ms ease;
}

.profile-chip:hover .profile-chip__avatar-inner,
.profile-chip[aria-expanded='true'] .profile-chip__avatar-inner {
  border-color: rgba(242, 180, 92, 0.72);
  box-shadow: 0 0 0 3px rgba(242, 180, 92, 0.16), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.profile-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
}

.profile-panel {
  position: absolute;
  z-index: 45;
  top: 76px;
  right: 24px;
  width: min(354px, calc(100vw - 40px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 239, 245, 0.16) transparent;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(24, 29, 37, 0.965), rgba(12, 15, 21, 0.97)) padding-box,
    linear-gradient(145deg, rgba(230, 237, 246, 0.24), rgba(205, 218, 232, 0.07) 64%) border-box;
  backdrop-filter: blur(38px) saturate(128%);
  -webkit-backdrop-filter: blur(38px) saturate(128%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 32px 100px rgba(0, 0, 0, 0.62),
    0 4px 18px rgba(0, 0, 0, 0.28);
  animation: profile-panel-in 220ms cubic-bezier(0.16, 0.72, 0.25, 1) both;
}

.profile-panel::-webkit-scrollbar {
  width: 5px;
}

.profile-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(235, 239, 245, 0.14);
}

.profile-panel[hidden] {
  display: none;
}

.profile-panel__content {
  padding: 24px;
}

.profile-panel[data-view='editor'] .profile-panel__content {
  padding-bottom: 20px;
}

.profile-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.profile-panel__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 32;
  font-size: 24px;
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.026em;
  color: rgba(249, 246, 241, 0.94);
}

.profile-panel__close {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(231, 237, 244, 0.4);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.profile-panel__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 245, 240, 0.82);
  transform: rotate(2deg);
}

.profile-panel__close-glyph {
  width: 15px;
  height: 15px;
}

.profile-panel__identity {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 7px 2px 26px;
}

.profile-panel__avatar {
  width: 68px;
  height: 68px;
  flex: none;
  border: 1px solid rgba(240, 222, 199, 0.38);
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  font-family: var(--font-display);
  font-size: 23px;
}

.profile-panel__identity-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-panel__identity-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-panel__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 30;
  font-size: 23px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(248, 245, 240, 0.92);
}

.profile-panel__origin {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 1;
}

.profile-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(226, 233, 242, 0.43);
}

.profile-panel__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.profile-panel__flag {
  width: 14px;
  height: 10px;
  flex: none;
  object-fit: cover;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.profile-panel__meta-pin {
  width: 12px;
  height: 12px;
  flex: none;
  color: rgba(224, 194, 154, 0.58);
}

.profile-panel__edit {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  border: 1px solid rgba(220, 231, 244, 0.09);
  border-radius: 15px;
  padding: 9px 12px 9px 10px;
  background: rgba(255, 255, 255, 0.028);
  text-align: left;
  color: rgba(245, 242, 237, 0.78);
  transition: border-color 170ms ease, background-color 170ms ease, transform 170ms ease;
}

.profile-panel__edit:hover {
  border-color: rgba(225, 234, 244, 0.17);
  background: rgba(255, 255, 255, 0.052);
  transform: translateY(-1px);
}

.profile-panel__edit-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 201, 168, 0.12);
  border-radius: 50%;
  background: rgba(221, 191, 151, 0.055);
}

.profile-panel__edit-glyph {
  width: 15px;
  height: 15px;
  color: rgba(224, 195, 156, 0.7);
}

.profile-panel__edit-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-panel__edit-copy strong {
  font-size: 12px;
  font-weight: 500;
  color: rgba(246, 243, 238, 0.82);
}

.profile-panel__edit-chevron {
  width: 13px;
  height: 13px;
  color: rgba(226, 233, 242, 0.28);
  transition: color 170ms ease, transform 170ms ease;
}

.profile-panel__edit:hover .profile-panel__edit-chevron {
  color: rgba(239, 229, 214, 0.58);
  transform: translateX(1px);
}

.profile-panel__local {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  padding-left: 2px;
  font-size: 10px;
  color: rgba(226, 233, 242, 0.35);
}

.profile-panel__local-mark {
  width: 11px;
  height: 11px;
  flex: none;
  color: rgba(224, 190, 145, 0.48);
}

.profile-panel__photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2px 0 22px;
}

.profile-panel__avatar--edit {
  width: 66px;
  height: 66px;
}

.profile-panel__photo-actions {
  display: grid;
  justify-items: start;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 3px 7px;
}

.profile-panel__photo-pick {
  min-height: 35px;
  gap: 7px;
  padding: 0 13px;
  border-color: rgba(226, 233, 242, 0.13);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10.5px;
  color: rgba(244, 241, 236, 0.72);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.profile-panel__photo-pick-glyph {
  width: 13px;
  height: 13px;
  color: rgba(225, 199, 165, 0.67);
}

.profile-panel__photo-remove {
  border: 0;
  padding: 5px 4px;
  background: transparent;
  color: rgba(226, 233, 242, 0.38);
  font: 400 9.5px var(--font-ui);
}

.profile-panel__photo-remove:hover {
  color: rgba(246, 242, 236, 0.72);
}

.profile-panel__photo-hint {
  grid-column: 1 / -1;
  padding-left: 3px;
  font-size: 8.5px;
  color: rgba(226, 233, 242, 0.3);
}

.profile-panel__field {
  gap: 7px;
  margin-top: 14px;
}

.profile-panel__field > span {
  display: flex;
  justify-content: space-between;
}

.profile-panel__field small {
  font: inherit;
  color: rgba(226, 233, 242, 0.24);
}

.profile-panel__input {
  height: 44px;
  border-color: rgba(222, 232, 244, 0.11);
  border-radius: 12px;
  background-color: rgba(3, 6, 11, 0.4);
  font-size: 12.5px;
}

.profile-panel__input:hover:not(:focus) {
  border-color: rgba(222, 232, 244, 0.17);
}

.profile-panel__delete-field {
  margin-top: 2px;
}

.profile-panel__delete-confirmation {
  letter-spacing: 0.12em;
}

.profile-panel__select {
  background-position:
    calc(100% - 19px) 19px,
    calc(100% - 14px) 19px;
}

.profile-panel__country-control {
  position: relative;
}

.profile-panel__country-flag {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 15px;
  height: 11px;
  object-fit: cover;
  border-radius: 1.5px;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.profile-panel__country-control--flag .profile-panel__select {
  padding-left: 40px;
}

.profile-panel__error {
  min-height: 16px;
  margin-top: 5px;
}

.profile-panel[data-view='delete'] .profile-panel__error:empty {
  display: none;
}

.profile-panel__visibility {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: -2px;
  font-size: 9px;
  line-height: 1.5;
  color: rgba(226, 233, 242, 0.36);
}

.profile-panel__visibility-glyph {
  width: 12px;
  height: 12px;
  margin-top: 1px;
  flex: none;
  color: rgba(224, 190, 145, 0.5);
}

.profile-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid rgba(222, 232, 244, 0.07);
}

.profile-panel[data-view='editor'] .profile-panel__actions {
  position: sticky;
  z-index: 2;
  bottom: -20px;
  margin-right: -24px;
  margin-left: -24px;
  padding: 14px 24px 20px;
  background: linear-gradient(180deg, rgba(14, 17, 23, 0.62), rgba(14, 17, 23, 0.99) 34%);
}

.profile-panel__cancel,
.profile-panel__save {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 11.5px;
}

.profile-panel__cancel {
  background: transparent;
  color: rgba(230, 236, 243, 0.4);
}

.profile-panel__save {
  background: linear-gradient(135deg, #eee4d6, #d4b993);
  color: #18130f;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 7px 18px rgba(169, 116, 62, 0.1);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.profile-panel__cancel {
  transition: background-color 160ms ease, color 160ms ease;
}

.profile-panel__cancel:hover {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 241, 236, 0.7);
}

.profile-panel__save:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 10px 22px rgba(169, 116, 62, 0.16);
}

@keyframes profile-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
}

@media (max-width: 1050px) {
  .onboarding__scene {
    grid-template-columns: minmax(280px, 0.7fr) minmax(480px, 1fr);
    gap: 38px;
    padding-inline: 60px;
  }

  .onboarding__world {
    width: min(35vw, 390px);
  }

  .onboarding__world-caption {
    display: none;
  }

}

@media (max-width: 560px) {
  /* Preserve the centred place name: at phone-width the profile becomes its
     avatar alone, with the same accessible name and the full panel behind it. */
  .profile-chip {
    right: 12px;
    width: 44px;
    padding: 4px;
    gap: 0;
  }

  .profile-chip__name {
    display: none;
  }

}

@media (max-height: 680px) {
  .onboarding__scene {
    padding-top: 62px;
    padding-bottom: 24px;
  }

  .onboarding__panel {
    padding: 26px 34px;
  }

  .onboarding__progress {
    margin-bottom: 19px;
  }

  .onboarding__body {
    min-height: 365px;
  }

  .onboarding__title {
    font-size: 35px;
  }

  .onboarding__copy {
    margin-top: 11px;
    line-height: 1.48;
  }

  .onboarding__field,
  .onboarding__field-row,
  .onboarding__photo {
    margin-top: 18px;
  }

  .onboarding__actions {
    margin-top: 16px;
  }

}

/* Standard-density displays have no spare sampling resolution for a slowly
   transformed background texture. Keep the authored scene static and let
   WebKit choose its native text antialiasing there; Retina retains the drift. */
@media (max-resolution: 1.25dppx) {
  .onboarding {
    -webkit-font-smoothing: auto;
  }

  .onboarding__world-image {
    animation: none;
    transform: none;
  }

  /* WebKit chooses its native text antialiasing at standard density. The
     shared panel tier owns the denser 1× material and shorter filter. */
  .card {
    -webkit-font-smoothing: auto;
  }

  .card__action,
  .card__meta,
  .card__where {
    font-size: 13px;
  }

  .card__meta,
  .card__where {
    color: rgba(244, 239, 231, 0.48);
  }

  /* Perspective remains in portrait diameter, while interface strokes land on
     whole physical pixels. A single solid seat ring avoids WebKit repainting a
     fractional dashed border as solid during hover. */
  .slot::after {
    border-width: var(--room-crisp-ring, 2px);
    border-style: solid;
    border-color: rgba(255, 238, 212, 0.42);
  }

  .slot:hover::after,
  .slot:focus-visible::after,
  .slot--pending::after {
    border-style: solid;
    border-color: var(--lamp);
  }

  .slot[aria-disabled='true']:not(.slot--pending):hover::after,
  .slot[aria-disabled='true']:not(.slot--pending):focus-visible::after {
    border-style: solid;
    border-color: rgba(255, 238, 212, 0.42);
  }

  /* The portrait may remain filtered, but its UI ring must not be rasterised in
     the same offscreen texture. This fixed-width layer stays crisp at every
     authored depth while the photograph itself still becomes smaller. */
  .seat::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: calc(-1 * var(--room-crisp-ring, 2px));
    border: var(--room-crisp-ring, 2px) solid rgba(255, 238, 212, 0.82);
    border-radius: 50%;
    pointer-events: none;
    transition:
      border-color 200ms ease,
      box-shadow 200ms ease;
  }

  .seat__disc {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }

  .seat--you::before {
    border-color: var(--lamp);
  }

  .seat--actionable:hover::before,
  .seat--actionable:focus-visible::before {
    border-color: #ffd291;
    box-shadow: 0 0 18px rgba(242, 180, 92, 0.45);
  }

  .seat--actionable:hover .seat__disc,
  .seat--actionable:focus-visible .seat__disc,
  .seat--you .seat__disc {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }

  .seat__glyph {
    z-index: 2;
    bottom: -8%;
  }

  .seat--right .seat__glyph {
    right: -10%;
  }

  .seat--left .seat__glyph {
    left: -10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-welcome,
  .onboarding__aurora,
  .onboarding__world-wrap,
  .onboarding__world-image,
  .onboarding__panel,
  .onboarding__body--arriving,
  .profile-panel {
    animation: none;
  }

  .onboarding-person,
  .onboarding-person__avatar-scale {
    transition: none;
  }

}

/* --- the pill ------------------------------------------------------------ */

.pill-body {
  background: transparent;
}

.pill {
  position: fixed;
  inset: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
}

.pill__glyph {
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  flex: none;
}

.pill__here {
  color: var(--ink);
  font-weight: 500;
}

.pill__dot {
  color: var(--ink-faint);
}

.pill__mine {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- arriving ------------------------------------------------------------ */

/* Straight after a crossing the room's own chrome is held back briefly. The
   move should be the only thing on screen while it is still moving; a bar
   sliding in over it is a second thing to look at during the one moment that
   earns undivided attention. */
.room--arriving #top-bar {
  opacity: 0;
  transform: translateY(-8px);
}

/* --- launch safety and settings ---------------------------------------- */

.safety-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 7, 0.64);
  animation: safety-backdrop-in 160ms ease-out both;
}

.safety-dialog {
  width: min(476px, calc(100vw - 36px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 29px 30px 24px;
  border-radius: 24px;
  color: rgba(247, 241, 233, 0.9);
}

.safety-dialog--compact {
  width: min(396px, calc(100vw - 36px));
}

.safety-dialog--owner {
  width: min(510px, calc(100vw - 36px));
  max-height: min(88dvh, 760px);
  overflow-y: auto;
}

.safety-dialog__title {
  margin: 0;
  font: 500 18px/1.3 var(--font-ui);
  letter-spacing: -0.015em;
  color: rgba(251, 246, 239, 0.96);
}

.safety-dialog__copy {
  margin: 13px 0 0;
  color: rgba(235, 226, 216, 0.6);
  font-size: 13.5px;
  line-height: 1.52;
}

.safety-dialog__copy--prompt {
  margin-top: 17px;
}

.safety-dialog__context {
  width: max-content;
  margin: 9px 0 0;
  color: rgba(224, 194, 154, 0.62);
  font-size: 11px;
  letter-spacing: 0.035em;
}

.safety-dialog__message {
  max-height: 86px;
  margin: 16px 0 0;
  padding: 11px 13px 12px;
  overflow-y: auto;
  border-left: 2px solid rgba(226, 182, 124, 0.58);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 248, 238, 0.045);
  color: rgba(246, 238, 228, 0.78);
  font: 400 13px/1.46 var(--font-ui);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.safety-dialog__categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0 17px;
  padding: 0;
  border: 0;
}

.safety-dialog__categories legend {
  margin-bottom: 9px;
  color: rgba(235, 226, 216, 0.47);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.safety-dialog__choices,
.safety-dialog__reset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 18px 0 2px;
  padding: 0;
  border: 0;
}

.safety-dialog__reset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.safety-dialog__choices legend,
.safety-dialog__reset legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: rgba(235, 226, 216, 0.47);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.safety-dialog__choice,
.safety-dialog__reset-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(244, 231, 214, 0.1);
  border-radius: 13px;
  background: rgba(255, 249, 240, 0.025);
  color: rgba(245, 237, 228, 0.68);
  font: 400 12px/1.2 var(--font-ui);
  cursor: pointer;
}

.safety-dialog__reset-item {
  justify-content: flex-start;
}

.safety-dialog__choice:has(input:checked),
.safety-dialog__reset-item:has(input:checked) {
  border-color: rgba(226, 194, 151, 0.36);
  background: rgba(226, 194, 151, 0.085);
  color: rgba(251, 244, 235, 0.92);
}

.safety-dialog__choice input,
.safety-dialog__reset-item input {
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  border: 1px solid rgba(244, 231, 214, 0.36);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.safety-dialog__choice input { border-radius: 50%; }
.safety-dialog__reset-item input { border-radius: 4px; }
.safety-dialog__choice input:checked {
  border-color: rgba(238, 198, 143, 0.8);
  background: radial-gradient(circle, rgba(238, 198, 143, 0.96) 0 3px, transparent 3.5px);
}
.safety-dialog__reset-item input:checked {
  border-color: rgba(238, 198, 143, 0.8);
  background: rgba(238, 198, 143, 0.88);
  box-shadow: inset 0 0 0 3px rgba(35, 27, 22, 0.88);
}
.safety-dialog__choice input:focus-visible,
.safety-dialog__reset-item input:focus-visible {
  outline: 2px solid rgba(238, 198, 143, 0.5);
  outline-offset: 3px;
}

.safety-dialog__categories--owner {
  margin-top: 18px;
}

.safety-dialog__category {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 45px;
  padding: 0 12px;
  border: 1px solid rgba(244, 231, 214, 0.1);
  border-radius: 13px;
  background: rgba(255, 249, 240, 0.025);
  color: rgba(245, 237, 228, 0.69);
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.safety-dialog__category:hover {
  border-color: rgba(226, 194, 151, 0.22);
  background: rgba(226, 194, 151, 0.045);
  color: rgba(249, 242, 233, 0.84);
}

.safety-dialog__category input {
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  border: 1px solid rgba(244, 231, 214, 0.36);
  border-radius: 50%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.safety-dialog__category input:checked {
  border-color: rgba(238, 198, 143, 0.8);
  background: radial-gradient(circle, rgba(238, 198, 143, 0.96) 0 3px, transparent 3.5px);
}

.safety-dialog__category input:focus-visible {
  outline: 2px solid rgba(238, 198, 143, 0.5);
  outline-offset: 3px;
}

.safety-dialog__category:has(input:checked) {
  border-color: rgba(226, 194, 151, 0.36);
  background: rgba(226, 194, 151, 0.085);
  color: rgba(251, 244, 235, 0.92);
}

.safety-dialog__note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
}

.safety-dialog__note-label {
  color: rgba(241, 233, 224, 0.7);
  font-size: 12px;
}

.safety-dialog__note-count {
  color: rgba(235, 226, 216, 0.35);
  font-size: 10.5px;
}

.safety-dialog__note {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid rgba(244, 231, 214, 0.12);
  border-radius: 13px;
  padding: 11px 12px;
  background: rgba(3, 3, 4, 0.28);
  color: rgba(249, 243, 235, 0.9);
  font: 400 13px/1.48 var(--font-ui);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.safety-dialog__note::placeholder {
  color: rgba(235, 226, 216, 0.32);
}

.safety-dialog__note:focus {
  outline: none;
  border-color: rgba(226, 194, 151, 0.38);
  box-shadow: 0 0 0 3px rgba(226, 194, 151, 0.055);
}

.safety-dialog__status {
  margin: 11px 1px 0;
  color: rgba(232, 183, 144, 0.86);
  font-size: 11.5px;
  line-height: 1.4;
}

.safety-dialog__status:empty {
  display: none;
}

.safety-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 231, 214, 0.08);
}

.safety-dialog__actions button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 14px;
  font: 500 12px var(--font-ui);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.safety-dialog__actions button:hover:not(:disabled) { transform: translateY(-1px); }
.safety-dialog__actions button:focus-visible { outline: 2px solid rgba(238, 198, 143, 0.4); outline-offset: 2px; }
.safety-dialog__quiet { margin-right: auto; background: transparent; color: rgba(239, 232, 223, 0.48); }
.safety-dialog__quiet:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); color: rgba(246, 239, 231, 0.72); }
.safety-dialog__secondary { border-color: rgba(244, 231, 214, 0.11) !important; background: rgba(255, 250, 243, 0.035); color: rgba(245, 237, 228, 0.66); }
.safety-dialog__secondary:hover:not(:disabled) { border-color: rgba(244, 231, 214, 0.2) !important; background: rgba(255, 250, 243, 0.065); color: rgba(250, 243, 235, 0.86); }
.safety-dialog__danger { border-color: rgba(207, 139, 115, 0.21) !important; background: rgba(157, 78, 61, 0.3); color: rgba(255, 229, 220, 0.91); }
.safety-dialog__danger:hover:not(:disabled) { border-color: rgba(221, 151, 125, 0.34) !important; background: rgba(170, 85, 66, 0.4); color: rgba(255, 237, 231, 0.98); }
.safety-dialog__actions button:disabled { opacity: 0.45; }

@keyframes safety-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes safety-dialog-in {
  from { opacity: 0; transform: translateY(5px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .safety-dialog__backdrop,
  .safety-dialog {
    animation: none;
  }
}

.profile-chip,
.profile-panel { position: fixed; }

.profile-chip { z-index: 90; }
.profile-panel { z-index: 95; }

.profile-chip--room {
  width: 42px;
  max-width: 42px;
  height: 42px;
  padding: 3px;
}

.profile-chip--room .profile-chip__avatar { width: 34px; height: 34px; }
.profile-chip--room .profile-chip__name { display: none; }

.profile-panel__edit {
  grid-template-columns: 1fr 16px;
  min-height: 48px;
  padding: 8px 12px;
  margin-top: 7px;
}

.profile-panel__edit-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-panel__edit--danger { margin-top: 12px; }
.profile-panel__edit--danger strong { color: rgba(244, 184, 169, 0.76); }

/* A section heading inside a settings view — quieter than the view's own
   title, because it names a group rather than the place you are in. */
.profile-panel__section {
  margin: 4px 2px 8px;
  color: rgba(238, 237, 235, 0.5);
  font: 500 11px/1.3 var(--font-ui);
  letter-spacing: 0.02em;
}

.profile-panel__toggles {
  display: grid;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(220, 231, 244, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.022);
}

.profile-panel__toggle {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 10px 9px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  cursor: default;
  text-align: left;
  transition: background-color 150ms ease;
}

.profile-panel__toggle:hover,
.profile-panel__toggle:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.055);
}

.profile-panel__toggle-label {
  color: rgba(249, 248, 246, 0.86);
  font: 450 12.5px/1.3 var(--font-ui);
}

.profile-panel__switch {
  position: relative;
  width: 34px;
  height: 19px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: background-color 180ms ease;
}

.profile-panel__toggle[aria-checked='true'] .profile-panel__switch {
  background: var(--action-fill);
}

.profile-panel__switch-knob {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(253, 251, 247, 0.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-panel__toggle[aria-checked='true'] .profile-panel__switch-knob {
  background: var(--action-ink);
  transform: translateX(15px);
}

.profile-panel__preference-note {
  margin: 10px 3px 0;
  color: rgba(226, 233, 242, 0.52);
  font: 400 11px/1.45 var(--font-ui);
}

@media (prefers-reduced-motion: reduce) {
  .profile-panel__switch-knob { transition-duration: 1ms; }
}

.profile-panel__choices {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.profile-panel__choice {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: default;
  text-align: left;
  transition: background-color 150ms ease;
}

.profile-panel__choice:hover,
.profile-panel__choice:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.06);
}

.profile-panel__choice-mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  transition: border-color 160ms ease, box-shadow 180ms ease;
}

.profile-panel__choice[aria-checked='true'] .profile-panel__choice-mark {
  /* --lamp is for the current user, and a preference about who may reach you
     is as much about you as anything in here. */
  border-color: rgba(242, 180, 92, 0.85);
  box-shadow: inset 0 0 0 3.5px rgba(242, 180, 92, 0.85);
}

.profile-panel__choice-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-panel__choice-copy strong {
  color: rgba(249, 248, 246, 0.88);
  font: 450 12.5px/1.35 var(--font-ui);
}

.profile-panel__choice-copy span {
  color: rgba(238, 237, 235, 0.46);
  font: 400 11px/1.35 var(--font-ui);
}

.profile-panel__blocked-list { display: grid; gap: 7px; margin-bottom: 18px; }
.profile-panel__blocked-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 7px 8px 7px 12px;
  border: 1px solid rgba(235, 240, 247, 0.08);
  border-radius: 12px;
  color: rgba(245, 242, 237, 0.76);
  font-size: 13px;
}

/* --- signed updates ----------------------------------------------------- */

/*
   An update is a threshold, not a notification. It sits at the bottom of the
   room like a small glass card left on a table: warm-edged, restrained, and
   silent until there is something the user can do.
*/
.update-card {
  position: fixed;
  z-index: 108;
  left: 50%;
  bottom: 24px;
  width: min(386px, calc(100vw - 32px));
  padding: 20px 20px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(31, 29, 27, 0.7), rgba(9, 10, 12, 0.76));
  backdrop-filter: blur(26px) saturate(175%) contrast(106%);
  -webkit-backdrop-filter: blur(26px) saturate(175%) contrast(106%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px rgba(0, 0, 0, 0.38),
    0 24px 74px rgba(0, 0, 0, 0.46);
  color: var(--ink);
  animation: update-card-in 180ms ease-out both;
  translate: -50% 0;
}

.update-card[hidden] { display: none; }

.update-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(85% 58% at 12% -5%, rgba(255, 255, 255, 0.17), transparent 62%),
    radial-gradient(72% 68% at 105% 118%, rgba(242, 180, 92, 0.095), transparent 65%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.035), transparent 38% 68%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.update-card::after {
  content: '';
  position: absolute;
  inset: auto 22px -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 180, 92, 0.52), transparent);
  pointer-events: none;
}

.update-card > * {
  position: relative;
  z-index: 1;
}

.update-card__heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.update-card__heading-copy { min-width: 0; }

.update-card__mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.13), transparent 37%),
    radial-gradient(circle at 50% 58%, rgba(242, 180, 92, 0.11), rgba(8, 9, 11, 0.16) 68%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 4px rgba(255, 255, 255, 0.018);
}

.update-card__mark-core {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 13px rgba(242, 180, 92, 0.42);
}

.update-card__title {
  margin: 0;
  color: rgba(249, 246, 241, 0.95);
  font: 400 21px/1.12 var(--font-display);
  font-variation-settings: 'opsz' 26;
}

.update-card__copy {
  margin: 14px 0 0 49px;
  color: rgba(238, 239, 241, 0.66);
  font-size: 12.5px;
  line-height: 1.46;
}

.update-card__progress {
  position: relative;
  display: block;
  height: 2px;
  margin: 17px 2px 0 49px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.update-card__progress[hidden],
.update-card__progress-label[hidden] { display: none; }

.update-card__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(196, 141, 76, 0.72), rgba(242, 180, 92, 0.96));
  transition: width 160ms ease-out;
}

.update-card__progress--indeterminate .update-card__progress-fill {
  animation: update-progress-wander 1.15s ease-in-out infinite alternate;
}

.update-card__progress-label {
  min-height: 15px;
  margin: 7px 0 0 49px;
  color: rgba(237, 208, 170, 0.66);
  font-size: 10.5px;
  line-height: 1.4;
}

.update-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 17px;
}

.update-card__button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  font: 600 11.5px/1 var(--font-ui);
  letter-spacing: 0.005em;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.update-card__button--quiet {
  background: transparent;
  color: rgba(243, 241, 237, 0.62);
}

.update-card__button--quiet:hover {
  color: rgba(249, 246, 241, 0.8);
  background: rgba(255, 255, 255, 0.035);
}

.update-card__button--primary {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(120% 170% at 25% -70%, rgba(255, 255, 255, 0.16), transparent 52%),
    linear-gradient(145deg, rgba(229, 190, 141, 0.16), rgba(117, 90, 62, 0.12));
  color: rgba(252, 243, 230, 0.9);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.1),
    0 7px 22px rgba(0, 0, 0, 0.14);
}

.update-card__button--primary:hover {
  border-color: rgba(242, 218, 188, 0.28);
  background:
    radial-gradient(120% 170% at 25% -70%, rgba(255, 255, 255, 0.2), transparent 52%),
    linear-gradient(145deg, rgba(229, 190, 141, 0.23), rgba(117, 90, 62, 0.16));
}

.update-card__button:focus-visible {
  outline: 2px solid rgba(242, 180, 92, 0.68);
  outline-offset: 2px;
}

.update-card__button:disabled { opacity: 0.43; }

@keyframes update-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes update-progress-wander {
  from { margin-left: 0; }
  to { margin-left: 80%; }
}

@media (max-width: 520px) and (pointer: coarse) {
  .update-card {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    padding: 18px 17px 15px;
    border-radius: 22px 22px 15px 15px;
    translate: 0 0;
  }

  .update-card__heading {
    gap: 11px;
  }

  .update-card__mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .update-card__mark-core {
    inset: 12px;
  }

  .update-card__title {
    font-size: 20px;
  }

  .update-card__copy,
  .update-card__progress,
  .update-card__progress-label { margin-left: 0; }

  .update-card__copy {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.48;
  }

  .update-card__actions {
    align-items: stretch;
    margin-top: 14px;
  }

  .update-card__button {
    min-height: 44px;
    padding-inline: 15px;
  }

  .update-card__button--quiet {
    margin-right: auto;
  }
}

/* The room's portrait pan control remains available beneath a pending update.
   Landscape keeps the compact card, but touch controls never shrink below the
   same 44px target used in portrait. */
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
  body:has(.room--mobile-camera) .update-card {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 38px);
  }
}

@media (pointer: coarse) and (max-width: 1024px) {
  .update-card__button {
    min-height: 44px;
  }
}

/* Lower-density panels get less optical blur and more pigment. The glass still
   reads as glass, while glyph and text layers remain sharply rasterized. */
@media (max-resolution: 1.25dppx) {
  .update-card {
    background: linear-gradient(145deg, rgba(30, 28, 26, 0.88), rgba(9, 10, 12, 0.91));
    backdrop-filter: blur(15px) saturate(145%);
    -webkit-backdrop-filter: blur(15px) saturate(145%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .update-card,
  .update-card__progress--indeterminate .update-card__progress-fill { animation: none; }
  .update-card__progress-fill { transition: none; }
}

.profile-panel__unblock {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(239, 242, 247, 0.62);
  font-size: 11.5px;
}

.profile-panel__loading { color: rgba(229, 235, 243, 0.44); font-size: 12px; }
.profile-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 2px 0;
  padding-top: 14px;
  border-top: 1px solid rgba(235, 240, 247, 0.08);
  color: rgba(229, 235, 243, 0.27);
  font-size: 10.5px;
}

.profile-panel__discord {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 3px;
  background: transparent;
  color: rgba(229, 235, 243, 0.46);
  font-size: 10.5px;
}

.profile-panel__discord-icon { width: 13px; height: 13px; }
.profile-panel__save--danger:not(:disabled) {
  background: rgba(176, 91, 70, 0.26);
  color: rgba(255, 226, 217, 0.9);
}

.profile-panel__save--danger:disabled {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(229, 235, 243, 0.25);
  box-shadow: none;
  cursor: default;
}

.account-terminal {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: radial-gradient(circle at 50% 34%, rgba(69, 86, 110, 0.23), transparent 42%), #080b10;
  user-select: none;
  -webkit-user-select: none;
}

.account-terminal h1 { margin: 0; font: 400 34px var(--font-display); color: rgba(249, 246, 241, 0.94); }
.account-terminal p { max-width: 480px; margin: 0; color: rgba(229, 235, 243, 0.55); line-height: 1.55; }
.account-terminal button {
  margin-top: 8px;
  border: 1px solid rgba(235, 240, 247, 0.12);
  border-radius: 999px;
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(249, 246, 241, 0.82);
}

.onboarding-place__error {
  min-height: 18px;
  margin-top: 12px;
  color: rgba(242, 188, 167, 0.78);
  font-size: 11.5px;
  text-align: center;
}

.onboarding--submitting .onboarding-place__enter,
.onboarding--submitting .onboarding-place__community { pointer-events: none; opacity: 0.45; }

/* --- narrow live room --------------------------------------------------- */

/* Invisible on desktop. In portrait this is the only persistent chrome the
   room receives: a tiny map of its wide painting, kept below the people and
   above the vignette. The thumb is the window, not a carousel position. */
.room-camera-nav {
  position: absolute;
  z-index: 29;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  width: 106px;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(13, 12, 12, 0.28);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
  opacity: 0.82;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.room-camera-nav__range {
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.room-camera-nav__range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 239, 231, 0.16), rgba(244, 239, 231, 0.34), rgba(244, 239, 231, 0.16));
}

.room-camera-nav__range::-webkit-slider-thumb {
  width: 22px;
  height: 5px;
  margin-top: -1.5px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(246, 226, 198, 0.88);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.48), 0 0 9px rgba(235, 203, 163, 0.12);
}

.room-camera-nav__range::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 239, 231, 0.16), rgba(244, 239, 231, 0.34), rgba(244, 239, 231, 0.16));
}

.room-camera-nav__range::-moz-range-thumb {
  width: 22px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(246, 226, 198, 0.88);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.48), 0 0 9px rgba(235, 203, 163, 0.12);
}

.room-camera-nav:has(.room-camera-nav__range:focus-visible) {
  opacity: 1;
  outline: 1px solid rgba(243, 215, 178, 0.58);
  outline-offset: 2px;
}

.room-camera-hint {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: max(51px, calc(env(safe-area-inset-bottom) + 39px));
  display: none;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 11px;
  border: 1px solid rgba(255, 244, 227, 0.14);
  border-radius: 999px;
  background: rgba(14, 12, 11, 0.58);
  color: rgba(252, 241, 225, 0.88);
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.025em;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, 5px);
  transition: opacity 360ms ease, transform 500ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.room-camera-hint__gesture {
  width: 27px;
  height: 16px;
  display: block;
  color: rgba(246, 221, 187, 0.82);
}

.room-camera-hint__gesture svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-camera-hint--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.room--mobile-camera {
  touch-action: none;
}

.room--mobile-camera .room-camera-nav {
  display: flex;
}

.room--mobile-camera .room-camera-hint {
  display: flex;
}

.room--camera-dragging .room-camera-nav {
  opacity: 1;
}

.room--camera-dragging .seat,
.room--camera-dragging .slot {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .room-camera-hint {
    transition-duration: 1ms;
  }

  .room-message {
    translate: 0 0;
    transition: opacity 1ms linear;
  }
}

@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
  :root {
    --bar-inset: max(10px, env(safe-area-inset-top));
    --chrome-left: max(10px, env(safe-area-inset-left));
  }

  .platform-macos {
    --chrome-left: max(10px, env(safe-area-inset-left));
  }

  #top-bar {
    max-width: calc(100vw - 72px - env(safe-area-inset-right));
    gap: 7px;
    padding-left: 13px;
  }

  .bar__prompt {
    position: fixed;
    top: calc(var(--bar-inset) + var(--bar-h) + 8px);
    left: 50%;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(12, 10, 9, 0.42);
    transform: translateX(-50%);
  }

  .profile-chip--room {
    top: max(12px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }

  #top-scrim {
    height: 104px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 72%, transparent 100%);
  }

  .seat::after {
    inset: -14%;
  }

  .slot::before {
    content: '';
    position: absolute;
    inset: -14%;
    border-radius: 50%;
  }
}

/* Touch screens use sheets for things you act on. The painting remains fully
   present above them; none of these surfaces becomes a separate mobile page. */
@media (pointer: coarse) and (max-width: 1024px) {
  button,
  .onboarding__photo-button {
    -webkit-tap-highlight-color: transparent;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .profile-chip--room {
    width: 44px;
    max-width: 44px;
    height: 44px;
  }

  #top-bar .bar__prompt--move {
    display: none;
  }

  .move-prompt-mobile {
    position: fixed;
    top: calc(var(--move-prompt-viewport-top, 0px) + max(10px, env(safe-area-inset-top)) + var(--bar-h) + 8px);
    left: var(--move-prompt-centre, 50%);
    z-index: 52;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: min(198px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    min-height: 48px;
    padding: 2px 44px;
    overflow: visible;
    border: 1px solid rgba(255, 240, 220, 0.16);
    border-radius: 999px;
    background:
      linear-gradient(145deg, rgba(66, 49, 40, 0.5), rgba(22, 20, 19, 0.62));
    color: rgba(249, 239, 225, 0.74);
    backdrop-filter: blur(20px) saturate(158%) brightness(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(158%) brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 242, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15),
      0 10px 30px rgba(0, 0, 0, 0.24);
    pointer-events: none;
    transform: translateX(-50%);
  }

  .move-prompt-mobile[hidden] {
    display: none;
  }

  .move-prompt-mobile--pending {
    width: auto;
    min-height: 38px;
    padding-inline: 14px;
  }

  .move-prompt-mobile__label,
  .move-prompt-mobile__pending {
    color: rgba(253, 245, 234, 0.84);
    font: 500 12.5px/1 var(--font-ui);
    letter-spacing: 0.005em;
    white-space: nowrap;
  }

  .move-prompt-mobile__cancel {
    position: absolute;
    top: 50%;
    right: 1px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(250, 239, 224, 0.66);
    font: 300 21px/1 var(--font-ui);
    pointer-events: auto;
    transform: translateY(-50%);
    transition: color 150ms ease, background 150ms ease;
  }

  .move-prompt-mobile__cancel:active {
    background: rgba(255, 240, 220, 0.09);
    color: rgba(255, 247, 236, 0.96);
  }

  .move-prompt-mobile__cancel:focus-visible {
    outline: 1px solid rgba(255, 222, 179, 0.48);
    outline-offset: -4px;
  }

  .card {
    position: absolute;
    top: auto !important;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 23px 19px 17px;
    border-radius: 24px 24px 16px 16px;
    max-height: min(88dvh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none !important;
  }

  .card.card--own:not(.card--composing) {
    min-width: 0;
    max-width: none;
  }

  .card::before {
    display: none;
  }

  .card::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: rgba(244, 239, 231, 0.2);
    transform: translateX(-50%);
  }

  .card__more {
    width: 40px;
    height: 38px;
    margin: -9px -8px -7px auto;
  }

  .card__actions {
    gap: 7px;
  }

  .card__action,
  .card__gesture {
    min-height: 44px;
  }

  .card__menu-item {
    min-height: 44px;
    padding-inline: 11px;
  }

  .card__menu {
    position: static;
    width: auto;
    margin: 12px -6px -3px;
    padding: 9px 0 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .card--composing {
    width: auto;
  }

  .room-composer {
    margin-top: 3px;
    padding-top: 4px;
    border-top: 0;
  }

  .room-composer__input {
    min-height: 96px;
    font-size: 16px;
  }

  .room-composer__cancel,
  .room-composer__send {
    min-height: 42px;
    padding-inline: 14px;
  }

  .room-message {
    max-width: min(78vw, 286px);
    font-size: 13px;
  }

  .lately__message-more {
    top: 3px;
    right: 2px;
    width: 44px;
    height: 44px;
    opacity: 0.72;
  }

  .lately-actions__item {
    min-height: 46px;
    padding: 11px 12px;
  }

  .ask-scrim {
    left: var(--room-visual-left, 0px);
    right: auto;
    top: var(--room-visual-top, 0px);
    bottom: auto;
    width: var(--room-visual-width, 100%);
    height: var(--room-visual-height, 100%);
    place-items: safe end center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .ask,
  .confirm {
    width: 100%;
    min-width: 0;
    max-width: 620px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    border-radius: 26px 26px 16px 16px;
  }

  .ask::-webkit-scrollbar,
  .confirm::-webkit-scrollbar {
    display: none;
  }

  .ask {
    gap: 16px;
    padding: 26px 14px 17px;
  }

  .ask__options {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .ask__choice {
    min-width: 0;
    min-height: 70px;
    gap: 8px;
    padding: 13px 3px 10px;
    font-size: 10.5px;
  }

  .ask__choice > span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.12;
    text-align: center;
  }

  .ask__enter {
    min-width: 92px;
    min-height: 44px;
  }

  .ask__input {
    min-height: 86px;
    font-size: 16px;
  }

  .confirm {
    padding: 31px 22px max(24px, env(safe-area-inset-bottom));
  }

  .confirm__stay,
  .confirm__go {
    min-height: 46px;
  }

  .profile-panel {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: min(84dvh, 720px);
    border-radius: 26px 26px 16px 16px;
    transform-origin: bottom center;
  }

  .profile-panel__close {
    width: 42px;
    height: 42px;
    margin: -7px -8px 0 0;
  }

  .profile-panel__cancel,
  .profile-panel__save,
  .profile-panel__unblock {
    min-height: 44px;
  }

  .safety-dialog__backdrop {
    place-items: end center;
    padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .safety-dialog {
    width: 100%;
    max-height: min(92dvh, 680px);
    overflow-y: auto;
    padding: 27px 19px max(17px, env(safe-area-inset-bottom));
    border-radius: 26px 26px 16px 16px;
  }

  .safety-dialog__categories {
    gap: 6px;
  }

  .safety-dialog__choices,
  .safety-dialog__reset {
    gap: 6px;
  }

  .safety-dialog__choice,
  .safety-dialog__reset-item {
    min-height: 46px;
    font-size: 12px;
  }

  .safety-dialog__category {
    min-height: 46px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .safety-dialog__note {
    min-height: 78px;
    resize: none;
  }

  .safety-dialog__actions {
    gap: 5px;
    margin-top: 18px;
    padding-top: 14px;
  }

  .safety-dialog__actions button {
    min-width: 0;
    min-height: 42px;
    padding-inline: 11px;
  }

  .safety-dialog__actions--report .safety-dialog__danger {
    flex: 1.15;
  }

  .safety-dialog__actions--report .safety-dialog__secondary {
    flex: 0.85;
  }
}

/* On a portrait phone, five compressed tiles read like a clipped desktop
   toolbar. Three choices followed by two centred choices give every activity
   a calm touch target without turning the picker into a horizontal carousel. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 479px) {
  .ask__options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px 6px;
  }

  .ask__choice {
    grid-column: span 2;
    min-height: 78px;
    padding: 14px 6px 11px;
    font-size: 12px;
  }

  .ask__choice:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .ask__choice:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* The onboarding keeps the landing page's circular glimpse on phones, then
   turns the form into one generous column beneath it. */
@media (max-width: 700px) {
  .onboarding {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  /* Safari includes visually overflowing descendants when it chooses its
     initial page scale. Keep the atmospheric aurora inside the mobile stage:
     the same glow remains, but it can no longer make a 402px phone negotiate
     a wider layout viewport before an input receives focus. */
  .onboarding__aurora {
    inset: 0;
    transform: scale(1.4);
  }

  .onboarding::-webkit-scrollbar {
    display: none;
  }

  .onboarding__brand {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
  }

  .onboarding__scene {
    position: relative;
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 25px;
    padding: calc(max(20px, env(safe-area-inset-top)) + 66px) 20px max(34px, env(safe-area-inset-bottom));
  }

  .onboarding__world-wrap {
    justify-self: center;
    gap: 0;
  }

  .onboarding__world {
    width: min(47vw, 190px);
  }

  .onboarding__world-caption,
  .onboarding-person__card {
    display: none;
  }

  .onboarding__panel,
  .onboarding--name .onboarding__panel,
  .onboarding--photo .onboarding__panel,
  .onboarding--place .onboarding__panel {
    width: min(100%, 480px);
    justify-self: center;
  }

  .onboarding--name .onboarding__title,
  .onboarding--photo .onboarding__title,
  .onboarding--place .onboarding__title {
    max-width: 340px;
    white-space: normal;
    font-size: clamp(34px, 10vw, 42px);
    line-height: 0.98;
  }

  .onboarding-name__entry {
    height: 58px;
    margin-top: 25px;
    padding-left: 18px;
  }

  .onboarding--photo .onboarding__body {
    transform: none;
  }

  .onboarding--photo .onboarding__title {
    margin-top: 20px;
  }

  .onboarding-step__back {
    top: 12px;
    left: 0;
    width: 44px;
    height: 44px;
  }

  .onboarding-photo__choices {
    width: 100%;
    flex-direction: column;
    gap: 7px;
    margin-top: 25px;
  }

  .onboarding-photo__choose,
  .onboarding-photo__continue {
    width: min(100%, 280px);
    justify-content: center;
  }

  .onboarding--place .onboarding__body {
    height: auto;
    min-height: 0;
  }

  .onboarding-place__optional {
    position: static;
    order: 0;
    transform: none;
  }

  .onboarding-place__back {
    top: -8px;
  }

  .onboarding--place .onboarding__title {
    order: 1;
    margin-top: 10px;
    transform: none;
  }

  .onboarding-place__fields {
    position: static;
    order: 2;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
    transform: none;
  }

  .onboarding-place__enter {
    position: static;
    order: 3;
    min-width: 132px;
    min-height: 48px;
    justify-content: center;
    margin-top: 18px;
    transform: none;
  }

  .onboarding-place__enter:hover {
    transform: translateY(-1px);
  }

  .onboarding-place__community {
    position: static;
    order: 4;
    min-height: 44px;
    margin-top: 4px;
    transform: none;
  }

  .onboarding-place__community:hover {
    transform: translateY(-1px);
  }

  .onboarding-place__error {
    order: 5;
  }

}

@media (max-width: 700px) and (max-height: 690px) {
  .onboarding__scene {
    align-content: start;
  }

  .onboarding__world {
    width: min(31vw, 138px);
  }
}

/* --- browser-safe readable materials -----------------------------------

   Browser compositors do not agree on how nested backdrop filters sample the
   transformed room, its video and its WebGL layers. The native WKWebView keeps
   the authored glass above; web reading and decision surfaces instead carry
   enough warm pigment to remain legible before blur is applied. Blur is depth,
   never the thing deciding whether a chair or face can be read through text. */
.platform-web .ask-scrim {
  background: rgba(8, 6, 5, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.platform-web .ask-scrim--light {
  background: rgba(8, 6, 5, 0.22);
}

.platform-web .safety-dialog__backdrop,
.platform-web .safety-dialog {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.platform-web .ask {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 218, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 24px 70px rgba(0, 0, 0, 0.48);
}

.platform-web .ask__choice {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}

.platform-web .ask__input {
  background: rgba(8, 6, 5, 0.42);
  border-color: rgba(255, 238, 215, 0.14);
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.18);
}

.platform-web .lately {
  background:
    linear-gradient(150deg, rgba(52, 33, 23, 0.91), rgba(25, 20, 18, 0.95)) padding-box,
    linear-gradient(160deg, rgba(255, 239, 217, 0.26), rgba(255, 255, 255, 0.07) 52%, rgba(242, 180, 92, 0.14)) border-box;
  backdrop-filter: blur(20px) saturate(132%);
  -webkit-backdrop-filter: blur(20px) saturate(132%);
}

.platform-web .update-card {
  background: linear-gradient(145deg, rgba(51, 34, 25, 0.91), rgba(22, 19, 17, 0.95));
  backdrop-filter: blur(20px) saturate(138%);
  -webkit-backdrop-filter: blur(20px) saturate(138%);
}

@media (max-resolution: 1.25dppx) {
  .platform-web .lately,
  .platform-web .update-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }


  .platform-web .lately {
    background: linear-gradient(150deg, rgba(49, 33, 25, 0.97), rgba(23, 20, 18, 0.985));
  }

  .platform-web .update-card {
    background: linear-gradient(145deg, rgba(47, 33, 26, 0.97), rgba(20, 18, 17, 0.985));
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .platform-web .lately {
    background: linear-gradient(150deg, rgba(49, 33, 25, 0.97), rgba(23, 20, 18, 0.985));
  }

  .platform-web .update-card {
    background: linear-gradient(145deg, rgba(47, 33, 26, 0.97), rgba(20, 18, 17, 0.985));
  }

  /* The shared chrome material owns its generic fallback. The profile chip is
     the remaining legacy chrome consumer and keeps the same pigment here until
     it adopts that primitive. */
  .profile-chip {
    background:
      linear-gradient(150deg, rgba(46, 33, 26, 0.94), rgba(22, 19, 17, 0.965)) padding-box,
      linear-gradient(
          158deg,
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.1) 42%,
          rgba(255, 255, 255, 0.28)
        )
        border-box;
  }
}

/* iOS zooms a page when an editable control computes below 16px. Keep this a
   browser-only, narrow-viewport guarantee rather than relying on pointer media
   features: touch reporting varies. A small margin over the nominal threshold
   also survives Safari's custom-font rounding and non-default display scales.
   The intentionally large onboarding name remains untouched. */
@media (max-width: 1024px) {
  .platform-web input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):not(.onboarding-name__input),
  .platform-web textarea,
  .platform-web select {
    font-size: 17px;
  }
}

/* iPhone Safari can start a viewport around 0.85x while fitting its browser
   chrome. Its focus heuristic considers the rendered result, so a nominal
   16-17px control can still be enlarged. `-webkit-touch-callout` identifies
   the iOS engine without disabling pinch zoom for anybody. At 19px the text
   remains optically about 16px at that baseline and focus stays stationary. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    .platform-web input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']):not(.onboarding-name__input),
    .platform-web textarea,
    .platform-web select {
      font-size: 19px;
    }
  }
}
/* The embedded preview must pass unconsumed scrolling to the landing story.
   Only the standalone campus owns a non-scrolling document boundary. */
html.campus-simulation-html.landing-embedded,
.landing-embedded body.campus-simulation-body {
  overscroll-behavior: auto;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/runtime/31da55e7376d4b1c463549bb18c264434adc6185b81b0e09a05236218938c195/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/runtime/31da55e7376d4b1c463549bb18c264434adc6185b81b0e09a05236218938c195/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

body.campus-simulation-body {
  color-scheme: dark;
  --campus-ink: #f5f0e7;
  --campus-ink-soft: rgba(245, 240, 231, 0.62);
  --campus-ink-faint: rgba(245, 240, 231, 0.38);
  --campus-lamp: #f2b45c;
  --campus-sage: #b8c7a4;
  --campus-bronze: #cba978;
  --campus-glass: rgba(21, 23, 18, 0.49);
  --campus-glass-deep: rgba(14, 16, 12, 0.72);
  --campus-edge: rgba(255, 255, 255, 0.13);
  --campus-shadow: 0 22px 70px rgba(1, 4, 1, 0.42);
  --campus-display: 'Newsreader', Georgia, serif;
  --campus-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.campus-experience,
.campus-experience * { box-sizing: border-box; }

.campus-experience [hidden] { display: none !important; }

html.campus-simulation-html,
body.campus-simulation-body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0e120d;
  color: var(--campus-ink);
  font-family: var(--campus-ui);
  -webkit-font-smoothing: antialiased;
}

:where(.campus-shell button, .campus-shell input) { font: inherit; }

:where(.campus-shell button) { color: inherit; }

.campus-experience,
.campus-shell,
.campus-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.campus-shell {
  isolation: isolate;
  background:
    radial-gradient(circle at 52% 42%, rgba(94, 119, 76, 0.17), transparent 38%),
    #0e120d;
}

.campus-scene {
  position: absolute;
  inset: 0;
  min-width: 1px;
  min-height: 1px;
  background: #27352a;
}

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

.campus-look-hint {
  position: absolute;
  z-index: 4;
  inset: 50% 22px auto;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 252, 244, .72);
  font: 300 27px/1 var(--campus-ui);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .5);
  transform: translateY(-50%);
}

.campus-scene--look-hint .campus-look-hint {
  animation: campus-look-hint 2.4s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes campus-look-hint {
  0% { opacity: 0; }
  14%, 56% { opacity: .72; }
  100% { opacity: 0; }
}

.campus-scene--overview-look,
.campus-scene--first-person { cursor: default; touch-action: none; }
.campus-scene--overview-look.is-dragging,
.campus-scene--first-person.is-dragging { cursor: default; }

.campus-first-person-return {
  z-index: 49;
}

.campus-shell[data-view-mode='first-person'] .campus-world-targets,
.campus-shell[data-view-mode='first-person'] #empty-seats {
  visibility: hidden;
  pointer-events: none;
}

/* Hybrid V3 is the visible person. The established seat button retains
   keyboard accessibility and activity/media state; 3D geometry owns pointer
   picking without a second DOM avatar over the optical tile. */
.campus-shell #occupants .seat__disc {
  opacity: 0;
}

/* The canonical high-density seat ring remains an interaction target, not a
   second body. Hybrid V3 supplies the visible local and remote presence. */
.campus-shell #occupants .seat::before {
  opacity: 0;
}

.campus-shell::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 8, 5, .35), transparent 18%),
    radial-gradient(110% 92% at 50% 45%, transparent 50%, rgba(3, 5, 3, .47) 100%);
}

.campus-loading,
.campus-fatal {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #27372c, #0d120d 62%);
}

.campus-qa-status {
  position: absolute;
  z-index: 54;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  padding: 9px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(17,20,15,.62);
  box-shadow: var(--campus-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.campus-qa-status strong {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.campus-qa-status span { color: var(--campus-ink-soft); font-size: 10px; }

.campus-loading h1,
.campus-fatal h1 {
  margin: 0;
  font: 400 clamp(32px, 5vw, 64px)/1 var(--campus-display);
}

.campus-loading p,
.campus-fatal p { margin: 0; color: var(--campus-ink-soft); }

.campus-loading__line {
  width: 124px;
  height: 1px;
  margin: 12px auto 0;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.campus-loading__line::after {
  content: '';
  display: block;
  width: 55%;
  height: 100%;
  background: var(--campus-bronze);
  animation: campus-load 1.45s ease-in-out infinite alternate;
}

@keyframes campus-load { to { transform: translateX(84%); } }

.campus-invitation,
.campus-person-card,
.campus-error {
  background: linear-gradient(145deg, rgba(36, 37, 28, .56), rgba(14, 17, 13, .49));
  border: 1px solid var(--campus-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--campus-shadow);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

.campus-transition {
  position: absolute;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  background: #0e120d;
  opacity: 0;
  transition: opacity 120ms ease;
}

.campus-transition--active { opacity: .74; }

.campus-world-targets,
.campus-seats,
.campus-optical-presence {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.campus-seats { z-index: 20; }
.campus-optical-presence { z-index: 18; }

.campus-camera-resize {
  position: absolute;
  z-index: 23;
  pointer-events: none;
}

.campus-camera-resize__handle {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  outline: 0;
  /* Pointer resizing is resolved by one generous nearest-corner field on the
     stage. The button remains here for focus/keyboard accessibility only. */
  pointer-events: none;
  touch-action: none;
  background: transparent;
  color: rgba(255, 247, 230, .88);
  transform: translate(-50%, -50%) rotate(var(--camera-resize-angle, 0deg));
}

.campus-camera-resize__handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 0 solid currentColor;
  opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(4, 6, 4, .5));
  transform: translate(-50%, -50%) scale(.68);
  transition:
    opacity 170ms ease,
    transform 190ms cubic-bezier(.2, .8, .2, 1),
    filter 170ms ease;
}

.campus-camera-resize__handle--nw,
.campus-camera-resize__handle--se { cursor: nwse-resize; }
.campus-camera-resize__handle--ne,
.campus-camera-resize__handle--sw { cursor: nesw-resize; }
.campus-shell[data-camera-resize-cursor='nwse-resize'],
.campus-shell[data-camera-resize-cursor='nwse-resize'] * { cursor: nwse-resize !important; }
.campus-shell[data-camera-resize-cursor='nesw-resize'],
.campus-shell[data-camera-resize-cursor='nesw-resize'] * { cursor: nesw-resize !important; }
.campus-camera-resize__handle--nw::before {
  border-width: 1.5px 0 0 1.5px;
  border-radius: 7px 0 0;
}
.campus-camera-resize__handle--ne::before {
  border-width: 1.5px 1.5px 0 0;
  border-radius: 0 7px 0 0;
}
.campus-camera-resize__handle--sw::before {
  border-width: 0 0 1.5px 1.5px;
  border-radius: 0 0 0 7px;
}
.campus-camera-resize__handle--se::before {
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 7px;
}

.campus-camera-resize__handle:focus-visible::before,
.campus-camera-resize[data-active-corner='nw'] .campus-camera-resize__handle--nw::before,
.campus-camera-resize[data-active-corner='ne'] .campus-camera-resize__handle--ne::before,
.campus-camera-resize[data-active-corner='sw'] .campus-camera-resize__handle--sw::before,
.campus-camera-resize[data-active-corner='se'] .campus-camera-resize__handle--se::before {
  opacity: .94;
  filter:
    drop-shadow(0 1px 3px rgba(4, 6, 4, .48))
    drop-shadow(0 0 3px rgba(255, 225, 165, .28));
  transform: translate(-50%, -50%) scale(1);
}

@media (pointer: coarse) {
  .campus-camera-resize__handle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campus-camera-resize__handle::before { transition: none; }
}

.campus-presence {
  position: absolute;
  width: 62px;
  height: 82px;
  padding: 0;
  overflow: hidden;
  transform: translate(-50%, -82%);
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 48% 48% 42% 42% / 35% 35% 58% 58%;
  background: rgba(19,22,17,.5);
  box-shadow: 0 13px 30px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: default;
}

.campus-presence--arrival { width: 48px; height: 64px; opacity: .88; }
.campus-presence--hybrid-target {
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.campus-presence--hybrid-target > img { opacity: 0; }
.campus-presence--hybrid-target > span {
  opacity: 0;
  transition: opacity 160ms ease;
}
.campus-presence--hybrid-target:hover > span,
.campus-presence--hybrid-target:focus-visible > span { opacity: 1; }
.campus-presence img,
.campus-presence video { width: 100%; height: 100%; display: block; object-fit: cover; }
.campus-presence > span {
  position: absolute;
  left: 50%;
  bottom: 4px;
  max-width: 90%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(5,7,5,.62);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campus-presence:focus-visible { outline: 2px solid var(--campus-ink); outline-offset: 3px; }

.campus-arrival-overflow {
  position: absolute;
  right: 18px;
  top: 82px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  padding: 7px 9px;
  background: rgba(17,20,15,.7);
  color: var(--campus-ink-soft);
  font-size: 10px;
}
.campus-arrival-overflow ul { margin: 7px 0 0; padding-left: 16px; }

.campus-world-target,
.campus-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.campus-world-target {
  width: clamp(126px, 14vw, 172px);
  height: clamp(118px, 17vh, 154px);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 46%;
  background: transparent;
  cursor: default;
  outline: none;
}

.campus-world-target.campus-pulse {
  color: rgba(246, 241, 230, .88);
}

.campus-pulse .spatial-destination-card--resting,
.campus-pulse .spatial-destination-card--expanded { top: 50%; }

.campus-pulse:hover .spatial-destination-card--resting,
.campus-pulse:is(:focus-visible,:has(:focus-visible)) .spatial-destination-card--resting,
.campus-pulse--region-hovered .spatial-destination-card--resting,
.campus-pulse--revealed .spatial-destination-card--resting {
  opacity: 0;
  transform: translate(-50%, 5px) scale(.98);
}

.campus-pulse:hover .spatial-destination-card--expanded,
.campus-pulse:is(:focus-visible,:has(:focus-visible)) .spatial-destination-card--expanded,
.campus-pulse--region-hovered .spatial-destination-card--expanded,
.campus-pulse--revealed .spatial-destination-card--expanded {
  visibility: visible;
  transition-delay: 0s;
}

.campus-pulse:hover .spatial-destination-card--expanded > *,
.campus-pulse:is(:focus-visible,:has(:focus-visible)) .spatial-destination-card--expanded > *,
.campus-pulse--region-hovered .spatial-destination-card--expanded > *,
.campus-pulse--revealed .spatial-destination-card--expanded > * {
  opacity: 1;
  transform: none;
}

.campus-spatial-target--edge-left .spatial-destination-card--expanded {
  left: 50%;
  transform: translate(0, 0);
  transform-origin: 0 0;
}

.campus-spatial-target--edge-right .spatial-destination-card--expanded {
  right: 50%;
  left: auto;
  transform: translate(0, 0);
  transform-origin: 100% 0;
}

.campus-pulse--awakening .spatial-destination-card--resting {
  animation: none;
  animation-delay: calc(420ms + var(--campus-pulse-delay, 0ms));
}

.campus-pulse:hover .spatial-destination-card--resting,
.campus-pulse:is(:focus-visible,:has(:focus-visible)) .spatial-destination-card--resting,
.campus-pulse.campus-pulse--region-hovered .spatial-destination-card--resting,
.campus-pulse.campus-pulse--revealed .spatial-destination-card--resting {
  animation: none;
}

@keyframes campus-pulse-label-awaken {
  0% { opacity: 0; transform: translate(-50%, 5px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}



.campus-seat {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: default;
}

.campus-seat__ring {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(255, 245, 229, .64);
  border-radius: 50%;
  background: rgba(26, 28, 21, .22);
  box-shadow: 0 7px 18px rgba(0,0,0,.24);
}

.campus-seat__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translate(-50%, 3px);
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(17,20,15,.72);
  opacity: 0;
  white-space: nowrap;
  font-size: 10px;
  transition: 140ms ease;
}

.campus-seat:hover .campus-seat__label,
.campus-seat:focus-visible .campus-seat__label { opacity: 1; transform: translate(-50%, 0); }

.campus-seat:focus-visible { outline: 2px solid var(--campus-ink); outline-offset: 2px; }

.campus-seat--occupied img {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
}

.campus-invitation button,
.campus-map button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 13px;
  background: rgba(255,255,255,.07);
  cursor: default;
}

.campus-invitation button:hover,
.campus-invitation button:focus-visible,
.campus-map button:hover,
.campus-map button:focus-visible {
  background: rgba(255,255,255,.12);
  outline: 1px solid rgba(255,255,255,.32);
}

.campus-primary-button,
.campus-map .campus-map__look {
  background: var(--campus-ink) !important;
  color: #181a14 !important;
}

.campus-media-button { color: var(--campus-ink-soft); }
.campus-media-button--on { background: rgba(185, 202, 161, .2) !important; color: var(--campus-ink); }

.campus-invitation {
  position: absolute;
  z-index: 72;
  top: max(78px, calc(env(safe-area-inset-top) + 66px));
  right: max(16px, env(safe-area-inset-right));
  width: min(390px, calc(100vw - 32px));
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 17px;
}

.campus-invitation[hidden] { display: none; }
.campus-invitation > div { display: grid; gap: 3px; margin-right: auto; }
.campus-invitation strong { font: 400 17px/1.2 var(--campus-display); }
.campus-invitation span { color: var(--campus-ink-soft); font-size: 11px; }

.campus-person-card {
  position: absolute;
  z-index: 65;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 74px));
  min-width: 220px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 17px;
}

.campus-person-card[hidden] { display: none; }
.campus-person-card img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.campus-person-card div { display: grid; margin-right: auto; }
.campus-person-card strong { font: 400 18px var(--campus-display); }
.campus-person-card span { color: var(--campus-ink-soft); font-size: 11px; }
.campus-person-card button { border: 0; background: none; color: var(--campus-ink-soft); font-size: 20px; }
.campus-person-card .campus-person-card__conversation {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  font-size: 10px;
}

.campus-share-surface {
  position: absolute;
  z-index: 16;
  min-width: 180px;
  min-height: 104px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(184,199,164,.09), transparent 55%),
    rgba(10,13,10,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 44px rgba(0,0,0,.42);
  text-align: center;
  pointer-events: none;
}
.campus-share-surface[hidden] { display: none; }
.campus-share-surface video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050705; }
.campus-share-surface > span { color: var(--campus-ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.campus-share-surface > strong { font: 400 16px var(--campus-display); }
.campus-share-surface video + span { position: absolute; left: 7px; bottom: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.62); }

.campus-error {
  position: absolute;
  z-index: 85;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 11px;
  color: #ffe1d3;
  font-size: 12px;
}

.campus-error[hidden] { display: none; }

.campus-map,
.campus-leave-confirmation {
  border: 0;
  padding: 0;
  color: var(--campus-ink);
  background: transparent;
}

.campus-map::backdrop,
.campus-leave-confirmation::backdrop {
  background: rgba(5, 8, 5, .58);
}

.campus-leave-confirmation {
  width: min(410px, calc(100vw - 32px));
  margin: auto;
}

.campus-leave-confirmation__shell {
  padding: 20px;
  display: grid;
  gap: 20px;
  border-radius: 22px;
}

.campus-leave-confirmation__shell h2 {
  margin: 0;
  font: 500 18px/1.3 var(--font-ui);
}

.campus-leave-confirmation__shell p {
  margin: 0;
  color: var(--campus-ink-soft);
  font: 400 14px/1.45 var(--font-ui);
}

.campus-leave-confirmation__shell > div {
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.campus-leave-confirmation button {
  font: 500 14px/1.4 var(--font-ui);
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  color: inherit;
  cursor: default;
}

.campus-map {
  width: min(1000px, calc(100vw - 44px));
  height: min(760px, calc(100vh - 44px));
  max-width: none;
  max-height: none;
  margin: auto;
}

.campus-map__shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
}

.campus-map__close {
  position: absolute;
  z-index: 11;
  top: 14px;
  right: 14px;
  width: 44px;
  min-width: 44px !important;
  height: 44px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 22px;
}

.campus-map__body { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 304px; }

.campus-map__visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(25deg, transparent 0 13px, rgba(255,255,255,.017) 13px 14px),
    #1e2b21;
  display: grid;
  place-items: center;
}

.campus-map__plane { position: relative; overflow: hidden; }
.campus-map__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; filter: saturate(.76) brightness(.72) contrast(1.06); }
.campus-map__visual--image-missing .campus-map__image { display: none; }
.campus-map__grain { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 45%, rgba(4,7,4,.42)); }
.campus-map__regions {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.campus-map-region { cursor: default; outline: none; }
.campus-map-region__shape {
  fill: transparent;
  stroke: transparent;
  stroke-width: 8px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: fill 130ms ease, stroke 130ms ease;
}
.campus-map-region__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 12px;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}
.campus-map-region:hover .campus-map-region__shape,
.campus-map-region:focus-visible .campus-map-region__shape,
.campus-map-region--selected .campus-map-region__shape {
  fill: rgba(237, 211, 169, .105);
  stroke: rgba(240, 213, 171, .055);
}

.campus-map__labels { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.campus-map-region-label {
  position: absolute;
  max-width: 140px;
  padding: 3px 6px;
  transform: translate(-50%, -50%);
  border-radius: 7px;
  background: rgba(8, 12, 8, .24);
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .92);
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.campus-map-region-label--selected {
  color: rgba(255, 247, 232, .98);
  background: rgba(18, 17, 13, .58);
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, .11), 0 4px 15px rgba(0, 0, 0, .18);
}
.campus-map-region-label--pin-nearby {
  /* The pin remains geographically exact; its place label yields below the
     point instead of competing with the marker. */
  transform: translate(-50%, 12px);
}
.campus-map-region-label--selected.campus-map-region-label--pin-nearby {
  transform: translate(-50%, 12px);
}

.campus-map-user-pin {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 38px;
  transform: translate(-50%, -100%);
  color: #f2dfbd;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .68));
}
.campus-map-user-pin[hidden] { display: none; }
.campus-map-user-pin svg { display: block; width: 30px; height: 38px; overflow: visible; }
.campus-map-user-pin path { fill: rgba(242, 226, 198, .96); stroke: rgba(72, 54, 33, .92); stroke-width: 1.35; }
.campus-map-user-pin circle { fill: #705739; stroke: rgba(255, 248, 230, .9); stroke-width: 1; }

.campus-map__rail {
  min-height: 0;
  padding: 76px 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  border-left: 1px solid rgba(255,255,255,.08);
  background: rgba(11, 15, 11, .12);
}

.campus-map__card-stack {
  width: 100%;
  display: grid;
  align-items: center;
}

.campus-map__destination-card.spatial-destination-card--expanded {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  /* World cards centre around an anchor with translateX(-50%). In the map the
     card is an ordinary rail child, so retaining that transform pulled half
     of it back over the map plane. */
  transform: none;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 130ms;
}

.campus-map__destination-card--active.spatial-destination-card--expanded {
  visibility: visible;
  transition-delay: 0s;
}

.campus-map__destination-card--active.spatial-destination-card--expanded > * {
  opacity: 1;
  transform: none;
}



.campus-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
  .campus-scene { left: 50%; right: auto; width: max(100vw, calc(100vh * 1.45)); transform: translateX(-50%); }
  .campus-map { width: 100vw; height: 100vh; }
  .campus-map__shell { border: 0; border-radius: 0; }
  .campus-map__body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 59%) minmax(0, 41%); }
  .campus-map__rail {
    z-index: 3;
    padding: 10px 14px max(14px, env(safe-area-inset-bottom));
    justify-content: flex-start;
    border-top: 1px solid rgba(255,255,255,.08);
    border-left: 0;
  }
  .campus-map__destination-card.spatial-destination-card--expanded {
    grid-template-columns: 116px minmax(0, 1fr) auto;
    grid-template-areas: "preview copy glyphs";
    align-items: center;
  }
  .campus-map__destination-card .spatial-destination-card__preview { align-self: stretch; }

  .campus-world-target.campus-pulse { width: 124px; height: 124px; }
  .campus-pulse .spatial-destination-card--expanded { width: min(270px, calc(100vw - 28px)); }
}

@media (max-width: 620px) {
  .campus-invitation { left: 12px; right: 12px; width: auto; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .campus-experience *,
  .campus-experience *::before,
  .campus-experience *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .001ms !important; }
  .campus-scene { transition: none; }
  .campus-scene--look-hint .campus-look-hint { animation: none; opacity: .6; }
}

/* Destination names remain readable after the initial discovery animation. */
.campus-pulse .spatial-destination-card--resting { opacity: 1; }
.campus-pulse:hover .spatial-destination-card--resting,
.campus-pulse:is(:focus-visible,:has(:focus-visible)) .spatial-destination-card--resting,
.campus-pulse--region-hovered .spatial-destination-card--resting,
.campus-pulse--revealed .spatial-destination-card--resting { opacity: 0; }

.campus-route-edges { position:absolute; inset:0; pointer-events:none; }
.campus-route-edge { position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; border:1px solid rgba(241,204,145,.28); border-radius:999px; padding:8px 11px; color:rgba(255,243,219,.92); background:rgba(24,22,18,.56); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 5px 18px rgba(5,7,5,.18),inset 0 1px 0 rgba(255,236,200,.07); font:500 11px/1 var(--campus-ui); letter-spacing:.015em; cursor:default; transition:opacity 150ms ease,transform 200ms cubic-bezier(.2,.75,.25,1); }
.campus-route-edge--left {left:12px} .campus-route-edge--right {right:12px}
.campus-route-edge[hidden] {display:none} .campus-route-edge:focus-visible {outline:2px solid #edbd7b;outline-offset:3px}
/* One 180ms crossfade, reversible from the currently rendered opacity.
   Both shells are unfiltered; inert switches interaction immediately. */
.campus-pulse { opacity:1; visibility:visible; transition:opacity 180ms ease,visibility 0s; }
.campus-pulse--offscreen { visibility:hidden; opacity:0; pointer-events:none; transition:opacity 180ms ease,visibility 0s 180ms; }
.campus-route-edge { transition:opacity 180ms ease,visibility 0s; }
.campus-route-edge--hidden { visibility:hidden; opacity:0; pointer-events:none; transition:opacity 180ms ease,visibility 0s 180ms; }
.campus-pulse .spatial-destination-card--resting { left:calc(50% + var(--route-rest-x,0px)); }
.campus-pulse .spatial-destination-card--expanded { left:calc(50% + var(--route-expanded-x,0px)); }
@media(prefers-reduced-motion:reduce){.campus-pulse,.campus-pulse--offscreen,.campus-route-edge,.campus-route-edge--hidden{transition:none;}}

.campus-bottom-navigation { position: absolute; z-index: 30; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 21px; max-width: calc(100% - 24px); }
.campus-bottom-navigation:not(:has(> .spatial-navigation-island:not([hidden]), > .spatial-private-session__start:not([hidden]))) { display: none; }
.campus-bottom-navigation .spatial-navigation-island .icon-btn { width: auto; min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 16px; font-size: 13px; }
.campus-bottom-navigation .spatial-private-session__start { border-radius: 16px; min-height: 44px; background: transparent; }
.campus-bottom-navigation .spatial-navigation-island:not([hidden]) + .spatial-private-session__start:not([hidden]) { border-left: 1px solid rgba(255,255,255,.13); border-radius: 0 16px 16px 0; }
.spatial-session-lock-flight { position:fixed; z-index:1000; box-sizing:border-box; overflow:visible; color:rgba(255,238,207,.98); pointer-events:none; transform-origin:50% 50%; will-change:transform,opacity; }
.spatial-session-lock-flight__arc { position:absolute; inset:0; overflow:visible; will-change:transform; }
.spatial-session-lock-flight__capsule,
.spatial-session-lock-flight__circle { position:absolute; z-index:0; left:50%; top:50%; box-sizing:border-box; overflow:hidden; border:1px solid transparent; border-radius:999px; transform:translate(-50%,-50%); will-change:clip-path,opacity,transform; }
.spatial-session-lock-flight__capsule { background:linear-gradient(rgba(58,54,50,.2),rgba(35,33,31,.27)) padding-box,linear-gradient(158deg,rgba(255,255,255,.38),rgba(255,255,255,.11) 42%,rgba(255,255,255,.23)) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.2),0 9px 30px rgba(0,0,0,.28); }
.spatial-session-lock-flight__circle { background:linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.045)) padding-box,linear-gradient(158deg,rgba(255,255,255,.42),rgba(255,255,255,.12) 45%,rgba(255,255,255,.24)) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.28),0 0 16px rgba(235,191,126,.12); }
.spatial-session-lock-flight__capsule::after,
.spatial-session-lock-flight__circle::after { position:absolute; inset:5px; border-radius:inherit; background:radial-gradient(circle,rgba(238,193,129,.12),transparent 72%); content:''; }
.spatial-session-lock-flight__glyph { position:absolute; z-index:2; left:50%; top:50%; width:16px; height:16px; transform-origin:50% 50%; filter:drop-shadow(0 1px 3px rgba(40,27,13,.28)); will-change:transform; }
.spatial-session-lock-flight__label { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); font:500 12px/1 var(--font-ui); white-space:nowrap; will-change:opacity; }

.campus-world-target .spatial-destination-card--resting {
  --chrome-glass-tint-top: rgba(37, 35, 32, .27);
  --chrome-glass-tint-bottom: rgba(27, 26, 24, .37);
  color: #fffdf7;
}
/* The menu's shared reading material, with light navigation ink. */
.campus-bottom-navigation .icon-btn { color: rgba(251,247,240,.94); }
.campus-world-target .spatial-destination-card__title { font-size: 12px; font-weight: 600; letter-spacing: .025em; }
.campus-world-target .spatial-destination-card--expanded .spatial-destination-card__title { font-size: 22px; }
.campus-world-target .spatial-destination-card__glyphs { color: #f6eddc; }

.campus-leave-confirmation__identity { display:flex; align-items:center; gap:16px; }
.campus-leave-confirmation__identity img { width:88px; height:88px; object-fit:cover; border-radius:12px; flex:none; }
.campus-leave-confirmation__identity img[hidden] { display:none; }
.campus-leave-confirmation__identity section { min-width:0; }
.campus-leave-confirmation__identity h2 { font-size:18px; overflow-wrap:anywhere; }
.campus-leave-confirmation__identity p { margin-top:4px; overflow-wrap:anywhere; }
.campus-leave-confirmation__identity .campus-leave-confirmation__consequence { margin-top:12px; }
.campus-leave-confirmation button { background:transparent; }
.campus-leave-confirmation button.campus-leave-confirmation__continue { background:rgba(255,255,255,.12); }
.campus-leave-confirmation button:hover { background:rgba(255,255,255,.18); }
.campus-leave-confirmation button:focus-visible { outline:2px solid rgba(255,255,255,.65); outline-offset:2px; }

.campus-leave-confirmation {width:min(360px,calc(100vw - 32px));}
.campus-leave-confirmation__shell {padding:16px;gap:14px;}
.campus-leave-confirmation__identity {gap:12px;align-items:flex-start;}
.campus-leave-confirmation__identity img {width:72px;height:72px;}
.campus-leave-confirmation__identity .campus-leave-confirmation__consequence {margin-top:8px;font-size:13px;}
.campus-leave-confirmation__shell > div {justify-content:center;}

/* Spatial previews keep the ordinary cursor; the scene itself is not a button. */
.campus-world-target.campus-pulse,
.campus-pulse .spatial-destination-card,
.campus-pulse .spatial-destination-card select,
.campus-route-edge,
.campus-map-region {cursor:default;}

.campus-camera-resize[data-hovered] .campus-camera-resize__handle::before {
  opacity: .5;
  transform: translate(-50%, -50%) scale(1);
}
.campus-camera-resize .campus-camera-resize__handle:focus-visible::before {
  opacity: 1;
}

.campus-camera-resize[data-active-corner='nw'] .campus-camera-resize__handle--nw::before,
.campus-camera-resize[data-active-corner='ne'] .campus-camera-resize__handle--ne::before,
.campus-camera-resize[data-active-corner='sw'] .campus-camera-resize__handle--sw::before,
.campus-camera-resize[data-active-corner='se'] .campus-camera-resize__handle--se::before { opacity: .94; }
.campus-audio-recovery { position:absolute; z-index:30; left:50%; bottom:90px; transform:translateX(-50%); padding:10px 16px; min-height:44px; border-radius:20px; color:var(--text,#fff); font:500 12px var(--font-ui); }
.campus-audio-recovery[hidden] { display:none; }

/* Optical avatars are picked in 3D, never by overlapping DOM discs.
   Keep the buttons in the keyboard accessibility tree. */
.campus-shell #occupants .seat { pointer-events: none; }

.campus-world-target--loading .spatial-destination-card__entry {position:absolute;}
.campus-world-target--loading .spatial-destination-card__entry > * {visibility:hidden;}
.campus-world-target--loading .spatial-destination-card__entry::after {
 content:'';position:absolute;width:16px;height:16px;left:calc(50% - 8px);top:calc(50% - 8px);
 border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;
 animation:campus-view-wait 900ms linear infinite;
}
.campus-world-target--loading .spatial-destination-card--expanded {opacity:1!important;visibility:visible!important;}
.campus-world-target--loading .spatial-destination-card--resting {opacity:0;}
.campus-world-target--loading .spatial-destination-card--expanded > * {opacity:1;transform:none;}
@keyframes campus-view-wait {to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.campus-world-target--loading .spatial-destination-card__entry::after{animation:none;}}

/* Immediate branded loading; no additional asset acquisition. */
.campus-loading {background:radial-gradient(ellipse at 50% 45%,rgba(57,68,78,.16),transparent 65%),linear-gradient(180deg,#090c11,#080b10 60%,#090a0c);color:#f2ede2;gap:12px;}
.campus-loading h1 {font:400 24px/1.2 var(--font-display);letter-spacing:-.035em;}
.campus-loading p {font:400 13px/1.5 var(--font-ui);color:rgba(242,237,226,.65);}

/* The campus is a viewport, not a scrollable document. Panels own scrolling. */
html.campus-simulation-html,body.campus-simulation-body { overscroll-behavior:none; }
.campus-scene { touch-action:pinch-zoom; }
.activity-view{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 22px;column-gap:10px;color:inherit;font:12px/1.4 var(--font-ui)}
.activity-view[hidden],.activity-view [hidden]{display:none!important}
.activity-view button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer;border-radius:8px;min-width:28px;min-height:28px;padding:4px;display:grid;place-items:center}
.activity-view button:hover{background:rgba(255,255,255,.055)}.activity-view button:focus-visible,.activity-view input:focus-visible{outline:1px solid rgba(255,255,255,.75);outline-offset:2px}
.activity-view svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.activity-header{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:28px;margin-bottom:6px}.activity-header>[data-activity-action=close]{opacity:.6}.activity-header>[data-activity-action=close] svg{width:14px;height:14px}
.activity-switcher{display:flex;align-items:center;opacity:.7}.activity-counter{font-size:10px;min-width:24px;text-align:center;font-variant-numeric:tabular-nums}.activity-switcher svg{width:13px;height:13px}
.activity-main{display:flex!important;gap:12px;min-width:0;text-align:left;padding:0!important;min-height:48px!important}.activity-art{width:48px;height:48px;display:grid;place-items:center;flex:none}.activity-art .windows-art{width:48px;height:48px}.activity-art .windows-art--music .windows-service-icon{width:48px;height:48px;border-radius:9px}.activity-art .windows-art--video .windows-service-icon{width:48px;height:30px;border-radius:6px}.activity-art svg{width:25px;height:25px}
.activity-copy{min-width:0;flex:1}.activity-title{display:block;font-size:14px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-metadata{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}.activity-subtitle{font-size:11px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-platform{display:flex;flex:none}.activity-platform .windows-service-icon{width:11px;height:11px}.activity-platform svg{width:9px;height:9px}.activity-platform .windows-service-icon--youtube{width:14px;height:10px;border-radius:3px}.activity-platform .windows-service-icon--apple-music{border-radius:3px}
.activity-bars{display:flex;align-items:center;justify-content:center;gap:2px;align-self:center;height:20px;opacity:.5}.activity-bars i{width:2px;height:5px;border-radius:2px;background:currentColor;transform-origin:center}.activity-bars i:nth-child(2n){height:11px}.activity-bars i:nth-child(3){height:18px}.activity-bars[data-playing=true] i{animation:activity-level 1.2s ease-in-out infinite alternate}.activity-bars i:nth-child(2n){animation-delay:-.6s}.activity-bars i:nth-child(3){animation-delay:-.3s}@keyframes activity-level{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.activity-timeline{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:10px;font-variant-numeric:tabular-nums}.activity-time{opacity:.58;min-width:28px}.activity-time:last-child{text-align:right;min-width:34px}.activity-timeline input{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}.activity-timeline input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,rgba(255,255,255,.8) var(--progress,0%),rgba(255,255,255,.2) var(--progress,0%))}.activity-timeline input::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:#eee;margin-top:-2.5px}.activity-timeline input::-moz-range-track{height:3px;background:#ffffff35}.activity-timeline input::-moz-range-progress{height:3px;background:#ffffffcc}.activity-timeline input::-moz-range-thumb{width:8px;height:8px;border:0;background:#eee}
.activity-transport{grid-column:1/-1;display:grid;grid-template-columns:1fr 36px 44px 36px 1fr;align-items:center;min-height:40px;margin-top:4px}.activity-transport [data-activity-action=previous]{grid-column:2}.activity-transport [data-activity-action=play]{grid-column:3;min-height:40px}.activity-transport [data-activity-action=next]{grid-column:4}.activity-transport [data-activity-action=share]{grid-column:5;justify-self:end;opacity:.65}.activity-transport [data-activity-action=share][aria-pressed=true]{opacity:1}.activity-transport [data-activity-action=play] svg{width:27px;height:27px}.media-icon-pause{stroke-width:4!important}.media-icon-play,.media-icon-stop{fill:currentColor!important;stroke:none!important}.activity-transport .windows-people-outline,.activity-transport .windows-people-filled{width:14px;height:14px;stroke-width:1.35}.activity-transport .windows-people-filled{fill:currentColor;stroke:none}.activity-live{grid-column:1;font-size:10px;opacity:.6}.activity-live:before{content:'•';margin-right:5px}
.activity-dock{position:fixed;left:12px;bottom:max(12px,env(safe-area-inset-bottom));width:min(260px,calc(100vw - 24px));box-sizing:border-box;padding:10px 14px 12px;border-radius:20px;z-index:90;color:rgba(255,252,245,.98);text-shadow:0 1px 2px #0003}
.activity-hover-section{margin-top:8px}.activity-hover-section .activity-header{margin-bottom:4px}.activity-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.campus-shell:has(.activity-dock:not([hidden])) :is(.campus-rehearsal,.campus-fixture-controls){bottom:calc(max(12px,env(safe-area-inset-bottom)) + 212px)}
@media(pointer:coarse){.activity-view button{min-width:44px;min-height:44px}.activity-header{height:44px}.activity-transport{grid-template-columns:1fr 44px 44px 44px 1fr}.activity-timeline input{height:44px}}
@media(prefers-reduced-motion:reduce){.activity-bars i{animation:none!important}}.activity-document-hidden .activity-bars i{animation:none!important}
/* The outer glass stays stable; compact/expanded layouts keep the bottom anchor. */
.activity-dock{padding:10px 12px;border-radius:18px;grid-template-columns:minmax(0,1fr) 94px;column-gap:6px}
.activity-dock .activity-main{grid-row:1;grid-column:1;gap:9px;min-height:40px!important}
.activity-dock .activity-art,.activity-dock .activity-art .windows-art{width:40px;height:40px}
.activity-dock .activity-art .windows-art--music .windows-service-icon{width:40px;height:40px;border-radius:8px}
.activity-dock .activity-art .windows-art--video .windows-service-icon{width:40px;height:26px}
.activity-dock .activity-title{font-size:12px}.activity-dock .activity-subtitle{font-size:10px}
.activity-dock .activity-header{grid-column:2;grid-row:1;align-self:start;height:24px;margin:0;gap:4px}
.activity-dock .activity-header button{min-width:22px;min-height:24px;padding:2px}.activity-dock .activity-counter{min-width:22px;font-size:9px}
.activity-dock .activity-bars{display:none}
.activity-dock .activity-timeline{margin:10px 0 2px}.activity-dock .activity-transport{margin-top:0;min-height:36px}
.activity-expand{display:none!important}
.activity-dock.activity-compact{min-height:64px;grid-template-columns:minmax(0,1fr) 32px;align-items:center}
.activity-dock.activity-compact .activity-header,.activity-dock.activity-compact .activity-timeline,.activity-dock.activity-compact .activity-transport{display:none!important}
.activity-dock.activity-compact .activity-bars{display:flex;grid-column:2;grid-row:1}
.campus-shell:has(.activity-dock.activity-compact:not([hidden])) :is(.campus-rehearsal,.campus-fixture-controls){bottom:calc(max(12px,env(safe-area-inset-bottom)) + 82px)}
@media(pointer:coarse){.activity-dock{grid-template-columns:minmax(0,1fr) 132px}.activity-dock .activity-header{height:44px}.activity-dock .activity-header button{min-width:36px;min-height:44px}.activity-dock.activity-compact{grid-template-columns:minmax(0,1fr) 44px 44px}.activity-expand{display:grid!important;grid-column:3;grid-row:1}.activity-dock:not(.activity-compact) .activity-expand{grid-row:4;grid-column:2;justify-self:end}.activity-expand svg{width:16px;height:16px}}
.activity-dock:not(.activity-compact) :is(.activity-timeline,.activity-transport){animation:activity-controls-in 140ms ease-out}
@keyframes activity-controls-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.activity-dock :is(.activity-timeline,.activity-transport){animation:none!important}}

/* Keep large hit targets invisible; keyboard focus marks the glyph, not a capsule. */
.activity-dock .activity-transport button{position:relative}
.activity-dock .activity-transport button:hover{background:transparent}
.activity-dock .activity-transport button:focus-visible{outline:none;background:transparent}
.activity-dock .activity-transport button:focus-visible::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:12px;height:2px;border-radius:1px;background:currentColor;box-shadow:0 1px 2px #0008}

/* The dock switches activities; closing belongs to the window controls. */
.activity-dock:not(.activity-compact){grid-template-columns:minmax(0,1fr) 68px}
.activity-dock:not(.activity-compact):has(.activity-switcher[hidden]) .activity-main{grid-column:1/-1}
@media(pointer:coarse){.activity-dock:not(.activity-compact){grid-template-columns:minmax(0,1fr) 110px}}

/* Activity navigation shares the transport row; metadata owns the full top row. */
.activity-dock .activity-header{display:none}
.activity-dock .activity-main{grid-column:1/-1}
.activity-dock .activity-main>.activity-live{flex:none;margin-left:auto}
.activity-dock.activity-compact .activity-main{grid-column:1}
.activity-dock.activity-compact .activity-main>.activity-live{display:none}
.activity-dock .activity-transport>.activity-switcher{grid-column:1;grid-row:1;justify-self:start}
.activity-dock .activity-transport>button{grid-row:1}
.activity-dock .activity-switcher button{min-width:22px;padding:2px}
@media(pointer:coarse){.activity-dock .activity-transport{grid-template-columns:110px 44px 44px 44px minmax(44px,1fr)}.activity-dock .activity-switcher button{min-width:44px}}

.activity-title-text{display:inline-block;white-space:nowrap;vertical-align:top;max-width:none}
.activity-title-scrolling{text-overflow:clip}
.activity-title-scrolling .activity-title-text{animation:activity-title-scroll var(--title-duration) linear 1s infinite alternate}
@keyframes activity-title-scroll{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--title-travel))}}
@media(prefers-reduced-motion:reduce){.activity-title-scrolling{text-overflow:ellipsis}.activity-title-scrolling .activity-title-text{animation:none}}
.activity-hover-section.activity-inline{display:block;margin-top:0;min-width:0}
.activity-inline .activity-main{width:100%;gap:9px;min-height:36px!important}
.activity-inline .activity-art,.activity-inline .activity-art .windows-art{width:36px;height:36px}
.activity-inline .activity-art .windows-art--music .windows-service-icon{width:36px;height:36px;border-radius:7px}
.activity-inline .activity-art .windows-art--video .windows-service-icon{width:36px;height:23px;border-radius:5px}
.activity-inline .activity-title{font-size:11.5px;font-weight:520;line-height:1.25}
.activity-inline .activity-subtitle{font-size:9.5px}
.activity-inline .activity-metadata{padding-right:68px;gap:4px;min-height:18px}
.activity-inline:has(.activity-switcher[hidden]) .activity-metadata{padding-right:0}
.activity-inline .activity-header{position:absolute;right:0;bottom:0;height:22px;margin:0;z-index:1}
.activity-inline .activity-switcher button{min-width:22px;min-height:22px;padding:2px}
.activity-inline .activity-counter{min-width:22px;font-size:9px}
.activity-inline .activity-bars{height:8px;gap:1px;flex:none;width:9px}
.activity-inline .activity-bars i{width:1px;height:3px}.activity-inline .activity-bars i:nth-child(2n){height:5px}.activity-inline .activity-bars i:nth-child(3){height:8px}

@media(pointer:coarse){.activity-inline .activity-header{height:44px}.activity-inline .activity-switcher button{min-width:44px;min-height:44px}.activity-inline .activity-metadata{padding-right:110px}.activity-inline .activity-main{min-height:48px!important}}
.card:has(.activity-inline){width:min(260px,calc(100vw - 24px));min-width:0;box-sizing:border-box}.card:has(.activity-inline) .card__watching{contain:inline-size}

.card__watching:has(.activity-inline){border-top-color:rgba(255,255,255,.045)}

@media(pointer:coarse){.activity-dock .activity-transport{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:2px}.activity-dock .activity-transport>.activity-switcher{grid-column:1/4;grid-row:2}.activity-dock .activity-transport>[data-activity-action=share]{grid-column:5;grid-row:2}}
.activity-screen-hover{position:fixed;inset:0;pointer-events:none;z-index:35}
.activity-screen-target{position:fixed;pointer-events:auto;padding:0;border:0;background:transparent;cursor:pointer}
.activity-screen-target:hover,.activity-screen-target:focus-visible{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.activity-screen-target:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:-3px}
.activity-screen-card{position:fixed;pointer-events:auto;box-sizing:border-box;padding:12px;border-radius:18px;color:var(--text-primary,#fffaf2);font-family:'Instrument Sans',sans-serif;z-index:1}
.activity-screen-card[hidden]{display:none}
.activity-screen-heading{font-size:11px;opacity:.7;margin-bottom:8px}
.activity-screen-card p{font-size:13px;margin:0;opacity:.8}
.activity-screen-card .activity-view[hidden],.activity-screen-switch[hidden]{display:none}
.activity-screen-card .activity-view{width:100%;max-width:100%}
.activity-screen-switch{border:0;background:transparent;color:inherit;font:inherit;font-size:13px;min-height:36px;padding:0;cursor:pointer}
.activity-screen-switch:focus-visible{outline:1px solid currentColor;outline-offset:3px}
@media(pointer:coarse){.activity-screen-switch{min-height:44px}}
.seat[data-camera],
.seat[data-microphone] {
  container-type: inline-size;
}

.seat__media-presence {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.seat__media-pearl {
  display: grid;
  position: absolute;
  top: -4%;
  width: clamp(11px, 27cqw, 15px);
  height: clamp(11px, 27cqw, 15px);
  place-items: center;
  border: 1px solid rgba(255, 247, 235, 0.44);
  border-radius: 50%;
  color: rgba(255, 244, 228, 0.92);
  background: rgba(18, 21, 21, 0.78);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 2px 9px rgba(3, 5, 6, 0.34);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.seat__media-pearl--camera {
  right: -4%;
}

.seat__media-pearl--speaking {
  left: -4%;
  border-color: rgba(197, 235, 210, 0.54);
  color: rgba(218, 247, 226, 0.94);
  background: rgba(21, 42, 33, 0.82);
}

.seat__media-icon {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.seat--away .seat__media-presence {
  opacity: 0.42;
}

.seat--away .seat__media-pearl--speaking {
  display: none;
}

.seat:focus-visible .seat__media-pearl,
.seat:hover .seat__media-pearl {
  border-color: rgba(255, 247, 235, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .seat__media-pearl {
    transition: none;
  }
}
@media (max-width:700px) {
  .ask__optional {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
}
.ask-scrim[data-mobile-presented] {display:contents;}
.mobile-sheet .ask {padding:0 16px 20px;opacity:1;gap:16px;min-width:0;}
.mobile-sheet .ask__question {display:none;}
.mobile-sheet .ask__options {display:grid;width:100%;min-width:0;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.mobile-sheet .ask__choice {grid-column:span 2;min-width:0;min-height:78px;padding:12px 4px;gap:8px;font-size:13px;}
.mobile-sheet .ask__choice:nth-child(4) {grid-column:2 / span 2;}
.mobile-sheet .ask__choice:nth-child(5) {grid-column:4 / span 2;}
.mobile-sheet .ask__choice > span {white-space:normal;overflow-wrap:normal;text-align:center;}
.spatial-communication {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.spatial-communication__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.spatial-receipt {
  --spatial-reaction-rgb: 183 206 199;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.spatial-receipt__origin,
.spatial-receipt__mark {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

.spatial-receipt__origin {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgb(255 241 218 / 72%);
  border-radius: 50%;
  background: rgb(36 29 23 / 82%);
  box-shadow:
    0 0 0 4px rgb(241 191 130 / 10%),
    0 0 22px rgb(245 190 119 / 34%);
  color: rgb(255 241 219 / 90%);
  font: 650 9px/1 ui-rounded, "SF Pro Rounded", "Avenir Next", sans-serif;
  letter-spacing: .035em;
}

.spatial-receipt--edge-origin .spatial-receipt__origin {
  box-shadow:
    0 0 0 5px rgb(241 191 130 / 14%),
    0 0 26px rgb(245 190 119 / 42%);
}

.spatial-receipt__origin-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spatial-receipt__origin-fallback {
  transform: translateY(.5px);
}

.spatial-receipt__mark {
  /* Promoting opacity here creates a backdrop root and prevents the nested
     glass from sampling the Campus, even while opacity is fully restored. */
  will-change: transform;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  /* The glass owns its shadow; a filtered ancestor also blocks backdrop sampling. */
  filter: none;
}

.spatial-receipt--interactive .spatial-receipt__mark {
  pointer-events: auto;
  cursor: pointer;
}

.spatial-receipt__mark:focus-visible {
  outline: 1px solid rgb(255 236 207 / 82%);
  outline-offset: 4px;
  border-radius: 50%;
}

.spatial-receipt__glyph {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  overflow: visible;
  fill: none;
  stroke: rgb(var(--spatial-reaction-rgb) / 98%);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  filter:
    drop-shadow(0 0 3px rgb(var(--spatial-reaction-rgb) / 44%))
    drop-shadow(0 5px 10px rgb(26 18 13 / 22%));
}

.spatial-receipt--love .spatial-receipt__glyph {
  width: 34px;
  height: 34px;
}

.spatial-receipt--keep .spatial-receipt__glyph {
  width: 34px;
  height: 34px;
  transform: scaleX(1.12);
  transform-origin: 50% 50%;
}

.spatial-receipt__halo {
  position: absolute;
  inset: 3px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--spatial-reaction-rgb) / 18%) 0 20%,
    rgb(var(--spatial-reaction-rgb) / 8%) 36%,
    transparent 70%
  );
  filter: blur(1.5px);
}

.spatial-receipt__identity {
  position: absolute;
  bottom: calc(100% + 7px);
  left: calc(50% + var(--receipt-label-offset,0px));
  display: flex;
  align-items: center;
  gap: 7px;
  width:max-content;
  max-width: min(220px, calc(100vw - 28px));
  min-height: 34px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgb(255 240 216 / 19%);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 60%),
    rgb(28 23 19 / 88%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    0 8px 22px rgb(9 6 4 / 28%);
  color: rgb(255 246 232 / 94%);
  font: 500 12px/1.3 var(--font-ui);
  letter-spacing: .005em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) scale(.97);
  transform-origin: 50% 100%;
  transition:
    opacity 150ms ease,
    transform 180ms cubic-bezier(.2, .78, .24, 1);
}

.spatial-receipt--identity-visible .spatial-receipt__identity {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.spatial-receipt__identity-avatar {
  position: relative;
  display: grid;
  width: 21px;
  height: 21px;
  flex: none;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgb(255 232 202 / 42%);
  border-radius: 50%;
  background: rgb(82 63 49 / 72%);
  color: rgb(255 241 219 / 92%);
  font-size: 7px;
  letter-spacing: .02em;
}

.spatial-receipt__identity-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spatial-receipt__identity-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 660;
}

.spatial-receipt__identity-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.spatial-receipt__identity-action {
  overflow: hidden;
  color: rgb(255 239 219 / 72%);
  font-size: 10px;
  line-height: 1.08;
  text-overflow: ellipsis;
}

.spatial-speech {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms cubic-bezier(.2, .78, .24, 1);
  will-change: opacity;
}

.spatial-speech--visible.spatial-speech--placed:not(.spatial-speech--occluded) {
  opacity: 1;
}

.spatial-speech__pane {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px 18px;
  overflow: hidden;
  border-radius: 14px;
  color: rgb(252 249 242 / 96%);
  transform-origin: 50% 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.34;
  letter-spacing: .002em;
}

.spatial-speech__name {
  color: rgb(240 221 188 / 76%);
  font-size: 10px;
  font-weight: 610;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.spatial-speech__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.spatial-speech__tether {
  position:absolute;
  width:12px;
  height:14px;
  background:var(--panel-tint-b);
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform-origin:0 50%;
  pointer-events:none;
}

@media (max-width: 639px), (pointer: coarse) {
  .spatial-speech__pane {
    border-radius: 15px;
    font-size: 13px;
  }

  .spatial-speech__text {
    -webkit-line-clamp: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-speech {
    transition-duration: 80ms;
  }

  .spatial-receipt__origin {
    display: none;
  }

  .spatial-receipt__identity {
    transition: none;
  }
}

.spatial-receipt--label-below .spatial-receipt__identity { top: calc(100% + 7px); bottom: auto; transform-origin: 50% 0; }

/* The 3D gesture remains visible through arrival; HTML supplies identity/hit area only. */
.spatial-receipt__glyph, .spatial-receipt__halo { visibility:hidden; }
.spatial-receipt--interactive.spatial-receipt--latest .spatial-receipt__identity { opacity:1; transform:translate(-50%,0); }

/* The reading surface and its tail share one clipped material silhouette. */
.spatial-speech__pane { border-radius:0; }

.spatial-speech__avatar { flex:0 0 22px; width:22px; height:22px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font:500 10px/1 var(--font-ui); background:rgba(255,255,255,.08); }
.spatial-speech__avatar { object-fit:cover; }
.spatial-speech__text { min-width:0; padding-top:1px; }

.spatial-receipt__identity {background:transparent;border:0;box-shadow:none;min-height:38px;box-sizing:border-box;padding:5px 10px 5px 6px;gap:7px;border-radius:13px;text-align:left;isolation:isolate;}
.spatial-receipt__identity-glass {position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;}
.spatial-receipt__identity-avatar {width:26px;height:26px;box-sizing:border-box;border:1px solid rgba(38,55,47,.22);background:#dce5dc;color:#26372f;font:600 11px/1 var(--font-ui);}
.spatial-receipt__identity-name {font:500 12px/1.25 var(--font-ui);}
.spatial-receipt__identity-action {font:500 11px/1.3 var(--font-ui);}
.spatial-speech__pane {border:0;box-shadow:none;}

.spatial-receipt__identity {color:#292a27;text-shadow:none;}
.spatial-receipt__identity-action {color:#444640;}

/* The shared identity node owns the whole portrait, including its fallback. */
.spatial-receipt__origin-image--initials {display:grid;place-items:center;color:#fff7eb;}
.spatial-receipt__identity-avatar {object-fit:cover;}
.spatial-receipt__identity-avatar--initials {color:#fff7eb;}

/* A stable portrait box isolates replaced image sizing from the text flex item. */
.spatial-speech__avatar {min-width:22px;max-width:22px;min-height:22px;max-height:22px;align-self:flex-start;}
.spatial-speech__portrait {display:grid;place-items:center;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.spatial-speech__text {white-space:pre-wrap;overflow-wrap:anywhere;}
.spatial-speech__pane.manyplace-panel-glass {
 background:linear-gradient(145deg,rgba(64,38,22,.90),rgba(31,23,19,.91));
 backdrop-filter:none;-webkit-backdrop-filter:none;
 color:rgba(252,249,242,.94);
 box-shadow:inset 0 0 0 1px rgba(245,224,195,.28);
 font-size:13.5px;line-height:1.42;
}
@media(max-width:700px){.spatial-speech__pane.manyplace-panel-glass{font-size:13px;}}
.slots--spatial .slot {
  opacity: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.slots--spatial .slot::before,
.slots--spatial .slot::after {
  opacity: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.spatial-seat-cues {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Not a replacement seat disc: this crown appears only when geometry or a
   spatial person hides an otherwise available authored support. */
.spatial-seat-cue {
  position: absolute;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  color: rgba(255, 225, 181, 0.9);
  filter: drop-shadow(0 2px 7px rgba(20, 12, 6, 0.72));
}

.spatial-seat-cue[hidden] { display: none; }

.spatial-seat-cue__mark {
  width: 31px;
  height: 23px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  opacity: 0.82;
  transition: opacity 140ms ease, scale 140ms ease, filter 140ms ease;
}

.spatial-seat-cue__label {
  --chrome-glass-tint-top: rgba(251, 247, 239, 0.86);
  --chrome-glass-tint-bottom: rgba(230, 223, 212, 0.76);
  display: none;
  min-width: max-content;
  padding: 7px 11px 8px;
  border-radius: 999px;
  color: rgba(35, 31, 27, 0.96);
  font: 550 12px/1 var(--font-ui);
  letter-spacing: 0.015em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46);
  -webkit-backdrop-filter: blur(16px) saturate(124%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(124%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(93, 76, 57, 0.09),
    0 2px 7px rgba(28, 23, 18, 0.2),
    0 9px 24px rgba(28, 23, 18, 0.16);
}

.spatial-seat-cue--labelled {
  width: auto;
  translate: -50% calc(-100% - 6px);
  /* The occlusion mark uses a drop-shadow, but a filtered ancestor isolates
     backdrop-filter and makes the shared glass read as a grey sticker. */
  filter: none;
}

.spatial-seat-cue--labelled .spatial-seat-cue__mark {
  display: none;
}

.spatial-seat-cue--labelled .spatial-seat-cue__label {
  display: block;
}

.spatial-seat-cue:hover .spatial-seat-cue__mark,
.spatial-seat-cue--emphasized .spatial-seat-cue__mark {
  opacity: 1;
  scale: 1.08;
  filter: drop-shadow(0 0 5px rgba(255, 211, 151, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .spatial-seat-cue__mark { transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .spatial-seat-cue__label.manyplace-chrome-glass {
    background:
      linear-gradient(150deg, rgba(249, 245, 237, 0.97), rgba(226, 219, 208, 0.96)) padding-box,
      linear-gradient(158deg, rgba(255, 255, 255, 0.9), rgba(106, 88, 68, 0.18)) border-box;
  }
}

.spatial-seat-choice {
  position:absolute; width:136px; min-height:44px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; color:rgba(255,250,241,.96);
  font:500 12px/1 var(--font-ui); cursor:pointer; pointer-events:auto;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.spatial-seat-choice svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spatial-seat-choice:hover,.spatial-seat-choice:focus-visible {outline:1px solid rgba(255,242,215,.85);outline-offset:2px}
.spatial-seat-choice-line {position:absolute;height:1px;background:rgba(255,242,215,.55);transform-origin:0 50%;pointer-events:none}
.spatial-seat-choice[hidden],.spatial-seat-choice-line[hidden] {display:none}
.card__gesture--lead .card__gestureGlyph {width:16px;height:16px;stroke-width:1.5;}
.card {
  --card-identity-column: 52px;
  --card-identity-gap: 12px;
  min-width: 248px;
  max-width: min(292px, calc(100vw - 24px));
}

.card__identity {
  display: grid;
  grid-template-columns: var(--card-identity-column) minmax(0, 1fr);
  gap: var(--card-identity-gap);
  align-items: center;
}

.card__text { min-width: 0; }

.card__portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 237, 211, 0.2);
  border-radius: 17px;
  outline: 0;
  background:
    radial-gradient(circle at 31% 24%, hsl(var(--card-portrait-hue) 36% 57% / 0.72), transparent 58%),
    hsl(var(--card-portrait-hue) 22% 21% / 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.28);
  color: rgba(255, 247, 235, 0.9);
  flex: none;
}

.card__portrait:disabled { opacity: 1; cursor: default; }

.card__portrait--interactive { cursor: pointer; }

.card__portrait--interactive:hover,
.card__portrait--interactive:focus-visible {
  border-color: rgba(255, 220, 170, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(242, 180, 92, 0.13),
    0 9px 24px rgba(0, 0, 0, 0.32);
}

.card__portrait-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__portrait-image[hidden],
.card__portrait-fallback[hidden] { display: none; }

.card__portrait-fallback {
  width:100%;height:100%;display:grid;place-items:center;
  font: 560 15px/1 var(--font-ui);
  letter-spacing: 0.045em;
}

.card__more { margin-left: auto; }
.card__audio {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -5px -2px -5px auto;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 10px;
  outline: 0;
  background: transparent;
  color: rgba(255, 236, 205, .78);
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.card__audio[hidden] { display: none; }
.card__audio:not([hidden]) + .card__more { margin-left: 0; }
.card__audio:hover,
.card__audio:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 246, 231, .96);
}
.card__audio-glyph { width: 18px; height: 18px; }
.card__audio--speaking:not(.card__audio--muted) .card__audio-glyph {
  filter: drop-shadow(0 0 5px rgba(242, 180, 92, .38));
  animation: card-speaker-breathe 920ms ease-in-out infinite alternate;
}
.card__audio--muted { color: rgba(244, 239, 231, .38); }
.card__audio--muted::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-45deg);
}

@keyframes card-speaker-breathe {
  from { opacity: .72; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.04); }
}
.card__action--with-glyph { gap: 6px; }

.card__activity--hierarchy { display: grid; gap: 2px; }
.card__activity-primary { min-width: 0; }
.card__activity-now {
  display: block;
  overflow: hidden;
  color: rgba(244, 239, 231, 0.48);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__activity-now-label { color: rgba(244, 239, 231, 0.3); }
.card__activity-done { color: rgba(132, 201, 154, 0.72); }

/* Shared watching is presence, not an advertisement. At rest it is one
   compact row; deliberate hover/focus unfolds the familiar room thumbnail
   and the two ways of joining without introducing a second popover. */

/* A glimpse through the doorway: what they're watching, as one stable
   block. The whole row is the act; hovering names it in the subline (the
   card's own grammar) — nothing swaps layout, nothing pops. */
.card__watching {
  margin: 11px -6px 0;
  padding: 8px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.085);
}

.card__watching[hidden] { display: none; }

.card__watching-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background-color 150ms ease;
}

.card__watching-row:hover,
.card__watching-row:focus-visible {
  background: rgba(255, 255, 255, 0.055);
}

.card__watching-row:focus-visible {
  outline: 1px solid rgba(255, 222, 174, 0.6);
  outline-offset: -1px;
}

.card__watching-thumb {
  width: 64px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3) center / cover no-repeat;
  transition: border-color 160ms ease;
}

.card__watching-row:hover .card__watching-thumb,
.card__watching-row:focus-visible .card__watching-thumb {
  border-color: rgba(255, 226, 187, 0.42);
}

.card__watching-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.card__watching-title,
.card__watching-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__watching-title {
  color: rgba(249, 244, 236, 0.9);
  font: 520 11.5px/1.25 var(--font-ui);
}

.card__watching-sub {
  color: rgba(244, 239, 231, 0.43);
  font: 400 9.5px/1.25 var(--font-ui);
}

.card__watching-sub-act {
  display: none;
  color: rgba(255, 226, 185, 0.9);
}

/* The screen panel's motion grammar at card scale: three unequal bars while
   sound runs; the same footprint resolves into a quiet II while paused. */
.card__watching-eq {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5px;
  width: 8px;
  height: 7px;
  margin-right: 5px;
  vertical-align: baseline;
}

.card__watching-eq > span {
  width: 1.5px;
  height: 100%;
  border-radius: 1px;
  background: rgba(255, 222, 174, 0.55);
  transform-origin: bottom;
  transform: scaleY(0.4);
}

.card__watching-eq--playing > span {
  background: rgba(255, 222, 174, 0.85);
}

.card__watching-eq--paused {
  gap: 2px;
  opacity: 0.72;
}

.card__watching-eq--paused > span {
  transform: scaleY(0.72);
  background: rgba(255, 222, 174, 0.68);
}

.card__watching-eq--playing > span:nth-child(1) {
  animation: media-eq-a 740ms ease-in-out infinite;
}

.card__watching-eq--playing > span:nth-child(2) {
  animation: media-eq-b 1130ms ease-in-out infinite;
}

.card__watching-eq--playing > span:nth-child(3) {
  animation: media-eq-c 890ms ease-in-out infinite;
}

@keyframes media-eq-a {
  0% { transform: scaleY(0.3); }
  34% { transform: scaleY(0.9); }
  58% { transform: scaleY(0.45); }
  81% { transform: scaleY(0.75); }
  100% { transform: scaleY(0.3); }
}

@keyframes media-eq-b {
  0% { transform: scaleY(0.65); }
  22% { transform: scaleY(0.35); }
  49% { transform: scaleY(1); }
  70% { transform: scaleY(0.5); }
  100% { transform: scaleY(0.65); }
}

@keyframes media-eq-c {
  0% { transform: scaleY(0.45); }
  30% { transform: scaleY(0.7); }
  55% { transform: scaleY(0.3); }
  85% { transform: scaleY(0.85); }
  100% { transform: scaleY(0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .card__audio--speaking:not(.card__audio--muted) .card__audio-glyph { animation: none; }
  .card__watching-eq--playing > span {
    animation: none;
    transform: scaleY(0.6);
  }
}

.card__watching-row:hover .card__watching-sub-rest,
.card__watching-row:focus-visible .card__watching-sub-rest,
.card__watching-row:hover .card__watching-eq,
.card__watching-row:focus-visible .card__watching-eq {
  display: none;
}

.card__watching-row:hover .card__watching-sub-act,
.card__watching-row:focus-visible .card__watching-sub-act {
  display: inline;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) {
  .card {
    --card-identity-column: 44px;
    --card-identity-gap: 11px;
  }

  .card__portrait {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
}

/* Mobile sheets own their width regardless of stylesheet import order. */
@media (pointer:coarse) and (max-width:1024px) {
 .card.manyplace-panel-glass { min-width:0;max-width:none;width:auto; }
}

/* Readable hierarchy on every density; scope tokens to this card only. */
.card.manyplace-panel-glass {--ink-soft:rgba(244,239,231,.84);--ink-faint:rgba(244,239,231,.70);}
.card .card__meta,.card .card__where {color:var(--ink-faint);}
.card .card__gesture:not([aria-disabled="true"]):not(.card__gesture--spent) {color:var(--ink-soft);}
.card .card__gesture:not([aria-disabled="true"]):not(.card__gesture--spent):is(:hover,:focus-visible) {color:rgba(244,239,231,.95);background:rgba(255,255,255,.08);}

/* Local reading contrast over the shared panel material; no extra blur pane. */
.card.manyplace-panel-glass {
  background:
    linear-gradient(rgb(12 10 9 / .06), rgb(12 10 9 / .06)) padding-box,
    linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box,
    var(--panel-rim) border-box;
}
@media (max-resolution: 1.25dppx) {
  .platform-web .card.manyplace-panel-glass {
    background:
      linear-gradient(158deg, var(--panel-tint-a), var(--panel-tint-b)) padding-box,
      var(--panel-rim) border-box;
  }
}


/* One identity grid: compact artwork centres under the portrait, while the
   copy shares the name's left edge. Keep divider insets matched to actions. */
.card .card__watching:has(.activity-inline) {
  padding: 10px 6px 0;
}
.card .activity-inline .activity-main {
  gap: var(--card-identity-gap);
  align-items: center;
}
.card .activity-inline .activity-art {
  width: var(--card-identity-column);
}
.personal-mute-dialog__room {
  margin-top: 19px;
  margin-bottom: 0;
}

.personal-mute-dialog__conversation-reveal {
  max-height: 72px;
  margin-top: 15px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    max-height 180ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 130ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.personal-mute-dialog__conversation-reveal[aria-hidden='true'] {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    max-height 180ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 180ms;
}

.personal-mute-dialog__conversation {
  justify-content: flex-start;
  min-height: 54px;
  padding: 9px 11px;
}

.personal-mute-dialog__conversation-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.personal-mute-dialog__conversation-copy strong {
  color: inherit;
  font: 500 12px/1.3 var(--font-ui);
}

.personal-mute-dialog__conversation-copy span {
  color: rgba(235, 226, 216, 0.42);
  font: 400 10.5px/1.35 var(--font-ui);
}

.personal-mute-dialog__conversation:has(input:checked)
  .personal-mute-dialog__conversation-copy span {
  color: rgba(242, 231, 217, 0.58);
}

.personal-mute-dialog__save {
  border-color: rgba(226, 194, 151, 0.28) !important;
  background: rgba(181, 137, 83, 0.2);
  color: rgba(255, 239, 217, 0.92);
}

.personal-mute-dialog__save:hover:not(:disabled) {
  border-color: rgba(234, 202, 159, 0.42) !important;
  background: rgba(190, 144, 87, 0.3);
  color: rgba(255, 246, 233, 0.98);
}

.personal-mute-dialog__cancel {
  margin-right: 0;
}

.profile-panel__muted-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.profile-panel__muted-copy strong {
  overflow: hidden;
  color: rgba(246, 240, 233, 0.86);
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-panel__muted-copy span {
  color: rgba(230, 223, 214, 0.43);
  font-size: 10.5px;
  line-height: 1.4;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 1024px) {
  .personal-mute-dialog__room {
    margin-top: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .personal-mute-dialog__conversation-reveal,
  .personal-mute-dialog__conversation-reveal[aria-hidden='true'] {
    transition: none;
    transform: none;
  }
}