/* =========================================================
   PROJECT MIMI — PERSONAL MESSAGE
   LUXURY BOTANICAL KEEPSAKE
========================================================= */

#personalMessage{
    --ink:#3b302b;
    --muted:#8b7b70;
    --gold:#b99762;
    --gold-soft:#d9c39a;
    --rose:#9b5f66;
    --paper:#fbf8ef;
    --paper-deep:#f3eadb;
    --line:rgba(120,91,58,.20);
    position:fixed;
    inset:0;
    overflow:hidden;
    color:var(--ink);
    background:
        radial-gradient(circle at 15% 15%,rgba(255,255,255,.9),transparent 28%),
        radial-gradient(circle at 85% 75%,rgba(205,174,123,.18),transparent 30%),
        linear-gradient(135deg,#e9e1d3,#d9d0c1 50%,#e8dfd0);
}

.personal-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.65),transparent 35%),
        linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.12) 50%,transparent 54%);
    pointer-events:none;
}

.personal-bg::before,
.personal-bg::after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border:1px solid rgba(153,123,83,.09);
    border-radius:50%;
}
.personal-bg::before{left:-150px;top:18%;}
.personal-bg::after{right:-160px;bottom:12%;}

.personal-particles span{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--gold);
    opacity:.28;
    animation:floatParticle 7s ease-in-out infinite;
}
.personal-particles span:nth-child(1){left:8%;top:28%;}
.personal-particles span:nth-child(2){left:91%;top:38%;animation-delay:1s;}
.personal-particles span:nth-child(3){left:14%;top:76%;animation-delay:2s;}
.personal-particles span:nth-child(4){left:84%;top:81%;animation-delay:3s;}
.personal-particles span:nth-child(5){left:48%;top:9%;animation-delay:4s;}
@keyframes floatParticle{50%{transform:translateY(-12px);opacity:.55}}

.personal-scroll{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:42px 18px 70px;
    box-sizing:border-box;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:rgba(117,92,62,.28) transparent;
}
.personal-scroll::-webkit-scrollbar{width:5px}
.personal-scroll::-webkit-scrollbar-thumb{background:rgba(117,92,62,.28);border-radius:20px}

.letter-page{
    position:relative;
    box-sizing:border-box;
    width:min(720px,100%);
    min-height:820px;
    margin:0 auto 28px;
    padding:118px 74px 90px;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 22% 12%,rgba(255,255,255,.85),transparent 26%),
        radial-gradient(circle at 82% 86%,rgba(218,190,145,.13),transparent 28%),
        repeating-linear-gradient(0deg,rgba(105,79,50,.018) 0 1px,transparent 1px 4px),
        var(--paper);
    border:1px solid rgba(103,76,48,.22);
    border-radius:3px;
    box-shadow:
        0 24px 60px rgba(62,48,35,.15),
        0 3px 8px rgba(62,48,35,.08),
        inset 0 0 70px rgba(180,146,93,.06);
}

/* luxury double frame */
.letter-page::before{
    content:"";
    position:absolute;
    inset:13px;
    border:1px solid rgba(136,105,68,.28);
    pointer-events:none;
    z-index:5;
}
.letter-page::after{
    content:"";
    position:absolute;
    inset:20px;
    border:1px dashed rgba(154,123,80,.18);
    pointer-events:none;
    z-index:5;
}

