Genarrative/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;700&display=swap');
@import 'tailwindcss';
@source not "../dist";
@source not "../dist_check";
@source not "../dist_check_final";
@source not "../dist_check_monster_position";

@font-face {
  font-family: 'Fusion Pixel';
  src: url('/fusion-pixel.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Noto Serif SC', 'Georgia', serif;
}

:root {
  --ui-scale: clamp(0.78, 0.72 + 0.45vw, 1.06);
  --platform-bottom-nav-height: 3.5rem;
  --platform-bottom-dock-outer-height: calc(
    var(--platform-bottom-nav-height) + env(safe-area-inset-bottom, 0px) +
      1.15rem
  );
  --platform-bottom-nav-padding: 0.25rem;
  --platform-bottom-nav-gap: 0.25rem;
  --platform-bottom-nav-radius: 1.2rem;
  --platform-bottom-nav-button-radius: 1rem;
  --platform-bottom-nav-icon-size: 1.05rem;
  --platform-bottom-nav-icon-shell-size: 1.55rem;
  --platform-bottom-nav-label-size: 11px;
  --platform-bottom-nav-label-tracking: 0.18em;
  --platform-bottom-nav-content-gap: 0.22rem;
  --platform-bottom-nav-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(182, 98, 63, 0.1);
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: #0a0a0a;
  color: #f4f4f5;
  -webkit-font-smoothing: antialiased;
}

.platform-viewport-shell {
  height: var(--platform-layout-viewport-height, 100vh);
  max-height: var(--platform-layout-viewport-height, 100vh);
  min-height: var(--platform-layout-viewport-height, 100vh);
  transform: translate3d(
    0,
    calc(-1 * var(--platform-keyboard-focus-offset, 0px)),
    0
  );
  transform-origin: top center;
  transition: transform 180ms ease;
}

@supports (height: 100dvh) {
  .platform-viewport-shell {
    height: var(--platform-layout-viewport-height, 100dvh);
    max-height: var(--platform-layout-viewport-height, 100dvh);
    min-height: var(--platform-layout-viewport-height, 100dvh);
  }
}

@keyframes character-animator-portrait-death-fall {
  0% {
    transform: translateY(0) rotate(0deg) scaleX(1) scale(1);
  }

  16% {
    transform: translateY(1%) rotate(-6deg) scaleX(1) scale(1);
  }

  34% {
    transform: translateY(4%) rotate(-18deg) scaleX(1) scale(0.98);
  }

  62% {
    transform: translateY(12%) rotate(-64deg) scaleX(-1) scale(0.9);
  }

  82% {
    transform: translateY(17%) rotate(-96deg) scaleX(-1) scale(0.81);
  }

  100% {
    transform: translateY(16%) rotate(-90deg) scaleX(-1) scale(0.82);
  }
}

@keyframes puzzle-clear-flash-sweep {
  0% {
    transform: translate3d(-135%, -135%, 0) rotate(18deg);
    opacity: 0;
  }

  18% {
    opacity: 0.18;
  }

  45% {
    opacity: 0.92;
  }

  78% {
    opacity: 0.22;
  }

  100% {
    transform: translate3d(135%, 135%, 0) rotate(18deg);
    opacity: 0;
  }
}

.puzzle-clear-flash-overlay {
  background: radial-gradient(
      circle at 22% 24%,
      rgba(255, 250, 214, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 76% 74%,
      rgba(255, 214, 150, 0.16),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(255, 251, 235, 0.08),
      rgba(255, 251, 235, 0.02)
    );
}

.puzzle-clear-flash-beam {
  position: absolute;
  inset: -48%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 248, 214, 0.18) 38%,
    rgba(255, 255, 255, 0.96) 50%,
    rgba(255, 235, 166, 0.28) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow:
    0 0 36px rgba(255, 250, 214, 0.28),
    0 0 110px rgba(255, 233, 163, 0.12);
  mix-blend-mode: screen;
  animation: puzzle-clear-flash-sweep 0.9s ease-out forwards;
}

@keyframes puzzle-merge-center-flash {
  0% {
    transform: translate(-50%, -50%) scale(0.34) rotate(0deg);
    opacity: 0;
    filter: blur(0);
  }

  24% {
    opacity: 1;
  }

  74% {
    opacity: 0.42;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.28) rotate(32deg);
    opacity: 0;
    filter: blur(1px);
  }
}

.puzzle-merge-center-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: linear-gradient(
      90deg,
      transparent 47%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 53%
    ),
    linear-gradient(
      0deg,
      transparent 47%,
      rgba(255, 246, 191, 0.9) 50%,
      transparent 53%
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.95) 0 10%,
      rgba(255, 236, 157, 0.46) 12% 38%,
      transparent 62%
    );
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.58),
    0 0 46px rgba(251, 191, 36, 0.32);
  mix-blend-mode: screen;
  animation: puzzle-merge-center-flash 0.72s ease-out forwards;
}

@keyframes puzzle-freeze-wash {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 0.72;
    clip-path: circle(76% at 50% 50%);
  }
}

.puzzle-freeze-effect-layer {
  background: radial-gradient(
      circle at 50% 50%,
      rgba(240, 253, 250, 0.2),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(165, 243, 252, 0.22), rgba(37, 99, 235, 0.1));
  animation: puzzle-freeze-wash 0.85s ease-out both;
}

@keyframes match3d-token-fly-to-tray {
  0% {
    opacity: 0.98;
    transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
  }

  62% {
    opacity: 1;
    transform: translate3d(
        calc(-50% + var(--match3d-fly-dx, 0px) * 0.82),
        calc(-50% + var(--match3d-fly-dy, 0px) * 0.82 - 10px),
        0
      )
      scale(calc(var(--match3d-fly-scale, 0.68) * 1.06)) rotate(4deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(
        calc(-50% + var(--match3d-fly-dx, 0px)),
        calc(-50% + var(--match3d-fly-dy, 0px)),
        0
      )
      scale(var(--match3d-fly-scale, 0.68)) rotate(0deg);
  }
}

.match3d-token-fly-to-tray {
  transform: translate3d(-50%, -50%, 0);
  animation: match3d-token-fly-to-tray 0.42s cubic-bezier(0.18, 0.86, 0.22, 1)
    both;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes match3d-tray-token-shift {
  0% {
    transform: translate3d(
      var(--match3d-tray-shift-x, 0px),
      var(--match3d-tray-shift-y, 0px),
      0
    );
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.match3d-tray-token-shift {
  animation: match3d-tray-token-shift 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform;
}

@keyframes match3d-tray-token-clear {
  0% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  62% {
    opacity: 1;
    transform: translate3d(
        calc(-50% + var(--match3d-tray-clear-dx, 0px)),
        calc(-50% + var(--match3d-tray-clear-dy, 0px)),
        0
      )
      scale(0.84);
  }

  100% {
    opacity: 0;
    transform: translate3d(
        calc(-50% + var(--match3d-tray-clear-dx, 0px)),
        calc(-50% + var(--match3d-tray-clear-dy, 0px)),
        0
      )
      scale(0.38);
    filter: blur(1px);
  }
}

.match3d-tray-token-clear {
  transform: translate3d(-50%, -50%, 0);
  animation: match3d-tray-token-clear 0.46s cubic-bezier(0.2, 0.72, 0.18, 1)
    both;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes match3d-tray-clear-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  42% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.match3d-tray-clear-flash {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.95) 0 10%,
      transparent 12%
    ),
    radial-gradient(circle, rgba(255, 236, 157, 0.48) 0 42%, transparent 64%);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.62),
    0 0 52px rgba(251, 191, 36, 0.34);
  mix-blend-mode: screen;
  animation: match3d-tray-clear-flash 0.46s ease-out both;
  transform: translate(-50%, -50%);
}

@keyframes match3d-merge-feedback-pulse {
  0% {
    opacity: 0;
    transform: scale(0.48);
  }

  42% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

.match3d-merge-feedback-pulse {
  animation: match3d-merge-feedback-pulse 0.52s ease-out both;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.56) 0 18%,
      transparent 20%
    ),
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 45%, transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  .match3d-token-fly-to-tray,
  .match3d-tray-token-shift,
  .match3d-tray-token-clear,
  .match3d-tray-clear-flash,
  .match3d-merge-feedback-pulse {
    animation-duration: 1ms;
  }
}

.fusion-pixel-app,
.fusion-pixel-app * {
  font-family: 'Fusion Pixel', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

.selection-hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.selection-hero-brand--left {
  align-items: flex-start;
  text-align: left;
}

.selection-hero-brand__title {
  font-family: 'Noto Serif SC', 'Georgia', serif !important;
  font-size: clamp(3rem, 10vw, 4.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.22em;
  color: #fffdf7;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.68),
    0 10px 28px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(129, 140, 248, 0.2);
}

.selection-hero-brand__subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 2vw, 0.95rem);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(0.72rem, 2vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(228, 228, 231, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.selection-hero-brand--left .selection-hero-brand__subtitle {
  justify-content: flex-start;
}

.selection-hero-brand__subtitle::before,
.selection-hero-brand__subtitle::after {
  content: '';
  width: clamp(1.75rem, 8vw, 3.2rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(96, 165, 250, 0.72),
    transparent
  );
  opacity: 0.82;
}

.fusion-pixel-app .story-top-tabs {
  display: none !important;
}

.platform-ui-shell,
.platform-ui-shell * {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

.platform-theme,
.platform-theme * {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

.platform-theme {
  color: var(--platform-text-strong);
}

.platform-theme--light {
  color-scheme: light;
  --platform-accent: #c7653d;
  --platform-body-fill: radial-gradient(
      circle at 8% 0%,
      rgba(240, 203, 169, 0.24),
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(226, 171, 134, 0.2),
      transparent 22%
    ),
    radial-gradient(
      circle at 54% 100%,
      rgba(204, 117, 76, 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #fffdf9 0%, #fdf9f5 54%, #f8efe7 100%);
  --platform-panel-shadow: 0 22px 60px rgba(112, 57, 30, 0.1),
    0 8px 22px rgba(255, 255, 255, 0.82);
  --platform-panel-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.985),
    rgba(253, 248, 243, 0.96)
  );
  --platform-panel-fill-soft: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.96),
    rgba(250, 243, 236, 0.9)
  );
  --platform-hero-fill: linear-gradient(
    135deg,
    rgba(244, 226, 211, 0.96),
    rgba(238, 208, 183, 0.9)
  );
  --platform-hero-glow-a: rgba(255, 255, 255, 0.42);
  --platform-hero-glow-b: rgba(228, 149, 91, 0.18);
  --platform-hero-overlay-strong: linear-gradient(
    135deg,
    rgba(238, 208, 183, 0.66),
    rgba(204, 117, 76, 0.18)
  );
  --platform-hero-overlay-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34),
    rgba(248, 233, 219, 0.22)
  );
  --platform-surface-border: rgba(226, 203, 184, 0.88);
  --platform-surface-hover-border: rgba(204, 117, 76, 0.42);
  --platform-shell-glow-1: rgba(255, 255, 255, 0.34);
  --platform-shell-glow-2: rgba(238, 208, 183, 0.22);
  --platform-shell-glow-3: rgba(210, 132, 93, 0.12);
  --platform-surface-glow-a: rgba(240, 203, 169, 0.18);
  --platform-surface-glow-b: rgba(204, 117, 76, 0.1);
  --platform-text-strong: #3d1f10;
  --platform-text-base: #6f5848;
  --platform-text-soft: #988476;
  --platform-text-muted: #a38f80;
  --platform-brand-logo-title: #4a220f;
  --platform-brand-logo-subtitle: #c7653d;
  --platform-brand-logo-shadow: #caa48b;
  --platform-line-soft: rgba(226, 203, 184, 0.72);
  --platform-subpanel-fill: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.94),
    rgba(250, 243, 236, 0.9)
  );
  --platform-subpanel-border: rgba(225, 204, 187, 0.82);
  --platform-warm-border: rgba(204, 117, 76, 0.28);
  --platform-warm-bg: rgba(234, 204, 179, 0.32);
  --platform-warm-text: #b6623f;
  --platform-cool-border: rgba(199, 117, 76, 0.24);
  --platform-cool-bg: rgba(238, 208, 183, 0.26);
  --platform-cool-text: #b76038;
  --platform-neutral-border: rgba(226, 203, 184, 0.44);
  --platform-neutral-bg: rgba(255, 253, 250, 0.7);
  --platform-neutral-text: #7b6150;
  --platform-button-primary-border: rgba(182, 98, 63, 0.32);
  --platform-button-primary-solid: #c7653d;
  --platform-button-primary-fill: linear-gradient(135deg, #df7f40, #b95d3a);
  --platform-button-primary-text: #fffaf5;
  --platform-button-secondary-fill: rgba(255, 253, 250, 0.78);
  --platform-button-secondary-text: #4b2412;
  --platform-button-ghost-fill: rgba(255, 253, 250, 0.56);
  --platform-button-ghost-text: #755a49;
  --platform-button-danger-border: rgba(185, 75, 58, 0.22);
  --platform-button-danger-fill: rgba(255, 237, 229, 0.94);
  --platform-button-danger-text: #a6402f;
  --platform-unread-dot-fill: #8b5a3d;
  --platform-unread-dot-glow: rgba(139, 90, 61, 0.34);
  --platform-success-border: rgba(73, 144, 96, 0.24);
  --platform-success-bg: rgba(237, 248, 239, 0.92);
  --platform-success-text: #2f7b46;
  --platform-icon-fill: rgba(255, 253, 250, 0.68);
  --platform-icon-border: rgba(226, 203, 184, 0.5);
  --platform-icon-text: #7b5c49;
  --platform-nav-fill: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.96),
    rgba(250, 243, 236, 0.92)
  );
  --platform-nav-active-fill: linear-gradient(
    180deg,
    rgba(238, 208, 183, 0.48),
    rgba(204, 117, 76, 0.16)
  );
  --platform-nav-active-border: rgba(204, 117, 76, 0.34);
  --platform-nav-active-shadow: 0 10px 24px rgba(182, 98, 63, 0.12);
  --platform-modal-fill: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.97),
    rgba(250, 243, 236, 0.95)
  );
  --platform-modal-border: rgba(255, 255, 255, 0.58);
  --platform-desktop-shell-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.99),
    rgba(253, 249, 245, 0.985)
  );
  --platform-desktop-shell-border: rgba(230, 213, 199, 0.94);
  --platform-desktop-shell-inner-border: rgba(233, 218, 205, 0.92);
  --platform-desktop-topbar-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(253, 249, 245, 0.92)
  );
  --platform-desktop-panel-fill: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.95),
    rgba(250, 243, 236, 0.91)
  );
  --platform-desktop-panel-border: rgba(226, 203, 184, 0.88);
  --platform-desktop-hover-shadow: 0 16px 30px rgba(112, 57, 30, 0.12);
  --platform-overlay-fill: linear-gradient(
    180deg,
    rgba(240, 203, 169, 0.14),
    rgba(255, 255, 255, 0.58)
  );
  --platform-track-border: rgba(226, 203, 184, 0.48);
  --platform-track-fill: rgba(255, 253, 250, 0.9);
  --platform-page-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(250, 243, 236, 0.8)
  );
  --platform-page-border: rgba(233, 218, 205, 0.88);
  --platform-input-fill: rgba(255, 253, 250, 0.94);
  --platform-input-fill-focus: rgba(255, 254, 252, 0.96);
  --platform-input-highlight: rgba(255, 255, 255, 0.9);
  --platform-input-focus-ring: rgba(204, 117, 76, 0.15);
  --platform-nav-item-text: #80695a;
  --platform-nav-item-text-active: #3d1f10;
  --platform-nav-item-hover-fill: rgba(253, 248, 243, 0.94);
  --platform-nav-item-icon-fill: rgba(250, 243, 236, 1);
  --platform-nav-item-icon-text: #7b5c49;
  --platform-nav-item-icon-active-fill: rgba(255, 254, 252, 0.98);
  --platform-nav-item-icon-active-text: #c7653d;
  --platform-nav-icon-active-shadow: 0 12px 24px rgba(182, 98, 63, 0.16);
  --platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
  --platform-bottom-nav-border: rgba(224, 181, 139, 0.58);
  --platform-bottom-nav-divider: rgba(225, 185, 145, 0.52);
  --platform-bottom-nav-text: #5b2b19;
  --platform-bottom-nav-muted-text: #7a4b37;
  --platform-bottom-nav-active-text: #f15a17;
  --platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
  --platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.28);
  --platform-bottom-nav-primary-text: #fffaf2;
  --platform-profile-hero-fill: linear-gradient(
    180deg,
    rgba(255, 254, 252, 0.96),
    rgba(250, 239, 229, 0.9)
  );
  --platform-profile-hero-border: rgba(255, 255, 255, 0.56);
  --platform-profile-hero-shadow: 0 20px 56px rgba(112, 57, 30, 0.16);
  --platform-profile-avatar-fill: linear-gradient(
    135deg,
    rgba(223, 127, 64, 0.96),
    rgba(181, 91, 56, 0.92)
  );
  --platform-profile-avatar-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
  --platform-profile-chip-fill: rgba(255, 253, 250, 0.88);
  --platform-profile-chip-hover-fill: rgba(255, 254, 252, 0.96);
  --platform-profile-chip-text: #755a49;
  --platform-profile-action-fill: linear-gradient(135deg, #df7f40, #b95d3a);
  --platform-profile-action-solid: #c7653d;
  --platform-profile-action-text: #fffaf5;
  --platform-profile-action-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
  --platform-card-overlay-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(250, 243, 236, 0.82)
  );
  --platform-card-overlay-strong: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(248, 239, 231, 0.92)
  );
  --platform-card-overlay-deep: radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.2),
      transparent 30%
    ),
    radial-gradient(circle at right, rgba(228, 149, 91, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(248, 239, 231, 0.9));
  --platform-recommend-runtime-fill: var(--platform-panel-fill);
  --platform-recommend-runtime-border: rgba(226, 203, 184, 0.42);
  --platform-recommend-runtime-shadow: 0 18px 44px rgba(112, 57, 30, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  --platform-recommend-runtime-state-fill: radial-gradient(
      circle at 50% 18%,
      rgba(204, 117, 76, 0.12),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(250, 243, 236, 0.94)
    );
  --platform-recommend-runtime-state-text: var(--platform-text-strong);
  --puzzle-runtime-shell-fill: var(--platform-body-fill);
  --puzzle-runtime-stage-fill: radial-gradient(
      circle at 50% 18%,
      rgba(204, 117, 76, 0.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(240, 203, 169, 0.18),
      transparent 28%
    ),
    linear-gradient(180deg, #fffdf9 0%, #fbf5ed 58%, #f4e5d7 100%);
  --puzzle-runtime-grid-line: rgba(112, 57, 30, 0.06);
  --puzzle-runtime-text-strong: var(--platform-text-strong);
  --puzzle-runtime-text-base: var(--platform-text-base);
  --puzzle-runtime-text-soft: var(--platform-text-soft);
  --puzzle-runtime-surface-fill: rgba(255, 253, 250, 0.76);
  --puzzle-runtime-surface-fill-strong: rgba(255, 253, 250, 0.9);
  --puzzle-runtime-surface-border: rgba(226, 203, 184, 0.48);
  --puzzle-runtime-board-fill: rgba(255, 253, 250, 0.68);
  --puzzle-runtime-board-border: rgba(204, 117, 76, 0.28);
  --puzzle-runtime-board-shadow: 0 30px 80px rgba(112, 57, 30, 0.14);
  --puzzle-runtime-piece-fill: rgba(255, 253, 250, 0.74);
  --puzzle-runtime-piece-border: transparent;
  --puzzle-runtime-piece-empty-fill: rgba(238, 208, 183, 0.34);
  --puzzle-runtime-piece-empty-text: rgba(111, 88, 72, 0.4);
  --puzzle-runtime-piece-selected-fill: linear-gradient(
    135deg,
    #df7f40,
    #b95d3a
  );
  --puzzle-runtime-piece-selected-text: #fffaf5;
  --puzzle-runtime-piece-selected-border: transparent;
  --puzzle-runtime-next-card-overlay: rgba(74, 34, 15, 0.06);
  --puzzle-runtime-control-fill: rgba(255, 253, 250, 0.72);
  --puzzle-runtime-control-hover-fill: rgba(204, 117, 76, 0.1);
  --puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
  --puzzle-runtime-primary-text: var(--platform-button-primary-text);
  --puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
  --puzzle-runtime-accent-text: var(--platform-cool-text);
  --puzzle-runtime-cool-text: #6e8d42;
  --puzzle-runtime-danger-fill: rgba(255, 237, 229, 0.9);
  --puzzle-runtime-danger-text: #a6402f;
  --puzzle-runtime-backdrop-fill: rgba(61, 31, 16, 0.34);
  --puzzle-runtime-dialog-fill: radial-gradient(
      circle at 12% 0%,
      rgba(204, 117, 76, 0.18),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(255, 254, 252, 0.98),
      rgba(250, 243, 236, 0.95)
    );
  --puzzle-runtime-dialog-border: rgba(204, 117, 76, 0.3);
  --puzzle-runtime-table-fill: rgba(255, 253, 250, 0.62);
  --puzzle-runtime-table-row-fill: rgba(204, 117, 76, 0.12);
  --puzzle-runtime-next-card-fill: rgba(255, 253, 250, 0.66);
  --puzzle-runtime-next-card-hover-fill: rgba(204, 117, 76, 0.1);
}

.platform-theme--dark {
  color-scheme: dark;
  --platform-accent: #5b6cff;
  --platform-body-fill: radial-gradient(
      circle at top,
      rgba(129, 140, 248, 0.2),
      transparent 30%
    ),
    radial-gradient(
      circle at top right,
      rgba(59, 130, 246, 0.12),
      transparent 24%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(34, 211, 238, 0.08),
      transparent 26%
    ),
    linear-gradient(180deg, #13151c 0%, #090b11 100%);
  --platform-panel-shadow: 0 28px 88px rgba(5, 8, 28, 0.5);
  --platform-panel-fill: linear-gradient(
    180deg,
    rgba(22, 20, 52, 0.95),
    rgba(7, 9, 21, 0.98)
  );
  --platform-panel-fill-soft: linear-gradient(
    180deg,
    rgba(122, 92, 255, 0.12),
    rgba(255, 255, 255, 0.03)
  );
  --platform-hero-fill: radial-gradient(
      circle at top left,
      rgba(129, 140, 248, 0.24),
      transparent 34%
    ),
    radial-gradient(circle at right, rgba(34, 211, 238, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(17, 22, 66, 0.95), rgba(8, 10, 24, 0.98));
  --platform-hero-glow-a: rgba(129, 140, 248, 0.18);
  --platform-hero-glow-b: rgba(34, 211, 238, 0.1);
  --platform-surface-border: rgba(160, 169, 255, 0.12);
  --platform-surface-hover-border: rgba(255, 255, 255, 0.16);
  --platform-shell-glow-1: rgba(129, 140, 248, 0.2);
  --platform-shell-glow-2: rgba(59, 130, 246, 0.12);
  --platform-shell-glow-3: rgba(34, 211, 238, 0.08);
  --platform-surface-glow-a: rgba(129, 140, 248, 0.18);
  --platform-surface-glow-b: rgba(34, 211, 238, 0.1);
  --platform-text-strong: #ffffff;
  --platform-text-base: rgb(228 228 231);
  --platform-text-soft: rgb(161 161 170);
  --platform-text-muted: rgb(161 161 170);
  --platform-brand-logo-title: #fff7dc;
  --platform-brand-logo-subtitle: #9fe7ff;
  --platform-brand-logo-shadow: #040814;
  --platform-line-soft: rgba(255, 255, 255, 0.1);
  --platform-subpanel-fill: rgba(255, 255, 255, 0.05);
  --platform-subpanel-border: rgba(255, 255, 255, 0.1);
  --platform-warm-border: rgba(167, 139, 250, 0.24);
  --platform-warm-bg: rgba(109, 40, 217, 0.18);
  --platform-warm-text: rgb(237 233 254);
  --platform-cool-border: rgba(103, 232, 249, 0.22);
  --platform-cool-bg: rgba(8, 145, 178, 0.14);
  --platform-cool-text: rgb(236 254 255);
  --platform-neutral-border: rgba(255, 255, 255, 0.08);
  --platform-neutral-bg: rgba(255, 255, 255, 0.05);
  --platform-neutral-text: rgb(228 228 231);
  --platform-button-primary-border: rgba(129, 140, 248, 0.3);
  --platform-button-primary-solid: #5b6cff;
  --platform-button-primary-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
  --platform-button-primary-text: rgb(238 248 255);
  --platform-button-secondary-fill: rgba(255, 255, 255, 0.05);
  --platform-button-secondary-text: rgb(244 244 245);
  --platform-button-ghost-fill: rgba(255, 255, 255, 0.03);
  --platform-button-ghost-text: rgb(212 212 216);
  --platform-button-danger-border: rgba(251, 113, 133, 0.2);
  --platform-button-danger-fill: rgba(244, 63, 94, 0.1);
  --platform-button-danger-text: rgb(255 228 230);
  --platform-unread-dot-fill: #d6a27c;
  --platform-unread-dot-glow: rgba(214, 162, 124, 0.24);
  --platform-success-border: rgba(52, 211, 153, 0.24);
  --platform-success-bg: rgba(16, 185, 129, 0.1);
  --platform-success-text: rgb(220 252 231);
  --platform-icon-fill: rgba(255, 255, 255, 0.05);
  --platform-icon-border: rgba(255, 255, 255, 0.1);
  --platform-icon-text: rgb(212 212 216);
  --platform-nav-fill: linear-gradient(
    180deg,
    rgba(109, 40, 217, 0.12),
    rgba(255, 255, 255, 0.03)
  );
  --platform-nav-active-fill: linear-gradient(
    180deg,
    rgba(91, 108, 255, 0.2),
    rgba(61, 217, 255, 0.08)
  );
  --platform-nav-active-border: rgba(160, 169, 255, 0.24);
  --platform-nav-active-shadow: 0 12px 28px rgba(8, 14, 42, 0.4);
  --platform-modal-fill: linear-gradient(
    180deg,
    rgba(16, 18, 46, 0.98),
    rgba(7, 8, 19, 0.98)
  );
  --platform-modal-border: rgba(160, 169, 255, 0.12);
  --platform-desktop-shell-fill: linear-gradient(
    180deg,
    rgba(8, 8, 30, 0.98),
    rgba(5, 6, 18, 0.99)
  );
  --platform-desktop-shell-border: rgba(160, 169, 255, 0.14);
  --platform-desktop-shell-inner-border: rgba(255, 255, 255, 0.03);
  --platform-desktop-topbar-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.03)
  );
  --platform-desktop-panel-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  --platform-desktop-panel-border: rgba(160, 169, 255, 0.12);
  --platform-desktop-hover-shadow: 0 16px 28px rgba(8, 11, 38, 0.2);
  --platform-overlay-fill: rgba(5, 8, 28, 0.72);
  --platform-track-border: rgba(255, 255, 255, 0.12);
  --platform-track-fill: rgba(255, 255, 255, 0.08);
  --platform-page-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  --platform-page-border: rgba(255, 255, 255, 0.06);
  --platform-input-fill: rgba(255, 255, 255, 0.05);
  --platform-input-fill-focus: rgba(255, 255, 255, 0.08);
  --platform-input-highlight: rgba(255, 255, 255, 0.06);
  --platform-input-focus-ring: rgba(91, 108, 255, 0.22);
  --platform-nav-item-text: rgb(161 161 170);
  --platform-nav-item-text-active: rgb(238 248 255);
  --platform-nav-item-hover-fill: rgba(91, 108, 255, 0.08);
  --platform-nav-item-icon-fill: rgba(255, 255, 255, 0.06);
  --platform-nav-item-icon-text: rgb(161 161 170);
  --platform-nav-item-icon-active-fill: linear-gradient(
    180deg,
    rgba(91, 108, 255, 0.24),
    rgba(61, 217, 255, 0.12)
  );
  --platform-nav-item-icon-active-text: rgb(238 248 255);
  --platform-nav-icon-active-shadow: 0 12px 24px rgba(8, 14, 42, 0.42);
  --platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
  --platform-bottom-nav-border: rgba(224, 181, 139, 0.64);
  --platform-bottom-nav-divider: rgba(225, 185, 145, 0.56);
  --platform-bottom-nav-text: #5b2b19;
  --platform-bottom-nav-muted-text: #7a4b37;
  --platform-bottom-nav-active-text: #f15a17;
  --platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
  --platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.3);
  --platform-bottom-nav-primary-text: #fffaf2;
  --platform-profile-hero-fill: linear-gradient(
    180deg,
    rgba(20, 24, 58, 0.96),
    rgba(8, 10, 24, 0.98)
  );
  --platform-profile-hero-border: rgba(160, 169, 255, 0.14);
  --platform-profile-hero-shadow: 0 24px 70px rgba(5, 8, 28, 0.42);
  --platform-profile-avatar-fill: linear-gradient(
    135deg,
    rgba(91, 108, 255, 0.94),
    rgba(61, 217, 255, 0.78)
  );
  --platform-profile-avatar-shadow: 0 14px 32px rgba(61, 217, 255, 0.16);
  --platform-profile-chip-fill: rgba(255, 255, 255, 0.08);
  --platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.14);
  --platform-profile-chip-text: rgb(228 228 231);
  --platform-profile-action-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
  --platform-profile-action-solid: #5b6cff;
  --platform-profile-action-text: rgb(238 248 255);
  --platform-profile-action-shadow: 0 14px 32px rgba(91, 108, 255, 0.22);
  --platform-card-overlay-soft: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.06),
    rgba(8, 10, 14, 0.74)
  );
  --platform-card-overlay-strong: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.14),
    rgba(8, 10, 14, 0.9)
  );
  --platform-card-overlay-deep: radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.14),
      transparent 30%
    ),
    radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
  --platform-recommend-runtime-fill: #030303;
  --platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
  --platform-recommend-runtime-shadow: inset 0 0 0 1px
      rgba(255, 255, 255, 0.025),
    0 18px 44px rgba(0, 0, 0, 0.18);
  --platform-recommend-runtime-state-fill: #030303;
  --platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
  --puzzle-runtime-shell-fill: #020617;
  --puzzle-runtime-stage-fill: radial-gradient(
      circle at 50% 20%,
      rgba(251, 191, 36, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(249, 115, 22, 0.16),
      transparent 26%
    ),
    linear-gradient(180deg, #2d160e, #020617);
  --puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
  --puzzle-runtime-text-strong: #ffffff;
  --puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
  --puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
  --puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
  --puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
  --puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
  --puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
  --puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
  --puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
  --puzzle-runtime-piece-border: transparent;
  --puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
  --puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
  --puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
  --puzzle-runtime-piece-selected-text: #020617;
  --puzzle-runtime-piece-selected-border: transparent;
  --puzzle-runtime-next-card-overlay: rgba(0, 0, 0, 0.1);
  --puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
  --puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
  --puzzle-runtime-primary-fill: #fde68a;
  --puzzle-runtime-primary-text: #020617;
  --puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
  --puzzle-runtime-accent-text: #fde68a;
  --puzzle-runtime-cool-text: #cffafe;
  --puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
  --puzzle-runtime-danger-text: #fee2e2;
  --puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
  --puzzle-runtime-dialog-fill: radial-gradient(
      circle at 14% 0%,
      rgba(251, 191, 36, 0.16),
      transparent 36%
    ),
    linear-gradient(180deg, rgba(29, 17, 12, 0.96), rgba(2, 6, 23, 0.96));
  --puzzle-runtime-dialog-border: rgba(251, 191, 36, 0.22);
  --puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
  --puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
  --puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
  --puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
}

.platform-brand-logo {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  line-height: 1;
}

.platform-brand-logo__title,
.platform-brand-logo__subtitle {
  font-synthesis: none;
  font-kerning: none;
  white-space: nowrap;
}

.platform-brand-logo__title {
  display: inline-flex;
  align-items: flex-end;
  font-family: 'Fusion Pixel', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 5.2vw, 2.65rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.04em;
  color: var(--platform-brand-logo-title);
}

.platform-brand-logo__title-suffix {
  display: inline-block;
  width: 0.5em;
  overflow: visible;
  font-family: inherit !important;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  transform: scale(0.5);
  transform-origin: left bottom;
}

.platform-brand-logo__subtitle {
  padding-left: 0.08rem;
  font-family: 'Fusion Pixel', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(0.56rem, 1.7vw, 0.7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--platform-brand-logo-subtitle);
}

.platform-main-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
}

