* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fecfef 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fecfef 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading-mask.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-spinner {
    width: 5rem;
    height: 5rem;
    border: 0.4rem solid rgba(255, 255, 255, 0.3);
    border-top-color: #e83e8c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    color: #e83e8c;
    font-weight: 500;
}

.waiting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    gap: 2rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 1s ease, transform 1s ease;
}

.waiting-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.outer-title {
    color: #e83e8c;
    font-size: 2.2rem;
    text-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: titleFloat 3s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.5rem); }
}

.outer-date-tip {
    font-size: 1.5rem;
    color: #333;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
    border-left: 0.5rem solid #e83e8c;
    box-shadow: 0 0.5rem 2rem rgba(232, 62, 140, 0.15);
    backdrop-filter: blur(10px);
}

.scroll-arrow {
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    color: #e83e8c;
    cursor: pointer;
    animation: bounce 2s infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 100;
}

.scroll-arrow.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-arrow i {
    filter: drop-shadow(0 0.3rem rgba(232, 62, 140, 0.5));
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-1rem); }
    60% { transform: translateX(-50%) translateY(-0.5rem); }
}

.envelope-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 500;
    overflow: hidden;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.envelope-section.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.petal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #ffe4e1 0%, #ffd1dc 30%, #ffb6c1 60%, #ffc0cb 100%);
}

.global-petal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #ffe4e1 0%, #ffd1dc 30%, #ffb6c1 60%, #ffc0cb 100%);
    z-index: 0;
    pointer-events: none;
}

.petal {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: linear-gradient(45deg, #ffb6c1, #ffc0cb);
    border-radius: 100% 0% 100% 0%;
    opacity: 0.8;
    animation: fall linear infinite;
}

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

.envelope-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
    perspective: 1000px;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.envelope-open-hint {
    font-size: 3vh;
    color: #e83e8c;
    text-shadow: 0 0 1rem rgba(232, 62, 140, 0.5);
    animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.envelope {
    position: relative;
    width: 30rem;
    height: 20rem;
    transform: rotateX(45deg);
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.envelope-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 30rem;
    height: 20rem;
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 50%, #f8f8f8 100%);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.envelope-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 15rem solid transparent;
    border-right: 15rem solid transparent;
    border-top: 12rem solid #fad0c4;
    opacity: 0.4;
}

.heart-stamp {
    position: absolute;
    top: 8rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    border: none;
    background: none;
    padding: 0;
}

.heart-stamp i {
    font-size: 4rem;
    color: #ffb6c1;
    filter: drop-shadow(0 0 0.5rem rgba(255, 182, 193, 0.8));
}

.heart-stamp:hover i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 1rem rgba(255, 182, 193, 1));
}

.heart-stamp:active i {
    transform: scale(0.95);
}

.heart-stamp.hidden {
    opacity: 0;
    pointer-events: none;
}

.letter-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 600;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
}

.letter-section.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.patch-group {
    display: contents;
}

.photo-patch {
    position: relative;
    overflow: hidden;
    margin: 0.3rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.photo-patch img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.photo-patch img.show {
    opacity: 1;
    transform: scale(1.1);
}

.patch-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.patch-flash.active {
    opacity: 1;
}

.letter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fff9e6 0%, #fff4cc 100%);
    padding: 3rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 100;
    max-width: 85%;
}

.letter-title {
    font-size: 2.5rem;
    color: #e83e8c;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.letter-content {
    font-size: 1.5rem;
    color: #555;
    line-height: 2;
    margin-bottom: 2rem;
}

.letter-sign {
    font-size: 1.3rem;
    color: #e83e8c;
    font-weight: bold;
}

.flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 700;
    transition: opacity 0.5s ease;
}

.flash-overlay.active {
    opacity: 1;
}

.envelope.opened {
    transform: rotateX(0deg);
}

.envelope.opened::before {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.8s ease 0.3s;
}

.envelope.opened .envelope-body {
    transform: translateY(-200px);
    transition: transform 0.8s ease 0.3s;
}

@media (max-width: 768px) {
    .letter-text {
        padding: 2rem;
        max-width: 90%;
    }

    .letter-title {
        font-size: 1.8rem;
    }

    .letter-content {
        font-size: 1.2rem;
    }

    .letter-sign {
        font-size: 1rem;
    }
}

