@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.min.css');

:root {
  color-scheme: light dark;
  --font-family-sans: 'Pretendard', sans-serif;
  --font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-family-typewriter: 'Courier New', Courier, monospace;
  --font-size-root: 16px;
  --font-size-base: 1rem;
  --font-weight-400: 400;
  --line-height-body: 1.5;
  --line-height-tight: 1;
  --size-1: 0.0625rem;
  --size-2: 0.125rem;
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-40: 2.5rem;
  --size-480: 30rem;
  --border-focus: 2px;
  --radius-circle: 50%;
  --color-focus: color-mix(in srgb, currentColor 25%, transparent);
  --color-focus-on-dark: rgba(255, 255, 255, 0.25);
  --color-loading-active: #bbb;
  --color-loading-hover: #ddd;
  --color-white: #fff;
  --color-black: #000;
  --color-surface: light-dark(#f5f2e9, #232522);
  --color-ink: light-dark(#252821, #efeee4);
  --color-control-ink: var(--color-surface);
  --color-control-background: color-mix(in srgb, var(--color-ink) 90%, var(--color-surface));
  --color-control-hover: color-mix(in srgb, var(--color-ink) 82%, var(--color-surface));
  --color-control-active: color-mix(in srgb, var(--color-ink) 74%, var(--color-surface));
  --color-control-border: color-mix(in srgb, var(--color-ink) 65%, var(--color-surface));
  --color-hover: light-dark(#eeeee9, #30302d);
  --opacity-disabled: 0.5;
  --duration-500: 0.5s;
  --duration-1000: 1s;
  --z-loading: 555;
  --z-toast: 333;
  --font-size-passage-start: clamp(2.5rem, 5vw, 4rem);
  --font-size-passage-end: 1.5rem;
  --line-height-passage: 1.5;
  --color-erased: light-dark(#c5c3b7, #55594d);
  --color-miss: light-dark(#9a452c, #f0a286);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  overflow: hidden;
  font-size: var(--font-size-root);
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  word-break: keep-all;
  background: var(--color-surface);
  -webkit-user-select: none;
  user-select: none;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
[hidden] {
  display: none !important;
}

.header {
  --header-padding: var(--size-24);
  --header-gap: var(--size-8);
  --header-color: var(--color-surface);
  --header-background: var(--color-ink);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  padding: max(var(--header-padding), env(safe-area-inset-top))
    max(var(--header-padding), env(safe-area-inset-right)) var(--header-padding)
    max(var(--header-padding), env(safe-area-inset-left));
  color: var(--header-color);
  background: var(--header-background);
}
.header-actions {
  --header-actions-gap: var(--size-8);

  display: flex;
  gap: var(--header-actions-gap);
}

.footer {
  --footer-padding: var(--size-24);
  --footer-gap: var(--size-8);
  --footer-color: var(--color-surface);
  --footer-background: var(--color-ink);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--footer-gap);
  padding: var(--footer-padding) max(var(--footer-padding), env(safe-area-inset-right))
    max(var(--footer-padding), env(safe-area-inset-bottom))
    max(var(--footer-padding), env(safe-area-inset-left));
  color: var(--footer-color);
  background: var(--footer-background);
}
.button {
  --button-height: var(--size-40);
  --button-padding: var(--size-8) var(--size-12);
  --button-radius: var(--size-4);
  --button-color: var(--color-control-ink);
  --button-background: var(--color-control-background);
  --button-border: var(--color-control-border);
  --button-border-width: var(--size-1);
  --button-hover: var(--color-control-hover);
  --button-active: var(--color-control-active);
  --button-disabled: var(--opacity-disabled);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--button-height);
  padding: var(--button-padding);
  color: var(--button-color);
  white-space: nowrap;
  border: var(--button-border-width) solid var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-background);
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .button:where(:not(:disabled)):hover {
    background: var(--button-hover);
  }
}
.button:where(:not(:disabled)):active {
  background: var(--button-active);
}
.button:disabled {
  opacity: var(--button-disabled);
  cursor: default;
}
.button:focus-visible,
.icon-button:focus-visible {
  outline: var(--size-2) solid var(--color-focus);
  outline-offset: 0;
}
.icon-button {
  --icon-button-size: var(--size-40);
  --icon-button-radius: var(--radius-circle);
  --icon-button-color: var(--color-control-ink);
  --icon-button-background: var(--color-control-background);
  --icon-button-hover-background: var(--color-control-hover);
  --icon-button-active-background: var(--color-control-active);
  --icon-button-disabled-opacity: var(--opacity-disabled);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--icon-button-size);
  min-width: var(--icon-button-size);
  height: var(--icon-button-size);
  min-height: var(--icon-button-size);
  padding: 0;
  color: var(--icon-button-color);
  border: 0;
  border-radius: var(--icon-button-radius);
  background: var(--icon-button-background);
  cursor: pointer;
}
.icon {
  --icon-size: var(--size-20);

  display: block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
}
@media (hover: hover) {
  .icon-button:not(:disabled):not([aria-disabled='true']):hover {
    background: var(--icon-button-hover-background);
  }
}
.icon-button:not(:disabled):not([aria-disabled='true']):active {
  background: var(--icon-button-active-background);
}
.icon-button:disabled,
.icon-button[aria-disabled='true'] {
  opacity: var(--icon-button-disabled-opacity);
  cursor: default;
}

.loading {
  --loading-delay: var(--duration-500);
  --loading-studio-delay: var(--duration-1000);
  --loading-hold-duration: var(--duration-1000);
  --loading-duration: var(--duration-1000);
  --loading-z-index: var(--z-loading);
  --loading-padding: var(--size-16);
  --loading-color: var(--color-white);
  --loading-background: var(--color-black);

  position: fixed;
  inset: 0;
  z-index: var(--loading-z-index);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--loading-padding);
  color: var(--loading-color);
  text-align: center;
  background: var(--loading-background);
}
.loading-text {
  --loading-text-duration: var(--duration-1000);
  --loading-text-font-size: var(--font-size-base);

  font-size: var(--loading-text-font-size);
  font-weight: 400;
  line-height: var(--line-height-body);
}
.loading > .loading-text {
  opacity: 0;
}
.loading-recovery {
  --loading-recovery-width: var(--size-480);
  --loading-recovery-gap: var(--size-16);
  --loading-recovery-font: var(--font-family-sans);
  --loading-recovery-size: var(--font-size-base);
  --loading-recovery-weight: var(--font-weight-400);
  --loading-recovery-line-height: var(--line-height-body);
  --loading-recovery-color: var(--color-white);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--loading-recovery-gap);
  max-width: var(--loading-recovery-width);
  color: var(--loading-recovery-color);
  font: var(--loading-recovery-weight) var(--loading-recovery-size) /
    var(--loading-recovery-line-height) var(--loading-recovery-font);
  text-align: center;
}
.loading-recovery[hidden],
.loading-error[hidden] {
  display: none;
}
.loading-error {
  --loading-error-gap: var(--size-16);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--loading-error-gap);
}
.loading-reload {
  --loading-reload-height: var(--size-40);
  --loading-reload-padding-y: var(--size-8);
  --loading-reload-padding-x: var(--size-12);
  --loading-reload-radius: var(--size-4);
  --loading-reload-color: var(--color-black);
  --loading-reload-background: var(--color-white);
  --loading-reload-hover: var(--color-loading-hover);
  --loading-reload-active: var(--color-loading-active);
  --loading-reload-focus-width: var(--border-focus);
  --loading-reload-focus-color: var(--color-focus-on-dark);
  --loading-reload-disabled-opacity: var(--opacity-disabled);

  flex: 0 0 auto;
  height: var(--loading-reload-height);
  padding: var(--loading-reload-padding-y) var(--loading-reload-padding-x);
  border: 0;
  border-radius: var(--loading-reload-radius);
  color: var(--loading-reload-color);
  font: inherit;
  background: var(--loading-reload-background);
  cursor: pointer;
}
.loading-reload:not(:disabled):hover {
  background: var(--loading-reload-hover);
}
.loading-reload:not(:disabled):active {
  background: var(--loading-reload-active);
}
.loading-reload:focus-visible {
  outline: var(--loading-reload-focus-width) solid var(--loading-reload-focus-color);
  outline-offset: 0;
}
.loading-reload:disabled {
  opacity: var(--loading-reload-disabled-opacity);
  background: var(--loading-reload-background);
  cursor: default;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.progress {
  --progress-font: var(--font-family-mono);
  --progress-size: var(--size-40);
  --progress-leading: var(--line-height-tight);
  font-family: var(--progress-font);
  font-size: var(--progress-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--progress-leading);
  white-space: nowrap;
}
.next-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  pointer-events: auto;
}
.result {
  --result-font: var(--font-family-mono);
  --result-size: var(--size-40);
  --result-leading: var(--line-height-tight);
  grid-column: 2;
  grid-row: 1;
  font-family: var(--result-font);
  font-size: var(--result-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--result-leading);
  text-align: center;
}
.toast {
  --toast-fade-duration: var(--duration-500);
  --toast-edge-gap: var(--size-24);
  --toast-color: var(--color-surface);
  --toast-background: var(--color-ink);
  --toast-padding: var(--size-8) var(--size-12);
  --toast-radius: var(--size-4);
  --toast-z-index: var(--z-toast);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--toast-z-index);
  width: max-content;
  max-width: calc(100% - var(--toast-edge-gap) * 2);
  padding: var(--toast-padding);
  transform: translate(-50%, -50%);
  color: var(--toast-color);
  text-align: center;
  border-radius: var(--toast-radius);
  background: var(--toast-background);
  pointer-events: none;
}
@media (width < 600px) {
  .header {
    --header-padding: var(--size-16);
  }
  .footer {
    --footer-padding: var(--size-16);
  }
}

