:root {
      --cream: #faf6f1;
      --blush: #e8d5d0;
      --rose: #c9a9a6;
      --burgundy: #8b4049;
      --deep-burgundy: #5c2a30;
      --gold: #c4a35a;
      --ink: #2d2424;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      background: var(--cream);
      font-family: 'Cormorant Garamond', Georgia, serif;
      color: var(--ink);
      overflow-x: hidden;
    }

    /* Dreamy gradient background */
    .background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(ellipse at 20% 20%, rgba(200, 169, 166, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(232, 213, 208, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(196, 163, 90, 0.1) 0%, transparent 70%),
        var(--cream);
      z-index: -2;
    }

    /* Floating petals */
    .petals-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }

    .petal {
      position: absolute;
      width: 20px;
      height: 20px;
      background: radial-gradient(ellipse at 30% 30%, var(--blush), var(--rose));
      border-radius: 150% 0 150% 0;
      opacity: 0.6;
      animation: fall linear infinite;
      transform-origin: center;
    }

    @keyframes fall {
      0% {
        transform: translateY(-10vh) rotate(0deg) scale(1);
        opacity: 0;
      }
      10% {
        opacity: 0.6;
      }
      90% {
        opacity: 0.6;
      }
      100% {
        transform: translateY(110vh) rotate(720deg) scale(0.5);
        opacity: 0;
      }
    }

    /* Main container */
    .envelope-scene {
      min-height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      gap: 3rem;
    }

    .envelope-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .envelope-label {
      margin-top: 1rem;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 1.1rem;
      color: var(--burgundy);
      opacity: 0.9;
      transition: opacity 0.5s ease;
    }

    /* Envelope */
    .envelope {
      position: relative;
      width: min(380px, 40vw);
      height: min(265px, 28vw);
      cursor: pointer;
      perspective: 1000px;
      transition: transform 0.3s ease;
    }

    .envelope:hover {
      transform: scale(1.02);
    }

    .envelope-body {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f5ebe0 0%, #e8d5d0 100%);
      border-radius: 8px;
      box-shadow: 
        0 20px 60px rgba(139, 64, 73, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    }

    .envelope-flap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 60%;
      background: linear-gradient(180deg, #f0e4da 0%, #e8d5d0 100%);
      clip-path: polygon(0 0, 50% 60%, 100% 0);
      transform-origin: top center;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .envelope-flap::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 30%);
      clip-path: polygon(0 0, 50% 60%, 100% 0);
    }

    .envelope.opened .envelope-flap {
      transform: rotateX(180deg);
    }

    /* Wax seal */
    .seal {
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: radial-gradient(circle at 30% 30%, var(--burgundy), var(--deep-burgundy));
      border-radius: 50%;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 
        0 4px 15px rgba(92, 42, 48, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
      transition: all 0.5s ease;
    }

    .seal::before {
      content: '🌻';
      font-size: 28px;
      color: var(--gold);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .envelope.opened .seal {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0) rotate(180deg);
    }

    .envelope.opened + .envelope-label {
      opacity: 0.4;
    }

    /* Letter */
    .letter-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      background: rgba(45, 36, 36, 0);
      pointer-events: none;
      opacity: 0;
      transition: all 0.8s ease;
      z-index: 100;
      padding: 2rem;
      overflow-y: auto;
    }

    .letter-container.visible {
      background: rgba(45, 36, 36, 0.7);
      pointer-events: all;
      opacity: 1;
    }

    .letter {
      background: linear-gradient(180deg, #f5ede4 0%, #efe5d8 50%, #e8dcc8 100%);
      width: min(650px, 95vw);
      padding: 3rem 2.5rem;
      border-radius: 4px;
      box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 0 80px rgba(139, 64, 73, 0.03);
      transform: translateY(100px) scale(0.8);
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      margin: auto 0;
      flex-shrink: 0;
    }

    /* Paper fiber texture overlay using CSS */
    .letter::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        /* Horizontal fibers */
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(139, 115, 85, 0.03) 2px,
          rgba(139, 115, 85, 0.03) 3px
        ),
        /* Vertical fibers */
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 3px,
          rgba(139, 115, 85, 0.02) 3px,
          rgba(139, 115, 85, 0.02) 4px
        ),
        /* Speckles effect */
        radial-gradient(ellipse at 20% 30%, rgba(160, 130, 100, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(140, 110, 80, 0.07) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 80%, rgba(150, 120, 90, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 60%, rgba(145, 115, 85, 0.07) 0%, transparent 35%),
        radial-gradient(ellipse at 10% 70%, rgba(155, 125, 95, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 85%, rgba(135, 105, 75, 0.07) 0%, transparent 40%);
      pointer-events: none;
    }

    /* Gold accent bar */
    .letter-accent {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--rose), var(--gold), var(--rose));
      z-index: 2;
    }

    /* Subtle aged edge vignette */
    .letter::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(ellipse at center, transparent 50%, rgba(180, 150, 120, 0.12) 100%);
      pointer-events: none;
    }

    .letter-container.visible .letter {
      transform: translateY(0) scale(1);
    }

    /* Letter lines background - hidden for cleaner look */
    .letter-lines {
      display: none;
    }


    .letter-content {
      position: relative;
      z-index: 1;
    }

    .letter-date {
      font-style: italic;
      color: var(--rose);
      margin-bottom: 32px;
      font-size: 1rem;
      line-height: 32px;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 0.3s;
    }

    .letter-greeting {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      color: var(--burgundy);
      margin-bottom: 32px;
      line-height: 32px;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 0.5s;
    }

    .letter-body p {
      font-size: 1.25rem;
      line-height: 32px;
      margin-bottom: 32px;
      text-align: justify;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    .letter-body p:nth-child(1) { animation-delay: 0.7s; }
    .letter-body p:nth-child(2) { animation-delay: 0.9s; }
    .letter-body p:nth-child(3) { animation-delay: 1.1s; }
    .letter-body p:nth-child(4) { animation-delay: 1.3s; }
    .letter-body p:nth-child(5) { animation-delay: 1.5s; }
    .letter-body p:nth-child(6) { animation-delay: 1.7s; }
    .letter-body p:nth-child(7) { animation-delay: 1.9s; }

    .letter-closing {
      margin-top: 32px;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 1.3rem;
      line-height: 32px;
      color: var(--burgundy);
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 2.1s;
    }

    .letter-signature {
      margin-top: 0;
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      line-height: 32px;
      color: var(--deep-burgundy);
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 2.3s;
    }

    .letter-ps {
      margin-top: 2rem;
      font-style: italic;
      font-size: 1.1rem;
      color: var(--rose);
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 2.5s;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Highlighted words */
    .highlight {
      color: var(--burgundy);
      font-weight: 500;
      position: relative;
    }

    .highlight::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--rose));
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .highlight:hover::after {
      transform: scaleX(1);
    }

    /* Close button */
    .close-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 48px;
      height: 48px;
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--rose);
      font-size: 1.5rem;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 2.5s;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .close-btn:hover {
      color: var(--burgundy);
      transform: rotate(90deg);
    }

    /* Floating hearts on interaction */
    .heart-burst {
      position: fixed;
      pointer-events: none;
      z-index: 1000;
    }

    .heart-particle {
      position: absolute;
      font-size: 1.5rem;
      animation: heartFloat 1.5s ease-out forwards;
    }

    @keyframes heartFloat {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
      }
    }

    /* Responsive */
    @media (max-width: 600px) {
      .letter {
        padding: 2rem 1.5rem;
      }

      .letter-greeting {
        font-size: 1.5rem;
      }

      .letter-body p {
        font-size: 1.1rem;
        line-height: 28px;
        text-align: left;
        margin-bottom: 28px;
      }

      .letter-date,
      .letter-greeting,
      .letter-closing,
      .letter-signature {
        line-height: 28px;
      }

      .letter-date {
        margin-bottom: 28px;
      }

      .letter-greeting {
        margin-bottom: 28px;
      }

      .letter-closing {
        margin-top: 28px;
      }

      .envelope-scene {
        flex-direction: column;
        gap: 2rem;
      }

      .envelope {
        width: 70vw;
        height: 47vw;
      }

      .close-btn {
        top: 0.25rem;
        right: 0.25rem;
      }
    }

    /* Password screen */
    .password-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 2rem;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    .password-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .password-box {
      background: linear-gradient(180deg, #f5ede4 0%, #efe5d8 50%, #e8dcc8 100%);
      padding: 3rem 2.5rem;
      border-radius: 8px;
      box-shadow: 
        0 20px 60px rgba(139, 64, 73, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 400px;
      width: 100%;
    }

    .password-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .password-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      color: var(--burgundy);
      margin-bottom: 0.5rem;
    }

    .password-clue {
      font-style: italic;
      color: var(--rose);
      margin-bottom: 1.5rem;
      font-size: 1rem;
    }

    .password-input {
      width: 100%;
      padding: 0.8rem 1rem;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.1rem;
      border: 2px solid var(--blush);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.7);
      color: var(--ink);
      text-align: center;
      transition: border-color 0.3s ease;
      margin-bottom: 1rem;
    }

    .password-input:focus {
      outline: none;
      border-color: var(--rose);
    }

    .password-input.error {
      border-color: var(--burgundy);
      animation: shake 0.5s ease;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-5px); }
      40%, 80% { transform: translateX(5px); }
    }

    .password-submit {
      width: 100%;
      padding: 0.8rem 1.5rem;
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      background: linear-gradient(135deg, var(--burgundy) 0%, var(--deep-burgundy) 100%);
      color: var(--cream);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .password-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(139, 64, 73, 0.3);
    }

    .password-error {
      color: var(--burgundy);
      font-size: 0.9rem;
      margin-top: 1rem;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .password-error.visible {
      opacity: 1;
    }

    /* Music toggle */
    .music-toggle {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid var(--rose);
      background: var(--cream);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--burgundy);
      transition: all 0.3s ease;
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .music-toggle.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
    }

    .music-toggle:hover {
      background: var(--blush);
      transform: scale(1.1);
    }

    .music-toggle.playing .bar {
      animation: sound 0.5s infinite ease-in-out;
    }

    .music-bars {
      display: flex;
      gap: 3px;
      align-items: flex-end;
      height: 20px;
    }

    .bar {
      width: 4px;
      background: var(--burgundy);
      border-radius: 2px;
      height: 8px;
    }

    .bar:nth-child(1) { animation-delay: 0s; }
    .bar:nth-child(2) { animation-delay: 0.1s; }
    .bar:nth-child(3) { animation-delay: 0.2s; }

    @keyframes sound {
      0%, 100% { height: 8px; }
      50% { height: 20px; }
    }

    .music-toggle:not(.playing) .music-bars {
      opacity: 0.5;
    }

    /* Photo Memories Section */
    .memories-section {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--blush);
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
      animation-delay: 2.5s;
    }

    .memories-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      color: var(--burgundy);
      text-align: center;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .photo-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      justify-content: center;
      perspective: 1000px;
    }

    .polaroid {
      background: #fff;
      padding: 0.8rem 0.8rem 2.5rem 0.8rem;
      box-shadow: 
        0 6px 20px rgba(139, 64, 73, 0.15),
        0 3px 10px rgba(0, 0, 0, 0.1);
      transform: rotate(var(--rotation, 0deg));
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
    }

    .polaroid {
      opacity: 0;
      animation: polaroidIn 0.6s ease forwards;
    }

    @keyframes polaroidIn {
      from {
        opacity: 0;
        transform: rotate(var(--rotation, 0deg)) translateY(30px) scale(0.8);
      }
      to {
        opacity: 1;
        transform: rotate(var(--rotation, 0deg)) translateY(0) scale(1);
      }
    }

    .polaroid:hover {
      transform: rotate(0deg) scale(1.05) translateY(-5px);
      box-shadow: 
        0 15px 40px rgba(139, 64, 73, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.15);
      z-index: 10;
    }

    .polaroid-image {
      width: 140px;
      height: 140px;
      object-fit: cover;
      background: linear-gradient(135deg, var(--blush) 0%, var(--rose) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cream);
      font-size: 2.5rem;
      overflow: hidden;
    }

    .polaroid-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .polaroid-caption {
      position: absolute;
      bottom: 0.5rem;
      left: 0;
      right: 0;
      text-align: center;
      font-family: 'Playfair Display', serif;
      font-size: 0.75rem;
      color: var(--ink);
    }

    /* Photo lightbox */
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(45, 36, 36, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    .lightbox.active {
      opacity: 1;
      pointer-events: all;
    }

    .lightbox-content {
      position: relative;
      max-width: 90vw;
      max-height: 80vh;
      transform: scale(0.8);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .lightbox.active .lightbox-content {
      transform: scale(1);
    }

    .lightbox-image {
      max-width: 100%;
      max-height: 80vh;
      border-radius: 4px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .lightbox-close {
      position: absolute;
      top: -40px;
      right: 0;
      background: none;
      border: none;
      color: var(--cream);
      font-size: 2rem;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .lightbox-close:hover {
      transform: rotate(90deg);
    }

    .lightbox-caption {
      text-align: center;
      margin-top: 1rem;
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: var(--cream);
    }

    .lightbox-placeholder {
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, var(--blush) 0%, var(--rose) 100%);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--cream);
      font-family: 'Playfair Display', serif;
      text-align: center;
      padding: 2rem;
    }

    .lightbox-placeholder-emoji {
      font-size: 4rem;
      margin-bottom: 1rem;
    }

    .lightbox-placeholder-text {
      font-size: 1rem;
      opacity: 0.9;
      line-height: 1.6;
    }

    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: var(--cream);
      font-size: 2rem;
      padding: 1rem 0.8rem;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 4px;
    }

    .lightbox-nav:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .lightbox-nav.prev {
      left: -60px;
    }

    .lightbox-nav.next {
      right: -60px;
    }

    /* Add photo placeholder styling */
    .add-photo {
      border: 2px dashed var(--rose);
      background: transparent;
    }

    .add-photo .polaroid-image {
      background: linear-gradient(135deg, rgba(232, 213, 208, 0.5) 0%, rgba(201, 169, 166, 0.3) 100%);
      color: var(--rose);
      font-size: 1.8rem;
    }

    .add-photo:hover .polaroid-image {
      background: linear-gradient(135deg, rgba(232, 213, 208, 0.8) 0%, rgba(201, 169, 166, 0.5) 100%);
    }

    /* QR Code Card */
    .qr-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      animation: fadeInUp 1s ease forwards;
      animation-delay: 1s;
    }

    .qr-card-frame {
      background: #fff;
      padding: 1rem;
      box-shadow:
        0 10px 35px rgba(139, 64, 73, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.12);
      position: relative;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .qr-card-frame:hover {
      transform: translateY(-4px);
      box-shadow:
        0 18px 50px rgba(139, 64, 73, 0.28),
        0 10px 25px rgba(0, 0, 0, 0.16);
    }

    .qr-card-frame::before {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1px solid var(--blush);
      pointer-events: none;
    }

    .qr-card-image {
      display: block;
      width: 220px;
      height: 220px;
      object-fit: contain;
    }

    .qr-card-label {
      margin-top: 1.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
    }

    .qr-card-icon {
      font-size: 1.4rem;
    }

    .qr-card-text {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 0.95rem;
      color: var(--rose);
      letter-spacing: 0.15em;
      text-transform: lowercase;
    }

    /* Read letters section */
    .read-section {
      width: 100%;
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .read-section-header {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-style: italic;
      color: var(--burgundy);
      opacity: 0.5;
      padding: 0.8rem 1.5rem;
    }

    .read-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding: 1rem 0;
      width: 100%;
    }

    .read-content .envelope-wrapper {
      opacity: 0.5;
    }

    .read-content .envelope {
      width: min(260px, 35vw);
      height: min(180px, 24vw);
    }

    .read-content .seal {
      width: 45px;
      height: 45px;
    }

    .read-content .seal::before {
      font-size: 20px;
    }

    .read-content .envelope-label {
      font-size: 0.95rem;
    }

    @media (max-width: 600px) {
      .read-content .envelope {
        width: 55vw;
        height: 37vw;
      }

      .read-content {
        gap: 1.5rem;
      }
    }


    @media (max-width: 600px) {
      .polaroid-image {
        width: 100px;
        height: 100px;
      }

      .photo-gallery {
        gap: 1rem;
      }

      .polaroid {
        padding: 0.5rem 0.5rem 2rem 0.5rem;
      }

      .lightbox-nav {
        display: none;
      }

      .qr-card-image {
        width: 180px;
        height: 180px;
      }

      .qr-card-frame {
        padding: 0.75rem;
      }
    }