* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  color: #202124;
  font-family: system-ui, sans-serif;
}

#editor {
  display: flex;
  height: 100vh;
  height: 100dvh;
  padding: 64px 28px 88px;
  cursor: text;
}

math-field {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  text-align: left;
  --caret-color: #202124;
  --selection-color: #202124;
  --selection-background-color: #dce5ff;
  --contains-highlight-background-color: transparent;
  --smart-fence-color: #202124;
}

math-field::part(container) {
  align-items: flex-start;
}

math-field::part(content) {
  align-self: flex-start;
}

math-field::part(menu-toggle),
math-field::part(virtual-keyboard-toggle) {
  display: none;
}

#copy {
  position: fixed;
  top: 16px;
  right: 20px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #62666d;
  font: 12px system-ui, sans-serif;
  cursor: pointer;
}

#copy:hover {
  color: #202124;
  border-color: #b7bbc2;
}

#copy:focus-visible {
  outline: 2px solid #4263eb;
  outline-offset: 3px;
}

#hint,
#status {
  position: fixed;
  margin: 0;
  background: #fff;
  color: #777c85;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

#hint {
  left: 32px;
  bottom: 20px;
}

#hint span {
  padding: 0 5px;
}

#status {
  top: 56px;
  right: 20px;
  max-width: min(360px, calc(100vw - 40px));
  text-align: right;
}

@media (max-width: 600px) {
  #editor {
    padding: 60px 12px 80px;
  }

  math-field {
    font-size: 21px;
  }

  #hint {
    left: 16px;
    font-size: 11px;
  }
}