capture-studio.css

:root {
  --c5-lab-bg: #071014;
  --c5-lab-panel: #0c171d;
  --c5-lab-line: #31515c;
  --c5-lab-text: #f3fbff;
  --c5-lab-muted: #9db2bb;
  --c5-lab-cyan: #31d9ff;
  --c5-lab-green: #55f08a;
  --c5-lab-yellow: #ffd75a;
  --c5-lab-red: #ff6f73;
}

.c5-capture-launch {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 35;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--c5-lab-yellow);
  border-radius: 6px;
  background: #141004;
  color: #fff4bd;
  box-shadow: 0 0 20px rgba(255, 215, 90, 0.2);
  font: 900 13px/1 "Courier New", monospace;
  letter-spacing: 0;
  cursor: pointer;
}

.c5-capture-lab {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow: auto;
  background: #03080a;
  color: var(--c5-lab-text);
  font: 14px/1.4 "Courier New", monospace;
}

.c5-capture-lab[data-open="1"] {
  display: block;
}

.c5-lab-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 150px;
}

.c5-lab-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  border-bottom: 2px solid var(--c5-lab-cyan);
  background: #071014;
  padding-right: 58px;
}

.c5-lab-head > div,
.c5-stage-title > div,
.c5-lab-status {
  min-width: 0;
}

.c5-lab-head h1,
.c5-lab-stage h2,
.c5-lab-stage p {
  margin: 0;
}

.c5-lab-head h1 {
  font-size: clamp(20px, 4vw, 34px);
  letter-spacing: 0;
}

.c5-lab-head p {
  color: var(--c5-lab-muted);
}

.c5-icon-button {
  position: fixed;
  top: 12px;
  left: auto !important;
  right: 12px;
  /* Must outrank .c5-monkey-controls (z-index 500) — both share the .c5-capture-lab
     stacking context while the HUD sits in its home parent. */
  z-index: 600;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 1px solid var(--c5-lab-line);
  border-radius: 5px;
  background: #0a1318;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.c5-lab-stage {
  padding: 24px 0;
  border-bottom: 1px solid var(--c5-lab-line);
}

.c5-stage-title {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.c5-stage-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--c5-lab-cyan);
  border-radius: 50%;
  color: var(--c5-lab-cyan);
  font-weight: 900;
}

.c5-stage-title h2 {
  font-size: 20px;
  letter-spacing: 0;
}

.c5-stage-title p {
  color: var(--c5-lab-muted);
}

.c5-source-grid,
.c5-look-grid,
.c5-action-grid,
.c5-export-grid {
  display: grid;
  gap: 10px;
}

.c5-convert-stage {
  padding-bottom: 36px;
}

.c5-convert-button {
  display: grid;
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 103;
  width: min(720px, calc(100% - 20px));
  min-height: 78px;
  transform: translateX(-50%);
  place-content: center;
  gap: 8px;
  border: 3px solid var(--c5-lab-green);
  border-radius: 6px;
  background: #071b12;
  color: #f2fff6;
  box-shadow: 0 0 30px rgba(85, 240, 138, 0.2);
  padding: 18px;
  text-align: center;
  cursor: pointer;
}

.c5-convert-button strong {
  font: 900 clamp(20px, 4vw, 34px)/1 "Courier New", monospace;
}

.c5-convert-button span {
  color: #bdeecb;
  font: 700 13px/1.35 "Courier New", monospace;
}

.c5-compact-actions {
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.c5-other-exports {
  margin-top: 22px;
}

.c5-other-exports .c5-export-grid,
.c5-other-exports .c5-field-grid {
  margin-top: 12px;
}

.c5-cinema-capture-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.c5-cinema-capture-bar button {
  min-width: 0;
  min-height: 56px;
  border-radius: 5px;
  padding: 10px;
  font: 900 13px/1.15 "Courier New", monospace;
  cursor: pointer;
}

.c5-cinema-save {
  border: 3px solid #55f08a;
  background: #071b12;
  color: #eaffef;
  box-shadow: 0 0 22px rgba(85, 240, 138, 0.24);
}

.c5-cinema-options {
  border: 1px solid #31d9ff;
  background: #06141a;
  color: #c9f5ff;
}

.c5-cinema-play,
.c5-cinema-sound {
  border: 1px solid rgba(229, 255, 236, 0.55);
  background: #0b1110;
  color: #e5ffec;
}

.c5-live-ascii-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 820px);
  object-fit: contain;
  background: #020607;
  image-rendering: auto;
}