.birthday-number {
    color: #ffd700;
    font-weight: 900;
    font-size: 3rem;
    padding: 0 1.2rem;
    background: linear-gradient(90deg, #ffd700, #ff9500, #ff6b00, #ffd700);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1rem rgba(255, 215, 0, 0.5);
    display: inline-block;
    filter: drop-shadow(0 0 0.5rem rgba(255, 215, 0, 0.5));
}

@keyframes pwm-breath-step {
    0% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    1% { opacity: 0.502; filter: drop-shadow(0 0 0.302rem rgba(255, 215, 0, 0.302)); transform: scale(1.0008); }
    2% { opacity: 0.504; filter: drop-shadow(0 0 0.304rem rgba(255, 215, 0, 0.304)); transform: scale(1.0016); }
    3% { opacity: 0.506; filter: drop-shadow(0 0 0.306rem rgba(255, 215, 0, 0.306)); transform: scale(1.0024); }
    4% { opacity: 0.508; filter: drop-shadow(0 0 0.308rem rgba(255, 215, 0, 0.308)); transform: scale(1.0032); }
    5% { opacity: 0.51; filter: drop-shadow(0 0 0.31rem rgba(255, 215, 0, 0.31)); transform: scale(1.004); }
    6% { opacity: 0.512; filter: drop-shadow(0 0 0.312rem rgba(255, 215, 0, 0.312)); transform: scale(1.0048); }
    7% { opacity: 0.514; filter: drop-shadow(0 0 0.314rem rgba(255, 215, 0, 0.314)); transform: scale(1.0056); }
    8% { opacity: 0.516; filter: drop-shadow(0 0 0.316rem rgba(255, 215, 0, 0.316)); transform: scale(1.0064); }
    9% { opacity: 0.518; filter: drop-shadow(0 0 0.318rem rgba(255, 215, 0, 0.318)); transform: scale(1.0072); }
    10% { opacity: 0.52; filter: drop-shadow(0 0 0.32rem rgba(255, 215, 0, 0.32)); transform: scale(1.008); }
    11% { opacity: 0.522; filter: drop-shadow(0 0 0.322rem rgba(255, 215, 0, 0.322)); transform: scale(1.0088); }
    12% { opacity: 0.524; filter: drop-shadow(0 0 0.324rem rgba(255, 215, 0, 0.324)); transform: scale(1.0096); }
    13% { opacity: 0.526; filter: drop-shadow(0 0 0.326rem rgba(255, 215, 0, 0.326)); transform: scale(1.0104); }
    14% { opacity: 0.528; filter: drop-shadow(0 0 0.328rem rgba(255, 215, 0, 0.328)); transform: scale(1.0112); }
    15% { opacity: 0.53; filter: drop-shadow(0 0 0.33rem rgba(255, 215, 0, 0.33)); transform: scale(1.012); }
    16% { opacity: 0.532; filter: drop-shadow(0 0 0.332rem rgba(255, 215, 0, 0.332)); transform: scale(1.0128); }
    17% { opacity: 0.534; filter: drop-shadow(0 0 0.334rem rgba(255, 215, 0, 0.334)); transform: scale(1.0136); }
    18% { opacity: 0.536; filter: drop-shadow(0 0 0.336rem rgba(255, 215, 0, 0.336)); transform: scale(1.0144); }
    19% { opacity: 0.538; filter: drop-shadow(0 0 0.338rem rgba(255, 215, 0, 0.338)); transform: scale(1.0152); }
    20% { opacity: 0.54; filter: drop-shadow(0 0 0.34rem rgba(255, 215, 0, 0.34)); transform: scale(1.016); }
    21% { opacity: 0.545; filter: drop-shadow(0 0 0.345rem rgba(255, 215, 0, 0.345)); transform: scale(1.018); }
    22% { opacity: 0.555; filter: drop-shadow(0 0 0.355rem rgba(255, 215, 0, 0.355)); transform: scale(1.022); }
    23% { opacity: 0.57; filter: drop-shadow(0 0 0.37rem rgba(255, 215, 0, 0.37)); transform: scale(1.028); }
    24% { opacity: 0.595; filter: drop-shadow(0 0 0.395rem rgba(255, 215, 0, 0.395)); transform: scale(1.038); }
    25% { opacity: 0.63; filter: drop-shadow(0 0 0.43rem rgba(255, 215, 0, 0.43)); transform: scale(1.05); }
    26% { opacity: 0.68; filter: drop-shadow(0 0 0.48rem rgba(255, 215, 0, 0.48)); transform: scale(1.062); }
    27% { opacity: 0.74; filter: drop-shadow(0 0 0.54rem rgba(255, 215, 0, 0.54)); transform: scale(1.074); }
    28% { opacity: 0.81; filter: drop-shadow(0 0 0.61rem rgba(255, 215, 0, 0.61)); transform: scale(1.086); }
    29% { opacity: 0.88; filter: drop-shadow(0 0 0.68rem rgba(255, 215, 0, 0.68)); transform: scale(1.094); }
    30% { opacity: 0.94; filter: drop-shadow(0 0 0.74rem rgba(255, 215, 0, 0.74)); transform: scale(1.098); }
    31% { opacity: 0.98; filter: drop-shadow(0 0 0.78rem rgba(255, 215, 0, 0.78)); transform: scale(1.1); }
    32% { opacity: 1; filter: drop-shadow(0 0 0.8rem rgba(255, 215, 0, 0.8)); transform: scale(1.102); }
    33% { opacity: 1; filter: drop-shadow(0 0 0.85rem rgba(255, 215, 0, 0.85)); transform: scale(1.105); }
    34% { opacity: 1; filter: drop-shadow(0 0 0.9rem rgba(255, 215, 0, 0.9)); transform: scale(1.108); }
    35% { opacity: 1; filter: drop-shadow(0 0 0.95rem rgba(255, 215, 0, 0.95)); transform: scale(1.11); }
    36% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.112); }
    37% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.113); }
    38% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.114); }
    39% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.115); }
    40% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.116); }
    41% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.115); }
    42% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.114); }
    43% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.113); }
    44% { opacity: 1; filter: drop-shadow(0 0 1rem rgba(255, 215, 0, 1)); transform: scale(1.112); }
    45% { opacity: 1; filter: drop-shadow(0 0 0.95rem rgba(255, 215, 0, 0.95)); transform: scale(1.11); }
    46% { opacity: 1; filter: drop-shadow(0 0 0.9rem rgba(255, 215, 0, 0.9)); transform: scale(1.108); }
    47% { opacity: 1; filter: drop-shadow(0 0 0.85rem rgba(255, 215, 0, 0.85)); transform: scale(1.105); }
    48% { opacity: 1; filter: drop-shadow(0 0 0.8rem rgba(255, 215, 0, 0.8)); transform: scale(1.102); }
    49% { opacity: 0.99; filter: drop-shadow(0 0 0.79rem rgba(255, 215, 0, 0.79)); transform: scale(1.1); }
    50% { opacity: 0.97; filter: drop-shadow(0 0 0.77rem rgba(255, 215, 0, 0.77)); transform: scale(1.098); }
    51% { opacity: 0.94; filter: drop-shadow(0 0 0.74rem rgba(255, 215, 0, 0.74)); transform: scale(1.096); }
    52% { opacity: 0.9; filter: drop-shadow(0 0 0.7rem rgba(255, 215, 0, 0.7)); transform: scale(1.092); }
    53% { opacity: 0.85; filter: drop-shadow(0 0 0.65rem rgba(255, 215, 0, 0.65)); transform: scale(1.086); }
    54% { opacity: 0.79; filter: drop-shadow(0 0 0.59rem rgba(255, 215, 0, 0.59)); transform: scale(1.078); }
    55% { opacity: 0.72; filter: drop-shadow(0 0 0.52rem rgba(255, 215, 0, 0.52)); transform: scale(1.068); }
    56% { opacity: 0.65; filter: drop-shadow(0 0 0.45rem rgba(255, 215, 0, 0.45)); transform: scale(1.058); }
    57% { opacity: 0.58; filter: drop-shadow(0 0 0.38rem rgba(255, 215, 0, 0.38)); transform: scale(1.046); }
    58% { opacity: 0.52; filter: drop-shadow(0 0 0.32rem rgba(255, 215, 0, 0.32)); transform: scale(1.034); }
    59% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1.02); }
    60% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1.012); }
    61% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1.006); }
    62% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1.002); }
    63% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    64% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    65% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    66% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    67% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    68% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    69% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    70% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    71% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    72% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    73% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    74% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    75% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    76% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    77% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    78% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    79% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    80% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    81% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    82% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    83% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    84% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    85% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    86% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    87% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    88% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    89% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    90% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    91% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    92% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    93% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    94% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    95% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    96% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    97% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    98% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    99% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
    100% { opacity: 0.5; filter: drop-shadow(0 0 0.3rem rgba(255, 215, 0, 0.3)); transform: scale(1); }
}