.platform-main-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at top,
      var(--platform-shell-glow-1),
      transparent 30%
    ),
    radial-gradient(
      circle at top right,
      var(--platform-shell-glow-2),
      transparent 24%
    ),
    radial-gradient(
      circle at bottom left,
      var(--platform-shell-glow-3),
      transparent 26%
    );
  opacity: 0.9;
}

.platform-page-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  border: 1px solid var(--platform-page-border);
  border-radius: 2rem;
  background: var(--platform-page-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.platform-tab-panel-stack {
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.platform-mobile-bottom-dock {
  flex: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.75rem);
}

.platform-tab-panel {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
}

.platform-tab-panel--hidden {
  display: none;
}

.platform-tab-panel--active {
  display: block;
}

.platform-surface {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--platform-surface-border);
  border-radius: 1.75rem;
  background: var(--platform-panel-fill);
  box-shadow: var(--platform-panel-shadow);
}

.platform-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at top left,
      var(--platform-surface-glow-a),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom right,
      var(--platform-surface-glow-b),
      transparent 26%
    );
}

/* 背景图和遮罩必须保持绝对定位，避免 banner 图进入普通流后撑开首页布局。 */
.platform-surface > :not(.absolute) {
  position: relative;
  z-index: 1;
}

.platform-surface--soft {
  background: var(--platform-panel-fill-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.12);
}

.platform-surface--hero {
  background: var(--platform-hero-fill);
}

.platform-surface--hero::before {
  background: radial-gradient(
      circle at top left,
      var(--platform-hero-glow-a),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom right,
      var(--platform-hero-glow-b),
      transparent 32%
    ),
    var(--platform-hero-overlay-soft);
}

.platform-surface--light {
  border-color: var(--platform-line-soft);
  background: var(--platform-subpanel-fill);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.platform-surface--light::before {
  background: radial-gradient(
      circle at top right,
      var(--platform-hero-glow-a),
      transparent 32%
    ),
    radial-gradient(
      circle at bottom left,
      var(--platform-hero-glow-b),
      transparent 26%
    );
}

.platform-interactive-card {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    filter 180ms ease;
}

.platform-interactive-card:hover {
  transform: translateY(-2px);
  border-color: var(--platform-surface-hover-border);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
}

.platform-interactive-card:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.platform-public-work-card {
  background: var(--platform-subpanel-fill);
}

.platform-public-work-card__cover {
  background: color-mix(in srgb, var(--platform-panel-fill-soft) 86%, #000 14%);
}

.platform-public-work-card__cover::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.platform-public-work-card__body {
  background: color-mix(in srgb, var(--platform-subpanel-fill) 92%, #000 8%);
}

.platform-public-work-card__cover-stats {
  position: absolute;
  right: 0.65rem;
  bottom: 0.55rem;
  display: flex;
  max-width: calc(100% - 1.3rem);
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.platform-public-work-card__cover-stat {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  gap: 0.22rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.36);
  color: rgba(255, 255, 255, 0.92);
  padding: 0.16rem 0.48rem;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.platform-public-work-card__kind {
  max-width: 4.5rem;
  border: 1px solid var(--platform-cool-border);
  border-radius: 9999px;
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
  padding: 0.28rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-public-work-card__author-avatar {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 9999px;
  background: var(--platform-profile-avatar-fill);
  color: var(--platform-button-primary-text);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
}

.platform-public-work-card__author-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-ranking-panel {
  min-height: 100%;
}

.platform-ranking-tabs {
  margin-bottom: 0.6rem;
}

.platform-ranking-tab {
  position: relative;
  min-height: 2.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--platform-text-soft);
  padding: 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.platform-ranking-tab:hover {
  color: var(--platform-text-strong);
}

.platform-ranking-tab--active {
  color: var(--platform-text-strong);
}

.platform-ranking-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 0.18rem;
  border-radius: 9999px;
  background: var(--platform-warm-text);
}

.platform-ranking-item {
  display: grid;
  grid-template-columns: 2.15rem 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.8rem;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1.2rem;
  background: color-mix(
    in srgb,
    var(--platform-subpanel-fill) 88%,
    #050506 12%
  );
  padding: 0.7rem;
  color: var(--platform-text-base);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.platform-ranking-item:hover {
  transform: translateY(-1px);
  border-color: var(--platform-surface-hover-border);
  box-shadow: var(--platform-desktop-hover-shadow);
}

.platform-ranking-item__rank {
  min-width: 0;
  color: var(--platform-text-strong);
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.platform-ranking-item__cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1rem;
  background: var(--platform-subpanel-fill);
}

.platform-ranking-item__tags {
  display: flex;
  min-height: 1.35rem;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.platform-ranking-item__tags span {
  display: inline-flex;
  max-width: 5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 9999px;
  background: color-mix(
    in srgb,
    var(--platform-panel-fill-soft) 72%,
    transparent
  );
  color: var(--platform-text-soft);
  padding: 0.16rem 0.48rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-ranking-item__action {
  display: inline-flex;
  min-width: 4.2rem;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-cool-border);
  border-radius: 9999px;
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
  padding: 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
}

.platform-category-list-panel {
  display: grid;
  min-width: 0;
  gap: 0.72rem;
}

.platform-mobile-home-channel {
  position: relative;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: var(--platform-text-soft);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.platform-mobile-home-channel--active {
  color: var(--platform-text-strong);
}

.platform-mobile-home-channel--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 0.16rem;
  border-radius: 9999px;
  background: var(--platform-warm-text);
}

.platform-category-filter-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1.25rem;
  background: var(--platform-subpanel-fill);
  padding: 0.55rem 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.platform-category-filter-button {
  display: inline-flex;
  position: relative;
  min-height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--platform-cool-border);
  border-radius: 9999px;
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
  padding: 0 0.75rem;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.platform-category-filter-button__count {
  display: inline-flex;
  min-width: 1.18rem;
  height: 1.18rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--platform-warm-text);
  color: var(--platform-button-primary-text);
  padding: 0 0.28rem;
  font-size: 0.72rem;
  line-height: 1;
}

.platform-category-filter-divider {
  width: 1px;
  height: 1.85rem;
  flex: 0 0 auto;
  background: var(--platform-line-soft);
}

.platform-category-chip-scroll {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.55rem;
  overflow-x: auto;
  padding-right: 0.1rem;
}

.platform-category-chip {
  display: inline-flex;
  min-height: 2.25rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--platform-text-base);
  padding: 0 0.92rem;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.platform-category-chip--active {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-category-sort-button {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--platform-text-soft);
  padding: 0 0.2rem;
  font-size: 0.88rem;
  font-weight: 800;
}

.platform-category-filter-dialog {
  box-shadow: var(--platform-desktop-hover-shadow);
}

.platform-category-filter-dialog__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.platform-category-filter-dialog__option {
  min-height: 2.35rem;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 0.78rem;
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-base);
  padding: 0 0.75rem;
  font-size: 0.88rem;
  font-weight: 900;
}

.platform-category-filter-dialog__option--active {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-category-filter-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  border-top: 1px solid var(--platform-line-soft);
  padding: 0.85rem 1rem 1rem;
}

.platform-category-filter-dialog__action {
  min-height: 2.55rem;
  border-radius: 9999px;
  padding: 0 1rem;
  font-size: 0.92rem;
  font-weight: 900;
}

.platform-category-filter-dialog__action--secondary {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-base);
}

.platform-category-filter-dialog__action--primary {
  border: 1px solid var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-category-game-list {
  display: grid;
  min-width: 0;
  gap: 0.78rem;
}

.platform-category-game-item {
  display: grid;
  min-width: 0;
  width: 100%;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.78rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  color: var(--platform-text-base);
  padding: 0.1rem 0;
  text-align: left;
}

.platform-category-game-item__cover {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1rem;
  background: var(--platform-subpanel-fill);
}

.platform-category-game-item__body {
  min-width: 0;
}

.platform-category-game-item__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
}

.platform-category-game-item__title {
  min-width: 0;
  overflow: hidden;
  color: var(--platform-text-strong);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-category-game-item__badge {
  display: inline-flex;
  min-height: 1.22rem;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 0.36rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--platform-text-soft);
  padding: 0 0.38rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.platform-category-game-item__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.34rem;
  overflow: hidden;
  margin-top: 0.28rem;
  color: var(--platform-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.platform-category-game-item__meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-category-game-item__metric {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.14rem;
  color: var(--platform-cool-text);
}

.platform-category-game-item__summary {
  min-width: 0;
  overflow: hidden;
  margin-top: 0.35rem;
  color: var(--platform-text-soft);
  font-size: 0.82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-category-game-item__action {
  display: inline-flex;
  min-width: 4rem;
  min-height: 2.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-cool-border);
  border-radius: 9999px;
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
  padding: 0 0.8rem;
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.85rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.platform-pill--warm {
  border-color: var(--platform-warm-border);
  background: var(--platform-warm-bg);
  color: var(--platform-warm-text);
}

.platform-pill--cool {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-pill--neutral {
  border-color: var(--platform-neutral-border);
  background: var(--platform-neutral-bg);
  color: var(--platform-neutral-text);
}

.platform-pill--rose {
  border-color: var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
}

.platform-pill--success {
  border-color: var(--platform-success-border);
  background: var(--platform-success-bg);
  color: var(--platform-success-text);
}

.creation-work-list {
  grid-template-columns: minmax(0, 1fr);
}

.creation-work-card-shell {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 0.9rem;
  background: transparent;
}

.creation-work-card {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  width: 100%;
  min-height: 6.15rem;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 0.9rem;
  background: color-mix(
    in srgb,
    var(--platform-subpanel-fill) 88%,
    #050506 12%
  );
  padding: 0.55rem 0.58rem 0.55rem 0.6rem;
  color: var(--platform-text-base);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  touch-action: pan-y;
  transform: translateX(var(--creation-work-card-swipe-offset, 0));
  transition:
    transform 190ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    filter 180ms ease;
}

.creation-work-card--published {
  background: color-mix(
    in srgb,
    var(--platform-subpanel-fill) 90%,
    #06111a 10%
  );
}

.creation-work-card--draft {
  background: color-mix(in srgb, var(--platform-subpanel-fill) 92%, #040506 8%);
}

.creation-work-card--generating {
  border-color: color-mix(
    in srgb,
    var(--platform-cool-border) 64%,
    transparent
  );
}

.creation-work-card--swiping {
  transition: none;
}

.creation-work-card.platform-interactive-card:hover {
  transform: translateX(var(--creation-work-card-swipe-offset, 0))
    translateY(-2px);
  border-color: var(--platform-surface-hover-border);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
}

.creation-work-card.platform-interactive-card:active,
.creation-work-card--swiping.platform-interactive-card:hover {
  transform: translateX(var(--creation-work-card-swipe-offset, 0));
}

.creation-work-card__swipe-underlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(244, 63, 94, 0.12) 62%
  );
  opacity: var(--creation-work-card-action-opacity, 0);
  pointer-events: none;
  transition: opacity 160ms ease;
}

.creation-work-card-shell--actions-visible .creation-work-card__swipe-underlay {
  pointer-events: auto;
}

.creation-work-card__swipe-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
}

.creation-work-card__swipe-button {
  display: inline-flex;
  width: 4.75rem;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.creation-work-card__swipe-button--danger {
  background: linear-gradient(180deg, #c7653d, #8f3f27);
}

.creation-work-card__swipe-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.creation-work-card__side-cover {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 58%;
  overflow: hidden;
  background: var(--creation-work-card-cover-fallback), transparent;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.creation-work-card__side-cover-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  opacity: 1;
}

.creation-work-card__side-cover .custom-world-cover-artwork {
  inset: 0;
  background: transparent;
  background-position: center;
  background-size: cover;
}

.creation-work-card__side-cover
  .custom-world-cover-artwork
  > div:first-of-type {
  opacity: 0.18;
}

.creation-work-card__body {
  display: flex;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.38rem;
  align-self: stretch;
}

.creation-work-card__title-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.creation-work-card__title-lockup {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: 0.42rem;
}

.creation-work-card__state-mark {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9999px;
}

.creation-work-card__state-mark--draft {
  border-color: var(--platform-warm-border);
  background: var(--platform-warm-bg);
  color: var(--platform-warm-text);
}

.creation-work-card__state-mark--published {
  border-color: var(--platform-success-border);
  background: var(--platform-success-bg);
  color: var(--platform-success-text);
}

.creation-work-card__state-mark--generating {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.creation-work-card__title {
  min-width: 0;
  overflow: hidden;
  color: var(--platform-text-strong);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.18;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.creation-work-card__share-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--platform-text-soft);
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.creation-work-card__share-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--platform-cool-bg) 24%, transparent);
  color: var(--platform-cool-text);
}

.creation-work-card__share-button:focus-visible {
  outline: 2px solid var(--platform-cool-border);
  outline-offset: 2px;
}

.creation-work-card__meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.creation-work-card__badge {
  max-width: 100%;
}

.creation-work-card__summary {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--platform-text-soft);
  font-size: 0.8rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.creation-work-card__published-info {
  display: grid;
  min-width: 0;
  gap: 0.38rem;
}

.creation-work-card__metrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.creation-work-card__generating-mask {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(247, 248, 252, 0.3),
    rgba(17, 24, 39, 0.52)
  );
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.creation-work-card__spinner {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: creation-work-card-spinner 0.82s linear infinite;
}

.creation-work-card__unread-dot {
  position: absolute;
  right: 0.45rem;
  top: 0.45rem;
  z-index: 2;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: var(--platform-unread-dot-fill);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.26),
    0 0 12px var(--platform-unread-dot-glow);
}

@keyframes creation-work-card-spinner {
  to {
    transform: rotate(360deg);
  }
}

.creation-work-card-stat {
  --creation-work-stat-accent: #6b7cff;
  position: relative;
  min-width: 0;
  min-height: 3.15rem;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--creation-work-stat-accent) 24%, transparent);
  border-radius: 0.5rem;
  background: radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--creation-work-stat-accent) 16%, transparent),
      transparent 62%
    ),
    color-mix(in srgb, var(--platform-neutral-bg) 76%, transparent);
  padding: 0.42rem 0.42rem 0.46rem;
  box-shadow: 0 0.55rem 1.05rem
    color-mix(in srgb, var(--creation-work-stat-accent) 9%, transparent);
  backdrop-filter: blur(14px);
}