/* page-specific atmosphere */
.page-1{background:
    radial-gradient(circle at 82% 17%,rgba(206,181,140,.16),transparent 24%),
    radial-gradient(circle at 10% 88%,rgba(193,158,111,.12),transparent 24%),
    var(--paper);
}
.page-2{background:
    radial-gradient(circle at 13% 24%,rgba(172,137,102,.10),transparent 25%),
    radial-gradient(circle at 88% 72%,rgba(207,170,171,.12),transparent 28%),
    var(--paper);
}
.page-3{background:
    radial-gradient(circle at 82% 18%,rgba(190,158,113,.13),transparent 26%),
    radial-gradient(circle at 18% 82%,rgba(172,137,102,.10),transparent 25%),
    var(--paper);
}
.page-4{background:
    radial-gradient(circle at 50% 42%,rgba(226,188,194,.34),transparent 40%),
    radial-gradient(circle at 10% 90%,rgba(202,164,122,.12),transparent 25%),
    var(--paper);
}
.page-5{background:
    radial-gradient(circle at 18% 18%,rgba(204,178,136,.15),transparent 25%),
    radial-gradient(circle at 85% 84%,rgba(203,165,170,.11),transparent 27%),
    var(--paper);
}
.page-6{background:
    radial-gradient(circle at 82% 24%,rgba(200,175,138,.15),transparent 28%),
    radial-gradient(circle at 20% 78%,rgba(188,158,123,.12),transparent 26%),
    var(--paper);
}
.page-7{background:
    radial-gradient(circle at 50% 82%,rgba(225,187,193,.22),transparent 35%),
    radial-gradient(circle at 8% 12%,rgba(206,176,133,.14),transparent 24%),
    var(--paper);
}

/* =========================================================
   BOTANICAL ART
========================================================= */
.page-art{position:absolute;inset:0;z-index:1;pointer-events:none}

.art-flower,
.art-flower::before,
.art-flower::after{
    position:absolute;
    display:block;
    content:"";
}
.art-flower{
    width:42px;height:42px;
    border:1px solid rgba(166,128,80,.38);
    border-radius:50%;
    opacity:.8;
}
.art-flower::before,
.art-flower::after{
    width:14px;height:24px;
    border:1px solid rgba(166,128,80,.42);
    border-radius:100% 0 100% 0;
    top:8px;left:13px;
    transform:rotate(35deg);
}
.art-flower::after{transform:rotate(125deg)}
.flower-a{right:48px;top:55px}
.flower-b{left:44px;bottom:58px;transform:scale(.72);opacity:.52}

.art-leaf{
    position:absolute;
    width:74px;height:30px;
    border-bottom:1px solid rgba(123,113,83,.35);
    border-radius:0 0 100% 0;
    transform:rotate(-25deg);
}
.art-leaf::before,
.art-leaf::after{
    content:"";
    position:absolute;
    width:22px;height:11px;
    border:1px solid rgba(123,113,83,.32);
    border-radius:100% 0 100% 0;
}
.art-leaf::before{left:22px;top:1px;transform:rotate(25deg)}
.art-leaf::after{left:43px;top:5px;transform:rotate(38deg)}
.leaf-a{left:23px;top:54px}
.leaf-b{right:28px;bottom:54px;transform:rotate(155deg) scale(.8);opacity:.58}

.art-star{position:absolute;color:var(--gold);text-shadow:0 0 8px rgba(185,151,98,.25);font-size:17px}
.star-a{left:54px;top:122px}
.star-b{right:56px;bottom:120px;font-size:12px}

.page-number{
    position:absolute;
    top:39px;
    right:62px;
    z-index:8;
    font:500 13px/1 Georgia,serif;
    letter-spacing:4px;
    color:rgba(92,75,60,.48);
}
.page-number::after{
    content:"";
    display:block;
    width:46px;
    height:1px;
    margin-top:10px;
    background:linear-gradient(90deg,var(--gold-soft),transparent);
}

.page-label{
    position:absolute;
    top:52px;
    left:74px;
    z-index:8;
    font:700 8px/1 Arial,sans-serif;
    letter-spacing:4px;
    color:rgba(112,86,61,.62);
}
.page-label::before{
    content:"✦";
    margin-right:10px;
    color:var(--gold);
}

.letter-content{
    position:relative;
    z-index:7;
    visibility:hidden;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .8s ease,transform .8s ease;
}
.letter-page.is-typing .letter-content,
.letter-page.is-typed .letter-content{
    visibility:visible;
    opacity:1;
    transform:none;
}

.letter-content > p{
    margin:0 0 28px;
    font:400 17px/1.9 Georgia,"Times New Roman",serif;
    letter-spacing:.05px;
    color:var(--ink);
}
.letter-content > p:last-child{margin-bottom:0}

