* { box-sizing: border-box; }
    body {
      margin: 0;
      background: #0a0a0a;
      color: #eee;
      font-family: system-ui, -apple-system, sans-serif;
      height: 100vh;
	/* #I like 3.5 on landscape small screens, width < 400
	#	2 on real computers
	#		or screens greater than >400 */
      font-size: clamp(1rem, 0.82rem + 0.9vw, 1.5rem);
	/*
	#we can do: document.body.style.fontSize = 'clamp(1rem, 0.82rem + 0.9vw, 1.5rem)';
	# or whatever else we want and change it on the fly
	*/
    }
    video {
      width: 100%;
      flex: 1;
      background: #000;
      object-fit: cover;
    }
    .bar {
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      background: #111;
    }
    button {
      flex: 1;
      padding: 14px;
      font-size: 1.05rem;
      font-weight: 600;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }
    #start { background: #16a34a; color: white; }
    #stop  { background: #dc2626; color: white; }
    button:disabled { opacity: 0.4; cursor: not-allowed; }
    #status {
      padding: 8px 16px 4px;
      font-size: 0.9rem;
      opacity: 0.85;
      text-align: center;
    }
    .name-row {
      padding: 0 16px 14px;
      font-size: 0.8rem;
      opacity: 0.7;
      text-align: center;
    }
    .name-row button {
      flex: none;
      background: none;
      color: #60a5fa;
      padding: 2px 6px;
      font-size: 0.8rem;
      font-weight: 500;
      text-decoration: underline;
    }
    .padded-table td,
        .padded-table th {
         padding-inline: 1ch;
         font-family: monospace;
    }
    input[type="submit"] {
     background-color: #4CAF50; /* Green background */
     color: black;              /* black text color */
     border: none;              /* Removes default border */
     padding: 10px 20px;        /* Adds space inside the button */
     cursor: pointer;           /* Changes mouse cursor to a hand */
   }
    input[type="button"] {
     background-color: #4CAF50; /* Green background */
     color: black;              /* black text color */
     border: none;              /* Removes default border */
     padding: 10px 20px;        /* Adds space inside the button */
     cursor: pointer;           /* Changes mouse cursor to a hand */
   }
   input[type="submit"]:disabled,
   input[type="button"]:disabled {
     background-color: #cccccc; /* Gray background */
     color: #666666;            /* Dimmed text */
     cursor: not-allowed;       /* Shows a "not allowed" cursor */
   }
   a {
           color: yellow;
   }
  #terms {
    height: 220px; width: 80%; overflow-y: auto; padding: 1rem;
    border: 1px solid #bbb; border-radius: 6px; line-height: 1.5;
  }
  /* a kludge because ol puts stuff outside the box when it gets wide */
  ol {
    padding-left: 2.5em;
  }