@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';
@import '@/packages/shared/src/theme.css';
@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,
.platform-viewport-shell,
.platform-tab-panel,
.platform-page-stage,
.unified-creation-page,
.platform-work-detail__scroll {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
.platform-viewport-shell::-webkit-scrollbar,
.platform-tab-panel::-webkit-scrollbar,
.platform-page-stage::-webkit-scrollbar,
.unified-creation-page::-webkit-scrollbar,
.platform-work-detail__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html,
body,
#root {
  height: 100%;
}

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

html[data-mobile-keyboard-open='true'],
html[data-mobile-keyboard-open='true'] body,
html[data-mobile-keyboard-open='true'] #root {
  background: var(
    --platform-keyboard-exposed-fill,
    linear-gradient(180deg, #fffdf9 0%, #fdf9f5 54%, #f8efe7 100%)
  );
}

.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);
}

@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-clear-card-opening-flip {
  0% {
    opacity: 0;
    transform: perspective(760px) rotateY(180deg) translateY(-8%);
  }

  56% {
    opacity: 1;
    transform: perspective(760px) rotateY(-10deg) translateY(0);
  }

  100% {
    opacity: 1;
    transform: perspective(760px) rotateY(0deg) translateY(0);
  }
}

@keyframes puzzle-clear-ready-drop {
  0% {
    opacity: 0;
    transform: translateY(-42%) scale(0.94);
  }

  72% {
    opacity: 1;
    transform: translateY(4%) scale(1);
  }

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

@keyframes platform-recommend-runtime-loading {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(240%);
  }
}

@keyframes puzzle-clear-card-clear-pop {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1);
  }

  48% {
    opacity: 1;
    transform: scale(1.05);
    filter: saturate(1.24) brightness(1.05);
  }

  100% {
    opacity: 0.72;
    transform: scale(0.92);
    filter: saturate(0.82);
  }
}

@keyframes puzzle-clear-transition-clear-pop {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1.04) brightness(1.02);
  }

  28% {
    opacity: 1;
    transform: scale(1.12);
    filter: saturate(1.2) brightness(1.08);
  }

  52% {
    opacity: 1;
    transform: scale(1.08);
    filter: saturate(1.12) brightness(1.04);
  }

  82% {
    opacity: 0.42;
    transform: scale(1.01);
    filter: saturate(0.96) brightness(1) blur(0.2px);
  }

  100% {
    opacity: 0;
    transform: scale(0.94);
    filter: saturate(0.88) brightness(0.98) blur(0.8px);
  }
}

@keyframes puzzle-clear-transition-drop {
  0% {
    opacity: 0;
    transform: translateY(var(--puzzle-clear-drop-start-y, -120%)) scale(0.96);
    filter: saturate(1.08) brightness(1.03);
  }

  55% {
    opacity: 1;
    transform: translateY(10%) scale(1.02);
    filter: saturate(1.03) brightness(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1) brightness(1);
  }
}

.puzzle-clear-card {
  touch-action: none;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.puzzle-clear-card img,
.puzzle-clear-ready-card {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.puzzle-clear-card--opening {
  animation: puzzle-clear-card-opening-flip 520ms
    calc(var(--puzzle-clear-card-index, 0) * 24ms)
    cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.puzzle-clear-card--locked-group-cell {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.puzzle-clear-card--locked-group-cell > span:first-child {
  opacity: 0.18;
}

.puzzle-clear-card--cleared {
  animation: puzzle-clear-card-clear-pop 460ms ease-out both;
}

.puzzle-clear-card--transition-hidden {
  opacity: 0;
}

.puzzle-clear-card--ghost-origin {
  opacity: 0.42;
  filter: saturate(0.82);
}

.puzzle-clear-card--drag-group-empty {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.puzzle-clear-card--drag-group-empty > span:first-child {
  opacity: 0;
}

.puzzle-clear-card--drag-origin-empty {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}

.puzzle-clear-card--drag-origin-empty > span:first-child {
  opacity: 0;
}

.puzzle-clear-card--swap-feedback {
  animation: puzzle-clear-card-swap-feedback 240ms ease-out both;
}

.puzzle-clear-ready-card {
  animation: puzzle-clear-ready-drop 430ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.puzzle-clear-drag-ghost {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0.6rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  background: white;
}

.puzzle-clear-swap-flight {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 0.6rem;
  background: white;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.puzzle-clear-swap-flight--incoming {
  animation: puzzle-clear-swap-flight-incoming 220ms
    cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

.puzzle-clear-locked-group-visual {
  animation: puzzle-clear-locked-group-settle 180ms ease-out both;
}

.puzzle-clear-locked-group-visual--highlight {
  position: relative;
  animation: puzzle-clear-locked-group-highlight 760ms ease-out both;
  transform-origin: center;
}

.puzzle-clear-locked-group-visual--highlight::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.72) 48%,
    rgba(255, 255, 255, 0.18) 54%,
    transparent 76%
  );
  mix-blend-mode: screen;
  animation: puzzle-clear-locked-group-sheen 680ms ease-out both;
}

.puzzle-clear-locked-group-visual--merge {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 14px 26px rgba(15, 23, 42, 0.12);
}

.puzzle-clear-locked-group-visual img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.puzzle-clear-drag-ghost--dragging {
  cursor: grabbing;
}

.puzzle-clear-drag-ghost--dropping {
  animation: puzzle-clear-drag-ghost-drop 180ms cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.puzzle-clear-drag-ghost--returning {
  animation: puzzle-clear-drag-ghost-return 140ms ease-out both;
}

.puzzle-clear-drag-group {
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 16px 32px rgba(15, 23, 42, 0.12);
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.puzzle-clear-transition-piece {
  pointer-events: none;
  overflow: hidden;
}

.puzzle-clear-transition-piece--clear {
  animation: puzzle-clear-transition-clear-pop 720ms
    cubic-bezier(0.2, 0.78, 0.2, 1) both;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.puzzle-clear-transition-piece--drop {
  animation: puzzle-clear-transition-drop 460ms
    cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--puzzle-clear-drop-delay, 0ms);
  will-change: transform, opacity, filter;
}

@keyframes puzzle-clear-card-swap-feedback {
  0% {
    transform: scale(0.98);
    opacity: 0.92;
  }

  50% {
    transform: scale(1.02);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes puzzle-clear-swap-flight-incoming {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
    opacity: 0.98;
    filter: saturate(1.03);
  }

  60% {
    transform: translate3d(
        calc(var(--puzzle-clear-flight-delta-x, 0) * 0.82),
        calc(var(--puzzle-clear-flight-delta-y, 0) * 0.82),
        0
      )
      scale(1.005);
    opacity: 0.98;
    filter: saturate(1.01);
  }

  100% {
    transform: translate3d(
        var(--puzzle-clear-flight-delta-x, 0),
        var(--puzzle-clear-flight-delta-y, 0),
        0
      )
      scale(1);
    opacity: 0.92;
    filter: saturate(1);
  }
}

@keyframes puzzle-clear-locked-group-settle {
  0% {
    transform: scale(0.992);
    opacity: 0.88;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes puzzle-clear-locked-group-highlight {
  0% {
    transform: scale(0.992);
    filter: saturate(1) brightness(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.42),
      0 10px 24px rgba(15, 23, 42, 0.08);
  }

  22% {
    transform: scale(1.035);
    filter: saturate(1.18) brightness(1.06);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.82),
      0 0 0 3px rgba(52, 211, 153, 0.28),
      0 18px 34px rgba(15, 23, 42, 0.16);
  }

  58% {
    transform: scale(1.012);
    filter: saturate(1.08) brightness(1.02);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.68),
      0 0 0 2px rgba(251, 191, 36, 0.18),
      0 14px 28px rgba(15, 23, 42, 0.12);
  }

  100% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      0 10px 24px rgba(15, 23, 42, 0.08);
  }
}

@keyframes puzzle-clear-locked-group-sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-14deg);
  }

  26% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-14deg);
  }
}

@keyframes puzzle-clear-drag-ghost-drop {
  0% {
    opacity: 0.98;
    filter: saturate(1.02);
  }

  100% {
    opacity: 0.8;
    filter: saturate(0.94);
  }
}

@keyframes puzzle-clear-drag-ghost-return {
  0% {
    opacity: 0.9;
    filter: saturate(1.02);
  }

  100% {
    opacity: 0;
    filter: saturate(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-clear-card--opening,
  .puzzle-clear-card--cleared,
  .puzzle-clear-ready-card,
  .puzzle-clear-card--swap-feedback,
  .puzzle-clear-swap-flight--incoming,
  .puzzle-clear-locked-group-visual,
  .puzzle-clear-locked-group-visual--highlight,
  .puzzle-clear-locked-group-visual--highlight::after,
  .puzzle-clear-drag-ghost--dropping,
  .puzzle-clear-drag-ghost--returning,
  .puzzle-clear-transition-piece--clear,
  .puzzle-clear-transition-piece--drop {
    animation: none;
  }
}

@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__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.82rem;
}

.selection-hero-brand__image {
  width: clamp(3rem, 10vw, 4.4rem);
  height: clamp(3rem, 10vw, 4.4rem);
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0.55rem 0.58rem rgba(0, 0, 0, 0.28));
}

.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', 'Noto Sans CJK SC', 'WenQuanYi Zen Hei', 'PingFang SC',
    'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif !important;
}

.platform-theme,
.platform-theme * {
  font-family: var(--platform-font-family) !important;
}

.platform-brand-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.platform-brand-logo__image {
  width: clamp(2.1rem, 6vw, 2.95rem);
  height: clamp(2.1rem, 6vw, 2.95rem);
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0.24rem 0.28rem rgba(112, 62, 32, 0.18));
}

.platform-brand-logo__copy {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.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);
}

.floating-feedback-entry-shell {
  position: fixed;
  z-index: 2147483647;
  width: 57.6px;
  height: 57.6px;
}

.floating-feedback-entry-contact-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  display: flex;
  box-sizing: border-box;
  width: 348px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid rgba(214, 154, 111, 0.24);
  border-radius: 12px;
  background: rgba(255, 252, 248, 0.97);
  box-shadow: 0 18px 36px rgba(74, 34, 15, 0.18);
  pointer-events: none;
  transform: translateX(
    calc(-50% + var(--floating-feedback-contact-offset, 0px))
  );
}

.floating-feedback-entry-contact-panel img {
  display: block;
  width: 156px;
  height: 156px;
  border-radius: 8px;
  object-fit: contain;
  user-select: none;
}

.floating-feedback-entry {
  position: relative;
  display: inline-flex;
  width: 57.6px;
  height: 57.6px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 0.7rem 1.05rem rgba(98, 48, 24, 0.24));
}

.floating-feedback-entry:active {
  cursor: grabbing;
}

.floating-feedback-entry:focus-visible {
  outline: 3px solid rgba(204, 117, 76, 0.72);
  outline-offset: 4px;
}

.floating-feedback-entry img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.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__quick-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.12rem;
}

.creation-work-card__quick-action-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid
    color-mix(in srgb, var(--platform-cool-border) 58%, transparent);
  border-radius: 9999px;
  background: color-mix(
    in srgb,
    var(--platform-neutral-bg) 84%,
    var(--platform-cool-bg) 16%
  );
  box-shadow: 0 8px 18px rgba(91, 64, 42, 0.13);
  color: var(--platform-cool-text);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.creation-work-card__quick-action-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(
    in srgb,
    var(--platform-cool-border) 78%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--platform-neutral-bg) 72%,
    var(--platform-cool-bg) 28%
  );
  box-shadow: 0 10px 22px rgba(91, 64, 42, 0.18);
  color: var(--platform-cool-text);
}

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

.creation-work-card__quick-action-button--danger {
  color: color-mix(in srgb, #c7653d 78%, var(--platform-text-soft));
}

.creation-work-card__quick-action-button--danger:hover {
  background: color-mix(in srgb, #c7653d 18%, transparent);
  color: #a9472c;
}

.creation-work-card__quick-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.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__failure-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.26rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #c7653d 48%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, #c7653d 12%, transparent);
  padding: 0.22rem 0.52rem;
  color: color-mix(in srgb, #c7653d 86%, var(--platform-text-strong));
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
}

.creation-work-card__failure-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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.platform-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.platform-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.platform-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #6b7cff 44%, transparent);
}

.creation-work-card-incentive__button.platform-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-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);
}

.image-editor-stage-shell {
  background: #ffffff;
}

.project-gallery-stage-shell {
  background: #ffffff;
}

.project-gallery {
  position: relative;
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  color: #1f2937;
}

.project-gallery__header {
  display: flex;
  min-height: 4.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 1.5rem;
}

.project-gallery__heading {
  min-width: 0;
}

.project-gallery__header h1 {
  margin: 0;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 900;
}

.project-gallery__header span {
  display: block;
  margin-top: 0.2rem;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 700;
}

.project-gallery__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.project-gallery__grid {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  align-content: start;
  gap: 1rem;
  overflow: auto;
  padding: 1.5rem;
  padding-bottom: 6.5rem;
}

.project-gallery__card {
  position: relative;
  min-width: 0;
}

.project-gallery__card-button,
.project-gallery__new-card {
  display: grid;
  width: 100%;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #111827;
  text-align: left;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.project-gallery__card-button {
  overflow: hidden;
}

.project-gallery__card-button:hover,
.project-gallery__card--selected .project-gallery__card-button,
.project-gallery__new-card:hover {
  border-color: rgba(75, 181, 170, 0.58);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.project-gallery__preview {
  border: 0;
  border-radius: 0;
}

.project-gallery__canvas-cover {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.06), transparent 56%),
    #f3f4f6;
}

.project-gallery__canvas-cover-layer {
  position: absolute;
  overflow: hidden;
  border-radius: 0.18rem;
  background: rgba(229, 231, 235, 0.86);
}

.project-gallery__canvas-cover-loading,
.image-canvas-editor__layer-image-loading {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: rgba(226, 232, 240, 0.72);
  pointer-events: none;
}

.project-gallery__canvas-cover-loading::before,
.image-canvas-editor__layer-image-loading::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -64%;
  width: 64%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.62),
    transparent
  );
  content: '';
  transform: translateX(-100%);
  animation: image-canvas-generation-scan 1.45s linear infinite;
  will-change: transform;
}

.project-gallery__canvas-cover-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease;
}

.project-gallery__canvas-cover-image--loading {
  opacity: 0;
}

.project-gallery__canvas-cover-image--loaded {
  opacity: 1;
}

.project-gallery__preview-empty {
  width: 36%;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(75, 181, 170, 0.28), transparent 58%),
    #e5e7eb;
}

.project-gallery__meta {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  padding: 0.8rem;
}

.project-gallery__meta span:first-child {
  overflow: hidden;
  color: #111827;
  font-size: 0.94rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-gallery__meta span + span {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 680;
}

.project-gallery__card-menu-wrap {
  position: absolute;
  right: 0.6rem;
  bottom: 3.7rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 140ms ease;
}

.project-gallery__card:hover .project-gallery__card-menu-wrap,
.project-gallery__card-menu-wrap:focus-within {
  opacity: 1;
}

.platform-floating-menu {
  position: absolute;
  display: grid;
  min-width: 7rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.platform-floating-menu--top-end {
  right: 0;
  bottom: 2.4rem;
}

.platform-floating-menu--top-start {
  bottom: 2.4rem;
  left: 0;
}

.platform-floating-menu--bottom-end {
  top: calc(100% + 0.45rem);
  right: 0;
}

.platform-floating-menu--bottom-start {
  top: calc(100% + 0.45rem);
  left: 0;
}

.platform-floating-menu__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  padding: 0.65rem 0.75rem;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 760;
  text-align: left;
}

.platform-floating-menu__item:hover {
  background: #f3f4f6;
}

.project-gallery__checkbox {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.92);
  color: #238a82;
}

.platform-batch-action-toolbar {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.55rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.project-gallery__new-card {
  place-items: center;
  align-self: center;
  justify-self: center;
  width: min(22rem, calc(100% - 2rem));
  min-height: 13rem;
  margin: auto;
  color: #238a82;
  font-weight: 860;
  text-align: center;
}

.project-gallery__error {
  flex-shrink: 0;
  margin: 1rem 1.5rem 0;
}

.creation-landing {
  --creation-clay: #c76532;
  --creation-clay-dark: #914315;
  --creation-clay-soft: #ead2bf;
  --creation-ip: #c7653d;
  --creation-ip-soft: #fff2e7;
  --creation-ip-border: rgba(199, 101, 61, 0.32);
  --creation-ink: #26170f;
  --creation-muted: #87756a;
  min-height: 0;
  flex: 1;
  overflow: auto;
  background:
    linear-gradient(rgba(255, 250, 244, 0.56), rgba(255, 250, 244, 0.56)),
    url('/creation-home/background-clay-workspace.png') center top / 64rem 64rem
      repeat,
    linear-gradient(180deg, #fff9f3 0%, #fffdf9 52%, #fff8f0 100%);
  color: var(--creation-ink);
}

.creation-landing__hero,
.creation-landing__section {
  width: min(1296px, calc(100% - 2rem));
  margin: 0 auto;
}

.creation-landing__hero {
  display: grid;
  gap: 1.7rem;
  padding: clamp(3rem, 5.1vw, 4.35rem) 0 1.55rem;
  text-align: center;
}

.creation-landing__hero-copy {
  display: grid;
  justify-items: center;
  gap: 1.05rem;
}

.creation-landing__eyebrow {
  width: fit-content;
  color: #8c796c;
  font-size: 17px;
  font-weight: 860;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.creation-landing__hero h1 {
  margin: 0;
  max-width: 62rem;
  color: var(--creation-ink);
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun', serif;
  font-size: clamp(2.35rem, 4.25vw, 3.85rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.04;
}

.creation-landing__hero-detail {
  display: grid;
  max-width: 54rem;
  justify-items: center;
  gap: 0.42rem;
}

.creation-landing__hero-subtitle,
.creation-landing__hero-benefit {
  margin: 0;
  color: #8a7466;
  text-indent: 0;
}

.creation-landing__hero-subtitle {
  font-size: 20px;
  font-weight: 620;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.creation-landing__hero-benefit {
  color: #9a6f56;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: 0.08em;
  line-height: 1.55;
}

.creation-landing__hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.05rem;
  padding-top: 0.9rem;
}

.creation-landing__hero-action {
  min-width: 11.4rem;
  min-height: 3.8rem;
  border-radius: 1.7rem !important;
  padding: 0 2rem 0 1.35rem !important;
  font-size: 1.02rem !important;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 22px rgba(130, 66, 24, 0.08);
}

.creation-landing__button-art {
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0.14rem 0.16rem rgba(91, 45, 18, 0.18));
  mix-blend-mode: multiply;
}

.creation-landing__hero-action--primary,
.creation-landing__hero-action--secondary {
  border: 1px solid var(--creation-ip-border) !important;
  background: rgba(255, 250, 244, 0.82) !important;
  color: #8b5738 !important;
  box-shadow: 0 10px 22px rgba(130, 66, 24, 0.08);
}

.creation-landing__hero-action--primary:hover:not(:disabled),
.creation-landing__hero-action--secondary:hover:not(:disabled) {
  border-color: rgba(199, 101, 61, 0.48) !important;
  background: var(--creation-ip-soft) !important;
}

.creation-landing__hero-board {
  display: none;
}

.creation-landing__hero-tile {
  position: absolute;
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 0.55rem;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.creation-landing__hero-tile--main {
  left: 14%;
  top: 14%;
  width: 58%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(75, 181, 170, 0.24), transparent 52%),
    #ffffff;
}

.creation-landing__hero-tile--side {
  right: 9%;
  top: 28%;
  width: 34%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(246, 171, 76, 0.24), transparent 56%),
    #ffffff;
}

.creation-landing__hero-tile--small {
  left: 30%;
  bottom: 10%;
  width: 36%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), transparent 56%),
    #ffffff;
}

.creation-landing__section {
  display: grid;
  gap: 1.25rem;
  padding: 1.05rem 0;
}

.creation-landing__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.creation-landing__section-header h2 {
  margin: 0;
  color: var(--creation-ink);
  font-size: 1.2rem;
  font-weight: 920;
  letter-spacing: 0.12em;
}

.creation-landing__link-button {
  border: 1px solid rgba(214, 184, 159, 0.86);
  border-radius: 999px;
  background: rgba(255, 251, 246, 0.82);
  padding: 0.56rem 1.05rem;
  color: #9a5428;
  font-size: 0.82rem;
  font-weight: 840;
  box-shadow: 0 10px 22px rgba(130, 66, 24, 0.06);
}