.creation-work-card-stat--play {
  --creation-work-stat-accent: #2f9d78;
}

.creation-work-card-stat--remix {
  --creation-work-stat-accent: #ff9a3d;
}

.creation-work-card-stat--like {
  --creation-work-stat-accent: #b64a35;
}

.creation-work-card-stat__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--platform-text-soft);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-work-card-stat__value {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.12rem;
  margin-top: 0.26rem;
  color: var(--platform-text-strong);
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.creation-work-card-stat__number {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
}

.creation-work-card-stat__unit {
  flex: 0 0 auto;
  color: var(--platform-text-soft);
  font-size: 0.58rem;
  font-weight: 800;
}

.creation-work-card-stat__growth {
  position: absolute;
  right: 0.35rem;
  bottom: 0.22rem;
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: #b64a35;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
}

.creation-work-card-incentive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.38rem;
  min-width: 0;
}

.creation-work-card-incentive__metric,
.creation-work-card-incentive__button {
  min-width: 0;
  border: 1px solid color-mix(in srgb, #6b7cff 22%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--platform-neutral-bg) 82%, transparent);
  backdrop-filter: blur(14px);
}

.creation-work-card-incentive__metric {
  overflow: hidden;
  padding: 0.38rem 0.42rem;
}

.creation-work-card-incentive__label {
  display: block;
  overflow: hidden;
  color: var(--platform-text-soft);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-work-card-incentive__value {
  display: block;
  margin-top: 0.18rem;
  overflow: hidden;
  color: var(--platform-text-strong);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-work-card-incentive__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 0.58rem;
  color: var(--platform-text-strong);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

.creation-work-card-incentive__button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #6b7cff 44%, transparent);
}

.creation-work-card-incentive__button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.square-hole-runtime__target-arrow {
  animation: square-hole-runtime-target-arrow 0.86s ease-in-out infinite;
}

@keyframes square-hole-runtime-target-arrow {
  0%,
  100% {
    transform: translate(-50%, -138%);
  }

  50% {
    transform: translate(-50%, -112%);
  }
}

.platform-tab {
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 9999px;
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-base);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.platform-tab:hover {
  transform: translateY(-1px);
  border-color: var(--platform-surface-hover-border);
  color: var(--platform-text-strong);
}

.platform-tab--active {
  border-color: var(--platform-nav-active-border);
  background: var(--platform-nav-active-fill);
  color: var(--platform-text-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--platform-nav-active-shadow);
}

.platform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.7rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease;
}

.platform-button:hover {
  transform: translateY(-1px);
}

.platform-button:active {
  transform: translateY(0);
}

.platform-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.platform-button--primary {
  border-color: var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: 0 16px 34px rgba(182, 98, 63, 0.18);
}

.platform-button--secondary {
  background: var(--platform-button-secondary-fill);
  color: var(--platform-button-secondary-text);
}

.platform-button--ghost {
  background: var(--platform-button-ghost-fill);
  color: var(--platform-button-ghost-text);
}

.platform-button--danger {
  border-color: var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
}

.platform-close-confirm-dialog > :first-child {
  border-color: var(--platform-line-soft) !important;
}

.platform-close-confirm-dialog > :first-child > .min-w-0 {
  color: var(--platform-text-strong) !important;
}

.platform-close-confirm-dialog__content {
  display: grid;
  gap: 0.9rem;
}

.platform-close-confirm-dialog__message {
  border: 1px solid var(--platform-warm-border);
  border-radius: 1rem;
  background: var(--platform-warm-bg);
  padding: 0.95rem 1rem;
  color: var(--platform-warm-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7;
}

.platform-close-confirm-dialog__actions {
  display: grid;
  gap: 0.75rem;
}

.platform-close-confirm-dialog__button {
  display: inline-flex;
  min-height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.platform-close-confirm-dialog__button:hover {
  transform: translateY(-1px);
}

.platform-close-confirm-dialog__button--primary {
  border-color: var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: 0 12px 26px rgba(182, 98, 63, 0.16);
}

.platform-close-confirm-dialog__button--secondary {
  border-color: var(--platform-neutral-border);
  background: var(--platform-neutral-bg);
  color: var(--platform-neutral-text);
}

.platform-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--platform-icon-border);
  background: var(--platform-icon-fill);
  color: var(--platform-icon-text);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.platform-icon-button:hover {
  transform: translateY(-1px);
  border-color: var(--platform-nav-active-border);
  background: var(--platform-nav-active-fill);
  color: var(--platform-text-strong);
}

.platform-bottom-nav {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--platform-bottom-nav-height);
  gap: var(--platform-bottom-nav-gap);
  border: 1px solid var(--platform-bottom-nav-border);
  border-radius: var(--platform-bottom-nav-radius);
  background: var(--platform-bottom-nav-fill);
  padding: var(--platform-bottom-nav-padding);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 24px rgba(119, 63, 25, 0.1);
  backdrop-filter: blur(12px);
}

.platform-bottom-nav__button {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: calc(
    var(--platform-bottom-nav-height) - var(--platform-bottom-nav-padding) * 2
  );
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--platform-bottom-nav-button-radius);
  background: transparent;
  padding: 0;
  color: var(--platform-nav-item-text);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.platform-bottom-nav__button:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: calc(var(--platform-bottom-nav-gap) * -0.5 - 0.5px);
  width: 1px;
  height: 48%;
  content: '';
  background: var(--platform-bottom-nav-divider);
  transform: translateY(-50%);
}

.platform-bottom-nav__button-content {
  position: relative;
  display: flex;
  min-height: 100%;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--platform-bottom-nav-content-gap);
}

.platform-bottom-nav__button:hover {
  color: var(--platform-bottom-nav-active-text);
  background: transparent;
}

.platform-bottom-nav__button--active {
  border-color: transparent;
  background: transparent;
  color: var(--platform-bottom-nav-active-text);
  box-shadow: none;
}

.platform-bottom-nav__button--primary {
  color: var(--platform-bottom-nav-active-text);
}

.platform-bottom-nav__button--primary .platform-bottom-nav__button-content {
  transform: translateY(-0.32rem);
}

.platform-bottom-nav__button--primary .platform-bottom-nav__icon-shell {
  width: calc(var(--platform-bottom-nav-icon-shell-size) + 0.58rem);
  height: calc(var(--platform-bottom-nav-icon-shell-size) + 0.58rem);
  background: var(--platform-bottom-nav-primary-fill);
  box-shadow: var(--platform-bottom-nav-primary-shadow);
}

.platform-bottom-nav__button--primary .platform-bottom-nav__icon {
  width: calc(var(--platform-bottom-nav-icon-size) + 0.18rem);
  height: calc(var(--platform-bottom-nav-icon-size) + 0.18rem);
  color: var(--platform-bottom-nav-primary-text);
}

.platform-bottom-nav__button--primary .platform-bottom-nav__label {
  color: var(--platform-bottom-nav-active-text);
  font-weight: 800;
}

.platform-bottom-nav__icon-shell,
.platform-desktop-rail__icon-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--platform-nav-item-icon-fill);
  color: var(--platform-nav-item-icon-text);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.platform-bottom-nav__icon-shell {
  background: transparent;
  color: var(--platform-bottom-nav-text);
}

.platform-bottom-nav__icon-shell {
  width: var(--platform-bottom-nav-icon-shell-size);
  height: var(--platform-bottom-nav-icon-shell-size);
}

.platform-desktop-rail__icon-shell {
  width: 2.75rem;
  height: 2.75rem;
}

.platform-bottom-nav__icon,
.platform-desktop-rail__icon {
  color: var(--platform-nav-item-icon-text);
  width: var(--platform-bottom-nav-icon-size);
  height: var(--platform-bottom-nav-icon-size);
  transition: color 180ms ease;
}

.platform-bottom-nav__icon {
  color: var(--platform-bottom-nav-text);
  stroke-width: 2.1;
}

.platform-nav-unread-dot {
  position: absolute;
  right: 0.16rem;
  top: 0.12rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 9999px;
  background: var(--platform-unread-dot-fill);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.28),
    0 0 12px var(--platform-unread-dot-glow);
}

.platform-bottom-nav__label,
.platform-desktop-rail__label {
  color: var(--platform-nav-item-text);
  font-size: var(--platform-bottom-nav-label-size);
  font-weight: 600;
  letter-spacing: var(--platform-bottom-nav-label-tracking);
  line-height: 1;
  transition: color 180ms ease;
}

.platform-bottom-nav__label {
  color: var(--platform-bottom-nav-muted-text);
  font-weight: 500;
}

.platform-bottom-nav__active-mark {
  position: absolute;
  bottom: -0.32rem;
  left: 50%;
  width: 2rem;
  height: 0.16rem;
  border-radius: 9999px;
  background: var(--platform-bottom-nav-active-text);
  transform: translateX(-50%);
  box-shadow: 0 5px 10px rgba(241, 90, 23, 0.22);
}

.platform-bottom-nav__button:hover .platform-bottom-nav__icon-shell,
.platform-desktop-rail__button:hover .platform-desktop-rail__icon-shell {
  background: var(--platform-nav-item-hover-fill);
}

.platform-bottom-nav__button:hover .platform-bottom-nav__icon-shell {
  background: transparent;
}

.platform-bottom-nav__button:hover .platform-bottom-nav__icon,
.platform-bottom-nav__button:hover .platform-bottom-nav__label,
.platform-desktop-rail__button:hover .platform-desktop-rail__icon,
.platform-desktop-rail__button:hover .platform-desktop-rail__label {
  color: var(--platform-text-strong);
}

.platform-bottom-nav__button:hover .platform-bottom-nav__icon,
.platform-bottom-nav__button:hover .platform-bottom-nav__label {
  color: var(--platform-bottom-nav-active-text);
}

.platform-bottom-nav__button--active .platform-bottom-nav__icon-shell,
.platform-desktop-rail__button--active .platform-desktop-rail__icon-shell {
  background: var(--platform-nav-item-icon-active-fill);
  box-shadow: var(--platform-nav-icon-active-shadow);
}

.platform-bottom-nav__button--active .platform-bottom-nav__icon-shell {
  background: transparent;
  box-shadow: none;
}

.platform-bottom-nav__button--active .platform-bottom-nav__icon,
.platform-desktop-rail__button--active .platform-desktop-rail__icon {
  color: var(--platform-nav-item-icon-active-text);
}

.platform-bottom-nav__button--active .platform-bottom-nav__icon {
  color: var(--platform-bottom-nav-active-text);
}

.platform-bottom-nav__button--active .platform-bottom-nav__label,
.platform-desktop-rail__button--active .platform-desktop-rail__label {
  color: var(--platform-nav-item-text-active);
}

.platform-bottom-nav__button--active .platform-bottom-nav__label {
  color: var(--platform-bottom-nav-active-text);
  font-weight: 700;
}

.platform-bottom-nav__button--primary.platform-bottom-nav__button--active
  .platform-bottom-nav__icon-shell {
  background: var(--platform-bottom-nav-primary-fill);
  box-shadow: var(--platform-bottom-nav-primary-shadow);
}

.platform-bottom-nav__button--primary.platform-bottom-nav__button--active
  .platform-bottom-nav__icon {
  color: var(--platform-bottom-nav-primary-text);
}

.platform-modal-shell {
  border: 1px solid var(--platform-modal-border);
  background: var(--platform-modal-fill);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
}

.platform-modal-backdrop {
  background: var(--platform-overlay-fill);
  color: var(--platform-text-strong);
  backdrop-filter: blur(12px);
}

.platform-recharge-modal {
  border: 1px solid var(--platform-modal-border);
  background: var(--platform-modal-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 24px 80px rgba(0, 0, 0, 0.18);
}

.platform-overlay {
  background: var(--platform-overlay-fill);
}

.platform-desktop-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--platform-desktop-shell-border);
  border-radius: 2.6rem;
  background: var(--platform-desktop-shell-fill);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.puzzle-runtime-shell {
  background: var(--puzzle-runtime-shell-fill);
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-stage {
  background: var(--puzzle-runtime-stage-fill);
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-stage__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      var(--puzzle-runtime-grid-line) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, var(--puzzle-runtime-grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.8;
}

.puzzle-runtime-pill,
.puzzle-runtime-icon-button,
.puzzle-runtime-header-card,
.puzzle-runtime-toolbar {
  border: 1px solid var(--puzzle-runtime-surface-border);
  background: var(--puzzle-runtime-surface-fill);
  color: var(--puzzle-runtime-text-strong);
  backdrop-filter: blur(14px);
}

.puzzle-runtime-icon-button {
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-icon-button--sprite {
  border-color: transparent;
  background: transparent;
  color: inherit;
  backdrop-filter: none;
}

.puzzle-runtime-icon-button--sprite:hover {
  background: transparent;
}

.puzzle-runtime-icon-button--precise-hit {
  pointer-events: none;
}

.puzzle-runtime-top-ui-sprite {
  height: 100%;
  max-width: 100%;
  width: auto;
}

.puzzle-runtime-header-card {
  border: 0;
  background: transparent;
  color: #fff7ed;
  filter: none;
  backdrop-filter: none;
}

.puzzle-runtime-level-title-card {
  position: relative;
  min-width: min(14rem, calc(100vw - 7.75rem));
  min-height: 2.9rem;
  border: 2px solid rgba(255, 216, 173, 0.64);
  border-radius: 0.62rem 1.35rem 1.35rem 0.62rem;
  background: linear-gradient(180deg, rgba(255, 164, 92, 0.18), transparent 46%),
    linear-gradient(135deg, #c86a34 0%, #b54f25 56%, #a84622 100%);
}

.puzzle-runtime-level-title-card::before {
  position: absolute;
  inset: 0.2rem 0.58rem auto 3.05rem;
  height: 1px;
  content: '';
  border-radius: 9999px;
  background: rgba(255, 232, 199, 0.36);
}

.puzzle-runtime-level-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 2.95rem;
  height: 2.95rem;
  flex: 0 0 auto;
  margin: -0.62rem 0 -0.62rem -1.18rem;
  overflow: visible;
}

.puzzle-runtime-level-logo__image {
  position: absolute;
  left: -1.1rem;
  top: -1.24rem;
  display: block;
  width: 5.3rem;
  height: 5.3rem;
  max-width: none;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.puzzle-runtime-level-badge {
  color: #fffaf2;
  text-shadow: 0 1px 0 rgba(84, 33, 15, 0.3);
}

.puzzle-runtime-timer {
  min-width: 6.15rem;
  min-height: 2.05rem;
  border: 1px solid rgba(223, 185, 145, 0.62);
  border-top: 0;
  border-radius: 0 0 0.82rem 0.82rem;
  background: linear-gradient(180deg, #fff8ed, #fffdf7);
  color: #4e2a1d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(86, 43, 18, 0.14);
}

.puzzle-runtime-timer--urgent {
  min-width: 6.15rem;
  min-height: 2.05rem;
  border: 1px solid rgba(242, 101, 33, 0.36);
  border-top: 0;
  border-radius: 0 0 0.82rem 0.82rem;
  background: linear-gradient(180deg, #fff2e6, #fffaf1);
  color: #d84012;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 18px rgba(211, 64, 18, 0.16);
}

.puzzle-runtime-board {
  border-color: var(--puzzle-runtime-board-border);
  background: var(--puzzle-runtime-board-fill);
  box-shadow: var(--puzzle-runtime-board-shadow);
}

.puzzle-runtime-piece {
  border-color: transparent;
  color: var(--puzzle-runtime-text-strong);
  box-shadow: none;
}

.puzzle-runtime-piece--selected {
  border-color: transparent;
  background: transparent;
  color: var(--puzzle-runtime-text-strong);
  box-shadow: none;
}

.puzzle-runtime-piece--merged {
  border-color: transparent;
  background: transparent;
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-piece--filled {
  background: transparent;
}

.puzzle-runtime-piece--empty {
  border-color: transparent;
  background: transparent;
  color: transparent;
}

.puzzle-runtime-next-card-overlay {
  background: var(--puzzle-runtime-next-card-overlay);
}

.puzzle-runtime-leaderboard-tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.28rem;
}

.puzzle-runtime-leaderboard-tag {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border: 1px solid var(--puzzle-runtime-control-border);
  border-radius: 9999px;
  background: var(--puzzle-runtime-control-fill);
  color: var(--puzzle-runtime-accent-text);
  padding: 0.12rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.puzzle-runtime-primary-button {
  border: 1px solid var(--platform-button-primary-border);
  background: var(--puzzle-runtime-primary-fill);
  color: var(--puzzle-runtime-primary-text);
  box-shadow: var(--puzzle-runtime-primary-shadow);
}

.puzzle-runtime-tool-button {
  color: var(--puzzle-runtime-text-base);
}

.puzzle-runtime-sprite-tool-button {
  max-width: 7rem;
  color: var(--puzzle-runtime-text-base);
}

.puzzle-runtime-sprite-tool-button--precise-hit {
  pointer-events: none;
}

.puzzle-runtime-bottom-ui-sprite {
  height: 100%;
  max-width: 100%;
  width: auto;
}

.puzzle-runtime-ui-sprite-hit-zone {
  pointer-events: auto;
}

.puzzle-runtime-tool-button:hover {
  background: var(--puzzle-runtime-control-hover-fill);
}

.puzzle-runtime-tool-button--active {
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
}

.puzzle-runtime-tool-button__warm {
  color: var(--puzzle-runtime-accent-text);
}

.puzzle-runtime-tool-button__cool {
  color: var(--puzzle-runtime-cool-text);
}

.puzzle-runtime-status-chip {
  background: var(--puzzle-runtime-control-fill);
  color: var(--puzzle-runtime-text-soft);
  backdrop-filter: blur(12px);
}

.puzzle-runtime-error-chip {
  background: var(--puzzle-runtime-danger-fill);
  color: var(--puzzle-runtime-danger-text);
}

.puzzle-runtime-modal-overlay {
  background: var(--puzzle-runtime-backdrop-fill);
}

.puzzle-runtime-modal-overlay--fixed {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.puzzle-runtime-dialog {
  position: relative;
  border: 1px solid var(--puzzle-runtime-dialog-border);
  background: var(--puzzle-runtime-dialog-fill);
  color: var(--puzzle-runtime-text-strong);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.puzzle-runtime-dialog::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      transparent 36%
    ),
    radial-gradient(
      circle at 86% 8%,
      var(--puzzle-runtime-control-hover-fill),
      transparent 28%
    );
}

.puzzle-runtime-dialog > * {
  position: relative;
  z-index: 1;
}

.puzzle-runtime-dialog__line {
  border-color: var(--puzzle-runtime-surface-border);
}

.puzzle-runtime-dialog__soft {
  color: var(--puzzle-runtime-text-soft);
}

.puzzle-runtime-dialog__body {
  color: var(--puzzle-runtime-text-base);
}

.puzzle-runtime-secondary-button {
  border: 1px solid var(--puzzle-runtime-surface-border);
  background: var(--puzzle-runtime-control-fill);
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-stat-card,
.puzzle-runtime-settings-card {
  border: 1px solid var(--puzzle-runtime-surface-border);
  background: var(--puzzle-runtime-table-fill);
}

.puzzle-runtime-leaderboard-head {
  background: var(--puzzle-runtime-table-fill);
  color: var(--puzzle-runtime-text-soft);
}

.puzzle-runtime-leaderboard-row {
  border-color: var(--puzzle-runtime-surface-border);
  color: var(--puzzle-runtime-text-base);
}

.puzzle-runtime-leaderboard-row--active {
  background: var(--puzzle-runtime-table-row-fill);
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-next-card {
  border: 1px solid var(--puzzle-runtime-surface-border);
  background: var(--puzzle-runtime-next-card-fill);
  color: var(--puzzle-runtime-text-strong);
}

.puzzle-runtime-next-card:hover {
  border-color: var(--platform-button-primary-border);
  background: var(--puzzle-runtime-next-card-hover-fill);
}

.puzzle-runtime-next-card__media {
  background: var(--puzzle-runtime-control-fill);
}

.puzzle-runtime-next-card__tag {
  background: var(--puzzle-runtime-control-fill);
  color: var(--puzzle-runtime-text-soft);
}

.baby-object-runtime {
  --baby-object-background-image: linear-gradient(
    180deg,
    transparent,
    transparent
  );
  --baby-object-ui-frame-image: linear-gradient(
    180deg,
    transparent,
    transparent
  );
  --baby-object-gift-box-image: linear-gradient(
    180deg,
    transparent,
    transparent
  );
  --baby-object-basket-image: linear-gradient(180deg, transparent, transparent);
  --baby-object-smoke-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    transparent 68%
  );
  --baby-object-left-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-left-hand-v8-transparent.png');
  --baby-object-right-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-right-hand-v8-transparent.png');
  --baby-object-sky: #cfefff;
  --baby-object-ground: #7bc36f;
  --baby-object-ground-deep: #3f8b48;
  --baby-object-panel: rgba(255, 253, 244, 0.84);
  --baby-object-panel-border: rgba(72, 118, 72, 0.2);
  --baby-object-text: #24422b;
  --baby-object-soft: rgba(36, 66, 43, 0.72);
  --baby-object-coral: #ff7a7a;
  --baby-object-yellow: #ffd166;
  --baby-object-blue: #77c8ff;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(
      circle at 18% 16%,
      rgba(255, 255, 255, 0.9) 0 6%,
      transparent 6.4%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 255, 255, 0.78) 0 7%,
      transparent 7.4%
    ),
    linear-gradient(
      180deg,
      #f8fcff 0%,
      var(--baby-object-sky) 56%,
      #dff2cf 57%,
      #b8df9d 100%
    );
  color: var(--baby-object-text);
  touch-action: none;
}

.baby-object-runtime--embedded {
  min-height: 100%;
}

.baby-object-runtime__stage {
  position: relative;
  height: 100dvh;
  min-height: 32rem;
  overflow: hidden;
  user-select: none;
}

.baby-object-runtime__background-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.baby-object-runtime__stage--skinned {
  background: #f8fcff;
}

.baby-object-runtime--embedded .baby-object-runtime__stage {
  height: 100%;
  min-height: 28rem;
}

.baby-object-runtime__stage::before {
  content: '';
  position: absolute;
  inset: auto -10% 0;
  height: 39%;
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  background: radial-gradient(
      ellipse at 30% 12%,
      rgba(255, 255, 255, 0.3) 0 7%,
      transparent 7.4%
    ),
    linear-gradient(
      180deg,
      var(--baby-object-ground),
      var(--baby-object-ground-deep)
    );
  box-shadow: inset 0 24px 42px rgba(255, 255, 255, 0.24);
}

.baby-object-runtime__stage--skinned::before {
  display: none;
}

.baby-object-runtime__back,
.baby-object-runtime__counter {
  position: absolute;
  z-index: 11;
  top: max(0.75rem, env(safe-area-inset-top));
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--baby-object-panel-border);
  border-radius: 999px;
  background:
    var(--baby-object-ui-frame-image) center / 100% 100% no-repeat,
    rgba(255, 253, 244, 0.78);
  color: var(--baby-object-text);
  box-shadow: 0 14px 34px rgba(60, 112, 74, 0.16);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.baby-object-runtime__back {
  left: max(0.75rem, env(safe-area-inset-left));
  width: 2.4rem;
}

.baby-object-runtime__counter {
  right: max(0.75rem, env(safe-area-inset-right));
  min-width: 4.7rem;
  padding: 0 1rem;
  font-size: 0.92rem;
  font-weight: 900;
}

.baby-object-runtime__subtitle {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: max(0.85rem, env(safe-area-inset-top));
  transform: translateX(-50%);
  max-width: min(72vw, 34rem);
  border: 1px solid var(--baby-object-panel-border);
  border-radius: 999px;
  background:
    var(--baby-object-ui-frame-image) center / 100% 100% no-repeat,
    var(--baby-object-panel);
  padding: 0.68rem 1.25rem;
  text-align: center;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 900;
  line-height: 1.18;
  box-shadow: 0 18px 42px rgba(60, 112, 74, 0.16);
  backdrop-filter: blur(12px);
}

.baby-object-runtime__gift {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 29%;
  display: grid;
  width: clamp(11rem, 28vw, 18rem);
  aspect-ratio: 1;
  place-items: center;
  transform: translateX(-50%);
  border: 0.45rem solid #ffe7a8;
  border-radius: 1.35rem;
  background: linear-gradient(
      90deg,
      transparent 42%,
      rgba(255, 255, 255, 0.35) 42% 58%,
      transparent 58%
    ),
    linear-gradient(180deg, #ff8f70, #ff5d78);
  color: #fff7d7;
  box-shadow:
    0 18px 0 rgba(146, 67, 47, 0.14),
    0 24px 48px rgba(119, 75, 44, 0.18);
  transition:
    transform 180ms ease,
    border-radius 180ms ease;
}

.baby-object-runtime__gift--entering {
  animation: baby-object-gift-enter 0.62s cubic-bezier(0.18, 0.86, 0.28, 1.2);
}

.baby-object-runtime__gift--open {
  transform: translateX(-50%) translateY(0.35rem) scale(0.94);
  border-radius: 1.8rem;
}

.baby-object-runtime__gift::before {
  content: '';
  position: absolute;
  inset: -22% -8% auto;
  height: 32%;
  border-radius: 1.1rem;
  background: #ffe7a8;
  transform-origin: 20% 100%;
  transition: transform 180ms ease;
}

.baby-object-runtime__gift--open::before {
  transform: rotate(-17deg) translateY(-0.5rem);
}

.baby-object-runtime__gift--opening::before {
  animation: baby-object-gift-lid-open 0.64s ease-out;
}

.baby-object-runtime__gift-icon {
  position: relative;
  z-index: 1;
  width: 42%;
  height: 42%;
}

.baby-object-runtime__gift-image {
  position: absolute;
  z-index: 2;
  inset: -18%;
  width: 136%;
  height: 136%;
  object-fit: contain;
  pointer-events: none;
}

.baby-object-runtime__gift--skinned {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.baby-object-runtime__gift--skinned::before {
  display: none;
}

@keyframes baby-object-gift-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-42vh) scale(0.72);
  }
  62% {
    opacity: 1;
    transform: translateX(-50%) translateY(0.75rem) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes baby-object-gift-lid-open {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  55% {
    transform: rotate(-24deg) translateY(-0.65rem);
  }
  100% {
    transform: rotate(-17deg) translateY(-0.5rem);
  }
}

.baby-object-runtime__smoke {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  width: clamp(12rem, 30vw, 19rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.68);
  border-radius: 50%;
  background: radial-gradient(
      circle at 24% 62%,
      rgba(255, 255, 255, 0.92) 0 12%,
      transparent 12.8%
    ),
    radial-gradient(
      circle at 40% 36%,
      rgba(255, 255, 255, 0.95) 0 16%,
      transparent 16.8%
    ),
    radial-gradient(
      circle at 62% 38%,
      rgba(255, 255, 255, 0.9) 0 14%,
      transparent 14.8%
    ),
    radial-gradient(
      circle at 74% 62%,
      rgba(255, 255, 255, 0.86) 0 12%,
      transparent 12.8%
    ),
    radial-gradient(
      circle at 50% 54%,
      rgba(255, 242, 202, 0.72) 0 28%,
      transparent 29%
    );
  filter: drop-shadow(0 18px 28px rgba(98, 83, 52, 0.12));
  opacity: 0;
  pointer-events: none;
  animation: baby-object-smoke-pop 1.12s ease-out forwards;
}

.baby-object-runtime__smoke--skinned {
  border-radius: 0;
  background:
    var(--baby-object-smoke-image) center / contain no-repeat,
    radial-gradient(
      circle at 50% 54%,
      rgba(255, 255, 255, 0.48),
      transparent 66%
    );
}

.baby-object-runtime__smoke--releasing {
  animation: baby-object-smoke-release 0.62s ease-out forwards;
}

@keyframes baby-object-smoke-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.42);
  }
  36% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0.82;
    transform: translate(-50%, -52%) scale(1);
  }
}

@keyframes baby-object-smoke-release {
  0% {
    opacity: 0.84;
    transform: translate(-50%, -52%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1.28);
  }
}

.baby-object-runtime__item {
  --baby-object-item-size: clamp(6.2rem, 15vw, 9.5rem);
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 37%;
  display: grid;
  width: var(--baby-object-item-size);
  height: var(--baby-object-item-size);
  min-width: var(--baby-object-item-size);
  min-height: var(--baby-object-item-size);
  max-width: var(--baby-object-item-size);
  max-height: var(--baby-object-item-size);
  aspect-ratio: 1;
  place-items: center;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 0.2rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.74);
  box-shadow:
    0 18px 42px rgba(61, 106, 72, 0.17),
    inset 0 0 0 0.6rem rgba(255, 255, 255, 0.32);
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  transition: transform 260ms ease;
  contain: layout;
}

.baby-object-runtime__item--visible {
  opacity: 1;
}

.baby-object-runtime__intro-item {
  --baby-object-intro-target-x: -210%;
  --baby-object-intro-target-y: 126%;
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 37%;
  display: grid;
  width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  min-width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  min-height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  max-width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  max-height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
  aspect-ratio: 1;
  place-items: center;
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(1);
  border: 0.2rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.78);
  box-shadow:
    0 18px 42px rgba(61, 106, 72, 0.17),
    inset 0 0 0 0.6rem rgba(255, 255, 255, 0.32);
  pointer-events: none;
  animation: baby-object-intro-pop 0.46s ease-out both;
  contain: layout;
}

.baby-object-runtime__intro-item--right {
  --baby-object-intro-target-x: 110%;
  --baby-object-intro-target-y: 126%;
}

.baby-object-runtime__intro-item--flying {
  animation: baby-object-intro-fly 0.72s cubic-bezier(0.22, 0.82, 0.24, 1)
    forwards;
}

.baby-object-runtime__intro-item-image {
  display: block;
  width: 76%;
  height: 76%;
  min-width: 0;
  min-height: 0;
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
  object-position: center;
}

.baby-object-runtime__intro-item-name {
  position: absolute;
  bottom: -1.45rem;
  max-width: 12.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.9);
  padding: 0.32rem 0.95rem;
  color: var(--baby-object-text);
  font-size: clamp(1.56rem, 3vw, 2rem);
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(60, 112, 74, 0.12);
}