.letter-small{
    margin-bottom:26px!important;
    font:italic 17px/1.5 Georgia,serif!important;
    color:rgba(107,91,80,.67)!important;
    letter-spacing:.3px!important;
}

h1{
    margin:0 0 48px;
    font:400 70px/1.02 "Brush Script MT","Segoe Script","Snell Roundhand",cursive;
    color:#3b2d28;
    letter-spacing:-2px;
    text-shadow:0 1px 0 #fff;
}

/* decorative separator */
.handwritten-break{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:38px auto;
    width:78%;
}
.handwritten-break span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.handwritten-break span:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.handwritten-break i{font-style:normal;color:var(--gold);font-size:16px}

.letter-emphasis{
    position:relative;
    margin:38px 0 0!important;
    padding:25px 28px 25px 31px;
    border:1px solid rgba(156,124,80,.18);
    border-left:3px solid rgba(171,128,78,.55);
    border-radius:0 15px 15px 0;
    background:linear-gradient(100deg,rgba(236,224,201,.62),rgba(255,251,241,.34));
    font:italic 16px/1.85 Georgia,serif!important;
    color:#71655c!important;
    box-shadow:0 10px 28px rgba(94,70,43,.05);
}
.letter-emphasis::after{
    content:"✦";
    position:absolute;
    right:20px;
    bottom:13px;
    color:var(--gold);
    font-size:12px;
}

.quote{
    position:relative;
    margin:40px 0;
    padding:38px 44px;
    text-align:center;
    border-top:1px solid rgba(156,124,80,.28);
    border-bottom:1px solid rgba(156,124,80,.28);
    background:linear-gradient(90deg,rgba(237,226,207,.28),rgba(255,252,244,.7),rgba(237,226,207,.28));
    font:italic 20px/1.65 Georgia,serif;
    color:#6d5d52;
}
.quote span{font:400 54px/0 Georgia,serif;color:rgba(179,146,96,.45);vertical-align:-20px}
.quote span:last-child{vertical-align:-33px}

/* page 4 — hero */
.page-4 .letter-content{text-align:center}
.page-4 .letter-content > p{text-align:left}
.love-halo{
    position:absolute;
    left:50%;top:235px;
    width:270px;height:270px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(168,116,121,.20);
    border-radius:50%;
    box-shadow:0 0 0 18px rgba(221,187,191,.08),0 0 0 38px rgba(221,187,191,.045);
    pointer-events:none;
    z-index:1;
}
.love-halo::before,.love-halo::after{content:"";position:absolute;inset:24px;border:1px dashed rgba(168,116,121,.15);border-radius:50%}
.love-halo span{position:absolute;left:50%;top:-12px;transform:translateX(-50%);font-size:23px;color:rgba(155,95,102,.52);background:var(--paper);padding:0 10px}
.love-halo i{position:absolute;left:-6px;top:50%;color:var(--gold);font-style:normal}
.love-halo b{position:absolute;right:-5px;top:50%;color:var(--gold);font-weight:400}

.love-line{
    position:relative;
    margin:42px -20px 44px;
    padding:48px 25px 43px;
    border:1px solid rgba(151,103,108,.25);
    border-radius:2px;
    background:linear-gradient(145deg,rgba(248,237,235,.92),rgba(255,250,244,.70));
    box-shadow:0 18px 45px rgba(120,82,72,.10),inset 0 0 30px rgba(185,132,137,.06);
}
.love-line::before,.love-line::after{
    content:"";position:absolute;top:50%;width:56px;height:1px;background:linear-gradient(90deg,transparent,rgba(155,95,102,.35));
}
.love-line::before{left:-57px}.love-line::after{right:-57px;transform:scaleX(-1)}
.love-line strong{
    display:block;
    font:400 49px/1.15 "Brush Script MT","Segoe Script",cursive;
    color:#8c4f58;
    letter-spacing:-.5px;
}
.love-line span{
    display:block;
    margin-top:15px;
    font:italic 13px/1.5 Georgia,serif;
    letter-spacing:2px;
    color:#9b8880;
}

