/* Shared spaces inherit the same private shell; their contents have their own
   typography and atmosphere, not another Connected dashboard inside it. */
.cosmos-spaces-page { --space-accent: #96cfe5; --connected-ink: #eaeef1; --connected-muted: #a5b5c2; --connected-line: #293641; --connected-gold: var(--space-accent); --connected-cyan: #96cfe5; }
.cosmos-spaces-page--capsules { --space-accent: #e2be88; }
.cosmos-spaces-page--stories { --space-accent: #dec4b0; }
.cosmos-spaces { max-width: 1180px; margin-inline: auto; padding-bottom: 40px; }
.cosmos-spaces button, .cosmos-space-dialog button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--cosmos-line, #28323d); border-radius: 7px; background: #121b25; color: #eaeef1; font: inherit; font-size: 13px; cursor: pointer; transition: border-color 180ms, background 180ms, transform 180ms; }
.cosmos-spaces button:hover, .cosmos-space-dialog button:hover { border-color: var(--space-accent); background: #1a2733; }
.cosmos-spaces button:active, .cosmos-space-dialog button:active { transform: translateY(1px); }
.cosmos-spaces :focus-visible, .cosmos-space-dialog :focus-visible { outline: 2px solid var(--space-accent, #96cfe5); outline-offset: 4px; }
.cosmos-spaces button:disabled, .cosmos-space-dialog button:disabled { opacity: .55; cursor: wait; }
.cosmos-spaces .cosmos-space-primary, .cosmos-space-dialog .cosmos-space-primary { background: var(--space-accent, #96cfe5); border-color: transparent; color: #101820; font-weight: 650; }
.cosmos-spaces__trail { display: flex; align-items: center; gap: 12px; color: #9faeba; font-size: 12px; }
.cosmos-spaces__trail a:hover { color: #f3f4ef; }
.cosmos-spaces__trail .connected-transport { margin-left: auto; }
.cosmos-spaces__intro { position: relative; padding: clamp(32px, 5vw, 72px) 0 36px; }
.cosmos-spaces__mark { display: block; margin-bottom: 22px; color: var(--space-accent); }
.cosmos-spaces__intro h2 { max-width: 840px; margin: 0 0 25px; font-size: clamp(34px, 4.5vw, 68px); line-height: 1.07; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; }
.cosmos-spaces-page--capsules .cosmos-spaces__intro h2 { font-family: Georgia, serif; font-weight: 400; }
.cosmos-spaces__intro > div { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cosmos-spaces__intro p { max-width: 480px; margin: 0; color: #a6b0b9; font-size: 15px; line-height: 1.65; }
.cosmos-spaces__collection { margin-top: 24px; }
.cosmos-spaces__collection > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #2a333d; }
.cosmos-spaces__collection > header button { border: 0; background: transparent; color: #afbac4; }
.cosmos-space-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(130px, 26%); align-items: center; gap: 22px; min-height: 145px; padding: 27px 12px 27px 0; border-bottom: 1px solid #252e38; transition: background 180ms, padding 180ms; }
.cosmos-space-entry:hover { background: #111b2570; padding-left: 10px; }
.cosmos-space-entry__index { color: #7d909f; font: 13px monospace; }
.cosmos-space-entry h3 { margin: 8px 0; color: #f0efea; font-size: clamp(21px, 2.3vw, 30px); font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cosmos-spaces-page--capsules .cosmos-space-entry h3 { font-family: Georgia, serif; }
.cosmos-space-entry .cosmos-label { color: var(--space-accent); font-size: 10px; }
.cosmos-space-entry p { margin: 0; color: #a1adb8; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.cosmos-space-entry__time { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #aab6c1; font-size: 12px; line-height: 1.6; }
.cosmos-space-entry__time svg { flex: 0 0 20px; color: var(--space-accent); }
.cosmos-space-empty { min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 36px 0; }
.cosmos-space-empty > svg { color: var(--space-accent); }
.cosmos-space-empty h3 { margin: 0; font-size: 25px; font-weight: 500; }
.cosmos-space-empty p { margin: 0 0 8px; color: #a2aeb9; line-height: 1.65; }
.cosmos-space-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #36414b; border-radius: 12px; background: #10161e; color: #efefea; box-shadow: 0 30px 100px #000a; }
.cosmos-space-dialog::backdrop { background: #02060bbd; }
.cosmos-space-dialog > header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border-bottom: 1px solid #29333d; background: #10161e; }
.cosmos-space-dialog h2 { margin: 8px 0 0; font-size: 24px; font-weight: 500; }
.cosmos-space-dialog > header button { width: 44px; padding: 0; flex-shrink: 0; }
.cosmos-space-form { display: grid; gap: 22px; padding: 26px 28px; }
.cosmos-space-form > label, .cosmos-form-pair > label { display: grid; gap: 9px; color: #c3cdd6; font-size: 13px; }
.cosmos-space-form input:not([type=checkbox]), .cosmos-space-form select, .cosmos-space-form textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid #34414d; border-radius: 6px; background: #090f16; color: #eff0ed; font: inherit; font-size: 15px; color-scheme: dark; }
.cosmos-space-form textarea { resize: vertical; }
.cosmos-space-form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--space-accent, #96cfe5); }
.cosmos-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cosmos-space-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.cosmos-space-form legend { margin-bottom: 12px; color: #d9e0e5; font-size: 13px; }
.cosmos-permissions label { display: flex; align-items: start; gap: 13px; padding: 15px 0; border-top: 1px solid #29333d; }
.cosmos-permissions strong { display: block; font-size: 14px; font-weight: 500; }
.cosmos-permissions small { display: block; margin-top: 5px; color: #a5b2be; font-size: 12px; line-height: 1.6; }
.cosmos-form-note { margin: -8px 0 0; color: #a5b2be; font-size: 12px; line-height: 1.65; }
.cosmos-assets__search { display: flex; align-items: center; gap: 10px; }
.cosmos-assets__list { max-height: 220px; overflow-y: auto; margin-top: 12px; }
.cosmos-assets__list label { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid #26323e; cursor: pointer; }
.cosmos-assets__list label[hidden] { display: none; }
.cosmos-assets__list label > span:last-child { min-width: 0; }
.cosmos-assets__list strong { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.cosmos-assets__list small { display: block; margin-top: 5px; color: #9aaab7; font-size: 11px; }
.cosmos-assets > p, .cosmos-assets > a { color: #a5b7c6; font-size: 12px; }
.cosmos-space-form footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid #29333d; }
.cosmos-space-form [role=alert] { color: #ffb9ab; font-size: 13px; }
.cosmos-spaces .connected-room, .cosmos-spaces .connected-capsule { min-height: 350px; margin-top: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cosmos-room-heading { display: flex; justify-content: space-between; align-items: start; gap: 30px; padding: 20px 0 30px; }
.cosmos-room-heading h2 { margin: 15px 0; font-size: clamp(32px, 4vw, 56px); line-height: 1.1; font-weight: 500; letter-spacing: -.04em; overflow-wrap: anywhere; }
.cosmos-room-heading p { color: #a8b5c0; font-size: 14px; line-height: 1.7; }
.cosmos-room-facts { display: flex; flex-wrap: wrap; gap: 22px; padding: 21px 0; border-block: 1px solid #2b3640; }
.cosmos-room-facts span { display: grid; gap: 8px; color: #a1b0bc; font-size: 12px; }
.cosmos-room-facts strong { color: #e4ebee; font-size: 15px; font-weight: 500; }
.cosmos-room-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 38px; margin-top: 30px; }
.cosmos-room-body h3 { margin: 0 0 20px; font-size: 22px; font-weight: 500; }
.cosmos-room-body .connected-room-file { padding: 16px 0; border: 0; border-bottom: 1px solid #28323b; border-radius: 0; }
.cosmos-room-body .connected-room-file strong { display: block; overflow-wrap: anywhere; }
.cosmos-room-body .connected-room-file small { display: block; margin-top: 8px; color: #9cabb7; font-size: 12px; }
.cosmos-room-body .connected-room-file a { font-size: 13px; color: #b0d5e6; }
.cosmos-room-body aside { min-width: 0; }
.cosmos-room-body .connected-upload-drop { padding: 24px 18px; border: 1px dashed #475b6b; background: #101b25; border-radius: 8px; }
.cosmos-room-body .connected-upload-drop label { display: grid; gap: 18px; font-size: 13px; color: #bbcad5; }
.cosmos-room-body input[type=file] { width: 100%; font-size: 12px; }
.cosmos-room-body input::file-selector-button { padding: 9px; margin-right: 8px; border: 1px solid #4b6272; border-radius: 4px; background: #1c3040; color: #ecf1f3; }
.cosmos-room-body progress { width: 100%; accent-color: var(--space-accent); }
.cosmos-room-share { margin-top: 25px; padding-top: 22px; border-top: 1px solid #2b3640; }
.cosmos-room-share code { display: block; margin: 15px 0; font-size: 11px; overflow-wrap: anywhere; color: #aec3d1; }
.cosmos-room-share p { color: #a1b3c1; font-size: 12px; line-height: 1.6; }
.cosmos-room-share .connected-share-qr { width: auto; }
.cosmos-room-share .connected-share-qr svg { width: 132px; flex: 0 0 132px; }
.cosmos-spaces .connected-capsule-lock { position: relative; min-height: 460px; padding: 40px 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 90%, #96724018, transparent 70%); border-block: 1px solid #423828; }
.cosmos-spaces .connected-capsule-lock > span { width: 65px; height: 65px; border-color: #8b7558; color: #e4c899; }
.cosmos-spaces .connected-capsule-lock h2 { max-width: 750px; overflow-wrap: anywhere; font-size: clamp(35px, 5vw, 66px); }
.cosmos-spaces .connected-capsule-lock time { color: #dfc4a0; font-size: 15px; }
.cosmos-spaces .connected-capsule-lock p { max-width: 460px; color: #aeb1b2; font-size: 14px; line-height: 1.8; }
.cosmos-spaces .connected-capsule-actions { justify-content: center; }
.cosmos-spaces .connected-capsule.is-opening { animation: cosmos-capsule-open 750ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes cosmos-capsule-open { from { opacity: .3; transform: translateY(12px); filter: brightness(1.2); } to { opacity: 1; transform: none; filter: none; } }
.cosmos-spaces .connected-capsule-grid { grid-template-columns: minmax(0, 1fr) 250px; }
.cosmos-spaces .connected-capsule-grid > section { padding: 22px 0; border: 0; border-radius: 0; background: transparent; }
.cosmos-spaces .connected-capsule-item { border: 0; border-bottom: 1px solid #36342f; border-radius: 0; padding: 18px 0; }
.cosmos-spaces .connected-capsule-item small { display: block; margin-top: 6px; color: #b1ada6; }
.cosmos-spaces .connected-story-player { margin-top: 25px; border: 0; border-radius: 8px; box-shadow: none; min-height: min(740px, calc(100svh - 210px)); background: #03070a; }
.cosmos-spaces .connected-story-meta { bottom: 90px; left: 5%; right: 5%; pointer-events: none; }
.cosmos-spaces .connected-story-meta h2 { font-size: clamp(30px, 4vw, 62px); overflow-wrap: anywhere; }
.cosmos-spaces .connected-story-controls { inset: auto 24px 20px; }
.cosmos-spaces .connected-story-controls button { background: #111a23e8; }
.cosmos-spaces .connected-story-shade { background: linear-gradient(transparent 40%, #02050ae8); }
.cosmos-spaces .connected-story-stage video { height: calc(100% - 72px); align-self: start; }
.cosmos-spaces [data-story-theme=minimal] .connected-story-meta h2 { font-family: inherit; font-size: clamp(25px, 3vw, 45px); }
.cosmos-spaces [data-story-theme=cinema] .connected-story-meta { text-align: center; }
.cosmos-spaces [data-story-theme=memory] .connected-story-meta h2 { font-style: italic; }
.cosmos-spaces [data-story-error] { position: absolute; z-index: 4; top: 24px; left: 24px; right: 24px; padding: 12px; background: #17212bea; color: #f4c6ae; font-size: 13px; }
.cosmos-spaces [hidden], .cosmos-space-dialog [hidden], .cosmos-room-guest [hidden] { display: none !important; }
.cosmos-room-guest { --connected-ink: #acd6e8; --connected-muted: #adbdca; --connected-line: #2c3d4b; background: radial-gradient(ellipse at 50% 0, #12283b70, transparent 65%), #080e15; }
.cosmos-room-guest > section { align-items: start; padding-block: 30px 60px; }
.cosmos-room-guest > section > div { width: min(780px, 100%); padding: 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cosmos-room-guest h1 { max-width: 730px; font-family: inherit; font-size: clamp(38px, 6vw, 76px); line-height: 1.05; letter-spacing: -.05em; overflow-wrap: anywhere; }
.cosmos-room-guest p { color: #adbdca; font-size: 14px; line-height: 1.7; }
.cosmos-guest-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 18px 0; border-block: 1px solid #2c3d4b; color: #afc1d0; font-size: 12px; }
.cosmos-room-guest [data-guest-connection] { font-size: 12px; color: #a7bfd0; }
.cosmos-room-guest form { padding: 24px; border: 1px dashed #40576a; background: #11213150; border-radius: 8px; }
.cosmos-room-guest form label { display: grid; gap: 15px; font-size: 14px; color: #d6e1e9; }
.cosmos-room-guest form input { min-width: 0; width: 100%; box-sizing: border-box; color: #bdcbd6; }
.cosmos-room-guest form button { background: #acd6e8; color: #0c1a24; font: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; }
.cosmos-room-guest form button:disabled { opacity: .5; cursor: not-allowed; }
.cosmos-room-guest progress { width: 100%; accent-color: #acd6e8; }
.cosmos-guest-arrivals { margin-top: 35px; }
.cosmos-guest-arrivals h2 { font-size: 23px; font-weight: 500; }
.cosmos-guest-arrivals .connected-room-file { padding: 18px 0; border: 0; border-bottom: 1px solid #293a48; border-radius: 0; }
.cosmos-guest-arrivals .connected-room-file strong { overflow-wrap: anywhere; }
.cosmos-guest-arrivals .connected-room-file small { display: block; margin-top: 7px; color: #a0b3c3; font-size: 12px; }
.cosmos-guest-arrivals a { color: #badbec; font-size: 13px; }
.cosmos-room-guest [role=alert] { color: #f3b1a3; }
.cosmos-room-guest :focus-visible { outline: 2px solid #b2d9ed; outline-offset: 4px; }
@media (max-width: 760px) {
  .cosmos-spaces__intro > div { align-items: flex-start; flex-direction: column; gap: 24px; }
  .cosmos-space-entry { grid-template-columns: 28px minmax(0, 1fr); gap: 15px; padding-block: 23px; }
  .cosmos-space-entry__time { grid-column: 2; }
  .cosmos-room-heading { flex-direction: column; gap: 12px; }
  .cosmos-room-body { grid-template-columns: 1fr; gap: 28px; }
  .cosmos-room-body aside { grid-row: 1; }
  .cosmos-spaces .connected-capsule-grid { grid-template-columns: 1fr; }
  .cosmos-spaces .connected-story-player { min-height: calc(100svh - 225px); }
  .cosmos-spaces .connected-story-controls { inset: auto 12px 12px; gap: 6px; }
  .cosmos-spaces .connected-story-controls button { padding: 8px; min-width: 44px; }
}
@media (max-width: 420px) {
  .cosmos-space-dialog > header { padding: 20px 16px; }
  .cosmos-space-dialog h2 { font-size: 21px; }
  .cosmos-space-form { padding: 22px 16px; }
  .cosmos-form-pair { grid-template-columns: 1fr; }
  .cosmos-space-form footer { flex-wrap: wrap; }
  .cosmos-spaces__trail { flex-wrap: wrap; gap: 8px; }
  .cosmos-spaces__trail .connected-transport { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos-spaces *, .cosmos-space-dialog * { animation: none !important; transition: none !important; }
}

/* Three spaces, three moods. Their entries always come from the real Cloud API. */
.cosmos-spaces-page {
  background: #0b1117;
}
.cosmos-spaces {
  max-width: 1320px;
  padding: 0 clamp(20px, 3vw, 48px) 80px;
}
.cosmos-spaces__trail {
  padding-top: 25px;
  font-size: .81rem;
}
.cosmos-spaces__intro {
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(50px, 7vw, 110px) clamp(20px, 4vw, 65px);
  margin: 24px calc(-1 * clamp(20px, 3vw, 48px)) 0;
  background: radial-gradient(ellipse at 90% 80%, #35586a30, transparent 53%), #101b22;
}
.cosmos-spaces__intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -10%;
  top: 10%;
  width: 62%;
  height: 72%;
  border-top: 1px solid color-mix(in srgb, var(--space-accent) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--space-accent) 15%, transparent);
  border-radius: 50%;
  transform: rotate(-24deg);
  pointer-events: none;
}
.cosmos-spaces__intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 23%;
  right: 23%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--space-accent);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--space-accent) 12%, transparent), 0 0 30px var(--space-accent);
}
.cosmos-spaces__mark {
  margin-bottom: 28px;
}
.cosmos-spaces__intro h2 {
  max-width: 900px;
  font-size: clamp(3.6rem, 6vw, 7rem);
  line-height: .96;
  letter-spacing: -.063em;
  font-weight: 470;
}
.cosmos-spaces__intro > div {
  max-width: 900px;
}
.cosmos-spaces__intro p {
  color: #c0cbd0;
  font-size: 1rem;
}
.cosmos-spaces .cosmos-space-primary {
  border-radius: 4px;
  padding-inline: 20px;
  font-size: .87rem;
  box-shadow: 0 12px 28px #0003;
}
.cosmos-spaces-page--capsules .cosmos-spaces__intro {
  background: radial-gradient(ellipse at 83% 65%, #77563542, transparent 54%), #181612;
}
.cosmos-spaces-page--capsules .cosmos-spaces__intro h2,
.cosmos-spaces-page--capsules .cosmos-space-entry h3 {
  font-family: var(--cosmos-human, Georgia), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.045em;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro {
  background: #e9e5d9;
  color: #172126;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro h2 {
  max-width: 760px;
  color: #172126;
  font-weight: 520;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro p {
  color: #465259;
}
.cosmos-spaces-page--stories .cosmos-spaces__mark {
  color: #5b6a6c;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro .cosmos-space-primary {
  background: #18252a;
  color: #f5eee4;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro .cosmos-space-primary:hover {
  background: #324346;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro::before {
  width: 37%;
  height: 93%;
  top: 4%;
  right: 9%;
  border: 16px solid #52646b28;
  border-radius: 3px;
  transform: rotate(11deg);
  box-shadow: 20px 20px 80px #283b4033;
}
.cosmos-spaces-page--stories .cosmos-spaces__intro::after {
  background: #657478;
  box-shadow: 0 0 0 9px #65747820;
}
.cosmos-spaces-page--rooms .cosmos-spaces__intro::before {
  border-top-width: 2px;
}
.cosmos-spaces__collection {
  margin-top: 45px;
}
.cosmos-spaces__collection > header {
  padding-bottom: 22px;
}
.cosmos-spaces__collection > header .cosmos-label {
  font-size: .86rem;
  letter-spacing: .03em;
  color: #c6d5d9;
}
.cosmos-space-entry {
  grid-template-columns: 56px minmax(0, 1fr) minmax(160px, 29%);
  min-height: 170px;
  padding-block: 30px;
  border-bottom-color: #b8cdd42d;
  transition: padding-left 180ms ease, background 180ms ease;
}
.cosmos-space-entry:hover,
.cosmos-space-entry:focus-visible {
  background: #a8d2e60a;
  padding-left: 15px;
}
.cosmos-space-entry__index {
  align-self: start;
  padding-top: 8px;
  color: var(--space-accent);
  font: 600 .83rem var(--cosmos-font);
}
.cosmos-space-entry h3 {
  margin: 9px 0;
  font-size: clamp(1.65rem, 2.5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.cosmos-space-entry .cosmos-label {
  font-size: .78rem;
  letter-spacing: .04em;
}
.cosmos-space-entry p,
.cosmos-space-entry__time {
  font-size: .86rem;
}
.cosmos-spaces-page--capsules .cosmos-space-entry__time time {
  color: #e4c590;
  font-family: var(--cosmos-human, Georgia), Georgia, serif;
  font-size: clamp(1.15rem, 1.7vw, 1.75rem);
  line-height: 1.25;
}
.cosmos-spaces-page--stories .cosmos-space-entry {
  min-height: 200px;
  background: linear-gradient(90deg, transparent, #e9e5d908);
}
.cosmos-spaces-page--stories .cosmos-space-entry h3 {
  font-size: clamp(2.3rem, 3.6vw, 4.4rem);
  line-height: .96;
  font-weight: 480;
}
.cosmos-spaces-page--stories .cosmos-space-entry__index {
  color: #e2c4ac;
}
.cosmos-space-empty {
  min-height: 350px;
  padding: 55px clamp(25px, 4vw, 55px);
  background: radial-gradient(ellipse at 87% 85%, color-mix(in srgb, var(--space-accent) 11%, transparent), transparent 60%), #10191f;
}
.cosmos-space-empty h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -.04em;
}
.cosmos-space-empty p {
  max-width: 500px;
  font-size: .96rem;
}
.cosmos-room-heading h2 {
  font-size: clamp(2.8rem, 4.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.cosmos-room-body {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 32%);
}
.cosmos-room-body .connected-upload-drop {
  background: #15242e;
  border-color: #b7d6e65c;
  border-radius: 3px;
}
.cosmos-spaces .connected-capsule-lock {
  min-height: 550px;
  padding: 70px 25px;
  background: radial-gradient(ellipse at 50% 95%, #9d75332d, transparent 67%), #181612;
  border-block-color: #ae895558;
}
.cosmos-spaces .connected-capsule-lock h2 {
  font-family: var(--cosmos-human, Georgia), Georgia, serif;
  font-style: italic;
  font-size: clamp(3.3rem, 6vw, 7rem);
  line-height: .98;
}
.cosmos-spaces .connected-story-player {
  border-radius: 3px;
  background: #050607;
  box-shadow: 0 30px 80px #0007;
}
.cosmos-space-dialog {
  border-radius: 6px;
  border-color: color-mix(in srgb, var(--space-accent, #96cfe5) 45%, transparent);
  background: #111b21;
}
.cosmos-space-dialog > header {
  background: #111b21;
}
@media (max-width: 760px) {
  .cosmos-spaces { padding-inline: 18px; }
  .cosmos-spaces__intro {
    min-height: 375px;
    margin-inline: -18px;
    padding: 50px 25px;
  }
  .cosmos-spaces__intro h2 { font-size: clamp(2.75rem, 9vw, 5rem); }
  .cosmos-spaces__intro::before { width: 80%; right: -32%; opacity: .55; }
  .cosmos-spaces-page--stories .cosmos-spaces__intro::before { width: 50%; right: 4%; opacity: .55; }
  .cosmos-space-entry { grid-template-columns: 34px minmax(0, 1fr); min-height: 135px; gap: 14px; }
  .cosmos-space-entry__time { grid-column: 2; }
  .cosmos-room-body { grid-template-columns: 1fr; }
  .cosmos-spaces .connected-capsule-lock { min-height: 430px; padding: 50px 20px; }
  .cosmos-spaces .connected-capsule-lock h2 { font-size: clamp(2.7rem, 10vw, 5rem); }
}
@media (max-width: 420px) {
  .cosmos-spaces__intro { min-height: 390px; }
  .cosmos-spaces__intro h2 { font-size: 2.7rem; }
  .cosmos-spaces__intro > div { align-items: stretch; }
  .cosmos-spaces__intro .cosmos-space-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmos-space-entry:hover,
  .cosmos-space-entry:focus-visible { padding-left: 0; }
}