:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 42%;
  --effect-opacity: 0.72;
  --effect-duration: 7s;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  color: #f8f7fb;
  background:
    radial-gradient(circle at 50% 8%, rgba(111, 76, 178, 0.27), transparent 33rem),
    radial-gradient(circle at 15% 78%, rgba(32, 177, 199, 0.12), transparent 30rem),
    linear-gradient(180deg, #0d111c 0%, #070910 62%, #04050a 100%);
}

body.share-sheet-open {
  overflow: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Ccircle cx='12' cy='21' r='.7' fill='%23fff'/%3E%3Ccircle cx='104' cy='72' r='.5' fill='%23fff'/%3E%3Ccircle cx='61' cy='118' r='.4' fill='%23fff'/%3E%3C/svg%3E");
}

button {
  font: inherit;
}

.page-shell {
  width: min(100%, 620px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.share-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
}

.eyebrow {
  margin: 0 0 7px;
  color: #aca6bd;
  font-size: 12px;
  letter-spacing: 0.13em;
}

h1 {
  margin: 0;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.12;
}

.load-state {
  flex: none;
  margin-bottom: 4px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #cbc6d6;
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
}

.load-state.is-ready {
  border-color: rgba(105, 224, 204, 0.28);
  color: #a8eee2;
}

.card-stage {
  display: grid;
  place-items: center;
  min-height: min(72svh, 760px);
  padding: 24px 0 8px;
  perspective: 1300px;
}

.card-scene {
  position: relative;
  width: min(78vw, 390px, calc(68svh * 2 / 3));
  aspect-ratio: 2 / 3;
  border-radius: 6.6% / 4.4%;
  transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transform-style: preserve-3d;
  transition: transform 90ms linear, filter 420ms ease;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

.card-scene::after {
  position: absolute;
  inset: 5% 7% -8%;
  z-index: -2;
  content: "";
  border-radius: 50%;
  opacity: 0.58;
  background: radial-gradient(ellipse, rgba(105, 91, 189, 0.55), transparent 66%);
  filter: blur(26px);
  transform: translateZ(-20px);
}

.card-poster,
.card-control,
.card-face,
.card-base,
.card-effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card-poster,
.card-face,
.card-base,
.card-effect {
  border-radius: inherit;
  object-fit: cover;
}

.card-poster {
  z-index: 2;
  opacity: 1;
  background: #121523;
  transition: opacity 280ms ease;
}

.card-control {
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  cursor: grab;
  color: inherit;
  background: transparent;
  transform-style: preserve-3d;
  transition: opacity 280ms ease;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.card-control:active {
  cursor: grabbing;
}

.card-control:focus-visible {
  outline: 3px solid #b8f4ff;
  outline-offset: 8px;
}

.card-scene.is-ready .card-poster {
  opacity: 0;
  pointer-events: none;
}

.card-scene.is-ready .card-control {
  z-index: 3;
  opacity: 1;
}

.card-rotator {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 680ms cubic-bezier(0.2, 0.72, 0.18, 1);
  will-change: transform;
}

.card-rotator.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  display: block;
  overflow: hidden;
  background: #141522;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.1px);
}

.card-back {
  transform: rotateY(180deg) translateZ(0.1px);
}

.card-back-info {
  position: absolute;
  inset: 9% 9%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 9%;
  border: 1px solid rgba(116, 77, 18, 0.34);
  border-radius: 8%;
  color: #3a2b20;
  background: linear-gradient(145deg, rgba(255, 253, 245, 0.68), rgba(244, 228, 194, 0.3));
  box-shadow: inset 0 0 28px rgba(151, 101, 25, 0.08);
  text-align: left;
  pointer-events: none;
}

.card-back-info[hidden] {
  display: none;
}

.back-info-kicker {
  color: #8a6227;
  font-size: clamp(9px, 2.6vw, 13px);
  letter-spacing: 0.16em;
}

.back-info-title {
  margin-top: 5%;
  overflow: hidden;
  color: #2a1d16;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(22px, 7vw, 38px);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-info-divider {
  width: 100%;
  height: 1px;
  margin: 8% 0 6%;
  background: linear-gradient(90deg, rgba(133, 88, 23, 0.72), rgba(133, 88, 23, 0.08));
}

.back-info-row {
  display: grid;
  grid-template-columns: 29% minmax(0, 1fr);
  gap: 7%;
  align-items: baseline;
  margin-top: 5%;
  font-size: clamp(9px, 2.7vw, 14px);
}

.back-info-row > span {
  color: #8c755c;
}

.back-info-row b {
  overflow-wrap: anywhere;
  color: #38281d;
  font-weight: 650;
}

.card-effect {
  z-index: 2;
  opacity: var(--effect-opacity);
  mix-blend-mode: screen;
  animation: effect-breathe var(--effect-duration) ease-in-out infinite alternate;
  transform: scale(1.02) translate3d(0, 0, 1px);
  transition: opacity 220ms ease;
  will-change: opacity, filter, transform;
  pointer-events: none;
}

.card-scene.effects-disabled .card-effect {
  opacity: 0;
  animation-play-state: paused;
}

.card-scene[data-effect="aurora"] .card-effect {
  animation-name: effect-aurora;
}

.card-scene[data-effect="starlight"] .card-effect {
  animation-name: effect-starlight;
}

.card-scene[data-effect="lightning"] .card-effect {
  animation-name: effect-lightning;
  animation-timing-function: linear;
  animation-direction: normal;
}

.card-glare,
.card-back-light {
  position: absolute;
  inset: -12%;
  border-radius: 20%;
  pointer-events: none;
  transform: translateZ(2px);
}

.card-glare {
  opacity: 0.68;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, 0.88), rgba(145, 255, 244, 0.22) 18%, transparent 43%),
    linear-gradient(118deg, transparent 28%, rgba(255, 205, 249, 0.2) 42%, rgba(161, 244, 255, 0.26) 51%, transparent 64%);
}

