* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070c; }
body {
  font-family: 'Gowun Batang', 'Nanum Myeongjo', 'Noto Serif KR', serif;
  color: #eef2f5;
  user-select: none;
  -webkit-user-select: none;
}
body.idle { cursor: none; }

#stage { position: fixed; inset: 0; }
#stage canvas.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 2600ms ease-in-out;
}
#stage canvas.layer.on { opacity: 1; }

#quote {
  position: fixed; left: 50%; bottom: 16vh;
  transform: translateX(-50%);
  max-width: min(82vw, 34em);
  text-align: center;
  opacity: 0;
  transition: opacity 1800ms ease;
  pointer-events: none;
  z-index: 10;
}
#quote.show { opacity: 1; }
#quote.center { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
#quote.low-left { left: 8vw; bottom: 10vh; transform: none; text-align: left; }
#quote-text {
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-break: keep-all;
  text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
}
#quote-author {
  margin-top: .9em;
  font-size: .85rem;
  opacity: .72;
  letter-spacing: .12em;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

#hud {
  position: fixed; top: 22px; right: 26px;
  text-align: right;
  z-index: 10;
  opacity: .6;
  transition: opacity 1.5s ease;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
#hud-clock { font-size: 1.5rem; letter-spacing: .08em; }
#hud-meta { font-size: .8rem; margin-top: 2px; opacity: .85; }

#brand {
  position: fixed; top: 26px; left: 28px;
  font-size: .72rem;
  letter-spacing: .45em;
  opacity: .35;
  z-index: 10;
  transition: opacity 1.5s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

body.idle #hud, body.idle #brand { opacity: .10; }

#hint {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  letter-spacing: .1em;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: 10;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
#hint.show { opacity: .5; }