body.dx {
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--dx-font, var(--font-sans));
  color: var(--dx-text, var(--dx-fg));
  background: transparent;
}

.dx-header .dx-actions {
  min-width: 0;
  flex: 0 1 auto;
}

#sync-label {
  min-width: 0;
  max-width: 34vw;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-header .dong-theme-toggle {
  position: static;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.dx-header .dong-theme-toggle__knob {
  top: 12px;
  left: 3px;
  width: 20px;
  height: 20px;
}

html.dark .dx-header .dong-theme-toggle__knob {
  transform: translateX(18px);
}

.dx-main > * + * {
  margin-top: var(--dx-gap, 12px);
}

.weather-line {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.journal-link {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

#brief-text {
  margin: 0;
  line-height: 1.65;
  font-size: 1.05rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#brief-text:not(.muted)::first-letter {
  font-size: 2.6rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  margin-right: 6px;
}

.muted {
  color: var(--dx-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}

.muted::first-letter {
  font-size: inherit;
  font-weight: inherit;
  float: none;
  line-height: inherit;
  margin-right: 0;
}

.mins {
  display: block;
  font-size: 0.8rem;
  color: var(--dx-muted);
  margin: 0 0 8px;
}

button#play {
  width: 100%;
  min-height: 44px;
  margin: 0 0 14px;
}

button#play:disabled {
  opacity: 0.45;
  cursor: default;
}

#connect {
  position: sticky;
  bottom: 0;
  z-index: 3;
  width: min(720px, calc(100% - 24px));
  margin: 0 auto;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}

#connect[hidden] {
  display: none;
}

#connect-btn {
  width: 100%;
  min-height: 44px;
}

.sun-text {
  margin: 0;
  line-height: 1.45;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--dx-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}