.age-num, .days-num {
    animation: pwm-breath-step 4s infinite ease-in-out;
}

.countdown-text {
    font-size: 1.6rem;
    color: #333;
    line-height: 1.8;
}

@media (min-width: 1280px) {
    .envelope-container {
        gap: 0vh;
    }
}

@media (max-width: 800px) {
    .outer-title {
        font-size: 1.8rem;
    }
    .outer-date-tip {
        font-size: 1.2rem;
        width: 90%;
        padding: 1.5rem;
    }
    .envelope-container {
        gap: 3vh;
    }
    .envelope {
        width: 24rem;
        height: 16rem;
    }
    .envelope-body {
        width: 24rem;
        height: 16rem;
    }
    .envelope-body::before {
        border-left: 12rem solid transparent;
        border-right: 12rem solid transparent;
        border-top: 9.5rem solid #fad0c4;
    }
    .heart-stamp {
        width: 4rem;
        height: 4rem;
        top: 6.5rem;
    }
    .heart-stamp i {
        font-size: 3rem;
    }
    .envelope-open-hint {
        font-size: 1.5rem;
    }
    .birthday-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .outer-title {
        font-size: 1.5rem;
    }
    .outer-date-tip {
        font-size: 1rem;
    }
    .birthday-number {
        font-size: 2rem;
        padding: 0 0.8rem;
    }
    .countdown-text {
        font-size: 1.3rem;
    }
    .envelope-container {
        gap: 2.5vh;
    }
    .envelope {
        width: 20rem;
        height: 13rem;
    }
    .envelope-body {
        width: 20rem;
        height: 13rem;
    }
    .envelope-body::before {
        border-left: 10rem solid transparent;
        border-right: 10rem solid transparent;
        border-top: 8rem solid #fad0c4;
    }
    .heart-stamp {
        width: 3rem;
        height: 3rem;
        top: 5.5rem;
    }
    .heart-stamp i {
        font-size: 2.5rem;
    }
    .envelope-open-hint {
        font-size: 1.2rem;
    }
}