:root {
      --rose: #e45d79;
      --rose-deep: #b93f61;
      --rose-soft: #fff0f2;
      --peach: #ffb69f;
      --paper: #fffafa;
      --ink: #38272c;
      --muted: #806a70;
      --line: rgba(119, 65, 78, .12);
      --shadow: 0 20px 60px rgba(131, 60, 80, .13);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 7%, rgba(255, 184, 183, .28), transparent 28rem),
        radial-gradient(circle at 90% 40%, rgba(231, 108, 139, .12), transparent 24rem),
        #f8f2f3;
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    img { display: block; }

    .page {
      width: min(100%, 520px);
      margin: 0 auto;
      overflow: hidden;
      background: var(--paper);
    }

    .hero {
      position: relative;
      min-height: 650px;
      padding: max(22px, env(safe-area-inset-top)) 20px 34px;
      overflow: hidden;
      color: white;
      background:
        linear-gradient(155deg, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(135deg, #ff8587 0%, #e55f7c 48%, #b7426f 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .hero::before {
      width: 330px;
      height: 330px;
      right: -130px;
      top: 70px;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 0 0 54px rgba(255,255,255,.035), 0 0 0 108px rgba(255,255,255,.025);
    }

    .hero::after {
      width: 160px;
      height: 160px;
      left: -70px;
      bottom: 64px;
      background: rgba(255,199,183,.18);
      filter: blur(2px);
    }

    .nav,
    .hero-copy,
    .hero-visual,
    .hero-actions { position: relative; z-index: 2; }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: white;
      text-decoration: none;
    }

    .brand-mark {
      width: 50px;
      height: 50px;
      flex: none;
      border: 0;
      border-radius: 13px;
      object-fit: cover;
      box-shadow: 0 10px 28px rgba(93, 30, 55, .22);
    }

    .brand-text b,
    .brand-text small { display: block; }
    .brand-text b { font-size: 17px; line-height: 1.1; letter-spacing: .08em; }
    .brand-text small { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1; letter-spacing: .18em; }

    .nav-link {
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      color: white;
      background: rgba(255,255,255,.1);
      font-size: 11px;
      font-weight: 700;
      text-decoration: none;
      backdrop-filter: blur(10px);
    }

    .hero-copy { margin-top: 46px; }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.76);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
    }

    h1 {
      max-width: 360px;
      margin: 13px 0 13px;
      font: 700 clamp(34px, 10vw, 48px)/1.12 Georgia, "Songti SC", "Microsoft YaHei", serif;
      letter-spacing: -.04em;
    }

    .hero-copy p {
      max-width: 380px;
      margin: 0;
      color: rgba(255,255,255,.86);
      font-size: 13px;
      line-height: 1.8;
    }

    .hero-visual {
      height: 226px;
      margin-top: 28px;
    }

    .portrait-card {
      position: absolute;
      overflow: hidden;
      padding: 0;
      border: 5px solid rgba(255,255,255,.92);
      border-radius: 26px;
      background: #f1d4d7;
      box-shadow: 0 24px 60px rgba(82, 23, 48, .26);
      transform: rotate(-3.5deg);
    }

    .portrait-card:first-child {
      left: 8px;
      top: 15px;
      width: 132px;
      height: 176px;
    }

    .portrait-card:nth-child(2) {
      right: 11px;
      top: -5px;
      width: 164px;
      height: 218px;
      transform: rotate(4deg);
    }

    .portrait-card img { width: 100%; height: 100%; object-fit: cover; }

    .visual-note {
      position: absolute;
      left: 123px;
      top: 92px;
      width: 126px;
      padding: 12px 13px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 17px;
      color: #a7385e;
      background: rgba(255,255,255,.9);
      box-shadow: 0 12px 36px rgba(85, 25, 48, .17);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.5;
      transform: rotate(-1deg);
    }

    .visual-note span { display: block; margin-top: 3px; color: #9b7a82; font-size: 8px; letter-spacing: .12em; }

    .hero-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-top: 8px;
    }

    .primary-btn,
    .round-btn {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rose-deep);
      background: white;
      box-shadow: 0 14px 36px rgba(87, 28, 51, .2);
      text-decoration: none;
    }

    .primary-btn {
      gap: 9px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
    }

    .primary-btn::after { content: "↗"; font-size: 20px; font-weight: 400; }

    .round-btn {
      width: 52px;
      border-radius: 50%;
      font-size: 20px;
    }

    .contact-panel {
      position: relative;
      z-index: 5;
      margin: -17px 14px 0;
      padding: 20px;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 25px;
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
    }

    .panel-head,
    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }

    .panel-head { margin-bottom: 14px; }
    .panel-head b { font-size: 18px; }
    .panel-head span { color: var(--muted); font-size: 10px; }

    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

    .copy-card {
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 17px;
      color: var(--ink);
      background: var(--rose-soft);
      text-align: left;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease;
    }

    .copy-card:active { transform: scale(.98); }
    .copy-card small,
    .copy-card strong,
    .copy-card em { display: block; }
    .copy-card small { color: var(--muted); font-size: 10px; }
    .copy-card strong { overflow: hidden; margin-top: 5px; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
    .copy-card em { margin-top: 7px; color: var(--rose); font-size: 9px; font-style: normal; font-weight: 800; }

    section { padding: 60px 18px; }

    .section-kicker {
      color: var(--rose);
      font: 800 10px/1.2 Arial, sans-serif;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h2 {
      margin: 9px 0 0;
      font: 600 29px/1.25 Georgia, "Songti SC", "Microsoft YaHei", serif;
      letter-spacing: -.025em;
    }

    h2 i { color: var(--rose); font-style: italic; }

    .section-index {
      color: #c8a6ae;
      font: 700 28px/1 Georgia, serif;
    }

    .intro { padding-top: 52px; }

    .intro-card {
      margin-top: 26px;
      padding: 26px 22px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, white, #fff4f5);
      box-shadow: 0 18px 50px rgba(125, 65, 80, .1);
    }

    .intro-card .flag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--rose-deep);
      background: #ffe3e6;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .intro-card > p {
      margin: 16px 0 0;
      color: #705960;
      font-size: 13px;
      line-height: 1.9;
    }

    .feature-list { display: grid; gap: 10px; margin-top: 18px; }

    .feature {
      position: relative;
      padding: 18px 16px 18px 48px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: white;
    }

    .feature::before {
      content: attr(data-no);
      position: absolute;
      left: 16px;
      top: 19px;
      color: var(--rose);
      font: 800 10px/1 Georgia, serif;
    }

    .feature h3 { margin: 0 0 6px; font-size: 14px; }
    .feature p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

    .gallery { background: #fff5f6; }

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

    .photo-button,
    .chat-button {
      position: relative;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: #eadadd;
      cursor: zoom-in;
    }

    .photo-button { aspect-ratio: 3 / 4; border-radius: 20px; }
    .photo-button.wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

    .photo-button img,
    .chat-button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .photo-button.wide img { object-position: 50% 25%; }
    .photo-button:active img,
    .chat-button:active img { transform: scale(1.025); }

    .image-tag {
      position: absolute;
      left: 10px;
      bottom: 10px;
      padding: 7px 9px;
      border: 1px solid rgba(255,255,255,.38);
      border-radius: 999px;
      color: white;
      background: rgba(48, 27, 34, .46);
      font: 700 9px/1 Arial, sans-serif;
      letter-spacing: .09em;
      backdrop-filter: blur(9px);
    }

    .gallery-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 17px;
      color: var(--muted);
      font-size: 10px;
    }

    .gallery-note b { color: var(--rose); }

    .chat-section { background: var(--paper); }

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

    .chat-button {
      aspect-ratio: 564 / 1280;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(84, 51, 60, .08);
    }

    .chat-button:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }

    .download-section {
      padding-top: 0;
      background: linear-gradient(#fffafa, #fff0f2);
    }

    .download-card {
      overflow: hidden;
      border: 1px solid rgba(188, 73, 104, .13);
      border-radius: 30px;
      background: white;
      box-shadow: var(--shadow);
    }

    .poster-wrap { width: 100%; padding: 12px; border: 0; background: #fff7f8; cursor: zoom-in; }
    .poster-wrap img { width: 100%; border-radius: 20px; }

    .download-copy { padding: 23px 22px 24px; }
    .download-copy h3 { margin: 0; font: 600 23px/1.25 Georgia, "Songti SC", serif; }
    .download-copy p { margin: 10px 0 17px; color: var(--muted); font-size: 11px; line-height: 1.8; }

    .download-link {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      color: white;
      background: linear-gradient(110deg, var(--rose), var(--rose-deep));
      box-shadow: 0 13px 30px rgba(192, 64, 100, .25);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    .download-link::after { content: "↗"; font-size: 18px; font-weight: 400; }

    footer {
      padding: 30px 20px calc(90px + env(safe-area-inset-bottom));
      color: #aa8790;
      background: #fff0f2;
      text-align: center;
      font-size: 9px;
      letter-spacing: .13em;
    }

    .sticky-cta {
      position: fixed;
      z-index: 15;
      left: 50%;
      bottom: max(14px, env(safe-area-inset-bottom));
      width: min(calc(100% - 28px), 486px);
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 8px 9px 8px 17px;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 999px;
      color: white;
      background: rgba(57, 37, 44, .91);
      box-shadow: 0 18px 50px rgba(57, 31, 40, .28);
      text-decoration: none;
      transform: translateX(-50%);
      backdrop-filter: blur(18px);
    }

    .sticky-cta span { font-size: 11px; }
    .sticky-cta b { display: block; margin-top: 2px; font-size: 13px; }
    .sticky-cta em { padding: 12px 17px; border-radius: 999px; color: var(--rose-deep); background: white; font-size: 11px; font-style: normal; font-weight: 800; }

    .lightbox {
      position: fixed;
      z-index: 30;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 58px 18px 24px;
      background: rgba(27, 16, 20, .93);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
      backdrop-filter: blur(14px);
    }

    .lightbox.is-open { opacity: 1; visibility: visible; }

    .lightbox img {
      max-width: min(100%, 520px);
      max-height: 82vh;
      border-radius: 19px;
      box-shadow: 0 24px 80px rgba(0,0,0,.42);
    }

    .lightbox-close {
      position: absolute;
      top: max(14px, env(safe-area-inset-top));
      right: 16px;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
      color: white;
      background: rgba(255,255,255,.1);
      font-size: 22px;
      cursor: pointer;
    }

    .toast {
      position: fixed;
      z-index: 40;
      left: 50%;
      bottom: max(84px, calc(70px + env(safe-area-inset-bottom)));
      padding: 10px 16px;
      border-radius: 999px;
      color: white;
      background: rgba(57, 37, 44, .94);
      font-size: 11px;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: .22s ease;
    }

    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    @media (min-width: 521px) {
      body { padding: 26px 0; }
      .page { border-radius: 34px; box-shadow: 0 24px 90px rgba(76, 48, 58, .16); }
    }

    @media (max-width: 350px) {
      .hero { min-height: 620px; }
      .portrait-card:nth-child(2) { width: 145px; }
      .visual-note { left: 108px; width: 112px; }
      h1 { font-size: 34px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; }
    }