.c5-preview-media {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 2px;
  height: 2px;
  opacity: 0.001;
  pointer-events: none;
}

.c5-cinema-progress {
  grid-column: 1 / -1;
  min-height: 28px;
  border: 1px solid rgba(49, 217, 255, 0.38);
  border-radius: 4px;
  background: rgba(3, 8, 10, 0.9);
  color: #d7fbff;
  padding: 7px 9px;
  font: 800 11px/1.25 "Courier New", monospace;
  overflow-wrap: anywhere;
}

.c5-static-save-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  border: 1px solid rgba(255, 215, 90, 0.35);
  border-radius: 5px;
  background: rgba(7, 16, 20, 0.92);
  padding: 8px;
}

.c5-static-save-bar strong {
  color: #fff4bd;
  font: 900 12px/1.25 "Courier New", monospace;
  overflow-wrap: anywhere;
}

.c5-static-save-bar button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #31d9ff;
  border-radius: 4px;
  background: #06141a;
  color: #c9f5ff;
  font: 900 11px/1.12 "Courier New", monospace;
  cursor: pointer;
}

.c5-static-save-bar button:first-of-type {
  border-color: #55f08a;
  background: #071b12;
  color: #eaffef;
}

.c5-progress {
  position: fixed;
  left: 50%;
  bottom: 98px;
  z-index: 104;
  display: none;
  width: min(720px, calc(100% - 20px));
  transform: translateX(-50%);
  gap: 8px;
  border: 2px solid #31d9ff;
  border-radius: 6px;
  background: rgba(3, 8, 10, 0.96);
  box-shadow: 0 0 28px rgba(49, 217, 255, 0.18);
  padding: 10px;
  color: #f3fbff;
}

.c5-progress[data-active="1"] {
  display: grid;
}

.c5-progress[data-state="complete"] {
  border-color: #55f08a;
  box-shadow: 0 0 28px rgba(85, 240, 138, 0.2);
}

.c5-progress[data-state="error"] {
  border-color: #ff6f73;
  box-shadow: 0 0 28px rgba(255, 111, 115, 0.2);
}

.c5-progress-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.c5-progress-copy strong,
.c5-progress-copy output {
  color: #fff4bd;
  font: 900 12px/1.1 "Courier New", monospace;
}

.c5-progress-copy span {
  color: #c9f5ff;
  font: 800 12px/1.25 "Courier New", monospace;
  overflow-wrap: anywhere;
}

.c5-progress-track {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(49, 217, 255, 0.45);
  border-radius: 999px;
  background: #03080a;
}

.c5-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55f08a, #31d9ff, #ffd75a, #ff6f73);
  transition: width 180ms linear;
}

.c5-download-link {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 2px solid #55f08a;
  border-radius: 5px;
  background: #071b12;
  color: #eaffef;
  box-shadow: 0 0 20px rgba(85, 240, 138, 0.2);
  font: 900 13px/1.15 "Courier New", monospace;
  text-align: center;
  text-decoration: none;
}

.c5-download-link[hidden] {
  display: none;
}

.c5-export-bucket {
  position: fixed;
  left: 14px;
  bottom: 98px;
  z-index: 104;
  display: none; /* client-side export-bucket panel retired; bucket moves server-side to /data */
  width: min(460px, calc(100% - 28px));
  max-height: min(42vh, 360px);
  overflow: auto;
  gap: 8px;
  border: 2px solid rgba(255, 215, 90, 0.72);
  border-radius: 6px;
  background: rgba(4, 7, 9, 0.96);
  box-shadow: 0 0 28px rgba(255, 215, 90, 0.16);
  color: #f3fbff;
  padding: 10px;
  font: 12px/1.35 "Courier New", monospace;
}

.c5-bucket-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.c5-bucket-head strong {
  display: block;
  color: #fff4bd;
  font: 900 13px/1.1 "Courier New", monospace;
}

