/*
 * Editorial Broadcast theme
 *
 * styles.css remains the behavioral skin for every runtime state emitted by
 * app.js. This layer owns brand, typography and responsive composition so a
 * future media-state fix does not need to disturb the visual system again.
 * The generated archive artwork is decorative and is never mounted behind a
 * live video tile; this keeps stream contrast and decoder surfaces untouched.
 */

@font-face {
  font-family: "Rajdhani";
  src: url("vendor/rajdhani-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("vendor/rajdhani-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg-0: #090a08;
  --bg-1: #0d0e0c;
  --surface-1: #121310;
  --surface-2: #191a16;
  --surface-3: #22241e;
  --ink-strong: #f2f0e7;
  --ink: #d9d7ce;
  --muted: #97998f;
  --faint: #62655d;
  --live: #ff5a47;
  --signal: #58d6c6;
  --warning: #f0c851;
  --info: #85a9c7;
  --focus: #e4ff48;
  --accent: #d8f53c;
  --accent-soft: rgba(216, 245, 60, 0.13);
  --paper: #f2f0e7;
  --line: rgba(242, 240, 231, 0.12);
  --line-strong: rgba(242, 240, 231, 0.28);
  --shadow-overlay: 0 24px 72px rgba(0, 0, 0, 0.58);
  --font-display: "Rajdhani", "IBM Plex Sans Condensed", sans-serif;
  --font-ui: "IBM Plex Sans Condensed", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --topbar-height: 72px;
  --mobile-nav-height: 62px;
}

html,
body {
  background: var(--bg-0);
}

body {
  color: var(--ink);
  font-family: var(--font-ui);
}

.ambient-shell {
  background: var(--bg-0);
}

.ambient-shell::after {
  opacity: 0;
}

h1,
h2,
h3,
button,
.meter-text,
.member-name {
  font-family: var(--font-ui);
}

.brand-copy h1,
.entry-art-caption strong,
.room-copy h2,
.connection-pill,
.view-toggle button,
.segmented button,
.live-badge,
.owner-badge,
.self-badge {
  font-family: var(--font-display);
}

.eyebrow,
.meter-text,
.entry-index,
.entry-art-caption,
.tile-meta,
.tile-stats,
.system-message,
.time-separator,
.inspector-copy strong,
.meter-unit {
  font-family: var(--font-mono);
}

.eyebrow {
  color: var(--accent);
  font-size: 9px;
  line-height: 1.35;
}

button,
input,
.member-item,
.message-bubble,
.stage-toolbar,
.control-bar,
.share-modal,
.toast {
  border-radius: 0;
}

input {
  height: 46px;
  border-color: var(--line);
  color: var(--ink-strong);
  background: rgba(9, 10, 8, 0.82);
}

input:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-1);
}

input:focus-visible,
button:focus-visible,
.video-tile:focus-visible,
.switch-row:focus-within {
  outline-color: var(--accent);
}

.app-shell {
  min-height: 620px;
  padding: 0;
}

.topbar {
  grid-template-columns: minmax(290px, 380px) minmax(280px, 1fr) auto;
  gap: 24px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(9, 10, 8, 0.98);
}

.signal-spine {
  width: 4px;
  background: var(--faint);
}

body[data-connection="online"] .signal-spine {
  background: var(--signal);
  box-shadow: none;
}

.brand-block {
  gap: 14px;
  padding-left: 22px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border: 0;
  color: var(--bg-0);
  background: var(--paper);
}

.brand-mark::after {
  width: 14px;
  height: 14px;
  background: var(--accent);
}

.brand-mark b {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}

.brand-mark i {
  color: var(--bg-0);
  font-family: var(--font-mono);
}

.brand-copy .eyebrow {
  margin-bottom: 1px;
  color: var(--signal);
}

.brand-copy h1 {
  font-size: 29px;
  font-weight: 700;
  line-height: 0.9;
}

.room-status {
  gap: 14px;
}

.room-copy h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.room-copy p {
  margin-top: 4px;
  font-size: 11px;
}

