@font-face {
  font-family: "BL Helvetica";
  src: url("fonts/LiberationSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "BL Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

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

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-style: normal;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html.dark,
html.dark body {
  background: #000;
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited,
a:hover,
a:active {
  color: inherit;
}

.stage {
  position: fixed;
  inset: 0;
  padding: max(18px, 4vmin);
  pointer-events: none;
  z-index: 1;
}

.tl,
.tr,
.bl,
.br {
  position: absolute;
  margin: 0;
  font-family: "BL Helvetica", Helvetica, Arial, sans-serif;
  font-size: 2.8125vmin;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .tl,
  .tr,
  .bl,
  .br {
    font-size: clamp(16px, 5.2vw, 22px);
  }
}

.tl {
  top: max(18px, 4vmin);
  left: max(18px, 4vmin);
  text-decoration: underline;
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.14em;
}

.tr {
  top: max(18px, 4vmin);
  right: max(18px, 4vmin);
}

.bl {
  bottom: max(18px, 4vmin);
  left: max(18px, 4vmin);
}

.br {
  bottom: max(18px, 4vmin);
  right: max(18px, 4vmin);
}

.struck {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 0.28em;
  text-decoration-skip-ink: none;
}

.anyway {
  text-transform: none;
  font-weight: 400;
  color: red;
  font-size: calc(14px * 0.825);
  line-height: 1.25;
}

.anyway a {
  color: red;
}

.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(43.5vmin, 405px);
  aspect-ratio: 340 / 130;
  background-color: #1a1a1a;
  -webkit-mask: url("mark.svg") center / contain no-repeat;
  mask: url("mark.svg") center / contain no-repeat;
}

html.dark .mark {
  background-color: #e8e0d4;
}

.mark-02 {
  -webkit-mask: url("mark-02.svg") center / contain no-repeat;
  mask: url("mark-02.svg") center / contain no-repeat;
}

.mark-03 {
  -webkit-mask: url("mark-03.svg") center / contain no-repeat;
  mask: url("mark-03.svg") center / contain no-repeat;
}

.mark-04 {
  -webkit-mask: url("mark-04.svg") center / contain no-repeat;
  mask: url("mark-04.svg") center / contain no-repeat;
}

.mark-05 {
  -webkit-mask: url("mark-05.svg") center / contain no-repeat;
  mask: url("mark-05.svg") center / contain no-repeat;
}

.mark-06 {
  -webkit-mask: url("mark-06.svg") center / contain no-repeat;
  mask: url("mark-06.svg") center / contain no-repeat;
}

.mail-icon {
  position: fixed;
  z-index: 50;
  left: 58%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mail-icon svg {
  display: block;
  width: 64px;
  height: 64px;
}

.mail-icon .flap-closed {
  display: block;
}

.mail-icon .flap-open {
  display: none;
}

.mail-icon.is-open .flap-closed {
  display: none;
}

.mail-icon.is-open .flap-open {
  display: block;
}

.win31 {
  display: none;
  position: fixed;
  z-index: 60;
  width: 280px;
  color: #000;
  background: #c0c0c0;
  border-style: solid;
  border-width: 2px;
  border-color: #fff #000 #000 #fff;
  font-family: Tahoma, "MS Sans Serif", sans-serif;
}

.win31.is-open {
  display: block;
}

.win31.is-open.is-max {
  display: flex;
  flex-direction: column;
  inset: 0;
  width: auto;
  height: auto;
}

.win31.is-max .win31-body {
  flex: 1;
}

.win31.is-min .win31-body {
  display: none;
}

.win31-title {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 1px 2px 1px 4px;
  background: #000080;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: move;
  user-select: none;
}

.win31-title span {
  flex: 1;
}

.win31-btns {
  display: flex;
  gap: 2px;
}

.win31-btns button {
  width: 16px;
  height: 14px;
  padding: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #fff #000 #000 #fff;
  background: #c0c0c0;
  color: #000;
  font-size: 9px;
  line-height: 12px;
  cursor: pointer;
}

.win31-btns button:active {
  border-color: #000 #fff #fff #000;
}

.win31-body {
  margin: 3px;
  padding: 18px 14px;
  border-style: solid;
  border-width: 2px;
  border-color: #808080 #fff #fff #808080;
  background: #c0c0c0;
}

.win31-body a {
  font-family: "BL Mono", "JetBrains Mono", "Courier New", monospace;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  text-decoration: underline;
  color: #000;
}