html { color-scheme: light dark; }
body {
  background-color: #202124;
  color: #e8eaed;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
  padding: 0;
}
img.logo {
  display: block;
  width: 250px;
  height: auto;
  margin-bottom: 8px;
  margin-left: 10px;
}
pre {
  word-wrap: break-word;
  white-space: pre-wrap;
  margin: 0 0 0 10px;
  font-family: inherit;
}
.row { margin: 0 0 8px 10px; }
.row label { display: block; margin-bottom: 4px; }
input, textarea, button, select {
  background: #202124;
  color: #e8eaed;
  border: 1px solid #5f6368;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 1em;
  border-radius: 0;
}
input { min-width: 280px; }
textarea { width: calc(100% - 30px); min-height: 200px; }
button { cursor: pointer; }
button:hover { border-color: #e8eaed; }
a { color: #8ab4f8; }
a:visited { color: #c58af9; }
.error { color: #f28b82; }
.ok { color: #81c995; }
.muted { color: #9aa0a6; }
table { margin: 8px 0 0 10px; border-collapse: collapse; }
th, td { padding: 4px 12px 4px 0; text-align: left; vertical-align: top; }
.hidden { display: none !important; }
.keybox {
  background: #2d2e30;
  border: 1px solid #5f6368;
  padding: 8px;
  margin: 8px 10px;
  word-break: break-all;
  white-space: pre-wrap;
}
hr { border: 0; border-top: 1px solid #3c4043; margin: 16px 10px; }

*, *::before, *::after { box-sizing: border-box; }
pre { line-height: 1.45; }
h1, h2 { font-family: inherit; font-weight: bold; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row label { display: block; width: 100%; margin-bottom: 0; }
.row label[style*="inline"] { width: auto; }
button + button { margin-left: 0; }
:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, a:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #8ab4f8; outline-offset: 1px;
}
nav.top { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px 10px; }
.actions button { margin: 1px 2px 1px 0; }
.container { max-width: 860px; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px 10px; border-bottom: 1px solid #3c4043; }
nav.tabs button { border: 1px solid #5f6368; border-bottom: none; background: #202124; padding: 6px 16px; }
nav.tabs button.active { border-color: #8ab4f8; color: #8ab4f8; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

@media (max-width: 640px) {
  img.logo { width: 180px; }
  input, textarea { width: 100%; min-width: 0; }
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}