#studio-connection {
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid #3e5550;
  border-radius: 4px;
  background: #142520;
  color: #80ddb2;
  font: 11px/1.4 Arial, sans-serif;
  letter-spacing: 0.04em;
  pointer-events: none;
}
#studio-connection[data-state="offline"], #studio-connection[data-state="pending"] {
  background: #30260e;
  border-color: #826421;
  color: #ffd374;
}
body.mode-obs #studio-connection, body.mode-obs #sync-status { display: none !important; }
body.mode-obs, body.mode-obs * { cursor: none !important; }
/* A renderer failure must not leave apparently valid frozen time on air.
   This failure-only overlay also applies to OBS, independently of SYNC visibility. */
body.clock-failed #wrapper, body.clock-failed #controlClock { visibility: hidden !important; }
#clock-fault[hidden] { display: none; }
#clock-fault {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; box-sizing: border-box;
  background: #170709; color: #ff6673; text-align: center; font-family: Arial, sans-serif;
}
#clock-fault strong { font-size: clamp(28px, 6vw, 96px); letter-spacing: 0.06em; }
#clock-fault span { font-size: clamp(14px, 2vw, 26px); color: #ffe1e4; }
/* Keep the operator controls usable for correcting the cause of a fault. */
#renderStatusBox { color: #9a1524; white-space: pre-wrap; overflow-wrap: anywhere; }
#studio-links { margin-top: 18px; border-top: 1px solid #444; padding-top: 12px; }
#studio-links strong { font: bold 12px Arial, sans-serif; letter-spacing: 0.1em; }
#studio-links p { font: 12px/1.5 Arial, sans-serif; color: #465362; }
#studio-links a { display: inline-block; margin: 8px 0 5px; color: #006297; }
#studio-links input {
  width: 100%; box-sizing: border-box; font: 11px monospace;
  padding: 7px; border: 1px solid #b9c2cc; border-radius: 4px; background: #fff; color: #172431;
}
.switch:focus-within .slider { outline: 2px solid #0077b6; outline-offset: 3px; }
#about {
  width: min(880px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #46515e;
  border-radius: 12px; background: #20262e; color: #e9edf2;
  box-shadow: 0 24px 80px #0009; font: 14px/1.65 Arial, sans-serif;
}
#about[open] { display: flex; flex-direction: column; }
#about::backdrop { background: #000b; }
.help-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #46515e; flex-shrink: 0; }
.help-eyebrow { color: #9dafbf; letter-spacing: .12em; font-size: 10px; }
#about h1 { margin: 3px 0 0; font-size: 25px; line-height: 1.2; }
#closeHelp { padding: 9px 14px; border: 1px solid #69798a; border-radius: 6px; background: #303d4b; color: #fff; cursor: pointer; white-space: nowrap; }
.help-scroll { padding: 0 24px 24px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.help-mode { color: #9cdfba; background: #183528; padding: 10px 12px; border-radius: 6px; }
.help-nav { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 12px; }
.help-nav a { background: #303c49; border-radius: 5px; padding: 5px 10px; }
#about a { color: #91cfff; overflow-wrap: anywhere; }
#about a:focus-visible, #about button:focus-visible { outline: 2px solid #91cfff; outline-offset: 3px; }
#about section { border-top: 1px solid #3a4551; margin-top: 12px; padding-top: 8px; scroll-margin-top: 12px; }
#about h2 { font-size: 18px; color: #fff; margin: 14px 0 8px; }
#about p { margin: 10px 0; }
#about li { margin: 6px 0; }
#about ul, #about ol { padding-left: 23px; }
#about code, #about kbd { font: 12px/1.5 monospace; background: #111820; padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.help-table-wrap { overflow-x: auto; }
#about table { width: 100%; border-collapse: collapse; text-align: left; }
#about th, #about td { padding: 9px; border-bottom: 1px solid #46515e; vertical-align: top; }
#about th { color: #b7cadb; }
.help-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid #46515e; color: #a0b0bf; font-size: 12px; }
@media (max-width: 600px) {
  .help-header { padding: 14px; gap: 8px; }
  .help-scroll { padding: 0 14px 14px; }
  #about h1 { font-size: 20px; }
}
#studio-preview {
  position: fixed; left: 20px; top: 130px;
  width: calc(100vw - 416px); height: calc(100vh - 200px);
  display: flex; flex-direction: column;
}
#studio-preview > div {
  color: #a1acb6; font: 11px Arial, sans-serif; letter-spacing: 0.12em; padding-bottom: 10px;
}
#studio-preview iframe {
  width: min(100%, calc((100vh - 225px) * 1.777778)); height: auto; aspect-ratio: 16 / 9;
  align-self: center; border: 1px solid #333b44; border-radius: 6px;
  background: #000; pointer-events: none;
}
@media (max-width: 900px) { #studio-preview { display: none; } }
@media (max-width: 600px) {
  body.mode-control #controlClock { top: 10px; left: 12px; }
  body.mode-control .control-panel {
    top: 125px !important; right: 8px !important;
    max-height: calc(100vh - 190px) !important; max-width: calc(100vw - 40px);
  }
}