.c5-bucket-head span,
.c5-bucket-file span {
  display: block;
  color: #c9f5ff;
  overflow-wrap: anywhere;
}

.c5-bucket-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.c5-bucket-actions button,
.c5-bucket-row button {
  min-height: 34px;
  border: 1px solid #31d9ff;
  border-radius: 4px;
  background: #06141a;
  color: #d7fbff;
  font: 900 10px/1 "Courier New", monospace;
  cursor: pointer;
}

.c5-bucket-list {
  display: grid;
  gap: 7px;
}

.c5-bucket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(49, 217, 255, 0.28);
  border-radius: 5px;
  background: rgba(6, 20, 26, 0.76);
  padding: 8px;
}

.c5-bucket-file {
  min-width: 0;
}

.c5-bucket-file strong {
  display: block;
  color: #eaffef;
  overflow-wrap: anywhere;
}

.c5-bucket-row button {
  border-color: #55f08a;
  background: #071b12;
  color: #eaffef;
}

.c5-progress[data-state="indeterminate"] .c5-progress-track span {
  animation: c5-progress-scan 1.1s ease-in-out infinite alternate;
}

button[aria-busy="true"],
button:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes c5-progress-scan {
  from {
    margin-left: 0%;
    width: 26%;
  }
  to {
    margin-left: 64%;
    width: 36%;
  }
}

@media (max-width: 760px) {
  .c5-export-bucket {
    left: 10px;
    right: 10px;
    bottom: 190px;
    width: auto;
    max-height: 28vh;
  }

  .c5-bucket-head,
  .c5-bucket-row {
    grid-template-columns: 1fr;
  }

  .c5-bucket-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.c5-source-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c5-look-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c5-look-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.c5-look-mode {
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--c5-lab-line);
  border-radius: 5px;
  background: #071014;
  color: var(--c5-lab-text);
  font: 900 13px "Courier New", monospace;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.c5-look-mode[aria-pressed="true"] {
  border: 2px solid var(--c5-lab-yellow);
  background: #1a170a;
  color: #fff4bd;
}

.c5-look-grid[data-mode="color"] [data-group]:not([data-group="color"]),
.c5-look-grid[data-mode="mono"] [data-group]:not([data-group="mono"]),
.c5-look-grid[data-mode="negative"] [data-group]:not([data-group="negative"]) {
  display: none;
}

.c5-look-family {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--c5-lab-line);
  color: var(--c5-lab-cyan);
  font-weight: 900;
  letter-spacing: 0;
}

.c5-look-family:first-child {
  margin-top: 0;
}

.c5-action-grid,
.c5-export-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c5-big-button,
.c5-look-button {
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--c5-lab-line);
  border-radius: 6px;
  background: var(--c5-lab-panel);
  color: var(--c5-lab-text);
  text-align: left;
  cursor: pointer;
}

.c5-big-button:hover,
.c5-big-button:focus-visible,
.c5-look-button:hover,
.c5-look-button:focus-visible {
  border-color: var(--c5-lab-cyan);
  outline: 2px solid rgba(49, 217, 255, 0.18);
}

.c5-big-button strong,
.c5-look-button strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  color: #fff;
}

.c5-big-button span,
.c5-look-button span {
  display: block;
  color: var(--c5-lab-muted);
  font-size: 12px;
}

.c5-big-button.primary {
  border-color: var(--c5-lab-green);
  background: #071c12;
}
.c5-big-button.stop {
  border-color: var(--c5-lab-red);
  background: #1b0a0c;
}

/* Monkey Mode (Code Orangutan) Styles - Ergonomic Compact Version */
.c5-monkey-controls {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  width: min(94vw, 344px);
  max-height: 88vh;
  overflow: hidden;
  background: rgba(2, 14, 8, 0.82);
  border: 1px solid rgba(0, 255, 65, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 255, 65, 0.08);
  transition: opacity 0.25s ease;
  pointer-events: auto;
}

/* Streaming-friendly: fade out of the way when idle, snap to full on touch/hover */
.c5-monkey-controls:not(:hover):not(:focus-within) { opacity: 0.92; }
.c5-monkey-controls:hover, .c5-monkey-controls:focus-within { opacity: 1; }