.connection-pill {
  min-width: 88px;
  height: 36px;
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.connection-pill[data-state="online"],
.connection-pill[data-state="在线"] {
  border-color: var(--signal);
  color: var(--signal);
  background: rgba(88, 214, 198, 0.06);
}

.connection-pill[data-state="offline"],
.connection-pill[data-state="error"],
.connection-pill[data-state="离线"],
.connection-pill[data-state="连接异常"] {
  border-color: rgba(255, 90, 71, 0.5);
  color: #ff8a7a;
}

.top-actions {
  padding-right: 18px;
}

.icon-button {
  width: 44px;
  min-width: 44px;
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

.icon-button:not(:disabled):hover {
  color: var(--bg-0);
  background: var(--accent);
  border-color: var(--accent);
}

.entry-panel,
.workspace {
  border: 0;
  background: var(--bg-0);
}

.entry-panel {
  position: relative;
  display: block;
  isolation: isolate;
}

.entry-visual {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #050604;
}

.entry-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  background: rgba(0, 0, 0, 0.16);
}

.entry-visual::after {
  display: none;
}

.entry-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  animation: archive-image-in 720ms var(--ease-enter) both;
}

.entry-index {
  left: 28px;
  bottom: 24px;
  z-index: 2;
  color: rgba(242, 240, 231, 0.65);
  font-size: 9px;
}

.entry-art-caption {
  position: absolute;
  left: clamp(28px, 4vw, 72px);
  top: clamp(30px, 7vh, 72px);
  z-index: 2;
  width: min(360px, 42vw);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 16px;
  color: var(--paper);
  animation: archive-copy-in 520ms 120ms var(--ease-enter) both;
}

.entry-art-caption span,
.entry-art-caption small {
  color: var(--paper);
  font-size: 9px;
}

.entry-art-caption span {
  align-self: start;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
}

.entry-art-caption strong {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
  color: var(--paper);
  font-size: clamp(88px, 11vw, 168px);
  font-weight: 700;
  line-height: 0.68;
}

.entry-art-caption small {
  grid-column: 1;
  grid-row: 2;
  padding-top: 10px;
  color: var(--muted);
}

.join-terminal {
  position: absolute;
  top: 50%;
  right: clamp(32px, 6vw, 112px);
  z-index: 3;
  width: min(430px, calc(100% - 64px));
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 38px 40px 42px;
  border: 0;
  border-left: 4px solid var(--accent);
  background: rgba(9, 10, 8, 0.92);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(18px) brightness(70%);
  transform: translateY(-50%);
  animation: join-terminal-in 440ms 80ms var(--ease-enter) both;
}