.creation-landing__feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem 1.65rem;
}

.creation-landing__feature {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(5.6rem, 36%) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
  min-height: 9.55rem;
  border: 1px solid rgba(220, 189, 163, 0.78);
  border-radius: 1.12rem;
  background: radial-gradient(
      circle at 21% 42%,
      rgba(222, 130, 66, 0.12),
      transparent 9rem
    ),
    linear-gradient(
      135deg,
      rgba(255, 254, 251, 0.92),
      rgba(255, 247, 238, 0.82)
    );
  padding: 1.05rem 1.3rem;
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow:
    0 18px 36px rgba(124, 72, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.creation-landing__feature:hover,
.creation-landing__feature:focus-visible {
  border-color: rgba(209, 103, 54, 0.88);
  box-shadow:
    0 22px 42px rgba(124, 72, 35, 0.12),
    0 0 0 3px rgba(239, 130, 61, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.creation-landing__feature:disabled {
  cursor: progress;
  opacity: 0.68;
  transform: none;
}

.creation-landing__feature-figure {
  display: grid;
  min-width: 0;
  place-items: center;
}

.creation-landing__feature-icon {
  position: relative;
  display: grid;
  width: clamp(5.5rem, 8.4vw, 7.1rem);
  height: clamp(5.5rem, 8.4vw, 7.1rem);
  place-items: center;
  border-radius: 1.7rem;
  background: transparent;
  color: inherit;
  transform: rotate(-4deg);
  box-shadow: none;
}

.creation-landing__feature-icon::after {
  position: absolute;
  right: 10%;
  bottom: 4%;
  left: 12%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(112, 62, 32, 0.22);
  filter: blur(0.16rem);
  content: '';
}

.creation-landing__feature-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.5rem 0.5rem rgba(112, 62, 32, 0.16));
  mix-blend-mode: multiply;
}

.creation-landing__feature:nth-child(2n) .creation-landing__feature-icon {
  transform: rotate(3deg);
  border-radius: 999px 999px 1.4rem 1.4rem;
}

.creation-landing__feature:nth-child(3n) .creation-landing__feature-icon {
  transform: rotate(0deg);
  border-radius: 1.8rem;
}

.creation-landing__feature-copy {
  display: grid;
  min-width: 0;
  gap: 0.48rem;
}

.creation-landing__feature h3,
.creation-landing__asset-card h3 {
  margin: 0;
  color: var(--creation-ink);
  font-size: 1.22rem;
  font-weight: 880;
}

.creation-landing__feature p {
  margin: 0;
  color: #8a7466;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

.creation-landing__project-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(10rem, 1fr));
  gap: 0.95rem;
}

.creation-landing__project-card {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  border: 1px solid rgba(220, 189, 163, 0.78);
  border-radius: 1rem;
  background: rgba(255, 254, 251, 0.84);
  padding: 0.82rem;
  color: var(--creation-ink);
  text-align: left;
  box-shadow:
    0 16px 32px rgba(124, 72, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.creation-landing__project-card:hover,
.creation-landing__link-button:hover {
  border-color: rgba(195, 104, 48, 0.42);
  box-shadow: 0 18px 36px rgba(124, 72, 35, 0.12);
}

.creation-landing__project-card--new {
  place-items: center;
  min-height: 12rem;
  color: #9a5428;
  font-weight: 880;
  text-align: center;
}

.creation-landing__project-card--new span {
  display: grid;
  width: 5.4rem;
  height: 5.4rem;
  place-items: center;
  border-radius: 1.4rem;
  background: transparent;
}

.creation-landing__project-new-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.42rem 0.42rem rgba(112, 62, 32, 0.16));
  mix-blend-mode: multiply;
}

.creation-landing__project-cover {
  border-radius: 0.72rem;
}

.creation-landing__project-meta {
  display: grid;
  gap: 0.2rem;
}

.creation-landing__project-meta strong,
.creation-landing__project-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-landing__project-meta strong {
  font-size: 0.88rem;
}

.creation-landing__project-meta small {
  color: var(--creation-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.creation-landing__tabs {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.creation-landing__tab {
  flex: 0 0 auto;
  border: 1px solid rgba(220, 189, 163, 0.78);
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.82);
  padding: 0.48rem 0.8rem;
  color: #8a7466;
  font-size: 0.82rem;
  font-weight: 820;
}

.creation-landing__tab--active {
  border-color: rgba(195, 104, 48, 0.42);
  background: #f2d8c0;
  color: #8a451d;
}

.creation-landing__asset-waterfall {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 0.92rem;
  align-items: start;
}

.creation-landing__asset-waterfall--masonry {
  position: relative;
  display: block;
}

.creation-landing__asset-waterfall--masonry > .creation-landing__asset-card {
  position: absolute;
  box-sizing: border-box;
}

.creation-landing__asset-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  align-self: start;
  border: 1px solid rgba(220, 189, 163, 0.78);
  border-radius: 1rem;
  background: rgba(255, 254, 251, 0.88);
  padding: 0;
  color: inherit;
  text-align: left;
  box-shadow: 0 16px 32px rgba(124, 72, 35, 0.1);
}

.creation-landing__asset-card-open {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}

.creation-landing__asset-card:hover,
.creation-landing__asset-card:focus-within {
  border-color: rgba(195, 104, 48, 0.46);
  box-shadow: 0 20px 40px rgba(124, 72, 35, 0.14);
}

.creation-landing__asset-card-open:focus-visible,
.creation-landing__asset-like-button:focus-visible {
  outline: 2px solid rgba(195, 104, 48, 0.58);
  outline-offset: 2px;
}

.creation-landing__asset-like-button {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: inline-flex;
  min-width: 3.8rem;
  height: 2.18rem;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.88);
  padding: 0 0.48rem;
  color: #8a451d;
  box-shadow: 0 0.4rem 1rem rgba(74, 42, 24, 0.2);
  font-size: 0.82rem;
  font-weight: 860;
  cursor: pointer;
}

.creation-landing__asset-like-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.creation-landing__asset-like-button--active {
  background: #ffe8e0;
  color: #b33f30;
}

.creation-landing__asset-like-button img {
  width: 1.34rem;
  height: 1.34rem;
  object-fit: contain;
}

.creation-landing__showcase-like-icon {
  width: 1.16rem;
  height: 1.16rem;
  object-fit: contain;
}

.creation-landing__asset-load-more {
  min-height: 2.75rem;
  padding: 0.75rem;
  color: #8b6a52;
  font-size: 0.82rem;
  font-weight: 760;
  text-align: center;
}

.creation-landing__asset-load-more-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.creation-landing__asset-preview {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 9.5rem;
  max-height: 23rem;
  overflow: hidden;
  place-items: stretch;
  background: linear-gradient(180deg, #fffdfa, #fff4ea);
}

.creation-landing__asset-preview img,
.creation-landing__asset-preview video {
  object-position: center;
}

.creation-landing__asset-preview-media {
  display: block;
  width: calc(100% + 2px);
  max-width: none;
  height: calc(100% + 2px);
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.creation-landing__image-sequence {
  position: relative;
  overflow: hidden;
}

.creation-landing__image-sequence-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
  object-position: inherit;
}

.creation-landing__image-sequence-controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  background: rgba(24, 18, 14, 0.78);
  color: #fff;
  padding: 0.35rem 0.55rem;
  font-size: 0.75rem;
}

.creation-landing__image-sequence-controls button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.creation-landing__image-sequence-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(24, 18, 14, 0.72);
  color: #fff;
  padding: 1rem;
  font-size: 0.78rem;
  text-align: center;
}

.creation-landing__asset-preview--campaign {
  place-items: center;
}

.creation-landing__asset-preview--campaign
  .creation-landing__asset-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.creation-landing__asset-preview--bundle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.18rem;
  padding: 0.18rem;
}

.creation-landing__asset-preview-tile {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 5rem;
  overflow: hidden;
  place-items: center;
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.66);
}

.creation-landing__asset-preview-more {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: inline-flex;
  min-width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(44, 31, 22, 0.72);
  color: #fffdf9;
  font-size: 0.78rem;
  font-weight: 850;
}

.creation-landing__asset-audio-preview {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  place-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(
      135deg,
      rgba(244, 187, 129, 0.4),
      rgba(255, 247, 236, 0.92)
    ),
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.9),
      transparent 42%
    );
}

.creation-landing__asset-audio-cover {
  display: block;
  width: min(48%, 11rem);
  min-width: 3.2rem;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.creation-landing__asset-audio-preview audio {
  width: min(100%, 28rem);
}

.creation-landing__asset-meta {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
}

.creation-landing__asset-meta p {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--creation-muted);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.3;
}

.creation-landing__asset-meta dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding-right: 4.9rem;
}

.creation-landing__asset-meta div {
  min-width: 0;
}

.creation-landing__asset-meta dt {
  color: #aa9588;
  font-size: 0.68rem;
  font-weight: 760;
}

.creation-landing__asset-meta dd {
  overflow: hidden;
  margin: 0;
  color: var(--creation-ink);
  font-size: 0.78rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-landing__showcase-modal-overlay {
  padding: 0.5rem;
  background: rgba(11, 8, 6, 0.82);
}

.creation-landing__showcase-modal-panel {
  width: min(100vw - 1rem, 88rem);
  height: min(96vh, 64rem);
  max-height: calc(100vh - 1rem);
  overflow: hidden;
  border-radius: 1.2rem;
  background: #100d0b;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.creation-landing__showcase-modal-body {
  display: flex;
  min-height: 0;
  flex: 1;
  padding: 0;
  overflow: hidden;
}

.creation-landing__showcase-modal {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: radial-gradient(
      circle at 18% 12%,
      rgba(186, 117, 65, 0.18),
      transparent 32%
    ),
    #100d0b;
}

.creation-landing__showcase-modal-close {
  z-index: 4;
}

.creation-landing__showcase-modal-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.creation-landing__showcase-current {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  place-items: center;
}

.creation-landing__showcase-current > img,
.creation-landing__showcase-current > video,
.creation-landing__showcase-current .creation-landing__asset-audio-preview {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.9rem;
}

.creation-landing__showcase-current > img,
.creation-landing__showcase-current > video {
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
}

.creation-landing__showcase-current > .creation-landing__showcase-media {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.creation-landing__showcase-dock {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 18, 14, 0.94);
  backdrop-filter: none;
  padding: 0.85rem;
}

.creation-landing__showcase-dock-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.44fr);
  gap: 0.75rem 1rem;
  align-items: start;
  color: #fff8ef;
}

.creation-landing__showcase-dock-meta h3 {
  margin: 0;
  overflow: hidden;
  color: #fff8ef;
  font-size: 1rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-landing__showcase-dock-meta p {
  grid-column: 1 / 2;
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255, 248, 239, 0.72);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.32;
}

.creation-landing__showcase-dock-meta dl {
  display: grid;
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.creation-landing__showcase-dock-meta div {
  min-width: 0;
}

.creation-landing__showcase-dock-meta dt {
  color: rgba(255, 248, 239, 0.5);
  font-size: 0.68rem;
  font-weight: 780;
}

.creation-landing__showcase-dock-meta dd {
  overflow: hidden;
  margin: 0;
  color: #fff8ef;
  font-size: 0.82rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-landing__showcase-thumbs {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.creation-landing__showcase-thumb {
  display: grid;
  flex: 0 0 6.5rem;
  min-width: 0;
  gap: 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.38rem;
  color: rgba(255, 248, 239, 0.72);
  font-size: 0.68rem;
  font-weight: 760;
  text-align: center;
}

.creation-landing__showcase-thumb--active {
  border-color: rgba(242, 184, 124, 0.8);
  background: rgba(242, 184, 124, 0.18);
  color: #fff8ef;
}

.creation-landing__showcase-thumb-media {
  display: grid;
  height: 4.1rem;
  overflow: hidden;
  place-items: center;
  border-radius: 0.52rem;
  background: rgba(255, 255, 255, 0.08);
}

.creation-landing__showcase-thumb-media svg {
  width: 1.45rem;
  height: 1.45rem;
}

.creation-landing__showcase-thumb > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .creation-landing__hero,
  .creation-landing__section {
    width: min(100% - 1.4rem, 42rem);
  }

  .creation-landing__hero {
    padding-top: 2.2rem;
  }

  .creation-landing__hero h1 {
    max-width: 38rem;
    font-size: clamp(2rem, 7.6vw, 3.1rem);
    text-wrap: balance;
  }

  .creation-landing__feature-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .creation-landing__feature {
    min-height: 7.8rem;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    padding: 0.9rem 1rem;
  }

  .creation-landing__feature-icon {
    width: 4.65rem;
    height: 4.65rem;
  }

  .creation-landing__feature h3 {
    font-size: 1.05rem;
  }

  .creation-landing__project-row {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }

  .creation-landing__asset-waterfall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creation-landing__showcase-modal-panel {
    width: calc(100vw - 0.7rem);
    height: calc(100vh - 0.7rem);
  }

  .creation-landing__showcase-dock-meta {
    grid-template-columns: 1fr;
  }

  .creation-landing__showcase-dock-meta p,
  .creation-landing__showcase-dock-meta dl {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .creation-landing__hero {
    gap: 1.25rem;
    padding-top: 1.6rem;
  }

  .creation-landing__eyebrow {
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }

  .creation-landing__hero-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 1.62;
  }

  .creation-landing__hero-benefit {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .creation-landing__hero-actions {
    gap: 0.72rem;
  }

  .creation-landing__hero h1 {
    font-size: clamp(1.72rem, 7.4vw, 2.05rem);
    line-height: 1.08;
  }

  .creation-landing__hero-action {
    width: min(100%, 14rem);
    min-height: 3.25rem;
  }

  .creation-landing__feature {
    grid-template-columns: 4.55rem minmax(0, 1fr);
    border-radius: 0.95rem;
  }

  .creation-landing__feature-icon {
    width: 4rem;
    height: 4rem;
  }

  .creation-landing__section-header {
    align-items: flex-start;
  }

  .creation-landing__asset-waterfall {
    grid-template-columns: 1fr;
  }

  .creation-landing__showcase-modal-overlay {
    padding: 0;
  }

  .creation-landing__showcase-modal-panel {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .creation-landing__showcase-modal-stage {
    padding: 3.2rem 0.75rem 0.75rem;
  }

  .creation-landing__showcase-dock {
    padding: 0.72rem;
  }

  .creation-landing__showcase-thumb {
    flex-basis: 5.7rem;
  }
}

.image-canvas-editor,
.image-canvas-editor__portal-theme,
.image-canvas-editor__portal-menu {
  --image-canvas-brand-accent: var(--platform-accent, #c7653d);
  --image-canvas-brand-accent-strong: #6f2f21;
  --image-canvas-brand-fill: var(
    --platform-button-primary-fill,
    linear-gradient(135deg, #df7f40, #b95d3a)
  );
  --image-canvas-brand-text-on-fill: var(
    --platform-button-primary-text,
    #fffaf5
  );
  --image-canvas-brand-border: rgba(204, 117, 76, 0.34);
  --image-canvas-brand-border-strong: rgba(199, 101, 61, 0.64);
  --image-canvas-brand-border-soft: rgba(226, 203, 184, 0.82);
  --image-canvas-brand-soft: rgba(234, 204, 179, 0.28);
  --image-canvas-brand-soft-strong: rgba(238, 208, 183, 0.46);
  --image-canvas-brand-shadow: rgba(182, 98, 63, 0.16);
  --image-canvas-brand-focus-ring: rgba(204, 117, 76, 0.18);
}

.image-canvas-editor {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
  height: 100%;
  gap: 0;
  overflow: hidden;
  background: #ffffff;
  color: #1f2937;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.image-canvas-editor [aria-label='画布 Agent 对话'],
.image-canvas-editor [aria-label='画布 Agent 对话'] * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.image-canvas-editor [aria-label='画布 Agent 对话'] button,
.image-canvas-editor [aria-label='画布 Agent 对话'] select,
.image-canvas-editor [aria-label='画布 Agent 对话'] textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

.image-editor-creation-entry-stack {
  display: grid;
  min-width: 0;
  gap: 0.8rem;
}

.image-editor-creation-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.4rem;
  width: 100%;
  border: 1px solid rgba(75, 181, 170, 0.22);
  border-radius: 0.5rem;
  background: linear-gradient(
      135deg,
      rgba(75, 181, 170, 0.16),
      rgba(223, 161, 94, 0.1)
    ),
    var(--platform-subpanel-fill);
  padding: 0.7rem;
  color: var(--platform-text-strong);
  text-align: left;
  box-shadow: 0 16px 32px rgba(43, 68, 64, 0.12);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.image-editor-creation-entry:hover {
  transform: translateY(-1px);
  border-color: rgba(75, 181, 170, 0.5);
  box-shadow: 0 20px 38px rgba(43, 68, 64, 0.16);
}

.image-editor-creation-entry__icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.45rem;
  background: rgba(75, 181, 170, 0.18);
  color: #238a82;
}

.image-editor-creation-entry__body {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.image-editor-creation-entry__body span:first-child {
  font-size: 0.98rem;
  font-weight: 900;
}

.image-editor-creation-entry__body span + span {
  color: var(--platform-text-soft);
  font-size: 0.76rem;
  font-weight: 760;
}

.image-canvas-editor__sidebar {
  display: flex;
  width: min(18.5rem, 34vw);
  min-width: 15.5rem;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--image-canvas-brand-border-soft);
  background: #ffffff;
}

.image-canvas-editor__sidebar-header {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--image-canvas-brand-border-soft);
  padding: 0.65rem;
}

.image-canvas-editor__sidebar-title,
.image-canvas-editor__title-block h1 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0;
}

.image-canvas-editor__sidebar-count,
.image-canvas-editor__title-block span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
}

.image-canvas-editor__project-back-button,
.image-canvas-editor__floating-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--image-canvas-brand-border-soft);
  background: #ffffff;
  color: #334155;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.image-canvas-editor__floating-toolbar button:hover {
  transform: translateY(-1px);
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__sidebar-header-actions {
  display: inline-flex;
  gap: 0.35rem;
}

.image-canvas-editor__sidebar-search {
  border-bottom: 1px solid var(--image-canvas-brand-border-soft);
  padding: 0.55rem 0.65rem;
}

.image-canvas-editor__sidebar-search-input {
  height: 2rem;
  border-radius: 0.45rem;
  font-size: 0.78rem;
  font-weight: 780;
}

.image-canvas-editor__asset-list {
  position: relative;
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 0.65rem;
}

.image-canvas-editor__asset-library {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.image-canvas-editor__asset-library > .image-canvas-editor__asset-list {
  flex: 1;
}

.image-canvas-editor__asset-batch-action {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 2.35rem !important;
  gap: 0.375rem !important;
  overflow: hidden !important;
  padding: 0.375rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.image-canvas-editor__asset-folder {
  display: grid;
  gap: 0.45rem;
}

.image-canvas-editor__asset-folder-header {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.35rem;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
}

.image-canvas-editor__asset-folder-header > span:first-of-type,
.image-canvas-editor__folder-rename-input {
  min-width: 0;
  flex: 1;
}

.image-canvas-editor__folder-rename-input {
  height: 1.8rem;
  border: 1px solid var(--image-canvas-brand-border-strong);
  border-radius: 0.35rem;
  background: #ffffff;
  padding: 0 0.45rem;
  color: #1f2937;
  font: inherit;
  font-size: 0.76rem;
  outline: none;
}

.image-canvas-editor__asset-folder-header button {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.36rem;
  background: transparent;
  color: #64748b;
}

.image-canvas-editor__asset-folder-header button:hover {
  border-color: var(--image-canvas-brand-border);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__asset-folder-header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__asset-folder-header span + span {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 820;
}

.image-canvas-editor__asset-folder--move-target
  > .image-canvas-editor__asset-folder-header {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__asset-folder-sticky-target {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--image-canvas-brand-border-strong);
  border-radius: 0.45rem;
  background: var(--image-canvas-brand-soft);
  padding: 0.38rem 0.5rem;
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.78rem;
  font-weight: 880;
  box-shadow: 0 10px 24px var(--image-canvas-brand-shadow);
}

.image-canvas-editor__asset-folder-sticky-target span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__asset-folder-list {
  display: grid;
  gap: 0.5rem;
}

.image-canvas-editor__asset-row {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  min-height: 5.1rem;
  gap: 0.55rem;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #f8fafc;
  padding: 0.45rem;
  color: #1f2937;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.image-canvas-editor__asset-row:hover {
  transform: translateY(-1px);
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
}

.image-canvas-editor__asset-row--selected {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft-strong);
}

.image-canvas-editor__asset-row--uploading {
  border-color: var(--image-canvas-brand-border);
  background: rgba(255, 250, 245, 0.96);
}

.image-canvas-editor__asset-row--uploading:hover {
  transform: none;
  border-color: var(--image-canvas-brand-border-strong);
  background: rgba(255, 250, 245, 0.96);
}

.image-canvas-editor__asset-row--upload-failed {
  border-color: #fecaca;
  background: #fff7f7;
}

.image-canvas-editor__asset-drag-preview {
  position: fixed;
  z-index: 80;
  max-width: 11rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--image-canvas-brand-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.4rem 0.65rem;
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.78rem;
  font-weight: 880;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.image-canvas-editor__asset-upload-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(248, 250, 252, 0.74);
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.72rem;
  font-weight: 880;
}

.image-canvas-editor__asset-upload-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.25rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.image-canvas-editor__asset-upload-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.image-canvas-editor__asset-upload-progress progress {
  width: 100%;
  height: 0.35rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
}

.image-canvas-editor__asset-upload-progress progress::-webkit-progress-bar {
  background: #e2e8f0;
}

.image-canvas-editor__asset-upload-progress progress::-webkit-progress-value {
  background: var(--image-canvas-brand-accent);
}

.image-canvas-editor__asset-marquee {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--image-canvas-brand-accent);
  background: rgba(204, 117, 76, 0.12);
  pointer-events: none;
}

.image-canvas-editor__canvas-marquee {
  position: absolute;
  z-index: 7;
  border: 1px solid var(--image-canvas-brand-accent);
  background: rgba(204, 117, 76, 0.12);
  pointer-events: none;
}

.image-canvas-editor__upload-drop-overlay {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.25rem;
  border: 1px dashed var(--image-canvas-brand-border-strong);
  background: rgba(255, 244, 236, 0.76);
  color: var(--image-canvas-brand-accent-strong);
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.image-canvas-editor__upload-drop-overlay span {
  font-size: 0.82rem;
  font-weight: 820;
}

.image-canvas-editor__upload-drop-overlay strong {
  font-size: 1rem;
  font-weight: 920;
}

.image-canvas-editor__upload-drop-overlay--assets {
  inset: 0.45rem;
  border-radius: 0.55rem;
}

.image-canvas-editor__upload-drop-overlay--canvas {
  inset: 0.85rem;
  border-radius: 0.65rem;
}

.image-canvas-editor__asset-button {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
}

.image-canvas-editor__layer-row-button {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
}

.image-canvas-editor__asset-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 0.35rem;
  background: linear-gradient(
      45deg,
      rgba(148, 163, 184, 0.18) 25%,
      transparent 25%
    ),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%);
  background-position:
    0 0,
    0 0.5rem,
    0.5rem -0.5rem,
    -0.5rem 0;
  background-size: 1rem 1rem;
}

.image-canvas-editor__asset-media-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #f8fafc;
}

.image-canvas-editor__asset-video-preview {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.35rem;
  background: #0f172a;
  object-fit: cover;
}

.image-canvas-editor__media-preview {
  position: relative;
  isolation: isolate;
  background: radial-gradient(
      circle at 25% 24%,
      rgba(255, 255, 255, 0.22),
      transparent 0.72rem
    ),
    linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(20, 83, 45, 0.58));
}