.main {
  --main-padding: var(--size-24);
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--main-padding);
  padding: var(--main-padding) max(var(--main-padding), env(safe-area-inset-right))
    var(--main-padding) max(var(--main-padding), env(safe-area-inset-left));
}
.scene {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 100%;
  margin: 0;
}
.scene:focus-visible {
  outline: var(--size-2) solid var(--color-focus);
  outline-offset: 0;
}
.passage {
  --passage-font: var(--font-family-typewriter);
  --passage-size: calc(
    var(--font-size-passage-start) +
      (var(--font-size-passage-end) - var(--font-size-passage-start)) * var(--passage-progress, 0)
  );
  --passage-leading: var(--line-height-passage);
  font-family: var(--passage-font);
  font-size: var(--passage-size);
  line-height: var(--passage-leading);
  word-break: normal;
  overflow-wrap: anywhere;
}
.passage-word {
  display: inline-block;
  max-width: 100%;
}
.character {
  --character-focus: var(--color-hover);
  --character-erased: var(--color-erased);
  --character-miss: var(--color-miss);
  display: inline;
  padding: 0;
  color: inherit;
  font: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.character:focus-visible {
  outline: var(--size-2) solid var(--color-focus);
  outline-offset: 0;
  background: var(--character-focus);
}
@media (hover: hover) {
  .character:not([aria-disabled='true']):hover {
    background: var(--character-focus);
  }
}
.character[aria-disabled='true'] {
  color: var(--character-erased);
  cursor: default;
}
.character[data-miss='true'] {
  color: var(--character-miss);
  text-decoration: underline;
}
@media (width < 600px) {
  .main {
    --main-padding: var(--size-16);
  }
}