.card-back-light {
  z-index: 3;
  opacity: 0.4;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 246, 219, 0.72), transparent 42%);
}

@keyframes effect-breathe {
  from {
    opacity: calc(var(--effect-opacity) * 0.72);
    filter: saturate(0.92) brightness(0.98);
  }
  to {
    opacity: var(--effect-opacity);
    filter: saturate(1.22) brightness(1.12);
  }
}

@keyframes effect-aurora {
  0% {
    opacity: calc(var(--effect-opacity) * 0.68);
    filter: saturate(0.96) hue-rotate(-5deg) brightness(0.96);
    transform: scale(1.025) translate3d(-0.6%, 0.3%, 1px);
  }
  50% {
    opacity: var(--effect-opacity);
    filter: saturate(1.28) hue-rotate(8deg) brightness(1.12);
    transform: scale(1.04) translate3d(0.8%, -0.4%, 1px);
  }
  100% {
    opacity: calc(var(--effect-opacity) * 0.74);
    filter: saturate(1.05) hue-rotate(-2deg) brightness(1.01);
    transform: scale(1.025) translate3d(-0.2%, -0.7%, 1px);
  }
}

@keyframes effect-starlight {
  0%, 16%, 42%, 72%, 100% {
    opacity: calc(var(--effect-opacity) * 0.58);
    filter: saturate(0.94) brightness(0.92);
    transform: scale(1.018) translate3d(-0.2%, 0.2%, 1px);
  }
  9%, 34%, 64%, 87% {
    opacity: var(--effect-opacity);
    filter: saturate(1.22) brightness(1.32) drop-shadow(0 0 7px rgba(220, 245, 255, 0.58));
    transform: scale(1.035) translate3d(0.25%, -0.25%, 1px);
  }
}

@keyframes effect-lightning {
  0%, 8%, 15%, 45%, 53%, 79%, 87%, 100% {
    opacity: calc(var(--effect-opacity) * 0.16);
    filter: brightness(0.86) saturate(0.9);
    transform: scale(1.018) translate3d(0, 0, 1px);
  }
  9%, 12%, 46%, 49%, 80%, 83% {
    opacity: var(--effect-opacity);
    filter: brightness(1.72) saturate(1.28) drop-shadow(0 0 10px rgba(165, 222, 255, 0.88));
    transform: scale(1.036) translate3d(0.35%, -0.2%, 1px);
  }
  10.5%, 47.5%, 81.5% {
    opacity: calc(var(--effect-opacity) * 0.42);
    filter: brightness(1.12) saturate(1.05);
  }
}

.interaction-tip {
  margin: 18px 0 0;
  color: #a9a4b6;
  font-size: 13px;
  text-align: center;
}

.archive-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.archive-panel div {
  min-width: 0;
  padding: 14px 12px;
  background: rgba(13, 15, 26, 0.86);
}

