styles.css

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

body > * {
  flex-shrink: 0;
}

header {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: 0 solid transparent;
  border-left-width: env(safe-area-inset-left);
  border-right-width: env(safe-area-inset-right);
}

@media (display-mode: window-controls-overlay) {
  header {
    min-height: env(titlebar-area-height);
    background: #445985;
    border-left-width: env(titlebar-area-x);
    border-top-width: env(titlebar-area-y);
    -webkit-app-region: drag;
  }

  header button {
    -webkit-app-region: no-drag;
  }
}

input[type="file"] {
  display: none;
}

textarea {
  margin: 0;
  padding: 8px;
  flex-grow: 1;
  font-size: 13px;
  font-family: ui-monospace, "Noto Sans Mono", "Cousine", monospace;
  line-height: 1.4;
  caret-color: currentColor;
  background: #aaaaaa40;
  border: 0 solid transparent;
  border-left-width: env(safe-area-inset-left);
  border-right-width: env(safe-area-inset-right);
  border-top: 1px solid #80808080;
  border-bottom-width: env(safe-area-inset-bottom);
  border-radius: 0;
  outline: none;
  resize: none;
}

textarea[disabled] {
  opacity: unset;
}

::placeholder {
  color: inherit;
  opacity: 0.55;
  white-space: pre-wrap;
}

[disabled]::placeholder {
  opacity: 0.5;
}

dialog {
  -webkit-user-select: none;
  user-select: none;
}

dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

form {
  display: flex;
  gap: 0.75rem;
  flex-direction: column;
}