:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #000;
  color: #c8c8c8;
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#view { position: fixed; inset: 0 0 0 min(340px, 32vw); }
#side {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(340px, 32vw);
  padding: 16px 14px;
  border-right: 1px solid #1c1c1c;
  background: #050505;
  overflow: auto;
  z-index: 2;
}
.kicker { margin: 0; color: #666; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
h1 { margin: 6px 0 12px; font-size: 22px; color: #fff; font-weight: 600; }
.status { margin: 0 0 14px; }
.status.ok { color: #9f9; }
.status.wait { color: #cc8; }
.status.err { color: #f88; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 16px; }
dl div { margin: 0; }
dt { color: #666; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
dd { margin: 2px 0 0; color: #eee; }
.row { display: flex; gap: 8px; margin-bottom: 8px; }
button {
  flex: 1; font: inherit; color: #ddd; background: #111;
  border: 1px solid #333; padding: 8px 6px; cursor: pointer;
}
button:hover { border-color: #888; color: #fff; }
button.on { border-color: #fff; color: #fff; background: #1a1a1a; }
.note { color: #666; font-size: 11px; margin-top: 18px; }
.note code { color: #aaa; }
@media (max-width: 720px) {
  #side { width: 100%; height: 42%; bottom: auto; border-right: 0; border-bottom: 1px solid #1c1c1c; }
  #view { inset: 42% 0 0 0; }
}