.real-echo-atlas {
  box-sizing: border-box;
  width: min(100%, 49rem);
  min-width: 0;
  margin: 1.25rem 0;
  padding: clamp(.75rem, 2vw, 1.25rem);
  border: 1px solid #567f8b;
  border-radius: .9rem;
  background: #102934;
  color: #eef8f8;
  box-shadow: 0 12px 28px #04141d55;
}
.real-echo-atlas * { box-sizing: border-box; }
.real-echo-title { margin: 0 0 .45rem; color: #f2faf9; font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.3; }
.real-echo-boundary { margin: 0 0 .85rem; padding: .6rem .75rem; border-left: 4px solid #edc789; border-radius: .35rem; background: #253a41; color: #f6e6c6; font-size: .88rem; line-height: 1.48; }
.real-echo-picker { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.real-echo-atlas button { padding: .5rem .7rem; border: 1px solid #78a4ad; border-radius: .5rem; background: #1c4651; color: #f3fbfc; font: inherit; font-size: .83rem; font-weight: 700; line-height: 1.3; cursor: pointer; }
.real-echo-atlas button:hover { background: #2b5963; }
.real-echo-atlas button[aria-pressed="true"] { border-color: #c6eedf; background: #385d5a; box-shadow: inset 0 0 0 1px #c6eedf; }
.real-echo-atlas :is(button, input, a):focus-visible { outline: 3px solid #ffda8e; outline-offset: 3px; }
.real-echo-media { width: 100%; min-width: 0; overflow: hidden; border: 1px solid #60808b; border-radius: .55rem; background: #020608; }
.real-echo-video { display: block; width: 100%; max-height: 33rem; aspect-ratio: 13 / 10; object-fit: contain; background: #020608; }
.real-echo-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: .7rem; margin: .65rem 0 .45rem; }
.real-echo-scrub-label { display: grid; min-width: 0; gap: .12rem; color: #d6e7e9; font-size: .77rem; font-weight: 700; }
.real-echo-scrub { display: block; width: 100%; min-width: 0; accent-color: #addcc9; cursor: pointer; }
.real-echo-time { min-width: 6.4rem; padding-bottom: .22rem; color: #d7e7e9; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: right; }
.real-echo-caption { display: grid; gap: .3rem; color: #dcebed; font-size: .82rem; line-height: 1.45; }
.real-echo-clip-title { color: #f2f9f7; font-size: .92rem; }
.real-echo-caption p { margin: 0; }
.real-echo-credit { overflow-wrap: anywhere; }
.real-echo-caption a { color: #b4e4ef; text-underline-offset: .16em; }
.real-echo-status { min-height: 1.3em; color: #c4dce0; }
@media (max-width: 480px) {
  .real-echo-atlas { padding: .65rem; }
  .real-echo-view { flex: 1 1 100%; text-align: left; }
  .real-echo-controls { grid-template-columns: auto minmax(0, 1fr); gap: .45rem; }
  .real-echo-time { grid-column: 1 / -1; justify-self: end; }
}