.image-canvas-editor__media-preview::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  opacity: 0.72;
}

.image-canvas-editor__media-preview--audio::before {
  background: repeating-linear-gradient(
      90deg,
      rgba(103, 232, 249, 0.34) 0 0.18rem,
      transparent 0.18rem 0.52rem
    ),
    linear-gradient(135deg, rgba(14, 116, 144, 0.42), rgba(49, 46, 129, 0.48));
}

.image-canvas-editor__media-preview--video::before {
  background: linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.42) 0 14%,
      transparent 14% 86%,
      rgba(15, 23, 42, 0.42) 86%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(248, 250, 252, 0.34) 0 0.2rem,
      transparent 0.2rem 0.58rem
    ),
    linear-gradient(135deg, rgba(124, 58, 237, 0.38), rgba(20, 184, 166, 0.38));
}

.image-canvas-editor__media-preview--variant-1 {
  filter: hue-rotate(22deg);
}

.image-canvas-editor__media-preview--variant-2 {
  filter: hue-rotate(54deg);
}

.image-canvas-editor__media-preview--variant-3 {
  filter: hue-rotate(92deg);
}

.image-canvas-editor__media-preview--variant-4 {
  filter: hue-rotate(138deg);
}

.image-canvas-editor__media-preview--variant-5 {
  filter: hue-rotate(184deg);
}

.image-canvas-editor__layer img,
.image-canvas-editor__layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-canvas-editor__asset-meta {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  font-size: 0.84rem;
  font-weight: 820;
}

.image-canvas-editor__asset-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__asset-rename-input {
  min-width: 0;
  height: 1.8rem;
  border: 1px solid var(--image-canvas-brand-border-strong);
  border-radius: 0.35rem;
  background: #ffffff;
  padding: 0 0.45rem;
  color: #1f2937;
  font: inherit;
  font-size: 0.78rem;
  outline: none;
}

.image-canvas-editor__asset-actions {
  display: inline-flex;
  gap: 0.22rem;
}

.image-canvas-editor__asset-actions button,
.image-canvas-editor__folder-create button {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.42rem;
  background: #ffffff;
  color: #475569;
}

.image-canvas-editor__asset-actions button:hover,
.image-canvas-editor__folder-create button:hover {
  border-color: var(--image-canvas-brand-border-strong);
  background: #ffffff;
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__folder-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.45rem;
  background: #f8fafc;
  padding: 0.4rem;
}

.image-canvas-editor__folder-create-input {
  min-width: 0;
  height: 2rem;
  border: 1px solid var(--image-canvas-brand-border-strong);
  border-radius: 0.35rem;
  background: #ffffff;
  padding: 0 0.5rem;
  color: #1f2937;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  outline: none;
}

.image-canvas-editor__asset-meta span + span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 760;
}

.image-canvas-editor__layers-list {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 0.45rem;
  overflow-y: auto;
  padding: 0.65rem;
}

.image-canvas-editor__layer-row {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  min-height: 3.45rem;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #f8fafc;
  padding: 0.38rem;
  color: #1f2937;
  text-align: left;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.image-canvas-editor__layer-row:hover,
.image-canvas-editor__layer-row--selected {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
}

.image-canvas-editor__layer-row-thumb {
  display: block;
  overflow: hidden;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.35rem;
  background: #e2e8f0;
}

.image-canvas-editor__layer-row-meta {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
  font-size: 0.78rem;
  font-weight: 820;
}

.image-canvas-editor__layer-row-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__layer-row-meta span + span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.image-canvas-editor__main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

.image-canvas-editor__topbar {
  display: flex;
  min-height: 2.86rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  border-bottom: 1px solid var(--image-canvas-brand-border-soft);
  background: #ffffff;
  padding: 0.36rem 0.58rem;
}

.image-canvas-editor__topbar-project {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.34rem;
}

.image-canvas-editor__topbar-actions {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.36rem;
}

.image-canvas-editor__shortcut-modal {
  border-radius: 1.05rem;
}

.image-canvas-editor__shortcut-modal-body {
  background: #f8fafc;
}

.image-canvas-editor__shortcut-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.image-canvas-editor__shortcut-section {
  display: grid;
  min-width: 0;
  gap: 0.48rem;
  border: 1px solid #dbe4f0;
  border-radius: 0.65rem;
  background: #ffffff;
  padding: 0.72rem;
}

.image-canvas-editor__shortcut-section h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 900;
}

.image-canvas-editor__shortcut-list {
  display: grid;
  gap: 0.36rem;
  margin: 0;
}

.image-canvas-editor__shortcut-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(6rem, auto);
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
}

.image-canvas-editor__shortcut-row dt {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 780;
}

.image-canvas-editor__shortcut-row dt > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--image-canvas-brand-soft);
  padding: 0.08rem 0.34rem;
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.62rem;
  font-weight: 900;
}

.image-canvas-editor__shortcut-row dd {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
}

.image-canvas-editor__shortcut-row kbd {
  display: inline-grid;
  min-width: 1.65rem;
  min-height: 1.45rem;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-bottom-color: #94a3b8;
  border-radius: 0.35rem;
  background: linear-gradient(#ffffff, #eef2f7);
  padding: 0 0.42rem;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.16);
  white-space: nowrap;
}

.image-canvas-editor__shortcut-plus {
  margin-right: 0.2rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
}

.image-canvas-editor__project-back-button {
  width: 2.04rem;
  height: 2.04rem;
  flex: 0 0 auto;
  border-radius: 0.45rem;
  text-decoration: none;
}

.image-canvas-editor__project-title-row {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.18rem;
}

.image-canvas-editor__project-title-button {
  min-width: 0;
  max-width: min(22rem, 38vw);
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: text;
}

.image-canvas-editor__project-title-button h1 {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__project-rename-button {
  opacity: 0;
  transition: opacity 140ms ease;
}

.image-canvas-editor__project-title-row:hover
  .image-canvas-editor__project-rename-button,
.image-canvas-editor__project-rename-button:focus-visible {
  opacity: 1;
}

.image-canvas-editor__project-title-form {
  display: inline-flex;
  min-width: 0;
  max-width: min(32rem, 54vw);
  align-items: center;
  gap: 0.28rem;
}

.image-canvas-editor__project-title-input {
  width: clamp(8.5rem, 24vw, 16rem);
}

.image-canvas-editor__project-title-error {
  max-width: 10rem;
  overflow: hidden;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__wallet-chip {
  display: inline-flex;
  min-width: 6.65rem;
  height: 2.04rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  border: 1px solid rgba(214, 184, 159, 0.72);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.82);
  padding: 0 0.56rem 0 0.42rem;
  color: #7a4427;
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.image-canvas-editor__wallet-chip:hover,
.image-canvas-editor__wallet-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(214, 184, 159, 0.92);
  background: rgba(255, 250, 244, 0.96);
  box-shadow: 0 0.28rem 0.78rem rgba(112, 62, 32, 0.12);
}

.image-canvas-editor__wallet-chip img {
  width: 1.16rem;
  height: 1.16rem;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0.12rem 0.12rem rgba(112, 62, 32, 0.14));
  mix-blend-mode: multiply;
}

.image-canvas-editor__account-chip {
  display: inline-flex;
  min-width: 0;
  height: 2.04rem;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(214, 184, 159, 0.72);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.82);
  padding: 0 0.68rem 0 0.24rem;
  color: #4f2f23;
  line-height: 1;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.image-canvas-editor__account-chip:hover,
.image-canvas-editor__account-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(214, 184, 159, 0.92);
  background: rgba(255, 250, 244, 0.96);
  box-shadow: 0 0.28rem 0.78rem rgba(112, 62, 32, 0.12);
}

.image-canvas-editor__account-avatar {
  display: inline-grid;
  width: 1.66rem;
  height: 1.66rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--platform-profile-avatar-fill);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: var(--platform-profile-avatar-shadow);
}

.image-canvas-editor__account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-canvas-editor__account-meta {
  display: grid;
  min-width: 0;
  max-width: 8.4rem;
  gap: 0.12rem;
  text-align: left;
}

.image-canvas-editor__account-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__account-meta span:first-child {
  color: #4f2f23;
  font-size: 0.76rem;
  font-weight: 880;
}

.image-canvas-editor__account-meta span:last-child {
  color: #8a6d5c;
  font-size: 0.66rem;
  font-weight: 760;
}

.image-canvas-editor__zoom-menu-wrap {
  margin-left: auto;
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
}

.image-canvas-editor__zoom-trigger {
  min-width: 4.15rem;
  height: 2.25rem;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.45rem;
  background: #ffffff;
  padding: 0 0.65rem;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 850;
}

.image-canvas-editor__zoom-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__zoom-menu-item {
  min-width: 12rem;
  justify-content: flex-start;
  min-height: 2rem;
  width: 100%;
  border-radius: 0.38rem;
  padding: 0 0.65rem;
  font-size: 0.76rem;
  font-weight: 820;
}

.image-canvas-editor__floating-toolbar button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.45rem;
}

.image-canvas-editor__floating-toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 0.5rem;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 999px;
  background: var(--image-canvas-brand-border-soft);
}

.image-canvas-editor__floating-toolbar-divider {
  height: 1.125rem;
}

.image-canvas-editor__bottom-toolbar-option-wrap {
  display: inline-flex;
}

.image-canvas-editor__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  cursor: default;
  background-color: #f8fafc;
  touch-action: none;
}

.image-canvas-editor__viewport--panning {
  cursor: grabbing;
}

.image-canvas-editor__viewport--tool-hand {
  cursor: grab;
}

.image-canvas-editor__undo-toast {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 73;
  max-width: min(32rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.image-canvas-editor__world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.image-canvas-editor__layer {
  position: absolute;
  display: block;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 0.15rem;
  background: transparent;
  padding: 0;
  cursor: move;
}

.image-canvas-editor__layer img,
.image-canvas-editor__layer video {
  display: block;
  border-radius: 0.1rem;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}

.image-canvas-editor__layer img {
  pointer-events: none;
}

.image-canvas-editor__layer-image-loading {
  z-index: 0;
  border-radius: 0.1rem;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
}

.image-canvas-editor__layer-image--loading,
.image-canvas-editor__layer-image--loaded {
  position: relative;
  z-index: 1;
  transition: opacity 180ms ease;
}

.image-canvas-editor__layer-image--loading {
  opacity: 0;
}

.image-canvas-editor__layer-image--loaded {
  opacity: 1;
}

.image-canvas-editor__layer-video-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: 0.1rem;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.image-canvas-editor__layer-video-preview--visible {
  opacity: 1;
}

.image-canvas-editor__layer-video {
  position: relative;
  z-index: 1;
}

.image-canvas-editor__layer-image-sequence-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-canvas-editor__image-sequence-controls {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: calc(100% - 0.9rem);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  padding: 0.18rem 0.45rem 0.18rem 0.2rem;
  color: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(10px);
}

.image-canvas-editor__image-sequence-toggle {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  cursor: pointer;
}

.image-canvas-editor__image-sequence-toggle:disabled {
  opacity: 0.58;
  cursor: default;
}

.image-canvas-editor__image-sequence-count {
  min-width: 2.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.image-canvas-editor__audio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  gap: 0.3rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #6f2f21, #b95d3a);
  padding: 0.7rem;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}

.image-canvas-editor__audio-card-playback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__audio-card-playback:hover {
  background: rgba(15, 23, 42, 0.18);
}

.image-canvas-editor__audio-card-title {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  z-index: 2;
  overflow: hidden;
  max-width: min(70%, calc(100% - 1.4rem));
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(15, 23, 42, 0.55);
}

.image-canvas-editor__audio-card-controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto minmax(2rem, 3.8rem);
  align-items: center;
  gap: 0.34rem;
  min-height: 1.85rem;
  padding: 0.18rem 0;
  color: rgba(255, 255, 255, 0.92);
  transform: translateY(calc(100% + 0.7rem));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.image-canvas-editor__audio-card--controls-visible
  .image-canvas-editor__audio-card-controls {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.image-canvas-editor__audio-card audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-canvas-editor__audio-card-time {
  min-width: 2.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.42);
}

.image-canvas-editor__audio-card-progress,
.image-canvas-editor__audio-card-volume {
  min-width: 0;
  height: 0.35rem;
  accent-color: #67e8f9;
  cursor: pointer;
}

.image-canvas-editor__audio-card-progress:disabled {
  cursor: default;
  opacity: 0.45;
}

.image-canvas-editor__audio-card-volume-toggle {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
}

.image-canvas-editor__audio-card-volume-toggle:hover {
  background: rgba(255, 255, 255, 0.24);
}

.image-canvas-editor__layer--hovered,
.image-canvas-editor__layer--selected {
  border-color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__layer--selected {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.image-canvas-editor__layer--locked {
  cursor: not-allowed;
}

.image-canvas-editor__layer--locked::after {
  content: '';
  position: absolute;
  inset: -0.28rem;
  border: 1px dashed rgba(71, 85, 105, 0.55);
  border-radius: 0.32rem;
  pointer-events: none;
}

.image-canvas-editor__layer--generating {
  cursor: progress;
}

.image-canvas-editor__layer--generating::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: 0.1rem;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.52),
      transparent
    ),
    rgba(248, 250, 252, 0.32);
  animation: image-canvas-generation-scan 1.7s linear infinite;
  pointer-events: none;
}

.image-canvas-editor__layer-generating-progress {
  z-index: 3;
  bottom: 0.7rem;
}

.image-canvas-editor__generation-frame {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  background: #eeeeee;
  color: #9ca3af;
  cursor: move;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.image-canvas-editor__generation-frame--focused {
  border-color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__generation-frame-label,
.image-canvas-editor__generation-frame-size {
  position: absolute;
  top: var(--image-canvas-editor-frame-label-offset, -1.35rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--image-canvas-brand-accent);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
}

.image-canvas-editor__generation-frame-label {
  left: 0;
  transform-origin: bottom left;
}

.image-canvas-editor__generation-frame-size {
  right: 0;
  transform-origin: bottom right;
}

.image-canvas-editor__generation-frame-icon {
  display: grid;
  place-items: center;
  color: #c7c7c7;
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
  transform-origin: center;
}

.image-canvas-editor__generation-frame--character {
  background: radial-gradient(
      circle at 50% 34%,
      rgba(250, 245, 255, 0.94),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(250, 245, 255, 0.84),
      rgba(243, 232, 255, 0.72)
    );
}

.image-canvas-editor__generation-frame--character.image-canvas-editor__generation-frame--focused {
  border-color: rgba(147, 51, 234, 0.72);
}

.image-canvas-editor__generation-frame--character
  .image-canvas-editor__generation-frame-icon {
  color: #9333ea;
}

.image-canvas-editor__generation-frame--character-animation {
  background: radial-gradient(
      circle at 50% 36%,
      rgba(255, 247, 237, 0.96),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(255, 247, 237, 0.92),
      rgba(254, 215, 170, 0.74)
    );
}

.image-canvas-editor__generation-frame--character-animation.image-canvas-editor__generation-frame--focused {
  border-color: rgba(249, 115, 22, 0.74);
}

.image-canvas-editor__generation-frame--character-animation
  .image-canvas-editor__generation-frame-icon {
  color: #f97316;
}

.image-canvas-editor__generation-frame--video {
  background: linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.12) 10%,
      transparent 10% 90%,
      rgba(15, 23, 42, 0.12) 90%
    ),
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.82));
}

.image-canvas-editor__generation-frame--video.image-canvas-editor__generation-frame--focused {
  border-color: rgba(37, 99, 235, 0.72);
}

.image-canvas-editor__generation-frame--video
  .image-canvas-editor__generation-frame-icon {
  color: #2563eb;
}

.image-canvas-editor__generation-frame--audio-sound-effect,
.image-canvas-editor__generation-frame--audio-background-music {
  background: repeating-linear-gradient(
      90deg,
      rgba(79, 70, 229, 0.14) 0 0.22rem,
      transparent 0.22rem 0.58rem
    ),
    linear-gradient(135deg, rgba(238, 242, 255, 0.92), rgba(224, 231, 255, 0.8));
}

.image-canvas-editor__generation-frame--audio-sound-effect.image-canvas-editor__generation-frame--focused,
.image-canvas-editor__generation-frame--audio-background-music.image-canvas-editor__generation-frame--focused {
  border-color: rgba(79, 70, 229, 0.72);
}

.image-canvas-editor__generation-frame--audio-sound-effect
  .image-canvas-editor__generation-frame-icon,
.image-canvas-editor__generation-frame--audio-background-music
  .image-canvas-editor__generation-frame-icon {
  color: #4f46e5;
}

.image-canvas-editor__generation-frame--generating {
  overflow: hidden;
  background: radial-gradient(
      circle at 50% 38%,
      rgba(255, 255, 255, 0.96),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 247, 241, 0.94),
      rgba(232, 236, 244, 0.95)
    );
  color: var(--image-canvas-brand-accent);
  cursor: progress;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.image-canvas-editor__generation-frame--generating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.62),
      transparent
    ),
    repeating-linear-gradient(
      135deg,
      rgba(204, 117, 76, 0.1) 0 0.4rem,
      transparent 0.4rem 0.85rem
    );
  animation: image-canvas-generation-scan 1.7s linear infinite;
}

.image-canvas-editor__generation-frame--generating
  .image-canvas-editor__generation-frame-label,
