/* Give the ribbon's lower-left return enough room throughout its float. */
.brand-ribbon,
.brand-ribbon-depth {
  width: 130%;
  height: 86%;
  left: -10%;
  top: 2.5%;
  transform: rotate(-19deg);
}
.brand-ribbon-depth { opacity: .14; }

/* Keep the character and its floor shadow on the same responsive scale. */
.scene {
  container-type: inline-size;
  --mascot-size: min(460px, 88cqw);
  --mascot-top: 55%;
}
.mascot-position {
  top: var(--mascot-top);
  left: 50%;
  right: auto;
  width: var(--mascot-size);
  max-width: none;
  transform: translate(-50%, -50%);
}
.ground-shadow {
  z-index: 2;
  left: 50%;
  right: auto;
  top: calc(var(--mascot-top) + var(--mascot-size) * .438);
  bottom: auto;
  width: calc(var(--mascot-size) * .46);
  height: calc(var(--mascot-size) * .07);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #77715f66 0%, #92897640 35%, #aaa08a1a 62%, transparent 76%);
  filter: blur(4px);
  opacity: .66;
  transform: translateX(-50%);
  animation: grounded-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes grounded-breathe {
  0%, 100% { opacity: .66; scale: 1; }
  50% { opacity: .46; scale: .92; }
}

/* A small cream sculpture and amber bead balance the quiet upper corner. */
.scene::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 9%;
  top: 8%;
  width: clamp(42px, 10cqw, 64px);
  aspect-ratio: 1;
  border-radius: 27%;
  background: linear-gradient(140deg, #fffef9 4%, #f7f2e7 42%, #ded5c2 100%);
  box-shadow: inset 2px 3px 4px #fffdf8, inset -3px -4px 7px #c8bfa766, 7px 13px 18px #897d5a1c;
  transform: rotate(-17deg);
  pointer-events: none;
  animation: corner-sculpture-float 12s ease-in-out infinite;
}
.scene::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(9% + clamp(42px, 10cqw, 64px) - 3px);
  top: calc(8% + clamp(42px, 10cqw, 64px) - 7px);
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 23%, #ffe9aa 0%, #ffba50 31%, #f78827 65%, #df681c 100%);
  box-shadow: 2px 6px 9px #9b72351f;
  pointer-events: none;
  animation: corner-bead-float 9s ease-in-out infinite;
}
@keyframes corner-sculpture-float {
  0%, 100% { transform: translateY(0) rotate(-17deg); }
  50% { transform: translateY(-7px) rotate(-11deg); }
}
@keyframes corner-bead-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (min-width: 1600px) {
  .scene { --mascot-size: min(500px, 88cqw); }
}
@media (min-width: 681px) and (max-width: 900px) {
  .scene { --mascot-size: min(460px, 96cqw); }
}
@media (max-width: 680px) {
  .scene {
    --mascot-size: min(260px, 88cqw);
    --mascot-top: 53%;
  }
  .brand-ribbon,
  .brand-ribbon-depth {
    width: 125%;
    height: 70%;
    left: -12%;
    top: 9%;
  }
  .scene::before {
    width: 34px;
    left: 9%;
    top: 9%;
    border-radius: 10px;
  }
  .scene::after {
    left: calc(9% + 29px);
    top: calc(9% + 28px);
    width: 10px;
    height: 10px;
  }
  .ground-shadow { filter: blur(3px); }
  .small-bead { left: 12%; bottom: 12%; }
}