/* page 5 */
.page-5 .quote{margin-top:38px}

/* page 6 */
.memory-feel{
    position:relative;
    margin:36px 0 44px;
    padding:42px 25px;
    text-align:center;
    border:1px solid rgba(156,124,80,.23);
    border-radius:20px;
    background:rgba(255,252,245,.66);
    box-shadow:0 16px 35px rgba(92,72,52,.08);
}
.memory-feel::before{
    content:"✧  ✦  ✧";
    position:absolute;top:13px;left:50%;transform:translateX(-50%);
    color:var(--gold);font-size:11px;letter-spacing:6px;
}
.memory-feel p{
    margin:0;
    font:400 34px/1.2 "Brush Script MT","Segoe Script",cursive;
    color:#4d3b35;
}
.memory-feel small{display:block;margin-top:14px;font:italic 13px/1.5 Georgia,serif;color:#9a8980}

/* page 7 finale */
.final-bloom{
    position:absolute;
    left:50%;
    top:112px;
    width:110px;height:110px;
    transform:translateX(-50%);
    border:1px solid rgba(175,132,81,.23);
    border-radius:50%;
    opacity:.8;
}
.final-bloom::before,.final-bloom::after{content:"";position:absolute;inset:13px;border:1px solid rgba(175,132,81,.15);border-radius:50%}
.final-bloom span{position:absolute;left:50%;top:50%;width:20px;height:20px;border:1px solid rgba(155,95,102,.35);border-radius:100% 0 100% 0;transform:translate(-50%,-50%) rotate(45deg)}
.final-bloom i{position:absolute;left:10px;top:43px;color:var(--gold);font-style:normal}
.final-bloom b{position:absolute;right:10px;top:43px;color:var(--rose);font-weight:400}

.page-7{padding-top:180px}
.page-7 .birthday-line{
    position:relative;
    margin:38px 0 36px;
    padding:27px 10px;
    text-align:center;
    border-top:1px solid rgba(155,95,102,.25);
    border-bottom:1px solid rgba(155,95,102,.25);
    font:400 38px/1.25 "Brush Script MT","Segoe Script",cursive;
    color:#91555d;
}
.page-7 .birthday-line::before,.page-7 .birthday-line::after{content:"✦";margin:0 15px;color:var(--gold);font-size:12px;vertical-align:middle}

.final-love{
    position:relative;
    margin:34px 0 28px;
    padding:37px 28px 33px;
    text-align:center;
    border:1px solid rgba(155,95,102,.22);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(249,235,235,.85),rgba(255,250,243,.76));
    box-shadow:0 20px 50px rgba(116,77,70,.10);
}
.final-love::before{content:"♡";display:block;margin-bottom:10px;color:rgba(155,95,102,.42);font-size:18px}
.final-love strong{display:block;font:400 40px/1.2 "Brush Script MT","Segoe Script",cursive;color:#8d5058}
.final-love span{display:block;margin-top:14px;font:italic 13px/1.75 Georgia,serif;color:#8d7b73}

.soft-ending{
    text-align:center!important;
    margin:35px 0!important;
    font:400 25px/1.3 "Brush Script MT","Segoe Script",cursive!important;
    color:#8f6865!important;
}

.next-hint{
    position:relative;
    margin:40px 0 24px;
    padding:27px 20px;
    text-align:center;
    border-top:1px dashed rgba(145,116,80,.24);
    border-bottom:1px dashed rgba(145,116,80,.24);
}
.next-hint::before{content:"✦";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 12px;color:var(--gold)}
.next-hint span,.next-hint strong,.next-hint em{display:block}
.next-hint span{font:italic 12px/1.5 Georgia,serif;color:#a08f84}
.next-hint strong{margin-top:5px;font:400 16px/1.5 Georgia,serif;color:#5f4d43}
.next-hint em{margin-top:4px;font:italic 12px/1.6 Georgia,serif;color:#9a8176}

.personal-next{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    width:180px;
    margin:28px auto 0;
    padding:13px 22px;
    border:1px solid rgba(116,91,62,.25);
    border-radius:999px;
    background:rgba(255,252,245,.82);
    color:#5a493f;
    box-shadow:0 9px 25px rgba(80,62,43,.10);
    font:600 13px Georgia,serif;
    cursor:pointer;
    transition:.25s ease;
}
.personal-next:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(80,62,43,.14)}
.personal-next b{font-size:18px;font-weight:400;color:var(--gold)}

.page-end{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    z-index:8;
    visibility:hidden;
    color:rgba(137,107,70,.42);
    font-size:14px;
}

/* =========================================================
   TYPING CARET
========================================================= */
.letter-page.is-typing .letter-content::after{
    content:"";
    display:inline-block;
    width:1px;
    height:1em;
    margin-left:3px;
    vertical-align:-2px;
    background:rgba(115,87,61,.58);
    animation:caret .8s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}

@media(max-width:700px){
    .personal-scroll{padding:30px 9px 55px}
    .letter-page{min-height:760px;padding:112px 34px 76px;margin-bottom:20px}
    .letter-page::before{inset:11px}.letter-page::after{inset:17px}
    .page-number{top:30px;right:32px;font-size:10px;letter-spacing:3px}
    .page-number::after{width:38px;margin-top:8px}
    .page-label{top:43px;left:33px;font-size:6px;letter-spacing:2.5px}
    .letter-content > p{font-size:15px;line-height:1.82;margin-bottom:25px}
    .letter-small{font-size:13px!important}
    h1{font-size:57px;margin-bottom:40px}
    .letter-emphasis{padding:22px 22px 22px 25px;font-size:14px!important;line-height:1.75!important;margin-top:31px!important}
    .quote{margin:34px 0;padding:31px 23px;font-size:17px;line-height:1.62}
    .quote span{font-size:44px}
    .love-halo{top:220px;width:210px;height:210px}
    .love-line{margin:35px -8px 38px;padding:37px 13px 33px}
    .love-line strong{font-size:42px}
    .love-line span{font-size:10px;letter-spacing:1px}
    .page-7{padding-top:160px}
    .page-7 .birthday-line{font-size:32px;margin:35px 0 30px}
    .final-love{padding:32px 17px 29px}
    .final-love strong{font-size:36px}
    .final-love span{font-size:11px}
    .soft-ending{font-size:24px!important}
    .memory-feel{padding:34px 17px}.memory-feel p{font-size:29px}
    .flower-a{right:30px}.leaf-a{left:18px}.star-a{left:42px}
}

@media(max-width:420px){
    .personal-scroll{padding:20px 6px 45px}
    .letter-page{padding:98px 27px 66px;min-height:710px}
    .letter-content > p{font-size:14px;line-height:1.8}
    h1{font-size:51px}
    .page-label{left:27px;letter-spacing:2.1px}
    .page-4 .love-line strong{font-size:37px}
    .page-7 .birthday-line{font-size:29px}
    .page-7 .final-love strong{font-size:32px}
}


/* =========================================================
   FINAL PREMIUM POLISH — VISIBLE DECORATIVE LAYER
   Keep the message elegant; make the stationery feel designed.
========================================================= */
.letter-page{
    background-color:var(--paper);
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), transparent 46%),
        radial-gradient(circle at 8% 8%, rgba(190,151,96,.12), transparent 20%),
        radial-gradient(circle at 92% 92%, rgba(168,112,121,.08), transparent 22%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 30%),
        repeating-linear-gradient(0deg, rgba(105,79,50,.016) 0 1px, transparent 1px 4px);
}

/* A refined inner frame + tiny corner cuts */
.letter-page::before{
    inset:14px;
    border:1px solid rgba(136,105,68,.34);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
}
.letter-page::after{
    inset:21px;
    border:1px dashed rgba(154,123,80,.24);
}

/* Decorative botanical artwork is intentionally visible now */
.page-art{z-index:2;opacity:1}
.page-art::before,
.page-art::after{
    content:"";
    position:absolute;
    width:118px;
    height:118px;
    border:1px solid rgba(175,137,82,.16);
    border-radius:50%;
    pointer-events:none;
}
.page-art::before{left:-62px;top:-62px;box-shadow:0 0 0 10px rgba(175,137,82,.035),0 0 0 22px rgba(175,137,82,.022)}
.page-art::after{right:-62px;bottom:-62px;box-shadow:0 0 0 10px rgba(155,95,102,.03),0 0 0 22px rgba(155,95,102,.018)}

.art-flower{
    width:54px;height:54px;
    border-color:rgba(166,128,80,.52);
    opacity:.95;
    box-shadow:0 0 0 6px rgba(185,151,98,.035);
}
.art-flower::before,
.art-flower::after{
    width:18px;height:29px;
    border-color:rgba(166,128,80,.55);
    top:11px;left:17px;
}
.flower-a{right:43px;top:48px}
.flower-b{left:40px;bottom:48px;transform:scale(.76);opacity:.68}

.art-leaf{
    width:88px;height:36px;
    border-bottom-color:rgba(123,113,83,.42);
}
.art-leaf::before,
.art-leaf::after{
    width:27px;height:13px;
    border-color:rgba(123,113,83,.42);
}
.leaf-a{left:20px;top:49px}
.leaf-b{right:24px;bottom:48px;transform:rotate(155deg) scale(.84);opacity:.66}

.art-star{font-size:19px;text-shadow:0 0 12px rgba(185,151,98,.28);opacity:.9}
.star-a{left:59px;top:128px}
.star-b{right:61px;bottom:126px;font-size:14px}

/* Subtle editorial ornaments around the page number */
.page-number{
    top:37px;
    right:58px;
    font-size:14px;
    letter-spacing:5px;
    color:rgba(92,75,60,.56);
}
.page-number::after{
    width:58px;
    margin-top:11px;
    background:linear-gradient(90deg,rgba(185,151,98,.55),transparent);
}

/* Section labels become intentional, not just text */
.page-label{
    top:51px;
    left:70px;
    letter-spacing:4.5px;
    color:rgba(112,86,61,.72);
}
.page-label::before{color:#b99762}

/* More elegant reading rhythm */
.letter-content > p{
    line-height:1.86;
}
.letter-content > p:not(.letter-small):first-child::first-letter{
    font-size:1.18em;
}

/* Highlight cards: clear hierarchy without looking like boxes pasted on */
.letter-emphasis{
    border-left-width:3px;
    border-left-color:rgba(171,128,78,.72);
    background:
        radial-gradient(circle at 92% 50%,rgba(185,151,98,.12),transparent 22%),
        linear-gradient(100deg,rgba(236,224,201,.78),rgba(255,251,241,.52));
    box-shadow:0 12px 30px rgba(94,70,43,.075),inset 0 1px 0 rgba(255,255,255,.55);
}
.letter-emphasis::after{font-size:13px;right:21px;bottom:14px}

.handwritten-break{margin:42px auto}
.handwritten-break i{font-size:17px;text-shadow:0 0 9px rgba(185,151,98,.24)}

.quote{
    background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.78),transparent 60%),
        linear-gradient(90deg,rgba(237,226,207,.42),rgba(255,252,244,.82),rgba(237,226,207,.42));
    box-shadow:0 10px 30px rgba(94,70,43,.045);
}

/* PAGE 4: unmistakable emotional focal point */
.page-4 .love-halo{
    border-color:rgba(168,116,121,.30);
    box-shadow:0 0 0 18px rgba(221,187,191,.10),0 0 0 38px rgba(221,187,191,.055),0 0 55px rgba(155,95,102,.07);
}
.page-4 .love-line{
    border-color:rgba(151,103,108,.34);
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.85),transparent 58%),
        linear-gradient(145deg,rgba(248,237,235,.96),rgba(255,250,244,.80));
    box-shadow:0 20px 52px rgba(120,82,72,.13),inset 0 0 35px rgba(185,132,137,.07);
}
.page-4 .love-line strong{text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* PAGE 6: memory card gets a keepsake feel */
.page-6 .memory-feel{
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.9),transparent 58%),
        rgba(255,252,245,.74);
    border-color:rgba(156,124,80,.30);
    box-shadow:0 18px 40px rgba(92,72,52,.10),inset 0 1px 0 rgba(255,255,255,.7);
}