.image-canvas-editor__generation-frame--generating
  .image-canvas-editor__generation-frame-size {
  color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__generation-frame--generating
  .image-canvas-editor__generation-frame-icon {
  position: relative;
  z-index: 1;
  width: 5.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--image-canvas-brand-border);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(199, 101, 61, 0.68);
  box-shadow: 0 18px 32px var(--image-canvas-brand-shadow);
}

.image-canvas-editor__generation-frame--pending-confirmation {
  border-color: var(--image-canvas-brand-accent);
  cursor: pointer;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.image-canvas-editor__generation-frame-progress {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--image-canvas-brand-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.34rem 0.7rem;
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.76rem;
  font-weight: 850;
  transform: translateX(-50%);
  box-shadow: 0 12px 24px var(--image-canvas-brand-shadow);
}

.image-canvas-editor__generation-frame-progress::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  animation: image-canvas-generation-pulse 1s ease-in-out infinite;
}

.image-canvas-editor__generation-frame-progress--pending-confirmation::before {
  animation: none;
}

@keyframes image-canvas-generation-scan {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

@keyframes image-canvas-generation-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  ) {
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(236, 253, 245, 0.86)
    ),
    #ecfdf5;
}

.image-canvas-editor__generation-frame--icon.image-canvas-editor__generation-frame--focused {
  border-color: #10b981;
}

.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  )::before,
.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  )::after {
  content: '';
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 2px solid rgba(16, 185, 129, 0.32);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}

.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  )::before {
  transform: translate(-20%, -8%) rotate(-8deg);
}

.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  )::after {
  transform: translate(18%, 10%) rotate(7deg);
}

.image-canvas-editor__generation-frame--icon:not(
    .image-canvas-editor__generation-frame--generating
  )
  .image-canvas-editor__generation-frame-icon {
  position: relative;
  z-index: 1;
  width: 28%;
  aspect-ratio: 1;
  border: 2px solid rgba(16, 185, 129, 0.42);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  color: #10b981;
  box-shadow: 0 16px 28px rgba(16, 185, 129, 0.16);
}

.image-canvas-editor__generation-frame--ui-design {
  background: linear-gradient(
      90deg,
      rgba(245, 158, 11, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(0deg, rgba(245, 158, 11, 0.1) 1px, transparent 1px),
    rgba(255, 251, 235, 0.82);
  background-size: 42px 42px;
}

.image-canvas-editor__generation-frame--ui-design.image-canvas-editor__generation-frame--focused {
  border-color: rgba(245, 158, 11, 0.72);
}

.image-canvas-editor__generation-frame--ui-design
  .image-canvas-editor__generation-frame-icon {
  color: #d97706;
}

.image-canvas-editor__generation-frame--scene {
  border-color: rgba(8, 145, 178, 0.26);
  background: radial-gradient(
      circle at 50% 34%,
      rgba(240, 253, 250, 0.96),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(236, 254, 255, 0.92),
      rgba(209, 250, 229, 0.78)
    );
}

.image-canvas-editor__generation-frame--scene.image-canvas-editor__generation-frame--focused {
  border-color: rgba(8, 145, 178, 0.72);
}

.image-canvas-editor__generation-frame--scene
  .image-canvas-editor__generation-frame-icon {
  color: #0891b2;
}

.image-canvas-editor__generation-frame--quick-edit {
  border-color: var(--image-canvas-brand-border);
  background: linear-gradient(
      135deg,
      rgba(204, 117, 76, 0.12),
      rgba(240, 203, 169, 0.12)
    ),
    rgba(255, 255, 255, 0.72);
}

.image-canvas-editor__generation-frame--quick-edit.image-canvas-editor__generation-frame--focused {
  box-shadow:
    0 0 0 1px var(--image-canvas-brand-border),
    0 22px 54px var(--image-canvas-brand-shadow);
}

.image-canvas-editor__generation-frame--quick-edit
  .image-canvas-editor__generation-frame-icon {
  color: rgba(199, 101, 61, 0.72);
}

.image-canvas-editor__generation-frame--publication {
  border-color: rgba(236, 72, 153, 0.28);
  background: radial-gradient(
      circle at 30% 20%,
      rgba(244, 114, 182, 0.18),
      transparent 38%
    ),
    linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(251, 146, 60, 0.08)),
    rgba(255, 247, 252, 0.78);
}

.image-canvas-editor__generation-frame--publication.image-canvas-editor__generation-frame--focused {
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.28),
    0 22px 54px rgba(236, 72, 153, 0.18);
}

.image-canvas-editor__generation-frame--publication
  .image-canvas-editor__generation-frame-icon {
  color: rgba(219, 39, 119, 0.64);
}

.image-canvas-editor__metadata-corner {
  position: absolute;
  right: var(--image-canvas-editor-corner-offset, 0.35rem);
  top: var(--image-canvas-editor-corner-offset, 0.35rem);
  z-index: 2;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(199, 101, 61, 0.92);
  color: var(--image-canvas-brand-text-on-fill);
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
  transform-origin: top right;
}

.image-canvas-editor__metadata-corner:hover {
  background: #b95d3a;
}

.image-canvas-editor__metadata-corner--beside-spec {
  right: var(--image-canvas-editor-beside-kind-offset, 1.95rem);
}

.image-canvas-editor__metadata-corner--beside-kind {
  right: var(--image-canvas-editor-corner-offset, 0.35rem);
}

.image-canvas-editor__spec-badge {
  position: absolute;
  right: 0.38rem;
  top: 0.38rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(199, 101, 61, 0.92);
  padding: 0.22rem 0.5rem;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px var(--image-canvas-brand-shadow);
  pointer-events: none;
}

.image-canvas-editor__kind-badge {
  position: absolute;
  right: var(--image-canvas-editor-kind-offset, 0.38rem);
  top: var(--image-canvas-editor-kind-offset, 0.38rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  padding: 0.22rem 0.5rem;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  pointer-events: none;
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
  transform-origin: top right;
}

.image-canvas-editor__kind-badge--editable {
  border: 1px solid rgba(255, 255, 255, 0.72);
  cursor: pointer;
  pointer-events: auto;
}

.image-canvas-editor__kind-badge--beside-info {
  right: var(--image-canvas-editor-beside-kind-offset, 1.95rem);
}

.image-canvas-editor__kind-badge--spec {
  background: rgba(199, 101, 61, 0.92);
  box-shadow: 0 8px 18px var(--image-canvas-brand-shadow);
}

.image-canvas-editor__kind-badge--character {
  background: rgba(147, 51, 234, 0.92);
  box-shadow: 0 8px 18px rgba(147, 51, 234, 0.24);
}

.image-canvas-editor__kind-badge--character-animation {
  background: rgba(249, 115, 22, 0.94);
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.24);
}

.image-canvas-editor__kind-badge--icon {
  background: rgba(16, 185, 129, 0.92);
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24);
}

.image-canvas-editor__kind-badge--icon-spritesheet {
  background: rgba(20, 184, 166, 0.92);
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
}

.image-canvas-editor__kind-badge--icon-spec {
  background: rgba(13, 148, 136, 0.92);
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.24);
}

.image-canvas-editor__kind-badge--source-image {
  background: rgba(71, 85, 105, 0.9);
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.22);
}

.image-canvas-editor__kind-badge--ui-design {
  background: rgba(245, 158, 11, 0.94);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
}

.image-canvas-editor__kind-badge--scene {
  background: rgba(8, 145, 178, 0.92);
  box-shadow: 0 8px 18px rgba(8, 145, 178, 0.24);
}

.image-canvas-editor__kind-badge--publication {
  background: rgba(219, 39, 119, 0.92);
  box-shadow: 0 8px 18px rgba(219, 39, 119, 0.24);
}

.image-canvas-editor__kind-badge--publication-material {
  background: rgba(219, 39, 119, 0.92);
  box-shadow: 0 8px 18px rgba(219, 39, 119, 0.24);
}

.image-canvas-editor__kind-badge--unknown {
  background: rgba(71, 85, 105, 0.88);
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.2);
}

.image-canvas-editor__kind-badge--video {
  background: rgba(37, 99, 235, 0.92);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.image-canvas-editor__kind-badge--sound-effect,
.image-canvas-editor__kind-badge--background-music {
  background: rgba(79, 70, 229, 0.92);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.24);
}

.image-canvas-editor__kind-menu-anchor {
  position: absolute;
  width: 0;
  height: 0;
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
  transform-origin: top right;
}

.image-canvas-editor__kind-menu {
  max-height: 16rem;
  overflow-y: auto;
}