/* ===== 深色模式（10/16）：html.lg-dark 由页头脚本按系统深浅色 / 网站里选的主题加上 ===== */
html.lg-dark{color-scheme:dark;background:#121417}
html.lg-dark body{background:radial-gradient(ellipse at 30% 10%,#1d2024,transparent 65%),#121417}
html.lg-dark .login-card{background:#1a1d21;border-color:#262a2f;box-shadow:0 26px 70px -36px #000c,0 0 0 1px #ffffff08}
html.lg-dark .form-panel{background:#1a1d21;color:#e6e6e2}
/* 左侧场景：同样的暖色调，压成深色 */
html.lg-dark .scene{background:radial-gradient(ellipse at 51% 54%,#3a3630 0%,#2a2723 52%,#1f1d1a 100%)}
html.lg-dark .scene-grain{opacity:.06}
html.lg-dark .brand-ribbon{background:linear-gradient(142deg,#4f493f 2%,#3a352f 29%,#524b41 50%,#34302a 74%,#4b453c 94%);opacity:.45}
html.lg-dark .brand-ribbon-depth{background:#000;opacity:.18}
html.lg-dark .brand-ribbon::after{background:linear-gradient(112deg,transparent 34%,#fff4dc55 48%,#fff6 51%,transparent 66%)}
html.lg-dark .scene::before{background:linear-gradient(140deg,#5d584f 4%,#46423b 42%,#2f2c27 100%);box-shadow:inset 2px 3px 4px #ffffff1a,inset -3px -4px 7px #0006,7px 13px 18px #0005}
html.lg-dark .torus{border-color:#4a4b4c;box-shadow:inset 4px 5px 7px #0008,inset -4px -4px 6px #ffffff14,5px 10px 16px #0006}
/* 深色下装饰换成蓝、紫（10/16 用户：黄橙太亮，直接换蓝色和紫色） */
html.lg-dark .striped{opacity:.75;background:radial-gradient(circle at 28% 24%,#ffffff33 0,transparent 42%),repeating-linear-gradient(132deg,#4767c4 0 13px,#7f97dc 13px 17px,#2c3a63 17px 30px);box-shadow:inset -19px -14px 24px #0b123080,inset 8px 7px 10px #ffffff22,0 25px 33px #0006}
html.lg-dark .orange-pebble{background:radial-gradient(ellipse at 20% 18%,#ab9ad8 0,#7a60c4 32%,#5a42a6 66%,#3a2b74 100%);box-shadow:inset 4px 3px 9px #e6dcff55,inset -5px -6px 12px #1c124066,0 18px 26px #0006}
html.lg-dark .small-bead{background:radial-gradient(circle at 30% 24%,#b9cbff,#6c8cea 40%,#3b56b4 90%);box-shadow:0 8px 12px #0005}
html.lg-dark .scene::after{background:radial-gradient(circle at 28% 23%,#ddd0ff 0%,#a68af0 31%,#7657d4 65%,#4f3a9e 100%);box-shadow:2px 6px 9px #0006}
html.lg-dark .glass-orb{opacity:.5}
html.lg-dark .spark{color:#6f6a5f}
html.lg-dark .ground-shadow{background:radial-gradient(ellipse at center,#000a 0%,#0006 35%,#0002 62%,transparent 76%)}
/* 右侧表单 */
html.lg-dark .mast-wordmark{filter:invert(1) hue-rotate(180deg) brightness(1.15)}
html.lg-dark .form-heading h1{color:#ededea}
html.lg-dark .form-heading>p:last-child{color:#8d8f93}
html.lg-dark .form-panel .field label{color:#8d8f93}
html.lg-dark .form-panel .input-wrap input{color:#ededea;border-bottom-color:#3c4046}
html.lg-dark .form-panel .input-wrap input:focus{border-bottom-color:#7f8590}
html.lg-dark .form-panel .input-wrap input::placeholder{color:#5f6268}
html.lg-dark .form-panel .input-wrap input:-webkit-autofill{-webkit-text-fill-color:#ededea;-webkit-box-shadow:0 0 0 100px #1a1d21 inset;caret-color:#ededea}
html.lg-dark #password-toggle{color:#8d8f93}
html.lg-dark #submit-button{background:#3d74ff}
html.lg-dark #submit-button:hover{background:#4a7fff}
html.lg-dark .google-button{background:#262a2f;color:#e6e6e2}
html.lg-dark .google-button:hover{background:#2d3238}
html.lg-dark .google-notice{color:#7c7f84}
html.lg-dark .form-panel .form-error{color:#e8836f}
html.lg-dark #account-dialog{background:#1f2226;color:#e6e6e2;border-color:#2c3036}
html.lg-dark #account-dialog-description{color:#9a9ca0}