:root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  color: #3d1d0f;
  background: #fff8ef;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

.login-page {
  --orange: #ff6e08;
  --red: #ff2415;
  --yellow: #ffd329;
  --ink: #3d1d0f;
  --muted: #a69b94;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 51% 46%, rgba(255, 255, 255, .98), rgba(255, 249, 241, .94) 48%, rgba(255, 235, 217, .78) 100%);
}

.login-page::before {
  content: "";
  width: 74vw;
  height: 23vw;
  position: absolute;
  left: -18vw;
  top: 34vh;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(100deg, rgba(255,210,113,0), rgba(255,213,120,.13) 42%, rgba(255,246,218,.05) 70%, transparent);
  filter: blur(12px);
  will-change: transform, opacity;
  animation: background-sweep 16s ease-in-out infinite alternate;
}

.clip-defs { position: absolute; pointer-events: none; }

.ambient,
.page-star {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.ambient {
  border-radius: 50%;
  filter: blur(3px);
  opacity: .48;
  will-change: transform, opacity;
  animation: ambient-drift 24s ease-in-out infinite alternate;
}

.ambient-one {
  width: 30vw;
  height: 30vw;
  left: -15vw;
  top: -18vw;
  background: radial-gradient(circle at 68% 68%, rgba(255, 189, 129, .3), rgba(255, 224, 194, .02) 72%);
  animation-name: ambient-one-drift;
}

.ambient-two {
  width: 38vw;
  height: 38vw;
  right: -20vw;
  bottom: -25vw;
  background: radial-gradient(circle at 25% 25%, rgba(255, 153, 79, .31), rgba(255, 201, 148, .02) 70%);
  animation-delay: -11s;
}

.ambient-three {
  width: 26vw;
  height: 26vw;
  right: 28vw;
  top: -20vw;
  background: radial-gradient(circle, rgba(255, 255, 255, .72), transparent 70%);
  animation-delay: -7s;
}

.page-star {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .95);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 6px rgba(255, 204, 119, .7));
  animation: star-pulse 3.9s ease-in-out infinite;
}

.star-one { left: 9%; top: 16%; animation-name: star-float-one; animation-duration: 6.4s; }
.star-two { right: 10%; top: 20%; animation-name: star-float-two; animation-duration: 7.2s; animation-delay: -2s; }
.star-three { left: 20%; bottom: 13%; animation-name: star-float-three; animation-duration: 8s; animation-delay: -3.4s; }

.drift-ribbon {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255, 183, 116, .18);
  border-radius: 50%;
  will-change: transform, opacity;
}
.drift-ribbon-one {
  width: 54vw;
  height: 18vw;
  left: 4vw;
  top: 24vh;
  transform: rotate(-8deg);
  opacity: .38;
  animation: ribbon-one-drift 18s ease-in-out infinite alternate;
}
.drift-ribbon-two {
  width: 36vw;
  height: 12vw;
  right: -8vw;
  bottom: 17vh;
  transform: rotate(14deg);
  opacity: .3;
  animation: ribbon-two-drift 22s ease-in-out infinite alternate;
}

.brand-lockup {
  position: absolute;
  z-index: 20;
  right: clamp(34px, 5vw, 78px);
  top: clamp(24px, 4vh, 48px);
  width: clamp(184px, 15.5vw, 238px);
}

.brand-lockup .brand-logo-full {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

.experience-shell {
  width: 1240px;
  height: 650px;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) scale(var(--layout-scale, 1));
  transform-origin: center center;
}

/* Entrance modules use the individual transform property. Keep them from
   overwriting the positioned ancestors' transform during animation. */
.experience-shell,
.paper-wrap {
  translate: 0 0;
}

.paper-wrap {
  position: absolute;
  width: 790px;
  aspect-ratio: 1.48 / 1;
  right: 0;
  top: 50%;
  transform: translateY(-48%);
  filter: drop-shadow(0 20px 34px rgba(159, 88, 33, .12));
}

.paper-contact-close {
  position: absolute;
  right: 48px;
  top: 42px;
  z-index: 50;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #8c6b5d;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(238,149,85,.42);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(169,90,34,.08);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.paper-contact-close:hover { transform: rotate(8deg); color: var(--orange); background: white; }

.paper-surface {
  position: absolute;
  inset: 26px 30px 36px 27px;
  overflow: hidden;
  border-radius: 54px;
}

.paper-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.paper-art-shadow { fill: rgba(211, 129, 66, .16); }
.paper-art-body {
  fill: url(#paperFill);
  stroke: rgba(242, 157, 94, .43);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.paper-art-highlight {
  fill: none;
  stroke: rgba(255,255,255,.94);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.paper-art-fold { fill: url(#foldFill); }
.paper-art-fold-line {
  fill: none;
  stroke: rgba(232, 142, 76, .46);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.paper-surface { background: transparent; overscroll-behavior: none; }

.paper-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.75), transparent 42%, rgba(255,209,165,.08));
}

.view-stage {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
}

.login-view,
.contact-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .48s ease, filter .48s ease, transform .72s cubic-bezier(.18,.86,.2,1);
}
.login-view { opacity: 1; transform: translateX(0); transition-delay: .14s; }
.contact-view { opacity: 0; filter: blur(2px); transform: translateX(42px); pointer-events: none; }
.paper-wrap.is-contact .login-view { opacity: 0; filter: blur(2px); transform: translateX(-42px); pointer-events: none; transition-delay: 0s; }
.paper-wrap.is-contact .contact-view { opacity: 1; filter: none; transform: translateX(0); pointer-events: auto; transition-delay: .2s; }
.contact-heading,
.qr-card,
.contact-item { transition: opacity .42s ease, transform .62s cubic-bezier(.18,.86,.2,1); }
.contact-heading { opacity: 0; transform: translateY(12px); }
.qr-card { opacity: 0; transform: translateX(15px) rotate(-1deg); }
.contact-item { opacity: 0; transform: translateX(18px); }
.paper-wrap.is-contact .contact-heading { opacity: 1; transform: none; transition-delay: .36s; }
.paper-wrap.is-contact .qr-card { opacity: 1; transform: none; transition-delay: .44s; }
.paper-wrap.is-contact .contact-item:nth-child(1) { opacity: 1; transform: none; transition-delay: .46s; }
.paper-wrap.is-contact .contact-item:nth-child(2) { opacity: 1; transform: none; transition-delay: .53s; }
.paper-wrap.is-contact .contact-item:nth-child(3) { opacity: 1; transform: none; transition-delay: .6s; }

.panel-view {
  width: 100%;
  height: 100%;
  padding: 61px 82px 55px 72px;
}

.welcome-block {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-left: 78px;
  margin-bottom: 36px;
}

.welcome-star {
  color: #ff650b;
  font-size: 27px;
  line-height: 1.1;
  filter: drop-shadow(0 4px 6px rgba(255, 115, 25, .15));
}

.welcome-block h1,
.contact-heading h2 {
  margin: 0;
  color: var(--ink);
  letter-spacing: .02em;
}

.welcome-block h1 {
  font-size: clamp(31px, 2.5vw, 39px);
  font-weight: 800;
  line-height: 1.1;
}

.welcome-block p {
  margin: 9px 0 0;
  font-size: 17px;
  color: #5d3928;
  letter-spacing: .02em;
}

.login-form {
  display: grid;
  gap: 16px;
}

.field-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
}

.field-label {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}

.field-shell {
  min-width: 0;
  height: 65px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 21px;
  color: #aaa39d;
  border: 1px solid rgba(244, 150, 81, .58);
  border-radius: 17px;
  background: #fffdf9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 17px rgba(184, 111, 48, .025);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
}

.field-row:focus-within .field-shell {
  transform: translateY(-1px);
  border-color: rgba(255, 111, 24, .9);
  background: #fffdf9 !important;
  box-shadow: 0 0 0 4px rgba(255, 125, 31, .08), 0 11px 26px rgba(190, 93, 27, .07);
}

.field-shell svg {
  flex: 0 0 auto;
  stroke-width: 1.15;
}

.field-shell input {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent !important;
  background-image: none !important;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  caret-color: var(--orange);
}

.field-shell input::placeholder {
  color: #aaa39d;
  font-weight: 550;
  opacity: 1;
}

.field-shell input::selection {
  color: var(--ink);
  background: rgba(255, 211, 41, .32);
}

/* Chrome/Safari saved-login autofill must not paint a blue input rectangle. */
.field-shell input:-webkit-autofill,
.field-shell input:-webkit-autofill:hover,
.field-shell input:-webkit-autofill:focus,
.field-shell input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--orange) !important;
  -webkit-box-shadow: 0 0 0 1000px #fffdf9 inset !important;
  box-shadow: 0 0 0 1000px #fffdf9 inset !important;
  background-color: #fffdf9 !important;
  background-image: none !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  transition: background-color 99999s ease-out 0s;
}

.field-shell input:autofill {
  color: var(--ink) !important;
  background: #fffdf9 !important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px #fffdf9 inset !important;
}

.password-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #aaa39d;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--orange);
  outline: 2px solid rgba(255, 118, 24, .2);
}

.auth-actions {
  margin-left: 90px;
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1.68fr) minmax(118px, .72fr);
  gap: 12px;
}

.login-button,
.register-button {
  height: 66px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .08em;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease, color .22s ease;
}