.image-canvas-editor__kind-menu-item--active {
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__size-badge {
  position: absolute;
  left: var(--image-canvas-editor-corner-offset, 0.35rem);
  top: var(--image-canvas-editor-corner-offset, 0.35rem);
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(111, 47, 33, 0.88);
  color: var(--image-canvas-brand-text-on-fill);
  white-space: nowrap;
  transform: scale(var(--image-canvas-editor-inverse-scale, 1));
  transform-origin: top left;
}

.image-canvas-editor__floating-toolbar {
  position: absolute;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.28rem;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
  transform: translate(-50%, -100%);
}

.image-canvas-editor__floating-toolbar
  button.image-canvas-editor__floating-toolbar-text-button {
  width: auto;
  min-width: 0;
  gap: 0.35rem;
  padding: 0 0.62rem;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.image-canvas-editor__reset-button {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 9;
}

.image-canvas-editor__minimap {
  position: absolute;
  left: 0.85rem;
  bottom: 4rem;
  z-index: 10;
  display: block;
  width: 8.25rem;
  height: 5.25rem;
  overflow: hidden;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.image-canvas-editor__minimap-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.image-canvas-editor__minimap-layer,
.image-canvas-editor__minimap-viewport {
  position: absolute;
  display: block;
  border-radius: 0.12rem;
}

.image-canvas-editor__minimap-layer {
  background: #d9dde3;
}

.image-canvas-editor__minimap-layer:nth-child(even) {
  background: #eceff3;
}

.image-canvas-editor__minimap-viewport {
  border: 1.5px solid var(--image-canvas-brand-border-strong);
  background: rgba(255, 255, 255, 0.2);
}

.image-canvas-editor__task-sidebar {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  pointer-events: auto;
}

.image-canvas-editor__task-sidebar--closed {
  width: auto;
}

.image-canvas-editor__task-sidebar-toggle {
  flex: 0 0 auto;
  border-color: var(--image-canvas-brand-border-soft);
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.image-canvas-editor__task-sidebar-panel {
  width: min(20rem, calc(100vw - 5.6rem));
  max-height: min(24rem, calc(100vh - 9rem));
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}

.image-canvas-editor__task-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.68rem 0.78rem;
  color: #0f172a;
}

.image-canvas-editor__task-sidebar-header strong {
  font-size: 0.8rem;
  font-weight: 850;
}

.image-canvas-editor__task-sidebar-header span {
  display: inline-flex;
  min-width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 850;
}

.image-canvas-editor__task-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.38rem;
}

.image-canvas-editor__task-sidebar-tab {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 0.38rem;
  background: transparent;
  padding: 0.42rem 0.5rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.image-canvas-editor__task-sidebar-tab:hover {
  background: #f8fafc;
  color: #0f172a;
}

.image-canvas-editor__task-sidebar-tab--active {
  background: #eff6ff;
  color: #1d4ed8;
}

.image-canvas-editor__task-sidebar-tab span {
  display: inline-flex;
  min-width: 1.05rem;
  height: 1.05rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.62rem;
}

.image-canvas-editor__task-sidebar-list {
  display: grid;
  max-height: calc(min(24rem, calc(100vh - 9rem)) - 5.55rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
}

.image-canvas-editor__task-sidebar-empty {
  padding: 1.15rem 0.75rem;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 750;
  text-align: center;
}

.image-canvas-editor__task-sidebar-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  padding: 0.55rem;
  color: #334155;
  text-align: left;
}

.image-canvas-editor__task-sidebar-item:disabled {
  color: #334155;
  cursor: default;
  opacity: 1;
}

.image-canvas-editor__task-sidebar-item:not(:disabled):hover {
  background: #f8fafc;
}

.image-canvas-editor__task-sidebar-item-icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}

.image-canvas-editor__task-sidebar-item--running
  .image-canvas-editor__task-sidebar-item-icon {
  background: #ecfeff;
  color: #0891b2;
}

.image-canvas-editor__task-sidebar-item--running
  .image-canvas-editor__task-sidebar-item-icon
  svg {
  animation: image-canvas-task-sidebar-spin 0.9s linear infinite;
  transform-origin: center;
}

@keyframes image-canvas-task-sidebar-spin {
  to {
    transform: rotate(360deg);
  }
}

.image-canvas-editor__task-sidebar-item--failed
  .image-canvas-editor__task-sidebar-item-icon {
  background: #fef2f2;
  color: #dc2626;
}

.image-canvas-editor__task-sidebar-item--done
  .image-canvas-editor__task-sidebar-item-icon {
  background: #f0fdf4;
  color: #16a34a;
}

.image-canvas-editor__task-sidebar-item-main {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

.image-canvas-editor__task-sidebar-item-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: start;
  gap: 0.45rem;
}

.image-canvas-editor__task-sidebar-item-title {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__task-sidebar-item-detail {
  overflow: hidden;
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__task-sidebar-item-progress {
  overflow: hidden;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__task-sidebar-item-time {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.image-canvas-editor__task-sidebar-item-meta {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: 0.36rem;
}

.image-canvas-editor__task-sidebar-item-status {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.image-canvas-editor__panel-dock {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 18;
  display: inline-flex;
  gap: 0.35rem;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.35rem;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.image-canvas-editor__panel-dock--sidebar-open {
  bottom: 4.2rem;
}

.image-canvas-editor__panel-dock button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--image-canvas-brand-border-soft);
  border-radius: 0.45rem;
  background: #ffffff;
  color: #334155;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.image-canvas-editor__background-control {
  position: relative;
  display: inline-flex;
}

.image-canvas-editor__background-swatch-current,
.image-canvas-editor__background-swatch {
  display: block;
  border: 1px solid #94a3b8;
  border-radius: 999px;
}

.image-canvas-editor__background-swatch-current {
  width: 0.9rem;
  height: 0.9rem;
}

.image-canvas-editor__background-swatch {
  width: 1rem;
  height: 1rem;
}

.image-canvas-editor__background-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 24;
  display: grid;
  width: min(17.5rem, calc(100vw - 1.5rem));
  gap: 0.62rem;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 0.92rem;
  background: #ffffff;
  padding: 0.75rem;
  color: #1f2937;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.15);
}

.image-canvas-editor__background-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.15rem;
  font-size: 0.82rem;
  font-weight: 880;
}

.image-canvas-editor__background-current-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  background: #f8fafc;
  padding: 0.35rem 0.45rem;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 820;
}

.image-canvas-editor__background-current-preview {
  width: 1.24rem;
  height: 1.24rem;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.36rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.image-canvas-editor__background-close {
  display: inline-flex;
  width: 1.65rem;
  height: 1.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.42rem;
  background: transparent;
  color: #334155;
}

.image-canvas-editor__panel-dock .image-canvas-editor__background-panel button {
  width: auto;
  height: auto;
}

.image-canvas-editor__panel-dock
  .image-canvas-editor__background-panel
  .image-canvas-editor__background-spectrum {
  width: 100%;
  height: 7.6rem;
}

.image-canvas-editor__panel-dock
  .image-canvas-editor__background-panel
  .image-canvas-editor__background-hue {
  width: 100%;
  height: 0.78rem;
}

.image-canvas-editor__background-close:hover {
  border-color: #d7dfe9;
  background: #f8fafc;
}

.image-canvas-editor__panel-dock .image-canvas-editor__background-spectrum {
  position: relative;
  display: block;
  height: 7.6rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0.58rem;
  width: 100%;
  background: var(--image-canvas-background-hue-color, #ef4444);
  cursor: crosshair;
  padding: 0;
  touch-action: none;
}

.image-canvas-editor__background-spectrum-surface {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000000, transparent),
    linear-gradient(to right, #ffffff, transparent);
  pointer-events: none;
}

.image-canvas-editor__background-spectrum-handle {
  position: absolute;
  left: var(--image-canvas-background-spectrum-handle-left, 0.42rem);
  top: var(--image-canvas-background-spectrum-handle-top, 0.42rem);
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__panel-dock .image-canvas-editor__background-hue {
  position: relative;
  display: block;
  height: 0.78rem;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.72);
  cursor: pointer;
  padding: 0;
  touch-action: none;
}

.image-canvas-editor__background-hue-handle {
  position: absolute;
  left: var(--image-canvas-background-hue-handle-left, 0.39rem);
  top: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__background-spectrum:focus-visible,
.image-canvas-editor__background-hue:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.74);
  outline-offset: 2px;
}

.image-canvas-editor__background-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.02rem;
}

.image-canvas-editor__background-preset {
  display: inline-flex;
  width: 100%;
  height: 2.15rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.58rem;
  background: #f8fafc;
  padding: 0;
}

.image-canvas-editor__panel-dock .image-canvas-editor__background-preset {
  width: 100%;
  height: 2.15rem;
}

.image-canvas-editor__background-preset[aria-pressed='true'] {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
}

.image-canvas-editor__background-preset
  .image-canvas-editor__background-swatch {
  width: 1.55rem;
  height: 1.55rem;
  border-color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.image-canvas-editor__background-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.image-canvas-editor__background-hex-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.9rem;
  border-radius: 0.5rem;
  background: #f4f5f7;
  padding: 0 0.62rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 820;
}

.image-canvas-editor__background-hex-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 820;
  outline: none;
  text-transform: lowercase;
}

.image-canvas-editor__background-reset {
  display: inline-flex;
  height: 1.9rem;
  white-space: nowrap;
  align-items: center;
  gap: 0.34rem;
  border: 1px solid #d7dfe9;
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.34rem 0.55rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 820;
}

.image-canvas-editor__background-reset:hover {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__panel-dock button:hover,
.image-canvas-editor__panel-dock button[aria-pressed='true'] {
  transform: translateY(-1px);
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__panel-dock
  .image-canvas-editor__background-spectrum:hover,
.image-canvas-editor__panel-dock
  .image-canvas-editor__background-spectrum[aria-pressed='true'] {
  background: var(--image-canvas-background-hue-color, #ef4444);
}

.image-canvas-editor__panel-dock .image-canvas-editor__background-hue:hover,
.image-canvas-editor__panel-dock
  .image-canvas-editor__background-hue[aria-pressed='true'] {
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

.image-canvas-editor__bottom-toolbar {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 18;
  max-width: min(calc(100% - 6.6rem), 34rem);
  transform: translateX(-50%);
}

.image-canvas-editor__bottom-toolbar--guided {
  border-color: #ff4f4f;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.16),
    0 0 0 3px rgba(255, 79, 79, 0.24);
}

.image-canvas-editor__toolbar-guide {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  z-index: 12;
  width: min(38rem, calc(100% - 2rem));
  aspect-ratio: 2 / 1;
  color: #ffffff;
  pointer-events: none;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
}

.image-canvas-editor__toolbar-guide-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(112, 57, 30, 0.18));
}

.image-canvas-editor__toolbar-guide span {
  position: absolute;
  top: 32%;
  right: 10%;
  bottom: 26%;
  left: 32%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.15rem 0.9rem;
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 2px 7px rgba(127, 65, 25, 0.2);
}

.image-canvas-editor__bottom-toolbar-option-wrap,
.image-canvas-editor__spec-tool-wrap {
  position: relative;
  display: inline-flex;
}

.image-canvas-editor__spec-menu {
  min-width: 8.8rem;
}

.image-canvas-editor__portal-menu {
  z-index: 70;
}

.image-canvas-editor__spec-menu-item {
  font-weight: 850;
  white-space: nowrap;
}

.image-canvas-editor__generation-composer {
  position: absolute;
  z-index: 13;
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  grid-template-rows: minmax(5.9rem, auto) auto auto;
  width: min(38rem, calc(100% - 1.5rem));
  min-height: 10.4rem;
  gap: 0.38rem 0.72rem;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 1.45rem;
  background: rgba(255, 255, 255, 0.97);
  padding: 0.72rem 0.82rem 0.58rem;
  color: #1f2937;
  font-size: 0.82rem;
  box-shadow:
    0 22px 60px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.image-canvas-editor__generation-composer--image {
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  width: min(42rem, calc(100% - 1.5rem));
  gap: 0.18rem 0.72rem;
}

.image-canvas-editor__generation-composer--video {
  grid-template-rows: auto auto auto;
  gap: 0.18rem 0.72rem;
}

.image-canvas-editor__generation-composer--character-animation {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  width: min(42rem, calc(100% - 1.5rem));
}

.image-canvas-editor__generation-ref {
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  align-self: start;
  grid-column: 1 / -1;
}

.image-canvas-editor__generation-ref span {
  margin-top: 0;
}

.image-canvas-editor__generation-prompt {
  --auto-grow-editor-radius: 1.05rem;
  --auto-grow-editor-min-height: 3.35rem;
  --auto-grow-editor-padding: 0.52rem 0.82rem;
  grid-column: 1 / -1;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--auto-grow-editor-radius);
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.48;
  outline: none;
}

.image-canvas-editor__generation-prompt:focus-within,
.image-canvas-editor__video-prompt:focus {
  border-color: var(--image-canvas-brand-border-strong);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);
}

.image-canvas-editor__generation-prompt .auto-grow-text-area__placeholder {
  color: #94a3b8;
}

.image-canvas-editor__generation-prompt:has(
    .auto-grow-text-area__content[aria-invalid='true']
  ) {
  border-color: #e11d48;
  background: #fff7f8;
}

.image-canvas-editor__generation-prompt:has(
    .auto-grow-text-area__content[aria-invalid='true']
  ):focus-within {
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

.image-canvas-editor__scene-field-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.02rem 0.82rem 0.12rem;
  color: #be123c;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.image-canvas-editor__video-prompt {
  grid-column: 1 / -1;
  min-height: 4.1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.05rem;
  background: #f8fafc;
  padding: 0.64rem 0.9rem;
}

.image-canvas-editor__generation-composer-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    max-content minmax(0, 1fr)
    max-content max-content max-content;
  align-items: center;
  gap: 0.1rem;
  justify-content: start;
  position: relative;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 0.44rem;
}

.image-canvas-editor__generation-composer
  .image-canvas-editor__generation-composer-footer {
  padding-top: 1.1rem;
}

.image-canvas-editor__generation-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 800;
}

.image-canvas-editor__generation-ratio {
  justify-self: start;
  gap: 0.2rem;
}

.image-canvas-editor__generation-model {
  gap: 0.25rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__inline-option-group {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.image-canvas-editor__reference-strip {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  align-items: center;
  gap: 0.36rem;
  overflow-x: auto;
  padding: 0 2.2rem 0.02rem 0;
  scrollbar-width: thin;
}

.image-canvas-editor__reference-slot {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 3.95rem;
  height: 3.95rem;
}

.image-canvas-editor__reference-chip {
  position: relative;
  display: inline-grid;
  width: 3.95rem;
  min-width: 3.95rem;
  max-width: 3.95rem;
  height: 3.95rem;
  min-height: 3.95rem;
  grid-template-rows: 1.42rem auto;
  align-items: center;
  justify-items: center;
  gap: 0.28rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: #f2f3f5;
  padding: 0.62rem 0.36rem 0.5rem;
  color: #a3a8ae;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.04;
  text-align: center;
  box-shadow: none;
}

button.image-canvas-editor__reference-chip {
  cursor: pointer;
}

button.image-canvas-editor__reference-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.22);
  background: #eef0f2;
}

button.image-canvas-editor__reference-chip:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.image-canvas-editor__reference-chip-icon {
  display: grid;
  width: 1.42rem;
  height: 1.42rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 0.36rem;
  background: transparent;
  color: currentColor;
}

.image-canvas-editor__reference-chip-icon img {
  width: 100%;
  height: 100%;
  border-radius: 0.36rem;
  object-fit: cover;
}

.image-canvas-editor__reference-chip-label {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
}

.image-canvas-editor__reference-chip-source-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.image-canvas-editor__reference-chip-remove {
  position: absolute;
  top: 0.16rem;
  right: 0.16rem;
  z-index: 2;
  display: grid;
  width: 1.12rem;
  height: 1.12rem;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  opacity: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  transform: scale(0.88);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.image-canvas-editor__reference-chip-remove--always-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.image-canvas-editor__reference-slot:hover
  .image-canvas-editor__reference-chip-remove,
.image-canvas-editor__reference-slot:focus-within
  .image-canvas-editor__reference-chip-remove {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

@media (hover: none) {
  .image-canvas-editor__reference-chip-remove {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

.image-canvas-editor__reference-chip-remove:disabled {
  cursor: not-allowed;
  opacity: 0;
  pointer-events: none;
}

.image-canvas-editor__reference-chip-remove:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.95);
}

.image-canvas-editor__reference-chip--has-image
  .image-canvas-editor__reference-chip-icon {
  width: 1.74rem;
  height: 1.74rem;
  border-radius: 0.48rem;
}

.image-canvas-editor__reference-chip--has-image
  .image-canvas-editor__reference-chip-icon
  img {
  border-radius: 0.48rem;
}

.image-canvas-editor__reference-chip--spec
  .image-canvas-editor__reference-chip-icon {
  color: #8b5cf6;
}

.image-canvas-editor__reference-chip--icon
  .image-canvas-editor__reference-chip-icon {
  color: #059669;
}

.image-canvas-editor__reference-chip--ui
  .image-canvas-editor__reference-chip-icon {
  color: #d97706;
}

.image-canvas-editor__reference-chip--character
  .image-canvas-editor__reference-chip-icon {
  color: #0f172a;
}

.image-canvas-editor__reference-chip--quick-edit {
  background: #f3f4f6;
  color: #9ca3af;
}

.image-canvas-editor__reference-chip--quick-edit
  .image-canvas-editor__reference-chip-icon {
  color: #9ca3af;
}

.image-canvas-editor__reference-chip--video
  .image-canvas-editor__reference-chip-icon {
  color: #2563eb;
}

.image-canvas-editor__reference-chip--audio
  .image-canvas-editor__reference-chip-icon {
  color: #7c3aed;
}

.image-canvas-editor__option-picker {
  width: 100%;
  min-height: 2rem;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  background: transparent;
  padding: 0 0.6rem;
  color: #0f172a;
  box-shadow: none;
}

.image-canvas-editor__option-cluster {
  min-height: 2.25rem;
  height: 2.25rem;
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0 0.72rem;
  color: #0f172a;
  box-shadow: none;
}

.image-canvas-editor__option-cluster .platform-inline-option-button__label {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
}

.image-canvas-editor__option-cluster:hover:not(:disabled),
.image-canvas-editor__option-cluster[aria-expanded='true'] {
  border-color: rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.image-canvas-editor__option-cluster .platform-inline-option-button__trailing {
  transition: transform 160ms ease;
}

.image-canvas-editor__option-cluster[aria-expanded='true']
  .platform-inline-option-button__trailing {
  transform: rotate(180deg);
}

.image-canvas-editor__option-cluster--dimensions {
  grid-column: auto;
  justify-self: start;
  gap: 0.42rem;
}

.image-canvas-editor__option-cluster--dimensions span {
  font-variant-numeric: tabular-nums;
}

.image-canvas-editor__option-cluster--model {
  max-width: 8.5rem;
  justify-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__option-popover-anchor {
  position: relative;
  min-width: 0;
}

.image-canvas-editor__option-popover-anchor--dimensions {
  grid-column: 1;
  justify-self: start;
  width: max-content;
}

.image-canvas-editor__option-popover-anchor--model {
  grid-column: 4;
  justify-self: end;
  width: 8.5rem;
}

.image-canvas-editor__image-style-toggle {
  grid-column: 3;
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-self: end;
  gap: 0.38rem;
  padding: 0 0.5rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
}

.image-canvas-editor__image-style-toggle input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--image-canvas-brand-fill);
}

.image-canvas-editor__image-style-toggle:has(input:disabled) {
  color: #94a3b8;
  cursor: wait;
}

.image-canvas-editor__model-trigger-label {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__model-trigger-label svg,
.image-canvas-editor__model-icon svg {
  width: 0.88rem;
  height: 0.88rem;
}

.image-canvas-editor__model-trigger-label span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__model-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #334155;
}

.image-canvas-editor__option-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 3;
  min-width: 16rem;
  max-width: min(23rem, calc(100vw - 1.5rem));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.98);
  padding: 1.78rem 0.95rem 0.95rem;
  color: #111827;
  font-size: 0.82rem;
  box-shadow:
    0 22px 56px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.image-canvas-editor__option-popover-anchor--model
  .image-canvas-editor__option-popover {
  right: 0;
  left: auto;
}

.image-canvas-editor__option-popover-close {
  position: absolute;
  right: 0.54rem;
  top: 0.5rem;
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
}

.image-canvas-editor__option-popover-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.image-canvas-editor__option-popover-sections {
  display: grid;
  gap: 1rem;
}

.image-canvas-editor__option-popover-section {
  display: grid;
  gap: 0.58rem;
}

.image-canvas-editor__option-popover-title {
  color: #2f2f35;
  font-size: 0.82rem;
  font-weight: 760;
}

.image-canvas-editor__option-popover-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.image-canvas-editor__option-popover-items--card {
  gap: 0.62rem;
}

.image-canvas-editor__option-popover:has(
    .image-canvas-editor__option-popover-choice--model
  ) {
  min-width: 13.5rem;
}

.image-canvas-editor__option-popover-choice {
  display: inline-flex;
  min-width: 4.5rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 0.85rem;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 720;
}

.image-canvas-editor__option-popover-items--card
  .image-canvas-editor__option-popover-choice {
  min-width: 5.25rem;
  min-height: 4.6rem;
  border-radius: 1rem;
  font-size: 0.82rem;
}

.image-canvas-editor__option-popover-choice[aria-pressed='true'] {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
  box-shadow: inset 0 0 0 1px var(--image-canvas-brand-border-strong);
}

.image-canvas-editor__option-popover--audio-options {
  display: grid;
  min-width: 16.4rem;
  gap: 0.72rem;
  padding: 0.88rem;
}

.image-canvas-editor__audio-bpm-control {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 4.7rem;
  align-items: center;
  gap: 0.56rem;
}

.image-canvas-editor__audio-bpm-control input[type='range'] {
  width: 100%;
  accent-color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__video-duration-slider {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 3.6rem;
  align-items: center;
  gap: 0.56rem;
}

.image-canvas-editor__video-duration-slider input[type='range'] {
  width: 100%;
  accent-color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__video-duration-slider span {
  color: var(--image-canvas-brand-accent-strong);
  font-size: 0.82rem;
  font-weight: 760;
  text-align: right;
}

.image-canvas-editor__video-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.image-canvas-editor__video-toggle {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.48rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 0.78rem;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 760;
}

.image-canvas-editor__video-toggle span {
  position: relative;
  width: 1.7rem;
  height: 0.96rem;
  border-radius: 999px;
  background: #cbd5e1;
}

.image-canvas-editor__video-toggle span::after {
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 999px;
  background: #ffffff;
  content: '';
  transition: transform 0.16s ease;
}

.image-canvas-editor__video-toggle[aria-pressed='true'] {
  border-color: var(--image-canvas-brand-border-strong);
  box-shadow: inset 0 0 0 1px var(--image-canvas-brand-border-strong);
}

.image-canvas-editor__video-toggle[aria-pressed='true'] span {
  background: var(--image-canvas-brand-accent);
}

.image-canvas-editor__video-toggle[aria-pressed='true'] span::after {
  transform: translateX(0.74rem);
}

.image-canvas-editor__audio-bpm-control input[type='number'] {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #f8fafc;
  padding: 0.46rem 0.62rem;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 760;
  outline: none;
}

.image-canvas-editor__audio-bpm-control input[type='number']:focus {
  border-color: var(--image-canvas-brand-border-strong);
  box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);
}

.image-canvas-editor__option-popover-choice--model {
  display: grid;
  width: 100%;
  grid-template-columns: 1rem minmax(0, 1fr) 1rem;
  justify-content: stretch;
  column-gap: 0.44rem;
  border-color: transparent;
  background: transparent;
  padding: 0.18rem 0.2rem;
  text-align: left;
  white-space: nowrap;
}

.image-canvas-editor__option-popover-choice--model span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__option-popover-choice--model
  .image-canvas-editor__model-icon {
  justify-self: start;
}

.image-canvas-editor__option-popover-choice--model[aria-pressed='true'] {
  border-color: transparent;
  box-shadow: none;
}

.image-canvas-editor__option-popover-choice--model:hover {
  background: #f8fafc;
}

.image-canvas-editor__option-selected-check {
  width: 0.92rem;
  height: 0.92rem;
  justify-self: end;
  color: var(--image-canvas-brand-accent-strong);
  stroke-width: 3;
}

.image-canvas-editor__option-selected-check[data-visible='false'] {
  opacity: 0;
}

.image-canvas-editor__option-popover-choice--ratio {
  flex-direction: column;
  gap: 0.42rem;
}

.image-canvas-editor__ratio-wireframe {
  display: block;
  width: 1.65rem;
  height: 1.08rem;
  border: 2px solid currentColor;
  border-radius: 0.24rem;
}

.image-canvas-editor__ratio-wireframe[data-ratio='21:9'] {
  width: 1.9rem;
  height: 0.84rem;
}

.image-canvas-editor__ratio-wireframe[data-ratio='9:16'] {
  width: 1.02rem;
  height: 1.74rem;
}

.image-canvas-editor__ratio-wireframe[data-ratio='3:4'],
.image-canvas-editor__ratio-wireframe[data-ratio='2:3'] {
  width: 1.12rem;
  height: 1.58rem;
}

.image-canvas-editor__ratio-wireframe[data-ratio='4:3'],
.image-canvas-editor__ratio-wireframe[data-ratio='3:2'] {
  width: 1.74rem;
  height: 1.16rem;
}

.image-canvas-editor__ratio-wireframe[data-ratio='1:1'] {
  width: 1.36rem;
  height: 1.36rem;
}

.image-canvas-editor__mud-point-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  color: currentColor;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
}

.image-canvas-editor__mud-point-inline svg {
  width: 0.88rem;
  height: 0.88rem;
}

.image-canvas-editor__generation-composer .image-canvas-editor__option-field {
  min-width: 0;
}

.image-canvas-editor__generation-composer .image-canvas-editor__field-title {
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.image-canvas-editor__generation-composer .platform-inline-option-button {
  min-height: 2.25rem;
  border-color: transparent;
  background: transparent;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 760;
  box-shadow: none;
}

/*
 * 开启态按设计稿取淡橙底 + 橙字 + 橙描边，不用实心橙底配近白文字：实底方案在通用 hover
 * 把底色换成 #f8fafc 后会变成白底白字。hover 变体必须一并写死，否则通用 hover 的
 * `background` 简写仍会把淡橙底洗掉；阴影仍由通用规则提供，悬停反馈不丢。
 */
.image-canvas-editor__generation-composer
  .platform-inline-option-button[aria-pressed='true'],
.image-canvas-editor__generation-composer
  .platform-inline-option-button[aria-pressed='true']:hover:not(:disabled) {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__generation-submit {
  grid-column: 5;
  min-width: 5.45rem;
  height: 2.25rem;
  gap: 0.4rem;
  border: 0;
  background: var(--image-canvas-brand-fill);
  color: var(--image-canvas-brand-text-on-fill);
  font-size: 0.82rem;
  font-weight: 820;
}

.image-canvas-editor__generation-submit:not(:disabled) {
  color: var(--image-canvas-brand-text-on-fill);
}

.image-canvas-editor__generation-submit:disabled {
  cursor: wait;
  background: #e2e8f0;
  color: #94a3b8;
}

.image-canvas-editor__generation-close {
  position: absolute;
  right: 0.62rem;
  top: 0.58rem;
  width: 2rem;
  height: 2rem;
  color: #94a3b8;
}

.image-canvas-editor__generation-composer
  .image-canvas-editor__generate-status {
  grid-column: 1 / -1;
}

.image-canvas-editor__character-composer {
  position: absolute;
  z-index: 13;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(5.1rem, auto) auto auto;
  width: min(42rem, calc(100% - 1.5rem));
  min-height: 10.4rem;
  gap: 0.5rem;
  border: 1px solid #cfd6df;
  border-radius: 1.35rem;
  background: #ffffff;
  padding: 0.62rem 0.7rem 0.44rem;
  color: #1f2937;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
  transform: translateX(-50%);
}

.image-canvas-editor__character-composer
  .image-canvas-editor__generation-prompt {
  --auto-grow-editor-min-height: 5.1rem;
  --auto-grow-editor-padding: 0.42rem 0.82rem 0.52rem;
}

.image-canvas-editor__character-composer
  .image-canvas-editor__generation-composer-footer,
.image-canvas-editor__character-composer .image-canvas-editor__generate-status {
  grid-column: 1 / -1;
}

.image-canvas-editor__publication-composer {
  grid-template-rows: auto auto auto;
}

.image-canvas-editor__publication-composer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.46rem 0.52rem;
  min-width: 0;
}

.image-canvas-editor__publication-composer-summary,
.image-canvas-editor__publication-description-field {
  grid-column: 1 / -1;
}

.image-canvas-editor__publication-composer-summary {
  display: flex;
  min-height: 1.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.image-canvas-editor__publication-composer-summary strong {
  color: #111827;
  font-size: 0.78rem;
  font-weight: 860;
  white-space: nowrap;
}

.image-canvas-editor__publication-input {
  min-height: 1.96rem;
}

.image-canvas-editor__publication-description {
  --auto-grow-editor-min-height: 4rem;
}

.image-canvas-editor__publication-composer
  .image-canvas-editor__generation-composer-footer {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.image-canvas-editor__publication-composer
  .image-canvas-editor__option-popover-anchor--model {
  grid-column: 2;
}

.image-canvas-editor__publication-composer
  .image-canvas-editor__generation-submit {
  grid-column: 3;
}

.image-canvas-editor__icon-composer {
  position: absolute;
  z-index: 13;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(5.1rem, auto) auto auto;
  width: min(42rem, calc(100% - 1.5rem));
  min-height: 10.4rem;
  gap: 0.5rem;
  border: 1px solid #cfd6df;
  border-radius: 1.35rem;
  background: #ffffff;
  padding: 0.62rem 0.7rem 0.44rem;
  color: #1f2937;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
  transform: translateX(-50%);
}

.image-canvas-editor__icon-composer .image-canvas-editor__generation-prompt {
  --auto-grow-editor-min-height: 5.1rem;
  --auto-grow-editor-padding: 0.42rem 0.82rem 0.52rem;
}

.image-canvas-editor__character-composer
  .image-canvas-editor__generation-composer-footer,
.image-canvas-editor__icon-composer
  .image-canvas-editor__generation-composer-footer {
  padding-top: 0.96rem;
}

.image-canvas-editor__icon-spec-card:disabled {
  cursor: wait;
  opacity: 0.68;
}

.image-canvas-editor__field-block {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.image-canvas-editor__field-title {
  margin-bottom: 0;
}

.image-canvas-editor__option-field {
  display: grid;
  gap: 0.3rem;
}

.image-canvas-editor__character-reference-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.image-canvas-editor__character-reference-field--spec {
  flex: 0 0 9.2rem;
}

.image-canvas-editor__character-reference-field--regular {
  flex: 1 1 auto;
}

.image-canvas-editor__character-reference-list {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  overflow-x: auto;
  padding: 0.02rem 0 0.08rem;
  scrollbar-width: thin;
}

.image-canvas-editor__character-reference-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  overflow-x: auto;
  padding: 0.02rem 2.2rem 0.08rem 0;
  scrollbar-width: thin;
}

.image-canvas-editor__character-spec-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.image-canvas-editor__character-spec-ref,
.image-canvas-editor__character-reference-add {
  display: inline-flex;
  min-width: 4.25rem;
  height: 3.55rem;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c7d2fe;
  border-radius: 0.9rem;
  background: #f8fafc;
  padding: 0 0.58rem;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
  box-shadow: none;
}

.image-canvas-editor__character-spec-ref {
  min-width: 6rem;
  border-style: solid;
  border-color: rgba(147, 51, 234, 0.24);
  background: #faf5ff;
  color: #6b21a8;
}

.image-canvas-editor__character-spec-ref:hover,
.image-canvas-editor__character-reference-add:hover {
  transform: translateY(-1px);
  border-color: #a78bfa;
  background: #f5f3ff;
  color: #5b21b6;
}

.image-canvas-editor__character-spec-ref:disabled,
.image-canvas-editor__character-reference-add:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.image-canvas-editor__character-spec-menu {
  min-width: 9.4rem;
  z-index: 24;
}

.image-canvas-editor__character-reference-add {
  min-width: 3.55rem;
  color: #64748b;
}

.image-canvas-editor__reference-tile {
  display: inline-grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-width: 8.4rem;
  height: 3.75rem;
  align-items: center;
  justify-content: start;
  gap: 0.48rem;
  border-radius: 1.05rem;
  padding: 0.34rem 0.62rem 0.34rem 0.4rem;
  text-align: left;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.image-canvas-editor__reference-tile--spec {
  max-width: 12rem;
  border: 1px solid rgba(147, 51, 234, 0.22);
  background: radial-gradient(
      circle at 18% 20%,
      rgba(216, 180, 254, 0.42),
      transparent 38%
    ),
    linear-gradient(135deg, #fff7ff 0%, #f8fafc 100%);
  color: #5b21b6;
}

.image-canvas-editor__reference-tile--upload {
  max-width: 11.6rem;
  border: 1px dashed rgba(75, 181, 170, 0.46);
  background: radial-gradient(
      circle at 18% 20%,
      rgba(153, 246, 228, 0.42),
      transparent 38%
    ),
    linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
  color: #0f766e;
}

.image-canvas-editor__reference-tile-visual {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  overflow: hidden;
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.82);
  color: currentColor;
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.18),
    0 8px 18px rgba(15, 23, 42, 0.08);
}

.image-canvas-editor__reference-tile-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-canvas-editor__reference-tile-copy {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__character-ref-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1.05rem;
  background: #f1f5f9;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.image-canvas-editor__character-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-canvas-editor__character-ref-index {
  position: absolute;
  right: 0.24rem;
  bottom: 0.22rem;
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
}

.image-canvas-editor__canvas-pick-hint {
  position: absolute;
  left: 50%;
  top: 4.1rem;
  z-index: 15;
  max-width: min(30rem, calc(100% - 1.5rem));
  border: 1px solid rgba(147, 51, 234, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.48rem 0.78rem;
  color: #581c87;
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 14px 34px rgba(88, 28, 135, 0.16);
  transform: translateX(-50%);
  pointer-events: none;
}

.image-canvas-editor__spec-composer {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.image-canvas-editor__spec-composer.image-canvas-editor__generation-composer--image {
  grid-template-rows: auto auto auto;
}

.image-canvas-editor__spec-fields {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.28rem;
}

.image-canvas-editor__spec-input {
  min-height: 1.96rem;
}

.image-canvas-editor__spec-input::placeholder {
  color: #94a3b8;
}

.image-canvas-editor__spec-textarea {
  --auto-grow-editor-min-height: 3.8rem;
}

.image-canvas-editor__spec-textarea--view {
  min-height: 3.1rem;
}

.image-canvas-editor__spec-composer .image-canvas-editor__field-block {
  gap: 0.24rem;
}

.image-canvas-editor__readonly-generation-option
  .image-canvas-editor__option-cluster:disabled {
  cursor: default;
  opacity: 1;
  color: #475569;
  pointer-events: none;
}

.image-canvas-editor__readonly-generation-option
  .image-canvas-editor__option-cluster:disabled:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.image-canvas-editor__context-menu {
  position: fixed;
  z-index: 35;
  display: grid;
  width: 11.75rem;
  gap: 0.12rem;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.32rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  color: #1f2937;
}

.image-canvas-editor__context-menu button {
  display: flex;
  width: 100%;
  min-height: 1.82rem;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 0.34rem;
  background: transparent;
  padding: 0 0.55rem;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 820;
  text-align: left;
  white-space: nowrap;
}

.image-canvas-editor__context-menu button:hover:not(:disabled) {
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__context-menu button:disabled {
  cursor: not-allowed;
  color: #a3acba;
}

.image-canvas-editor__context-submenu {
  position: relative;
}

.image-canvas-editor__context-submenu-trigger {
  justify-content: space-between !important;
  gap: 0.85rem;
}

.image-canvas-editor__context-submenu-panel {
  top: -0.32rem;
  left: calc(100% + 0.42rem);
  width: max-content;
  min-width: 9.5rem;
  overflow: visible;
  padding: 0.32rem;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.12rem);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms linear;
  visibility: hidden;
}

.image-canvas-editor__context-menu--submenu-left
  .image-canvas-editor__context-submenu-panel {
  right: calc(100% + 0.42rem);
  left: auto;
  transform: translateX(0.12rem);
}

.image-canvas-editor__context-menu--submenu-up
  .image-canvas-editor__context-submenu-panel {
  top: auto;
  bottom: -0.32rem;
}

.image-canvas-editor__context-submenu:hover
  .image-canvas-editor__context-submenu-panel,
.image-canvas-editor__context-submenu:focus-within
  .image-canvas-editor__context-submenu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

.image-canvas-editor__context-submenu-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.55rem;
  width: 0.55rem;
  content: '';
}

.image-canvas-editor__context-menu--submenu-left
  .image-canvas-editor__context-submenu-panel::before {
  right: -0.55rem;
  left: auto;
}

.image-canvas-editor__asset-context-menu {
  z-index: 42;
}

.image-canvas-editor__asset-context-menu
  button.image-canvas-editor__asset-context-menu-toggle {
  min-height: 2.2rem;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  white-space: normal;
}

.image-canvas-editor__asset-context-menu-label {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.12rem;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}

.image-canvas-editor__asset-context-menu-reason {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 680;
  line-height: 1.2;
}

.image-canvas-editor__asset-context-menu
  button:disabled
  .image-canvas-editor__asset-context-menu-reason {
  color: #94a3b8;
}

.image-canvas-editor__asset-context-menu-check {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.image-canvas-editor__context-menu hr {
  width: 100%;
  height: 1px;
  margin: 0.18rem 0;
  border: 0;
  background: #e2e8f0;
}

.image-canvas-editor__context-menu-item {
  font-weight: 850;
  white-space: nowrap;
}

.image-canvas-editor__context-menu-danger {
  color: #b42318 !important;
}

.image-canvas-editor__context-menu-danger:hover:not(:disabled) {
  background: #fff1f2 !important;
  color: #991b1b !important;
}

.image-canvas-editor__quick-edit-panel,
.image-canvas-editor__crop-expand-panel {
  position: absolute;
  z-index: 14;
  display: grid;
  width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100% - 1.5rem));
  gap: 0.58rem;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.72rem;
  color: #1f2937;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
  transform: translateX(-50%);
}

.image-canvas-editor__quick-edit-panel.image-canvas-editor__generation-composer {
  width: min(42rem, calc(100vw - 1.5rem));
  gap: 0.18rem 0.72rem;
  padding-bottom: 0.48rem;
}

.image-canvas-editor__generation-composer--quick-edit {
  min-height: 11.8rem;
}

.image-canvas-editor__quick-edit-footer {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.image-canvas-editor__quick-edit-panel
  .image-canvas-editor__generation-composer-footer {
  padding-top: 1rem;
}

.image-canvas-editor__quick-edit-footer
  .image-canvas-editor__option-popover-anchor--model {
  grid-column: 3;
  width: 9.75rem;
}

.image-canvas-editor__quick-edit-footer
  .image-canvas-editor__option-cluster--model {
  width: 100%;
  max-width: none;
}

.image-canvas-editor__quick-edit-footer
  .image-canvas-editor__generation-submit {
  grid-column: 4;
}

.image-canvas-editor__crop-expand-panel {
  width: min(18.5rem, calc(100vw - 1.5rem));
  transform: none;
}

.image-canvas-editor__ui-extraction-toolbar {
  position: absolute;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid #d9dee8;
  border-radius: 0.5rem;
  background: #ffffff;
  padding: 0.35rem;
  color: #334155;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
  transform: translate(-50%, -100%);
}

.image-canvas-editor__ui-extraction-toolbar--right {
  flex-direction: column;
  transform: translate(0, -50%);
}

.image-canvas-editor__ui-extraction-toolbar button {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #d9dee8;
  border-radius: 0.45rem;
  background: #ffffff;
  color: #334155;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.image-canvas-editor__ui-extraction-toolbar button:hover {
  transform: translateY(-1px);
  border-color: #8fb8ff;
  background: #eef5ff;
  color: #1d4ed8;
}

.image-canvas-editor__ui-extraction-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0 0.34rem;
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.image-canvas-editor__ui-extraction-toolbar
  button.image-canvas-editor__ui-extraction-tool--active,
.image-canvas-editor__ui-extraction-toolbar button[aria-pressed='true'] {
  border-color: #38bdf8;
  background: #e0f2fe;
  color: #0369a1;
}

.image-canvas-editor__ui-extraction-count {
  display: inline-flex;
  min-width: 1.45rem;
  height: 1.45rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
}

.image-canvas-editor__ui-extraction-overlay {
  position: absolute;
  z-index: 50;
  cursor: crosshair;
  touch-action: none;
}

.image-canvas-editor__ui-extraction-panel {
  z-index: 49;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(4.8rem, auto) auto;
  min-height: 10.4rem;
}

.image-canvas-editor__ui-extraction-panel-head {
  grid-column: 1 / -1;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 850;
}

.image-canvas-editor__ui-extraction-preview-list {
  grid-column: 1 / -1;
  display: flex;
  min-height: 4.8rem;
  gap: 0.46rem;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1rem;
  background: #f8fafc;
  padding: 0.46rem;
}

.image-canvas-editor__ui-extraction-preview {
  position: relative;
  width: 4.8rem;
  min-width: 4.8rem;
  height: 4.8rem;
  overflow: hidden;
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: 0.88rem;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76);
}

.image-canvas-editor__ui-extraction-preview img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.image-canvas-editor__ui-extraction-preview span {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  display: inline-flex;
  width: 1.24rem;
  height: 1.24rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.image-canvas-editor__ui-extraction-preview-empty {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 760;
}

.image-canvas-editor__ui-extraction-panel-footer {
  grid-column: 1 / -1;
}

.image-canvas-editor__ui-extraction-panel
  .image-canvas-editor__readonly-generation-option {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.72rem;
  background: transparent;
  padding: 0 0.66rem;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.image-canvas-editor__ui-extraction-model {
  grid-column: 4;
  justify-self: end;
  width: min(15.5rem, 42vw);
}

.image-canvas-editor__ui-extraction-model .image-canvas-editor__option-cluster {
  width: 100%;
}

.image-canvas-editor__ui-extraction-hit-area {
  fill: transparent;
}

.image-canvas-editor__ui-extraction-mark {
  fill: rgba(255, 43, 43, 0.08);
  stroke: #ff2b2b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.image-canvas-editor__ui-extraction-mark-label circle {
  fill: #ff2b2b;
  stroke: #ffffff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.image-canvas-editor__ui-extraction-mark-label text {
  fill: #ffffff;
  font-size: 16px;
  font-weight: 900;
  dominant-baseline: central;
  pointer-events: none;
  text-anchor: middle;
}

.image-canvas-editor__ui-extraction-error {
  position: absolute;
  z-index: 51;
  max-width: min(24rem, calc(100vw - 2rem));
  border-radius: 0.7rem;
  background: rgba(127, 29, 29, 0.92);
  padding: 0.48rem 0.68rem;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.35;
  box-shadow: 0 14px 30px rgba(127, 29, 29, 0.24);
  transform: translateX(-50%);
}

.image-canvas-editor__crop-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0f172a;
  font-size: 0.92rem;
}

.image-canvas-editor__crop-expand-ratios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

.image-canvas-editor__crop-expand-ratio {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.46rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.72rem;
  background: rgba(248, 250, 252, 0.92);
  padding: 0 0.56rem;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 850;
}

.image-canvas-editor__crop-expand-ratio:hover {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__crop-expand-ratio--selected {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft-strong);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__crop-expand-ratio-shape {
  width: 1.08rem;
  height: 0.82rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 0.2rem;
  opacity: 0.84;
}

.image-canvas-editor__crop-expand-ratio-shape--square {
  width: 0.9rem;
  height: 0.9rem;
}

.image-canvas-editor__crop-expand-ratio-shape--landscape {
  width: 1.22rem;
  height: 0.76rem;
}

.image-canvas-editor__crop-expand-ratio-shape--portrait {
  width: 0.76rem;
  height: 1.22rem;
}

.image-canvas-editor__crop-expand-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.58rem;
}

.image-canvas-editor__quick-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.image-canvas-editor__quick-edit-reference {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 850;
}

.image-canvas-editor__quick-edit-reference img {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 0.72rem;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.image-canvas-editor__quick-edit-reference span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__quick-edit-prompt {
  --auto-grow-editor-min-height: 5.6rem;
}

.image-canvas-editor__quick-edit-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.image-canvas-editor__quick-edit-submit {
  justify-self: end;
  min-width: 6.8rem;
}

.image-canvas-editor__crop-expand-error {
  margin: 0;
  border-radius: 0.72rem;
  background: #fff1f2;
  padding: 0.48rem 0.62rem;
  color: #be123c;
  font-size: 0.74rem;
  font-weight: 800;
}

.image-canvas-editor__crop-expand-frame {
  position: absolute;
  z-index: 999;
  box-sizing: border-box;
  border: 2px solid var(--image-canvas-brand-accent);
  background: linear-gradient(
      90deg,
      rgba(204, 117, 76, 0.2) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(204, 117, 76, 0.2) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  box-shadow:
    0 0 0 99999px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
  pointer-events: none;
}

.image-canvas-editor__crop-expand-source-mask {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.image-canvas-editor__crop-expand-handle {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--image-canvas-brand-accent);
  box-shadow: 0 6px 16px var(--image-canvas-brand-shadow);
  pointer-events: auto;
  touch-action: none;
}

.image-canvas-editor__crop-expand-handle::before {
  position: absolute;
  inset: -0.7rem;
  content: '';
}

.image-canvas-editor__crop-expand-handle--top-left {
  top: 0;
  left: 0;
  cursor: nwse-resize;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__crop-expand-handle--top {
  top: 0;
  left: 50%;
  cursor: ns-resize;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__crop-expand-handle--top-right {
  top: 0;
  right: 0;
  cursor: nesw-resize;
  transform: translate(50%, -50%);
}

.image-canvas-editor__crop-expand-handle--right {
  top: 50%;
  right: 0;
  cursor: ew-resize;
  transform: translate(50%, -50%);
}

.image-canvas-editor__crop-expand-handle--bottom-right {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  transform: translate(50%, 50%);
}

.image-canvas-editor__crop-expand-handle--bottom {
  bottom: 0;
  left: 50%;
  cursor: ns-resize;
  transform: translate(-50%, 50%);
}

.image-canvas-editor__crop-expand-handle--bottom-left {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
  transform: translate(-50%, 50%);
}

.image-canvas-editor__crop-expand-handle--left {
  top: 50%;
  left: 0;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
}

.image-canvas-editor__character-animation-panel {
  position: absolute;
  z-index: 14;
  display: grid;
  width: min(42rem, calc(100vw - 1.5rem));
  max-height: min(34rem, calc(100% - 1.5rem));
  gap: 0.58rem;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.76rem;
  font-size: 0.82rem;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
}

.image-canvas-editor__character-animation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #1f2937;
  font-size: 0.9rem;
}

.image-canvas-editor__character-animation-textarea {
  grid-column: 1 / -1;
  --auto-grow-editor-min-height: 8rem;
  --auto-grow-editor-max-height: 16rem;
}

.image-canvas-editor__character-animation-presets {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.image-canvas-editor__character-animation-preset {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: #f8fafc;
  padding: 0.34rem 0.58rem;
  color: #334155;
  font-size: 0.78rem;
}

.image-canvas-editor__character-animation-footer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.46rem;
}

.image-canvas-editor__character-animation-submit {
  grid-column: 3;
  min-width: 5.45rem;
  height: 2.25rem;
  gap: 0.4rem;
  border: 0;
  background: var(--image-canvas-brand-fill);
  color: var(--image-canvas-brand-text-on-fill);
}

.image-canvas-editor__snap-guide {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  background: #4bb5aa;
  box-shadow: 0 0 0 1px rgba(75, 181, 170, 0.28);
}

.image-canvas-editor__snap-guide--vertical {
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-1px);
}

.image-canvas-editor__snap-guide--horizontal {
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-1px);
}

.image-canvas-editor__generate-dialog {
  color: #1f2937;
}

.image-canvas-editor__metadata-dialog {
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.image-canvas-editor__metadata-body {
  padding: 0;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.image-canvas-editor__generate-dialog-body {
  padding: 0;
}

.image-canvas-editor__generate-form {
  display: grid;
}

.image-canvas-editor__generate-body {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem;
}

.image-canvas-editor__generate-prompt {
  --auto-grow-editor-radius: 0.45rem;
  --auto-grow-editor-min-height: 7rem;
  --auto-grow-editor-padding: 0.7rem;
  border: 1px solid #d9dee8;
  border-radius: var(--auto-grow-editor-radius);
  background: #f8fafc;
  color: #1f2937;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  outline: none;
}

.image-canvas-editor__generate-prompt:focus-within {
  border-color: var(--image-canvas-brand-border-strong);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);
}

.image-canvas-editor__generate-status {
  margin: 0;
}

.image-canvas-editor__generate-status--floating {
  position: absolute;
  z-index: 14;
  width: max-content;
  min-width: 5.2rem;
  transform: translateX(-50%);
}

.image-canvas-editor__reference-pick-toast {
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 72;
  max-width: min(24rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.image-canvas-editor__reference-pick-toast-close {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.image-canvas-editor__reference-pick-toast-close:hover,
.image-canvas-editor__reference-pick-toast-close:focus-visible {
  background: color-mix(in srgb, currentColor 26%, transparent);
}

.image-canvas-editor__generate-submit {
  justify-self: end;
}

.image-canvas-editor__metadata-grid {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  margin: 0;
  padding: 0.85rem;
  font-size: 0.78rem;
}

.image-canvas-editor__metadata-grid dt {
  color: #64748b;
  font-weight: 820;
}

.image-canvas-editor__metadata-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #1f2937;
  font-weight: 760;
}

.image-canvas-editor__metadata-inputs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
}

.image-canvas-editor__metadata-input-field {
  display: grid;
  gap: 0.16rem;
}

.image-canvas-editor__metadata-input-title {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 820;
}

.image-canvas-editor__metadata-reference-list {
  display: grid;
  width: 100%;
  gap: 0.42rem;
}

.image-canvas-editor__metadata-reference-card {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.65rem;
  background: rgba(248, 250, 252, 0.92);
  padding: 0.38rem;
}

.image-canvas-editor__metadata-reference-copy {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.image-canvas-editor__metadata-reference-id {
  color: #64748b;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .image-canvas-editor {
    flex-direction: column;
    gap: 0;
  }

  .image-canvas-editor__sidebar {
    width: 100%;
    min-width: 0;
    max-height: 14rem;
    flex-shrink: 0;
    border-right: 0;
    border-bottom: 1px solid #d9dee8;
  }

  .image-canvas-editor__sidebar--asset-selection {
    height: clamp(14rem, 62dvh, 21rem);
    max-height: 62dvh;
  }

  .image-canvas-editor__asset-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 78vw);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .image-canvas-editor__sidebar--asset-selection
    .image-canvas-editor__asset-list {
    overflow-y: auto;
  }

  .image-canvas-editor__layers-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, 70vw);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .image-canvas-editor__quick-edit-panel,
  .image-canvas-editor__character-animation-panel {
    position: fixed;
    left: 0.75rem !important;
    right: 0.75rem;
    top: auto !important;
    bottom: 0.75rem;
    width: auto;
    max-height: min(72vh, 34rem);
    transform: none;
  }

  .image-canvas-editor__quick-edit-panel.image-canvas-editor__generation-composer {
    width: auto;
    bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
  }

  .image-canvas-editor__generation-composer {
    position: fixed;
    left: 0.75rem !important;
    right: 0.75rem;
    top: auto !important;
    bottom: 3.85rem;
    width: auto;
    max-height: min(72vh, 31rem);
    grid-template-columns: 3.55rem minmax(0, 1fr);
    overflow: auto;
    transform: none;
  }

  .image-canvas-editor__generation-composer-footer,
  .image-canvas-editor__character-animation-footer {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .image-canvas-editor__option-popover-anchor--dimensions,
  .image-canvas-editor__option-popover-anchor--model {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  .image-canvas-editor__option-cluster--dimensions,
  .image-canvas-editor__option-cluster--model,
  .image-canvas-editor__image-style-toggle,
  .image-canvas-editor__readonly-generation-option,
  .image-canvas-editor__generation-submit,
  .image-canvas-editor__character-animation-submit {
    grid-column: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .image-canvas-editor__image-style-toggle {
    justify-content: flex-start;
  }

  .image-canvas-editor__character-composer {
    position: fixed;
    left: 0.75rem !important;
    right: 0.75rem;
    top: auto !important;
    bottom: 3.85rem;
    width: auto;
    max-height: min(72vh, 31rem);
    overflow: auto;
    padding: 0.58rem 0.58rem 0.44rem;
    transform: none;
  }

  .image-canvas-editor__character-composer
    .image-canvas-editor__generation-composer-footer {
    padding-top: 0.86rem;
  }

  .image-canvas-editor__character-reference-row {
    padding-right: 2rem;
  }

  .image-canvas-editor__character-spec-ref {
    min-width: 5.4rem;
  }

  .image-canvas-editor__character-spec-ref,
  .image-canvas-editor__character-reference-add,
  .image-canvas-editor__character-ref-thumb {
    height: 3.2rem;
  }

  .image-canvas-editor__character-ref-thumb {
    width: 3.2rem;
  }

  .image-canvas-editor__icon-composer {
    left: 0.75rem !important;
    right: auto;
    top: auto !important;
    bottom: 3.85rem;
    width: calc(100% - 1.5rem) !important;
    min-width: 0;
    transform: none;
  }

  .image-canvas-editor__canvas-pick-hint {
    position: fixed;
    top: 4.35rem;
    max-width: calc(100% - 1.5rem);
    border-radius: 0.9rem;
  }

  .image-canvas-editor__main {
    min-height: 0;
    flex: 1;
  }

  .image-canvas-editor__topbar {
    min-height: 2.78rem;
    padding: 0.34rem 0.48rem;
  }

  .image-canvas-editor__topbar-project {
    gap: 0.26rem;
  }

  .image-canvas-editor__topbar-actions {
    gap: 0.28rem;
  }

  .image-canvas-editor__project-back-button {
    width: 1.94rem;
    height: 1.94rem;
  }

  .image-canvas-editor__shortcut-sections {
    grid-template-columns: 1fr;
  }

  .image-canvas-editor__shortcut-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .image-canvas-editor__shortcut-row dd {
    justify-content: flex-start;
  }

  .image-canvas-editor__title-block h1 {
    font-size: 0.84rem;
  }

  .image-canvas-editor__project-title-button {
    max-width: min(14rem, 34vw);
  }

  .image-canvas-editor__project-title-input {
    width: clamp(7rem, 34vw, 11rem);
  }

  .image-canvas-editor__wallet-chip {
    min-width: 5.72rem;
    height: 1.94rem;
    gap: 0.26rem;
    padding-inline: 0.34rem 0.42rem;
    font-size: 0.7rem;
  }

  .image-canvas-editor__wallet-chip img {
    width: 1.02rem;
    height: 1.02rem;
  }

  .image-canvas-editor__account-chip {
    width: 1.94rem;
    height: 1.94rem;
    padding: 0;
    justify-content: center;
  }

  .image-canvas-editor__account-avatar {
    width: 1.38rem;
    height: 1.38rem;
    font-size: 0.68rem;
  }

  .image-canvas-editor__account-meta {
    display: none;
  }

  .image-canvas-editor__floating-toolbar button,
  .image-canvas-editor__bottom-toolbar button,
  .image-canvas-editor__reset-button {
    width: 2rem;
    height: 2rem;
  }

  .image-canvas-editor__floating-toolbar
    button.image-canvas-editor__floating-toolbar-text-button {
    width: auto;
  }

  .image-canvas-editor__floating-toolbar {
    max-width: calc(100% - 1.5rem);
    overflow-x: auto;
  }

  .image-canvas-editor__task-sidebar {
    position: fixed;
    top: 7.25rem;
    right: 0.75rem;
  }

  .image-canvas-editor__bottom-toolbar {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    transform: none;
  }

  .image-canvas-editor__toolbar-guide {
    right: 0.85rem;
    left: 0.85rem;
    bottom: 1.75rem;
    width: auto;
    transform: scale(0.8);
  }

  .image-canvas-editor__toolbar-guide span {
    left: 33%;
    padding: 0.1rem 0.55rem;
    font-size: 0.82rem;
  }

  .image-canvas-editor__panel-dock {
    left: 0.75rem;
    bottom: 3.85rem;
  }

  .image-canvas-editor__minimap {
    left: 0.75rem;
    bottom: 7rem;
    width: 7.2rem;
    height: 4.6rem;
  }
}

.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-mobile-home-welcome-overlay {
  background: radial-gradient(
      circle at 50% 18%,
      rgba(255, 254, 252, 0.54),
      transparent 32%
    ),
    rgba(61, 31, 16, 0.24);
}

.platform-mobile-home-welcome-dialog {
  width: min(100%, 21rem);
  overflow: hidden;
  border-radius: 1.65rem;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: radial-gradient(
      circle at 18% 0%,
      rgba(240, 203, 169, 0.28),
      transparent 38%
    ),
    var(--platform-modal-fill);
  box-shadow:
    0 24px 58px rgba(112, 57, 30, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.platform-mobile-home-welcome-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.35rem 0.85rem;
  text-align: center;
}

.platform-mobile-home-welcome-dialog__footer {
  justify-content: center;
  border-top: 0;
  padding: 0.35rem 1.35rem 1.35rem;
}

.platform-mobile-home-welcome-dialog__icon {
  display: block;
  width: 5.65rem;
  height: 5.65rem;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(182, 98, 63, 0.16));
}

.platform-mobile-home-welcome-dialog__title {
  margin-top: 0.85rem;
  color: var(--platform-text-strong);
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.18;
}

.platform-mobile-home-welcome-dialog__copy {
  margin-top: 0.65rem;
  color: var(--platform-text-base);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.75;
}

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

.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-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);
  }
}

.image-canvas-editor__panel-dock .image-canvas-editor__zoom-trigger {
  width: auto;
  min-width: 4.15rem;
  padding: 0 0.65rem;
}

@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__status {
  position: absolute;
  z-index: 14;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 16px 38px rgba(79, 107, 69, 0.16);
}

.baby-love-drawing-runtime__status--top {
  top: max(0.8rem, env(safe-area-inset-top));
  max-width: min(86vw, 34rem);
}

.baby-love-drawing-runtime__status--saved {
  top: 12%;
}

.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;
  }

  /* 草稿页移动端整体禁止长按选择文字，避免误触系统选区。 */
  #platform-tab-panel-saves,
  #platform-tab-panel-saves * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  #platform-tab-panel-saves :is(input, textarea, [contenteditable='true']) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  .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.platform-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);
  }

  html[data-wechat-mini-program-runtime='true']
    .platform-recommend-runtime-panel {
    max-height: min(76dvh, 42rem);
    transform: scale(0.88);
    transform-origin: center;
  }

  html[data-wechat-mini-program-runtime='true']
    .platform-recommend-swipe-card__visual {
    transform: scale(0.88);
    transform-origin: center;
  }

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

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

  .platform-recommend-runtime-cover {
    position: absolute;
    inset: 0;
    z-index: 30;
    isolation: isolate;
    overflow: hidden;
    background: var(--platform-recommend-runtime-fill);
    opacity: 1;
    pointer-events: auto;
    will-change: opacity;
  }

  .platform-recommend-runtime-loading {
    position: absolute;
    right: 1rem;
    bottom: 0.72rem;
    left: 1rem;
    z-index: 4;
    height: 0.18rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
  }

  .platform-recommend-runtime-loading::before {
    position: absolute;
    inset: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.92),
      rgba(255, 180, 97, 0.86)
    );
    content: '';
    transform: translateX(-110%);
    animation: platform-recommend-runtime-loading 1.15s ease-in-out infinite;
  }

  .platform-recommend-runtime-cover--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
  }

  .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-rail--resetting {
    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;
}

.creation-home-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.creation-home-nav-art,
.creation-home-topbar-art {
  display: none;
}

.platform-desktop-shell--workbench {
  --creation-home-sidebar-width: 10rem;
  border-color: rgba(221, 191, 166, 0.9);
  border-radius: 1.85rem;
  padding: 0 !important;
  background:
    linear-gradient(rgba(255, 250, 244, 0.72), rgba(255, 250, 244, 0.72)),
    url('/creation-home/background-clay-workspace.png') center top / 64rem 64rem
      repeat,
    linear-gradient(180deg, #fffaf4 0%, #fffdf9 52%, #fff8f0 100%);
  box-shadow: 0 24px 58px rgba(112, 57, 30, 0.08);
}

@media (max-width: 639px) {
  .platform-mobile-entry-shell.platform-desktop-shell--workbench {
    padding-bottom: var(--platform-bottom-dock-outer-height) !important;
  }
}

.platform-desktop-shell--workbench::before {
  display: none;
}

.platform-desktop-shell--workbench::after {
  display: none;
}

.platform-desktop-shell--workbench .platform-desktop-layout {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.platform-desktop-shell--workbench .platform-desktop-leftbar {
  width: var(--creation-home-sidebar-width);
  min-height: 0;
  border-right: 1px solid rgba(219, 190, 166, 0.72);
  background: rgba(255, 250, 245, 0.46);
  padding: 0.86rem 0.5rem 0.96rem;
}

.platform-desktop-shell--workbench .platform-desktop-main {
  min-height: 0;
}

.platform-desktop-shell--workbench .platform-desktop-topbar {
  display: flex;
  z-index: 80;
  overflow: visible;
  gap: 0.58rem;
  min-height: 3.62rem;
  border: 0;
  border-bottom: 1px solid rgba(219, 190, 166, 0.72);
  border-radius: 0;
  background: rgba(255, 250, 245, 0.54);
  padding: 0.42rem 1rem !important;
  box-shadow: none;
  backdrop-filter: none;
}

.platform-desktop-shell--workbench .platform-desktop-topbar::before {
  display: none;
}

.platform-desktop-shell--workbench .platform-desktop-topbar__brand-search {
  gap: 0.58rem !important;
  justify-content: flex-start;
  padding-left: clamp(3.1rem, 5.8vw, 8.2rem);
}

.platform-desktop-shell--workbench .platform-brand-logo {
  align-self: center;
  gap: 0.1rem;
}

.platform-desktop-shell--workbench .creation-home-brand-lockup {
  align-self: flex-start;
  min-height: 4.18rem;
  padding-left: 0.02rem;
}

.platform-desktop-shell--workbench .platform-brand-logo__image {
  width: 4.12rem;
  height: 4.12rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.5rem 0.4rem rgba(112, 62, 32, 0.2));
}

.platform-desktop-shell--workbench .platform-brand-logo__copy {
  gap: 0.11rem;
  transform: translateY(0.02rem);
}

.platform-desktop-shell--workbench .platform-brand-logo__title {
  font-size: 1.46rem;
  color: #4a220f;
  letter-spacing: 0.025em;
}

.platform-desktop-shell--workbench .platform-brand-logo__subtitle {
  color: #9b5a35;
  font-size: 0.48rem;
  letter-spacing: 0.07em;
}

.platform-desktop-shell--workbench
  .platform-desktop-topbar__brand-search
  > .platform-desktop-search {
  width: 100%;
  max-width: 20rem !important;
}

.platform-desktop-shell--workbench .platform-desktop-topbar__actions {
  align-self: center;
  gap: 0.5rem !important;
  margin-left: auto;
}

.platform-desktop-shell--workbench .platform-desktop-search {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  height: 2.36rem;
  border: 1px solid rgba(214, 184, 159, 0.92);
  background: rgba(255, 250, 244, 0.78);
  box-shadow: none;
}

.platform-desktop-shell--workbench
  .platform-desktop-topbar__brand-search
  > .platform-desktop-search {
  padding-block: 0 !important;
  padding-inline: 0.64rem 0.58rem !important;
  gap: 0.48rem !important;
}

.platform-desktop-shell--workbench .platform-desktop-create-wallet-chip {
  position: relative;
  min-height: 2.28rem;
  border-radius: 999px !important;
  padding-inline: 0.42rem 0.58rem !important;
}

.platform-desktop-shell--workbench .platform-desktop-create-wallet-chip::after {
  position: absolute;
  top: 50%;
  right: -0.52rem;
  width: 1px;
  height: 1.66rem;
  background: rgba(217, 190, 166, 0.82);
  content: '';
  transform: translateY(-50%);
}

.platform-desktop-shell--workbench .creation-home-topbar-art {
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 0.18rem 0.18rem rgba(112, 62, 32, 0.14));
  mix-blend-mode: multiply;
}

.platform-desktop-shell--workbench .creation-home-topbar-art--search {
  width: 1.34rem;
  height: 1.34rem;
  margin: -0.16rem -0.26rem -0.16rem -0.34rem;
}

.platform-desktop-shell--workbench .platform-desktop-search > svg {
  display: none;
}

.platform-mobile-recommend-wallet-entry {
  position: fixed;
  top: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.35rem));
  right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.35rem));
  z-index: 70;
}

