:root {
      color-scheme: light;
      --ink: #5b4150;
      --muted: #9a7485;
      --line: rgba(255, 122, 164, 0.24);
      --paper: #fff4f8;
      --surface: rgba(255, 255, 255, 0.72);
      --accent: #ff7aa4;
      --warm: #ffe28f;
      --cool: #9cf3e6;
      --mx: 50vw;
      --my: 42vh;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background: var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
    }

    body::before {
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 122, 164, 0.26), transparent 24rem),
        radial-gradient(circle at 84% 18%, rgba(156, 243, 230, 0.22), transparent 28rem),
        radial-gradient(circle at 18% 82%, rgba(255, 226, 143, 0.22), transparent 24rem),
        linear-gradient(135deg, #fff8fb 0%, #ffdce8 48%, #fff6d8 100%);
      transition: background 120ms linear;
    }

    body::after {
      opacity: 0.76;
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 4px, transparent 5px),
        radial-gradient(circle, rgba(255, 122, 164, 0.18) 0 2px, transparent 3px);
      background-position: 0 0, 28px 28px;
      background-size: 56px 56px;
      mask-image: radial-gradient(circle at center, black, transparent 82%);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .fx-canvas {
      position: fixed;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .light-field {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .beam {
      position: absolute;
      width: 42vw;
      height: 1px;
      left: -16vw;
      top: 24vh;
      background: linear-gradient(90deg, transparent, rgba(255, 122, 164, 0.5), transparent);
      filter: blur(1px);
      transform: rotate(-18deg);
      animation: beam 9s ease-in-out infinite;
    }

    .beam:nth-child(2) {
      top: 52vh;
      animation-delay: -3.4s;
      background: linear-gradient(90deg, transparent, rgba(156, 243, 230, 0.5), transparent);
      transform: rotate(11deg);
    }

    .beam:nth-child(3) {
      top: 76vh;
      animation-delay: -6.1s;
      background: linear-gradient(90deg, transparent, rgba(255, 226, 143, 0.48), transparent);
      transform: rotate(-8deg);
    }

    .shell {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255, 248, 251, 0.74);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 68px;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 650;
    }

    .mark {
      width: 19px;
      height: 19px;
      border: 1px solid rgba(255, 122, 164, 0.64);
      border-radius: 50%;
      position: relative;
      box-shadow: 0 0 30px rgba(255, 122, 164, 0.42);
    }

    .mark::before,
    .mark::after {
      content: "";
      position: absolute;
      border-radius: inherit;
    }

    .mark::before {
      inset: -7px;
      border: 1px solid rgba(255, 122, 164, 0.26);
      animation: halo 3.5s ease-in-out infinite;
    }

    .mark::after {
      inset: 4px;
      background: var(--accent);
      animation: pulse 2.7s ease-in-out infinite;
    }

    .links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: var(--muted);
      font-size: 14px;
    }

    .links a {
      transition: color 180ms ease, text-shadow 180ms ease;
    }

    .links a:hover {
      color: var(--ink);
      text-shadow: 0 0 18px rgba(255, 122, 164, 0.55);
    }

    main {
      padding-bottom: 72px;
    }

    .hero {
      display: grid;
      align-items: end;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 48px;
      min-height: calc(100vh - 128px);
      padding: 88px 0 64px;
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      text-shadow: 0 0 24px rgba(255, 159, 186, 0.5);
    }

    h1 {
      max-width: 860px;
      margin: 0;
      font-size: clamp(52px, 8vw, 112px);
      line-height: 0.95;
      font-weight: 680;
      letter-spacing: 0;
    }

    .glow-text {
      color: transparent;
      background: linear-gradient(92deg, var(--ink), var(--accent), var(--cool), var(--warm), var(--ink));
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: textFlow 7s ease-in-out infinite;
    }

    .rainbow-name {
      color: transparent;
      background: linear-gradient(95deg, #ff5f9e, #ffcf5a, #86f7df, #8bb7ff, #ff7aa4);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      font-weight: 760;
      text-shadow: 0 0 22px rgba(255, 122, 164, 0.22);
      animation: textFlow 5.8s ease-in-out infinite;
    }

    .pet-name {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      padding: 9px 14px;
      border: 1px solid rgba(255, 122, 164, 0.24);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--muted);
      font-size: 14px;
      box-shadow: 0 10px 28px rgba(255, 122, 164, 0.12);
    }

    .intro {
      max-width: 620px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.8;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 36px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid rgba(255, 122, 164, 0.42);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 650;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 34px rgba(255, 122, 164, 0.28);
      border-color: var(--accent);
    }

    .button.secondary {
      background: rgba(255, 255, 255, 0.42);
      color: var(--ink);
    }

    .hero-art {
      align-self: end;
      padding: 13px;
      border: 1px solid rgba(255, 122, 164, 0.32);
      border-radius: 22px;
      background:
        radial-gradient(circle at 20% 18%, rgba(255, 226, 143, 0.34), transparent 10rem),
        rgba(255, 255, 255, 0.68);
      box-shadow: 0 18px 60px rgba(255, 122, 164, 0.22);
      position: relative;
      overflow: visible;
    }

    .hero-art::before {
      content: "";
      position: absolute;
      width: 58px;
      height: 42px;
      right: 24px;
      top: -21px;
      background: var(--accent);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      filter: drop-shadow(0 8px 16px rgba(255, 122, 164, 0.28));
    }

    .hero-art img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      border: 6px solid #fff;
      box-shadow: inset 0 0 0 1px rgba(255, 122, 164, 0.18);
    }

    .side-note {
      align-self: end;
      border-left: 1px solid var(--line);
      padding-left: 24px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      position: relative;
      display: none;
    }

    .side-note::before {
      content: "";
      position: absolute;
      left: -1px;
      top: 0;
      width: 1px;
      height: 42%;
      background: var(--accent);
      box-shadow: 0 0 24px var(--accent);
      animation: scan 3.8s ease-in-out infinite;
    }

    .side-note strong {
      display: block;
      margin-bottom: 10px;
      color: var(--ink);
      font-size: 15px;
    }

    .section {
      display: grid;
      grid-template-columns: 1fr;
      gap: 52px;
      padding: 58px 0 24px;
      border-bottom: 1px solid var(--line);
    }

    .section h2::after {
      content: "";
      display: block;
      width: 46px;
      height: 32px;
      margin-top: 18px;
      background: var(--accent);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      opacity: 0.9;
    }

    .section h2 {
      margin: 0;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 650;
      letter-spacing: 0;
    }

    .section p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.85;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .tile {
      min-height: 210px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.58);
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
      transition: background 220ms ease, transform 220ms ease;
    }

    .tile::before {
      content: "";
      position: absolute;
      inset: -1px;
      opacity: 0;
      background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 122, 164, 0.24), transparent 18rem);
      transition: opacity 220ms ease;
    }

    .tile:hover {
      background: rgba(255, 255, 255, 0.82);
      transform: translateY(-3px);
    }

    .tile:hover::before {
      opacity: 1;
    }

    .tile > * {
      position: relative;
      z-index: 1;
    }

    .tile span {
      color: var(--accent);
      font-size: 13px;
      font-weight: 750;
    }

    .tile h3 {
      margin: 58px 0 10px;
      font-size: 18px;
      font-weight: 650;
      letter-spacing: 0;
    }

    .tile p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .vow {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      margin-top: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-top: 0;
    }

    .vow-card {
      min-height: 170px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.58);
    }

    .vow-card span {
      color: var(--cool);
      font-size: 13px;
      font-weight: 750;
    }

    .vow-card p {
      margin: 40px 0 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.75;
    }

    .photo-wall {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 12px;
      margin-top: 14px;
      background: transparent;
      border: 1px solid var(--line);
      border-width: 1px 0 0;
      padding-top: 14px;
    }

    .photo-frame {
      position: relative;
      overflow: hidden;
      width: min(100%, 920px);
      margin: 0 auto;
      border: 8px solid #fff;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 14px 38px rgba(255, 122, 164, 0.18);
    }

    .photo-frame.wide {
      width: min(100%, 980px);
    }

    .photo-frame.portrait {
      width: 100%;
    }

    .photo-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg, transparent 56%, rgba(91, 65, 80, 0.58)),
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 122, 164, 0.18), transparent 18rem);
      opacity: 0.7;
      transition: opacity 220ms ease;
    }

    .photo-frame::after {
      content: "";
      position: absolute;
      z-index: 3;
      width: 42px;
      height: 30px;
      right: 16px;
      top: 14px;
      background: var(--accent);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      opacity: 0.92;
      filter: drop-shadow(0 6px 10px rgba(255, 122, 164, 0.26));
    }

    .photo-frame img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 520ms ease, filter 520ms ease;
    }

    .photo-frame:hover img {
      transform: scale(1.045);
      filter: saturate(1.08) brightness(1.04);
    }


    .photo-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      align-items: start;
      gap: 14px;
      margin-top: 14px;
      background: transparent;
      border: 0;
      padding-top: 0;
    }

    .memory-timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 12px;
    }

    .memory-timeline::before {
      content: "";
      position: absolute;
      left: 7%;
      right: 7%;
      top: 34px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255, 79, 134, 0.38), rgba(255, 232, 143, 0.42), rgba(138, 200, 255, 0.34), transparent);
      filter: drop-shadow(0 0 10px rgba(255, 79, 134, 0.22));
      display: none;
    }

    .timeline-item {
      position: relative;
      min-height: 210px;
      overflow: hidden;
      padding: 54px 20px 20px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 26px;
      background:
        radial-gradient(circle at 82% 12%, rgba(255, 232, 143, 0.28), transparent 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 249, 0.58));
      box-shadow:
        0 18px 44px rgba(255, 122, 164, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: 20px;
      top: 25px;
      width: 15px;
      height: 15px;
      border: 4px solid rgba(255, 255, 255, 0.92);
      border-radius: 50%;
      background: var(--kitty-red);
      box-shadow:
        0 0 0 8px rgba(255, 122, 164, 0.1),
        0 0 22px rgba(255, 79, 134, 0.44);
    }

    .timeline-item span,
    .travel-note-card span,
    .memory-card span {
      color: var(--cool);
      font-size: 12px;
      font-weight: 820;
      letter-spacing: 0;
    }

    .timeline-item h3,
    .travel-note-card h3 {
      margin: 12px 0 10px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.25;
      font-weight: 760;
    }

    .timeline-item p,
    .travel-note-card p,
    .memory-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .timeline-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .timeline-gallery.single {
      grid-template-columns: 1fr;
    }

    .timeline-gallery img {
      width: 100%;
      aspect-ratio: 4 / 3;
      display: block;
      object-fit: cover;
      border: 7px solid rgba(255, 255, 255, 0.88);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 12px 28px rgba(255, 122, 164, 0.14);
      transition: transform 260ms ease, filter 260ms ease;
    }

    .timeline-gallery img:hover {
      transform: translateY(-3px) scale(1.015);
      filter: saturate(1.06) brightness(1.02);
    }

    .imessage-stack {
      position: relative;
      width: min(100%, 360px);
      height: 480px;
      margin-top: 18px;
      isolation: isolate;
      touch-action: pan-y;
      user-select: none;
    }

    .stack-stage {
      position: absolute;
      inset: 0 24px 34px 0;
      perspective: 900px;
    }

    .stack-photo {
      position: absolute;
      inset: 0;
      margin: 0;
      overflow: hidden;
      border: 7px solid rgba(255, 255, 255, 0.9);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow:
        0 22px 44px rgba(255, 103, 158, 0.22),
        0 8px 18px rgba(119, 74, 93, 0.12);
      transform: translate3d(26px, 18px, -80px) scale(0.9) rotate(1.6deg);
      opacity: 0;
      pointer-events: none;
      transition:
        transform 360ms cubic-bezier(.2, .8, .2, 1),
        opacity 260ms ease,
        filter 260ms ease;
    }

    .stack-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .stack-photo.is-active {
      z-index: 5;
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1) rotate(-0.6deg);
      filter: saturate(1.05) brightness(1.02);
    }

    .stack-photo.is-next {
      z-index: 4;
      opacity: 0.86;
      transform: translate3d(18px, 16px, -24px) scale(0.96) rotate(1.4deg);
      filter: saturate(0.96);
    }

    .stack-photo.is-after {
      z-index: 3;
      opacity: 0.58;
      transform: translate3d(34px, 30px, -60px) scale(0.91) rotate(2.2deg);
      filter: saturate(0.88) brightness(0.98);
    }

    .stack-nav {
      position: absolute;
      top: calc(50% - 18px);
      z-index: 8;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255, 122, 164, 0.24);
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #d85287;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 12px 28px rgba(255, 122, 164, 0.18);
      cursor: pointer;
      font-size: 28px;
      line-height: 1;
      backdrop-filter: blur(14px);
      transition: transform 180ms ease, background 180ms ease;
    }

    .stack-nav:hover {
      transform: translateY(-1px) scale(1.04);
      background: rgba(255, 247, 251, 0.94);
    }

    .stack-prev {
      left: -10px;
    }

    .stack-next {
      right: 8px;
    }

    .stack-dots {
      position: absolute;
      left: 0;
      right: 24px;
      bottom: 2px;
      z-index: 8;
      display: flex;
      justify-content: center;
      gap: 7px;
    }

    .stack-dots button {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 122, 164, 0.28);
      cursor: pointer;
      transition: width 200ms ease, background 200ms ease;
    }

    .stack-dots button.is-active {
      width: 20px;
      background: rgba(255, 91, 145, 0.78);
    }

    .travel-board {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.65fr);
      gap: 16px;
      margin-top: 1px;
    }

    .travel-map {
      position: relative;
      min-height: 410px;
      overflow: hidden;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 32px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 232, 143, 0.42), transparent 9rem),
        radial-gradient(circle at 76% 74%, rgba(138, 203, 255, 0.24), transparent 11rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 242, 248, 0.52));
      box-shadow:
        0 22px 54px rgba(255, 122, 164, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(16px);
    }

    .travel-map::before {
      content: "";
      position: absolute;
      inset: 36px 54px;
      border: 1px solid rgba(255, 122, 164, 0.18);
      border-radius: 46% 54% 50% 50% / 42% 38% 62% 58%;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 225, 238, 0.64)),
        radial-gradient(circle at 48% 50%, rgba(255, 122, 164, 0.14), transparent 12rem);
      clip-path: polygon(44% 3%, 60% 9%, 73% 21%, 84% 39%, 78% 55%, 86% 70%, 72% 91%, 55% 85%, 42% 94%, 30% 75%, 18% 64%, 25% 44%, 18% 30%, 31% 18%);
      filter: drop-shadow(0 24px 36px rgba(255, 122, 164, 0.16));
    }

    .travel-map::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255, 122, 164, 0.24) 0 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px);
      background-position: 0 0, 16px 18px;
      background-size: 44px 44px, 78px 78px;
      opacity: 0.4;
      pointer-events: none;
    }

    .travel-route {
      position: absolute;
      inset: 42px 66px 42px 66px;
      z-index: 2;
      width: calc(100% - 132px);
      height: calc(100% - 84px);
      overflow: visible;
      filter: drop-shadow(0 0 10px rgba(255, 79, 134, 0.38));
    }

    .travel-route path {
      fill: none;
      stroke: var(--kitty-red);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 5 6;
      animation: routeGlow 5s linear infinite;
    }

    .map-glow {
      position: absolute;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 72px;
      min-height: 42px;
      padding: 10px 14px;
      border: 1px solid rgba(255, 79, 134, 0.26);
      border-radius: 999px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 236, 246, 0.86)),
        radial-gradient(circle at 30% 20%, rgba(255, 232, 143, 0.32), transparent 4rem);
      color: var(--ink);
      font-size: 15px;
      font-weight: 780;
      box-shadow:
        0 14px 32px rgba(255, 79, 134, 0.2),
        0 0 0 8px rgba(255, 122, 164, 0.1);
      transform: translate(-50%, -50%);
      animation: cityPulse 2.8s ease-in-out infinite;
    }

    .map-glow::before {
      content: "";
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--kitty-red);
      box-shadow:
        0 0 0 6px rgba(255, 122, 164, 0.16),
        0 0 22px rgba(255, 79, 134, 0.68);
    }

    .map-glow::after {
      content: "";
      position: absolute;
      right: -8px;
      top: -7px;
      width: 30px;
      height: 22px;
      background: var(--kitty-red);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      filter: drop-shadow(0 6px 10px rgba(255, 79, 134, 0.22));
    }

    .map-beijing {
      left: 48%;
      top: 22%;
    }

    .map-wuhan {
      left: 52%;
      top: 52%;
      animation-delay: -0.6s;
    }

    .map-shenzhen {
      left: 62%;
      top: 79%;
      animation-delay: -1.2s;
    }

    .map-huizhou {
      left: 69%;
      top: 74%;
      animation-delay: -1.8s;
    }

    .travel-stats {
      display: grid;
      gap: 16px;
    }

    .travel-stats article {
      position: relative;
      display: flex;
      min-height: 197px;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: 22px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 28px;
      background:
        radial-gradient(circle at 80% 14%, rgba(255, 232, 143, 0.36), transparent 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 242, 248, 0.58));
      box-shadow:
        0 18px 44px rgba(255, 122, 164, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .travel-stats article::before {
      content: "";
      position: absolute;
      right: -32px;
      top: -28px;
      width: 118px;
      height: 118px;
      border-radius: 50%;
      background: rgba(255, 122, 164, 0.14);
      filter: blur(8px);
    }

    .travel-stats span {
      position: relative;
      z-index: 1;
      color: var(--ink);
      font-size: clamp(48px, 7vw, 86px);
      font-weight: 700;
      line-height: 0.92;
    }

    .travel-stats p {
      position: relative;
      z-index: 1;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    .city-albums {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .city-card {
      position: relative;
      overflow: hidden;
      padding: 18px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 30px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 245, 250, 0.58)),
        radial-gradient(circle at 84% 16%, rgba(138, 203, 255, 0.16), transparent 9rem);
      box-shadow:
        0 18px 48px rgba(255, 122, 164, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(14px);
    }

    .city-card::before {
      content: "";
      position: absolute;
      right: 18px;
      top: 18px;
      width: 36px;
      height: 26px;
      background: var(--kitty-pink);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      opacity: 0.86;
      filter: drop-shadow(0 6px 10px rgba(255, 122, 164, 0.22));
    }

    .city-card-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin: 0 52px 16px 0;
    }

    .city-card-head span {
      color: var(--cool);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .city-card-head h3 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 700;
      line-height: 1;
    }

    .city-photo-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-flow: dense;
      gap: 10px;
    }

    .city-photo-slot {
      display: flex;
      min-height: 142px;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px dashed rgba(255, 79, 134, 0.32);
      border-radius: 22px;
      background:
        radial-gradient(circle at 28% 24%, rgba(255, 232, 143, 0.34), transparent 5rem),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0 12px, rgba(255, 236, 246, 0.8) 12px 24px);
      color: rgba(94, 70, 84, 0.62);
      font-size: 14px;
      font-weight: 760;
      text-align: center;
    }

    .city-photo-slot:first-child {
      grid-column: span 2;
      min-height: 180px;
    }

    .city-photo-slot img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 20px;
    }

    .travel-notes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .travel-note-card {
      position: relative;
      min-height: 220px;
      overflow: hidden;
      padding: 20px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 16%, rgba(255, 232, 143, 0.28), transparent 7rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 244, 249, 0.58));
      box-shadow:
        0 18px 44px rgba(255, 122, 164, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .travel-note-card::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 16px;
      width: 34px;
      height: 24px;
      background: var(--kitty-pink);
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      opacity: 0.86;
      filter: drop-shadow(0 6px 10px rgba(255, 122, 164, 0.22));
    }

    .travel-note-card p {
      min-height: 74px;
      padding-right: 6px;
    }

    .travel-note-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .travel-note-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid rgba(255, 122, 164, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .memory-shuffle {
      margin-top: 12px;
    }

    .memory-machine {
      display: grid;
      grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
      padding: 14px;
      border: 1px solid rgba(255, 122, 164, 0.16);
      border-radius: 30px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(255, 243, 248, 0.3)),
        repeating-linear-gradient(90deg, rgba(255, 111, 159, 0.05) 0 1px, transparent 1px 38px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
      backdrop-filter: blur(14px);
    }

    .memory-button {
      position: relative;
      overflow: hidden;
      min-height: 132px;
      border: 1px solid transparent;
      border-radius: 24px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(110deg, var(--kitty-red), var(--kitty-yellow), var(--cool), var(--kitty-pink)) border-box;
      color: var(--ink);
      cursor: pointer;
      font-size: 18px;
      font-weight: 820;
      box-shadow: 0 16px 38px rgba(255, 122, 164, 0.16);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .memory-button::before {
      content: "";
      position: absolute;
      inset: -40% auto -40% -35%;
      width: 48%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
      transform: skewX(-18deg);
      transition: transform 520ms ease;
    }

    .memory-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 24px 58px rgba(255, 122, 164, 0.24);
    }

    .memory-button:hover::before {
      transform: translateX(270%) skewX(-18deg);
    }

    .memory-card {
      position: relative;
      min-height: 132px;
      overflow: hidden;
      padding: 22px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 24px;
      background:
        radial-gradient(circle at 88% 18%, rgba(255, 232, 143, 0.3), transparent 8rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 249, 0.58));
      box-shadow:
        0 18px 44px rgba(255, 122, 164, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .memory-card::after {
      content: "";
      position: absolute;
      right: 22px;
      bottom: 18px;
      width: 52px;
      height: 52px;
      background: rgba(255, 79, 134, 0.12);
      clip-path: polygon(50% 90%, 12% 54%, 5% 28%, 20% 10%, 39% 18%, 50% 35%, 61% 18%, 80% 10%, 95% 28%, 88% 54%);
    }

    .memory-card p {
      position: relative;
      z-index: 1;
      margin-top: 18px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.75;
    }

    .memory-card.is-changing {
      animation: memoryPop 360ms ease;
    }

    .girlfriend-profile,
    .time-capsule {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 12px;
    }

    .profile-card,
    .capsule-card {
      position: relative;
      overflow: hidden;
      min-height: 190px;
      padding: 22px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 28px;
      background:
        radial-gradient(circle at 18% 16%, rgba(255, 232, 143, 0.26), transparent 8rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 249, 0.58));
      box-shadow:
        0 18px 44px rgba(255, 122, 164, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
      backdrop-filter: blur(14px);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .profile-card:hover,
    .capsule-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 111, 159, 0.3);
      box-shadow: 0 24px 64px rgba(226, 88, 134, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .profile-card::after,
    .capsule-card::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 18px;
      width: 36px;
      height: 26px;
      background: linear-gradient(135deg, var(--kitty-pink), var(--kitty-yellow));
      clip-path: polygon(0 50%, 38% 10%, 50% 42%, 62% 10%, 100% 50%, 62% 90%, 50% 58%, 38% 90%);
      opacity: 0.78;
      filter: drop-shadow(0 6px 10px rgba(255, 122, 164, 0.22));
    }

    .main-profile,
    .capsule-intro {
      grid-column: span 2;
      background:
        radial-gradient(circle at 84% 18%, rgba(156, 243, 230, 0.2), transparent 9rem),
        radial-gradient(circle at 18% 78%, rgba(255, 232, 143, 0.28), transparent 8rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 239, 247, 0.62));
    }

    .profile-card span,
    .capsule-card span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid rgba(255, 122, 164, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.62);
      color: var(--rose-deep);
      font-size: 12px;
      font-weight: 800;
    }

    .profile-card h3,
    .capsule-card h3 {
      margin: 30px 0 10px;
      font-size: 24px;
      line-height: 1.2;
    }

    .profile-card p,
    .capsule-card p {
      margin: 16px 0 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.75;
    }

    .profile-card ul {
      display: grid;
      gap: 10px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .profile-card li {
      min-height: 34px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 122, 164, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.58);
      color: var(--ink);
      font-weight: 720;
    }

    .name-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 28px;
    }

    .name-tags strong {
      min-height: 38px;
      padding: 8px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255, 122, 164, 0.18), rgba(156, 243, 230, 0.16));
      color: var(--rose-deep);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .time-capsule {
      grid-template-columns: minmax(0, 0.75fr) minmax(280px, 1fr) minmax(0, 0.75fr);
    }

    .capsule-form {
      display: grid;
      gap: 14px;
    }

    .capsule-form label {
      display: grid;
      gap: 8px;
    }

    .capsule-form input,
    .capsule-form textarea {
      width: 100%;
      border: 1px solid rgba(255, 122, 164, 0.22);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      font: inherit;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .capsule-form input {
      min-height: 46px;
      padding: 0 14px;
    }

    .capsule-form textarea {
      resize: vertical;
      min-height: 142px;
      padding: 14px;
      line-height: 1.7;
    }

    .capsule-form input:focus,
    .capsule-form textarea:focus {
      border-color: rgba(255, 79, 134, 0.48);
      box-shadow: 0 0 0 4px rgba(255, 122, 164, 0.12);
    }

    .capsule-form button {
      min-height: 46px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--kitty-red), var(--kitty-pink), var(--kitty-yellow));
      color: #fff;
      cursor: pointer;
      font: inherit;
      font-weight: 820;
      box-shadow: 0 16px 34px rgba(255, 79, 134, 0.22);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .capsule-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 48px rgba(255, 79, 134, 0.28);
    }

    .qa-item span {
      color: var(--cool);
      font-size: 13px;
      font-weight: 750;
    }

    .secret-note {
      margin: 18px auto 0;
      width: min(100%, 760px);
      position: relative;
      z-index: 2;
    }

    .secret-note summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 72px;
      padding: 18px 22px;
      border: 2px solid rgba(255, 122, 164, 0.36);
      border-radius: 22px;
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 226, 143, 0.3), transparent 9rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.62) 0 31px, rgba(255, 122, 164, 0.12) 32px),
        rgba(255, 255, 255, 0.86);
      color: var(--ink);
      font-size: 20px;
      font-weight: 760;
      box-shadow: 0 18px 42px rgba(255, 122, 164, 0.18);
    }

    .secret-note summary::-webkit-details-marker {
      display: none;
    }

    .secret-note-panel {
      max-height: 0;
      overflow: hidden;
      margin-top: 0;
      border: 0 solid rgba(255, 122, 164, 0.28);
      border-radius: 0 0 22px 22px;
      background:
        linear-gradient(90deg, rgba(255, 122, 164, 0.12) 1px, transparent 1px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.78) 0 31px, rgba(255, 122, 164, 0.12) 32px),
        rgba(255, 255, 255, 0.9);
      box-shadow: 0 18px 42px rgba(255, 122, 164, 0.14);
      transition: max-height 520ms ease, margin-top 220ms ease, border-width 220ms ease;
    }

    .secret-note:hover .secret-note-panel,
    .secret-note:focus-within .secret-note-panel,
    .secret-note[open] .secret-note-panel {
      max-height: 1120px;
      margin-top: 10px;
      border-width: 1px;
    }

    .secret-note.long-note .secret-note-panel {
      overflow-y: auto;
    }

    .secret-note.long-note:hover .secret-note-panel,
    .secret-note.long-note:focus-within .secret-note-panel,
    .secret-note.long-note[open] .secret-note-panel {
      max-height: min(72vh, 760px);
    }

    .secret-note ol {
      margin: 0;
      padding: 22px 28px 24px 52px;
      color: var(--ink);
      font-size: 15px;
      line-height: 2;
    }

    .secret-note li::marker {
      color: var(--accent);
      font-weight: 760;
    }

    .secret-letter {
      margin: 0;
      padding: 24px 28px 28px;
      color: var(--ink);
      font-size: 15px;
      line-height: 2;
    }

    .secret-letter p {
      margin: 0 0 18px;
    }

    .qa {
      display: grid;
      gap: 1px;
      margin-top: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-top: 0;
    }

    .qa-item {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 28px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.58);
    }

    .qa-item h3 {
      margin: 14px 0 0;
      font-size: 20px;
      font-weight: 650;
      line-height: 1.35;
    }

    .qa-item p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.8;
    }

    .anniversary {
      display: grid;
      grid-template-columns: 0.75fr 1.25fr;
      gap: 1px;
      margin-top: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-top: 0;
    }

    .birthday-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 1px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .anniversary-card {
      min-height: 260px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.58);
      position: relative;
      overflow: hidden;
    }

    .anniversary-card::before {
      content: "";
      position: absolute;
      inset: auto -80px -110px auto;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(255, 122, 164, 0.16);
      filter: blur(18px);
    }

    .anniversary-card span,
    .time-unit span {
      color: var(--cool);
      font-size: 13px;
      font-weight: 750;
    }

    .anniversary-card strong {
      display: block;
      position: relative;
      z-index: 1;
      margin-top: 54px;
      font-size: clamp(34px, 6vw, 72px);
      line-height: 0.95;
      font-weight: 680;
      letter-spacing: 0;
    }

    .anniversary-card p {
      position: relative;
      z-index: 1;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
    }

    .birthday-grid .anniversary-card strong {
      font-size: clamp(32px, 5vw, 58px);
    }

    .time-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
    }

    .time-unit {
      min-height: 130px;
      padding: 22px;
      background: rgba(255, 255, 255, 0.58);
    }

    .time-unit strong {
      display: block;
      margin-top: 34px;
      color: var(--ink);
      font-size: clamp(30px, 4vw, 54px);
      line-height: 1;
      font-weight: 680;
    }

    .time-unit small {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 34px 0;
      color: var(--muted);
      font-size: 13px;
    }

    /* Premium polish layer */
    header {
      top: 14px;
      width: min(1120px, calc(100% - 28px));
      margin: 0 auto;
      border: 1px solid rgba(255, 122, 164, 0.22);
      border-radius: 999px;
      box-shadow: 0 18px 44px rgba(255, 122, 164, 0.14);
    }

    nav.shell {
      width: calc(100% - 26px);
      min-height: 58px;
    }

    .brand {
      padding: 8px 2px;
    }

    .links {
      gap: 6px;
      padding: 5px;
      border: 1px solid rgba(255, 122, 164, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.46);
    }

    .links a {
      padding: 7px 11px;
      border-radius: 999px;
    }

    .links a:hover {
      background: rgba(255, 255, 255, 0.7);
    }

    .hero {
      position: relative;
      grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
      padding-top: 118px;
      border-bottom: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 122, 164, 0.42), transparent);
    }

    .eyebrow,
    .pet-name {
      width: fit-content;
    }

    .eyebrow {
      padding: 7px 12px;
      border: 1px solid rgba(255, 122, 164, 0.22);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.42);
    }

    .intro {
      padding: 18px 20px;
      border: 1px solid rgba(255, 122, 164, 0.18);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.48);
      box-shadow: 0 18px 44px rgba(255, 122, 164, 0.12);
      backdrop-filter: blur(18px);
    }

    .button {
      min-height: 48px;
      padding: 0 22px;
      box-shadow: 0 12px 26px rgba(255, 122, 164, 0.14);
    }

    .hero-art,
    .tile,
    .qa-item,
    .vow-card,
    .anniversary-card,
    .time-unit,
    .photo-frame,
    .secret-note summary,
    .secret-note-panel {
      border-color: rgba(255, 122, 164, 0.22);
      box-shadow:
        0 18px 48px rgba(255, 122, 164, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .hero-art,
    .tile,
    .qa-item,
    .vow-card,
    .anniversary-card,
    .time-unit {
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 24px;
    }

    .hero-art {
      width: 100%;
      max-width: 560px;
      justify-self: end;
      padding: 16px;
      border-radius: 30px;
    }

    .hero-art img {
      border-width: 8px;
      border-radius: 22px;
    }

    .grid,
    .qa,
    .vow,
    .anniversary,
    .time-grid {
      gap: 16px;
      background: transparent;
      border: 0;
    }

    .section {
      margin-top: 18px;
      padding: 70px 0 22px;
      border-bottom: 0;
    }

    .section h2 {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border: 1px solid rgba(255, 122, 164, 0.2);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.54);
      box-shadow: 0 14px 30px rgba(255, 122, 164, 0.1);
    }

    .section h2::after {
      width: 32px;
      height: 22px;
      margin-top: 0;
      flex: 0 0 auto;
    }

    .tile,
    .qa-item,
    .vow-card,
    .anniversary-card,
    .time-unit {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.48)),
        radial-gradient(circle at 80% 10%, rgba(255, 226, 143, 0.22), transparent 10rem);
    }

    .tile {
      min-height: 180px;
    }

    .tile h3 {
      margin-top: 44px;
    }

    .photo-wall,
    .photo-strip {
      padding: 18px;
      border: 1px solid rgba(255, 122, 164, 0.16);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.32);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(14px);
    }

    .photo-frame {
      border-width: 10px;
      border-radius: 30px;
    }

    .photo-frame img {
      border-radius: 20px;
    }

    .secret-note {
      width: min(100%, 840px);
      margin-top: 16px;
    }

    .secret-note summary {
      min-height: 78px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 226, 143, 0.38), transparent 9rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 245, 250, 0.68));
    }

    .secret-note-panel {
      background:
        linear-gradient(90deg, rgba(255, 122, 164, 0.08) 1px, transparent 1px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0 31px, rgba(255, 122, 164, 0.1) 32px),
        rgba(255, 255, 255, 0.94);
    }

    footer {
      margin-bottom: 24px;
      padding: 20px 22px;
      border: 1px solid rgba(255, 122, 164, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.48);
      box-shadow: 0 14px 34px rgba(255, 122, 164, 0.12);
      backdrop-filter: blur(14px);
    }

    body.locked {
      overflow: hidden;
    }

    body.locked header,
    body.locked main,
    body.locked footer {
      visibility: hidden;
    }

    .password-gate {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255, 122, 164, 0.24), transparent 24rem),
        radial-gradient(circle at 82% 18%, rgba(156, 243, 230, 0.18), transparent 26rem),
        linear-gradient(135deg, rgba(255, 248, 251, 0.92), rgba(255, 220, 232, 0.94));
      backdrop-filter: blur(20px);
    }

    body.locked .password-gate {
      display: grid;
    }

    .password-card {
      width: min(100%, 420px);
      padding: 28px;
      border: 1px solid rgba(255, 122, 164, 0.24);
      border-radius: 30px;
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 226, 143, 0.32), transparent 10rem),
        rgba(255, 255, 255, 0.72);
      box-shadow:
        0 24px 70px rgba(255, 122, 164, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      text-align: center;
    }

    .password-card h2 {
      margin: 0;
      color: var(--ink);
      font-size: 30px;
      line-height: 1.15;
      font-weight: 760;
    }

    .password-card p {
      margin: 12px 0 22px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .password-form {
      display: grid;
      gap: 12px;
    }

    .password-form input {
      width: 100%;
      min-height: 50px;
      padding: 0 16px;
      border: 1px solid rgba(255, 122, 164, 0.28);
      border-radius: 999px;
      outline: 0;
      background: rgba(255, 255, 255, 0.78);
      color: var(--ink);
      font-size: 18px;
      text-align: center;
      letter-spacing: 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    .password-form input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(255, 122, 164, 0.16);
    }

    .password-form button {
      position: relative;
      overflow: hidden;
      min-height: 50px;
      border: 1px solid rgba(255, 122, 164, 0.42);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      font-size: 15px;
      font-weight: 760;
      box-shadow: 0 14px 30px rgba(255, 122, 164, 0.16);
    }

    .password-error {
      min-height: 20px;
      margin: 2px 0 0;
      color: #d94f78;
      font-size: 13px;
    }

    /* Kitty-inspired decoration layer */
    :root {
      --kitty-red: #ff4f86;
      --kitty-pink: #ff9fc0;
      --kitty-soft: #fff7fb;
      --kitty-yellow: #ffe88f;
    }

    body::after {
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 4px, transparent 5px),
        radial-gradient(circle, rgba(255, 79, 134, 0.18) 0 2px, transparent 3px),
        linear-gradient(45deg, transparent 0 46%, rgba(255, 255, 255, 0.34) 47% 53%, transparent 54% 100%);
      background-position: 0 0, 28px 28px, 0 0;
      background-size: 54px 54px, 54px 54px, 120px 120px;
    }

    .kitty-stickers {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }

    .kitty-sticker {
      position: absolute;
      display: block;
      opacity: 0.72;
      filter: drop-shadow(0 14px 24px rgba(255, 79, 134, 0.18));
      animation: stickerFloat 9s ease-in-out infinite;
    }

    .sticker-bow {
      width: 112px;
      height: 74px;
      left: 5vw;
      top: 18vh;
      background: var(--kitty-red);
      clip-path: polygon(0 50%, 38% 8%, 50% 40%, 62% 8%, 100% 50%, 62% 92%, 50% 60%, 38% 92%);
      transform: rotate(-12deg);
    }

    .sticker-heart {
      width: 88px;
      height: 88px;
      right: 7vw;
      top: 28vh;
      background: rgba(255, 79, 134, 0.36);
      clip-path: polygon(50% 90%, 12% 54%, 5% 28%, 20% 10%, 39% 18%, 50% 35%, 61% 18%, 80% 10%, 95% 28%, 88% 54%);
      animation-delay: -2.4s;
    }

    .sticker-ear {
      width: 126px;
      height: 78px;
      left: 9vw;
      bottom: 14vh;
      border: 5px solid rgba(255, 79, 134, 0.36);
      border-bottom: 0;
      border-radius: 70px 70px 0 0;
      animation-delay: -4.6s;
    }

    .sticker-ear::before,
    .sticker-ear::after {
      content: "";
      position: absolute;
      width: 42px;
      height: 42px;
      top: -26px;
      background: rgba(255, 255, 255, 0.7);
      border: 5px solid rgba(255, 79, 134, 0.36);
      transform: rotate(45deg);
    }

    .sticker-ear::before {
      left: 12px;
      border-radius: 14px 0 14px 0;
    }

    .sticker-ear::after {
      right: 12px;
      border-radius: 14px 0 14px 0;
    }

    .sticker-spark {
      width: 74px;
      height: 74px;
      right: 14vw;
      bottom: 18vh;
      background: var(--kitty-yellow);
      clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
      animation-delay: -6.2s;
    }

    .brand::after,
    .password-card::before,
    .secret-note summary::before {
      content: "";
      width: 34px;
      height: 24px;
      flex: 0 0 auto;
      background: var(--kitty-red);
      clip-path: polygon(0 50%, 38% 8%, 50% 40%, 62% 8%, 100% 50%, 62% 92%, 50% 60%, 38% 92%);
      filter: drop-shadow(0 6px 10px rgba(255, 79, 134, 0.22));
    }

    .password-card {
      position: relative;
    }

    .password-card::before {
      position: absolute;
      right: 28px;
      top: -16px;
      width: 64px;
      height: 46px;
    }

    .secret-note summary::before {
      width: 38px;
      height: 27px;
    }

    .hero-art::after,
    .photo-frame.wide::after,
    .anniversary-card::after {
      content: "";
      position: absolute;
      z-index: 4;
      pointer-events: none;
      width: 90px;
      height: 48px;
      left: 26px;
      top: 24px;
      border-top: 4px solid rgba(91, 65, 80, 0.34);
      border-bottom: 4px solid rgba(91, 65, 80, 0.34);
      border-radius: 999px;
      opacity: 0.42;
      transform: rotate(-8deg);
    }

    .hero-art img,
    .photo-frame img {
      background: var(--kitty-soft);
    }

    .section h2::before {
      content: "";
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      border: 3px solid rgba(255, 79, 134, 0.42);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 42%, var(--kitty-red) 0 3px, transparent 4px),
        radial-gradient(circle at 65% 42%, var(--kitty-red) 0 3px, transparent 4px),
        linear-gradient(transparent 60%, rgba(255, 79, 134, 0.32) 61% 68%, transparent 69%);
    }

    .tile::after,
    .time-unit::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 16px;
      width: 28px;
      height: 20px;
      background: rgba(255, 79, 134, 0.8);
      clip-path: polygon(0 50%, 38% 8%, 50% 40%, 62% 8%, 100% 50%, 62% 92%, 50% 60%, 38% 92%);
      opacity: 0.8;
    }

    .button,
    .password-form button {
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(95deg, var(--kitty-red), var(--kitty-yellow), var(--cool), var(--kitty-pink)) border-box;
      border: 1px solid transparent;
    }

    @keyframes stickerFloat {
      0%, 100% {
        translate: 0 0;
        rotate: 0deg;
      }
      50% {
        translate: 0 -18px;
        rotate: 5deg;
      }
    }

    @keyframes beam {
      0% {
        translate: -10vw 0;
        opacity: 0;
      }
      18%, 72% {
        opacity: 1;
      }
      100% {
        translate: 132vw 0;
        opacity: 0;
      }
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(0.72);
        opacity: 0.7;
      }
      50% {
        transform: scale(1.08);
        opacity: 1;
      }
    }

    @keyframes halo {
      0%, 100% {
        transform: scale(0.82);
        opacity: 0.44;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    @keyframes textFlow {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes scan {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(130%);
      }
    }

    @keyframes routeGlow {
      0% {
        stroke-dashoffset: 0;
        opacity: 0.62;
      }
      50% {
        opacity: 1;
      }
      100% {
        stroke-dashoffset: -44;
        opacity: 0.62;
      }
    }

    @keyframes cityPulse {
      0%, 100% {
        box-shadow:
          0 14px 32px rgba(255, 79, 134, 0.18),
          0 0 0 8px rgba(255, 122, 164, 0.1);
      }
      50% {
        box-shadow:
          0 18px 38px rgba(255, 79, 134, 0.28),
          0 0 0 14px rgba(255, 122, 164, 0.04);
      }
    }

    /* Memorial polish layer */
    :root {
      --rose: #ff6f9f;
      --rose-deep: #db4779;
      --blue: #8ac8ff;
      --violet: #caa7ff;
      --glass: rgba(255, 255, 255, 0.66);
      --glass-strong: rgba(255, 255, 255, 0.82);
      --soft-shadow: 0 18px 44px rgba(226, 88, 134, 0.13);
      --deep-shadow: 0 28px 80px rgba(226, 88, 134, 0.18);
    }

    body {
      background: #fff7fb;
      text-rendering: geometricPrecision;
    }

    body::before {
      background:
        radial-gradient(ellipse at var(--mx) var(--my), rgba(255, 111, 159, 0.2), transparent 22rem),
        linear-gradient(115deg, rgba(255, 255, 255, 0.82), rgba(255, 238, 246, 0.74) 38%, rgba(235, 249, 255, 0.62) 68%, rgba(255, 250, 229, 0.7)),
        repeating-linear-gradient(90deg, rgba(255, 111, 159, 0.07) 0 1px, transparent 1px 96px);
    }

    body::after {
      opacity: 0.62;
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2px, transparent 3px),
        linear-gradient(135deg, transparent 0 46%, rgba(255, 111, 159, 0.1) 47% 49%, transparent 50% 100%),
        linear-gradient(45deg, transparent 0 47%, rgba(138, 200, 255, 0.09) 48% 50%, transparent 51% 100%);
      background-size: 44px 44px, 160px 160px, 180px 180px;
      animation: backgroundDrift 24s linear infinite;
    }

    .fx-canvas {
      opacity: 0.86;
      filter: saturate(1.08);
    }

    .light-field {
      opacity: 0.78;
    }

    .beam {
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 111, 159, 0.62), rgba(255, 255, 255, 0.9), transparent);
      filter: blur(0.5px);
    }

    header {
      top: 12px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 242, 248, 0.58)),
        rgba(255, 255, 255, 0.62);
      border-color: rgba(255, 111, 159, 0.2);
      box-shadow:
        0 18px 46px rgba(226, 88, 134, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    nav.shell {
      min-height: 54px;
    }

    .brand {
      color: var(--ink);
      font-weight: 820;
    }

    .brand::after {
      width: 30px;
      height: 21px;
    }

    .links {
      gap: 4px;
      background: rgba(255, 255, 255, 0.44);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .links a {
      position: relative;
      overflow: hidden;
      padding: 7px 10px;
      transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .links a::after {
      content: "";
      position: absolute;
      inset: auto 18% 4px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--rose), var(--blue), var(--kitty-yellow));
      opacity: 0;
      transform: scaleX(0.4);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .links a:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(226, 88, 134, 0.1);
    }

    .links a:hover::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .hero {
      align-items: center;
      grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
      gap: clamp(30px, 5vw, 62px);
      min-height: min(760px, calc(100vh - 92px));
      padding: 96px 0 46px;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 70px -6vw 28px;
      z-index: -1;
      border: 1px solid rgba(255, 111, 159, 0.1);
      border-radius: 44px;
      background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(135deg, rgba(255, 111, 159, 0.05) 0 1px, transparent 1px 18px);
      mask-image: linear-gradient(90deg, black, black 72%, transparent);
      pointer-events: none;
    }

    .hero > div {
      position: relative;
      z-index: 1;
    }

    .eyebrow {
      margin-bottom: 16px;
      color: var(--rose-deep);
      background: rgba(255, 255, 255, 0.62);
      box-shadow: 0 10px 24px rgba(226, 88, 134, 0.1);
    }

    h1 {
      max-width: 720px;
      font-size: clamp(50px, 7.2vw, 98px);
      line-height: 0.98;
    }

    .pet-name {
      margin-top: 16px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 12px 28px rgba(226, 88, 134, 0.1);
    }

    .intro {
      max-width: 560px;
      margin-top: 24px;
      padding: 16px 18px;
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 247, 251, 0.54)),
        repeating-linear-gradient(90deg, rgba(255, 111, 159, 0.06) 0 1px, transparent 1px 28px);
      box-shadow: var(--soft-shadow);
    }

    .actions {
      margin-top: 28px;
    }

    .button {
      position: relative;
      overflow: hidden;
      min-height: 46px;
      box-shadow: 0 14px 30px rgba(226, 88, 134, 0.12);
    }

    .button::after,
    .password-form button::after {
      content: "";
      position: absolute;
      inset: -40% auto -40% -30%;
      width: 46%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
      transform: skewX(-18deg);
      opacity: 0;
      transition: transform 520ms ease, opacity 220ms ease;
    }

    .button:hover::after,
    .password-form button:hover::after {
      opacity: 1;
      transform: translateX(260%) skewX(-18deg);
    }

    .hero-art {
      max-width: 640px;
      padding: 12px;
      border-radius: 34px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 244, 249, 0.68)) padding-box,
        linear-gradient(115deg, rgba(255, 79, 134, 0.5), rgba(255, 232, 143, 0.52), rgba(138, 200, 255, 0.48)) border-box;
      border: 1px solid transparent;
      box-shadow: var(--deep-shadow);
      transition: transform 420ms ease, box-shadow 420ms ease;
    }

    .hero-art:hover {
      transform: translateY(-5px);
      box-shadow: 0 32px 90px rgba(226, 88, 134, 0.22);
    }

    .hero-art img {
      border: 7px solid rgba(255, 255, 255, 0.92);
      border-radius: 26px;
      filter: saturate(1.04) contrast(1.02);
    }

    .section {
      margin-top: 10px;
      padding: 54px 0 18px;
    }

    .section h2 {
      padding: 12px 16px;
      border-color: rgba(255, 111, 159, 0.18);
      background: rgba(255, 255, 255, 0.62);
      box-shadow: 0 14px 30px rgba(226, 88, 134, 0.1);
      backdrop-filter: blur(18px);
      font-size: 25px;
      font-weight: 760;
    }

    .section h2::after {
      width: 28px;
      height: 19px;
    }

    .grid,
    .qa,
    .vow,
    .anniversary,
    .time-grid {
      gap: 12px;
    }

    .photo-wall,
    .photo-strip,
    .travel-board,
    .city-albums,
    .birthday-grid {
      margin-top: 12px;
    }

    .tile,
    .qa-item,
    .vow-card,
    .anniversary-card,
    .time-unit,
    .travel-map,
    .travel-stats article,
    .city-card,
    .secret-note summary {
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 250, 0.5)),
        linear-gradient(120deg, rgba(255, 111, 159, 0.08), rgba(138, 200, 255, 0.07));
      box-shadow:
        var(--soft-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }

    .tile:hover,
    .qa-item:hover,
    .vow-card:hover,
    .anniversary-card:hover,
    .time-unit:hover,
    .travel-stats article:hover,
    .city-card:hover,
    .secret-note summary:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 111, 159, 0.3);
      box-shadow: 0 24px 64px rgba(226, 88, 134, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .tile {
      min-height: 162px;
      padding: 22px;
    }

    .tile h3 {
      margin-top: 34px;
    }

    .tile p {
      line-height: 1.65;
    }

    .photo-wall,
    .photo-strip {
      gap: 12px;
      padding: 14px;
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 243, 248, 0.28)),
        repeating-linear-gradient(90deg, rgba(255, 111, 159, 0.05) 0 1px, transparent 1px 38px);
    }

    .photo-strip {
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .photo-frame {
      border-width: 8px;
      border-color: rgba(255, 255, 255, 0.92);
      border-radius: 28px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(255, 111, 159, 0.42), rgba(255, 232, 143, 0.34), rgba(138, 200, 255, 0.38)) border-box;
      box-shadow: 0 18px 48px rgba(226, 88, 134, 0.15);
      transition: transform 260ms ease, box-shadow 260ms ease;
    }

    .photo-frame:hover {
      transform: translateY(-4px);
      box-shadow: 0 26px 68px rgba(226, 88, 134, 0.2);
    }

    .photo-frame::before {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 111, 159, 0.08) 100%),
        radial-gradient(ellipse at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 14rem);
      opacity: 0.58;
    }

    .photo-frame img {
      border-radius: 20px;
    }

    .photo-frame:hover img {
      transform: scale(1.028);
    }

    .travel-board {
      gap: 12px;
    }

    .travel-map {
      min-height: 390px;
      border-radius: 28px;
    }

    .travel-map::before {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 235, 246, 0.62)),
        repeating-linear-gradient(135deg, rgba(255, 111, 159, 0.06) 0 1px, transparent 1px 18px);
    }

    .map-glow {
      border-color: rgba(255, 111, 159, 0.32);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 239, 247, 0.9)) padding-box,
        linear-gradient(110deg, rgba(255, 79, 134, 0.48), rgba(255, 232, 143, 0.4), rgba(138, 200, 255, 0.4)) border-box;
      border: 1px solid transparent;
    }

    .city-card {
      border-radius: 26px;
    }

    .city-card-head {
      margin-bottom: 14px;
    }

    .city-photo-grid {
      gap: 8px;
    }

    .city-photo-slot {
      min-height: 126px;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 242, 248, 0.66)),
        repeating-linear-gradient(135deg, rgba(255, 111, 159, 0.08) 0 1px, transparent 1px 16px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .city-photo-slot:first-child {
      min-height: 168px;
    }

    .secret-note {
      width: min(100%, 900px);
      margin-top: 12px;
    }

    .secret-note summary {
      min-height: 66px;
      padding: 16px 20px;
      border-width: 1px;
      font-size: 18px;
    }

    .secret-note-panel {
      border-radius: 0 0 22px 22px;
      background:
        linear-gradient(90deg, rgba(255, 111, 159, 0.08) 1px, transparent 1px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0 30px, rgba(255, 111, 159, 0.08) 31px),
        rgba(255, 255, 255, 0.94);
    }

    .qa-item {
      grid-template-columns: 0.62fr 1.38fr;
      padding: 22px;
    }

    .anniversary,
    .birthday-grid,
    .vow {
      gap: 12px;
    }

    .anniversary-card {
      min-height: 230px;
      padding: 22px;
    }

    .anniversary-card strong,
    .time-unit strong,
    .travel-stats span {
      color: transparent;
      background: linear-gradient(110deg, var(--ink), var(--rose), var(--blue), var(--ink));
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: textFlow 7s ease-in-out infinite;
    }

    .time-grid {
      background: transparent;
    }

    .time-unit {
      position: relative;
      overflow: hidden;
      min-height: 118px;
      padding: 20px;
    }

    footer {
      margin-top: 18px;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 244, 249, 0.44)),
        repeating-linear-gradient(90deg, rgba(255, 111, 159, 0.05) 0 1px, transparent 1px 34px);
    }

    .reveal-ready {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 680ms ease, transform 680ms ease;
    }

    .reveal-ready.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes backgroundDrift {
      0% {
        background-position: 0 0, 0 0, 0 0;
      }
      100% {
        background-position: 44px 44px, 160px 160px, -180px 180px;
      }
    }

    @keyframes memoryPop {
      0% {
        transform: scale(0.98) translateY(4px);
        opacity: 0.72;
      }
      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    .china-map-card {
      display: grid;
      min-height: 430px;
      padding: clamp(14px, 2.2vw, 26px);
      place-items: center;
      isolation: isolate;
    }

    .china-map-card::before {
      inset: clamp(12px, 2vw, 24px);
      z-index: 0;
      border-radius: 30px;
      clip-path: none;
      background:
        radial-gradient(circle at 26% 20%, rgba(255, 232, 143, 0.34), transparent 9rem),
        radial-gradient(circle at 76% 76%, rgba(138, 200, 255, 0.2), transparent 12rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 238, 247, 0.36));
      opacity: 0.9;
      filter: none;
    }

    .china-map-card::after {
      z-index: 1;
      background-image:
        radial-gradient(circle, rgba(255, 111, 159, 0.22) 0 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 111, 159, 0.07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 200, 255, 0.07) 1px, transparent 1px);
      background-size: 42px 42px, 84px 84px, 84px 84px;
      opacity: 0.48;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }

    .china-map-svg {
      position: relative;
      z-index: 2;
      display: block;
      width: min(100%, 760px);
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 26px 34px rgba(226, 88, 134, 0.15));
    }

    .china-map-shadow {
      fill: rgba(226, 88, 134, 0.18);
      transform: translate(14px, 16px);
      filter: blur(10px);
    }

    .china-map-land {
      fill: url("#chinaLandGradient");
      stroke: rgba(255, 79, 134, 0.52);
      stroke-width: 3.2;
      stroke-linejoin: round;
      filter: url("#mapGlow");
    }

    .china-map-coast,
    .province-line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .china-map-coast {
      stroke: rgba(219, 71, 121, 0.4);
      stroke-width: 2.4;
    }

    .province-line {
      stroke: rgba(155, 116, 135, 0.2);
      stroke-width: 1.4;
      stroke-dasharray: 7 10;
    }

    .china-map-island {
      fill: rgba(255, 248, 252, 0.9);
      stroke: rgba(255, 79, 134, 0.44);
      stroke-width: 2;
      filter: drop-shadow(0 10px 16px rgba(226, 88, 134, 0.12));
    }

    .south-sea-dot {
      fill: rgba(255, 232, 143, 0.8);
      stroke: rgba(255, 79, 134, 0.36);
      stroke-width: 1.5;
      filter: drop-shadow(0 8px 12px rgba(226, 88, 134, 0.12));
    }

    .china-map-route {
      fill: none;
      stroke: url("#chinaRouteGradient");
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 12 14;
      animation: routeGlow 5s linear infinite;
      filter: drop-shadow(0 0 13px rgba(255, 79, 134, 0.52));
    }

    .china-map-route.route-soft {
      stroke-width: 4.5;
      stroke-dasharray: 6 12;
      opacity: 0.72;
      animation-delay: -2.1s;
    }

    .footprint-step {
      fill: rgba(255, 79, 134, 0.62);
      filter: drop-shadow(0 0 10px rgba(255, 79, 134, 0.34));
      animation: footprintTwinkle 3.6s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }

    .footprint-step:nth-of-type(2) {
      animation-delay: -1.2s;
    }

    .footprint-step:nth-of-type(3) {
      animation-delay: -2.2s;
    }

    .city-pin {
      cursor: default;
      transform-box: fill-box;
      transform-origin: center;
    }

    .pin-halo {
      fill: rgba(255, 79, 134, 0.18);
      stroke: rgba(255, 79, 134, 0.28);
      stroke-width: 2;
      animation: mapPinPulse 2.8s ease-in-out infinite;
    }

    .pin-dot {
      fill: #ff4f86;
      stroke: rgba(255, 255, 255, 0.95);
      stroke-width: 4;
      filter: drop-shadow(0 0 14px rgba(255, 79, 134, 0.68));
    }

    .pin-wuhan .pin-halo {
      animation-delay: -0.7s;
    }

    .pin-shenzhen .pin-halo {
      animation-delay: -1.4s;
    }

    .pin-huizhou .pin-halo {
      animation-delay: -2s;
    }

    .city-label {
      fill: var(--ink);
      stroke: rgba(255, 255, 255, 0.86);
      stroke-width: 5;
      paint-order: stroke;
      font-size: 24px;
      font-weight: 820;
      letter-spacing: 0;
      filter: drop-shadow(0 8px 12px rgba(226, 88, 134, 0.16));
    }

    .city-label.small {
      font-size: 21px;
    }

    .city-pin:hover .pin-halo {
      fill: rgba(255, 79, 134, 0.28);
      stroke: rgba(255, 79, 134, 0.48);
    }

    .city-pin:hover .city-label {
      fill: var(--rose-deep);
    }

    @keyframes mapPinPulse {
      0%, 100% {
        transform: scale(0.78);
        opacity: 0.78;
      }
      50% {
        transform: scale(1.18);
        opacity: 0.22;
      }
    }

    @keyframes footprintTwinkle {
      0%, 100% {
        opacity: 0.42;
        transform: scale(0.92);
      }
      50% {
        opacity: 0.86;
        transform: scale(1.08);
      }
    }

    .journey-map-card {
      display: grid;
      min-height: 420px;
      padding: clamp(16px, 2.4vw, 28px);
      place-items: center;
      isolation: isolate;
    }

    .journey-map-card::before {
      inset: clamp(14px, 2.2vw, 26px);
      z-index: 0;
      border: 1px solid rgba(255, 111, 159, 0.14);
      border-radius: 32px;
      clip-path: none;
      background:
        radial-gradient(circle at 26% 28%, rgba(255, 232, 143, 0.34), transparent 10rem),
        radial-gradient(circle at 78% 70%, rgba(138, 200, 255, 0.2), transparent 12rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 238, 247, 0.36));
      opacity: 0.96;
      filter: none;
    }

    .journey-map-card::after {
      z-index: 1;
      background-image:
        radial-gradient(circle, rgba(255, 111, 159, 0.24) 0 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 111, 159, 0.07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(138, 200, 255, 0.07) 1px, transparent 1px);
      background-position: 0 0, 20px 24px, 0 0, 0 0;
      background-size: 40px 40px, 82px 82px, 82px 82px, 82px 82px;
      opacity: 0.54;
      mask-image: radial-gradient(circle at center, black, transparent 80%);
    }

    .journey-map-svg {
      position: relative;
      z-index: 2;
      display: block;
      width: min(100%, 760px);
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 26px 34px rgba(226, 88, 134, 0.14));
    }

    .journey-orbit {
      fill: none;
      stroke: rgba(155, 116, 135, 0.14);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-dasharray: 8 14;
    }

    .orbit-two {
      stroke: rgba(138, 200, 255, 0.18);
      stroke-dasharray: 5 13;
    }

    .orbit-three {
      stroke: rgba(255, 207, 90, 0.22);
      stroke-dasharray: 3 12;
    }

    .journey-route {
      fill: none;
      stroke: url("#journeyRouteGradient");
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: routeGlow 5s linear infinite;
      filter: drop-shadow(0 0 14px rgba(255, 79, 134, 0.48));
    }

    .journey-route.route-main {
      stroke-width: 7;
      stroke-dasharray: 13 14;
    }

    .journey-route.route-soft {
      stroke-width: 4.5;
      stroke-dasharray: 6 12;
      opacity: 0.72;
      animation-delay: -2.1s;
    }

    @media (max-width: 780px) {
      .shell {
        width: min(100% - 28px, 1120px);
      }

      header {
        top: 8px;
        width: min(100% - 16px, 1120px);
        border-radius: 24px;
      }

      nav.shell {
        width: calc(100% - 18px);
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 0;
      }

      nav {
        min-height: 62px;
      }

      .links {
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 13px;
        border-radius: 18px;
      }

      .links a {
        padding: 7px 9px;
      }

      .hero,
      .section {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 54px 0 48px;
      }

      .hero-art {
        max-width: 100%;
        justify-self: stretch;
      }

      h1 {
        font-size: clamp(46px, 15vw, 72px);
      }

      .intro {
        font-size: 16px;
      }

      .side-note {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 22px 0 0;
      }

      .side-note::before {
        width: 34%;
        height: 1px;
        top: -1px;
        animation: scanX 3.8s ease-in-out infinite;
      }

      .section {
        padding: 46px 0 18px;
      }

      .section h2 {
        border-radius: 22px;
        font-size: 24px;
      }

      .grid,
      .vow,
      .memory-timeline,
      .photo-wall,
      .photo-strip,
      .travel-board,
      .travel-stats,
      .city-albums,
      .travel-notes,
      .memory-machine,
      .girlfriend-profile,
      .time-capsule,
      .qa-item,
      .anniversary,
      .birthday-grid,
      .time-grid {
        grid-template-columns: 1fr;
      }

      .photo-frame {
        width: 100%;
      }

      .memory-timeline::before {
        left: 27px;
        right: auto;
        top: 20px;
        bottom: 20px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(255, 79, 134, 0.38), rgba(255, 232, 143, 0.42), rgba(138, 200, 255, 0.34), transparent);
      }

      .timeline-item {
        min-height: 150px;
        padding: 24px 20px 20px 58px;
      }

      .timeline-item::before {
        left: 20px;
        top: 28px;
      }

      .timeline-gallery {
        grid-template-columns: 1fr;
      }

      .imessage-stack {
        width: min(100%, 310px);
        height: 420px;
      }

      .stack-stage {
        inset: 0 18px 32px 0;
      }

      .stack-nav {
        width: 34px;
        height: 34px;
        font-size: 24px;
      }

      .stack-prev {
        left: -6px;
      }

      .stack-next {
        right: 4px;
      }

      .travel-note-card {
        min-height: 190px;
      }

      .memory-button,
      .memory-card {
        min-height: 112px;
      }

      .main-profile,
      .capsule-intro {
        grid-column: auto;
      }

      .profile-card,
      .capsule-card {
        min-height: 160px;
      }

      .travel-map {
        min-height: 340px;
      }

      .china-map-card {
        min-height: 330px;
        padding: 8px;
      }

      .china-map-svg {
        width: 112%;
        max-width: none;
      }

      .journey-map-card {
        min-height: 320px;
        padding: 8px;
      }

      .journey-map-svg {
        width: 112%;
        max-width: none;
      }

      .city-label {
        font-size: 29px;
      }

      .city-label.small {
        font-size: 26px;
      }

      .china-map-route {
        stroke-width: 8;
      }

      .journey-route.route-main {
        stroke-width: 8;
      }

      .travel-map::before {
        inset: 28px 18px;
      }

      .travel-route {
        inset: 36px 28px;
        width: calc(100% - 56px);
        height: calc(100% - 72px);
      }

      .map-glow {
        min-width: 58px;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 13px;
      }

      .map-glow::after {
        right: -6px;
        top: -6px;
        width: 24px;
        height: 18px;
      }

      .map-shenzhen {
        left: 60%;
        top: 80%;
      }

      .map-huizhou {
        left: 74%;
        top: 72%;
      }

      .travel-stats article {
        min-height: 150px;
      }

      .city-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .city-photo-slot:first-child {
        grid-column: 1 / -1;
      }

      footer {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 24px;
      }
    }

    @keyframes scanX {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(190%);
      }
    }

    @media (min-width: 1600px) {
      .shell {
        width: min(1480px, calc(100% - 96px));
      }

      nav.shell {
        width: min(1480px, calc(100% - 96px));
      }

      .hero {
        grid-template-columns: minmax(0, 0.82fr) minmax(620px, 1.18fr);
        min-height: min(920px, calc(100vh - 112px));
        gap: 84px;
        padding: 122px 0 72px;
      }

      .hero-art {
        max-width: 820px;
      }

      .intro {
        max-width: 660px;
      }

      .section {
        padding-top: 72px;
      }

      .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .tile {
        min-height: 210px;
        padding: 30px;
      }

      .vow,
      .anniversary,
      .time-grid,
      .birthday-grid,
      .girlfriend-profile,
      .time-capsule,
      .travel-notes {
        gap: 18px;
      }

      .memory-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .timeline-item {
        min-height: 230px;
        padding: 30px;
      }

      .timeline-gallery {
        gap: 14px;
      }

      .photo-wall {
        padding: 18px;
      }

      .photo-strip {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
        padding: 18px;
      }

      .photo-frame.wide {
        width: min(100%, 1280px);
      }

      .travel-board {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
        gap: 18px;
      }

      .travel-map {
        min-height: 520px;
      }

      .travel-stats article {
        min-height: 250px;
      }

      .travel-note-card {
        min-height: 240px;
        padding: 26px;
      }

      .memory-machine {
        grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1fr);
        gap: 18px;
        padding: 18px;
      }

      .profile-card,
      .capsule-card {
        min-height: 230px;
        padding: 28px;
      }

      .imessage-stack {
        width: min(100%, 420px);
        height: 560px;
      }
    }

    @media (min-width: 2200px) {
      .shell,
      nav.shell {
        width: min(1680px, calc(100% - 128px));
      }

      .hero {
        grid-template-columns: minmax(0, 0.78fr) minmax(760px, 1.22fr);
        gap: 108px;
        min-height: min(1040px, calc(100vh - 128px));
      }

      .hero-art {
        max-width: 960px;
      }

      .photo-frame.wide {
        width: min(100%, 1420px);
      }

      .photo-strip {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }

      .travel-map {
        min-height: 620px;
      }

      .memory-timeline {
        gap: 22px;
      }

      .travel-notes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
      }
    }