.c5-monkey-controls.c5-monkey-controls-hidden {
  display: none !important;
  pointer-events: none !important;
}

/* The HUD ships with the `hidden` attribute and JS toggles it (toggleMonkeyMode /
   exitMonkeyMode). `display: flex` above is an author rule, so it silently beat the UA
   `[hidden] { display: none }` and the idle HUD stayed painted over the Capture Studio
   close button. Honour the attribute. */
.c5-monkey-controls[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Belt and braces: if the HUD is ever shown while the studio is open, keep it clear of
   the sticky lab header so the X stays fully exposed. */
.c5-capture-lab .c5-monkey-controls {
  top: 78px;
}

.c5-monkey-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 255, 65, 0.16);
}

.c5-monkey-label {
  font: 900 10px "Courier New", monospace;
  color: #00ff41;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 1px;
}

.c5-monkey-select {
  background: #010804;
  color: #caffd2;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* Fusion depth. Narrow on purpose: it sits on the Monkey bar next to the source
   select, and the bar is real estate an OBS capture pays for. */
.c5-monkey-range {
  width: 84px;
  height: 22px;
  accent-color: #00ff41;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.c5-monkey-rain[data-armed="1"] {
  border-color: rgba(0, 255, 65, 0.85);
  color: #00ff41;
}

.c5-monkey-exit-btn {
  background: rgba(255, 65, 65, 0.2);
  color: #ffb3b3;
  border: 1px solid rgba(255, 65, 65, 0.4);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font: 900 10px "Courier New", monospace;
  transition: all 0.2s ease;
}

.c5-monkey-exit-btn:hover {
  background: rgba(255, 65, 65, 0.4);
  color: #fff;
  border-color: #ff6565;
}

/* Groomed Monkey HUD control panel (full cinematic + capture/export, streaming-tailored) */
.c5-monkey-look-drawer {
  display: flex; gap: 5px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; border-bottom: 1px solid rgba(0, 255, 65, 0.12);
}
.c5-monkey-look-drawer::-webkit-scrollbar { height: 6px; }
.c5-monkey-look-drawer::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.25); border-radius: 4px; }
.c5-monkey-look-btn {
  flex: 0 0 auto; padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  font: 700 10px "Courier New", monospace; letter-spacing: .3px;
  background: rgba(0, 255, 65, 0.06); color: #bfead0; border: 1px solid rgba(0, 255, 65, 0.22);
}
.c5-monkey-look-btn:hover { background: rgba(0, 255, 65, 0.16); color: #eafff0; }
.c5-monkey-look-btn[aria-pressed="true"] { background: rgba(0, 255, 65, 0.28); color: #02140a; border-color: #00ff41; font-weight: 900; }
.c5-monkey-panel { display: flex; flex-direction: column; gap: 10px; padding: 10px; overflow-y: auto; }
.c5-monkey-panel::-webkit-scrollbar { width: 7px; }
.c5-monkey-panel::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.25); border-radius: 4px; }
.c5-monkey-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.c5-monkey-mini {
  padding: 6px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  font: 700 10px "Courier New", monospace; letter-spacing: .4px;
  background: rgba(0, 255, 65, 0.08); color: #cdeed6; border: 1px solid rgba(0, 255, 65, 0.26);
  transition: background .15s ease;
}
.c5-monkey-mini:hover { background: rgba(0, 255, 65, 0.2); color: #fff; }
.c5-monkey-mintoggle { background: rgba(0, 180, 255, 0.14); border-color: rgba(0, 180, 255, 0.4); color: #bfe9ff; }
.c5-monkey-sliders { display: grid; gap: 7px; }
.c5-monkey-slider-row { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 8px; }
.c5-monkey-slider-row label { font: 700 10px "Courier New", monospace; color: #8fe0a6; display: flex; justify-content: space-between; gap: 4px; }
.c5-monkey-slider-row label span { color: #eafff0; }
.c5-monkey-slider-row input[type="range"] { width: 100%; accent-color: #00ff41; height: 18px; }
.c5-monkey-exports { display: flex; flex-wrap: wrap; gap: 5px; }
.c5-monkey-field { font: 700 10px "Courier New", monospace; color: #8fe0a6; display: flex; align-items: center; gap: 5px; }
.c5-monkey-field input, .c5-monkey-field select {
  width: 58px; padding: 4px 5px; border-radius: 5px; font: 700 10px "Courier New", monospace;
  background: #010804; color: #caffd2; border: 1px solid rgba(0, 255, 65, 0.3); outline: none;
}
/* Floating shutter dock: the record control sits ON the video, bottom centre, exactly where
   a camera app puts it. Mounted at body level and independent of the HUD so a take can be
   stopped without opening the config panel over the shot. Above the fullscreen stage (150)
   and the HUD (500) so it is never buried. */
.c5-shutter-dock {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 520;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none; /* only the controls take taps, not the gap around them */
}

.c5-shutter-dock > * { pointer-events: auto; }

.c5-shutter-modes {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.c5-shutter-mode {
  min-height: 30px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: 1.2px;
  cursor: pointer;
}

.c5-shutter-mode[aria-pressed="true"] {
  background: #fff;
  color: #0a0a0a;
}

.c5-shutter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Classic shutter: outer ring, inner core. Core is a red circle to record and a red square
   while recording -- the universal signal, so it needs no label. */
.c5-shutter-btn {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.c5-shutter-btn:active { transform: scale(0.94); }

.c5-shutter-core {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ff3b30;
  transition: width 0.18s ease, height 0.18s ease, border-radius 0.18s ease, background 0.18s ease;
}

.c5-shutter-btn.recording .c5-shutter-core {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.c5-shutter-btn.photo .c5-shutter-core {
  background: #fff;
}

.c5-shutter-side {
  min-width: 54px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: 1px;
  cursor: pointer;
}

/* Green for mic-on: it reads as live/armed, and distinguishes the on state at a glance from
   the muted state without having to read the label. */
.c5-shutter-side[aria-pressed="true"] {
  border-color: #55f08a;
  background: rgba(85, 240, 138, 0.26);
  color: #eaffef;
  box-shadow: 0 0 10px rgba(85, 240, 138, 0.35);
}

/* Balances the mic button so the shutter stays optically centred. */
.c5-shutter-spacer {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

/* Recording indicator. Lives at body level, NOT inside the HUD, because the HUD can be
   hidden mid-take and an invisible recording is a lost recording. Sits above the fullscreen
   stage but below the HUD, and never takes pointer events so it cannot eat the double-tap
   that restores the controls. */
.c5-rec-indicator {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 420;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(255, 111, 115, 0.55);
  border-radius: 999px;
  background: rgba(20, 2, 4, 0.78);
  color: #ffdcdd;
  font: 900 11px/1 "Courier New", monospace;
  letter-spacing: 1px;
  pointer-events: none;
}

.c5-rec-indicator.live { display: flex; }

.c5-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4146;
  box-shadow: 0 0 8px rgba(255, 65, 70, 0.9);
  animation: c5-rec-pulse 1.4s ease-in-out infinite;
}

@keyframes c5-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Shutter confirmation. An ASCII still gives no feedback of its own, so without this a
   capture is indistinguishable from a dead button. */
.c5-shutter-flash {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: #eaffef;
  opacity: 0;
  pointer-events: none;
}

.c5-shutter-flash.fire {
  animation: c5-shutter 260ms ease-out;
}

@keyframes c5-shutter {
  0% { opacity: 0.82; }
  100% { opacity: 0; }
}

/* Streaming mode. HIDE clears every overlay off the stage so an OBS capture is pure ASCII --
   the shutter dock and REC pill would otherwise sit in the middle of the shot, which defeats
   the only reason to hide anything. Double-tap restores them together. The hint itself is
   exempt: it is what teaches the gesture, and it fades on its own in ~2s. */
body.c5-monkey-ui-hidden .c5-shutter-dock,
body.c5-monkey-ui-hidden .c5-rec-indicator {
  display: none !important;
}

/* Transient hint shown when the HUD is hidden, teaching the touch gesture that brings it
   back. Sits above the fullscreen stage (z 150) but below the HUD itself (z 500), and is
   never interactive so it cannot swallow the double-tap it is advertising. */
.c5-monkey-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 400;
  transform: translateX(-50%) translateY(6px);
  max-width: min(90vw, 420px);
  padding: 7px 12px;
  border: 1px solid rgba(0, 255, 65, 0.45);
  border-radius: 999px;
  background: rgba(2, 14, 8, 0.82);
  color: #caffd2;
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: 1.2px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.c5-monkey-hint.live {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Minimized: only the bar shows — for when you are in the zone */
.c5-monkey-collapsed .c5-monkey-look-drawer,
.c5-monkey-collapsed .c5-monkey-panel { display: none !important; }
/* Touch ergonomics on phones */
@media (max-width: 560px) {
  .c5-monkey-controls { top: 8px; right: 8px; left: 8px; width: auto; }
  .c5-monkey-mini, .c5-monkey-look-btn { padding: 9px 12px; font-size: 11px; }
  .c5-monkey-slider-row input[type="range"] { height: 26px; }
}


/* Monkey HUD Enhancements */
.c5-monkey-controls {
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
}

.c5-monkey-look-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  margin-top: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 65, 0.15);
}

.c5-monkey-look-btn {
  background: #010804;
  color: #00ff41;
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 4px;
  font: 900 9px "Courier New", monospace;
  padding: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c5-monkey-look-btn[aria-pressed="true"] {
  border-color: #ffd75a;
  background: #1a170a;
}

.c5-monkey-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 10px;
  padding: 0 4px;
}

.c5-monkey-slider-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c5-monkey-slider-row label {
  font: 900 8px "Courier New", monospace;
  color: rgba(0, 255, 65, 0.7);
  display: flex;
  justify-content: space-between;
}

.c5-monkey-slider-row input {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(0, 255, 65, 0.2);
  border-radius: 2px;
  outline: none;
}

.c5-monkey-slider-row input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: #00ff41;
  border-radius: 50%;
  cursor: pointer;
}

/* Force layout changes when Monkey Mode is active */
/* Do NOT suppress #root. The fullscreen ASCII overlay (.ascii-output, z-150) and the
   HUD (z-500) are DESCENDANTS of #root; display:none/opacity:0/height:0 on #root hid the
   whole subtree (the black screen). Keep #root rendered; the opaque z-150 overlay covers
   the document beneath, and the HUD sits above it. */
body.c5-monkey-mode-active #root {
  position: static;
}

body.c5-monkey-mode-active #root_hidden_placeholder,
body.c5-monkey-mode-active .c5-capture-launch,
body.c5-monkey-mode-active .canvas5-fx-toggle,
body.c5-monkey-mode-active .canvas5-live-dock,
body.c5-monkey-mode-active .c5-cinema-capture-bar {
  display: none !important;
}

body.c5-monkey-mode-active .video-processor .ascii-output {
  position: fixed;
  inset: 0;
  z-index: 150;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: #000;
  overflow: hidden;
}

body.c5-monkey-mode-active .video-processor .render-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.c5-monkey-mode-active .c5-live-ascii-canvas {
  width: 100vw;
  height: 100vh;
  max-height: none;
  object-fit: fill;
}
body.c5-monkey-mode-active > .c5-live-ascii-canvas.c5-monkey-stage-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: fill !important;
  background: #000;
  pointer-events: none;
}

.c5-look-button {
...
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding-left: 48px;
}

.c5-look-button::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 26px;
  border-radius: 4px;
  background: linear-gradient(#ff355e, #ffd75a 35%, #55f08a 67%, #31d9ff);
  filter: var(--look-filter, none);
}

.c5-look-button[aria-pressed="true"] {
  border: 2px solid var(--c5-lab-yellow);
  background: #1a170a;
}

.c5-lab-status {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--c5-lab-green);
  background: #081711;
  overflow-wrap: anywhere;
}

.c5-lab-status::before {
  content: "STATUS";
  color: var(--c5-lab-green);
  font-weight: 900;
}

.c5-lab-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  margin-top: 14px;
}

.c5-calibration {
  min-height: 260px;
  overflow: auto;
  border: 1px solid var(--c5-lab-line);
  background: #020607;
}

.c5-calibration pre {
  min-width: max-content;
  margin: 0;
  padding: 18px;
  font: 700 14px/1.16 "Courier New", monospace;
  white-space: pre;
}

.c5-contract {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.c5-contract th,
.c5-contract td {
  padding: 8px;
  border-bottom: 1px solid var(--c5-lab-line);
  text-align: left;
}

.c5-contract th {
  color: var(--c5-lab-cyan);
}

.c5-contract .yes {
  color: var(--c5-lab-green);
}

.c5-contract .no {
  color: var(--c5-lab-yellow);
}

.c5-advanced {
  margin-top: 14px;
  border-top: 1px solid var(--c5-lab-line);
  padding-top: 12px;
}

.c5-advanced summary {
  min-height: 40px;
  cursor: pointer;
  color: var(--c5-lab-cyan);
  font-weight: 900;
}

.c5-field-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 10px;
}

.c5-look-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c5-lab-line);
}

.c5-look-controls output {
  color: var(--c5-lab-yellow);
  font-weight: 900;
}

.c5-look-controls input[type="range"] {
  width: 100%;
  accent-color: var(--c5-lab-cyan);
}

.c5-field {
  display: grid;
  gap: 4px;
  color: var(--c5-lab-muted);
  font-size: 12px;
}

.c5-field input,
.c5-field select {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid var(--c5-lab-line);
  border-radius: 4px;
  background: #050b0e;
  color: #fff;
  padding: 8px;
  font: 13px "Courier New", monospace;
}

.c5-hidden-input {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body.c5-lab-open {
  overflow: hidden;
}

/* Mobile ASCII fidelity.
   The React bundle styles the DOM text output as `.ascii-output { font-size: 8px;
   line-height: 1 }`. On Chrome for Android that 8px triggers text autosizing ("font
   boosting"), which inflates the computed size against a line-height:1 box and reads as
   double line spacing — a behaviour desktop browsers do not have, which is why the same
   stream renders correctly on a PC. "Courier New" is also absent on Android, so the stack
   falls through to a generic monospace with different vertical metrics.
   This file loads after the bundle (see index.html), so these win at equal specificity.
   The Capture Studio canvas path is unaffected either way: it positions glyphs at fixed
   x*cellW / y*cellH and ignores browser text sizing entirely. */
.ascii-output,
.ascii-output pre {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-family: ui-monospace, "Courier New", "Roboto Mono", "Droid Sans Mono", monospace;
  line-height: 1;
}

@media (max-width: 860px) {
  .c5-source-grid,
  .c5-look-modes,
  .c5-look-grid,
  .c5-action-grid,
  .c5-export-grid,
  .c5-field-grid,
  .c5-look-controls,
  .c5-lab-preview {
    grid-template-columns: 1fr 1fr;
  }

  .c5-lab-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .c5-capture-launch {
    left: 8px;
    top: 8px;
    min-height: 44px;
  }

  .c5-lab-shell {
    width: calc(100% - 20px);
    padding: 8px 0 120px;
  }

  .c5-source-grid,
  .c5-look-grid,
  .c5-action-grid,
  .c5-export-grid,
  .c5-field-grid,
  .c5-look-controls {
    grid-template-columns: 1fr;
  }

  .c5-compact-actions,
  .c5-cinema-capture-bar,
  .c5-static-save-bar,
  .c5-progress-copy {
    grid-template-columns: 1fr;
  }

  .c5-progress {
    bottom: 76px;
    padding: 8px;
  }

  .c5-progress-copy output {
    justify-self: start;
  }

  .c5-look-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c5-look-mode {
    min-height: 44px;
    padding: 5px;
    font-size: 10px;
  }

  .c5-lab-status {
    grid-template-columns: 1fr;
  }

  .c5-big-button,
  .c5-look-button {
    min-height: 64px;
  }

  .c5-convert-button {
    bottom: 6px;
    min-height: 62px;
    padding: 10px;
  }

  .c5-convert-button strong {
    font-size: 16px;
  }

  .c5-convert-button span {
    display: none;
  }

  .c5-icon-button {
    top: 8px;
    right: 8px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
  }
}

/* ---------------------------------------------------------------------------
   Control panel. Nested <details>, so collapse state is the browser's and each
   branch remembers itself. Indentation is by depth class rather than by
   descendant selectors, because these nest arbitrarily deep and a descendant
   rule would compound at every level.

   Scrolls internally and is capped against the viewport: on a phone this tree
   is far taller than the screen, and a panel that pushes the stage off-screen
   is worse than no panel.
   --------------------------------------------------------------------------- */
.c5-ctl-group { margin: 2px 0; }
.c5-ctl-group > summary {
  cursor: pointer;
  padding: 4px 2px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #00ff41;
  list-style: none;
}
.c5-ctl-group > summary::before { content: "\25B8 "; }
.c5-ctl-group[open] > summary::before { content: "\25BE "; }
/* Depth indent. Flat classes, not descendant selectors — these nest arbitrarily
   deep and a descendant rule would multiply the padding at every level. */
.c5-ctl-d1 { padding-left: 8px; }
.c5-ctl-d2 { padding-left: 8px; }
.c5-ctl-d1 > summary { color: #8dffa8; font-size: 10px; }
.c5-ctl-d2 > summary { color: #8dffa8; font-size: 10px; }

.c5-ctl-row {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  align-items: center;
  gap: 6px;
  padding: 3px 2px 3px 10px;
}
.c5-ctl-name { opacity: 0.8; }
.c5-ctl-value { text-align: right; color: #00ff41; font-size: 10px; }
.c5-ctl-input { width: 100%; min-width: 0; accent-color: #00ff41; }
select.c5-ctl-input {
  background: #010804;
  color: #caffd2;
  border: 1px solid rgba(0, 255, 65, 0.35);
  border-radius: 3px;
  font: 10px "Courier New", monospace;
  padding: 2px 4px;
}
.c5-ctl-check { accent-color: #00ff41; justify-self: start; }

.c5-ctl-presets { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px 6px 10px; }
.c5-ctl-presets button {
  background: #010804;
  color: #00ff41;
  border: 1px solid rgba(0, 255, 65, 0.45);
  border-radius: 4px;
  padding: 5px 8px;
  font: 900 10px "Courier New", monospace;
  cursor: pointer;
}
.c5-ctl-presets button:hover { background: rgba(0, 255, 65, 0.18); }

/* The panel is an operator surface, not part of the picture — never let it into
   an OBS capture when the stage is cleared. */
/* One panel, not two. The tree is a section of the HUD, so it inherits the HUD's
   stacking, its hide-for-OBS behaviour and its scrolling — which is why it stopped
   needing a z-index of its own. It was previously a fixed aside at 400, rendering
   underneath the HUD at 500. */
.c5-ctl-root {
  grid-column: 1 / -1;
  margin-top: 6px;
  border-top: 1px solid rgba(0, 255, 65, 0.3);
  padding-top: 4px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c5-ctl-root > summary { color: #ffd75a; }

/* ---------------------------------------------------------------------------
   HUD accordion. The bar stays whole and always visible; everything else is a
   named section, and opening one closes the rest — so the stage is only ever
   covered by the bar plus the single submenu in use.
   --------------------------------------------------------------------------- */
.c5-hud-section { border-top: 1px solid rgba(0, 255, 65, 0.16); }
.c5-hud-section > summary {
  cursor: pointer;
  padding: 8px 10px;
  font: 900 11px "Courier New", monospace;
  letter-spacing: 1.4px;
  color: #00ff41;
  list-style: none;
}
.c5-hud-section > summary::before { content: "\25B8  "; }
.c5-hud-section[open] > summary::before { content: "\25BE  "; }
.c5-hud-section[open] { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }

/* Looks as a wrapped GRID rather than one endless scroll strip. Twenty-one
   buttons at 10px in a 344px panel meant scrolling past labels too small to
   read; two columns at 12px fit the same panel and show eight at a glance. */
.c5-hud-section .c5-monkey-look-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 5px;
  padding: 4px 10px 10px;
  overflow: visible;
  border-bottom: 0;
}
.c5-hud-section .c5-monkey-look-btn {
  flex: initial;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  font: 700 12px "Courier New", monospace;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;      /* CROSS PROCESS wraps rather than being clipped */
  line-height: 1.15;
}