.baby-object-runtime__intro-item--flying .baby-object-runtime__intro-item-name {
  bottom: -0.9rem;
  max-width: 8rem;
  padding: 0.22rem 0.7rem;
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  transition:
    bottom 0.72s ease,
    max-width 0.72s ease,
    padding 0.72s ease,
    font-size 0.72s ease;
}

@keyframes baby-object-intro-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.78);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes baby-object-intro-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(
        var(--baby-object-intro-target-x),
        var(--baby-object-intro-target-y)
      )
      scale(0.68);
  }
}

.baby-object-runtime__item--appearing {
  animation: baby-object-item-appear 0.62s cubic-bezier(0.2, 0.86, 0.28, 1.12);
}

.baby-object-runtime__item--held {
  left: var(--baby-object-held-x, 50%);
  top: var(--baby-object-held-y, 37%);
  transform: translate(-50%, -56%) scale(0.88) rotate(-3deg);
  transition:
    left 90ms linear,
    top 90ms linear,
    transform 120ms ease;
}

@keyframes baby-object-item-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, 60%) scale(0.42) rotate(-10deg);
  }
  64% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

.baby-object-runtime__item--to-left {
  transform: translate(-210%, 118%) scale(0.68) rotate(-12deg);
  transition: transform 0.52s cubic-bezier(0.2, 0.82, 0.28, 1);
}

.baby-object-runtime__item--to-right {
  transform: translate(110%, 118%) scale(0.68) rotate(12deg);
  transition: transform 0.52s cubic-bezier(0.2, 0.82, 0.28, 1);
}

.baby-object-runtime__item--wrong-left,
.baby-object-runtime__item--wrong-right {
  animation: baby-object-wrong-bounce 0.62s ease-in-out;
}

@keyframes baby-object-wrong-bounce {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  35% {
    transform: translate(-50%, -58%) scale(0.92);
  }
  62% {
    transform: translate(-50%, -44%) scale(1.04);
  }
}

.baby-object-runtime__item-image {
  display: block;
  width: 76%;
  height: 76%;
  min-width: 0;
  min-height: 0;
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
  object-position: center;
}

.baby-object-runtime__item-name {
  position: absolute;
  bottom: -0.9rem;
  max-width: 8rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.86);
  padding: 0.22rem 0.7rem;
  color: var(--baby-object-text);
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.baby-object-runtime__hands {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
}

.baby-object-runtime__hand {
  position: absolute;
  left: var(--baby-object-hand-x, 50%);
  top: var(--baby-object-hand-y, 50%);
  width: clamp(4.1rem, 9.4vw, 7.1rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg));
  border-radius: 48% 48% 54% 54%;
  background: var(--baby-object-hand-image) center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(83, 78, 50, 0.16));
  opacity: 0.92;
  transition:
    left 90ms linear,
    top 90ms linear,
    transform 120ms ease,
    opacity 120ms ease;
}

.baby-object-runtime__hand--left {
  --baby-object-hand-image: var(--baby-object-left-hand-image);
  --baby-object-hand-rotate: -10deg;
}

.baby-object-runtime__hand--right {
  --baby-object-hand-image: var(--baby-object-right-hand-image);
  --baby-object-hand-rotate: 10deg;
}

.baby-object-runtime__hand--holding {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg))
    scale(1.08);
}

.baby-object-runtime__hand--holding-left-corner {
  transform: translate(-112%, -6%) rotate(var(--baby-object-hand-rotate, 0deg))
    scale(1.02);
}

.baby-object-runtime__hand--holding-right-corner {
  transform: translate(12%, -6%) rotate(var(--baby-object-hand-rotate, 0deg))
    scale(1.02);
}

.baby-object-runtime__feedback {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  animation: baby-object-feedback-pop 0.7s ease-out;
}

.baby-object-runtime__feedback--correct {
  background: rgba(255, 250, 210, 0.9);
  color: #2f7d39;
  box-shadow: 0 18px 42px rgba(65, 146, 76, 0.2);
}

.baby-object-runtime__feedback--wrong {
  background: rgba(255, 236, 236, 0.92);
  color: #cb4b57;
  box-shadow: 0 18px 42px rgba(202, 75, 87, 0.18);
}

.baby-object-runtime__feedback--complete {
  background: rgba(255, 246, 204, 0.94);
  color: #c47013;
  box-shadow: 0 18px 42px rgba(196, 112, 19, 0.18);
}

@keyframes baby-object-feedback-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0.8rem) scale(0.8);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.baby-object-runtime__baskets {
  position: absolute;
  z-index: 6;
  inset: auto 0 3.5%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 max(3vw, env(safe-area-inset-right)) 0
    max(3vw, env(safe-area-inset-left));
  pointer-events: none;
}

.baby-object-runtime__basket {
  position: relative;
  width: clamp(9.6rem, 27vw, 16.5rem);
  aspect-ratio: 1 / 0.88;
}

.baby-object-runtime__basket--correct {
  animation: baby-object-basket-correct 1.08s ease-out;
}

.baby-object-runtime__basket--correct::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -18% -16% 6%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 42%,
      rgba(255, 247, 181, 0.55) 0 20%,
      transparent 21%
    ),
    radial-gradient(
      circle at 20% 22%,
      rgba(255, 255, 255, 0.95) 0 5%,
      transparent 5.5%
    ),
    radial-gradient(
      circle at 82% 26%,
      rgba(255, 255, 255, 0.86) 0 4%,
      transparent 4.5%
    ),
    radial-gradient(
      circle at 68% 76%,
      rgba(255, 226, 103, 0.9) 0 5%,
      transparent 5.5%
    );
  pointer-events: none;
  animation: baby-object-basket-spark 1.08s ease-out;
}

@keyframes baby-object-basket-correct {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  32% {
    transform: translateY(-0.45rem) scale(1.08);
  }
  58% {
    transform: translateY(0.16rem) scale(0.98);
  }
}

@keyframes baby-object-basket-spark {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  24% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

.baby-object-runtime__basket-option {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -34%;
  display: grid;
  width: 58%;
  justify-items: center;
  gap: 0.18rem;
  transform: translateX(-50%);
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.baby-object-runtime__basket-option--ready {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.baby-object-runtime__basket-icon {
  --baby-object-basket-icon-size: clamp(4.6rem, 9vw, 7.1rem);
  display: grid;
  width: var(--baby-object-basket-icon-size);
  height: var(--baby-object-basket-icon-size);
  min-width: var(--baby-object-basket-icon-size);
  min-height: var(--baby-object-basket-icon-size);
  max-width: var(--baby-object-basket-icon-size);
  max-height: var(--baby-object-basket-icon-size);
  aspect-ratio: 1;
  place-items: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 0.18rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.88);
  box-shadow: 0 10px 22px rgba(60, 112, 74, 0.12);
  contain: layout paint;
}

.baby-object-runtime__basket-image {
  display: block;
  width: 74%;
  height: 74%;
  min-width: 0;
  min-height: 0;
  max-width: 74%;
  max-height: 74%;
  object-fit: contain;
  object-position: center;
}

.baby-object-runtime__basket-name {
  display: inline-flex;
  max-width: min(7.5rem, 92%);
  min-height: 1.35rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.9);
  color: var(--baby-object-text);
  padding: 0.16rem 0.58rem;
  font-size: clamp(0.72rem, 1.35vw, 0.92rem);
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(60, 112, 74, 0.1);
}

.baby-object-runtime__basket-body {
  position: absolute;
  inset: 26% 0 0;
  border: 0.28rem solid rgba(139, 84, 40, 0.72);
  border-top-width: 0.42rem;
  border-radius: 0.8rem 0.8rem 2rem 2rem;
  background: repeating-linear-gradient(
      90deg,
      rgba(139, 84, 40, 0.18) 0 0.7rem,
      transparent 0.7rem 1.4rem
    ),
    linear-gradient(180deg, #ffd980, #d99845);
  box-shadow: 0 18px 28px rgba(95, 84, 54, 0.2);
}

.baby-object-runtime__basket-shell-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 142%;
  height: 136%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
}

.baby-object-runtime__basket-body--skinned {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.baby-object-runtime__complete {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  display: flex;
  width: min(88vw, 24rem);
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 221, 124, 0.8);
  border-radius: 1.6rem;
  background: rgba(255, 253, 244, 0.92);
  padding: 1.35rem;
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 1000;
  color: #c47013;
  box-shadow: 0 24px 70px rgba(107, 84, 41, 0.22);
  backdrop-filter: blur(12px);
}

.baby-object-runtime__complete-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.baby-object-runtime__complete-actions button {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8, #ffc867);
  color: #5d3b15;
  font-size: 0.92rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(129, 83, 24, 0.16);
}

.platform-edutainment-level-card {
  display: grid;
  min-height: 12rem;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(72, 118, 72, 0.18);
  border-radius: 1.25rem;
  background: radial-gradient(
      circle at 16% 18%,
      rgba(255, 244, 184, 0.72) 0 12%,
      transparent 12.6%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(130, 212, 255, 0.58) 0 11%,
      transparent 11.8%
    ),
    linear-gradient(
      135deg,
      rgba(255, 253, 244, 0.96),
      rgba(217, 247, 229, 0.92)
    );
  padding: 1.05rem;
  text-align: left;
  color: #24422b;
  box-shadow: 0 18px 42px rgba(60, 112, 74, 0.12);
}

.platform-edutainment-level-card:hover {
  border-color: rgba(59, 130, 246, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 22px 48px rgba(60, 112, 74, 0.16);
}

.platform-edutainment-level-card__icon {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, #fff7c7, #c8f1ff 58%, #f0d7ff);
  color: #285f7c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.platform-edutainment-level-card__body {
  display: grid;
  min-width: 0;
  align-content: end;
  gap: 0.3rem;
}

.platform-edutainment-level-card__body strong {
  overflow-wrap: anywhere;
  font-size: 1.18rem;
  font-weight: 1000;
  line-height: 1.12;
}

.platform-edutainment-level-card__body span,
.platform-edutainment-level-card__summary {
  color: rgba(36, 66, 43, 0.7);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
}

.baby-love-drawing-runtime {
  --baby-drawing-paper: #fffdf4;
  --baby-drawing-ink: #24422b;
  --baby-drawing-soft: rgba(36, 66, 43, 0.68);
  --baby-drawing-line: rgba(72, 118, 72, 0.22);
  --baby-drawing-glow: rgba(255, 210, 102, 0.28);
  position: relative;
  display: grid;
  min-height: 100dvh;
  width: 100%;
  grid-template-columns: minmax(3.2rem, 6vw) minmax(0, 1fr) minmax(4rem, 7vw);
  grid-template-rows: 1fr auto;
  gap: clamp(0.65rem, 1.6vw, 1.1rem);
  overflow: hidden;
  padding: max(0.85rem, env(safe-area-inset-top))
    max(0.85rem, env(safe-area-inset-right))
    max(0.85rem, env(safe-area-inset-bottom))
    max(0.85rem, env(safe-area-inset-left));
  background: radial-gradient(
      circle at 14% 18%,
      rgba(255, 244, 184, 0.72) 0 9%,
      transparent 9.5%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(151, 224, 255, 0.58) 0 8%,
      transparent 8.6%
    ),
    linear-gradient(180deg, #f5fbff 0%, #d8f0e8 52%, #f7edc7 100%);
  color: var(--baby-drawing-ink);
  touch-action: none;
  user-select: none;
}

.baby-love-drawing-runtime__back {
  position: absolute;
  z-index: 12;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  display: grid;
  width: 2.55rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--baby-drawing-line);
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.84);
  color: var(--baby-drawing-ink);
  box-shadow: 0 14px 32px rgba(60, 112, 74, 0.14);
  backdrop-filter: blur(10px);
}

.baby-love-drawing-runtime__colors,
.baby-love-drawing-runtime__tools {
  z-index: 5;
  display: grid;
  align-self: center;
  justify-items: center;
  gap: clamp(0.35rem, 1vw, 0.62rem);
}

.baby-love-drawing-runtime__colors {
  grid-column: 1;
  grid-row: 1;
}

.baby-love-drawing-runtime__tools {
  grid-column: 3;
  grid-row: 1;
}

.baby-love-drawing-runtime__color,
.baby-love-drawing-runtime__tool {
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    0 10px 22px rgba(60, 112, 74, 0.14),
    inset 0 0 0 1px rgba(36, 66, 43, 0.08);
}

.baby-love-drawing-runtime__color {
  width: clamp(2rem, 4.6vw, 2.8rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--baby-drawing-color);
}

.baby-love-drawing-runtime__color--active {
  outline: 0.28rem solid rgba(255, 253, 244, 0.92);
  transform: scale(1.08);
}

.baby-love-drawing-runtime__tool {
  display: grid;
  width: clamp(3rem, 6vw, 4rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1.05rem;
  background: rgba(255, 253, 244, 0.86);
  color: #285f7c;
}

.baby-love-drawing-runtime__tool--active {
  background: linear-gradient(135deg, #fff4bd, #c7f0ff);
  color: #1e596f;
  outline: 0.2rem solid rgba(255, 253, 244, 0.9);
}

.baby-love-drawing-runtime__board {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 62rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: clamp(0.35rem, 1vw, 0.7rem) solid rgba(255, 255, 255, 0.82);
  border-radius: 1.35rem;
  background: linear-gradient(
      90deg,
      rgba(245, 216, 145, 0.16) 1px,
      transparent 1px
    ),
    linear-gradient(180deg, rgba(245, 216, 145, 0.16) 1px, transparent 1px),
    var(--baby-drawing-paper);
  background-size: 2.4rem 2.4rem;
  box-shadow:
    0 24px 70px rgba(79, 107, 69, 0.18),
    inset 0 0 0 1px rgba(146, 116, 55, 0.1);
}

.baby-love-drawing-runtime__canvas,
.baby-love-drawing-runtime__magic-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.baby-love-drawing-runtime__canvas {
  background: var(--baby-drawing-paper);
}

.baby-love-drawing-runtime__magic-image {
  z-index: 2;
  object-fit: contain;
  background: var(--baby-drawing-paper);
}

.baby-love-drawing-runtime__magic-pending {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 214, 102, 0.58);
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.9);
  padding: 0.8rem 1.15rem;
  font-size: 1rem;
  font-weight: 1000;
  color: #9b6418;
  box-shadow: 0 18px 44px rgba(126, 97, 39, 0.16);
  animation: baby-drawing-magic-pulse 1.1s ease-in-out infinite;
}

@keyframes baby-drawing-magic-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

.baby-love-drawing-runtime__actions {
  z-index: 6;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
}

.baby-love-drawing-runtime__action {
  position: relative;
  display: inline-flex;
  min-height: 2.7rem;
  min-width: min(12.5rem, 42vw);
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 102, 0.48);
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.88);
  padding: 0 1rem;
  color: var(--baby-drawing-ink);
  font-size: 0.93rem;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(79, 107, 69, 0.14);
}

.baby-love-drawing-runtime__action:disabled {
  opacity: 0.68;
}

