:root {
  --header-height: 72px;
  --button-width: 128px;
  --button-height: 32px;
}

body {
  margin: 0;
  padding: 0;
}

header {
  position: absolute;
  top: 0;
  left: 0;

  width: 100vw;
  height: var(--header-height);
}

header h1 {
  margin: 0;
  padding: calc(var(--header-height) / 8) 0;

  font-size: calc(var(--header-height) / 2);
  text-align: center;
}

div#editor {
  position: absolute;
  top: var(--header-height);
  left: 0;

  width: 50vw;
  height: calc(100vh - var(--header-height));

  box-sizing: border-box;
  border: 1px solid black;
}

div#viewer {
  position: absolute;
  top: var(--header-height);
  left: 50vw;

  width: 50vw;
  height: calc(100vh - var(--header-height));

  box-sizing: border-box;
  border: 1px solid black;

  overflow: hidden;
}

div#preview-wrapper {
  width: 100%; /* 初期描画用の値 (script で変更される) */
  height: 100%; /* 初期描画用の値 (script で変更される) */
}

iframe#preview {
  width: 100%; /* 初期描画用の値 (script で変更される) */
  height: 100%; /* 初期描画用の値 (script で変更される) */

  pointer-events: none;
}

button {
  width: var(--button-width);
  height: var(--button-height);

  font-size: 16px;
}

button#print {
  position: absolute;
  top: calc(var(--header-height) + 16px);
  left: calc(100vw - var(--button-width) - 16px);
}

button#download {
  position: absolute;
  top: calc(var(--header-height) + 16px);
  left: calc(100vw - var(--button-width) - 16px - var(--button-width) - 8px);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000022;
    color: white;
  }

  div#editor,
  div#viewer {
    border-color: white;
  }

  div#editor {
    scrollbar-color: white #000022;
  }
}