:root {
  color-scheme: dark;
  --bubbles-bg: #05070c;
  --bubbles-line: rgba(178, 205, 229, 0.14);
  --bubbles-ink: #eef6fb;
  --bubbles-muted: #8297aa;
  --bubbles-violet: #c28bff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bubbles-bg); }
body { color: var(--bubbles-ink); background: radial-gradient(circle at 72% 4%, rgba(110, 60, 162, 0.22), transparent 35%), var(--bubbles-bg); }
button, a { font: inherit; }
.bubbles-header { display: flex; align-items: center; gap: 14px; padding: 18px 24px 14px; border-bottom: 1px solid var(--bubbles-line); background: rgba(5, 7, 12, 0.88); }
.bubbles-brand { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(194, 139, 255, 0.56); border-radius: 11px; color: var(--bubbles-violet); font-weight: 900; text-decoration: none; }
.bubbles-header p { margin: 0 0 4px; color: var(--bubbles-violet); font: 800 9px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.12em; }
h1 { margin: 0; font-size: clamp(18px, 2.5vw, 29px); letter-spacing: -0.05em; }
h1 em { color: var(--bubbles-muted); font-style: normal; font-weight: 450; }
.bubbles-actions { display: flex; flex: 1; justify-content: flex-end; gap: 8px; }
.bubbles-live-off { align-self: center; padding: 8px 10px; border: 1px solid rgba(255, 126, 126, 0.34); border-radius: 7px; color: #ff9b9b; background: rgba(82, 20, 27, 0.34); font: 800 9px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.1em; white-space: nowrap; }
.bubbles-actions a { padding: 8px 10px; border: 1px solid var(--bubbles-line); border-radius: 7px; color: #b9a6ca; font: 800 9px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.1em; text-decoration: none; }
.bubbles-actions a:hover, .bubbles-actions a:focus-visible { border-color: var(--bubbles-violet); color: var(--bubbles-violet); outline: none; }
.bubbles-shell { display: flex; flex-direction: column; height: calc(100% - 75px); padding: 14px; gap: 10px; }
.bubbles-notice { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border: 1px solid rgba(194, 139, 255, 0.2); border-radius: 10px; background: rgba(42, 22, 65, 0.42); }
.bubbles-notice span { font-size: 20px; }
.bubbles-notice p { margin: 0; color: var(--bubbles-muted); font-size: 11px; line-height: 1.45; }
.bubbles-notice strong { color: var(--bubbles-ink); }
iframe { width: 100%; flex: 1; min-height: 420px; border: 1px solid var(--bubbles-line); border-radius: 12px; background: #0c1017; }
@media (max-width: 700px) {
  .bubbles-header { align-items: flex-start; flex-wrap: wrap; padding: 14px; }
  .bubbles-actions { justify-content: flex-start; width: 100%; }
  .bubbles-shell { height: calc(100% - 118px); padding: 9px; }
}