.baby-love-drawing-runtime__action-progress {
  position: absolute;
  inset: auto 0 0;
  height: 0.24rem;
  width: var(--baby-drawing-hover-progress);
  background: linear-gradient(90deg, #ffcf56, #6ed5ff, #c986ff);
}

.baby-love-drawing-runtime__error,
.baby-love-drawing-runtime__saved {
  position: absolute;
  z-index: 14;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 0.64rem 1rem;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(79, 107, 69, 0.16);
}

.baby-love-drawing-runtime__error {
  top: max(0.8rem, env(safe-area-inset-top));
  max-width: min(86vw, 34rem);
  background: rgba(255, 238, 238, 0.94);
  color: #b42336;
}

.baby-love-drawing-runtime__saved {
  top: 12%;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: rgba(238, 255, 239, 0.94);
  color: #2f7d39;
}

.baby-love-drawing-runtime__left-hand-indicator,
.baby-love-drawing-runtime__cursor {
  position: absolute;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.baby-love-drawing-runtime__left-hand-indicator {
  z-index: 9;
  width: 2.15rem;
  border: 2px solid rgba(255, 253, 244, 0.94);
  border-radius: 999px;
  background: rgba(111, 213, 255, 0.2);
  box-shadow:
    0 0 0 0.34rem rgba(111, 213, 255, 0.16),
    0 12px 26px rgba(28, 68, 52, 0.16);
}

.baby-love-drawing-runtime__left-hand-indicator span {
  width: 0.58rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #41b9ef;
  box-shadow: 0 0 0 0.2rem rgba(255, 253, 244, 0.86);
}

.baby-love-drawing-runtime__cursor {
  z-index: 10;
  width: 2.45rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: var(--baby-drawing-color);
  color: #fff;
  box-shadow: 0 12px 26px rgba(28, 68, 52, 0.2);
}

.baby-love-drawing-runtime__cursor--eraser {
  background: rgba(255, 253, 244, 0.95);
  color: #285f7c;
}

@media (orientation: portrait) {
  .baby-love-drawing-runtime {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    align-content: stretch;
  }

  .baby-love-drawing-runtime__colors {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(7, minmax(1.8rem, 1fr));
    align-self: end;
    justify-self: stretch;
    padding-left: 3.1rem;
  }

  .baby-love-drawing-runtime__board {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 70vh);
    align-self: center;
  }

  .baby-love-drawing-runtime__tools {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, auto);
  }

  .baby-love-drawing-runtime__actions {
    grid-column: 1;
    grid-row: 4;
  }
}

@media (max-width: 639px) {
  .platform-edutainment-level-card {
    min-height: 9.8rem;
    border-radius: 1.05rem;
  }

  .baby-love-drawing-runtime {
    gap: 0.5rem;
  }

  .baby-love-drawing-runtime__action {
    min-width: min(10.5rem, 44vw);
    min-height: 2.52rem;
    font-size: 0.84rem;
  }
}

@media (max-width: 639px) {
  :root {
    --platform-bottom-nav-height: 3.85rem;
    --platform-bottom-dock-outer-height: calc(
      var(--platform-bottom-nav-height) + env(safe-area-inset-bottom, 0px) +
        1.4rem
    );
    --platform-bottom-nav-padding: 0.34rem;
    --platform-bottom-nav-gap: 0.08rem;
    --platform-bottom-nav-radius: 9999px;
    --platform-bottom-nav-button-radius: 9999px;
    --platform-bottom-nav-icon-size: 1.02rem;
    --platform-bottom-nav-icon-shell-size: 1.68rem;
    --platform-bottom-nav-label-size: 10px;
    --platform-bottom-nav-label-tracking: 0;
    --platform-bottom-nav-content-gap: 0.12rem;
  }

  .platform-page-stage {
    border-radius: 1.35rem;
    border-color: color-mix(
      in srgb,
      var(--platform-page-border) 72%,
      transparent
    );
    box-shadow: none;
  }

  .platform-surface {
    border-radius: 1.4rem;
  }

  .platform-pill {
    padding: 0.3rem 0.68rem;
    letter-spacing: 0.1em;
  }

  .creation-work-card,
  .creation-work-card.platform-category-game-item {
    min-height: 6.65rem;
    border-radius: 0.86rem;
    padding: 0.58rem 0.58rem 0.58rem 0.68rem;
  }

  .creation-work-card-shell {
    border-radius: 0.86rem;
  }

  .creation-work-card__side-cover {
    width: 60%;
  }

  .creation-work-card__body {
    gap: 0.32rem;
  }

  .creation-work-card__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.36rem;
  }

  .creation-work-card__title {
    font-size: 0.94rem;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .creation-work-card__meta {
    gap: 0.26rem;
  }

  .creation-work-card__badge {
    max-width: 100%;
    min-height: 1.08rem;
    padding: 0.2rem 0.46rem;
    font-size: 9px;
    letter-spacing: 0;
  }

  .creation-work-card__summary {
    font-size: 0.78rem;
    line-height: 1.32;
    -webkit-line-clamp: 2;
  }

  .creation-work-card__published-info {
    gap: 0.32rem;
  }

  .creation-work-card__metrics {
    gap: 0.26rem;
  }

  .creation-work-card-stat {
    min-height: 2.42rem;
    border-radius: 0.46rem;
    padding: 0.32rem 0.3rem 0.34rem;
  }

  .creation-work-card-stat__label {
    font-size: 0.54rem;
  }

  .creation-work-card-stat__value {
    margin-top: 0.18rem;
    gap: 0.08rem;
  }

  .creation-work-card-stat__number {
    font-size: 0.84rem;
  }

  .creation-work-card-stat__unit {
    font-size: 0.5rem;
  }

  .creation-work-card-stat__growth {
    right: 0.24rem;
    bottom: 0.18rem;
    font-size: 0.48rem;
  }

  .creation-work-card-incentive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.26rem;
  }

  .creation-work-card-incentive__metric {
    min-height: 2.2rem;
    padding: 0.3rem 0.32rem;
  }

  .creation-work-card-incentive__label {
    font-size: 0.54rem;
  }

  .creation-work-card-incentive__value {
    font-size: 0.82rem;
  }

  .creation-work-card-incentive__button {
    grid-column: 1 / -1;
    min-height: 2.34rem;
    padding: 0 0.48rem;
    font-size: 0.62rem;
  }

  .platform-tab-panel {
    padding-right: 0;
  }

  .platform-mobile-topbar {
    min-height: 2.75rem;
  }

  .platform-bottom-nav__label {
    white-space: nowrap;
  }

  .platform-mobile-entry-shell,
  .platform-mobile-entry-shell > *,
  .platform-mobile-home-stage,
  .platform-mobile-home-stage > *,
  .platform-mobile-home-stage section {
    max-width: 100%;
    min-width: 0;
  }

  .platform-mobile-entry-shell {
    box-sizing: border-box;
    padding-bottom: var(--platform-bottom-dock-outer-height);
  }

  .platform-mobile-entry-shell--recommend {
    padding-top: 0;
    padding-bottom: calc(var(--platform-bottom-dock-outer-height) - 0.95rem);
  }

  .platform-mobile-bottom-dock {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.45rem);
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    z-index: 60;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .platform-mobile-bottom-dock .platform-bottom-nav {
    width: min(100%, 24rem);
    pointer-events: auto;
    border-color: var(--platform-bottom-nav-border);
    background: var(--platform-bottom-nav-fill);
    box-shadow:
      0 16px 34px rgba(101, 52, 19, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .platform-mobile-bottom-dock .platform-bottom-nav__button {
    min-height: calc(
      var(--platform-bottom-nav-height) - var(--platform-bottom-nav-padding) * 2
    );
  }

  .platform-mobile-bottom-dock
    .platform-bottom-nav__button--primary
    .platform-bottom-nav__button-content {
    transform: translateY(-0.5rem);
  }

  .platform-mobile-bottom-dock
    .platform-bottom-nav__button--primary
    .platform-bottom-nav__icon-shell {
    width: calc(var(--platform-bottom-nav-icon-shell-size) + 0.72rem);
    height: calc(var(--platform-bottom-nav-icon-shell-size) + 0.72rem);
    background: var(--platform-bottom-nav-primary-fill);
    color: var(--platform-bottom-nav-primary-text);
    box-shadow: var(--platform-bottom-nav-primary-shadow);
  }

  .platform-mobile-bottom-dock
    .platform-bottom-nav__button--primary
    .platform-bottom-nav__icon {
    color: var(--platform-bottom-nav-primary-text);
  }

  .platform-mobile-bottom-dock
    .platform-bottom-nav__button--primary
    .platform-bottom-nav__label {
    color: var(--platform-bottom-nav-active-text);
    font-weight: 900;
  }

  .platform-mobile-home-stage {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100vw - 1rem);
  }

  .platform-profile-page {
    overflow: visible;
    padding-bottom: calc(var(--platform-bottom-dock-outer-height) + 0.35rem);
  }

  .platform-mobile-home-stage .platform-surface--hero {
    max-width: 100%;
  }

  .platform-mobile-home-stage {
    gap: 0.75rem;
  }

  .platform-mobile-recommend-stage {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0 0 0.02rem;
  }

  .platform-recommend-runtime-panel {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--platform-recommend-runtime-border);
    border-radius: 1.65rem;
    background: var(--platform-recommend-runtime-fill);
    box-shadow: var(--platform-recommend-runtime-shadow);
  }

  .platform-recommend-runtime-viewport {
    position: absolute;
    inset: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--platform-recommend-runtime-fill);
    pointer-events: auto;
  }

  .platform-recommend-swipe-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
  }

  .platform-recommend-swipe-rail {
    position: absolute;
    inset: 0;
    will-change: transform;
  }

  .platform-recommend-swipe-rail--settled,
  .platform-recommend-swipe-rail--committing {
    transition: transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1);
  }

  .platform-recommend-swipe-rail--dragging {
    transition: none;
  }

  .platform-recommend-swipe-page {
    position: absolute;
    inset: 0;
    min-width: 0;
    overflow: hidden;
    background: transparent;
  }

  .platform-recommend-swipe-page--previous {
    transform: translate3d(0, -100%, 0);
  }

  .platform-recommend-swipe-page--current {
    transform: translate3d(0, 0, 0);
  }

  .platform-recommend-swipe-page--next {
    transform: translate3d(0, 100%, 0);
  }

  .platform-recommend-runtime-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--platform-recommend-runtime-fill);
    color: white;
  }

  .platform-recommend-swipe-card {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 0;
  }

  .platform-recommend-swipe-card__visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--platform-recommend-runtime-border);
    border-radius: 1.65rem 1.65rem 0 0;
    border-bottom: 0;
    background: var(--platform-recommend-runtime-fill);
    box-shadow: var(--platform-recommend-runtime-shadow);
  }

  .platform-recommend-swipe-card__meta {
    position: relative;
    z-index: 2;
    flex: 0 0 clamp(5.2rem, 13.5dvh, 6.1rem);
    min-width: 0;
    border: 1px solid var(--platform-recommend-runtime-border);
    border-top: 0;
    border-radius: 0 0 1.65rem 1.65rem;
    background: var(--platform-recommend-runtime-fill);
    box-shadow: var(--platform-recommend-runtime-shadow);
  }

  .platform-recommend-runtime-preview__body {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.52rem;
  }

  .platform-recommend-runtime-preview__title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: clamp(1.45rem, 6.4vw, 2.15rem);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
  }

  .platform-recommend-cover-only {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    background: var(--platform-recommend-runtime-fill);
    color: white;
    text-align: left;
  }

  .platform-recommend-cover-only__body {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .platform-recommend-cover-only__title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
  }

  .platform-recommend-cover-only__author {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 800;
  }

  .platform-recommend-runtime-state {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    border: 0;
    place-items: center;
    background: var(--platform-recommend-runtime-state-fill);
    color: var(--platform-recommend-runtime-state-text);
    font-size: clamp(1.8rem, 10vw, 2.45rem);
    font-weight: 950;
    letter-spacing: 0;
    text-align: center;
  }

  .platform-recommend-runtime-state--button {
    padding: 1.5rem;
  }

  .platform-recommend-work-meta {
    display: flex;
    min-height: 100%;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.52rem 0.72rem 0.72rem;
    color: var(--platform-text-strong);
    touch-action: none;
    user-select: none;
  }

  .platform-recommend-work-meta__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.44rem;
    padding: 0;
  }

  .platform-recommend-work-meta__action {
    display: inline-flex;
    min-width: 0;
    min-height: 2.22rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(121, 82, 109, 0.12);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--platform-text-strong);
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition:
      transform 140ms ease,
      background 140ms ease,
      border-color 140ms ease;
  }

  .platform-recommend-work-meta__action:not(:disabled):active {
    transform: scale(0.96);
  }

  .platform-recommend-work-meta__action:disabled {
    opacity: 0.55;
  }

  .platform-recommend-work-meta__action--icon {
    width: 2.22rem;
    flex: 0 0 2.22rem;
  }

  .platform-recommend-work-meta__action--like {
    border-color: rgba(255, 85, 126, 0.3);
    background: rgba(255, 85, 126, 0.12);
    color: #ff4f7d;
  }

  .platform-recommend-work-meta__action--remix {
    border-color: rgba(121, 82, 109, 0.14);
    background: rgba(255, 255, 255, 0.82);
    color: var(--platform-text-strong);
  }

  .platform-recommend-work-meta__like-count {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    color: var(--platform-text-strong);
  }

  .platform-recommend-work-meta__like-count {
    flex: 0 0 auto;
    min-width: 1rem;
  }

  .platform-recommend-work-meta__row {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .platform-recommend-work-meta__identity {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    text-align: left;
  }

  .platform-recommend-work-meta__avatar {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 9999px;
    background: linear-gradient(135deg, #f6e7cf, #9dc7ff);
    color: #111827;
    font-size: 0.95rem;
    font-weight: 950;
  }

  .platform-recommend-work-meta__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
  }

  .platform-recommend-work-meta__author {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 900;
  }

  .platform-recommend-work-meta__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--platform-text-soft);
  }

  .platform-mobile-home-stage .platform-desktop-search {
    border-radius: 9999px;
    padding: 0.64rem 0.9rem;
  }

  .platform-mobile-home-channelbar {
    margin-right: -0.25rem;
    padding-left: 0.08rem;
  }

  .platform-mobile-home-channel {
    position: relative;
    min-height: 2rem;
    border: 0;
    background: transparent;
    color: var(--platform-text-soft);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .platform-mobile-home-channel--active {
    color: var(--platform-text-strong);
  }

  .platform-mobile-home-channel--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1rem;
    height: 0.16rem;
    border-radius: 9999px;
    background: var(--platform-warm-text);
  }

  .platform-mobile-home-feed {
    min-width: 0;
  }

  .platform-mobile-recommend-feed {
    padding-bottom: 0.35rem;
  }

  .platform-ranking-panel {
    padding-inline: 0.85rem;
  }

  .platform-ranking-item {
    grid-template-columns: 1.7rem 4.1rem minmax(0, 1fr) auto;
    gap: 0.56rem;
    min-height: 5.15rem;
    border-radius: 1rem;
    padding: 0.56rem;
  }

  .platform-ranking-item__cover {
    border-radius: 0.82rem;
  }

  .platform-ranking-item__action {
    min-width: 3.55rem;
    min-height: 2.15rem;
    padding-inline: 0.62rem;
    font-size: 0.82rem;
  }

  .platform-ranking-item__tags {
    gap: 0.28rem;
    margin-top: 0.28rem;
  }

  .platform-ranking-item__tags span {
    max-width: 4.2rem;
    padding-inline: 0.4rem;
    font-size: 0.64rem;
  }

  .platform-category-list-panel {
    gap: 0.64rem;
  }

  .platform-category-filter-row {
    border-radius: 1rem;
    gap: 0.5rem;
    padding: 0.46rem 0.5rem;
  }

  .platform-category-filter-button {
    min-height: 2.05rem;
    padding-inline: 0.62rem;
    font-size: 0.8rem;
  }

  .platform-category-chip {
    min-height: 2.05rem;
    border-radius: 0.68rem;
    padding-inline: 0.78rem;
    font-size: 0.8rem;
  }

  .platform-category-filter-dialog__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
  }

  .platform-category-filter-dialog__option {
    min-height: 2.18rem;
    border-radius: 0.68rem;
    font-size: 0.8rem;
  }

  .platform-category-game-list {
    gap: 0.7rem;
  }

  .platform-category-game-item {
    grid-template-columns: 4.3rem minmax(0, 1fr) auto;
    gap: 0.62rem;
  }

  .platform-category-game-item__cover {
    border-radius: 0.86rem;
  }

  .platform-category-game-item__title {
    font-size: 0.94rem;
  }

  .platform-category-game-item__meta {
    font-size: 0.72rem;
  }

  .platform-category-game-item__summary {
    font-size: 0.78rem;
  }

  .platform-category-game-item__action {
    min-width: 3.45rem;
    min-height: 2.08rem;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
  }

  .platform-public-work-card {
    width: 100%;
    border-radius: 0.9rem;
    background: color-mix(
      in srgb,
      var(--platform-subpanel-fill) 82%,
      #050506 18%
    );
  }

  .platform-public-work-card__cover {
    border-radius: 0;
  }

  .platform-public-work-card__body {
    min-height: 5.4rem;
    padding: 0.68rem 0.76rem 0.72rem;
    background: color-mix(
      in srgb,
      var(--platform-subpanel-fill) 78%,
      #050506 22%
    );
  }

  .platform-public-work-card--immersive {
    min-height: min(76vh, 38rem);
    border-radius: 1.25rem;
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .platform-public-work-card--immersive .platform-public-work-card__cover {
    aspect-ratio: 0.82;
    min-height: min(58vh, 28rem);
  }

  .platform-public-work-card--immersive
    .platform-public-work-card__cover::before {
    padding-top: 122%;
  }

  .platform-public-work-card--immersive .platform-public-work-card__body {
    min-height: 8rem;
    padding: 0.9rem 0.95rem 1rem;
  }

  .platform-public-work-card--immersive .platform-public-work-card__kind {
    max-width: 5.8rem;
  }

  .platform-mobile-hero-secondary {
    display: none;
  }

  .platform-bottom-nav__button--primary .platform-bottom-nav__icon-shell {
    width: calc(var(--platform-bottom-nav-icon-shell-size) + 0.48rem);
    height: calc(var(--platform-bottom-nav-icon-shell-size) + 0.48rem);
  }
}

@media (min-width: 768px) {
  .creation-work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .creation-work-card,
  .creation-work-card.platform-category-game-item {
    min-height: 10.75rem;
    border-radius: 1.05rem;
    padding: 0.85rem;
  }

  .creation-work-card-shell {
    border-radius: 1.05rem;
  }

  .creation-work-card__body {
    justify-content: flex-start;
    gap: 0.46rem;
  }

  .creation-work-card__title-row {
    align-items: flex-start;
  }

  .creation-work-card__summary {
    -webkit-line-clamp: 3;
  }

  .creation-work-card__side-cover {
    width: 62%;
  }
}

@media (min-width: 1180px) {
  .creation-work-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-desktop-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at top left,
      var(--platform-shell-glow-1),
      transparent 24%
    ),
    radial-gradient(
      circle at top right,
      var(--platform-shell-glow-2),
      transparent 18%
    ),
    radial-gradient(
      circle at 50% 0%,
      var(--platform-shell-glow-3),
      transparent 30%
    );
}

.platform-desktop-shell::after {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--platform-desktop-shell-inner-border);
  border-radius: 2rem;
  pointer-events: none;
}

.platform-desktop-topbar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--platform-desktop-panel-border);
  border-radius: 9999px;
  background: var(--platform-desktop-topbar-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(22px);
}

.platform-desktop-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at left,
      var(--platform-shell-glow-1),
      transparent 22%
    ),
    radial-gradient(
      circle at right,
      var(--platform-shell-glow-2),
      transparent 24%
    );
}

.platform-desktop-search {
  border: 1px solid var(--platform-desktop-panel-border);
  border-radius: 9999px;
  background: var(--platform-subpanel-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.platform-desktop-rail {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--platform-desktop-panel-border);
  border-radius: 1.9rem;
  background: var(--platform-desktop-panel-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 44px rgba(0, 0, 0, 0.08);
}

.platform-desktop-rail__button {
  display: flex;
  min-height: 5.25rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid transparent;
  border-radius: 1.5rem;
  color: var(--platform-nav-item-text);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.platform-desktop-rail__button:hover {
  transform: translateY(-1px);
  border-color: var(--platform-line-soft);
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-strong);
}

.platform-desktop-rail__button--active {
  border-color: var(--platform-nav-active-border);
  background: var(--platform-nav-active-fill);
  color: var(--platform-text-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--platform-nav-active-shadow);
}

.platform-desktop-rail__button--primary {
  min-height: 5.85rem;
  border-color: var(--platform-nav-active-border);
  background: var(--platform-nav-active-fill);
  box-shadow: var(--platform-nav-active-shadow);
}

.platform-desktop-rail__button--primary .platform-desktop-rail__icon-shell {
  transform: scale(1.1);
  background: var(--platform-nav-item-icon-active-fill);
  box-shadow: var(--platform-nav-icon-active-shadow);
}

.platform-desktop-rail__button--primary .platform-desktop-rail__icon,
.platform-desktop-rail__button--primary .platform-desktop-rail__label {
  color: var(--platform-nav-item-text-active);
}

.platform-desktop-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--platform-desktop-panel-border);
  border-radius: 1.9rem;
  background: var(--platform-desktop-panel-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 44px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(22px);
}

.platform-desktop-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at top right,
      var(--platform-surface-glow-a),
      transparent 24%
    ),
    radial-gradient(
      circle at bottom left,
      var(--platform-surface-glow-b),
      transparent 26%
    );
}

.platform-desktop-panel > * {
  position: relative;
  z-index: 1;
}

.platform-desktop-trending-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1.4rem;
  background: var(--platform-subpanel-fill);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.platform-desktop-trending-item:hover {
  transform: translateY(-2px);
  border-color: var(--platform-surface-hover-border);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--platform-desktop-hover-shadow);
}

.platform-auth-card {
  border: 1px solid var(--platform-modal-border);
  background: var(--platform-modal-fill);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
}