.login-button {
  color: white;
  background: linear-gradient(105deg, #ff7d08 0%, #ff4a08 48%, #ff2116 100%);
  box-shadow: 0 11px 19px rgba(255, 66, 13, .19), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
  animation: login-button-breathe 5.8s ease-in-out infinite;
}

.register-button {
  text-decoration: none;
  color: #d64b16;
  background: rgba(255, 252, 247, .72);
  border: 1px solid rgba(244, 122, 54, .56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(181, 91, 28, .06);
}

.register-button:hover {
  transform: translateY(-3px);
  color: #ff5311;
  border-color: rgba(255, 104, 24, .9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 13px 24px rgba(181, 91, 28, .11);
}

.register-button:active { transform: translateY(1px) scale(.986); }

.login-button::after {
  content: "";
  width: 35%;
  position: absolute;
  inset: -35% auto -35% -48%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.08) 72%, transparent 100%);
  transform: skewX(-20deg);
  animation: login-button-glint 6.8s cubic-bezier(.3,0,.2,1) infinite;
  pointer-events: none;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.006);
  filter: saturate(1.06);
  box-shadow: 0 15px 27px rgba(255, 66, 13, .24), inset 0 1px 0 rgba(255,255,255,.3);
}

.login-button:hover .button-star { animation: button-star-answer .72s cubic-bezier(.18,.82,.2,1) both; }
.login-button:hover .button-smile { transform: rotate(-4deg) translateY(-2px) scale(1.06,1.16); }
.login-button:active:not(:disabled) { transform: translateY(1px) scale(.986); box-shadow: 0 6px 12px rgba(255,66,13,.16), inset 0 2px 3px rgba(135,35,0,.08); }
.login-button:disabled { cursor: wait; }

.button-star {
  position: absolute;
  left: 25px;
  color: var(--yellow);
  font-size: 24px;
  transform-origin: center;
}

.button-smile {
  width: 66px;
  height: 29px;
  position: absolute;
  right: 22px;
  bottom: 9px;
  border-bottom: 6px solid var(--yellow);
  border-radius: 0 0 70% 70%;
  transform: rotate(-7deg);
  filter: drop-shadow(0 4px 3px rgba(142, 60, 0, .17));
  transition: transform .32s cubic-bezier(.18,.82,.2,1);
}

.success-check { position: absolute; right: 30px; }

.contact-tab {
  width: auto;
  height: 34px;
  position: absolute;
  top: 31px;
  right: 43px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 2px 0 4px;
  color: #84665a;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  cursor: pointer;
  transition: color .2s ease, transform .25s cubic-bezier(.18,.82,.2,1), box-shadow .2s ease;
}

.contact-tab:hover {
  color: var(--orange);
  transform: translateY(-2px);
  box-shadow: none;
}

/* Reveal the exact yellow star region from the official DD face layer. */
.contact-star {
  width: 18px;
  height: 19px;
  position: relative;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  filter: drop-shadow(0 2px 4px rgba(255, 191, 23, .22));
  transform-origin: center;
  transition: transform .42s cubic-bezier(.18,.82,.2,1), filter .3s ease;
}

.contact-star img {
  width: 193px;
  max-width: none;
  height: auto;
  position: absolute;
  left: -148px;
  top: -109px;
  display: block;
}

.contact-tab:hover .contact-star,
.contact-tab:focus-visible .contact-star {
  transform: rotate(15deg) scale(1.17);
  filter: drop-shadow(0 3px 6px rgba(255, 181, 15, .35));
}

.contact-tab:focus-visible {
  outline: 2px solid rgba(255, 110, 8, .5);
  outline-offset: 3px;
}

.entrance {
  opacity: 0;
  translate: 0 10px;
  animation: module-in .65s cubic-bezier(.22,.8,.25,1) forwards;
}
.entrance-welcome { animation-delay: .12s; }
.entrance-account { animation-delay: .26s; }
.entrance-password { animation-delay: .36s; }
.entrance-submit { animation-delay: .48s; }
.entrance-contact { animation-delay: .62s; }

.contact-view {
  padding: 54px 72px 54px 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-close {
  position: absolute;
  right: 52px;
  top: 54px;
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  color: #8c6b5d;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(238, 149, 85, .36);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.contact-close:hover { transform: rotate(8deg); color: var(--orange); background: white; }

.contact-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 30px 28px;
}
.contact-heading > span { color: var(--orange); font-size: 25px; }
.contact-heading h2 { font-size: 25px; line-height: 1.25; }
.contact-heading p { margin: 10px 0 0; color: #806457; font-size: 15px; }

.contact-content {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.qr-card {
  padding: 10px 10px 9px;
  display: grid;
  gap: 8px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(244, 151, 82, .44);
  border-radius: 18px;
  box-shadow: 0 12px 22px rgba(164, 88, 30, .06);
  text-align: center;
  color: #765748;
  font-size: 13px;
}
.qr-card img { width: 100%; border-radius: 12px; }

.contact-list { display: grid; gap: 9px; position: relative; }
.contact-item {
  min-height: 67px;
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(244, 151, 82, .38);
  border-radius: 15px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.contact-item:hover { transform: translateX(3px); background: rgba(255,255,255,.8); border-color: rgba(255,112,25,.62); }
.contact-item small { display: block; color: #927567; margin-bottom: 4px; }
.contact-item strong { font-size: 17px; font-weight: 700; }
.trial-link {
  text-decoration: none;
}
.contact-action-icon { color: #856b5e; }
.copy-toast {
  position: absolute;
  right: 12px;
  top: -36px;
  padding: 7px 12px;
  border-radius: 9px;
  color: white;
  background: rgba(61,29,15,.9);
  font-size: 13px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: .2s ease;
}
.copy-toast.is-visible { opacity: 1; transform: translateY(0); }

.dd-stage {
  --look-x: 0px;
  --look-y: 0px;
  --look-intensity: 0;
  --eye-left-lift: 0px;
  --eye-right-lift: 0px;
  --eye-left-tilt: 0deg;
  --eye-right-tilt: 0deg;
  width: 228px;
  height: 238px;
  position: absolute;
  left: 14.5%;
  top: 50%;
  transform: translateY(-40%);
  perspective: 900px;
  z-index: 8;
}

.dd-stage::after {
  content: "";
  width: 250px;
  height: 145px;
  position: absolute;
  left: 165px;
  top: 72px;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 213, 68, .22), rgba(255, 207, 85, 0));
  clip-path: polygon(0 44%, 100% 0, 100% 100%);
  opacity: .62;
  transform-origin: left center;
  animation: mascot-beam 8s ease-in-out infinite;
  transition: opacity .35s ease;
}

.dd-character {
  width: 192px;
  height: 192px;
  position: absolute;
  left: 14px;
  top: 12px;
  transform-style: flat;
  transform: rotateY(-11deg) rotateZ(-2deg);
  transform-origin: 52% 88%;
  transition: transform .68s cubic-bezier(.16,.84,.25,1), filter .45s ease;
  animation: character-idle 8.8s cubic-bezier(.42,0,.25,1) infinite;
}

.dd-body-stack {
  position: absolute;
  inset: 0;
  transform-style: flat;
}

.dd-body-stack > .dd-arm { z-index: 30; }

.dd-register-hands {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
}

.dd-register-arm {
  width: 82px;
  height: 82px;
  position: absolute;
  top: 44px;
  opacity: 0;
  visibility: visible;
  transform-origin: 50% 82%;
  will-change: transform, opacity;
  pointer-events: none;
}

.dd-register-arm img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 6px rgba(127, 43, 7, .16));
}

.dd-register-arm-left {
  left: -8px;
  transform: translate(10px, 30px) rotate(8deg) scale(.78);
}

.dd-register-arm-right {
  right: -8px;
  transform: translate(-10px, 30px) rotate(-8deg) scale(.78);
}

.dd-shadow {
  width: 158px;
  height: 22px;
  position: absolute;
  left: 20px;
  top: 198px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(172, 67, 10, .28), rgba(255, 106, 13, 0) 70%);
  filter: blur(5px);
  animation: shadow-alive 8.8s ease-in-out infinite;
}

.dd-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.dd-body {
  z-index: 1;
  filter: drop-shadow(-7px 10px 9px rgba(154, 53, 9, .15));
}

.dd-face {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform-style: flat;
}

.dd-eye-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 46%;
  transition: transform .28s cubic-bezier(.16,.82,.22,1);
}

.dd-eye-wrap-left {
  transform-origin: 35% 46%;
  transform: translateY(var(--eye-left-lift)) rotate(var(--eye-left-tilt));
}
.dd-eye-wrap-right {
  transform-origin: 65% 46%;
  transform: translateY(var(--eye-right-lift)) rotate(var(--eye-right-tilt));
}

.dd-eye {
  filter: drop-shadow(0 5px 4px rgba(120, 50, 10, .12));
  transform: translateZ(12px);
  transform-origin: 50% 46%;
  animation: eye-soft-blink 8.8s cubic-bezier(.35,0,.2,1) infinite;
}
.dd-eye-right { animation-delay: .035s; }

.dd-pupil {
  z-index: 7;
  transition: transform .11s cubic-bezier(.16,.82,.22,1), opacity .2s ease, filter .2s ease;
  filter: drop-shadow(0 2px 2px rgba(94, 35, 5, .22));
}
.dd-pupil-left {
  transform: translate3d(var(--look-x), var(--look-y), 18px) scale(calc(1 + var(--look-intensity) * .06));
}
.dd-pupil-right {
  transform: translate3d(var(--look-x), var(--look-y), 18px) scale(calc(1 + var(--look-intensity) * .08));
}

