/* Dark background with faint horizontal "layer lines", like a fresh print. System fonts only. */
:root {
  --bg: #15171b;
  --line: #1c1f24;
  --text: #e8e6e1;
  --muted: #8a8f98;
  --accent: #ff6b1a; /* filament orange */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--mono);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    var(--line) 3px,
    var(--line) 4px
  );
}

main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 16px;
}

h1 {
  margin: 0 0 32px;
  font-size: clamp(1.75rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Orange bar before the title, like a purge line. */
h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-bottom: 16px;
  background: var(--accent);
}

p { color: var(--muted); }

a { color: var(--accent); }

/* The camera view: a bed with corner marks. */
.bed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid #2c3037;
}

.bed::before,
.bed::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.bed::before {
  top: -6px;
  left: -6px;
  border-top: 3px solid var(--accent);
  border-left: 3px solid var(--accent);
}

.bed::after {
  right: -6px;
  bottom: -6px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
}

.bed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: var(--muted); /* alt text colour if the stream is down */
  font-size: 0.9rem;
}