.platform-desktop-shell--workbench
  .platform-desktop-topbar
  button.platform-desktop-search {
  width: auto;
  max-width: none !important;
  min-width: 7.35rem;
  height: 2.3rem;
  border-color: transparent;
  background: transparent;
  padding-inline: 0.34rem 0.42rem;
  gap: 0.38rem !important;
}

.platform-desktop-shell--workbench
  .platform-desktop-topbar
  button.platform-desktop-search:hover {
  border-color: rgba(214, 184, 159, 0.52);
  background: rgba(255, 250, 244, 0.56);
}

.platform-desktop-shell--workbench
  .platform-desktop-topbar
  button.platform-desktop-search
  > span:first-child {
  width: 2.06rem;
  height: 2.06rem;
}

@media (max-width: 639px) {
  .platform-desktop-shell--workbench
    .platform-desktop-topbar
    button.platform-account-entry {
    width: 2.3rem;
    min-width: 0;
    padding-inline: 0.12rem;
  }
}

.platform-desktop-shell--workbench .platform-desktop-rail {
  align-self: flex-start;
  width: 7.6rem;
  margin: 1.12rem auto 0;
  border-color: rgba(220, 192, 168, 0.7);
  border-radius: 1.55rem;
  background: rgba(255, 250, 244, 0.54);
  padding: 0.38rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 34px rgba(112, 57, 30, 0.08);
}

