:root {
  --bg: #ffffff; --surface: #f5f6f8; --ink: #16181d; --muted: #5b616e; --accent: #0b57d0; --line: #e2e5ea;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111317; --surface: #1b1e24; --ink: #eef0f3; --muted: #a6adba; --accent: #8ab4f8; --line: #2a2e36; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bar {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px; min-height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.note { margin: 0; flex: 1; color: var(--muted); }
.note strong { color: var(--ink); }
.note .short { display: none; }
.back {
  white-space: nowrap; padding: 8px 18px; border-radius: 999px; background: var(--accent); color: var(--bg);
  text-decoration: none; font-weight: 600;
}
main { position: relative; flex: 1; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--muted); }
iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
@media (max-width: 720px) {
  .note .long { display: none; }
  .note .short { display: inline; }
  .back { padding: 6px 14px; }
}