@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-size-root: 16px;
  --font-size-base: 1rem;
  --font-weight-400: 400;
  --line-height-body: 1.5;
  --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;

  --opacity-disabled: 0.5;
  --duration-500: 0.5s;
  --duration-1000: 1s;
  --z-header: 444;
  --z-loading: 555;
  --color-surface: #000;
  --color-ink: #fff;
  --color-control-ink: #fff;
  --color-hover: #222;
  --color-active: #444;
  --color-line: #666;
  --shadow-text-subtle: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: var(--font-size-root);
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  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-z-index: var(--z-header);

  position: fixed;
  inset: 0 0 auto;
  z-index: var(--header-z-index);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  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));
}
.header-actions {
  --header-actions-gap: var(--size-8);
  pointer-events: auto;

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

.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-hover);
  --icon-button-hover-background: var(--color-active);
  --icon-button-active-background: var(--color-line);
  --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;
}

.main {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
.scene[data-phase='subject'] {
  cursor: grab;
}
.scene.scene-dragging {
  cursor: grabbing;
}
.scene:focus-visible {
  outline: 0;
}
.scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.icon-button:focus-visible {
  outline: var(--border-focus) solid var(--color-focus-on-dark);
  outline-offset: 0;
}
.hint {
  --hint-fade-duration: var(--duration-500);
  --hint-text-shadow: var(--shadow-text-subtle);
  --hint-edge-gap: var(--size-24);
  --hint-color: var(--color-white);
  --hint-size: var(--font-size-base);
  --hint-weight: var(--font-weight-400);
  --hint-line-height: var(--line-height-body);
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - var(--hint-edge-gap) * 2);
  transform: translate(-50%, -50%);
  color: var(--hint-color);
  font-size: var(--hint-size);
  font-weight: var(--hint-weight);
  line-height: var(--hint-line-height);
  text-align: center;
  text-shadow: var(--hint-text-shadow);
  pointer-events: none;
}
.transition {
  position: absolute;
  inset: 0;
  background: var(--color-black);
  opacity: 0;
  pointer-events: none;
}
@media (width < 600px) {
  .header {
    --header-padding: var(--size-16);
  }
}

.footer {
  --footer-padding: var(--size-24);
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-header);
  display: flex;
  justify-content: flex-end;
  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));
  pointer-events: none;
}
.footer .icon-button {
  pointer-events: auto;
}
@media (width < 600px) {
  .footer {
    --footer-padding: var(--size-16);
  }
}

/* The bubble film covers the viewport, including controls, without intercepting input. */
.bubble-tint {
  --bubble-tint-z-index: calc(var(--z-loading) + 1);
  position: fixed;
  inset: 0;
  z-index: var(--bubble-tint-z-index);
  background: var(--bubble-tint-color);
  opacity: 0;
  pointer-events: none;
}