.platform-desktop-shell--workbench .platform-desktop-rail__button {
  min-height: 3.18rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
  border-radius: 0.96rem;
  padding: 0 0.42rem;
  text-align: left;
}

.platform-desktop-shell--workbench .platform-desktop-rail__button--primary {
  min-height: 3.18rem;
}

.platform-desktop-shell--workbench .platform-desktop-rail__icon-shell {
  width: 2.44rem;
  height: 2.44rem;
  flex: 0 0 auto;
  border-radius: 0.9rem;
  background: transparent;
  box-shadow: none;
}

.platform-desktop-shell--workbench
  .platform-desktop-rail__button--active
  .platform-desktop-rail__icon-shell {
  background: #fff2e7;
  box-shadow: none;
}

.platform-desktop-shell--workbench
  .platform-desktop-rail__button--active
  .platform-desktop-rail__icon {
  color: #c7653d;
}

.platform-desktop-shell--workbench .creation-home-nav-art {
  display: block;
  width: 2.12rem;
  height: 2.12rem;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.3rem 0.28rem rgba(112, 62, 32, 0.14));
  mix-blend-mode: multiply;
}

.platform-desktop-shell--workbench .platform-desktop-rail__label {
  min-width: 0;
  color: #70452d;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05;
}

.platform-desktop-shell--workbench
  .platform-desktop-rail__button--active
  .creation-home-nav-art {
  filter: drop-shadow(0 0.24rem 0.22rem rgba(112, 62, 32, 0.12));
  mix-blend-mode: multiply;
}

.platform-desktop-shell--workbench .platform-desktop-rail__icon {
  display: none;
}

.platform-desktop-shell--workbench .platform-desktop-rail__button--active {
  border-color: rgba(199, 101, 61, 0.22);
  background: rgba(255, 242, 231, 0.74);
  box-shadow: none;
}

.platform-desktop-shell--workbench
  .platform-desktop-rail__button--active
  .platform-desktop-rail__label {
  color: #c7653d;
}

.platform-desktop-shell--workbench .platform-desktop-rail__label {
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0;
}

.platform-desktop-shell--workbench .platform-tab-panel-stack {
  min-height: 0;
  background: transparent;
}

.platform-desktop-shell--workbench .platform-tab-panel {
  height: 100%;
  overflow: auto;
  padding-right: 0;
}

.platform-desktop-shell--workbench .creation-landing {
  background: transparent;
}

.creation-home-stage--landing
  .platform-desktop-shell--workbench
  #platform-tab-panel-create {
  -ms-overflow-style: auto;
  scrollbar-width: thin;
}

.creation-home-stage--landing
  .platform-desktop-shell--workbench
  #platform-tab-panel-create::-webkit-scrollbar {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
}

.creation-home-stage--landing
  .platform-desktop-shell--workbench
  #platform-tab-panel-create::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(145, 67, 21, 0.34);
}

.creation-home-stage--landing
  .platform-desktop-shell--workbench
  #platform-tab-panel-create::-webkit-scrollbar-track {
  background: rgba(255, 248, 240, 0.72);
}

.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-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.65rem;
}

.platform-profile-header {
  position: relative;
  overflow: hidden;
  padding: 0.95rem 0.9rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.55rem;
  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__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(232, 214, 201, 0.82);
  border-radius: 9999px;
  background: rgba(255, 252, 248, 0.9);
  color: #1e120c;
  box-shadow: 0 8px 18px rgba(112, 57, 30, 0.06);
}

.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.62rem;
  min-width: 0;
  padding-top: 0.1rem;
  padding-right: 4.25rem;
}

.platform-profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  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.75rem;
  width: 100%;
  min-height: 5.9rem;
  padding: 0.82rem 0.9rem 0.82rem 0.85rem;
  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: 3.45rem;
  height: 3.45rem;
  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.65rem;
  height: 1.65rem;
}

.platform-profile-membership-card__action {
  flex: none;
  padding: 0.66rem 0.86rem;
  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: 0.78rem 0.72rem;
}

.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.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 9999px;
  background: rgba(255, 243, 230, 0.9);
  color: #bc5f34;
}

.platform-qr-scanner-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-qr-scanner-modal__viewport {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1.1rem;
  background: rgba(18, 16, 14, 0.92);
}

.platform-qr-scanner-modal__frame {
  position: absolute;
  inset: 18%;
  border: 2px solid rgba(255, 244, 230, 0.92);
  border-radius: 1rem;
  box-shadow:
    0 0 0 999px rgba(0, 0, 0, 0.18),
    0 0 24px rgba(244, 138, 70, 0.28);
}

.platform-profile-daily-task-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 6.8rem;
  padding: 0.82rem 0.9rem 0.82rem 0.95rem;
  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: min(8rem, 42vw);
  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: 6.3rem;
  height: auto;
  align-self: end;
  margin-bottom: -0.2rem;
}

.platform-profile-generation-queue-card {
  width: 100%;
  min-height: 6.2rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(235, 221, 208, 0.82);
  border-radius: 1.55rem;
  background: rgba(255, 250, 246, 0.92);
  box-shadow: 0 10px 28px rgba(112, 57, 30, 0.06);
}

.platform-profile-generation-queue-card__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-generation-queue-card__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.9rem;
  background: rgba(255, 244, 235, 0.82);
  color: var(--platform-text-base);
  font-size: 12px;
  font-weight: 600;
}

