:root {
  color-scheme: light dark;
  color: light-dark(#171717, #f5f1e8);
  background: light-dark(#fbfaf6, #141414);
  font-family: "YuKyokasho", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background: light-dark(#fbfaf6, #141414);
}

main {
  min-height: 100dvh;
}

textarea {
  display: block;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: calc(env(safe-area-inset-top) + 1rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);
  border: 0;
  outline: 0;
  resize: none;
  appearance: none;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: clamp(7rem, 42vw, 16rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  word-break: normal;
}

textarea::placeholder {
  color: light-dark(#d8d1c4, #5f5a52);
  opacity: 1;
}