.platform-subpanel {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-subpanel-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.platform-input {
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1rem;
  background: var(--platform-input-fill);
  padding: 0.75rem 1rem;
  color: var(--platform-text-strong);
  outline: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
  box-shadow: inset 0 1px 0 var(--platform-input-highlight);
}

.platform-input::placeholder {
  color: var(--platform-text-soft);
}

.platform-input:focus {
  border-color: var(--platform-nav-active-border);
  background: var(--platform-input-fill-focus);
  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
}

.platform-profile-input {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-input-fill);
  color: var(--platform-text-strong);
  outline: none;
  box-shadow: inset 0 1px 0 var(--platform-input-highlight);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.platform-profile-input::placeholder {
  color: var(--platform-text-soft);
}

.platform-profile-input:focus {
  border-color: var(--platform-nav-active-border);
  background: var(--platform-input-fill-focus);
  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
}

.platform-primary-button {
  border: 1px solid var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: var(--platform-profile-action-shadow);
  transition:
    transform 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.platform-primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.platform-modal-close {
  background: var(--platform-profile-chip-fill);
  color: var(--platform-profile-chip-text);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.platform-modal-close:hover {
  background: var(--platform-profile-chip-hover-fill);
  color: var(--platform-text-strong);
}

.platform-profile-error {
  border: 1px solid var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
}

.platform-profile-success {
  border: 1px solid var(--platform-success-border);
  background: var(--platform-success-bg);
  color: var(--platform-success-text);
}

.platform-profile-hero {
  overflow: hidden;
  border: 1px solid var(--platform-profile-hero-border);
  background: var(--platform-profile-hero-fill);
  color: var(--platform-text-strong);
  box-shadow: var(--platform-profile-hero-shadow);
}

.platform-profile-avatar {
  background: var(--platform-profile-avatar-fill);
  color: white;
  box-shadow: var(--platform-profile-avatar-shadow);
}

.platform-profile-camera,
.platform-profile-chip,
.platform-profile-icon-button {
  background: var(--platform-profile-chip-fill);
  color: var(--platform-profile-chip-text);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.platform-profile-camera {
  border: 1px solid var(--platform-subpanel-border);
}

.platform-profile-chip:hover,
.platform-profile-icon-button:hover {
  background: var(--platform-profile-chip-hover-fill);
  color: var(--platform-text-strong);
}

.platform-profile-action {
  background: var(--platform-profile-action-fill);
  color: var(--platform-profile-action-text);
  box-shadow: var(--platform-profile-action-shadow);
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.platform-profile-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.platform-profile-page {
  gap: 0.75rem;
}

.platform-profile-header {
  position: relative;
  overflow: hidden;
  padding: 1.05rem 0.95rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.8rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(250, 241, 232, 0.93)
  );
  box-shadow: 0 20px 50px rgba(112, 57, 30, 0.12);
}

.platform-profile-header__actions {
  position: absolute;
  right: 0.8rem;
  top: 0.72rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.platform-profile-header__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #1e120c;
}

.platform-profile-scene-decor {
  position: absolute;
  right: 0.15rem;
  bottom: 0.1rem;
  width: min(44vw, 12rem);
  max-width: 12rem;
  opacity: 0.98;
  pointer-events: none;
  user-select: none;
}

.platform-profile-header__identity {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 2.6rem;
  padding-right: 6.75rem;
}

.platform-profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgba(210, 185, 166, 0.7);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.78);
  color: #6e5a4e;
}

.platform-profile-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0 0.78rem;
  border: 1px solid rgba(230, 192, 160, 0.9);
  border-radius: 9999px;
  background: rgba(255, 252, 248, 0.9);
  color: #7f4f31;
  font-size: 11px;
  font-weight: 700;
}

.platform-profile-membership-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 6.7rem;
  padding: 1rem 1rem 1rem 0.95rem;
  border: 0;
  border-radius: 1.55rem;
  background: linear-gradient(135deg, #eaa06a, #cf7a4a 58%, #b55c3b);
  color: white;
  text-align: left;
  box-shadow: 0 18px 38px rgba(189, 103, 60, 0.22);
}

.platform-profile-membership-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: none;
  border-radius: 1.1rem;
  background: rgba(255, 245, 233, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.platform-profile-membership-card__crown {
  width: 1.9rem;
  height: 1.9rem;
}

.platform-profile-membership-card__action {
  flex: none;
  padding: 0.92rem 1.05rem;
  border: 1px solid rgba(255, 250, 244, 0.88);
  border-radius: 9999px;
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.platform-profile-stats-panel,
.platform-profile-shortcut-panel,
.platform-profile-settings-panel,
.platform-profile-legal-strip {
  overflow: hidden;
  border: 1px solid rgba(235, 221, 208, 0.82);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 28px rgba(112, 57, 30, 0.06);
}

.platform-profile-stats-panel {
  padding: 1rem 0.9rem;
}

.platform-profile-stat-card {
  display: flex;
  min-width: 0;
  border: 0;
  border-radius: 1rem;
  background: transparent;
}

.platform-profile-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  flex: none;
  border-radius: 9999px;
  background: rgba(255, 243, 230, 0.9);
  color: #bc5f34;
}

.platform-profile-daily-task-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 8rem;
  padding: 1rem 1rem 1rem 1.05rem;
  border: 1px solid rgba(235, 221, 208, 0.82);
  border-radius: 1.55rem;
  background: rgba(255, 250, 246, 0.9);
  text-align: left;
  box-shadow: 0 10px 28px rgba(112, 57, 30, 0.06);
}

.platform-profile-daily-task-card__track {
  display: inline-flex;
  width: 9rem;
  height: 0.45rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(240, 226, 214, 0.88);
}

.platform-profile-daily-task-card__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e47631, #ce5f2a);
}

.platform-profile-daily-task-card__mascot {
  width: 7.4rem;
  height: auto;
  align-self: end;
  margin-bottom: -0.2rem;
}

.platform-profile-daily-task-card__action {
  flex: none;
  padding: 0.85rem 1.15rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f08b44, #e56a27);
  color: white;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(229, 106, 39, 0.24);
}

.platform-profile-shortcut-panel {
  padding: 0.95rem 0.85rem 1rem;
}

.platform-profile-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
}

.platform-profile-shortcut-button {
  border: 0;
  border-radius: 0.95rem;
  background: transparent;
}

.platform-profile-shortcut-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    rgba(255, 239, 226, 0.96),
    rgba(245, 202, 166, 0.92)
  );
  box-shadow: 0 10px 20px rgba(201, 123, 73, 0.15);
  color: #c76a38;
}

.platform-profile-secondary-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.platform-profile-secondary-shortcut {
  border: 1px solid rgba(232, 214, 201, 0.82);
  background: rgba(255, 252, 248, 0.96);
  color: var(--platform-text-strong);
  box-shadow: 0 8px 18px rgba(112, 57, 30, 0.05);
}

.platform-profile-secondary-shortcut__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 9999px;
  background: rgba(255, 237, 222, 0.95);
  color: #bf673b;
}

.platform-profile-settings-panel {
  padding: 0.2rem 0;
}

.platform-profile-settings-row {
  border: 0;
  background: transparent;
}

.platform-profile-settings-row + .platform-profile-settings-row {
  border-top: 1px solid rgba(235, 221, 208, 0.82);
}

.platform-profile-settings-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  border-radius: 9999px;
  background: rgba(255, 245, 234, 0.95);
  color: #3b2a20;
}

.platform-profile-legal-strip {
  padding: 0.55rem 0.75rem 0.8rem;
  text-align: center;
}

.platform-profile-legal-strip__links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.platform-profile-legal-strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  border: 0;
  background: transparent;
  color: var(--platform-text-strong);
  font-size: 13px;
  font-weight: 500;
}

.platform-profile-legal-strip__divider {
  width: 1px;
  margin: 0.2rem 0.45rem;
  background: rgba(229, 206, 190, 0.88);
}

.platform-profile-legal-strip__record {
  display: block;
  margin-top: 0.35rem;
  color: #6e6a67;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 639px) {
  .platform-profile-page {
    gap: 0.82rem;
  }

  .platform-profile-header {
    padding: 0.95rem 0.85rem 0.82rem;
    border-radius: 1.4rem;
  }

  .platform-profile-header__actions {
    right: 0.64rem;
    top: 0.6rem;
    gap: 0.5rem;
  }

  .platform-profile-header__identity {
    padding-top: 2.45rem;
    padding-right: 4.9rem;
  }

  .platform-profile-header__identity-row {
    align-items: flex-start;
    gap: 0.78rem;
  }

  .platform-profile-header__text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .platform-profile-header__name {
    font-size: clamp(1rem, 4.8vw, 1.2rem);
    line-height: 1.15;
  }

  .platform-profile-header__code {
    margin-top: 0.55rem;
    font-size: 11px;
    line-height: 1.4;
  }

  .platform-profile-header__icon-button {
    width: 1.78rem;
    height: 1.78rem;
  }

  .platform-profile-scene-decor {
    right: -0.08rem;
    bottom: 0;
    width: min(39vw, 8.8rem);
  }

  .platform-profile-membership-card {
    min-height: 5.85rem;
    padding: 0.78rem 0.82rem;
    gap: 0.72rem;
  }

  .platform-profile-membership-card__badge {
    width: 3.2rem;
    height: 3.2rem;
  }

  .platform-profile-membership-card__title {
    font-size: 1rem;
  }

  .platform-profile-membership-card__subtitle {
    margin-top: 0.4rem;
    font-size: 12px;
    line-height: 1.45;
  }

  .platform-profile-membership-card__action {
    padding: 0.64rem 0.78rem;
    font-size: 11px;
  }

  .platform-profile-stats-panel,
  .platform-profile-shortcut-panel,
  .platform-profile-settings-panel,
  .platform-profile-legal-strip {
    border-radius: 1.12rem;
  }

  .platform-profile-stats-panel {
    padding: 0.72rem 0.66rem;
  }

  .platform-profile-stats-grid {
    gap: 0.45rem;
  }

  .platform-profile-stat-card {
    min-height: 4.95rem;
    align-items: center;
    gap: 0.56rem;
    padding: 0.55rem 0.42rem;
  }

  .platform-profile-stat-card__icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .platform-profile-stat-card__value {
    font-size: 0.95rem;
    line-height: 1.08;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .platform-profile-stat-card__label {
    margin-top: 0.22rem;
    font-size: 11px;
    line-height: 1.18;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .platform-profile-daily-task-card {
    min-height: 6.55rem;
    padding: 0.8rem 0.8rem 0.8rem 0.86rem;
    border-radius: 1.12rem;
    gap: 0.7rem;
  }

  .platform-profile-daily-task-card__track {
    width: min(7rem, 52vw);
  }

  .platform-profile-daily-task-card__mascot {
    width: min(5.2rem, 24vw);
  }

  .platform-profile-daily-task-card__title {
    font-size: 14px;
  }

  .platform-profile-daily-task-card__desc {
    margin-top: 0.45rem;
    font-size: 12px;
    line-height: 1.42;
  }

  .platform-profile-daily-task-card__progress {
    margin-top: 0.55rem;
    gap: 0.55rem;
  }

  .platform-profile-daily-task-card__progress-value {
    font-size: 12px;
  }

  .platform-profile-shortcut-panel {
    padding: 0.78rem 0.66rem 0.8rem;
  }

  .platform-profile-shortcut-grid {
    gap: 0.12rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .platform-profile-shortcut-button {
    min-height: 4.35rem;
    padding: 0.48rem 0.08rem 0.52rem;
  }

  .platform-profile-shortcut-button__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  .platform-profile-shortcut-button__sub-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .platform-profile-shortcut-button__icon {
    width: 2.12rem;
    height: 2.12rem;
  }

  .platform-profile-settings-panel {
    padding: 0.2rem 0;
  }

  .platform-profile-settings-row {
    padding: 0.72rem 0.8rem;
  }

  .platform-profile-settings-row__icon {
    width: 2.1rem;
    height: 2.1rem;
  }

  .platform-profile-settings-row span:last-child {
    font-size: 14px;
  }

  .platform-profile-legal-strip {
    padding: 0.5rem 0.52rem 0.68rem;
  }

  .platform-profile-legal-strip__links {
    flex-wrap: wrap;
  }

  .platform-profile-legal-strip__link {
    font-size: 11px;
    line-height: 1.3;
  }

  .platform-profile-legal-strip__record {
    font-size: 10px;
  }

  .platform-mobile-create-wallet-chip {
    max-width: min(48vw, 10rem);
  }

  .platform-mobile-create-wallet-chip > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .platform-mobile-create-wallet-chip,
  .platform-desktop-create-wallet-chip {
    min-width: 0;
  }
}

.platform-role-studio__preview {
  border: 1px solid var(--platform-subpanel-border);
  background: radial-gradient(
      circle at top,
      var(--platform-surface-glow-a),
      transparent 48%
    ),
    var(--platform-subpanel-fill);
}

.platform-role-studio__stage {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-track-fill);
}

.platform-npc-portrait {
  border: 1px solid var(--platform-subpanel-border);
  background: radial-gradient(
      circle at top,
      var(--platform-surface-glow-a),
      transparent 48%
    ),
    var(--platform-subpanel-fill);
}

.platform-npc-portrait__grid {
  opacity: 0.14;
  background-image: linear-gradient(
      var(--platform-line-soft) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, var(--platform-line-soft) 1px, transparent 1px);
  background-size: 16px 16px;
}

.platform-role-studio__footer {
  border-top: 1px solid var(--platform-subpanel-border);
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 16%
    ),
    var(--platform-desktop-panel-fill);
  backdrop-filter: blur(18px);
}

.platform-theme
  :where(
    .platform-modal-shell,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface,
    .platform-role-studio
  )
  :where(
    input:not([type='file']):not([type='range']):not([type='checkbox']):not(
        [type='radio']
      ),
    textarea,
    select
  ) {
  border-color: var(--platform-subpanel-border) !important;
  background: var(--platform-input-fill) !important;
  color: var(--platform-text-strong) !important;
  box-shadow: inset 0 1px 0 var(--platform-input-highlight);
}

.platform-theme
  :where(
    .platform-modal-shell,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface,
    .platform-role-studio
  )
  :where(
    input:not([type='file']):not([type='range']):not([type='checkbox']):not(
        [type='radio']
      ),
    textarea,
    select
  )::placeholder {
  color: var(--platform-text-soft) !important;
}

.platform-theme
  :where(
    .platform-modal-shell,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface,
    .platform-role-studio
  )
  :where(
    input:not([type='file']):not([type='range']):not([type='checkbox']):not(
        [type='radio']
      ),
    textarea,
    select
  ):focus {
  border-color: var(--platform-nav-active-border) !important;
  background: var(--platform-input-fill-focus) !important;
  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
}

.platform-banner {
  border-radius: 1rem;
  border: 1px solid var(--platform-subpanel-border);
  padding: 0.875rem 1rem;
}

.platform-banner--info {
  border-color: var(--platform-cool-border);
  background: var(--platform-cool-bg);
  color: var(--platform-cool-text);
}

.platform-banner--warning {
  border-color: var(--platform-warm-border);
  background: var(--platform-warm-bg);
  color: var(--platform-warm-text);
}

.platform-banner--success {
  border-color: var(--platform-success-border);
  background: var(--platform-success-bg);
  color: var(--platform-success-text);
}

.platform-banner--danger {
  border-color: var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: #a6402f;
}

.platform-progress-track {
  border: 1px solid var(--platform-track-border);
  background: var(--platform-track-fill);
}

@keyframes custom-world-generation-step-slide-in {
  from {
    opacity: 0;
    transform: translateX(-110vw);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 639px) {
  .custom-world-generation-step {
    animation-name: custom-world-generation-step-slide-in;
    animation-duration: 0.38s;
    animation-timing-function: ease-out;
    animation-delay: var(--generation-step-delay, 0ms);
    animation-fill-mode: both;
  }
}

.platform-cover-artwork {
  background: radial-gradient(
      circle at top,
      var(--platform-surface-glow-a),
      transparent 42%
    ),
    var(--platform-subpanel-fill);
}

.custom-world-cover-artwork {
  background: radial-gradient(
      circle at 20% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 6%,
      rgba(255, 138, 115, 0.22),
      transparent 34%
    ),
    linear-gradient(135deg, #fffdf9 0%, #f4e5d7 48%, #eaccb3 100%);
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-white'],
.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-50'],
.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-100'] {
  color: var(--platform-text-strong) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-200'],
.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-300'] {
  color: var(--platform-text-base) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-400'],
.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface
  )[class*='text-zinc-500'] {
  color: var(--platform-text-soft) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='text-white'],
    [class*='text-zinc-50'],
    [class*='text-zinc-100']
  ) {
  color: var(--platform-text-strong) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel
  )
  :where([class*='text-zinc-200'], [class*='text-zinc-300']) {
  color: var(--platform-text-base) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-desktop-topbar,
    .platform-desktop-search,
    .platform-desktop-rail,
    .platform-auth-card,
    .platform-subpanel
  )
  :where([class*='text-zinc-400'], [class*='text-zinc-500']) {
  color: var(--platform-text-soft) !important;
}

.platform-theme--light
  .platform-surface:not(.platform-surface--hero)
  :where([class*='bg-black/18'], [class*='bg-black/24']),
.platform-theme--light
  .platform-subpanel:where([class*='bg-black/18'], [class*='bg-black/24']),
.platform-theme--light
  .platform-remap-surface:where(
    [class*='bg-black/18'],
    [class*='bg-black/24']
  ) {
  background: var(--platform-subpanel-fill) !important;
}

.platform-theme--light
  .platform-surface:not(.platform-surface--hero)
  :where(
    [class*='border-white/10'],
    [class*='border-white/12'],
    [class*='border-white/15']
  ),
.platform-theme--light
  .platform-subpanel:where(
    [class*='border-white/10'],
    [class*='border-white/12'],
    [class*='border-white/15']
  ),
.platform-theme--light
  .platform-remap-surface:where(
    [class*='border-white/10'],
    [class*='border-white/12'],
    [class*='border-white/15']
  ) {
  border-color: var(--platform-subpanel-border) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='bg-black/10'],
    [class*='bg-black/16'],
    [class*='bg-black/18'],
    [class*='bg-black/20'],
    [class*='bg-black/22'],
    [class*='bg-black/25'],
    [class*='bg-black/26'],
    [class*='bg-black/30'],
    [class*='bg-black/35'],
    [class*='bg-black/46'],
    [class*='bg-black/55'],
    [class*='bg-white/5'],
    [class*='bg-white/6'],
    [class*='bg-white/8']
  ) {
  background: var(--platform-subpanel-fill) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='border-white/8'],
    [class*='border-white/10'],
    [class*='border-white/12'],
    [class*='border-white/16'],
    [class*='border-white/18'],
    [class*='border-white/20'],
    [class*='border-white/22'],
    [class*='border-white/25']
  ) {
  border-color: var(--platform-subpanel-border) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='text-sky-50'],
    [class*='text-sky-100'],
    [class*='text-sky-200'],
    [class*='text-sky-300']
  ) {
  color: var(--platform-cool-text) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='bg-sky-500/8'],
    [class*='bg-sky-500/10'],
    [class*='bg-sky-500/12'],
    [class*='bg-sky-500/15']
  ) {
  background-color: var(--platform-cool-bg) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='border-sky-200/'],
    [class*='border-sky-300/'],
    [class*='border-sky-400/']
  ) {
  border-color: var(--platform-cool-border) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='text-amber-50'],
    [class*='text-amber-100'],
    [class*='text-amber-200']
  ) {
  color: var(--platform-warm-text) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='bg-amber-500/8'],
    [class*='bg-amber-500/10'],
    [class*='bg-amber-500/12'],
    [class*='bg-amber-500/15']
  ) {
  background-color: var(--platform-warm-bg) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-auth-card,
    .platform-subpanel
  )
  :where([class*='border-amber-300/'], [class*='border-amber-400/']) {
  border-color: var(--platform-warm-border) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='text-emerald-50'],
    [class*='text-emerald-100'],
    [class*='text-emerald-600']
  ) {
  color: var(--platform-success-text) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where(
    [class*='bg-emerald-500/8'],
    [class*='bg-emerald-500/10'],
    [class*='bg-emerald-500/12'],
    [class*='bg-emerald-500/15']
  ) {
  background-color: var(--platform-success-bg) !important;
}

.platform-theme--light
  :where(
    .platform-surface:not(.platform-surface--hero),
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel
  )
  :where([class*='border-emerald-300/'], [class*='border-emerald-400/']) {
  border-color: var(--platform-success-border) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='text-white'],
    [class*='text-zinc-50'],
    [class*='text-zinc-100']
  ) {
  color: var(--platform-text-strong) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where([class*='text-zinc-200'], [class*='text-zinc-300']) {
  color: var(--platform-text-base) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where([class*='text-zinc-400'], [class*='text-zinc-500']) {
  color: var(--platform-text-soft) !important;
}

.platform-theme--light
  :where(
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel,
    .platform-remap-surface,
    .platform-role-studio
  )
  :where(
    [class~='bg-black/24'],
    [class~='bg-black/26'],
    [class~='bg-black/30'],
    [class~='bg-[#111318]/92'],
    [class~='bg-[#111318]/95'],
    [class~='bg-[#11161f]']
  ) {
  background: var(--platform-subpanel-fill) !important;
}

.platform-theme--light
  :where(
    .platform-modal-shell,
    .platform-desktop-panel,
    .platform-desktop-trending-item,
    .platform-auth-card,
    .platform-subpanel,
    .platform-role-studio
  )
  :where([class~='bg-white/10'], [class~='bg-white/12']) {
  background-color: var(--platform-track-fill) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class~='bg-black/18'],
    [class~='bg-black/20'],
    [class~='bg-black/22'],
    [class~='bg-black/24'],
    [class~='bg-black/26'],
    [class~='bg-black/30'],
    [class~='bg-[#111318]/92'],
    [class~='bg-[#111318]/95'],
    [class~='bg-white/5'],
    [class~='bg-white/6'],
    [class~='bg-white/8']
  ) {
  background: var(--platform-subpanel-fill) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='border-white/8'],
    [class*='border-white/10'],
    [class*='border-white/12'],
    [class*='border-white/14'],
    [class*='border-white/16'],
    [class*='border-white/18'],
    [class*='border-white/20'],
    [class*='border-white/22'],
    [class*='border-white/25']
  ) {
  border-color: var(--platform-subpanel-border) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='text-sky-50'],
    [class*='text-sky-100'],
    [class*='text-sky-200'],
    [class*='text-sky-300']
  ) {
  color: var(--platform-cool-text) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='bg-sky-500/8'],
    [class*='bg-sky-500/10'],
    [class*='bg-sky-500/12'],
    [class*='bg-sky-500/15']
  ) {
  background-color: var(--platform-cool-bg) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='border-sky-200/'],
    [class*='border-sky-300/'],
    [class*='border-sky-400/']
  ) {
  border-color: var(--platform-cool-border) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='text-amber-50'],
    [class*='text-amber-100'],
    [class*='text-amber-200']
  ) {
  color: var(--platform-warm-text) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='bg-amber-500/8'],
    [class*='bg-amber-500/10'],
    [class*='bg-amber-500/12'],
    [class*='bg-amber-500/15']
  ) {
  background-color: var(--platform-warm-bg) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where([class*='border-amber-300/'], [class*='border-amber-400/']) {
  border-color: var(--platform-warm-border) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='text-emerald-50'],
    [class*='text-emerald-100'],
    [class*='text-emerald-600']
  ) {
  color: var(--platform-success-text) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class*='bg-emerald-500/8'],
    [class*='bg-emerald-500/10'],
    [class*='bg-emerald-500/12'],
    [class*='bg-emerald-500/15']
  ) {
  background-color: var(--platform-success-bg) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where([class*='border-emerald-300/'], [class*='border-emerald-400/']) {
  border-color: var(--platform-success-border) !important;
}

/* 结果页亮色主题细节：只接管旧深色工具类，不改变页面结构。 */
.platform-theme--light .platform-result-hero {
  border-color: var(--platform-surface-border) !important;
  background: radial-gradient(
      circle at top left,
      rgba(240, 203, 169, 0.34),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 243, 236, 0.9)) !important;
  color: var(--platform-text-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 18px 42px rgba(112, 57, 30, 0.1);
}

.platform-theme--light
  .platform-result-hero
  :where([class*='text-white'], [class*='text-cyan-50']) {
  color: var(--platform-text-strong) !important;
}

.platform-theme--light
  .platform-result-hero
  :where([class*='bg-white/10'], [class*='bg-white/12']) {
  border: 1px solid var(--platform-subpanel-border);
  background: var(--platform-subpanel-fill) !important;
  color: var(--platform-text-base) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class~='bg-white/52'],
    [class~='bg-white/72'],
    [class~='bg-white/78'],
    [class~='bg-white/86'],
    [class~='bg-white/90']
  ) {
  background: var(--platform-subpanel-fill) !important;
}