.archive-panel span,
.archive-panel strong {
  display: block;
}

.archive-panel span {
  margin-bottom: 5px;
  color: #868193;
  font-size: 11px;
}

.archive-panel strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.action {
  min-height: 50px;
  padding: 0 16px;
  border-radius: 15px;
  font-weight: 650;
}

.action:disabled {
  cursor: wait;
  opacity: 0.42;
}

.action.secondary {
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #eeeaf5;
  background: rgba(255, 255, 255, 0.055);
}

.action.primary {
  grid-column: 1 / -1;
  border: 0;
  color: #0d1020;
  background: linear-gradient(135deg, #d8c8ff, #9ee9f1);
  box-shadow: 0 12px 30px rgba(122, 213, 225, 0.14);
}

.action-status {
  min-height: 20px;
  margin: 10px 4px 0;
  color: #aaa5b8;
  font-size: 12px;
  text-align: center;
}

.share-sheet[hidden] {
  display: none;
}

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.share-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 4, 10, 0.76);
  backdrop-filter: blur(10px);
}

.share-sheet-panel {
  position: relative;
  width: min(100%, 520px);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 0%, rgba(152, 115, 235, 0.2), transparent 45%),
    #111522;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
  animation: share-sheet-enter 220ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.share-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.share-sheet-heading span,
.share-sheet-heading strong {
  display: block;
}

.share-sheet-heading span {
  margin-bottom: 4px;
  color: #a29bac;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.share-sheet-heading strong {
  font-size: 20px;
}

.share-sheet-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #e9e5ef;
  background: rgba(255, 255, 255, 0.06);
  font-size: 24px;
  line-height: 1;
}

.share-choice {
  display: grid;
  width: 100%;
  min-height: 66px;
  margin-top: 10px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 17px;
  color: #f4f1f8;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
}

.share-choice.primary {
  border-color: rgba(183, 225, 240, 0.24);
  color: #0c1020;
  background: linear-gradient(135deg, #dccfff, #a7edf3);
}

.share-choice span {
  font-size: 15px;
  font-weight: 700;
}

.share-choice small {
  margin-top: 3px;
  color: #aaa5b6;
  font-size: 11px;
}

.share-choice.primary small {
  color: rgba(14, 20, 38, 0.66);
}

.share-choice:focus-visible,
.share-sheet-close:focus-visible {
  outline: 3px solid #b8f4ff;
  outline-offset: 3px;
}

.share-sheet-hint,
.share-sheet-status {
  margin: 12px 4px 0;
  color: #9e98a9;
  font-size: 12px;
  line-height: 1.6;
}

.share-sheet-status {
  min-height: 19px;
  color: #b8eee7;
}

@keyframes share-sheet-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.creator-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.creator-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  object-fit: cover;
  background: #171925;
}

.creator-copy {
  min-width: 0;
}

.creator-copy span,
.creator-copy strong {
  display: block;
}

.creator-copy span {
  margin-bottom: 4px;
  color: #8f899d;
  font-size: 11px;
}

.creator-copy strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-link {
  padding: 9px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  background: linear-gradient(135deg, #fb7299, #e9557f);
  box-shadow: 0 8px 22px rgba(251, 114, 153, 0.16);
}

.social-link:focus-visible {
  outline: 3px solid #b8f4ff;
  outline-offset: 3px;
}

.disclaimer {
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  color: #9a95a7;
  background: rgba(0, 0, 0, 0.14);
  font-size: 12px;
}

.disclaimer summary {
  padding: 13px 0;
  cursor: pointer;
  color: #bcb7c7;
}

.disclaimer p {
  margin: -2px 0 14px;
  line-height: 1.75;
}

noscript {
  display: block;
  padding: 20px;
  color: white;
  text-align: center;
}

@media (max-width: 430px) {
  .page-shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  .card-stage {
    min-height: min(68svh, 640px);
    padding-top: 16px;
  }

  .archive-panel {
    grid-template-columns: 1fr 1fr;
  }

  .archive-panel div:last-child {
    grid-column: 1 / -1;
  }

  .creator-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .creator-avatar {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-effect {
    animation: none;
  }

  .card-rotator,
  .card-poster,
  .card-control,
  .card-scene {
    transition-duration: 1ms;
  }

  .share-sheet-panel {
    animation: none;
  }
}