.join-copy {
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.join-copy h2 {
  font-size: 32px;
  line-height: 1.1;
}

.join-copy > p:last-child {
  color: var(--muted);
  font-size: 12px;
}

.field-label {
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.primary-button {
  min-width: 100px;
  color: var(--bg-0);
  background: var(--accent);
  border-color: var(--accent);
}

.primary-button:not(:disabled):hover {
  color: var(--paper);
  background: transparent;
  border-color: var(--accent);
}

.join-button {
  min-width: 174px;
  min-height: 48px;
}

.danger-button {
  color: #ff9f91;
  background: rgba(255, 90, 71, 0.04);
  border-color: rgba(255, 90, 71, 0.42);
}

.workspace {
  grid-template-columns: 208px minmax(0, 1fr) 300px;
}

.side-panel,
.chat-panel {
  background: #0c0d0b;
}

.side-panel {
  border-right: 1px solid var(--line-strong);
}

.panel-section {
  padding: 0;
}

.section-head {
  min-height: 70px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  margin-top: 3px;
  font-size: 18px;
}

.meter-text {
  color: var(--faint);
  font-size: 9px;
}

.member-list {
  gap: 0;
  padding: 0;
}

.member-item {
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.member-item:hover {
  background: rgba(242, 240, 231, 0.035);
}

.member-item.self {
  border-color: var(--line);
  background: var(--accent-soft);
}

.member-item.owner::after {
  width: 16px;
  height: 16px;
  background: var(--accent);
}

.member-item.streaming {
  border-color: rgba(255, 90, 71, 0.35);
  background: rgba(255, 90, 71, 0.045);
}

.avatar {
  width: 44px;
  height: 44px;
  border-color: var(--line-strong);
  border-bottom-width: 3px;
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 15px;
}

.member-title-row {
  gap: 5px;
}

.member-name {
  font-size: 14px;
}

.member-sub {
  font-size: 10px;
  line-height: 1.35;
}

.member-badges {
  gap: 3px;
}

.self-badge,
.owner-badge,
.live-badge {
  border-radius: 0;
  font-size: 9px;
}

.self-badge {
  border-color: var(--signal);
  color: var(--signal);
}

.owner-badge {
  border-color: var(--accent);
  color: var(--accent);
}

.live-badge {
  color: var(--paper);
  background: var(--live);
}

.member-status {
  background: var(--faint);
}

.stage-panel {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 74px;
  border-right: 1px solid var(--line);
  background: #050604;
}

.stage-panel::before {
  display: none;
}

.stage-panel::after {
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--signal);
  opacity: 0.72;
}

.stage-hud {
  position: relative;
  opacity: 1;
  transform: none;
}

.stage-panel[data-hud-idle="true"] .stage-hud {
  opacity: 1;
}

.stage-toolbar {
  top: auto;
  left: auto;
  right: auto;
  min-height: 0;
  padding: 0 14px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: #0c0d0b;
  backdrop-filter: none;
}

.stage-heading {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
}

.stage-heading h2 {
  font-size: 19px;
}

.stage-heading > p:last-child {
  color: var(--faint);
  font-size: 10px;
}

.view-toggle,
.segmented {
  height: 40px;
  padding: 3px;
  border-color: var(--line);
  background: #070806;
}

.view-toggle {
  grid-template-columns: repeat(2, minmax(74px, 1fr));
}

.view-toggle button,
.segmented button {
  min-height: 32px;
  height: 32px;
  color: var(--muted);
  font-weight: 600;
}

.view-toggle button.active,
.segmented button.active {
  color: var(--bg-0);
  background: var(--paper);
}

.view-toggle button.active {
  background: var(--accent);
}

.video-grid {
  position: relative;
  inset: auto;
  padding: 10px 12px;
  background: #030402;
}

.stage-layout {
  position: relative;
  z-index: 2;
}

.focus-layout,
.grid-layout {
  gap: 10px;
}

.thumbnail-rail {
  grid-auto-columns: minmax(190px, 230px);
  gap: 10px;
}

.video-tile {
  border-color: rgba(242, 240, 231, 0.18);
  background: #000;
}

.video-tile:hover,
.video-tile:focus-visible,
.video-tile.active {
  border-color: var(--accent);
}

.video-tile:hover::before,
.video-tile:hover::after,
.video-tile:focus-visible::before,
.video-tile:focus-visible::after,
.video-tile.active::before,
.video-tile.active::after {
  border-color: var(--accent);
}

.video-tile.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.pending-video {
  background: #080906;
}

.tile-live {
  border-radius: 0;
}

.video-tile:not(.waiting-frame):not(.pending) .tile-live {
  color: #fff;
  background: var(--live);
}

.tile-label,
.tile-meta,
.tile-stats,
.tile-audio-button {
  border-radius: 0;
  background: rgba(9, 10, 8, 0.9);
}

.tile-audio-button:hover,
.tile-audio-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.empty-state {
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/signal-archive.jpg") 33% center / cover no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.empty-state > * {
  position: relative;
  z-index: 1;
}

.empty-state h2 {
  font-size: 20px;
}

.broadcast-aperture {
  width: 72px;
  height: 72px;
}

.aperture-ring {
  border-color: var(--line-strong);
}

.ring-a {
  border-top-color: var(--accent);
}

.ring-b {
  border-bottom-color: var(--signal);
}

.ring-c {
  border-right-color: var(--paper);
}

.aperture-core {
  width: 8px;
  height: 8px;
  background: var(--live);
}

.control-bar {
  left: auto;
  right: auto;
  bottom: auto;
  min-height: 0;
  grid-template-columns: auto minmax(210px, 1fr) minmax(160px, auto) auto;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: #0c0d0b;
  backdrop-filter: none;
}

.stream-actions button {
  min-height: 44px;
}

.switch-row {
  min-height: 44px;
}

.switch-track {
  border-color: var(--line-strong);
  background: var(--bg-0);
}

.switch-row input:checked + .switch-track {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.switch-row input:checked + .switch-track span {
  background: var(--accent);
}

.inspector-button {
  min-height: 44px;
  background: transparent;
}

.inspector-button:hover,
body[data-settings-open="true"] .inspector-button {
  color: var(--ink-strong);
  border-color: var(--accent);
}

.control-inspector {
  border-color: var(--line-strong);
  background: rgba(12, 13, 11, 0.98);
}

input[type="range"] {
  accent-color: var(--accent);
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.chat-panel {
  border-left: 0;
}

.chat-head {
  min-height: 70px;
  padding: 16px 16px 14px;
}

.message-list {
  padding: 16px 15px 22px;
}

.message {
  margin-top: 14px;
}

.message.grouped {
  margin-top: 5px;
}

.message-meta strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.message-meta span {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 8px;
}

.message-bubble {
  max-width: 92%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface-1);
  line-height: 1.55;
}

.message.mine .message-bubble {
  border-color: rgba(216, 245, 60, 0.34);
  color: var(--paper);
  background: rgba(216, 245, 60, 0.09);
}

.message:hover .message-bubble {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.system-message {
  color: var(--warning);
}

.system-message::before,
.system-message::after {
  background: var(--warning);
}

.time-separator {
  color: var(--faint);
}

.chat-form {
  min-height: 70px;
  padding: 12px 12px;
  border-top-color: var(--line-strong);
  background: #0c0d0b;
}

.chat-form input {
  height: 46px;
}

.send-button {
  min-width: 46px;
  width: 46px;
  height: 46px;
}

.unread-button {
  color: var(--bg-0);
  background: var(--accent);
  border-color: var(--accent);
}

.share-modal {
  border-color: var(--line-strong);
  background: #10110e;
}

.modal-spine {
  background: var(--accent);
}

.share-summary,
.dialog-section,
.dialog-switch {
  border-radius: 0;
}

.summary-icon {
  color: var(--bg-0);
  background: var(--accent);
}

.toast {
  border-color: var(--line-strong);
  background: rgba(12, 13, 11, 0.98);
}

.toast[data-type="success"] {
  border-left-color: var(--signal);
}

.update-banner {
  background: rgba(12, 13, 11, 0.98);
}

.mobile-switcher button.active {
  color: var(--bg-0);
  background: var(--accent);
}

@keyframes archive-image-in {
  from {
    opacity: 0;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes archive-copy-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes join-terminal-in {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 16px));
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@media (min-width: 1720px) {
  .workspace {
    grid-template-columns: 232px minmax(0, 1fr) 324px;
  }

  .stage-panel {
    grid-template-rows: 68px minmax(0, 1fr) 78px;
  }

  .entry-art-caption {
    width: min(440px, 40vw);
  }
}

@media (max-width: 1199px) and (min-width: 900px) {
  .workspace {
    grid-template-columns: 78px minmax(0, 1fr) 274px;
  }

  .side-panel .panel-section {
    padding: 0;
  }

  .side-panel .section-head > div:first-child,
  .side-panel .meter-text,
  .side-panel .member-copy,
  .side-panel .member-status,
  .side-panel .live-badge {
    display: none;
  }

  .side-panel .section-head {
    justify-content: center;
    padding-inline: 8px;
  }

  .member-item {
    min-height: 64px;
    grid-template-columns: 44px;
    justify-content: center;
    padding: 10px;
  }

  .control-bar {
    grid-template-columns: auto minmax(168px, 1fr) auto;
  }

  .audio-switch {
    display: none;
  }

  .join-terminal {
    right: 32px;
  }
}

@media (max-width: 899px) {
  :root {
    --topbar-height: 58px;
  }

  /* The bottom navigator is fixed. Reserve its safe-area height in the grid so
   * the second control row remains visible instead of sitting underneath it. */
  .app-shell {
    padding: 0 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
  }

  .brand-block {
    padding-left: 12px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .brand-mark b {
    font-size: 17px;
  }

  .room-status {
    gap: 9px;
  }

  .connection-pill {
    min-width: 38px;
    width: 38px;
    height: 38px;
  }

  .room-copy h2 {
    font-size: 18px;
  }

  .top-actions {
    padding-right: 8px;
  }

  .entry-visual {
    opacity: 1;
  }

  .entry-visual::before {
    background: rgba(0, 0, 0, 0.38);
  }

  .entry-art {
    object-position: 35% center;
  }

  .entry-art-caption {
    left: 18px;
    top: 28px;
    width: min(280px, 74vw);
  }

  .entry-art-caption strong {
    font-size: clamp(72px, 24vw, 112px);
  }

  .entry-index {
    display: none;
  }

  .join-terminal {
    top: auto;
    right: auto;
    bottom: 22px;
    left: 16px;
    width: calc(100% - 32px);
    padding: 24px 22px 26px;
    border-left-width: 3px;
    transform: none;
    animation-name: mobile-terminal-in;
  }

  .join-copy h2 {
    font-size: 27px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .stage-panel {
    grid-template-rows: 54px minmax(0, 1fr) 116px;
    border-right: 0;
  }

  .stage-toolbar {
    top: auto;
    left: auto;
    right: auto;
    padding: 0 8px 0 12px;
  }

  .stage-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .stage-heading > p:last-child {
    display: none;
  }

  .view-toggle {
    grid-template-columns: repeat(2, 42px);
  }

  .view-toggle button {
    width: 42px;
    padding: 0;
  }

  .video-grid {
    padding: 7px;
  }

  .control-bar {
    left: auto;
    right: auto;
    bottom: auto;
    min-height: 0;
    grid-template-columns: minmax(130px, 1fr) minmax(145px, 1fr) 44px;
    grid-template-rows: 46px 46px;
    gap: 6px;
    padding: 8px 7px;
  }

  .stream-actions {
    grid-column: 1;
    grid-row: 1;
  }

  .quality-group {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .audio-switch {
    grid-column: 1 / 3;
    grid-row: 2;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--surface-1);
  }

  .inspector-button {
    grid-column: 3;
    grid-row: 2;
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .drawer {
    border-color: var(--line-strong);
    background: #0c0d0b;
  }

  .panel-scrim {
    background: rgba(0, 0, 0, 0.62);
  }

  .mobile-switcher {
    border-top-color: var(--line-strong);
    background: rgba(9, 10, 8, 0.98);
  }

  .mobile-switcher button {
    min-height: 50px;
  }

  .mobile-switcher button.active {
    color: var(--bg-0);
    background: var(--accent);
  }
}

@keyframes mobile-terminal-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  .entry-art-caption {
    top: 18px;
  }

  .entry-art-caption span,
  .entry-art-caption small {
    font-size: 8px;
  }

  .join-terminal {
    gap: 14px;
    bottom: 14px;
    padding: 20px 18px 22px;
  }

  .join-copy h2 {
    font-size: 25px;
  }

  .field-label {
    gap: 5px;
  }

  input {
    height: 44px;
  }

  .stage-heading .eyebrow {
    display: none;
  }

  .stage-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-heading h2 {
    font-size: 17px;
  }

  .segmented button {
    padding-inline: 6px;
    font-size: 11px;
  }

  .message-bubble {
    max-width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 499px) and (max-width: 899px) {
  .stage-panel {
    grid-template-rows: 48px minmax(0, 1fr) 54px;
  }

  .control-bar {
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    grid-template-rows: 40px;
    padding-block: 6px;
  }

  .stream-actions,
  .quality-group,
  .audio-switch,
  .inspector-button {
    grid-column: auto;
    grid-row: 1;
  }

  .video-grid {
    padding: 5px;
  }

  .join-terminal {
    top: 50%;
    right: 72px;
    bottom: auto;
    left: auto;
    width: min(390px, calc(100% - 110px));
    padding: 16px 20px;
    transform: translateY(-50%);
    animation: none;
  }

  .join-copy h2 {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-art,
  .entry-art-caption,
  .join-terminal {
    animation: none;
  }
}