* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #0f172a;
  font-family: "BIZ UDPGothic", "Yu Gothic", sans-serif;
  overflow: hidden;
  --memo-font-scale: 1;
}
#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 32px;
  gap: 18px;
}
#frame {
  width: 94vw;
  max-width: 94vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  overflow: hidden;
}
#teleop {
  font-size: calc(36px * var(--memo-font-scale));
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
}
#memo {
  color: #2563eb;
  font-size: calc(20px * var(--memo-font-scale));
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 94vw;
  max-height: 26vh;
  overflow: hidden;
}
body.vertical #root {
  flex-direction: row;
  gap: 32px;
  align-items: center;
  justify-content: center;
}
body.vertical #teleop,
body.vertical #memo {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.4;
}
body.vertical #frame {
  width: 46vw;
  max-width: 46vw;
  max-height: 90vh;
}
body.vertical #memo {
  max-width: 40vw;
  max-height: 90vh;
}
#safeGuide {
  display: none;
}