@charset "UTF-8";

@font-face {
  font-display: swap;
  font-family: 'MS Mincho';
  font-style: normal;
  font-weight: 400;
  src:
    local('MS Mincho'),
    url(./msmincho.ttf) format('truetype');
}

@media print {
  .page {
    margin: 0;
  }

  body {
    width: 297mm !important;
  }

  dialog,
  header,
  main,
  .page-number {
    display: none;
  }
}

.error {
  margin: 16px 0 0 16px;
}

.error>div {
  color: rgb(240, 96, 32);
}

.page {
  box-sizing: border-box;
  break-before: page;
  height: 210mm;
  padding: 0;
  width: 297mm;
}

.scrollable-y {
  max-height: 80svh;
  overflow-y: scroll;
}

button,
input[type="file"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}

dialog {
  background-color: rgb(72, 72, 72);
  border: 4px outset rgba(168, 168, 168, .5);
  border-radius: 8px;
  box-shadow: 2px 2px 5px 2px rgba(224, 224, 224, .75);
  color: #bfc7a9;
  padding: 12px 8px 4px 8px;
}

dialog::backdrop {
  background: rgba(29, 29, 29, 0.75);
  backdrop-filter: blur(4px);
}

dialog:has(>main>article) {
  padding: 0;
}

dialog>form {
  display: grid;
  gap: 8px;
}

dialog>form>fieldset {
  display: flex;
  flex-direction: column;
}

dialog>form>fieldset>span,
dialog>form>span:has(>input[type="submit"]) {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

dialog>form>span:has(>input[type="submit"]) {
  justify-content: right;
}

dialog>form>fieldset>span>label:has(+input) {
  text-wrap: nowrap;
  width: 5em;
}

dialog>form>fieldset>span>input:not([type="submit"]) {
  text-align: right;
  width: 4em;
}

dialog>main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: min(42em, 50dvw);
}

dialog>main>article {
  background-color: #333;
  color: #eee;
  display: inline-block;
  font-family: monospace;
  margin: 0;
  padding: 4px 8px;
  width: calc(100% - 3em);
}

dialog>main>article>code {
  background-color: #1d1d1d;
  display: block;
  font-size: 75%;
  margin: 8px auto;
  padding: 4px;
  width: fit-content;
}

dialog>main>article>h3 {
  font-size: 110%;
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

dialog>main>article>span {
  color: #ddd;
  display: block;
  margin: 2px 0;
}

dialog>nav {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin: 0 0 8px 0;
  padding: 2px 0 2px 1em;
}

dialog>nav>h2 {
  font-size: 125%;
  margin: 0;
}

dialog>nav>button {
  justify-self: right;
  width: fit-content;
}

main:has(input#stroke-inner-frame:checked)~.page-container>.page .inner-frame {
  visibility: visible;
}

main:has(input#stroke-inner-frame:not(:checked))~.page-container>.page .inner-frame {
  visibility: hidden;
}

main:has(input#stroke-outer-frame:checked)~.page-container>.page .outer-frame {
  visibility: visible;
}

main:has(input#stroke-outer-frame:not(:checked))~.page-container>.page .outer-frame {
  visibility: hidden;
}

svg {
  display: block;
}