/* One coherent idle performance: notice the form, give a tiny side-eye, then smile. */
.dd-idle .dd-pupil-left { animation: idle-pupil-left 8.8s cubic-bezier(.38,0,.22,1) infinite; }
.dd-idle .dd-pupil-right { animation: idle-pupil-right 8.8s cubic-bezier(.38,0,.22,1) infinite; }
.dd-idle .dd-eye-wrap-left { animation: idle-brow-left 8.8s cubic-bezier(.38,0,.22,1) infinite; }
.dd-idle .dd-eye-wrap-right { animation: idle-brow-right 8.8s cubic-bezier(.38,0,.22,1) infinite; }
.dd-idle.dd-tracking .dd-pupil,
.dd-idle.dd-tracking .dd-eye-wrap { animation: none; }

.dd-mouth-rig {
  position: absolute;
  inset: 0;
  z-index: 6;
  transform-origin: 50% 69%;
  transform: translateZ(14px);
  animation: smile-live 8.8s cubic-bezier(.4,0,.25,1) infinite;
  transition: transform .35s cubic-bezier(.18,.82,.2,1), filter .35s ease;
}

.dd-smile {
  z-index: 1;
  filter: drop-shadow(0 5px 3px rgba(122, 54, 0, .16));
}

.dd-face-star {
  z-index: 8;
  transform-origin: 82% 59%;
  transform: translateZ(20px);
  filter: drop-shadow(0 0 7px rgba(255, 221, 62, .75));
  animation: face-star-live 4.2s ease-in-out infinite;
  translate: 7px -7px;
  scale: .9;
}

.dd-eye-seam {
  width: 29px;
  height: 7px;
  position: absolute;
  top: 90px;
  z-index: 9;
  border-radius: 999px;
  border-top: 2px solid rgba(255, 248, 234, .92);
  box-shadow: 0 -1px 0 rgba(129, 42, 6, .18);
  opacity: 0;
  transform: scaleX(.34) translateY(2px);
  transition: opacity .24s ease, transform .38s cubic-bezier(.18,.82,.2,1);
}
.dd-eye-seam-left { left: 53px; transform: scaleX(.34) rotate(-2deg); }
.dd-eye-seam-right { left: 117px; transform: scaleX(.34) rotate(2deg); }

.dd-arm {
  width: 126px;
  height: 126px;
  position: absolute;
  top: 34px;
  z-index: 30;
  opacity: 0;
  transform-origin: 50% 82%;
  transition: transform .7s cubic-bezier(.16,.86,.2,1), opacity .22s ease;
}
.dd-arm img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 6px rgba(127, 43, 7, .16));
}
.dd-arm-left { left: -86px; transform: translate(-52px, 46px) rotate(34deg) scale(.88); }
.dd-arm-right { right: -86px; transform: translate(52px, 46px) rotate(-34deg) scale(.88); }

.dd-password .dd-face { transform: translateX(2px) rotateZ(-1deg); }
.dd-password .dd-pupil { opacity: .16; transform: translate3d(-3px, 3px, 18px) scale(.88, .28); }
.dd-password .dd-arm { opacity: 1; }
.dd-password .dd-arm-left { transform: translate(77px, 5px) rotate(-7deg) scale(.92); animation: hand-cover-left 1.02s cubic-bezier(.16,.86,.2,1) both; }
.dd-password .dd-arm-right { transform: translate(-77px, 5px) rotate(7deg) scale(.92); animation: hand-cover-right 1.08s cubic-bezier(.16,.86,.2,1) both; }
.dd-password .dd-eye-wrap { opacity: .92; transform: scaleY(.07) translateY(1px) !important; }
.dd-password .dd-eye { animation: none; }
.dd-password .dd-eye-seam { opacity: 0; }
.dd-password .dd-mouth-rig { animation: shy-mouth 2.9s ease-in-out infinite; }

.dd-peek .dd-arm { opacity: 1; }
.dd-peek .dd-arm-left { transform: translate(77px, 5px) rotate(-7deg) scale(.92); animation: peek-cover-left-cycle 6.6s cubic-bezier(.18,.82,.2,1) infinite; }
.dd-peek .dd-arm-right { opacity: 1; transform: translate(-46px, 55px) rotate(27deg) scale(.8); animation: peek-hand-right-cycle 6.6s cubic-bezier(.18,.82,.2,1) infinite; }
.dd-peek .dd-eye-wrap-left { transform: scaleY(.08) !important; animation: none; }
.dd-peek .dd-eye { animation: none; }
.dd-peek .dd-eye-wrap-left { opacity: 0; }
.dd-peek .dd-eye-seam-left { opacity: 0; transform: scaleX(.45); }
.dd-peek .dd-pupil { opacity: 0; }
.dd-peek .dd-eye-wrap-right::after {
  content: "";
  width: 15px;
  height: 21px;
  position: absolute;
  left: 58%;
  top: 42%;
  border-radius: 50%;
  background: #a52b0a;
  box-shadow: inset 3px 3px 0 rgba(255,216,135,.75), 0 2px 3px rgba(90,31,5,.2);
}
.dd-peek .dd-mouth-rig { animation: peek-smile-cycle 6.6s ease-in-out infinite; }

.dd-account .dd-eye-wrap { transform: scale(1.035) !important; }
.dd-account .dd-eye { animation: none; }
.dd-account .dd-pupil-left { transform: translate3d(32px, 0, 20px) scale(1.34); animation: account-pupil-pop-left .68s cubic-bezier(.15,.85,.2,1) both; }
.dd-account .dd-pupil-right { transform: translate3d(11px, 0, 20px) scale(1.36); animation: account-pupil-pop-right .72s cubic-bezier(.15,.85,.2,1) both; }
.dd-account .dd-mouth-rig { animation: curious-mouth 1.8s ease-in-out infinite; }

.dd-contact .dd-pupil-left { transform: translate3d(8px, -2px, 18px) scale(1.08); }
.dd-contact .dd-pupil-right { transform: translate3d(10px, -1px, 18px) scale(1.1); }
.dd-contact .dd-face-star { animation-duration: 1.7s; }
.dd-contact .dd-mouth-rig { animation: contact-smile-knock 2.7s cubic-bezier(.18,.82,.2,1) both, hello-mouth 2.2s 2.7s ease-in-out infinite; }
.dd-contact .dd-arm-left { opacity: 0; animation: none; }
.dd-contact .dd-arm-right {
  width: 112px;
  height: 112px;
  top: 50px;
  right: -42px;
  opacity: 0;
  transform-origin: 74% 69%;
  /* Rotate the source hand so the wrist stays beside the body and the three
     rounded knuckles point toward the sheet. This is the opposite of the
     previous backwards hand pose. */
  animation: contact-knock-right 2.7s cubic-bezier(.16,.84,.24,1) both;
}
.dd-contact .dd-shadow { animation: contact-shadow 2.7s ease-in-out both; }

/* Register invitation: one elastic, full-body cheer followed by a long pause.
   The hands travel upward beside the head, never across the eyes, so the pose
   reads immediately as celebration rather than password-covering. */
.dd-register .dd-character {
  animation: register-cheer-body 1.9s linear both;
}
.dd-register .dd-shadow {
  animation: register-cheer-shadow 1.9s linear both;
}
.dd-register .dd-register-arm {
  opacity: 0;
  visibility: visible;
}
.dd-register .dd-register-arm-left {
  animation: register-cheer-left 1.9s linear both;
}
.dd-register .dd-register-arm-right {
  animation: register-cheer-right 1.9s linear both;
}
.dd-register .dd-eye {
  animation: register-cheer-eye 1.9s linear both;
}
.dd-register .dd-pupil-left {
  animation: register-cheer-pupil-left 1.9s linear both;
}
.dd-register .dd-pupil-right {
  animation: register-cheer-pupil-right 1.9s linear both;
}
.dd-register .dd-mouth-rig {
  animation: register-cheer-smile 1.9s linear both;
}
.dd-register .dd-face-star {
  animation: register-cheer-star 1.9s linear both;
}
.dd-register .dd-sparkles i {
  animation-duration: .82s;
}
.dd-register::after {
  opacity: .82;
  transform: scaleX(1.04);
}

.dd-register-rest .dd-register-arm { opacity: 0; visibility: hidden; }
.dd-register-rest .dd-character {
  animation: none;
  transform: rotateY(-11deg) rotateZ(-2deg);
}

.dd-register-exit .dd-register-arm {
  opacity: 0;
  visibility: hidden;
  animation: none;
}
.dd-register-exit .dd-character {
  animation: none;
  transform: rotateY(-11deg) rotateZ(-2deg);
}

.dd-success .dd-mouth-rig { animation: success-smile .72s cubic-bezier(.18,.82,.2,1) both; }
.dd-success .dd-face-star { animation: face-star-celebrate .7s ease both; }