.platform-theme--light
  .platform-remap-surface
  :where(
    [class~='bg-amber-600'],
    [class~='bg-cyan-600'],
    [class~='bg-cyan-200']
  ) {
  border-color: var(--platform-button-primary-border) !important;
  background: var(--platform-button-primary-fill) !important;
  color: var(--platform-button-primary-text) !important;
  box-shadow: 0 12px 26px rgba(182, 98, 63, 0.16);
}

.platform-theme--light .map-modal-overlay {
  background: rgba(74, 34, 15, 0.24) !important;
}

.platform-theme--light .map-modal-shell {
  background: var(--platform-modal-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 24px 70px rgba(112, 57, 30, 0.2) !important;
}

.platform-theme--light .map-modal-backdrop {
  opacity: 0.18;
  filter: saturate(0.82) brightness(1.28);
}

.platform-theme--light .map-modal-shade {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7),
    rgba(250, 243, 236, 0.88)
  ) !important;
}

.platform-theme--light .map-info-panel,
.platform-theme--light .map-room-cell {
  color: var(--platform-text-base) !important;
  --frame-base: rgba(255, 255, 255, 0.9);
}

.platform-theme--light .map-room-cell {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 22px rgba(132, 90, 106, 0.08);
}

.platform-theme--light .map-modal-shell svg line {
  stroke: rgba(199, 101, 61, 0.32);
}

button {
  cursor: pointer;
}

.pixel-root-shell {
  image-rendering: pixelated;
}

.pixel-app-shell {
  background-position: center;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.pixel-nine-slice {
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-top-width: calc(
    var(--slice-top, 16) * var(--frame-scale, var(--ui-scale)) * 1px
  );
  border-right-width: calc(
    var(--slice-right, 16) * var(--frame-scale, var(--ui-scale)) * 1px
  );
  border-bottom-width: calc(
    var(--slice-bottom, 16) * var(--frame-scale, var(--ui-scale)) * 1px
  );
  border-left-width: calc(
    var(--slice-left, 16) * var(--frame-scale, var(--ui-scale)) * 1px
  );
  border-image-source: var(--frame-src);
  border-image-slice: var(--slice-top, 16) var(--slice-right, 16)
    var(--slice-bottom, 16) var(--slice-left, 16) fill;
  border-image-repeat: var(--frame-repeat, round);
  padding: calc(
      var(--frame-pad-y, 12) * var(--frame-scale, var(--ui-scale)) * 1px
    )
    calc(var(--frame-pad-x, 14) * var(--frame-scale, var(--ui-scale)) * 1px);
  background-color: var(--frame-base, transparent);
}

.pixel-pressable {
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.pixel-pressable:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.pixel-pressable:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.pixel-section-title {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.pixel-world-button {
  min-height: clamp(7.5rem, 26vw, 10.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.5vw, 0.7rem);
  text-align: center;
}

.pixel-world-button__icon {
  width: clamp(2rem, 9vw, 3.2rem);
  height: clamp(2rem, 9vw, 3.2rem);
}

.pixel-world-button__label {
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  font-weight: 700;
  color: #fff7ed;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

.pixel-character-card {
  min-height: clamp(7rem, 24vw, 9rem);
}

.pixel-tab-button {
  display: flex;
  min-height: 1.65rem;
  align-items: center;
  justify-content: center;
}

.pixel-tab-button__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.pixel-tab-button__icon {
  width: 0.9rem;
  height: 0.9rem;
}

.pixel-tab-button__label {
  font-size: clamp(0.66rem, 1.9vw, 0.78rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

.pixel-tab-button--active .pixel-tab-button__label {
  color: #fff7ed;
}

.pixel-panel {
  min-width: 0;
}

.pixel-choice-button {
  min-width: 0;
}

.pixel-modal-shell {
  min-width: 0;
}

.world-carousel {
  --world-card-height: 10rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  overflow-y: auto;
  padding: max(0.75rem, calc(50% - var(--world-card-height) / 2)) 0.15rem;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}

.world-carousel__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: var(--world-card-height);
  transform-origin: center center;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    filter 220ms ease;
  scroll-snap-align: center;
  will-change: transform, opacity, filter;
}

.world-carousel__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.world-carousel__badge {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.world-carousel__title {
  display: block;
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-weight: 900;
  color: white;
}

.world-carousel__bottom {
  display: flex;
  margin-top: auto;
}

.world-carousel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.world-carousel__tag {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 11px;
  color: rgb(244 244 245);
}

.character-carousel {
  --character-card-width: clamp(12rem, 52vw, 15rem);
  display: flex;
  gap: 0.9rem;
  min-height: 0;
  overflow-x: auto;
  padding: 0.8rem max(1rem, calc(50% - var(--character-card-width) / 2));
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.character-carousel__card {
  flex: 0 0 var(--character-card-width);
  height: clamp(16.25rem, 38vh, 18.5rem);
  scroll-snap-align: center;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    filter 220ms ease;
  transform-origin: center bottom;
  will-change: transform, opacity, filter;
}

.character-carousel__surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(18, 22, 30, 0.92),
    rgba(6, 8, 12, 0.98)
  );
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.character-carousel__surface--active {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 20px 50px rgba(251, 191, 36, 0.12);
}

.character-carousel__cover {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(
      circle at 50% 22%,
      rgba(255, 255, 255, 0.14),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0) 38%
    );
}

.character-carousel__portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.32) translateY(6px);
}

.character-carousel__portrait--animated {
  height: 86%;
  transform: scale(1.22) translateY(10px);
  transform-origin: center bottom;
}

.character-carousel__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.character-carousel__meta--selected {
  gap: 0.2rem;
  padding-top: 0.05rem;
}

.character-carousel__role {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  padding: 0.25rem 0.7rem;
  font-size: 10px;
  color: rgb(228 228 231);
}

.character-carousel__name {
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
  color: white;
}

.character-carousel__selected-name {
  display: block;
  padding: 0.35rem 0.85rem 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  text-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.character-carousel__title {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgb(161 161 170);
}

.character-carousel__title--selected {
  text-align: center;
  text-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.character-carousel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.character-carousel__stat {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  padding: 0.28rem 0.65rem;
  font-size: 11px;
  color: white;
}

.character-backstory-title {
  font-size: 0;
  line-height: 0;
}

.character-backstory-title::after {
  content: '角色背景';
  font-size: 0.75rem;
  line-height: 1rem;
  color: white;
}

.selection-strip {
  display: flex;
  gap: 1rem;
  min-height: 0;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}

.flip-card {
  flex: 0 0 clamp(17rem, 28vw, 20rem);
  height: clamp(18rem, 44vh, 21rem);
  perspective: 1600px;
  scroll-snap-align: start;
}

.flip-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 360ms ease;
}

.flip-card:hover .flip-card__inner,
.flip-card--flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card__face--back {
  transform: rotateY(180deg);
}

.world-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  overflow-y: auto;
  padding-right: 0.15rem;
  scroll-snap-type: y proximity;
}

.world-stack-card {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-height: 9rem;
  scroll-snap-align: start;
}

.world-stack-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.world-stack-card__badge {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.world-stack-card__title {
  display: block;
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-weight: 900;
  color: white;
}

.world-stack-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.world-stack-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.world-stack-card__tag {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 11px;
  color: rgb(244 244 245);
}

.world-stack-card__enter {
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  padding: 0.42rem 0.95rem;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

@media (max-width: 640px) {
  :root {
    --ui-scale: 0.8;
    --platform-bottom-nav-height: 3.85rem;
    --platform-bottom-nav-label-size: 10px;
  }

  .platform-main-shell {
    padding-inline: max(0.75rem, env(safe-area-inset-left))
      max(0.75rem, env(safe-area-inset-right));
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: 0.5rem;
  }

  .platform-page-stage {
    border-radius: 1.45rem;
  }

  .platform-bottom-nav {
    position: relative;
    z-index: 30;
  }

  .selection-hero-brand {
    gap: 0.6rem;
  }

  .selection-hero-brand__title {
    letter-spacing: 0.16em;
  }

  .selection-hero-brand__subtitle {
    letter-spacing: 0.28em;
  }

  .platform-brand-logo {
    width: auto;
  }

  .platform-brand-logo__title {
    font-size: 1.72rem;
    letter-spacing: 0.03em;
  }

  .platform-brand-logo__subtitle {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  .world-carousel {
    --world-card-height: 8.75rem;
    max-width: 100%;
  }

  .character-carousel {
    --character-card-width: 10.75rem;
    gap: 0.65rem;
  }

  .character-carousel__card {
    height: 15.5rem;
  }

  .character-carousel__cover {
    min-height: 0;
  }

  .character-carousel__meta {
    padding: 0.6rem 0.7rem 0.7rem;
  }

  .character-carousel__selected-name {
    padding-inline: 0.65rem;
    font-size: 0.95rem;
  }

  .character-carousel__name {
    font-size: 1rem;
  }

  .character-carousel__title {
    font-size: 8px;
    letter-spacing: 0.14em;
  }

  .selection-strip {
    gap: 0.75rem;
  }

  .flip-card {
    flex-basis: 15rem;
    height: 18rem;
  }

  .world-stack {
    max-width: 100%;
  }

  .world-stack-card {
    min-height: 8.75rem;
  }

  .world-stack-card__title {
    font-size: 1.7rem;
  }

  .world-stack-card__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .pixel-character-card {
    min-height: 6.6rem;
  }

  .pixel-modal-shell {
    max-height: min(90vh, 46rem);
    overflow: auto;
  }
}

@media (min-width: 641px) {
  .world-carousel {
    max-width: 28rem;
  }

  .world-stack {
    max-width: 30rem;
  }
}

/* Custom scrollbar for the story area */
::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.platform-work-detail {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--platform-page-border);
  background: var(--platform-page-fill);
  color: var(--platform-text-strong);
}

.platform-work-detail__topbar {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 1rem 0.75rem;
  border-bottom: 1px solid var(--platform-line-soft);
  background: var(--platform-desktop-topbar-fill);
  box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.05);
}

.platform-work-detail__title {
  min-width: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
}

.platform-work-detail__icon-button {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-icon-border);
  border-radius: 999px;
  background: var(--platform-icon-fill);
  color: var(--platform-icon-text);
}

.platform-work-detail__icon-button:disabled {
  opacity: 0.45;
}

.platform-work-detail__scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.platform-work-detail__cover {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--platform-hero-fill);
}

.platform-work-detail__cover-blur {
  position: absolute;
  inset: -1rem;
  height: calc(100% + 2rem);
  width: calc(100% + 2rem);
  object-fit: cover;
  opacity: 0.55;
  filter: blur(24px);
  transform: scale(1.06);
}

.platform-work-detail__cover::after {
  position: absolute;
  inset: 0;
  content: '';
  background: var(--platform-card-overlay-strong);
}

.platform-work-detail__cover-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.platform-work-detail__cover-image--locked {
  filter: blur(18px) saturate(0.7);
  opacity: 0.58;
  transform: scale(1.08);
}

.platform-work-detail__cover-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
}

.platform-work-detail__cover-lock-icon {
  width: clamp(3.6rem, 18vw, 7rem);
  height: clamp(3.6rem, 18vw, 7rem);
  color: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 1.2rem 2rem rgba(15, 23, 42, 0.34));
}

.platform-work-detail__cover-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  height: 2.4rem;
  width: 2.4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.36);
  color: #fff;
  transform: translateY(-50%);
  backdrop-filter: blur(14px);
}

.platform-work-detail__cover-nav--prev {
  left: 0.8rem;
}

.platform-work-detail__cover-nav--next {
  right: 0.8rem;
}

.platform-work-detail__cover-dots {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  left: 1rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.38rem;
}

.platform-work-detail__cover-dot {
  height: 0.45rem;
  width: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  padding: 0;
  transition:
    background 160ms ease,
    width 160ms ease;
}

.platform-work-detail__cover-dot--active {
  width: 1.25rem;
  background: #fff;
}

.platform-work-detail__cover-fallback {
  position: absolute;
  inset: 0;
  background: var(--platform-hero-fill);
}

.platform-work-detail__summary {
  border-bottom: 0.5rem solid var(--platform-page-border);
  background: var(--platform-panel-fill);
  padding: 1.4rem 1rem 1rem;
}

.platform-work-detail__meta-row {
  display: grid;
  grid-template-columns: 4.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.platform-work-detail__app-icon {
  display: flex;
  aspect-ratio: 1;
  width: 4.35rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--platform-icon-border);
  background: var(--platform-profile-avatar-fill);
  color: var(--platform-button-primary-text);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: var(--platform-profile-avatar-shadow);
}

.platform-work-detail__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 900;
}

.platform-work-detail__author {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  color: var(--platform-text-soft);
  font-size: 0.8125rem;
}

.platform-work-detail__author-avatar {
  display: inline-flex;
  height: 1.35rem;
  width: 1.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--platform-icon-border);
  border-radius: 999px;
  background: var(--platform-profile-avatar-fill);
  color: var(--platform-button-primary-text);
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 0 0.35rem 0.8rem rgba(15, 23, 42, 0.08);
}

.platform-work-detail__author-avatar-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.platform-work-detail__author-avatar-label {
  line-height: 1;
}

.platform-work-detail__author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-work-detail__like {
  display: inline-flex;
  min-width: 5.2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: 1px solid
    color-mix(
      in srgb,
      var(--platform-work-like-accent, #c7653d) 24%,
      transparent
    );
  border-radius: 1rem;
  background: color-mix(
    in srgb,
    var(--platform-work-like-accent, #c7653d) 10%,
    var(--platform-panel-fill) 90%
  );
  color: var(--platform-work-like-accent, #c7653d);
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 900;
  box-shadow: 0 0.55rem 1.2rem
    color-mix(
      in srgb,
      var(--platform-work-like-accent, #c7653d) 10%,
      transparent
    );
}

.platform-work-detail__remix:disabled,
.platform-work-detail__start:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.platform-work-detail__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 1.35rem;
}

.platform-work-detail__stat {
  --platform-work-stat-accent: #c7653d;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--platform-work-stat-accent) 24%, transparent);
  border-radius: 0.5rem;
  background: radial-gradient(
      circle at 88% 0,
      color-mix(in srgb, var(--platform-work-stat-accent) 14%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--platform-neutral-bg) 88%, #ffffff 12%);
  padding: 0.5rem 0.42rem 0.48rem;
  box-shadow: 0 0.55rem 1.2rem
    color-mix(in srgb, var(--platform-work-stat-accent) 10%, transparent);
}

.platform-work-detail__stat--play {
  --platform-work-stat-accent: #2f9d78;
}

.platform-work-detail__stat--like {
  --platform-work-stat-accent: #b64a35;
}

.platform-work-detail__stat--time {
  --platform-work-stat-accent: #6b7cff;
}

.platform-work-detail__stat-head {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.24rem;
  white-space: nowrap;
}

.platform-work-detail__stat-icon {
  display: inline-flex;
  height: 1.32rem;
  width: 1.32rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.42rem;
  background: color-mix(
    in srgb,
    var(--platform-work-stat-accent) 13%,
    #ffffff 87%
  );
  color: var(--platform-work-stat-accent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--platform-work-stat-accent) 13%, transparent);
}

.platform-work-detail__stat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--platform-text-soft);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
}

.platform-work-detail__stat-value {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.12rem;
  margin-top: 0.4rem;
  white-space: nowrap;
  color: var(--platform-text-strong);
  font-weight: 900;
  line-height: 1.12;
}

.platform-work-detail__stat-number {
  min-width: 0;
  font-size: 1.05rem;
}

.platform-work-detail__stat-unit {
  flex: 0 0 auto;
  color: var(--platform-text-soft);
  font-size: 0.625rem;
  font-weight: 800;
}

.platform-work-detail__stat-value--time {
  display: block;
  overflow: hidden;
  text-overflow: clip;
  font-size: 0.6875rem;
  font-weight: 900;
}

.platform-work-detail__stat-value--time .platform-work-detail__stat-number {
  font-size: inherit;
}

.platform-work-detail__body {
  background: var(--platform-panel-fill);
  padding: 1.4rem 1rem 7rem;
}

.platform-work-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.platform-work-detail__chip,
.platform-work-detail__code {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--platform-neutral-border);
  border-radius: 0.7rem;
  background: var(--platform-neutral-bg);
  color: var(--platform-neutral-text);
  padding: 0.42rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.platform-work-detail__copy {
  margin: 0;
  color: var(--platform-text-base);
  font-size: 0.875rem;
  line-height: 1.7;
}

.platform-work-detail__code {
  margin-top: 1.3rem;
}

.platform-work-detail__error,
.platform-work-detail__toast {
  margin-top: 1rem;
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.875rem;
}

.platform-work-detail__error {
  border: 1px solid var(--platform-button-danger-border);
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
}

.platform-work-detail__toast {
  border: 1px solid var(--platform-success-border);
  background: var(--platform-success-bg);
  color: var(--platform-success-text);
}

.platform-work-detail__bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(7.2rem, 0.44fr) minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.9rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  border-top: 1px solid var(--platform-line-soft);
  background: var(--platform-panel-fill);
  backdrop-filter: blur(18px);
}

.platform-work-detail__remix,
.platform-work-detail__start {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid var(--platform-button-primary-border);
  border-radius: 999px;
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: var(--platform-profile-action-shadow);
}

.platform-work-detail__remix {
  border: 1px solid var(--platform-neutral-border);
  background: var(--platform-neutral-bg);
  color: var(--platform-neutral-text);
  font-size: 0.875rem;
}

.platform-work-detail__start {
  border: 1px solid var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  font-size: 1rem;
}

.creative-agent-home {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--platform-page-border);
  border-radius: 1.6rem;
  background: radial-gradient(
      circle at 50% 18%,
      var(--platform-shell-glow-2),
      transparent 32%
    ),
    radial-gradient(
      circle at 84% 12%,
      var(--platform-shell-glow-3),
      transparent 24%
    ),
    var(--platform-page-fill);
  color: var(--platform-text-strong);
}

.creative-agent-home__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.01)
    ),
    var(--platform-page-fill);
}

.creative-agent-home__topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.7rem;
}

.creative-agent-home__topbar-button {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--platform-text-base);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.creative-agent-home__topbar-button:hover {
  transform: translateY(-1px);
  background: var(--platform-nav-item-hover-fill);
  color: var(--platform-text-strong);
}

.creative-agent-home__brand {
  justify-self: center;
  align-items: center;
}

.creative-agent-home__brand .platform-brand-logo__title {
  font-size: clamp(1.7rem, 6vw, 2.15rem);
}

.creative-agent-home__brand .platform-brand-logo__subtitle {
  display: none;
}

.creative-agent-home__main {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.6rem, 6vh, 3.2rem);
  overflow-y: auto;
  padding: 0 clamp(1rem, 4vw, 2rem)
    calc(var(--platform-bottom-dock-outer-height, 5.8rem) + 6.2rem);
}

.creative-agent-home__hero {
  max-width: 36rem;
}