/* PAGE 7: now the finale-specific styling actually applies */
.page-7{padding-top:180px}
.page-7 .final-bloom{display:block}
.page-7 .birthday-line{
    background:linear-gradient(90deg,transparent,rgba(249,235,235,.48),transparent);
    box-shadow:0 10px 28px rgba(116,77,70,.045);
}
.page-7 .final-love{
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.9),transparent 60%),
        linear-gradient(145deg,rgba(249,235,235,.94),rgba(255,250,243,.82));
    border-color:rgba(155,95,102,.30);
    box-shadow:0 22px 55px rgba(116,77,70,.13),inset 0 1px 0 rgba(255,255,255,.72);
}
.page-7 .soft-ending{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.page-7 .next-hint{background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}

/* Page-end marker: deliberately stays at the very bottom */
.page-end{
    bottom:22px;
    padding:5px 12px;
    border-radius:999px;
    background:rgba(251,248,239,.72);
    box-shadow:0 0 0 1px rgba(185,151,98,.08);
    font-size:13px;
    color:rgba(137,107,70,.55);
}

@media(max-width:700px){
    .page-number{top:29px;right:30px;font-size:10px;letter-spacing:3.5px}
    .page-number::after{width:43px;margin-top:8px}
    .page-label{top:42px;left:31px;font-size:6px;letter-spacing:2.8px}
    .art-flower{width:43px;height:43px}
    .art-flower::before,.art-flower::after{width:15px;height:24px;top:9px;left:13px}
    .flower-a{right:27px;top:43px}.flower-b{left:28px;bottom:42px}
    .art-leaf{width:68px;height:28px}.leaf-a{left:16px;top:45px}.leaf-b{right:20px;bottom:42px}
    .star-a{left:40px;top:119px}.star-b{right:42px;bottom:116px}
    .page-art::before{left:-75px;top:-75px}.page-art::after{right:-75px;bottom:-75px}
    .page-7{padding-top:160px}
    .page-end{bottom:18px}
}

/* =========================================================
   FINAL FIX — NO FREE-FLOATING DIVIDERS INSIDE THE MESSAGE
   All standalone decorative divider lines belong at page bottom.
========================================================= */

/* The standalone line + star divider inside page content is removed. */
.letter-content .handwritten-break{
    display:none !important;
}

/* Keep the page-end ornament anchored to the actual bottom edge. */
.letter-page .page-end{
    left:50%;
    bottom:18px;
    width:126px;
    height:18px;
    padding:0;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    visibility:hidden;
    font-size:0;
    background:transparent;
    box-shadow:none;
    border-radius:0;
}

/* horizontal line only at the bottom */
.letter-page .page-end::before,
.letter-page .page-end::after{
    content:"";
    position:absolute;
    top:50%;
    width:48px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(185,151,98,.48));
}
.letter-page .page-end::before{right:50%;margin-right:13px}
.letter-page .page-end::after{
    left:50%;
    margin-left:13px;
    transform:scaleX(-1);
}

/* small centered ornament */
.letter-page .page-end{
    color:rgba(185,151,98,.68);
}
.letter-page .page-end::marker{display:none}

/* Replace the hidden arrow with a small bottom diamond/star. */
.letter-page .page-end{
    text-indent:-9999px;
}
.letter-page .page-end > *{display:none}

/* page-end itself remains invisible until typing completes */
.letter-page.is-typed .page-end,
.letter-page.is-typing .page-end{
    visibility:visible;
}

@media(max-width:700px){
    .letter-page .page-end{
        bottom:16px;
        width:108px;
    }
    .letter-page .page-end::before,
    .letter-page .page-end::after{
        width:40px;
    }
}