@keyframes eye-soft-blink {
  0%, 36%, 39%, 69%, 74%, 100% { transform: scaleY(1); }
  37.2%, 70.2%, 72.2% { transform: translateY(2px) scaleY(.86); }
}
@keyframes idle-pupil-left {
  0%, 42%, 76%, 100% { translate: 0 0; scale: 1; }
  36%, 37.2%, 39%, 69%, 70.2%, 72.2%, 74% { scale: 1 .14; }
  48% { translate: 3px -1px; scale: 1.04; }
  54% { translate: 8px -2px; scale: 1.08; }
  60% { translate: 6px 1px; scale: 1.05; }
  67% { translate: -2px 0; scale: 1.03; }
  71% { translate: 0 0; scale: 1; }
}
@keyframes idle-pupil-right {
  0%, 42%, 76%, 100% { translate: 0 0; scale: 1; }
  36%, 37.2%, 39%, 69%, 70.2%, 72.2%, 74% { scale: 1 .14; }
  49% { translate: 3px -1px; scale: 1.04; }
  55% { translate: 8px -2px; scale: 1.1; }
  61% { translate: 6px 1px; scale: 1.06; }
  68% { translate: -2px 0; scale: 1.03; }
  72% { translate: 0 0; scale: 1; }
}
@keyframes idle-brow-left {
  0%, 42%, 76%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -1px; rotate: -.5deg; }
  56% { translate: 0 -2.5px; rotate: -2deg; }
  63% { translate: 0 -1px; rotate: 1.4deg; }
  69% { translate: 0 1px; rotate: 1deg; }
}
@keyframes idle-brow-right {
  0%, 42%, 76%, 100% { translate: 0 0; rotate: 0deg; }
  51% { translate: 0 -.5px; rotate: -.5deg; }
  57% { translate: 0 -1.5px; rotate: -2deg; }
  63% { translate: 0 1px; rotate: 1.4deg; }
  70% { translate: 0 0; rotate: 1deg; }
}
@keyframes account-pupil-pop-left {
  0% { transform: translate3d(10px,1px,18px) scale(.72); }
  42% { transform: translate3d(35px,-1px,20px) scale(1.48); }
  72% { transform: translate3d(29px,1px,20px) scale(1.26); }
  100% { transform: translate3d(32px,0,20px) scale(1.34); }
}
@keyframes account-pupil-pop-right {
  0% { transform: translate3d(3px,1px,18px) scale(.7); }
  48% { transform: translate3d(13px,-1px,20px) scale(1.52); }
  75% { transform: translate3d(10px,1px,20px) scale(1.28); }
  100% { transform: translate3d(11px,0,20px) scale(1.36); }
}
@keyframes curious-mouth {
  0%, 100% { transform: translateZ(18px) translateY(2px) scale(1.035,.88); }
  38% { transform: translateZ(20px) translateY(-2px) scale(1.07,1.13); }
  57% { transform: translateZ(19px) translateY(1px) scale(.99,.78); }
  74% { transform: translateZ(20px) translateY(-1px) scale(1.05,1.06); }
}
@keyframes shy-mouth {
  0%,100% { transform: translateY(4px) rotate(-1.2deg) scale(.94,.72); }
  36% { transform: translateY(6px) rotate(1.2deg) scale(.86,.55); }
  57% { transform: translateY(3px) rotate(-.5deg) scale(.97,.82); }
  74% { transform: translateY(5px) rotate(.6deg) scale(.9,.62); }
}
@keyframes hello-mouth {
  0%,100% { transform: translateZ(16px) translateY(0) scale(1); }
  28% { transform: translateZ(19px) translateY(-4px) scale(1.08,1.2); }
  44% { transform: translateZ(17px) translateY(2px) scale(.96,.72); }
  61% { transform: translateZ(19px) translateY(-3px) scale(1.06,1.16); }
  76% { transform: translateZ(17px) translateY(1px) scale(.99,.84); }
}

/* A single joyful cheer: anticipation, upward reach, airborne stretch,
   cushioned landing, then a tidy return. Each limb follows the body's arc so
   the motion feels authored as one performance instead of separate parts. */
