:root {
  color-scheme: light;
  --stage-width: min(100vw, calc(100svh * 1179 / 2556));
  --stage-height: min(100svh, calc(100vw * 2556 / 1179));
  --login-paper: #f7fbff;
  --login-blue: #cbe8f7;
  --login-outline: #d7d9dc;
  --login-ink: #70494b;
  --login-dark: #513b3e;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #171a22;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
}
button { font: inherit; }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: #e9edf2;
  opacity: 1;
  transition: opacity 620ms ease, visibility 620ms ease;
}
.login-overlay.is-leaving {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.login-overlay.is-hidden { display: none; }
.login-scene {
  position: relative;
  width: min(100vw, 520px);
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--login-paper);
  background-image: url("assets/login/login-paper.webp");
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 44px rgba(100, 113, 126, .14);
}
.login-scene::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 1px solid rgba(255, 255, 255, .72);
  content: "";
  pointer-events: none;
}
.backpack-cat {
  --look-x: 0px;
  --look-y: 0px;
  position: absolute;
  z-index: 3;
  top: max(7dvh, 44px);
  left: -3.5%;
  width: min(68%, 360px);
  aspect-ratio: 430 / 445;
  animation: backpack-cat-breathe 4.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 6px rgba(109, 114, 121, .08));
  pointer-events: none;
  transform-origin: 50% 85%;
}
.backpack-cat .cat-sun {
  position: absolute;
  z-index: -1;
  top: 4%;
  left: 8%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffc850;
  box-shadow: inset 0 9px 0 rgba(255, 218, 104, .65);
}
.backpack-cat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.eye-spark {
  position: absolute;
  z-index: 2;
  top: 38.5%;
  width: 6.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .98);
  box-shadow: 6px 7px 0 -5px rgba(255, 252, 189, .9);
  animation: eye-sparkle 3.4s ease-in-out infinite;
  transform: translate(var(--look-x), var(--look-y));
  transition: transform 160ms ease-out;
}
.eye-spark-left { left: 30.5%; }
.eye-spark-right { left: 68.1%; animation-delay: -1.7s; }
.login-board {
  position: absolute;
  z-index: 2;
  top: 42.5%;
  right: 5%;
  width: 80%;
  min-height: 318px;
  padding: clamp(54px, 7dvh, 70px) clamp(19px, 5.6vw, 29px) clamp(23px, 4dvh, 34px);
  border: clamp(4px, 1.2vw, 7px) solid var(--login-outline);
  border-radius: 12% 9% 13% 8% / 9% 13% 8% 12%;
  background: var(--login-blue);
  box-shadow:
    3px 4px 0 rgba(181, 187, 192, .3),
    inset 0 0 0 2px rgba(255, 255, 255, .22);
  transform: rotate(.35deg);
}
.login-board::before {
  position: absolute;
  inset: -8px -6px -6px -8px;
  z-index: -1;
  border: 3px solid rgba(218, 220, 222, .55);
  border-radius: 13% 8% 12% 10% / 10% 12% 9% 13%;
  content: "";
  pointer-events: none;
}
.login-board.is-shaking { animation: login-board-shake 430ms ease; }
.login-board h1 {
  margin: 0 0 clamp(13px, 2.4dvh, 21px);
  color: var(--login-ink);
  font-family: "STKaiti", "KaiTi", "Comic Sans MS", cursive;
  font-size: clamp(25px, 7.1vw, 37px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .38);
}
.perched-cat {
  position: absolute;
  z-index: 5;
  top: -20%;
  right: -8%;
  width: 29%;
  aspect-ratio: 177 / 262;
  padding: 0;
  border: 0;
  color: var(--login-ink);
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 5px 3px rgba(104, 108, 113, .08));
  transform-origin: 50% 85%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.perched-cat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.perched-cat:focus-visible {
  outline: 0;
  filter: drop-shadow(0 0 2px rgba(112, 73, 75, .86)) drop-shadow(0 5px 3px rgba(104, 108, 113, .08));
}
.perched-cat.is-startled { animation: perched-cat-startle 720ms cubic-bezier(.2, .72, .22, 1); }
.startle-mark {
  position: absolute;
  top: 8%;
  width: 18%;
  height: 22%;
  border-top: 4px solid currentColor;
  opacity: 0;
}
.startle-mark-left {
  left: -7%;
  border-left: 4px solid currentColor;
  transform: rotate(-20deg);
}
.startle-mark-right {
  right: -7%;
  border-right: 4px solid currentColor;
  transform: rotate(20deg);
}
.perched-cat.is-startled .startle-mark { animation: startle-mark-pop 520ms ease-out both; }
.login-form { display: grid; gap: 12px; }
.login-field { display: grid; gap: 5px; }
.login-field span {
  padding-left: 7px;
  color: var(--login-ink);
  font-family: "STKaiti", "KaiTi", "Comic Sans MS", cursive;
  font-size: clamp(16px, 4.7vw, 21px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.login-field input {
  width: 100%;
  height: 49px;
  padding: 0 15px;
  border: 2px solid rgba(100, 76, 78, .7);
  border-radius: 19px 15px 20px 14px;
  outline: none;
  color: var(--login-dark);
  background: rgba(255, 255, 255, .72);
  box-shadow:
    2px 3px 0 rgba(169, 181, 189, .3),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  font-family: "STKaiti", "KaiTi", "Comic Sans MS", cursive;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.login-field input::placeholder { color: rgba(112, 73, 75, .54); opacity: 1; }
.login-field input:focus {
  border-color: var(--login-dark);
  box-shadow: 2px 3px 0 rgba(169, 181, 189, .3), 0 0 0 3px rgba(255, 255, 255, .62);
  transform: rotate(-.25deg);
}
.login-field input[aria-invalid="true"] { border-color: #9b4e59; }
.login-error {
  min-height: 18px;
  margin: -2px 0 -1px;
  color: #874850;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
}
.login-submit {
  width: 100%;
  min-height: 50px;
  padding: 0 22px;
  border: 3px solid #493437;
  border-radius: 18px 15px 20px 14px;
  color: #fffaf8;
  background: var(--login-dark);
  box-shadow: 3px 4px 0 rgba(112, 73, 75, .22);
  cursor: pointer;
  font-family: "STKaiti", "KaiTi", "Comic Sans MS", cursive;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.login-submit:hover { background: #60474a; }
.login-submit:active { box-shadow: 1px 2px 0 rgba(112, 73, 75, .2); transform: translateY(2px) scale(.99); }
.login-submit:focus-visible { outline: 3px solid rgba(255, 255, 255, .88); outline-offset: 3px; }
body.is-login-locked .page-shell,
body.is-login-locked .candle-overlay { visibility: hidden; }

@keyframes backpack-cat-breathe {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-5px) rotate(.45deg); }
}
@keyframes eye-sparkle {
  0%, 18%, 100% { opacity: .96; scale: 1; }
  22% { opacity: .5; scale: .72; }
  28% { opacity: 1; scale: 1.12; }
  72% { opacity: .9; scale: .94; }
}
@keyframes perched-cat-startle {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(-13%) rotate(-7deg) scale(1.06, .94); }
  39% { transform: translateY(-31%) rotate(6deg) scale(.97, 1.08); }
  58% { transform: translateY(-18%) rotate(-4deg) scale(1.03, .98); }
  76% { transform: translateY(-5%) rotate(2deg) scale(.99, 1.02); }
}
@keyframes startle-mark-pop {
  0% { opacity: 0; scale: .5; }
  28% { opacity: .9; scale: 1; }
  100% { opacity: 0; scale: 1.18; }
}
@keyframes login-board-shake {
  0%, 100% { transform: rotate(.35deg) translateX(0); }
  22% { transform: rotate(-.7deg) translateX(-5px); }
  48% { transform: rotate(.8deg) translateX(4px); }
  72% { transform: rotate(-.25deg) translateX(-2px); }
}

.page-shell {
  display: grid;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  place-items: center;
  background: #171a22;
}
.video-stage {
  position: relative;
  width: min(80vw, calc(78svh * 4 / 3), 880px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #819dd2;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
}
.love-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #819dd2;
}
.video-stage .replay {
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, .9);
  background: rgba(21, 25, 35, .45);
  opacity: .72;
}
.video-stage .replay:hover,
.video-stage .replay.is-needed {
  background: rgba(21, 25, 35, .72);
  opacity: 1;
}
.stage {
  position: relative;
  width: var(--stage-width);
  height: var(--stage-height);
  overflow: hidden;
  isolation: isolate;
  background: #c5eff8;
  box-shadow: 0 0 0 1px rgba(55, 167, 190, .08), 0 20px 60px rgba(67, 145, 160, .18);
}
.background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}
.love-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wipe, .trail {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.wipe {
  animation: write-in 780ms cubic-bezier(.25, .7, .24, 1) both;
}
.trail {
  animation: trail-write 780ms cubic-bezier(.25, .7, .24, 1) both;
}
.wipe-o, .trail-o { animation-delay: 360ms; }
.wipe-v, .trail-v { animation-delay: 1080ms; }
.wipe-e, .trail-e { animation-delay: 1800ms; }
.wipe-l, .trail-l { animation-delay: 2580ms; animation-duration: 1200ms; }
@keyframes write-in {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes trail-write {
  0% { stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: .9; }
  82% { stroke-dashoffset: 0; opacity: .9; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.pen-tips .tip {
  opacity: 0;
  animation: tip-show 780ms ease both;
}
.tip-o { animation-delay: 360ms; }
.tip-v { animation-delay: 1080ms; }
.tip-e { animation-delay: 1800ms; }
.tip-l { animation-delay: 2580ms; animation-duration: 1200ms; }
@keyframes tip-show {
  0% { opacity: 0; }
  12% { opacity: .92; }
  88% { opacity: .92; }
  100% { opacity: 0; }
}
.caption {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13.4%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(39, 123, 145, .78);
  font-size: clamp(10px, 1.6vw, 14px);
  letter-spacing: .22em;
  text-transform: lowercase;
  white-space: nowrap;
  transform: translateX(-50%);
}
.caption-line { width: 24px; height: 1px; background: rgba(39, 123, 145, .46); }
.replay {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 8.2%;
  display: grid;
  width: clamp(32px, 6vw, 44px);
  height: clamp(32px, 6vw, 44px);
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  color: rgba(35, 124, 147, .75);
  background: rgba(255, 255, 255, .42);
  cursor: pointer;
  opacity: .78;
  transition: transform 180ms ease, background 180ms ease;
}
.replay:hover { background: rgba(255, 255, 255, .7); transform: rotate(-25deg); }
.replay:focus-visible { outline: 2px solid #238ba3; outline-offset: 3px; }
.replay svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.progress {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 5.5%;
  left: 7%;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .38);
}
.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(36, 129, 151, .55);
  animation: progress 3.9s linear both;
}
@keyframes progress { from { width: 0; } to { width: 100%; } }
.stage.is-replaying .wipe,
.stage.is-replaying .trail,
.stage.is-replaying .tip,
.stage.is-replaying .progress span { animation-name: none; }
.stage.is-replaying .wipe,
.stage.is-replaying .trail { stroke-dashoffset: 1; }
.stage.is-replaying .tip { opacity: 0; }
.stage.is-replaying .progress span { width: 0; }

.candle-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: #24242b;
  opacity: 1;
  transition: opacity 680ms ease, visibility 680ms ease;
}
.candle-overlay.is-dismissing {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.candle-overlay.is-hidden { display: none; }
.candle-surface {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.candle-surface:focus-visible { outline: 2px solid #ffc1d3; outline-offset: -7px; }
.candle-stage {
  position: relative;
  display: block;
  width: min(92vw, 64svh, 560px);
  aspect-ratio: 1;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .28));
  transform: translateZ(0);
}
.candle-cake {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.candle-flame,
.candle-flame::before,
.candle-flame::after,
.candle-smoke,
.candle-smoke::before,
.candle-smoke::after {
  position: absolute;
  display: block;
  content: "";
}
.candle-flame {
  z-index: 3;
  top: 7.25%;
  width: 8.1%;
  height: 12.2%;
  background: #f05d32;
  clip-path: polygon(50% 0, 69% 20%, 86% 47%, 91% 68%, 85% 84%, 70% 96%, 50% 100%, 29% 95%, 14% 81%, 9% 62%, 16% 40%, 31% 16%);
  filter: drop-shadow(0 0 6px rgba(255, 169, 72, .78)) drop-shadow(0 0 18px rgba(255, 203, 103, .38));
  transform-origin: 50% 94%;
  animation: candle-flicker 820ms ease-in-out infinite alternate;
}
.candle-flame::before {
  inset: 16% 20% 8%;
  background: #ffd66f;
  clip-path: polygon(50% 0, 77% 35%, 84% 67%, 70% 88%, 50% 100%, 29% 87%, 17% 62%, 27% 30%);
}
.candle-flame::after {
  right: 36%;
  bottom: 10%;
  left: 36%;
  height: 47%;
  background: #fff5b2;
  clip-path: polygon(50% 0, 88% 48%, 82% 78%, 50% 100%, 17% 78%, 12% 46%);
}
.flame-left { left: 36.65%; }
.flame-right { left: 56.6%; animation-delay: -410ms; }
.candle-smoke {
  z-index: 2;
  top: 6.8%;
  width: 5.5%;
  height: 10%;
  opacity: 0;
  border-left: 3px solid rgba(211, 218, 225, .72);
  border-radius: 55% 0 0 45%;
  transform: translateX(-50%) scale(.5);
}
.candle-smoke::before {
  left: -7px;
  top: 15%;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(225, 230, 235, .62);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}
.candle-smoke::after {
  left: -11px;
  top: 46%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(194, 202, 211, .48);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}
.smoke-left { left: 40.7%; }
.smoke-right { left: 60.65%; }
.candle-overlay.is-flame-left-out .flame-left,
.candle-overlay.is-flame-right-out .flame-right {
  animation: candle-snuff 520ms cubic-bezier(.2, .8, .25, 1) both;
}
.candle-overlay.is-flame-left-out .smoke-left,
.candle-overlay.is-flame-right-out .smoke-right {
  animation: candle-smoke-rise 1500ms ease-out both;
}
.candle-wish {
  display: block;
  min-height: 1.5em;
  margin-top: clamp(6px, 1.5svh, 14px);
  color: #ffe9ef;
  font-family: "Microsoft YaHei", "Trebuchet MS", sans-serif;
  font-size: clamp(15px, 4.6vw, 25px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  opacity: 0;
  text-align: center;
  text-shadow: 0 2px 12px rgba(255, 135, 171, .36);
  white-space: nowrap;
  transform: translateY(10px);
}
.candle-overlay.is-complete .candle-wish {
  animation: candle-wish-in 900ms cubic-bezier(.18, .78, .2, 1) both;
}

@keyframes candle-flicker {
  0% { transform: rotate(-3deg) scale(.93, 1.05); }
  35% { transform: rotate(2deg) scale(1.03, .96); }
  70% { transform: rotate(-1deg) scale(.96, 1.03); }
  100% { transform: rotate(4deg) scale(1.04, .92); }
}
@keyframes candle-snuff {
  0% { opacity: 1; transform: rotate(0) scale(1); }
  35% { opacity: .88; transform: translateX(16%) rotate(18deg) scale(.82, .7); }
  100% { opacity: 0; transform: translateX(45%) translateY(18%) rotate(30deg) scale(.1); }
}
@keyframes candle-smoke-rise {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.42); }
  18% { opacity: .72; }
  58% { opacity: .46; transform: translate(-34%, -17px) scale(.86); }
  100% { opacity: 0; transform: translate(-62%, -42px) scale(1.08); }
}
@keyframes candle-wish-in {
  0% { opacity: 0; transform: translateY(10px) scale(.97); }
  55% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-aspect-ratio: 1179 / 2556) {
  .stage { width: 100vw; height: calc(100vw * 2556 / 1179); max-height: none; }
  .page-shell { min-height: 100svh; align-items: start; }
}
@media (max-width: 600px) {
  .page-shell { align-items: center; }
  .video-stage { width: min(86vw, 360px); }
  .video-stage .replay { right: 10px; bottom: 10px; width: 36px; height: 36px; }
}
@media (max-height: 680px) {
  .backpack-cat { top: 24px; width: 61%; }
  .login-board {
    top: 35%;
    min-height: 298px;
    padding-top: 46px;
    padding-bottom: 18px;
  }
  .login-board h1 { margin-bottom: 9px; font-size: clamp(23px, 6.6vw, 31px); }
  .login-form { gap: 8px; }
  .login-field input { height: 44px; }
  .login-submit { min-height: 44px; }
  .perched-cat { top: -18%; width: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .backpack-cat,
  .eye-spark,
  .perched-cat.is-startled,
  .perched-cat.is-startled .startle-mark,
  .login-board.is-shaking { animation-duration: 1ms; animation-iteration-count: 1; }
  .eye-spark { transition: none; }
  .wipe, .trail { animation-duration: 1ms; animation-delay: 0ms; }
  .tip { animation-duration: 1ms; animation-delay: 0ms; }
  .progress span { animation-duration: 1ms; }
  .candle-flame { animation-duration: 1.8s; }
  .candle-overlay.is-flame-left-out .flame-left,
  .candle-overlay.is-flame-right-out .flame-right,
  .candle-overlay.is-flame-left-out .smoke-left,
  .candle-overlay.is-flame-right-out .smoke-right,
  .candle-overlay.is-complete .candle-wish { animation-duration: 1ms; }
}