:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #000; }
body { min-height: 100svh; }
.viewer-page {
  width: 100%;
  min-height: 100svh;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
}
.connection-status {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: #91a8bd;
  font-size: .78rem;
}
.connection-status > span { width: 8px; height: 8px; border-radius: 50%; background: #ffbd59; }
.connection-status[data-state="connected"] > span,
.connection-status[data-state="listening"] > span { background: #43d39e; }
.connection-status[data-state="error"] > span { background: #ff6b7a; }
.stage {
  flex: 1;
  width: min(100%, 1180px);
  min-width: 0;
  min-height: 0;
  margin: auto;
  padding: clamp(20px, 6vw, 78px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.stage > * { width: 100%; max-width: 100%; }
.source, .translated { overflow-wrap: break-word; word-break: normal; hyphens: none; }
.source { margin: 0 0 clamp(16px, 4vh, 28px); color: #91a8bd; font-size: clamp(1rem, 2.7vw, 1.55rem); line-height: 1.35; }
.source.partial { opacity: .68; }
.translated { margin: 0; font-size: clamp(2rem, 6vw, 5.5rem); font-weight: 770; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.translation-state { min-height: 1.2rem; margin: 18px 0 0; color: #ffbd59; font-size: .82rem; }
.hint { margin: 0; color: #52677b; text-align: center; font-size: .72rem; }
@media (max-width: 680px) {
  .viewer-page { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .stage { padding: 18px 10px; }
  .source { font-size: clamp(.95rem, 4.2vw, 1.18rem); }
  .translated { font-size: clamp(1.65rem, 8.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.025em; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .connection-status { position: absolute; top: 6px; right: 12px; }
  .stage { padding: 14px 24px; }
  .source { margin-bottom: 10px; font-size: clamp(.85rem, 2.4vw, 1.05rem); }
  .translated { font-size: clamp(1.5rem, 5vw, 3rem); }
  .hint { display: none; }
}