/* Selector overlay: transparent (or a frozen screen), dimming, thin gray
   guides, monospace tags. */
app {
  width: 100%; height: 100%; background-color: transparent;
  color: #e6edf3; font-family: monospace; font-size: 1rem;
}
stack.scene { width: 100%; height: 100%; }
box.backdrop { overflow: hidden; }
box.backdrop image { width: 100%; height: 100%; }
box.dim { background-color: rgba(0, 0, 0, 0.5); }
box.edge { background-color: #4fd1a5; }
/* Mode colors: cyan for screenshots, coral red for recordings. Amber is kept
   for warnings. */
box.edge.shot { background-color: #38bdf8; }
box.edge.rec { background-color: #ef5350; }
box.grid { background-color: #808080; }
box.tag {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  box-sizing: border-box; padding: 0.25em 0.625em; overflow: hidden;
  background-color: rgba(13, 16, 20, 0.92); color: #e6edf3;
  font-family: monospace; font-size: 1rem; text-align: center;
}
/* Mode and target chips: the active one takes the mode color. */
box.chip.idle { color: #8b949e; }
box.chip.off { color: #484f58; }
box.chip.shot { background-color: #38bdf8; color: #0d1014; }
box.chip.rec { background-color: #ef5350; color: #0d1014; }
/* Centered toast confirming a key, faded out by the o* steps. */
box.toast {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  box-sizing: border-box; overflow: hidden;
  background-color: rgba(13, 16, 20, 0.92); color: #e6edf3;
  font-family: monospace; font-size: 1.5rem; text-align: center;
}
box.toast.warn { color: #f5a524; border: 2px solid #f5a524; }
box.o0 { opacity: 1; }
box.o1 { opacity: 0.9; }
box.o2 { opacity: 0.8; }
box.o3 { opacity: 0.7; }
box.o4 { opacity: 0.6; }
box.o5 { opacity: 0.5; }
box.o6 { opacity: 0.4; }
box.o7 { opacity: 0.3; }
box.o8 { opacity: 0.2; }
box.o9 { opacity: 0.1; }