html,
body {
  background-color: #fff;
  color: #363636;
  font-family: sans-serif;
  touch-action: pan-y;
}

dt:before {
  content: "";
  display: block;
}

dt {
  font-weight: bold;
  display: inline;
}

dd:before {
  content: " ";
}

dd {
  display: inline;
  margin-inline-start: 0;
}

h1 {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.last-updated-note {
  font-size: smaller;
  margin-block-start: 0;
  opacity: 0.75;
}

.fullscreen {
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

@supports(height: 100dvh) {
  .fullscreen {
    height: 100dvh;
  }
}

#init {
  line-height: 150%;
  margin-top: 1.5em;
  margin: 0 auto;
  max-width: 50em;
  overflow: visible;
  text-align: center;
}

@keyframes logofadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#logo {
  width: 200px;
  height: 200px;
  animation: logofadein 0.5s ease-in-out;
  animation-delay: 0.5;
}

#startup {
  margin: 0 auto;
  max-width: 50em;
}

#screen {
  display: block;
  height: 100%;
  width: 100%;
}

#console {
  background-color: #eee;
  font-family: monospace;
  font-size: small;
  overflow: auto;
  white-space: pre-wrap;
  width: 100%;
}

.update {
  margin-bottom: 2em;
  margin-top: 2em;
}

.update-notice {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 1em;
  white-space: pre-wrap;
}

button {
  border-color: transparent;
  border-radius: 4px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-size: x-large;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  width: 100%;
}

button.primary {
  background-color: #3273dc;
}

button.primary:hover {
  background-color: #276cda;
}

button.primary:active {
  background-color: #2366d1;
}

button.danger {
  background-color: #dc3232;
}

button.danger:hover {
  background-color: #da2727;
}

button.danger:active {
  background-color: #d12323;
}

.console-log {
  display: block;
}

.console-warn {
  color: #aa0000;
  display: block;
}

.console-error {
  color: #ff0000;
  display: block;
}

[aria-busy="true"]::before {
  animation: spinner .75s linear infinite;
  border-radius: 1em;
  border-right-color: transparent !important;
  border: .2em solid currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.28em;
  width: 1em;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

progress {
  display: block;
  height: 4em;
  width: 100%;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
}

.modal-container {
  height: calc(100vh - 2em);
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  max-width: 60em;
}

@supports(height: calc(100dvh - 2em)) {
  .modal-container {
    height: calc(100dvh - 2em);
  }
}

.modal-body {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal-title {
  background-color: #eee;
  align-items: center;
  display: flex;
}

.modal-title>img {
  height: 4em;
  margin-left: 1em;
  margin-right: 1em;
}

.modal-heading {
  flex-grow: 1;
}

.modal-close-button {
  color: initial;
  background: none;
  width: 2em;
  margin: 0;
  padding: 0;
  height: 100%;
  border-radius: 0;
  font-size: 300%;
}

.modal-body>iframe {
  border: none;
  flex-grow: 1;
}

.selector {
  align-items: center;
  display: flex;
  gap: 0.5em;
  margin-bottom: 1em;
}

.selector > select {
  flex-grow: 1;
  height: 2em;
}

#pressure-tester {
  align-items: center;
  border: 1px dashed #999;
  display: flex;
  height: 6em;
  justify-content: center;
  margin-bottom: 1em;
  text-align: center;
  user-select: none;
}

footer {
  color: #aaa;
  font-size: smaller;
  margin-top: 5em;
  text-align: center;
}

footer a {
  color: #555;
}