@keyframes register-cheer-body {
  0% { transform: rotateY(-11deg) rotateZ(-2deg); animation-timing-function: cubic-bezier(.36,0,.66,-.2); }
  10% { transform: translateY(6px) rotateY(-8deg) rotateZ(-3deg) scale(.975,1.035); animation-timing-function: cubic-bezier(.15,.88,.24,1); }
  28% { transform: translateY(-27px) rotateY(2deg) rotateZ(4deg) scale(1.035,.975); animation-timing-function: cubic-bezier(.18,.7,.25,1); }
  40% { transform: translateY(-35px) rotateY(4deg) rotateZ(-3deg) scale(1.045,.97); animation-timing-function: cubic-bezier(.34,0,.2,1); }
  52% { transform: translateY(-31px) rotateY(3deg) rotateZ(2deg) scale(1.035,.978); animation-timing-function: cubic-bezier(.3,0,.68,1); }
  70% { transform: translateY(5px) rotateY(-6deg) rotateZ(-2deg) scale(.97,1.045); animation-timing-function: cubic-bezier(.16,.82,.24,1); }
  82% { transform: translateY(-7px) rotateY(-4deg) rotateZ(1deg) scale(1.012,.992); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  92% { transform: translateY(1px) rotateY(-9deg) rotateZ(-1deg) scale(.995,1.008); animation-timing-function: cubic-bezier(.22,.8,.3,1); }
  100% { transform: rotateY(-11deg) rotateZ(-2deg); }
}
@keyframes register-cheer-shadow {
  0%, 100% { transform: scaleX(1); opacity: .82; }
  10% { transform: scaleX(1.1); opacity: .9; }
  32%, 53% { transform: scaleX(.61); opacity: .34; }
  70% { transform: scaleX(1.13); opacity: .91; }
  82% { transform: scaleX(.86); opacity: .59; }
}
@keyframes register-cheer-left {
  0% { opacity: 0; transform: translate(10px,30px) rotate(8deg) scale(.78); animation-timing-function: cubic-bezier(.16,.84,.24,1); }
  10% { opacity: .88; transform: translate(8px,20px) rotate(-8deg) scale(.84); animation-timing-function: cubic-bezier(.16,.8,.22,1); }
  28% { opacity: 1; transform: translate(0,-24px) rotate(-46deg) scale(.94); animation-timing-function: cubic-bezier(.2,.74,.25,1); }
  40% { opacity: 1; transform: translate(-8px,-47px) rotate(-60deg) scale(1); animation-timing-function: cubic-bezier(.3,0,.25,1); }
  49% { opacity: 1; transform: translate(-12px,-51px) rotate(-70deg) scale(1.025); animation-timing-function: cubic-bezier(.22,.6,.3,1); }
  57% { opacity: 1; transform: translate(-5px,-45px) rotate(-54deg) scale(.98); animation-timing-function: cubic-bezier(.25,.1,.3,1); }
  68% { opacity: 1; transform: translate(-10px,-49px) rotate(-65deg) scale(1.01); animation-timing-function: cubic-bezier(.22,.68,.28,1); }
  78% { opacity: .96; transform: translate(3px,-12px) rotate(-28deg) scale(.91); animation-timing-function: cubic-bezier(.18,.8,.24,1); }
  90% { opacity: .5; transform: translate(8px,17px) rotate(-2deg) scale(.83); }
  100% { opacity: 0; transform: translate(10px,27px) rotate(8deg) scale(.78); }
}
@keyframes register-cheer-right {
  0% { opacity: 0; transform: translate(-10px,30px) rotate(-8deg) scale(.78); animation-timing-function: cubic-bezier(.16,.84,.24,1); }
  10% { opacity: .88; transform: translate(-8px,20px) rotate(8deg) scale(.84); animation-timing-function: cubic-bezier(.16,.8,.22,1); }
  28% { opacity: 1; transform: translate(0,-24px) rotate(46deg) scale(.94); animation-timing-function: cubic-bezier(.2,.74,.25,1); }
  40% { opacity: 1; transform: translate(8px,-47px) rotate(60deg) scale(1); animation-timing-function: cubic-bezier(.3,0,.25,1); }
  49% { opacity: 1; transform: translate(12px,-51px) rotate(70deg) scale(1.025); animation-timing-function: cubic-bezier(.22,.6,.3,1); }
  57% { opacity: 1; transform: translate(5px,-45px) rotate(54deg) scale(.98); animation-timing-function: cubic-bezier(.25,.1,.3,1); }
  68% { opacity: 1; transform: translate(10px,-49px) rotate(65deg) scale(1.01); animation-timing-function: cubic-bezier(.22,.68,.28,1); }
  78% { opacity: .96; transform: translate(-3px,-12px) rotate(28deg) scale(.91); animation-timing-function: cubic-bezier(.18,.8,.24,1); }
  90% { opacity: .5; transform: translate(-8px,17px) rotate(2deg) scale(.83); }
  100% { opacity: 0; transform: translate(-10px,27px) rotate(-8deg) scale(.78); }
}
@keyframes register-cheer-eye {
  0%, 12%, 100% { transform: translateZ(12px) scaleY(1); }
  30%, 50% { transform: translateZ(12px) translateY(-1px) scaleY(.88); }
  38%, 43% { transform: translateZ(12px) translateY(2px) scaleY(.68); }
  70% { transform: translateZ(12px) translateY(1px) scaleY(.82); }
}
@keyframes register-cheer-pupil-left {
  0%, 100% { transform: translate3d(0,0,18px) scale(1); }
  24% { transform: translate3d(-3px,-4px,18px) scale(1.15); }
  40% { transform: translate3d(5px,-4px,18px) scale(1.18,.85); }
  68% { transform: translate3d(3px,1px,18px) scale(1.1,.84); }
}
@keyframes register-cheer-pupil-right {
  0%, 100% { transform: translate3d(0,0,18px) scale(1); }
  24% { transform: translate3d(3px,-4px,18px) scale(1.17); }
  40% { transform: translate3d(-4px,-4px,18px) scale(1.2,.85); }
  68% { transform: translate3d(4px,1px,18px) scale(1.12,.84); }
}
@keyframes register-cheer-smile {
  0%, 100% { transform: translateZ(14px) scale(1); }
  12% { transform: translateZ(16px) translateY(2px) scale(.98,.82); }
  30%, 52% { transform: translateZ(21px) translateY(-5px) scale(1.12,1.24); }
  68% { transform: translateZ(18px) translateY(-2px) scale(1.06,1.14); }
  82% { transform: translateZ(16px) scale(1.02,.92); }
}
@keyframes register-cheer-star {
  0%, 100% { transform: translateZ(20px) rotate(0) scale(.9); opacity: .9; }
  25% { transform: translate3d(6px,-7px,24px) rotate(19deg) scale(1.18); opacity: 1; }
  42% { transform: translate3d(8px,-12px,25px) rotate(42deg) scale(1.33); opacity: 1; }
  68% { transform: translate3d(4px,-4px,23px) rotate(14deg) scale(1.12); opacity: 1; }
}

@keyframes register-cheer-left-mobile {
  0% { opacity: 0; transform: translate(4px,14px) rotate(8deg) scale(.78); }
  10% { opacity: .88; transform: translate(3px,9px) rotate(-8deg) scale(.84); }
  28% { opacity: 1; transform: translate(0,-11px) rotate(-46deg) scale(.94); }
  40% { opacity: 1; transform: translate(-4px,-22px) rotate(-60deg) scale(1); }
  49% { opacity: 1; transform: translate(-6px,-24px) rotate(-70deg) scale(1.025); }
  57% { opacity: 1; transform: translate(-2px,-21px) rotate(-54deg) scale(.98); }
  68% { opacity: 1; transform: translate(-5px,-23px) rotate(-65deg) scale(1.01); }
  78% { opacity: .96; transform: translate(1px,-6px) rotate(-28deg) scale(.91); }
  90% { opacity: .5; transform: translate(3px,8px) rotate(-2deg) scale(.83); }
  100% { opacity: 0; transform: translate(4px,13px) rotate(8deg) scale(.78); }
}
@keyframes register-cheer-right-mobile {
  0% { opacity: 0; transform: translate(-4px,14px) rotate(-8deg) scale(.78); }
  10% { opacity: .88; transform: translate(-3px,9px) rotate(8deg) scale(.84); }
  28% { opacity: 1; transform: translate(0,-11px) rotate(46deg) scale(.94); }
  40% { opacity: 1; transform: translate(4px,-22px) rotate(60deg) scale(1); }
  49% { opacity: 1; transform: translate(6px,-24px) rotate(70deg) scale(1.025); }
  57% { opacity: 1; transform: translate(2px,-21px) rotate(54deg) scale(.98); }
  68% { opacity: 1; transform: translate(5px,-23px) rotate(65deg) scale(1.01); }
  78% { opacity: .96; transform: translate(-1px,-6px) rotate(28deg) scale(.91); }
  90% { opacity: .5; transform: translate(-3px,8px) rotate(2deg) scale(.83); }
  100% { opacity: 0; transform: translate(-4px,13px) rotate(-8deg) scale(.78); }
}

@keyframes register-hop {
  0%, 5%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  12% { translate: 0 5px; rotate: 0deg; scale: .982 1.025; }
  30% { translate: 0 -21px; rotate: 5.5deg; scale: 1.035 .975; }
  48% { translate: 0 2px; rotate: 3deg; scale: .986 1.028; }
  68% { translate: 0 0; rotate: 1deg; scale: .995 1.012; }
  86% { translate: 0 0; rotate: 0deg; scale: 1; }
}

@keyframes register-shadow {
  0%, 12%, 48%, 68%, 100% { transform: scaleX(1); opacity: .82; }
  30% { transform: scaleX(.7); opacity: .42; }
  58% { transform: scaleX(.88); opacity: .62; }
}

@keyframes register-clap-left {
  0% { translate: 61px 67px; rotate: 23deg; scale: .74; opacity: 0; }
  7% { translate: 66px 64px; rotate: 20deg; scale: .75; opacity: 1; }
  22% { translate: 101px 48px; rotate: -8deg; scale: .85; opacity: 1; }
  38% { translate: 72px 62px; rotate: 20deg; scale: .77; opacity: 1; }
  54% { translate: 102px 49px; rotate: -7deg; scale: .85; opacity: 1; }
  70% { translate: 74px 63px; rotate: 20deg; scale: .77; opacity: 1; }
  86% { translate: 96px 52px; rotate: -4deg; scale: .82; opacity: 1; }
  100% { translate: 61px 67px; rotate: 23deg; scale: .74; opacity: 0; }
}

@keyframes register-clap-right {
  0% { translate: -61px 67px; rotate: -23deg; scale: .74; opacity: 0; }
  7% { translate: -66px 64px; rotate: -20deg; scale: .75; opacity: 1; }
  22% { translate: -101px 48px; rotate: 8deg; scale: .85; opacity: 1; }
  38% { translate: -72px 62px; rotate: -20deg; scale: .77; opacity: 1; }
  54% { translate: -102px 49px; rotate: 7deg; scale: .85; opacity: 1; }
  70% { translate: -74px 63px; rotate: -20deg; scale: .77; opacity: 1; }
  86% { translate: -96px 52px; rotate: 4deg; scale: .82; opacity: 1; }
  100% { translate: -61px 67px; rotate: -23deg; scale: .74; opacity: 0; }
}

@keyframes register-eye-delight {
  0%, 100% { transform: translateZ(12px) scaleY(1); }
  22%, 54%, 86% { transform: translateZ(12px) translateY(1px) scaleY(.84); }
  30%, 70% { transform: translateZ(12px) translateY(-1px) scaleY(.95); }
}

@keyframes register-pupil-left {
  0%, 100% { transform: translate3d(2px,1px,18px) scale(1.04); }
  22%, 54%, 86% { transform: translate3d(7px,-1px,18px) scale(1.18,.82); }
  30%, 70% { transform: translate3d(6px,-3px,18px) scale(1.12); }
}

@keyframes register-pupil-right {
  0%, 100% { transform: translate3d(3px,1px,18px) scale(1.05); }
  22%, 54%, 86% { transform: translate3d(8px,-1px,18px) scale(1.2,.82); }
  30%, 70% { transform: translate3d(7px,-3px,18px) scale(1.14); }
}

@keyframes register-smile {
  0%, 100% { transform: translateZ(16px) translateY(0) scale(1); }
  22%, 54%, 86% { transform: translateZ(20px) translateY(-5px) scale(1.11,1.22); }
  38%, 70% { transform: translateZ(17px) translateY(1px) scale(1.015,.84); }
}

@keyframes register-face-star {
  0%, 100% { transform: translateZ(20px) rotate(-4deg) scale(.94); opacity: .86; }
  22%, 54%, 86% { transform: translate3d(4px,-5px,25px) rotate(18deg) scale(1.2); opacity: 1; }
  38%, 70% { transform: translateZ(20px) rotate(-8deg) scale(.9); opacity: .8; }
}

@keyframes register-clap-left-mobile {
  0% { translate: 22px 27px; rotate: 22deg; scale: .74; opacity: 0; }
  7% { translate: 24px 25px; rotate: 18deg; scale: .75; opacity: 1; }
  22% { translate: 48px 20px; rotate: -7deg; scale: .84; opacity: 1; }
  38% { translate: 27px 25px; rotate: 19deg; scale: .77; opacity: 1; }
  54% { translate: 48px 20px; rotate: -7deg; scale: .84; opacity: 1; }
  70% { translate: 27px 25px; rotate: 19deg; scale: .77; opacity: 1; }
  86% { translate: 45px 21px; rotate: -4deg; scale: .82; opacity: 1; }
  100% { translate: 22px 27px; rotate: 22deg; scale: .74; opacity: 0; }
}

@keyframes register-clap-right-mobile {
  0% { translate: -22px 27px; rotate: -22deg; scale: .74; opacity: 0; }
  7% { translate: -24px 25px; rotate: -18deg; scale: .75; opacity: 1; }
  22% { translate: -48px 20px; rotate: 7deg; scale: .84; opacity: 1; }
  38% { translate: -27px 25px; rotate: -19deg; scale: .77; opacity: 1; }
  54% { translate: -48px 20px; rotate: 7deg; scale: .84; opacity: 1; }
  70% { translate: -27px 25px; rotate: -19deg; scale: .77; opacity: 1; }
  86% { translate: -45px 21px; rotate: 4deg; scale: .82; opacity: 1; }
  100% { translate: -22px 27px; rotate: -22deg; scale: .74; opacity: 0; }
}

@keyframes smile-live {
  0%, 43%, 76%, 100% { transform: translateZ(14px) scale(1); }
  49% { transform: translateZ(16px) translateY(1px) scale(.98,.82) rotate(.4deg); }
  55% { transform: translateZ(19px) translateY(-4px) scale(1.075,1.2) rotate(-1.2deg); }
  60% { transform: translateZ(16px) translateY(1px) scale(.96,.7) rotate(1deg); }
  65% { transform: translateZ(20px) translateY(-5px) scale(1.09,1.24) rotate(-.7deg); }
  70% { transform: translateZ(16px) translateY(0) scale(1.015,.9); }
  73% { transform: translateZ(14px) scale(1); }
}

@keyframes face-star-live {
  0%, 100% { transform: translateZ(20px) rotate(-5deg) scale(.94); opacity: .84; }
  48% { transform: translateZ(25px) rotate(9deg) scale(1.08); opacity: 1; }
}

@keyframes face-star-celebrate {
  0% { transform: translateZ(20px) rotate(0) scale(1); }
  45% { transform: translate3d(6px,-8px,26px) rotate(24deg) scale(1.32); }
  100% { transform: translateZ(20px) rotate(0) scale(1); }
}

.dd-sparkles i {
  width: 7px;
  height: 7px;
  position: absolute;
  background: white;
  clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter: drop-shadow(0 0 5px #ffd56d);
  animation: star-pulse 3.5s ease-in-out infinite;
}
.dd-sparkles i:nth-child(1) { left: 231px; top: 99px; }
.dd-sparkles i:nth-child(2) { left: 245px; top: 122px; animation-delay: -1.1s; }
.dd-sparkles i:nth-child(3) { left: 225px; top: 142px; animation-delay: -2.2s; }
.dd-sparkles i:nth-child(4) { left: 213px; top: 119px; animation-delay: -3s; }

.dd-account .dd-character { transform: translate(26px,-5px) rotateY(-2deg) rotateZ(3deg) scale(1.055); animation: account-curious .78s cubic-bezier(.16,.84,.22,1) both; }
.dd-password .dd-character { transform: translate(-5px,2px) rotateY(17deg) rotateZ(-5deg) scale(.98); animation: password-shy .86s cubic-bezier(.18,.82,.22,1) both; }
.dd-peek .dd-character { transform: translate(2px,-2px) rotateY(10deg) rotateZ(-2deg); animation: peek-character-cycle 6.6s ease-in-out infinite; }
.dd-contact .dd-character { transform: rotateY(-11deg) rotateZ(-2deg); animation: contact-approach-knock 2.7s cubic-bezier(.18,.82,.2,1) both; }
.dd-contact::after { opacity: .9; }
.dd-success .dd-character { animation: character-celebrate .75s ease both; }

@keyframes module-in { to { opacity: 1; translate: 0 0; } }
@keyframes login-button-breathe {
  0%, 100% { filter: saturate(1); box-shadow: 0 11px 19px rgba(255,66,13,.18), inset 0 1px 0 rgba(255,255,255,.25); }
  50% { filter: saturate(1.045) brightness(1.018); box-shadow: 0 13px 24px rgba(255,66,13,.23), inset 0 1px 0 rgba(255,255,255,.32); }
}
@keyframes login-button-glint { 0%, 54% { left: -48%; opacity: 0; } 58% { opacity: .8; } 72% { left: 118%; opacity: .55; } 73%, 100% { left: 118%; opacity: 0; } }
@keyframes button-star-answer { 0% { transform: scale(1) rotate(0); } 42% { transform: scale(1.32) rotate(13deg); } 72% { transform: scale(.92) rotate(-5deg); } 100% { transform: scale(1.08) rotate(0); } }
@keyframes ambient-drift { from { transform: translate3d(-.6vw,-.4vh,0) scale(.99); opacity: .42; } to { transform: translate3d(2.5vw, 1.8vh, 0) scale(1.045); opacity: .53; } }
@keyframes ambient-one-drift { from { transform: translate3d(-.5vw,-.4vh,0) scale(.99); opacity: .36; } to { transform: translate3d(1.8vw, 1.1vh, 0) scale(1.025); opacity: .46; } }
@keyframes ribbon-one-drift { from { transform: translate3d(-2vw,-1vh,0) rotate(-8deg) scale(.98); opacity: .26; } to { transform: translate3d(7vw,4vh,0) rotate(-4deg) scale(1.035); opacity: .48; } }
@keyframes ribbon-two-drift { from { transform: translate3d(2vw,2vh,0) rotate(14deg) scale(.97); opacity: .2; } to { transform: translate3d(-6vw,-3vh,0) rotate(9deg) scale(1.04); opacity: .42; } }
@keyframes background-sweep { from { transform: translate3d(-4vw,1vh,0) rotate(-5deg) scale(.97); opacity: .38; } to { transform: translate3d(18vw,-3vh,0) rotate(2deg) scale(1.05); opacity: .72; } }
@keyframes star-float-one { 0%,100% { opacity:.38; transform:translate3d(0,0,0) scale(.7) rotate(0); } 50% { opacity:1; transform:translate3d(10px,-8px,0) scale(1.3) rotate(12deg); } }
@keyframes star-float-two { 0%,100% { opacity:.34; transform:translate3d(0,0,0) scale(.72) rotate(0); } 50% { opacity:.95; transform:translate3d(-9px,7px,0) scale(1.22) rotate(-10deg); } }
@keyframes star-float-three { 0%,100% { opacity:.28; transform:translate3d(0,0,0) scale(.65) rotate(0); } 50% { opacity:.88; transform:translate3d(12px,-6px,0) scale(1.18) rotate(14deg); } }
@keyframes star-pulse { 0%,100% { opacity: .36; transform: translateY(0) scale(.65) rotate(0); } 48% { opacity: 1; transform: translateY(-5px) scale(1.35) rotate(12deg); } }
@keyframes character-idle {
  0%, 18%, 43%, 78%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  30% { translate: 0 -4px; scale: 1.008 .995; }
  50% { translate: 1px -2px; rotate: -1deg; }
  58% { translate: 2px -6px; rotate: -2deg; scale: 1.014 .99; }
  63% { translate: -1px -2px; rotate: 1.7deg; scale: .996 1.01; }
  68% { translate: 1px -6px; rotate: -1.2deg; scale: 1.014 .992; }
  74% { translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes shadow-alive { 0%,100% { transform: scaleX(1); opacity: .86; } 38% { transform: scaleX(.91); opacity: .68; } 68% { transform: scaleX(.88); opacity: .62; } }
@keyframes mascot-beam { 0%,100% { opacity: .48; transform: scaleX(.98); } 50% { opacity: .66; transform: scaleX(1.025); } }
@keyframes account-curious { 0% { transform: rotateY(-11deg) rotateZ(-2deg); } 45% { transform: translate(31px,-8px) rotateY(2deg) rotateZ(4deg) scale(1.07); } 70% { transform: translate(23px,-4px) rotateY(-3deg) rotateZ(2deg) scale(1.045); } 100% { transform: translate(26px,-5px) rotateY(-2deg) rotateZ(3deg) scale(1.055); } }
@keyframes password-shy { 0% { transform: rotateY(-11deg) rotateZ(-2deg); } 38% { transform: translate(3px,-5px) rotateY(8deg) rotateZ(-2deg) scale(1.02); } 100% { transform: translate(-5px,2px) rotateY(17deg) rotateZ(-5deg) scale(.98); } }
@keyframes hand-cover-left { 0% { transform: translate(-52px,46px) rotate(34deg) scale(.88); opacity: 0; } 18% { transform: translate(-31px,38px) rotate(27deg) scale(.91); opacity: 1; } 68% { transform: translate(83px,-2px) rotate(-10deg) scale(.98); } 84% { transform: translate(74px,8px) rotate(-5deg) scale(.9); } 100% { transform: translate(77px,5px) rotate(-7deg) scale(.92); opacity: 1; } }
@keyframes hand-cover-right { 0% { transform: translate(52px,46px) rotate(-34deg) scale(.88); opacity: 0; } 20% { transform: translate(31px,38px) rotate(-27deg) scale(.91); opacity: 1; } 70% { transform: translate(-83px,-2px) rotate(10deg) scale(.98); } 86% { transform: translate(-74px,8px) rotate(5deg) scale(.9); } 100% { transform: translate(-77px,5px) rotate(7deg) scale(.92); opacity: 1; } }
@keyframes peek-cover-left-cycle {
  0%, 58%, 100% { transform: translate(77px,5px) rotate(-7deg) scale(.92); }
  64% { transform: translate(73px,1px) rotate(-10deg) scale(.95); }
  72%, 77% { transform: translate(79px,3px) rotate(-6deg) scale(.94); }
  86% { transform: translate(74px,7px) rotate(-9deg) scale(.91); }
}
@keyframes peek-hand-right-cycle {
  0% { transform: translate(-77px,5px) rotate(7deg) scale(.92); }
  13%, 58% { transform: translate(-46px,55px) rotate(27deg) scale(.8); }
  68% { transform: translate(-66px,20px) rotate(15deg) scale(.88); }
  73%, 77% { transform: translate(-77px,5px) rotate(7deg) scale(.92); }
  88%, 100% { transform: translate(-46px,55px) rotate(27deg) scale(.8); }
}
@keyframes peek-character-cycle {
  0% { transform: translate(-5px,2px) rotateY(17deg) rotateZ(-5deg) scale(.98); }
  12%, 58% { transform: translate(2px,-2px) rotateY(10deg) rotateZ(-2deg); }
  66% { transform: translate(-2px,1px) rotateY(15deg) rotateZ(-4deg) scale(.99); }
  73%, 77% { transform: translate(-5px,3px) rotateY(18deg) rotateZ(-5deg) scale(.975); }
  88%, 100% { transform: translate(2px,-2px) rotateY(10deg) rotateZ(-2deg); }
}
@keyframes peek-smile-cycle {
  0%, 58%, 100% { transform: translateZ(18px) translateY(-2px) scale(1.04,1.12); }
  71%, 78% { transform: translateZ(16px) translateY(1px) scale(.98,.88); }
  88% { transform: translateZ(20px) translateY(-4px) scale(1.08,1.2); }
}
@keyframes contact-approach-knock {
  0% { transform: rotateY(-11deg) rotateZ(-2deg); }
  20% { transform: translate(23px,-3px) rotateY(-3deg) rotateZ(2deg) scale(1.012); }
  34% { transform: translate(52px,-6px) rotateY(1deg) rotateZ(4deg) scale(1.026); }
  40% { transform: translate(45px,-3px) rotateY(-1deg) rotateZ(2deg) scale(1.016); }
  47% { transform: translate(54px,-6px) rotateY(1deg) rotateZ(4deg) scale(1.029); }
  55% { transform: translate(46px,-4px) rotateY(-1deg) rotateZ(3deg) scale(1.018); }
  72% { transform: translate(18px,-2px) rotateY(-7deg) rotateZ(1deg) scale(1.008); }
  100% { transform: rotateY(-11deg) rotateZ(-2deg); }
}
@keyframes contact-knock-right {
  0%, 12% { opacity: 0; transform: translate(-14px,22px) rotate(126deg) scale(.76); }
  22% { opacity: 1; transform: translate(-5px,15px) rotate(130deg) scale(.84); }
  34% { opacity: 1; transform: translate(21px,5px) rotate(136deg) scale(.92); }
  40% { opacity: 1; transform: translate(8px,10px) rotate(132deg) scale(.87); }
  47% { opacity: 1; transform: translate(22px,5px) rotate(137deg) scale(.93); }
  55% { opacity: 1; transform: translate(8px,10px) rotate(132deg) scale(.87); }
  68% { opacity: 1; transform: translate(-4px,17px) rotate(129deg) scale(.82); }
  82% { opacity: .35; transform: translate(-12px,23px) rotate(126deg) scale(.78); }
  92%, 100% { opacity: 0; transform: translate(-14px,22px) rotate(126deg) scale(.76); }
}
@keyframes contact-smile-knock {
  0%, 18% { transform: translateZ(14px) scale(1); }
  34%, 50% { transform: translateZ(21px) translateY(-4px) scale(1.1,1.22); }
  66% { transform: translateZ(18px) translateY(-2px) scale(1.06,1.15); }
  100% { transform: translateZ(14px) scale(1); }
}
@keyframes contact-shadow {
  0%, 100% { transform: scaleX(1); opacity: .82; }
  32%, 52% { transform: translateX(24px) scaleX(.9); opacity: .62; }
}
@keyframes success-smile { 0% { transform: translateZ(14px) scale(1); } 45% { transform: translateZ(20px) translateY(-5px) scale(1.09,1.2); } 72% { transform: translateZ(17px) translateY(-2px) scale(1.04,.95); } 100% { transform: translateZ(18px) translateY(-3px) scale(1.07,1.16); } }
@keyframes character-celebrate { 0% { transform: rotateY(-11deg) rotateZ(-2deg); } 45% { transform: translateY(-14px) rotateY(5deg) rotateZ(7deg) scale(1.04); } 100% { transform: rotateY(-11deg) rotateZ(-2deg); } }

@media (max-width: 720px) {
  /* Mobile uses its own hand geometry. Switching animation names at the
     breakpoint prevents a desktop keyframe from finishing after resize and
     leaving either hand detached from the compact body. */
  @keyframes hand-cover-left-mobile {
    0% { transform: translate(-24px,16px) rotate(25deg) scale(.88); opacity: 0; }
    22% { transform: translate(-8px,12px) rotate(17deg) scale(.92); opacity: 1; }
    70% { transform: translate(39px,-2px) rotate(-9deg) scale(.98); }
    86% { transform: translate(34px,3px) rotate(-4deg) scale(.92); }
    100% { transform: translate(36px,1px) rotate(-6deg) scale(.94); opacity: 1; }
  }
  @keyframes hand-cover-right-mobile {
    0% { transform: translate(24px,16px) rotate(-25deg) scale(.88); opacity: 0; }
    22% { transform: translate(8px,12px) rotate(-17deg) scale(.92); opacity: 1; }
    70% { transform: translate(-39px,-2px) rotate(9deg) scale(.98); }
    86% { transform: translate(-34px,3px) rotate(4deg) scale(.92); }
    100% { transform: translate(-36px,1px) rotate(6deg) scale(.94); opacity: 1; }
  }
  @keyframes peek-cover-left-cycle-mobile {
    0%, 58%, 100% { transform: translate(36px,1px) rotate(-6deg) scale(.94); }
    64% { transform: translate(34px,-1px) rotate(-9deg) scale(.96); }
    72%, 77% { transform: translate(37px,0) rotate(-5deg) scale(.95); }
    86% { transform: translate(35px,3px) rotate(-8deg) scale(.92); }
  }
  @keyframes peek-hand-right-cycle-mobile {
    0% { transform: translate(-36px,1px) rotate(6deg) scale(.94); }
    13%, 58% { transform: translate(-24px,23px) rotate(22deg) scale(.82); }
    68% { transform: translate(-31px,9px) rotate(13deg) scale(.89); }
    73%, 77% { transform: translate(-36px,1px) rotate(6deg) scale(.94); }
    88%, 100% { transform: translate(-24px,23px) rotate(22deg) scale(.82); }
  }
  @keyframes peek-character-cycle-mobile {
    0% { transform: translate(-2px,1px) rotateY(12deg) rotateZ(-4deg) scale(.985); }
    12%, 58% { transform: translate(1px,-1px) rotateY(8deg) rotateZ(-2deg); }
    66% { transform: translate(-1px,1px) rotateY(11deg) rotateZ(-3deg) scale(.99); }
    73%, 77% { transform: translate(-2px,2px) rotateY(13deg) rotateZ(-4deg) scale(.98); }
    88%, 100% { transform: translate(1px,-1px) rotateY(8deg) rotateZ(-2deg); }
  }
  @keyframes contact-approach-knock-mobile {
    0%, 100% { transform: rotateY(-8deg) rotateZ(-2deg); }
    20% { transform: translate(4px,1px) rotateY(-2deg) rotateZ(2deg) scale(1.01); }
    34% { transform: translate(10px,0) rotateY(0) rotateZ(3deg) scale(1.02); }
    40% { transform: translate(7px,2px) rotateY(-2deg) rotateZ(1deg) scale(1.01); }
    47% { transform: translate(11px,0) rotateY(0) rotateZ(3deg) scale(1.021); }
    55% { transform: translate(7px,1px) rotateY(-2deg) rotateZ(2deg) scale(1.012); }
  }
  @keyframes contact-knock-right-mobile {
    0%, 12% { opacity: 0; transform: translate(-6px,11px) rotate(126deg) scale(.78); }
    22% { opacity: 1; transform: translate(-2px,7px) rotate(130deg) scale(.84); }
    34% { opacity: 1; transform: translate(9px,3px) rotate(136deg) scale(.92); }
    40% { opacity: 1; transform: translate(4px,5px) rotate(132deg) scale(.87); }
    47% { opacity: 1; transform: translate(10px,3px) rotate(137deg) scale(.93); }
    55% { opacity: 1; transform: translate(4px,5px) rotate(132deg) scale(.87); }
    68% { opacity: .8; transform: translate(-2px,8px) rotate(129deg) scale(.82); }
    82%, 100% { opacity: 0; transform: translate(-6px,11px) rotate(126deg) scale(.78); }
  }

  body { overflow-y: auto; }
  .login-page {
    min-height: max(100dvh, 720px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .brand-lockup {
    top: 18px;
    right: 20px;
    width: 148px;
  }
  .experience-shell {
    width: 100%;
    height: 620px;
    left: 0;
    top: 52px;
    transform: none;
    transform-origin: top left;
  }
  .paper-wrap {
    width: 94vw;
    max-width: 480px;
    aspect-ratio: .82 / 1;
    right: 3vw;
    top: 93px;
    transform: none;
  }
  .paper-surface { inset: 18px 16px 24px; border-radius: 32px; }
  .panel-view { padding: 100px 27px 42px 25px; }
  .welcome-block {
    gap: 9px;
    margin-left: 52px;
    margin-bottom: 35px;
  }
  .welcome-star { font-size: 23px; }
  .welcome-block h1 { font-size: 29px; }
  .welcome-block p { margin-top: 7px; font-size: 14px; }
  .login-form { gap: 14px; }
  .field-row { grid-template-columns: 44px 1fr; gap: 10px; }
  .field-label { font-size: 16px; }
  .field-shell { height: 56px; padding: 0 14px; gap: 10px; border-radius: 15px; }
  .field-shell svg { width: 19px; height: 19px; }
  .field-shell input { font-size: 17px; font-weight: 600; }
  .field-shell input:-webkit-autofill,
  .field-shell input:-webkit-autofill:hover,
  .field-shell input:-webkit-autofill:focus,
  .field-shell input:-webkit-autofill:active { font-size: 17px !important; }
  .login-button {
    height: 58px;
    font-size: 20px;
    border-radius: 15px;
  }
  .register-button { height: 58px; font-size: 18px; border-radius: 15px; }
  .auth-actions {
    margin-left: 54px;
    grid-template-columns: minmax(0, 1.55fr) minmax(92px, .75fr);
    gap: 8px;
  }
  .button-star { left: 20px; font-size: 22px; }
  .button-smile { width: 57px; height: 28px; right: 17px; border-bottom-width: 5px; }
  .contact-tab { min-width: 0; height: 32px; top: 51px; right: 24px; font-size: 13px; }
  .contact-star { width: 16px; height: 17px; }
  .contact-star img { width: 178px; left: -136.5px; top: -101px; }
  .dd-stage {
    width: 112px;
    height: 116px;
    left: 21px;
    top: 39px;
    transform: none;
    z-index: 15;
  }
  .dd-stage::after { display: none; }
  .dd-character { width: 86px; height: 86px; left: 8px; top: 4px; }
  .dd-shadow { width: 74px; height: 14px; left: 7px; top: 88px; }
  .dd-sparkles i:nth-child(1) { left: 92px; top: 39px; }
  .dd-sparkles i:nth-child(2) { left: 101px; top: 53px; }
  .dd-sparkles i:nth-child(3) { left: 91px; top: 66px; }
  .dd-eye-seam { width: 13px; height: 4px; top: 39px; border-top-width: 1px; }
  .dd-eye-seam-left { left: 24px; }
  .dd-eye-seam-right { left: 53px; }
  .dd-peek .dd-eye-wrap-right::after { width: 6px; height: 9px; }
  .dd-arm { width: 54px; height: 54px; top: 14px; }
  .dd-arm-left { left: -36px; transform: translate(-24px,16px) rotate(25deg); }
  .dd-arm-right { right: -36px; transform: translate(24px,16px) rotate(-25deg); }
  .dd-password .dd-arm-left { transform: translate(36px,1px) rotate(-6deg); }
  .dd-password .dd-arm-right { transform: translate(-36px,1px) rotate(6deg); }
  .dd-peek .dd-arm-left { transform: translate(36px,1px) rotate(-6deg); }
  .dd-peek .dd-arm-right { transform: translate(-24px,23px) rotate(22deg); }
  .dd-password .dd-arm-left { animation-name: hand-cover-left-mobile; }
  .dd-password .dd-arm-right { animation-name: hand-cover-right-mobile; }
  .dd-peek .dd-arm-left { animation-name: peek-cover-left-cycle-mobile; }
  .dd-peek .dd-arm-right { animation-name: peek-hand-right-cycle-mobile; }
  .dd-peek .dd-character { animation-name: peek-character-cycle-mobile; }
  .dd-contact .dd-character { animation-name: contact-approach-knock-mobile; }
  .dd-contact .dd-arm-right {
    width: 50px;
    height: 50px;
    top: 23px;
    right: -17px;
    transform-origin: 74% 69%;
    animation-name: contact-knock-right-mobile;
  }
  .dd-register-arm {
    width: 42px;
    height: 42px;
    top: 20px;
  }
  .dd-register-arm-left { left: -4px; transform: translate(4px,14px) rotate(8deg) scale(.78); }
  .dd-register-arm-right { right: -4px; transform: translate(-4px,14px) rotate(-8deg) scale(.78); }
  .dd-register .dd-register-arm-left { animation-name: register-cheer-left-mobile; }
  .dd-register .dd-register-arm-right { animation-name: register-cheer-right-mobile; }
  /* Breakpoint changes can land midway through a desktop pose. Reset both
     hand systems first, then let the active compact-screen state opt in. */
  .dd-stage:not(.dd-password):not(.dd-peek):not(.dd-contact) > .dd-character .dd-arm {
    opacity: 0;
    animation: none;
    transform: none;
  }
  .dd-stage:not(.dd-register) .dd-register-arm,
  .dd-register-rest .dd-register-arm,
  .dd-register-exit .dd-register-arm {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }
  .contact-view { padding: 88px 25px 36px; }
  .contact-close { top: 55px; right: 27px; width: 38px; height: 38px; }
  .paper-contact-close { top: 55px; right: 27px; width: 38px; height: 38px; }
  .contact-heading { margin: 20px 28px 27px; gap: 9px; }
  .contact-heading h2 { font-size: 21px; max-width: 240px; }
  .contact-heading p { font-size: 13px; }
  .contact-heading > span { font-size: 22px; }
  .contact-content { grid-template-columns: 128px minmax(0,1fr); gap: 15px; }
  .qr-card { padding: 9px; border-radius: 16px; font-size: 11px; }
  .contact-list { gap: 9px; }
  .contact-item { min-height: 61px; grid-template-columns: 22px 1fr 18px; gap: 9px; padding: 8px 10px; border-radius: 15px; }
  .contact-item svg { width: 20px; height: 20px; }
  .contact-item strong { font-size: 14px; }
  .contact-item small { font-size: 11px; }
  .trial-link { font-size: 13px; }
}

@media (min-width: 480px) and (max-width: 720px) {
  .experience-shell { height: 660px; }
  .paper-wrap {
    width: 92vw;
    max-width: 560px;
    aspect-ratio: 1.02 / 1;
    right: 4vw;
    top: 88px;
  }
  .paper-surface { inset: 20px 18px 27px; border-radius: 36px; }
  .panel-view { padding: 96px 34px 42px 32px; }
  .welcome-block { margin-left: 60px; margin-bottom: 28px; }
  .login-form { gap: 12px; }
  .field-row { grid-template-columns: 52px 1fr; gap: 12px; }
  .field-shell { height: 58px; }
  .auth-actions { margin-left: 64px; }
  .contact-tab { top: 48px; right: 30px; }
  .contact-view { padding: 88px 32px 38px; }
  .contact-heading { margin-bottom: 20px; }
}

@media (max-width: 390px) {
  .paper-wrap { width: 96vw; right: 2vw; }
  .panel-view { padding-left: 19px; padding-right: 19px; }
  .welcome-block { margin-left: 44px; }
  .field-row { grid-template-columns: 42px 1fr; gap: 7px; }
  .auth-actions { margin-left: 49px; }
  .contact-content { grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
}

/* Coarse pointers do not have a meaningful Register hover. Keeping the
   dedicated celebration hands fully hidden also prevents a sticky hover
   state after orientation changes on phones and tablets. */
@media (hover: none), (pointer: coarse) {
  .dd-register-arm,
  .dd-register .dd-register-arm,
  .dd-register-rest .dd-register-arm,
  .dd-register-exit .dd-register-arm {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dd-character { transform: rotateY(-11deg) rotateZ(-2deg) !important; }
}

/* Production integration: preserve the locked V18 appearance while keeping
   all real controls at or above the V2.1 44px touch contract. */
.contact-tab { min-width: 44px; min-height: 44px; height: auto; }
.password-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
.paper-contact-close,
.contact-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.paper-contact-close[hidden] { display: none; }
.paper-contact-close:focus-visible { outline: 2px solid rgba(255,110,8,.5); outline-offset: 3px; }
.paper-contact-close[data-programmatic-focus="true"]:focus { outline: none; }
.field-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.password-toggle img { width: 21px; height: 21px; display: block; }
.contact-item > img { width: 24px; height: 24px; display: block; }
.contact-item > img.contact-action-icon { width: 20px; height: 20px; }
.login-alert {
  margin: -20px 0 14px 90px;
  padding: 8px 12px;
  border: 1px solid rgba(211,66,49,.28);
  border-radius: 12px;
  color: #a23327;
  background: rgba(255,242,239,.86);
  font-size: 13px;
  line-height: 1.4;
}
.contact-item-info { cursor: default; }
.contact-item-info:hover { transform: none; background: rgba(255,255,255,.5); border-color: rgba(244,151,82,.38); }
.contact-item-info .contact-action-icon { opacity: .58; }
.contact-item-info span.contact-action-icon { color: #856b5e; font-size: 12px; white-space: nowrap; }
.copy-toast { z-index: 3; }

@media (max-width: 720px) {
  .contact-tab { min-width: 44px; min-height: 44px; height: 44px; }
  .password-toggle { width: 44px; height: 44px; min-width: 44px; }
  .paper-contact-close,
  .contact-close { width: 44px; height: 44px; }
  .login-alert { margin: -22px 0 10px 54px; padding: 7px 10px; font-size: 12px; }
}

/* Tablets use the same unscaled sheet composition as the locked compact
   design. This avoids shrinking real controls below 44px at 768/1024 widths. */
@media (min-width: 721px) and (max-width: 1024px) {
  body { overflow-y: auto; }
  .login-page { min-height: max(100dvh, 768px); overflow-x: hidden; overflow-y: auto; }
  .brand-lockup { top: 22px; right: 28px; width: 168px; }
  .experience-shell {
    width: 100%;
    height: 700px;
    left: 0;
    top: 56px;
    transform: none;
    transform-origin: top left;
  }
  .paper-wrap {
    width: min(700px, 92vw);
    aspect-ratio: 1.25 / 1;
    left: 50%;
    right: auto;
    top: 46px;
    transform: translateX(-50%);
  }
  .paper-surface { inset: 20px 18px 27px; border-radius: 36px; }
  .panel-view { padding: 86px 48px 42px; }
  .welcome-block { margin-left: 70px; margin-bottom: 28px; }
  .welcome-block h1 { font-size: 31px; }
  .welcome-block p { font-size: 15px; }
  .login-form { gap: 14px; }
  .field-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .field-label { font-size: 18px; }
  .field-shell { height: 60px; }
  .auth-actions { margin-left: 78px; }
  .login-button,
  .register-button { height: 60px; }
  .contact-tab { top: 48px; right: 32px; }
  .dd-stage {
    left: calc(50% - min(350px, 46vw) + 14px);
    top: 26px;
    transform: scale(.66);
    transform-origin: top left;
    z-index: 15;
  }
  .dd-stage::after { display: none; }
  .paper-contact-close { top: 44px; right: 32px; }
  .contact-view { padding: 82px 46px 38px; }
  .contact-heading { margin-bottom: 24px; }
  .contact-content { grid-template-columns: 150px minmax(0, 1fr); gap: 22px; }
  .qr-card { padding: 9px; }
  .contact-item { min-height: 64px; }
  .login-alert { margin: -18px 0 12px 78px; }
}

@media (max-width: 370px) {
  .paper-wrap { aspect-ratio: .75 / 1; }
  .contact-content { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  .contact-item { grid-template-columns: 20px 1fr 18px; gap: 7px; padding: 7px 8px; }
  .contact-item strong { font-size: 13px; white-space: nowrap; }
  .contact-item-info span.contact-action-icon { font-size: 10px; }
}