.creative-agent-home__hero h1 {
  margin: 0;
  color: var(--platform-text-strong);
  font-size: clamp(2.55rem, 10vw, 4.6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0;
}

.creative-agent-home__hero p {
  margin: 0.82rem 0 0;
  color: var(--platform-text-soft);
  font-size: clamp(1.15rem, 4.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

.creative-agent-home__prompt-grid {
  display: flex;
  max-width: 38rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.creative-agent-home__prompt,
.creative-agent-home__reward {
  display: inline-flex;
  min-width: 0;
  min-height: 3.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 999px;
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-base);
  padding: 0 1.12rem;
  font-size: clamp(0.96rem, 3.7vw, 1.14rem);
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.creative-agent-home__prompt:hover,
.creative-agent-home__reward:hover {
  transform: translateY(-1px);
  border-color: var(--platform-surface-hover-border);
  color: var(--platform-text-strong);
  box-shadow: var(--platform-desktop-hover-shadow);
}

.creative-agent-home__prompt:disabled,
.creative-agent-home__reward:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.creative-agent-home__prompt--cool svg {
  color: var(--platform-cool-text);
}

.creative-agent-home__prompt--green svg {
  color: var(--platform-success-text);
}

.creative-agent-home__prompt--warm svg {
  color: var(--platform-warm-text);
}

.creative-agent-home__prompt--purple svg {
  color: var(--platform-nav-item-icon-active-text);
}

.creative-agent-home__prompt--rose svg {
  color: var(--platform-cool-text);
}

.creative-agent-home__prompt-badge {
  margin-left: -0.25rem;
  border-radius: 999px;
  background: var(--platform-neutral-bg);
  color: var(--platform-neutral-text);
  padding: 0.14rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.creative-agent-home__reward {
  border-color: var(--platform-button-primary-border);
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: var(--platform-profile-action-shadow);
}

.creative-agent-home__error {
  max-width: 38rem;
  border: 1px solid var(--platform-button-danger-border);
  border-radius: 1rem;
  background: var(--platform-button-danger-fill);
  color: var(--platform-button-danger-text);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.6;
}

.creative-agent-home__composer {
  position: absolute;
  right: clamp(1rem, 4vw, 2rem);
  bottom: calc(var(--platform-bottom-dock-outer-height, 5.8rem) + 0.9rem);
  left: clamp(1rem, 4vw, 2rem);
  z-index: 4;
}

.creative-agent-composer {
  width: 100%;
}

.creative-agent-composer--floating {
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 999px;
  background: var(--platform-subpanel-fill);
  padding: 0.55rem;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.creative-agent-composer--floating textarea {
  min-height: 2.75rem;
  max-height: 8rem;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  padding: 0.72rem 0.28rem !important;
  font-size: clamp(1rem, 3.8vw, 1.12rem) !important;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: none !important;
}

.creative-agent-composer--floating .platform-icon-button {
  border: 0;
  background: transparent;
  color: var(--platform-text-base);
}

.creative-agent-composer--floating .platform-icon-button:not(:disabled):hover {
  background: var(--platform-nav-active-fill);
  color: var(--platform-text-strong);
}

.creative-agent-composer--floating button.platform-icon-button {
  background: var(--platform-button-primary-fill);
  color: var(--platform-button-primary-text);
  box-shadow: var(--platform-profile-action-shadow);
}

.creative-agent-composer--floating button.platform-icon-button:disabled {
  background: transparent;
  box-shadow: none;
  color: var(--platform-text-soft);
  opacity: 0.62;
}

.creative-agent-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition:
    opacity 220ms ease,
    background-color 220ms ease;
}

.creative-agent-drawer-backdrop--open {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.creative-agent-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 31;
  width: min(82vw, 22rem);
  max-width: 100%;
  transform: translateX(-104%);
  border-right: 1px solid var(--platform-subpanel-border);
  background: var(--platform-panel-fill);
  color: var(--platform-text-strong);
  box-shadow: 24px 0 80px rgba(0, 0, 0, 0.28);
  transition: transform 240ms ease;
}

.creative-agent-drawer--open {
  transform: translateX(0);
}

.creative-agent-drawer .platform-brand-logo__title {
  font-size: clamp(1.55rem, 5vw, 2rem);
}

.creative-agent-drawer .platform-brand-logo__subtitle {
  display: none;
}

.creative-agent-drawer__new-chat,
.creative-agent-drawer__nav-row {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 3.35rem;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1.15rem;
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-base);
  padding: 0 1rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 900;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.creative-agent-drawer__new-chat {
  justify-content: center;
  color: var(--platform-text-strong);
}

.creative-agent-drawer__new-chat:hover,
.creative-agent-drawer__nav-row:hover,
.creative-agent-drawer__history-item:hover {
  transform: translateY(-1px);
  border-color: var(--platform-surface-hover-border);
  color: var(--platform-text-strong);
}

.creative-agent-drawer__group-label {
  color: var(--platform-text-soft);
  font-size: 0.92rem;
  font-weight: 900;
}

.creative-agent-drawer__history-item {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0.9rem;
  background: transparent;
  color: var(--platform-text-strong);
  padding: 0.25rem 0;
  text-align: left;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.5;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.creative-agent-drawer__empty {
  border: 1px solid var(--platform-subpanel-border);
  border-radius: 1rem;
  background: var(--platform-subpanel-fill);
  color: var(--platform-text-soft);
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
}

.creative-agent-drawer__avatar {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--platform-button-primary-border);
  border-radius: 999px;
  background: var(--platform-profile-avatar-fill);
  color: var(--platform-button-primary-text);
  box-shadow: var(--platform-profile-avatar-shadow);
}

@media (min-width: 768px) {
  .creative-agent-home {
    border-radius: 1.8rem;
  }

  .creative-agent-home__main {
    align-items: center;
    text-align: left;
    padding-bottom: 9.5rem;
  }

  .creative-agent-home__hero,
  .creative-agent-home__prompt-grid,
  .creative-agent-home__error {
    width: min(100%, 42rem);
  }

  .creative-agent-home__composer {
    right: max(2rem, calc((100% - 42rem) / 2));
    bottom: 2rem;
    left: max(2rem, calc((100% - 42rem) / 2));
  }
}

@media (max-width: 767px) {
  .platform-mobile-entry-shell:has(
      .platform-tab-panel--active .creative-agent-home
    )
    > .platform-mobile-topbar {
    display: none;
  }

  .platform-tab-panel--active:has(.creative-agent-home) {
    overflow: hidden;
  }

  .creative-agent-home {
    border: 0;
    border-radius: 0;
  }

  .creative-agent-home__prompt-grid {
    align-items: flex-start;
  }

  .creative-agent-home__prompt {
    max-width: 100%;
  }

  .creative-agent-home__reward {
    min-width: min(100%, 16.5rem);
  }
}

/* 玩法参考图卡片始终压在暗色图像蒙版上，需绕过浅色主题的深色文字重映射。 */
.platform-theme .platform-creation-reference-card,
.platform-theme .platform-creation-reference-card *,
.platform-theme--light
  .platform-remap-surface
  .platform-creation-reference-card,
.platform-theme--light
  .platform-remap-surface
  .platform-creation-reference-card
  * {
  color: #fff !important;
}

.platform-theme .platform-creation-reference-card .platform-pill--neutral,
.platform-theme--light
  .platform-remap-surface
  .platform-creation-reference-card
  .platform-pill--neutral {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.child-motion-demo {
  --child-motion-bg: #dff1d6;
  --child-motion-sky: #cfefff;
  --child-motion-cloud: rgba(255, 255, 255, 0.82);
  --child-motion-ground: #78b76a;
  --child-motion-ground-deep: #3b7f46;
  --child-motion-ground-shadow: rgba(56, 110, 60, 0.3);
  --child-motion-panel: rgba(255, 250, 241, 0.76);
  --child-motion-panel-border: rgba(98, 132, 88, 0.18);
  --child-motion-text: #27412a;
  --child-motion-soft: rgba(39, 65, 42, 0.74);
  --child-motion-green: #70c16b;
  --child-motion-sky-accent: #95d2ff;
  --child-motion-asset-stage: url('/child-motion-demo/picture-book-grass-stage.png');
  --child-motion-asset-floor: url('/child-motion-demo/picture-book-foreground-grass-v2.png');
  --child-motion-asset-ring: url('/child-motion-demo/picture-book-ground-ring-v3.png');
  --child-motion-asset-avatar: url('/child-motion-demo/picture-book-character-outline-v4.png');
  --child-motion-asset-hud: url('/child-motion-demo/picture-book-hud-strip-v2.png');
  --child-motion-asset-calibration: url('/child-motion-demo/picture-book-calibration-strip-v2.png');
  --child-motion-asset-start-panel: url('/child-motion-demo/picture-book-start-panel-v2.png');
  --child-motion-asset-button: url('/child-motion-demo/picture-book-ui-button-v2.png');
  --child-motion-asset-wave-cat-body: url('/child-motion-demo/picture-book-wave-cat-body-guide-v7.png');
  --child-motion-asset-wave-cat-arm: url('/child-motion-demo/picture-book-wave-cat-arm-guide-v7.png');
  --child-motion-asset-wave-cat-paw-left: url('/child-motion-demo/picture-book-wave-cat-paw-left-v1.png');
  --child-motion-asset-wave-cat-paw-right: url('/child-motion-demo/picture-book-wave-cat-paw-right-v1.png');
  --baby-object-left-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-left-hand-v8-transparent.png');
  --baby-object-right-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-right-hand-v8-transparent.png');
  display: grid;
  width: 100%;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.92),
      transparent 18%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 255, 255, 0.56),
      transparent 17%
    ),
    linear-gradient(
      180deg,
      #f8fcff 0%,
      #eaf7ff 26%,
      var(--child-motion-sky) 52%,
      #dcefd0 70%,
      #cde3bd 100%
    );
  color: var(--child-motion-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

@supports (height: 100dvh) {
  .child-motion-demo {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.child-motion-demo::before,
.child-motion-demo::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
}

.child-motion-demo::before {
  background: radial-gradient(
      circle at 12% 16%,
      var(--child-motion-cloud) 0 3.4%,
      transparent 3.6%
    ),
    radial-gradient(
      circle at 16% 15%,
      rgba(255, 255, 255, 0.86) 0 2.2%,
      transparent 2.5%
    ),
    radial-gradient(
      circle at 17.8% 16.2%,
      rgba(255, 255, 255, 0.9) 0 2.7%,
      transparent 3%
    ),
    radial-gradient(
      circle at 76% 13%,
      var(--child-motion-cloud) 0 4.1%,
      transparent 4.3%
    ),
    radial-gradient(
      circle at 82% 12.6%,
      rgba(255, 255, 255, 0.88) 0 2.5%,
      transparent 2.8%
    ),
    radial-gradient(
      circle at 85% 14.2%,
      rgba(255, 255, 255, 0.82) 0 2.1%,
      transparent 2.4%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0 62%,
      rgba(255, 255, 255, 0.08) 100%
    );
  opacity: 0.9;
}

.child-motion-demo::after {
  background: radial-gradient(
      ellipse at 50% 100%,
      rgba(61, 120, 76, 0.26) 0 32%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      transparent 0 58%,
      rgba(255, 255, 255, 0.12) 76%,
      transparent 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.68;
}

.child-motion-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.6),
      transparent 24%
    ),
    linear-gradient(180deg, #f3fbff 0%, #e4f3ff 32%, #d9efc4 56%, #bbdea1 100%);
  box-shadow: 0 30px 100px rgba(62, 98, 53, 0.18);
  isolation: isolate;
  touch-action: none;
  user-select: none;
}

@supports (height: 100dvh) {
  .child-motion-stage {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
  }
}

.child-motion-stage::before,
.child-motion-stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
}

.child-motion-stage::before {
  z-index: 0;
  background-image: var(--child-motion-asset-stage);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  filter: saturate(1.01) contrast(0.99);
}

.child-motion-stage::after {
  display: none;
}

.child-motion-camera-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  filter: blur(8px) saturate(0.92);
  opacity: 0.22;
  transform: scale(1.04);
  mix-blend-mode: soft-light;
}

.child-motion-camera-state {
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: 7;
  transform: translateX(-50%);
  border: 1px solid rgba(103, 140, 94, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.7);
  color: rgba(39, 65, 42, 0.88);
  padding: 0.45rem 0.9rem;
  font-size: clamp(0.68rem, 1.35vw, 0.84rem);
  font-weight: 800;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(90, 120, 82, 0.14);
}

.child-motion-camera-state--ready {
  display: none;
}

.child-motion-floor {
  position: absolute;
  right: 0;
  bottom: -11%;
  left: 0;
  z-index: 2;
  height: 30%;
  border-radius: 0;
  background: var(--child-motion-asset-floor) center bottom / 100% auto
    no-repeat;
  box-shadow: none;
}

.child-motion-floor::before,
.child-motion-floor::after {
  display: none;
}

.child-motion-hud {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.8vw, 1rem);
  border: 0;
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  box-shadow: none;
  backdrop-filter: none;
}

.child-motion-hud--top {
  top: 3.2%;
  left: 50%;
  justify-content: space-between;
  width: min(56%, 46rem);
  height: clamp(4.1rem, 12.5%, 6.75rem);
  transform: translateX(-50%);
  background: var(--child-motion-asset-hud) center center / cover no-repeat;
  padding: clamp(0.45rem, 1.2vw, 0.75rem) clamp(0.72rem, 2vw, 1.25rem);
}

.child-motion-hud__copy {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 clamp(0.35rem, 1vw, 0.75rem);
  text-align: center;
}

.child-motion-hud__copy--subtitle-only {
  display: flex;
  min-height: clamp(2.4rem, 6vw, 3.5rem);
  align-items: center;
  justify-content: center;
}

.child-motion-hud h1 {
  margin: 0;
  color: var(--child-motion-text);
  overflow: hidden;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-motion-hud p {
  margin: 0.28rem 0 0;
  color: var(--child-motion-soft);
  overflow: hidden;
  font-size: clamp(0.64rem, 1.25vw, 0.86rem);
  font-weight: 700;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-motion-hud__copy--subtitle-only p {
  margin-top: 0;
  font-size: clamp(0.86rem, 1.85vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
}

.child-motion-step-count,
.child-motion-progress {
  display: inline-flex;
  min-width: clamp(2.4rem, 6vw, 3.5rem);
  min-height: clamp(2.4rem, 6vw, 3.5rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--child-motion-text);
  font-size: clamp(0.72rem, 1.45vw, 0.95rem);
  font-weight: 900;
  box-shadow: none;
}

.child-motion-ring {
  position: absolute;
  bottom: 18.8%;
  z-index: 3;
  width: clamp(7.8rem, 17vw, 11.6rem);
  aspect-ratio: 1200 / 520;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--child-motion-asset-ring) center / contain no-repeat;
  box-shadow: 0 0 20px rgba(120, 191, 110, 0.22);
  animation: child-motion-cue-appear 0.34s ease-out both;
}

.child-motion-ring::before {
  display: none;
}

.child-motion-ring__core {
  display: none;
}

.child-motion-ring--active {
  animation:
    child-motion-cue-appear 0.34s ease-out both,
    child-motion-ring-pulse 0.78s ease-in-out 0.34s infinite alternate;
}

.child-motion-stage--complete .child-motion-ring--active {
  animation: child-motion-ring-complete 0.82s ease-out both;
}

@keyframes child-motion-cue-appear {
  from {
    transform: translateX(-50%) scale(0.92);
    opacity: 0;
    filter: blur(2px);
  }

  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes child-motion-ring-pulse {
  from {
    filter: brightness(1);
  }

  to {
    filter: brightness(1.08);
  }
}

@keyframes child-motion-ring-complete {
  0% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }

  46% {
    transform: translateX(-50%) scale(1.045);
    filter: brightness(1.12);
  }

  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1.04);
  }
}

.child-motion-avatar {
  position: absolute;
  bottom: 21.5%;
  z-index: 5;
  width: clamp(6.3rem, 12.6vw, 10.2rem);
  aspect-ratio: 2 / 3;
  transform: translate3d(-50%, 0, 0);
  isolation: isolate;
  transition: left 180ms ease-out;
  filter: drop-shadow(0 6px 14px rgba(56, 92, 55, 0.16));
  contain: layout;
  backface-visibility: hidden;
  will-change: left;
}

.child-motion-avatar__sprite {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  transform: translate3d(0, 0, 0);
  transform-origin: center bottom;
  background: var(--child-motion-asset-avatar) center bottom / contain no-repeat;
  opacity: 0.88;
  transition: transform 180ms ease-out;
  backface-visibility: hidden;
  will-change: transform;
}

.child-motion-avatar--jumping .child-motion-avatar__sprite {
  transform: translate3d(0, -14%, 0);
}

.child-motion-avatar__head,
.child-motion-avatar__body,
.child-motion-avatar__arm,
.child-motion-avatar__leg {
  display: none;
}

.child-motion-gesture-guide {
  position: absolute;
  inset: 20% 22% 19%;
  z-index: 4;
  pointer-events: none;
  animation: child-motion-guide-appear 0.3s ease-out both;
}

.child-motion-gesture-guide--greeting {
  inset: 0;
}

@keyframes child-motion-guide-appear {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-motion-gesture-guide__wave-cat {
  position: absolute;
  left: 50%;
  top: clamp(9.8rem, 31vh, 20rem);
  width: clamp(12.5rem, 25vw, 20.5rem);
  aspect-ratio: 1.16;
  transform: translate(-50%, -50%);
  transform-origin: center 72%;
  opacity: 0.86;
  filter: drop-shadow(0 0.65rem 1.2rem rgba(69, 121, 73, 0.16));
  animation: child-motion-wave-cat-bob 1.38s ease-in-out infinite alternate;
}

.child-motion-gesture-guide__wave-cat-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 72%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: var(--child-motion-asset-wave-cat-body) center bottom / contain
    no-repeat;
}

.child-motion-gesture-guide__wave-cat-arm {
  position: absolute;
  bottom: 9.5%;
  z-index: 5;
  width: 34%;
  aspect-ratio: 1;
  background: none;
  transform-origin: var(--child-motion-wave-cat-arm-origin-x) 78%;
  animation: child-motion-wave-cat-arm 0.47s ease-in-out infinite alternate;
}

.child-motion-gesture-guide__wave-cat-arm::before {
  position: absolute;
  inset: 0;
  background: var(--child-motion-asset-wave-cat-arm) center bottom / contain
    no-repeat;
  content: '';
}

.child-motion-gesture-guide__wave-cat-arm--left {
  left: 12%;
  --child-motion-wave-cat-arm-origin-x: 60%;
  --child-motion-wave-hand-direction: -1;
}

.child-motion-gesture-guide__wave-cat-arm--right {
  right: 12%;
  --child-motion-wave-cat-arm-origin-x: 40%;
  --child-motion-wave-hand-direction: 1;
  animation-delay: 0s;
}

.child-motion-gesture-guide__wave-cat-arm--right::before {
  transform: scaleX(-1);
}

.child-motion-gesture-guide__arm-swing {
  --child-motion-arm-swing-origin-x: 18%;
  --child-motion-arm-swing-radius: clamp(5.2rem, 9.6vw, 7.4rem);
  --child-motion-arm-swing-angle-from: -43deg;
  --child-motion-arm-swing-angle-to: 43deg;
  --child-motion-arm-swing-paw-offset-x: calc(
    var(--child-motion-arm-swing-radius) * 1
  );
  --child-motion-arm-swing-paw-size: clamp(4.6rem, 9vw, 7.4rem);
  position: absolute;
  top: 14%;
  display: block;
  width: clamp(6.8rem, 15vw, 11rem);
  aspect-ratio: 0.62;
  overflow: visible;
  opacity: 0.86;
}

.child-motion-gesture-guide__arm-swing--left {
  left: 16%;
  --child-motion-arm-swing-origin-x: 82%;
  --child-motion-arm-swing-paw-offset-x: calc(
    var(--child-motion-arm-swing-radius) * -1
  );
  --child-motion-arm-swing-angle-from: -90deg;
  --child-motion-arm-swing-angle-to: 90deg;
}

.child-motion-gesture-guide__arm-swing--right {
  right: 16%;
  --child-motion-arm-swing-origin-x: 18%;
  --child-motion-arm-swing-angle-from: 90deg;
  --child-motion-arm-swing-angle-to: -90deg;
}

.child-motion-gesture-guide__arm-swing-track {
  position: absolute;
  top: 50%;
  left: var(--child-motion-arm-swing-origin-x);
  width: calc(var(--child-motion-arm-swing-radius) * 2);
  height: calc(var(--child-motion-arm-swing-radius) * 2);
  transform: translate(-50%, -50%);
  border: clamp(0.18rem, 0.45vw, 0.34rem) solid rgba(255, 249, 222, 0.92);
  border-inline-start-color: rgba(255, 221, 124, 0.78);
  border-inline-end-color: transparent;
  border-radius: 999px;
  box-shadow:
    0 0 0 0.14rem rgba(83, 136, 83, 0.12),
    0 0.55rem 1.2rem rgba(69, 121, 73, 0.12);
  transform-origin: center;
}

.child-motion-gesture-guide__arm-swing--right
  .child-motion-gesture-guide__arm-swing-track {
  border-inline-start-color: transparent;
  border-inline-end-color: rgba(255, 221, 124, 0.78);
}

.child-motion-gesture-guide__arm-swing-track::before,
.child-motion-gesture-guide__arm-swing-track::after {
  position: absolute;
  left: 50%;
  width: clamp(0.7rem, 1.6vw, 1rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 250, 226, 0.94);
  box-shadow: 0 0 0 0.16rem rgba(255, 206, 104, 0.42);
  content: '';
}

.child-motion-gesture-guide__arm-swing-track::before {
  top: 0;
}

.child-motion-gesture-guide__arm-swing-track::after {
  top: 100%;
}

.child-motion-gesture-guide__arm-swing-paw {
  position: absolute;
  top: 50%;
  left: var(--child-motion-arm-swing-origin-x);
  width: 0;
  height: 0;
  filter: drop-shadow(0 0.5rem 1rem rgba(69, 121, 73, 0.13));
  transform-origin: center;
  animation: child-motion-arm-swing-guide 0.88s ease-in-out infinite alternate;
  will-change: transform;
}

.child-motion-gesture-guide__arm-swing-paw-asset {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--child-motion-arm-swing-paw-size);
  aspect-ratio: 1;
  background: var(--child-motion-asset-wave-cat-arm) center bottom / contain
    no-repeat;
  transform: translate(-50%, -50%)
    translateX(var(--child-motion-arm-swing-paw-offset-x));
  transform-origin: center;
}

.child-motion-gesture-guide__arm-swing--left
  .child-motion-gesture-guide__arm-swing-paw-asset {
  background-image: var(--child-motion-asset-wave-cat-paw-left);
}

.child-motion-gesture-guide__arm-swing--right
  .child-motion-gesture-guide__arm-swing-paw-asset {
  background-image: var(--child-motion-asset-wave-cat-paw-right);
}

@keyframes child-motion-arm-swing-guide {
  from {
    transform: rotate(var(--child-motion-arm-swing-angle-from));
  }

  to {
    transform: rotate(var(--child-motion-arm-swing-angle-to));
  }
}

@keyframes child-motion-wave-cat-bob {
  from {
    transform: translate(-50%, -50%) translateY(1.2%) scale(0.992);
  }

  to {
    transform: translate(-50%, -50%) translateY(-1.2%) scale(1.008);
  }
}

@keyframes child-motion-wave-cat-arm {
  from {
    transform: rotate(
      calc(var(--child-motion-wave-hand-direction, 1) * -15deg)
    );
  }

  to {
    transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * 22deg));
  }
}

.child-motion-gesture-guide__trail {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f6fff1;
  box-shadow: 0 0 16px rgba(119, 194, 111, 0.56);
}

.child-motion-hand-indicators {
  z-index: 6;
}

.child-motion-hand-indicator {
  width: clamp(3.7rem, 7.8vw, 6.4rem);
}

.child-motion-floating-reward {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 9;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  text-shadow: 0 4px 26px rgba(61, 90, 54, 0.42);
  animation: child-motion-reward-rise 0.72s ease-out forwards;
}

@keyframes child-motion-reward-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 22%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -18%);
  }
}

.child-motion-calibration {
  position: absolute;
  right: 3.2%;
  bottom: 8.8%;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(0.12rem, 0.55vw, 0.45rem);
  width: min(34%, 30rem);
  max-width: 82%;
  height: clamp(3.1rem, 7.6%, 4.55rem);
  border: 0;
  border-radius: 999px;
  background: var(--child-motion-asset-calibration) center center / cover
    no-repeat;
  padding: clamp(0.4rem, 1.1vw, 0.56rem) clamp(0.66rem, 1.5vw, 0.9rem);
  backdrop-filter: none;
  box-shadow: none;
}

.child-motion-calibration div {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  align-content: center;
  justify-items: center;
  border-radius: 999px;
  background: transparent;
  padding: 0.32rem 0.18rem;
  transform: translateY(6%);
}

.child-motion-calibration span {
  color: var(--child-motion-soft);
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(0.52rem, 1vw, 0.66rem);
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-motion-calibration strong {
  color: var(--child-motion-text);
  font-size: clamp(0.7rem, 1.25vw, 0.88rem);
  font-weight: 900;
  line-height: 1;
}

.child-motion-start-panel {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 10;
  display: flex;
  width: min(28%, 19rem);
  height: clamp(3.8rem, 9%, 5.2rem);
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  border: 0;
  border-radius: 1.4rem;
  background: var(--child-motion-asset-start-panel) center center / cover
    no-repeat;
  padding: clamp(0.45rem, 1.2vw, 0.7rem);
  box-shadow: none;
  backdrop-filter: none;
}

.child-motion-start-panel button {
  width: min(82%, 12rem);
  min-width: clamp(7.5rem, 14vw, 10.5rem);
  min-height: clamp(2.5rem, 5.8vw, 3.4rem);
  border: 0;
  border-radius: 999px;
  background: var(--child-motion-asset-button) center center / cover no-repeat;
  color: #214228;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(124, 182, 98, 0.24);
}

.child-motion-start-panel span {
  color: var(--child-motion-text);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
}

.child-motion-orientation-tip {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  background: radial-gradient(
      circle at 24% 22%,
      rgba(255, 255, 255, 0.88),
      transparent 20%
    ),
    linear-gradient(180deg, #f7fcff 0%, #dff3ff 54%, #c9e6b9 100%);
  color: var(--child-motion-text);
  font-size: 1.25rem;
  font-weight: 900;
}

@media (orientation: portrait) and (max-width: 920px) {
  .child-motion-orientation-tip {
    display: grid;
  }
}

@media (max-width: 760px) {
  .child-motion-hud--top {
    width: 88%;
  }

  .child-motion-calibration {
    left: 50%;
    right: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(92%, 35rem);
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .platform-work-detail {
    border-radius: 1.2rem;
  }

  .platform-work-detail__summary,
  .platform-work-detail__body,
  .platform-work-detail__bottom {
    padding-left: max(2rem, calc((100% - 58rem) / 2));
    padding-right: max(2rem, calc((100% - 58rem) / 2));
  }

  .platform-work-detail__topbar {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}