.platform-profile-generation-queue-card__metric strong {
  color: var(--platform-text-strong);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.platform-profile-shortcut-panel {
  padding: 0.78rem 0.68rem 0.82rem;
}

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

.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.35rem;
  height: 2.35rem;
  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.1rem 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.05rem;
  height: 2.05rem;
  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.68rem;
  }

  .platform-profile-header {
    padding: 0.82rem 0.78rem 0.72rem;
    border-radius: 1.22rem;
  }

  .platform-profile-header__identity {
    padding-top: 0;
    padding-right: 3.55rem;
  }

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

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

  .platform-profile-header__name {
    font-size: clamp(0.98rem, 4.4vw, 1.12rem);
    line-height: 1.15;
  }

  .platform-profile-header__code {
    margin-top: 0.42rem;
    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.25rem;
    padding: 0.66rem 0.72rem;
    gap: 0.62rem;
  }

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

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

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

  .platform-profile-membership-card__action {
    padding: 0.5rem 0.62rem;
    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.62rem 0.56rem;
  }

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

  .platform-profile-stat-card {
    min-height: 4.45rem;
    align-items: center;
    gap: 0.56rem;
    padding: 0.48rem 0.34rem;
  }

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

  .platform-profile-stat-card__value {
    font-size: 0.88rem;
    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: 10px;
    line-height: 1.18;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .platform-profile-daily-task-card {
    min-height: 5.75rem;
    padding: 0.68rem 0.72rem 0.68rem 0.76rem;
    border-radius: 1.12rem;
    gap: 0.58rem;
  }

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

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

  .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-generation-queue-card {
    min-height: 5.75rem;
    padding: 0.72rem 0.76rem;
    border-radius: 1.12rem;
  }

  .platform-profile-generation-queue-card__icon {
    width: 1.72rem;
    height: 1.72rem;
  }

  .platform-profile-generation-queue-card__metric {
    padding: 0.48rem 0.56rem;
    border-radius: 0.78rem;
    font-size: 11px;
  }

  .platform-profile-generation-queue-card__metric strong {
    font-size: 14px;
  }

  .platform-profile-shortcut-panel {
    padding: 0.64rem 0.54rem 0.68rem;
  }

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

  .platform-profile-shortcut-button {
    min-height: 4rem;
    padding: 0.42rem 0.06rem 0.44rem;
  }

  .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: 1.96rem;
    height: 1.96rem;
  }

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

  .platform-profile-settings-row {
    padding: 0.62rem 0.74rem;
  }

  .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,
  .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
  .creation-agent-hero
  :where(
    .creation-agent-hero__icon-button,
    .creation-agent-hero__quick-action
  ) {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.platform-theme--light
  .platform-remap-surface
  .creation-agent-hero
  :where(.creation-agent-hero__summary, .creation-agent-hero__progress-label) {
  color: rgba(255, 255, 255, 0.76) !important;
}

.platform-theme--light
  .platform-remap-surface
  .creation-agent-hero
  .creation-agent-hero__progress-value {
  color: rgba(255, 255, 255, 0.92) !important;
}

.platform-theme--light
  .platform-remap-surface
  .creation-agent-hero
  .creation-agent-hero__progress-hint {
  color: rgba(255, 255, 255, 0.72) !important;
}

.platform-theme--light
  .platform-remap-surface
  .creation-agent-hero
  .creation-agent-hero__progress-track {
  background: rgba(255, 255, 255, 0.2) !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__lockup {
    gap: 0.58rem;
  }

  .selection-hero-brand__image {
    width: 2.85rem;
    height: 2.85rem;
  }

  .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__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__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 {
  margin-top: 1rem;
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.875rem;
}

.platform-work-detail__toast {
  margin-top: 1rem;
}

.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__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;
}

.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__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;
}

.auto-grow-text-area {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--auto-grow-editor-min-height, 2.5rem);
  max-height: var(--auto-grow-editor-max-height, 8rem);
  border-radius: var(--auto-grow-editor-radius, 1rem);
  overflow: hidden;
}

.auto-grow-text-area__content {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--auto-grow-editor-min-height, 2.5rem) - 2px);
  padding: var(--auto-grow-editor-padding, 0.5rem 0.75rem);
  padding-right: 2.25rem;
  outline: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

.auto-grow-text-area__placeholder {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: var(--auto-grow-editor-padding, 0.5rem 0.75rem);
  padding-right: 2.25rem;
  overflow: hidden;
  color: #94a3b8;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-grow-text-area__viewport,
.auto-grow-text-area [data-overlayscrollbars-viewport] {
  /* 独立 viewport 不随内容增高，达到上限后只由它承接滚动。 */
  display: block;
  height: 100%;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.auto-grow-text-area__content-root {
  box-sizing: border-box;
  min-height: calc(var(--auto-grow-editor-min-height, 2.5rem) - 2px);
}

.auto-grow-text-area[data-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.6;
}

.auto-grow-text-area[data-readonly='true'] {
  cursor: default;
}

.editor-agent-conversation__draft-input {
  --auto-grow-editor-radius: 1.5rem;
  --auto-grow-editor-padding: 0.5rem 0.75rem;
  border-radius: var(--auto-grow-editor-radius);
}

/* 微信式编辑器滚动条：轨道透明，8px 胶囊滑块内缩于输入框圆角之内。 */
.auto-grow-text-area
  > .os-theme-auto-grow-text-area.os-scrollbar-vertical.os-scrollbar-cornerless {
  --os-size: 8px;
  --os-padding-axis: 0;
  --os-padding-perpendicular: 0;
  --os-track-border-radius: 999px;
  --os-track-bg: transparent;
  --os-track-bg-hover: transparent;
  --os-track-bg-active: transparent;
  --os-handle-border-radius: 999px;
  --os-handle-bg: rgba(98, 98, 98, 0.56);
  --os-handle-bg-hover: rgba(98, 98, 98, 0.72);
  --os-handle-bg-active: rgba(98, 98, 98, 0.86);
  --os-handle-min-size: 24px;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  box-sizing: border-box;
  top: var(--auto-grow-editor-radius, 1rem) !important;
  right: 5px;
  bottom: var(--auto-grow-editor-radius, 1rem) !important;
  width: 8px;
  padding: 0;
}

.auto-grow-text-area
  > .os-theme-auto-grow-text-area.os-scrollbar-vertical
  .os-scrollbar-track {
  width: 8px;
  border-radius: 999px;
  background: transparent;
}

.auto-grow-text-area
  > .os-theme-auto-grow-text-area.os-scrollbar-vertical
  .os-scrollbar-handle {
  width: 8px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(98, 98, 98, 0.56);
}

.auto-grow-text-area
  > .os-theme-auto-grow-text-area.os-scrollbar-vertical:hover
  .os-scrollbar-handle {
  background: rgba(98, 98, 98, 0.72);
}

.auto-grow-text-area
  > .os-theme-auto-grow-text-area.os-scrollbar-vertical:active
  .os-scrollbar-handle {
  background: rgba(98, 98, 98, 0.86);
}

.image-canvas-editor__metadata-dialog.platform-modal-shell {
  border-color: rgba(226, 232, 240, 0.92) !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
}

.image-canvas-editor .image-canvas-editor__metadata-corner {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(199, 101, 61, 0.92) !important;
  color: var(--image-canvas-brand-text-on-fill) !important;
}

.image-canvas-editor .image-canvas-editor__metadata-corner:hover {
  background: #b95d3a !important;
}

.image-canvas-editor__generation-composer .image-canvas-editor__option-cluster {
  min-height: 2.25rem;
  background: transparent;
  border-color: transparent;
}

.image-canvas-editor__generation-composer
  .image-canvas-editor__option-cluster:hover:not(:disabled),
.image-canvas-editor__generation-composer
  .image-canvas-editor__option-cluster[aria-expanded='true'] {
  border-color: rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* BGM composer：Prompt 计数、助手动作与预设轨道。 */
.image-canvas-editor__generation-composer--background-music {
  grid-template-columns: minmax(0, 1fr);
  width: min(44rem, calc(100% - 1.5rem));
  /*
   * 行数交给 `--image` 的 `auto auto auto` 与隐式行：多写的显式行即使高度为 0，行间距
   * 仍然照算，收起预设时会凭空多出一段空白。同理 `min-height` 归零，否则 grid 默认的
   * align-content: stretch 会把撑出来的余量摊到各行上。
   */
  min-height: 0;
}

/* 助手动作与「Suno + 生成」同处底部一行，共享 footer 的 5 列 grid 在这里换成 flex。 */
.image-canvas-editor__generation-composer--background-music
  .image-canvas-editor__generation-composer-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
}

/* flex 布局下提交按钮硬编码的 grid-column 自动失效，无需为 BGM 覆盖它。 */
.image-canvas-editor__generation-composer--background-music
  .image-canvas-editor__option-popover-anchor--model {
  margin-left: auto;
}

.image-canvas-editor__generation-composer--background-music
  .image-canvas-editor__generation-submit {
  height: 2.25rem;
  min-height: 0;
}

.image-canvas-editor__background-music-prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/*
 * 助手动作与时长、循环、模型和生成同处底部一行：共享 footer 的 5 列 grid 在这里换成
 * flex，作用域限定在 SFX，图片 / 视频 composer 仍走原来的 grid。
 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__generation-composer-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
}

/*
 * `.image-canvas-editor__option-cluster` 的 `width: 100%` 是给 grid 单元格写的，在 flex
 * 行里会把基准宽度撑成整行再收缩。循环按钮是 footer 的直接子元素，必须改回按内容取宽；
 * 时长和模型包在 anchor 里，宽度由 anchor 收敛，不受影响。
 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__generation-composer-footer
  > .image-canvas-editor__option-cluster {
  width: auto;
}

/* anchor 是块级盒、内部按钮是 inline-block，行盒下沿会多出基线空隙导致高度错位。 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__generation-composer-footer
  > .image-canvas-editor__option-popover-anchor {
  display: flex;
  align-items: center;
}

/* 模型 chip 起分组作用：它和生成按钮被顶到右侧，左侧留给动作与参数。 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__option-popover-anchor--model {
  margin-left: auto;
}

/* flex 布局下提交按钮硬编码的 grid-column 自动失效，无需覆盖。 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__generation-submit {
  height: 2.25rem;
  min-height: 0;
}

.image-canvas-editor__sound-effect-prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* 共享的 label 是无 gap 的 inline-flex，加了图标和状态后必须自己撑开间距。 */
.image-canvas-editor__generation-composer--sound-effect
  .image-canvas-editor__option-cluster
  .platform-inline-option-button__label {
  gap: 0.3rem;
}

/* 时长与循环的前置图标，尺寸对齐助手按钮里的图标。 */
.image-canvas-editor__sound-effect-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-canvas-editor__sound-effect-option-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* 开 / 关状态跟在「循环」后面，用弱化色，避免和标签抢读。 */
.image-canvas-editor__sound-effect-loop-state {
  color: #94a3b8;
  font-weight: 700;
}

.image-canvas-editor__sound-effect-loop[aria-pressed='true']
  .image-canvas-editor__sound-effect-loop-state {
  color: inherit;
}

.image-canvas-editor__sound-effect-prompt-action--optimize:not(:disabled) {
  border-color: var(--image-canvas-brand-border-strong);
  color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__sound-effect-prompt-action--optimize:not(
    :disabled
  ):hover {
  background: var(--image-canvas-brand-soft);
}

.image-canvas-editor__sound-effect-auto-duration {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
}

.image-canvas-editor__sound-effect-auto-duration input {
  margin: 0;
}

/*
 * 助手动作按钮：`.platform-button` 给的是 2.9rem 高与 0.7rem/1rem 内边距，比同一面板里
 * 2.25rem 的生成按钮高出一截。这里按两级选择器压回去，避免整排按钮比主操作还重。
 */
.image-canvas-editor__background-music-prompt-actions
  .image-canvas-editor__background-music-prompt-action {
  /* 2.25rem 是本 composer 的控件高度基准（模型 chip 与生成按钮同源）。 */
  height: 2.25rem;
  min-height: 0;
  gap: 0.3rem;
  /* `shape="pill"` 走的是 Tailwind 分层 utility，压不过未分层的 `.platform-button`
   * 的 1rem 圆角，所以胶囊圆角必须在这里显式写死。 */
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: transparent;
  padding: 0 0.82rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 760;
  box-shadow: none;
}

.image-canvas-editor__background-music-prompt-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-canvas-editor__background-music-prompt-action-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* AI 补全是这一排的主操作，用品牌描边与中性的简化、撤销拉开层级。 */
.image-canvas-editor__background-music-prompt-actions
  .image-canvas-editor__background-music-prompt-action--complete {
  border-color: var(--image-canvas-brand-border-strong);
  color: var(--image-canvas-brand-accent);
}

.image-canvas-editor__background-music-prompt-action--complete:not(
    :disabled
  ):hover {
  background: var(--image-canvas-brand-soft);
}

.image-canvas-editor__background-music-prompt-action--simplify:not(
    :disabled
  ):hover {
  background: rgba(15, 23, 42, 0.04);
}

/* 撤销权重最低：无边框无底色，只在 hover 时给一层淡底。 */
.image-canvas-editor__background-music-prompt-actions
  .image-canvas-editor__background-music-prompt-action--undo {
  border-color: transparent;
  color: #64748b;
}

.image-canvas-editor__background-music-prompt-action--undo:not(
    :disabled
  ):hover {
  background: rgba(15, 23, 42, 0.05);
}

.image-canvas-editor__background-music-prompt-count {
  margin-left: auto;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.image-canvas-editor__background-music-prompt-count--over-limit {
  color: #dc2626;
}

.image-canvas-editor__background-music-presets {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.image-canvas-editor__background-music-presets-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.image-canvas-editor__background-music-presets-title {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
}

/*
 * 展开 / 收起只是「预设」标题旁的一个箭头，不该是实心 pill。命中区靠 1.75rem 方形保住，
 * 不做成裸图标那种小到点不中的按钮。
 */
.image-canvas-editor__background-music-presets-toggle {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  color: #64748b;
  box-shadow: none;
}

.image-canvas-editor__background-music-presets-toggle:not(:disabled):hover {
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
}

.image-canvas-editor__background-music-presets-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
}

.image-canvas-editor__background-music-presets-track {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
  padding-bottom: 0.28rem;
}

/* 轨道两侧的箭头是辅助控件：默认贴边无框，hover 才浮出淡底。宽度保持 1.5rem，
 * 细线两端的 1.74rem 缩进（箭头 1.5rem + 轨道 0.24rem 间距）因此不用跟着改。 */
.image-canvas-editor__background-music-presets-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.image-canvas-editor__background-music-presets-arrow:not(:disabled):hover {
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
}

.image-canvas-editor__background-music-presets-arrow:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-canvas-editor__background-music-presets-arrow svg {
  width: 0.85rem;
  height: 0.85rem;
}

.image-canvas-editor__background-music-presets-viewport {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* 触摸环境只允许横向平移，纵向手势继续交给画布。 */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.image-canvas-editor__background-music-presets-viewport::-webkit-scrollbar {
  display: none;
}

.image-canvas-editor__background-music-presets-viewport--locked {
  /* 锁定期间轨道不再是用户可滚动容器，但保留 scrollLeft 相位，解锁后循环从原处继续。 */
  overflow-x: hidden;
  /* 横向手势不再作用于轨道，纵向手势仍旧交给画布。 */
  touch-action: pan-y;
}

.image-canvas-editor__background-music-presets-queue {
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
  padding-right: 0.3rem;
}

.image-canvas-editor__background-music-preset {
  flex: 0 0 auto;
  /* 五个中文字的标签加内边距：中间 70% 区域可以稳定看到至少五个词条。 */
  max-width: 7.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.image-canvas-editor__background-music-preset:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
}

.image-canvas-editor__background-music-preset:disabled,
.image-canvas-editor__background-music-preset--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-canvas-editor__background-music-preset--purpose {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(219, 234, 254, 0.7);
  color: #1d4ed8;
}

.image-canvas-editor__background-music-preset--atmosphere {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(254, 243, 199, 0.7);
  color: #b45309;
}

.image-canvas-editor__background-music-preset--scene {
  border-color: rgba(13, 148, 136, 0.24);
  background: rgba(204, 251, 241, 0.7);
  color: #0f766e;
}

.image-canvas-editor__sound-effect-preset--ui-operation,
.image-canvas-editor__sound-effect-preset--pickup-reward {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(219, 234, 254, 0.7);
  color: #1d4ed8;
}

.image-canvas-editor__sound-effect-preset--growth-result,
.image-canvas-editor__sound-effect-preset--character-combat {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(254, 243, 199, 0.7);
  color: #b45309;
}

.image-canvas-editor__sound-effect-preset--skill-status,
.image-canvas-editor__sound-effect-preset--mechanism-scene-interaction {
  border-color: rgba(13, 148, 136, 0.24);
  background: rgba(204, 251, 241, 0.7);
  color: #0f766e;
}

.image-canvas-editor__sound-effect-preset--style-direction,
.image-canvas-editor__sound-effect-preset--feedback-requirement {
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(237, 233, 254, 0.72);
  color: #6d28d9;
}

.image-canvas-editor__background-music-presets-hairline {
  position: absolute;
  right: 1.74rem;
  bottom: 0;
  left: 1.74rem;
  height: 1px;
  background: rgba(148, 163, 184, 0.28);
}

.image-canvas-editor__background-music-presets-hairline::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--image-canvas-brand-border-strong, #f97316);
  transition:
    left 0.12s ease,
    width 0.12s ease;
}

.image-canvas-editor__background-music-presets-hairline--left::after {
  left: 0;
  width: 15%;
}

.image-canvas-editor__background-music-presets-hairline--center::after {
  left: 15%;
  width: 70%;
}

.image-canvas-editor__background-music-presets-hairline--right::after {
  left: 85%;
  width: 15%;
}

@media (max-width: 640px) {
  .image-canvas-editor__generation-composer--background-music {
    width: calc(100% - 1rem);
  }

  .image-canvas-editor__background-music-prompt-actions {
    flex-wrap: wrap;
  }

  /* 一行放不下三个助手按钮加 Suno 和生成，窄屏必须允许换行。 */
  .image-canvas-editor__generation-composer--background-music
    .image-canvas-editor__generation-composer-footer {
    flex-wrap: wrap;
  }

  .image-canvas-editor__background-music-preset {
    max-width: 9rem;
  }
}

.image-canvas-editor__scene-custom-style {
  grid-column: 1 / -1;
}

.image-canvas-editor__scene-style-anchor {
  position: relative;
  display: inline-flex;
  min-width: 0;
  grid-column: 3;
  justify-self: end;
}

.image-canvas-editor__scene-style-trigger {
  width: auto;
  max-width: 9rem;
}

.image-canvas-editor__scene-style-trigger-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.32rem;
}

.image-canvas-editor__scene-style-trigger-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__scene-style-menu {
  width: 19rem;
  overflow: visible;
  border-color: rgba(15, 23, 42, 0.08);
  border-radius: 1.05rem;
  padding: 0.62rem;
  box-shadow:
    0 22px 56px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.image-canvas-editor__scene-style-menu-heading {
  display: grid;
  gap: 0.18rem;
  padding: 0.25rem 0.38rem 0.58rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.image-canvas-editor__scene-style-menu-heading strong {
  color: #111827;
  font-size: 0.82rem;
  font-weight: 850;
}

.image-canvas-editor__scene-style-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem;
  min-height: 3.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.image-canvas-editor__scene-style-row:last-child {
  border-bottom: 0;
}

.image-canvas-editor__scene-style-choice {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  padding: 0.45rem 0.48rem;
  color: #334155;
  text-align: left;
  cursor: pointer;
}

.image-canvas-editor__scene-style-choice:hover,
.image-canvas-editor__scene-style-choice[aria-checked='true'] {
  background: #f8fafc;
}

.image-canvas-editor__scene-style-choice > span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.image-canvas-editor__scene-style-choice strong,
.image-canvas-editor__scene-style-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-canvas-editor__scene-style-choice strong {
  color: #111827;
  font-size: 0.78rem;
  font-weight: 820;
}

.image-canvas-editor__scene-style-choice small {
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 680;
}

.image-canvas-editor__scene-style-check {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--image-canvas-brand-accent-strong);
  stroke-width: 3;
}

.image-canvas-editor__scene-style-check[data-visible='false'] {
  opacity: 0;
}

.image-canvas-editor__scene-style-preview-wrap {
  position: static;
  display: inline-flex;
}

.image-canvas-editor__scene-style-preview-button {
  display: inline-flex;
  height: 1.8rem;
  align-items: center;
  gap: 0.24rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #ffffff;
  padding: 0 0.56rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 780;
  cursor: default;
}

.image-canvas-editor__scene-style-preview-button:hover,
.image-canvas-editor__scene-style-preview-button:focus-visible {
  border-color: var(--image-canvas-brand-border-strong);
  background: var(--image-canvas-brand-soft);
  color: var(--image-canvas-brand-accent-strong);
}

.image-canvas-editor__scene-style-preview-card {
  position: absolute;
  right: calc(100% + 0.62rem);
  top: 50%;
  z-index: 80;
  display: block;
  width: 19rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 1rem;
  background: #ffffff;
  margin: 0;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
  transform: translateY(-50%);
}

.image-canvas-editor__scene-style-preview-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.image-canvas-editor__scene-style-preview-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.62rem 0.72rem;
}

.image-canvas-editor__scene-style-preview-card figcaption strong {
  color: #111827;
  font-size: 0.76rem;
  font-weight: 850;
}

@media (max-width: 760px) {
  .image-canvas-editor__scene-style-anchor {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .image-canvas-editor__scene-style-trigger {
    width: 100%;
    max-width: none;
  }

  .image-canvas-editor__scene-style-preview-card {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 0.45rem);
    width: min(18rem, calc(100vw - 2rem));
    transform: none;
  }
}