:root {
  color-scheme: dark;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #05070a;
  color: #f4f7fb;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid #2a3442;
  border-radius: 7px;
  background: #141a22;
  color: #f4f7fb;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #2a3442;
  border-radius: 7px;
  background: #0c1118;
  color: #f4f7fb;
  padding: 0 12px;
}

.shell {
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template: 1fr / 1fr;
  background: #05070a;
}

.stage {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  background: #05070a;
}

.screen {
  width: min(100vw, calc(100dvh * var(--device-aspect, 0.5625)));
  height: min(100dvh, calc(100vw / var(--device-aspect, 0.5625)));
  display: block;
  background: #000;
}

.keyboard-sink {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  resize: none;
  pointer-events: none;
}

.traffic {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: none;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgb(5 7 10 / 72%);
  color: #cbd4e1;
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.runtime-status {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: none;
  max-width: min(360px, calc(100vw - 32px));
  padding: 7px 10px;
  border-radius: 7px;
  background: rgb(5 7 10 / 78%);
  color: #d8e0ec;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.runtime-status.visible {
  display: block;
}

.mobile-controls {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: none;
  gap: 8px;
}

.mobile-controls button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-color: rgb(148 163 184 / 32%);
  background: rgb(5 7 10 / 74%);
  color: #f4f7fb;
  font-size: 20px;
  line-height: 1;
}

.connect {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  display: grid;
  width: min(680px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr) minmax(120px, 170px) auto auto;
  gap: 8px;
  align-items: center;
}

.connect span {
  grid-column: 1 / -1;
  min-height: 20px;
  color: #8c98aa;
  font-size: 13px;
  text-align: center;
}

body.connected .stage {
  display: flex;
}

body.connected .traffic {
  display: block;
}

@media (pointer: coarse) {
  body.connected .mobile-controls {
    display: flex;
  }

  .runtime-status {
    bottom: max(62px, calc(env(safe-area-inset-bottom) + 62px));
  }
}

body.connected .connect {
  display: none;
}

@media (max-width: 760px) {
  .connect {
    grid-template-columns: 1fr;
  }
}