@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Comfortaa:wght@400;500;600;700&display=swap');
:root {
    --bg:#f9e8ee;
    --card:#fffcfd;
    --pink:#e98aaa;
    --pink-dark:#c96b8e;
    --ink:#65465b;
    --muted:#8c6d80;
    --line:#efd7e1;
    --shadow:0 12px 34px rgba(165,99,127,.09)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Nunito',sans-serif
}
button {
    font:inherit;
    cursor:pointer
}
button:focus-visible {
    outline:3px solid #c66f91;
    outline-offset:3px
}
.pattern {
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-color:var(--bg);
    background-image:url("data:image/svg+xml,%3Csvg width='62' height='58' viewBox='0 0 62 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 16 C15 10 7 10 7 16 C7 21 15 25 15 25 C15 25 23 21 23 16 C23 10 15 10 15 16Z' fill='%23edcbd8' fill-opacity='.62'/%3E%3Cpath d='M47 44 C47 40 41 40 41 44 C41 48 47 51 47 51 C47 51 53 48 53 44 C53 40 47 40 47 44Z' fill='%23edcbd8' fill-opacity='.48'/%3E%3C/svg%3E")
}
.shell {
    width:min(1120px,calc(100% - 40px));
    margin-inline:auto
}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 0 14px
}
.brand {
    display:flex;
    align-items:center;
    gap:9px;
    border:0;
    background:none;
    color:var(--ink);
    font-family:'Comfortaa',sans-serif;
    font-weight:700;
    font-size:17px
}
.brand-heart {
    font-size:28px;
    color:var(--pink-dark)
}
.desktop-nav {
    display:flex;
    align-items:center;
    gap:5px
}
.nav-link,.mobile-link {
    border:0;
    background:transparent;
    color:var(--muted);
    padding:10px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    transition:background .2s,color .2s
}
.nav-link:hover,.mobile-link:hover,.nav-link.active,.mobile-link.active {
    background:#fff7fa;
    color:var(--pink-dark)
}
.icon-button {
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff8fb;
    color:var(--pink-dark);
    font-size:24px;
    box-shadow:0 4px 12px #d9a2b51c
}
.mobile-nav {
    display:none;
    gap:7px;
    overflow-x:auto;
    padding-bottom:10px
}
.content {
    padding-top: 40px;
}
.panel {
    background:rgba(255,252,253,.88);
    border:1px solid rgba(237,207,220,.9);
    border-radius:25px;
    box-shadow:var(--shadow)
}
.page {
    display:none
}
.page.active-page {
    display:block;
    animation:page-in .35s ease both
}
@keyframes page-in {
    from {
        opacity:0;
        transform:translateY(9px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.hero {
    position:relative;
    min-height:480px;
    padding:70px 24px 38px;
    display:none;
    flex-direction:column;
    align-items:center;
    text-align:center;
    overflow:hidden
}
.hero.active-page {
    display:flex
}
.eyebrow {
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:#bd7a96
}
.hero h1,.section-heading h1 {
    font-family:'Comfortaa',sans-serif;
    font-size:clamp(29px,4.4vw,46px);
    line-height:1.2;
    margin:17px 0 12px;
    color:#754b64;
    font-weight:700
}
.hero h1 span {
    color:var(--pink)
}
.hero-lead {
    font-size:18px;
    font-weight:900;
    margin:0 0 8px
}
.hero-copy {
    max-width:490px;
    line-height:1.8;
    color:var(--muted);
    margin:0 auto 22px;
    font-size:15px
}
.primary-button {
    border:0;
    background:var(--pink);
    color:#fff;
    border-radius:999px;
    padding:13px 22px;
    font-weight:900;
    box-shadow:0 7px 17px #e98aaa42;
    transition:transform .2s,background .2s;
    display:inline-flex;
    gap:10px;
    align-items:center;
    justify-content:center
}
.primary-button:hover {
    transform:translateY(-2px);
    background:#df7fa1
}
.hero-footnote {
    font-size:12px;
    color:#a58496;
    margin-top:21px
}
.hero-spark {
    position:absolute;
    color:#df8aa7;
    font-size:30px
}
.spark-one {
    left:12%;
    top:31%
}
.spark-two {
    right:13%;
    top:42%;
    font-size:38px
}
.hero-illustration {
    position:relative;
    width:110px;
    height:90px;
    margin:0 auto 8px
}
.kitty-face {
    position:absolute;
    width:82px;
    height:67px;
    left:14px;
    top:18px;
    background:#fff7fa;
    border:2px solid #e9b4c7;
    border-radius:48% 48% 43% 43%;
    box-shadow:inset 0 -5px 0 #fae6ed
}
.ear {
    position:absolute;
    top:-13px;
    width:27px;
    height:30px;
    background:#fff7fa;
    border:2px solid #e9b4c7;
    z-index:-1
}
.left-ear {
    left:0;
    transform:rotate(-25deg);
    border-radius:5px 17px 3px 8px
}
.right-ear {
    right:0;
    transform:rotate(25deg);
    border-radius:17px 5px 8px 3px
}
.eye {
    position:absolute;
    top:28px;
    width:5px;
    height:7px;
    border-radius:50%;
    background:#765568
}
.eye-left {
    left:22px
}
.eye-right {
    right:22px
}
.blush {
    position:absolute;
    top:39px;
    width:12px;
    height:6px;
    border-radius:50%;
    background:#f5b5ca
}
.blush-left {
    left:9px
}
.blush-right {
    right:9px
}
.mouth {
    position:absolute;
    left:34px;
    top:31px;
    color:#a36c82;
    font-size:16px
}
.kitty-heart {
    position:absolute;
    bottom:-10px;
    left:31px;
    font-size:31px;
    color:#e98aaa;
    text-shadow:0 2px #fff
}
.floating-note {
    position:absolute;
    left:8%;
    top:47%;
    border:1px solid #f1cad9;
    background:#fff9fb;
    color:#b66a8b;
    padding:13px 15px;
    transform:rotate(-8deg);
    border-radius:8px;
    box-shadow:0 5px 12px #d8a6b61a;
    font-size:12px;
    font-weight:900
}
.section-wrap {
    padding:26px 0 12px
}
.section-heading {
    text-align:center;
    margin:10px auto 30px;
    max-width:610px
}
.section-heading h1 {
    font-size:clamp(28px,4vw,39px);
    margin:12px 0
}
.section-heading p {
    color:var(--muted);
    line-height:1.7;
    margin:0
}
.card-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
.note-card {
    position:relative;
    background:rgba(255,252,253,.94);
    border:1px solid var(--line);
    border-radius:19px;
    box-shadow:0 6px 22px rgba(165,99,127,.06);
    transition:transform .2s,box-shadow .2s;
    min-width:0;
    animation:page-in .3s ease both
}
.note-card:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow)
}
.note-open {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    width:100%;
    height:100%;
    min-height:225px;
    padding:23px 21px 20px;
    border:0;
    background:transparent;
    color:inherit;
    border-radius:19px
}
.note-symbol {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    background:#fff0f5;
    border-radius:14px;
    color:#d67d9d;
    font-size:25px;
    margin-bottom:17px
}
.note-title {
    font-family:'Comfortaa',sans-serif;
    font-weight:700;
    font-size:17px;
    line-height:1.45;
    margin-bottom:9px;
    padding-right:10px
}
.note-teaser {
    font-size:13px;
    line-height:1.7;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.read-more {
    font-size:12px;
    font-weight:900;
    color:var(--pink-dark);
    margin-top:auto;
    padding-top:16px
}
.read-more span {
    padding-left:5px
}
.favorite-button {
    position:absolute;
    right:12px;
    top:12px;
    border:0;
    background:#fff5f8;
    color:#d28aa5;
    border-radius:50%;
    width:31px;
    height:31px;
    font-size:18px
}
.favorite-button.favorited {
    color:#d65c87
}
.personal-letter {
    margin-top:22px;
    padding:24px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:18px;
    align-items:center
}
.envelope {
    width:58px;
    height:58px;
    border-radius:17px;
    background:#fff0f5;
    display:grid;
    place-items:center;
    color:#d47799;
    font-size:30px
}
.personal-letter h3,.jar-panel h3,.secret-panel h3 {
    font-family:'Comfortaa',sans-serif;
    margin:6px 0;
    font-size:19px
}
.personal-letter p,.jar-panel p,.secret-panel p {
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
    margin:5px 0
}
.secondary-button {
    border:1px solid #e9bfd0;
    color:#bb6689;
    background:#fff8fb;
    padding:11px 15px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    white-space:nowrap
}
.personal-copy {
    grid-column:1/-1!important;
    background:#fff5f8;
    border-radius:15px;
    padding:18px!important;
    line-height:1.9!important;
    color:#765568!important
}
.collection-progress {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:12px;
    color:#a17e91;
    margin:-8px 2px 15px
}
.gentle-banner {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    background:#fff4f7;
    border:1px solid var(--line);
    border-radius:17px;
    margin-top:20px;
    padding:18px;
    color:#a85e7e;
    font-weight:800;
    text-align:center
}
.gentle-banner p {
    margin:0;
    font-size:14px
}
.surprise-layout {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:18px
}
.jar-panel,.secret-panel {
    padding:26px;
    text-align:center
}
.jar {
    width:140px;
    height:160px;
    margin:0 auto 22px;
    border:3px solid #e8afc4;
    border-top:0;
    border-radius:12px 12px 30px 30px;
    background:linear-gradient(110deg,#fff9fbcc,#f9dce7aa);
    box-shadow:inset 9px 0 0 #ffffff66;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    padding:25px 13px 10px;
    position:relative
}
.jar:before {
    content:"";
    position:absolute;
    top:-7px;
    left:-6px;
    right:-6px;
    height:13px;
    border-radius:8px;
    background:#edc1d1;
    border:2px solid #e4a8be
}
.jar span {
    font-size:29px;
    color:#e17fa2;
    text-shadow:0 2px white;
    transform:rotate(-10deg)
}
.jar span:nth-child(even) {
    color:#d9a2bc;
    transform:rotate(12deg)
}
.jar-panel .primary-button {
    margin-top:14px
}
.random-note {
    margin:18px 0 0;
    padding:17px;
    border:1px dashed #e5adc3;
    background:#fff5f8;
    border-radius:15px;
    line-height:1.7;
    font-size:14px;
    color:#80566c
}
.secret-panel {
    text-align:left
}
.secret-panel .eyebrow {
    display:block
}
.secret-panel h3 {
    font-size:22px;
    margin:10px 0
}
.heart-field {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:24px 0
}
.hidden-heart {
    height:64px;
    border:1px solid #f0d2de;
    border-radius:15px;
    background:#fff6f9;
    color:#e3a0b8;
    font-size:30px;
    transition:transform .2s,background .2s
}
.hidden-heart:hover {
    transform:scale(1.04);
    background:#ffedf4
}
.hidden-heart.found {
    background:#f8dce7;
    color:#d3658c
}
.found-count {
    font-weight:900!important;
    color:#b66a8b!important
}
.completion-note {
    background:#fff0f5;
    padding:14px;
    border-radius:12px;
    color:#a75f7e;
    font-size:13px;
    line-height:1.6
}
.secret-footer {
    text-align:center;
    color:#a58496;
    font-size:12px;
    margin-top:20px
}
.bottom-note {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin:32px auto 8px;
    text-align:center;
    color:#a66c87;
    font-size:13px;
    font-weight:800
}
.bottom-note p {
    margin:0
}
.bottom-note span {
    font-size:22px;
    color:#d98aa7
}
.footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:20px 0 27px;
    color:#a58496;
    font-size:12px
}
.quiet-toggle {
    border:0;
    background:transparent;
    color:#a58496;
    text-decoration:underline;
    text-underline-offset:3px;
    font-size:12px
}
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:10;
    background:#65465b55;
    backdrop-filter:blur(5px);
    display:grid;
    place-items:center;
    padding:20px
}
.letter-modal {
    position:relative;
    width:min(500px,100%);
    background:#fffbfd;
    border:1px solid #f0d0dd;
    border-radius:25px;
    padding:40px 35px 30px;
    text-align:center;
    box-shadow:0 25px 80px #613d5233
}
.modal-close {
    position:absolute;
    right:16px;
    top:12px;
    border:0;
    background:#fff0f5;
    color:#b76a8a;
    border-radius:50%;
    width:34px;
    height:34px;
    font-size:23px
}
.modal-heart {
    font-size:40px;
    color:#df88a6;
    display:block;
    margin-bottom:12px
}
.letter-modal h2 {
    font-family:'Comfortaa',sans-serif;
    font-size:25px;
    line-height:1.35;
    margin:12px 0;
    color:#754b64
}
.letter-modal p {
    line-height:1.9;
    color:#805e73;
    margin:0 0 23px
}
.letter-modal .text-button {
    display:block;
    margin:15px auto 0;
    border:0;
    background:transparent;
    color:#bd6b8d;
    font-size:13px;
    font-weight:900
}
.hidden {
    display:none!important
}
.toast {
    position:fixed;
    z-index:20;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    width:min(420px,calc(100% - 32px));
    padding:15px 20px;
    background:#fffafd;
    border:1px solid #efcddd;
    border-radius:16px;
    box-shadow:var(--shadow);
    color:#80566c;
    text-align:center;
    font-weight:800;
    font-size:14px
}
.pop-in {
    animation:pop-in .28s ease both
}
@keyframes pop-in {
    from {
        opacity:0;
        transform:translateY(7px) scale(.98)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}
.reduced-motion * {
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
}
@media(max-width:850px) {
    .desktop-nav {
        display:none
    }
    .mobile-nav {
        display:flex
    }
    .mobile-link {
        white-space:nowrap;
        padding:9px 12px;
        font-size:12px
    }
    .hero {
        min-height:450px
    }
    .floating-note {
        left:4%;
        top:54%
    }
    .card-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .surprise-layout {
        grid-template-columns:1fr 1fr
    }
    .personal-letter {
        grid-template-columns:auto 1fr
    }
    .personal-letter .secondary-button {
        grid-column:2;
        justify-self:start
    }
}
@media(max-width:580px) {
    .shell {
        width:min(100% - 24px,520px)
    }
    .topbar {
        padding-top:14px
    }
    .brand {
        font-size:15px
    }
    .hero {
        padding:54px 20px 28px;
        min-height:465px;
        border-radius:21px
    }
    .hero h1 {
        font-size:30px
    }
    .hero-copy {
        font-size:14px
    }
    .hero-spark.spark-one {
        left:7%;
        top:25%
    }
    .hero-spark.spark-two {
        right:7%;
        top:40%
    }
    .floating-note {
        left:4%;
        top:auto;
        bottom:26px;
        font-size:10px;
        padding:9px 10px
    }
    .hero-footnote {
        max-width:210px;
        line-height:1.6
    }
    .section-wrap {
        padding-top:18px
    }
    .section-heading {
        margin-bottom:22px
    }
    .section-heading h1 {
        font-size:29px
    }
    .card-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .note-open {
        min-height:185px;
        padding:20px
    }
    .note-title {
        font-size:16px
    }
    .note-teaser {
        -webkit-line-clamp:2
    }
    .personal-letter {
        padding:18px;
        gap:12px
    }
    .personal-letter h3 {
        font-size:16px
    }
    .personal-letter .secondary-button {
        grid-column:1/-1
    }
    .surprise-layout {
        grid-template-columns:1fr
    }
    .jar-panel,.secret-panel {
        padding:21px
    }
    .collection-progress {
        font-size:11px
    }
    .footer {
        font-size:11px;
        align-items:flex-start
    }
    .letter-modal {
        padding:38px 23px 25px
    }
    .letter-modal h2 {
        font-size:22px
    }
    .bottom-note {
        font-size:12px
    }
    .bottom-note p {
        max-width:260px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }
}
/* Дискотечная сцена и караоке */
.music-stage {min-height:530px;background:radial-gradient(circle at 50% 0%,#fff 0,#fff8fc 30%,#f4eaff 100%);border:1px solid #ecd8ef}
.music-stage::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,#ff9dd955 0 2px,transparent 3px),radial-gradient(circle at 80% 30%,#8edbff66 0 3px,transparent 4px);background-size:110px 120px,150px 170px;opacity:.4}
.stage-badge {position:absolute;top:20px;right:22px;z-index:2;padding:7px 11px;border-radius:999px;background:#291c43;color:#fff;font-size:10px;font-weight:800;letter-spacing:.13em;box-shadow:0 0 18px #b38bdf88}
.live-dot {display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#ff65af;box-shadow:0 0 9px #ff65af;animation:livePulse 1s ease-in-out infinite alternate}
.laser-beam {position:absolute;z-index:0;top:0;width:34%;height:90%;opacity:.2;filter:blur(2px);transform-origin:top center;pointer-events:none}
.beam-left {left:8%;background:linear-gradient(170deg,#ff7fcf,transparent 70%);transform:rotate(24deg)}
.beam-right {right:8%;background:linear-gradient(190deg,#77d8ff,transparent 70%);transform:rotate(-24deg)}
.music-stage.is-playing .laser-beam {opacity:.62;animation:laserSweep 2s ease-in-out infinite alternate}
.music-stage.is-playing .beam-right {animation-delay:-1s}
.music-stage.is-playing .disco-ball {transform:translateY(7px) scale(1.18);animation:ballspin 3.5s linear infinite,ballGlow 1.1s ease-in-out infinite alternate}
.music-stage.is-playing .disco-ball::after {content:"";position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,#fff8 0 8%,#e4a7ff44 35%,transparent 70%);z-index:-1;animation:ballHalo 1.1s ease-in-out infinite alternate}
.music-stage.is-playing .karaoke-panel {border-color:#e6a9ed;box-shadow:0 0 25px #d99bea55}
.karaoke-panel {position:relative;z-index:2;max-width:620px;margin:24px auto 0;padding:18px 20px;border:1px solid #eadce8;border-radius:22px;background:#ffffffb8;text-align:left;backdrop-filter:blur(8px);transition:box-shadow .4s,border-color .4s}
.karaoke-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8b559d;font-size:11px;font-weight:800;letter-spacing:.13em}
.karaoke-heading b {font-size:20px;vertical-align:-2px}
.karaoke-edit {border:0;background:transparent;color:#a46aaf;font-size:11px;cursor:pointer}
.karaoke-lines {display:grid;gap:7px;margin-top:14px;min-height:88px}
.karaoke-line {padding:7px 10px;border-radius:9px;color:#967f99;font-family:Georgia,serif;font-size:15px;transition:color .25s,background .25s,transform .25s}
.karaoke-line.is-current {color:#633c77;background:#f4d9fb;transform:translateX(6px);font-weight:700;box-shadow:0 0 15px #e5a8f066}
.karaoke-input {display:block;width:100%;margin-top:12px;padding:11px;border:1px solid #e2c9e5;border-radius:12px;background:#fff;color:#684e6d;font:13px/1.6 inherit;resize:vertical}
.karaoke-tip {margin:11px 0 0;color:#a18b9f;font-size:10px;line-height:1.5}
@keyframes livePulse {from{opacity:.45}to{opacity:1}}
@keyframes laserSweep {from{transform:rotate(18deg) scaleY(.88)}to{transform:rotate(34deg) scaleY(1.08)}}
@keyframes ballGlow {from{filter:brightness(1);box-shadow:0 0 25px #fff,0 0 45px #d6a4f4}to{filter:brightness(1.3);box-shadow:0 0 32px #fff,0 0 75px #ff9de8,0 0 105px #8bd9ff}}
@keyframes ballHalo {from{opacity:.35;transform:scale(.8)}to{opacity:.9;transform:scale(1.15)}}
@media(max-width:580px) {.stage-badge{top:14px;right:14px;font-size:8px}.karaoke-panel{padding:15px}.karaoke-line{font-size:14px}}
/* Капсула воспоминаний: самостоятельный интерактивный блок без фотографий. */
.memory-capsule {
    max-width:900px;
    margin:0 auto;
    padding:clamp(22px,4vw,38px);
    background:linear-gradient(135deg,#fffafc,#fff6f0);
    border:1px solid #f0dce3;
}
.memory-capsule-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}
.capsule-seal {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:50%;
    background:#fff0d9;
    color:#c89554;
    font-size:24px;
    box-shadow:0 0 0 7px #fff8ee
}
.memory-capsule h2 {
    margin:17px 0 8px;
    color:var(--deep);
    font-size:clamp(23px,4vw,31px);
    letter-spacing:-.04em
}
.memory-prompts {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin-top:22px
}
.memory-prompt {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    min-height:145px;
    padding:18px;
    border:1px solid #f0dfe3;
    border-radius:18px;
    background:#fffdfd;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
    transition:transform .2s,border-color .2s,background .2s,box-shadow .2s
}
.memory-prompt:hover,.memory-prompt.selected {
    transform:translateY(-3px);
    border-color:#d9a7b9;
    background:#fff0f4;
    box-shadow:0 10px 24px rgba(175,108,132,.12)
}
.memory-prompt>span {
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    border-radius:12px;
    background:#fff1dc;
    color:#c58e55;
    font-size:21px
}
.memory-prompt strong {font-size:13px;line-height:1.35}
.memory-prompt small {font-size:11px;line-height:1.5;color:var(--muted)}
.memory-reveal {
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:18px;
    padding:18px 20px;
    border-radius:17px;
    background:#fff;
    border:1px solid #edd5dc;
    animation:softRise .35s ease
}
.memory-reveal-icon {
    display:grid;
    place-items:center;
    flex:none;
    width:35px;
    height:35px;
    border-radius:12px;
    background:#f9e8ee;
    color:#bc7992;
    font-size:20px
}
.memory-reveal strong {display:block;color:#795b68;font-size:14px;margin:2px 0 6px}
.memory-reveal p {margin:0;color:#927d86;font-size:13px;line-height:1.7}
@media(max-width:700px) {
    .memory-prompts {grid-template-columns:1fr}
    .memory-prompt {min-height:auto}
}
/* Дополнительные элементы обновлённого последовательного путешествия */ .journey-status {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:11px;
    font-weight:800
}
.journey-track {
    width:100px;
    height:6px;
    background:#f0dce4;
    border-radius:99px;
    overflow:hidden
}
.journey-track span {
    display:block;
    height:100%;
    width:0;
    background:var(--pink);
    border-radius:99px;
    transition:width .35s
}
.step-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:26px
}
.text-button {
    border:0;
    background:transparent;
    color:var(--pink-dark);
    font-weight:900;
    padding:12px 8px
}
.mood-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    max-width:760px;
    margin:0 auto
}
.mood-option {
    border:1px solid var(--line);
    background:#fffcfd;
    border-radius:20px;
    padding:20px;
    text-align:left;
    color:var(--ink);
    display:grid;
    grid-template-columns:45px 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;
    align-items:center;
    transition:.2s
}
.mood-option>span {
    grid-row:1/3;
    font-size:29px
}
.mood-option strong {
    font-family:'Comfortaa',sans-serif;
    font-size:14px
}
.mood-option small {
    font-size:12px;
    color:var(--muted);
    margin-top:5px
}
.mood-option:hover,.mood-option.selected {
    border-color:#df9ab4;
    background:#fff4f8;
    transform:translateY(-2px)
}
.mood-reply {
    padding:20px 24px;
    margin:18px auto 0;
    max-width:760px;
    line-height:1.8;
    color:var(--muted)
}
.photo-upload {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:28px 18px;
    cursor:pointer;
    border-style:dashed;
    text-align:center;
    color:var(--ink)
}
.photo-upload:hover {
    background:#fff5f8
}
.upload-plus {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    border-radius:14px;
    background:#fff0f5;
    color:var(--pink-dark);
    font-size:28px
}
.photo-upload strong {
    font-size:15px
}
.photo-upload small {
    color:var(--muted);
    font-size:12px;
    line-height:1.6
}
.photo-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:18px
}
.photo-empty {
    grid-column:1/-1;
    background:#fffafc;
    border:1px dashed var(--line);
    border-radius:20px;
    padding:28px;
    text-align:center;
    color:var(--muted)
}
.photo-empty>span {
    font-size:28px
}
.photo-empty strong {
    display:block;
    color:var(--ink);
    margin:8px 0
}
.photo-empty p {
    font-size:13px;
    line-height:1.6;
    margin:0
}
.photo-card {
    position:relative;
    aspect-ratio:1;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#f6e5ec
}
.photo-card img {
    width:100%;
    height:100%;
    object-fit:cover
}
.photo-remove {
    position:absolute;
    right:7px;
    top:7px;
    width:29px;
    height:29px;
    border:0;
    border-radius:50%;
    background:#fffdf0e8;
    color:var(--ink);
    font-size:20px
}
.quest-list {
    display:grid;
    gap:11px;
    max-width:780px;
    margin:0 auto
}
.quest-item {
    display:flex;
    align-items:center;
    gap:13px;
    background:#fffcfd;
    border:1px solid var(--line);
    border-radius:17px;
    padding:16px;
    cursor:pointer
}
.quest-item:has(input:checked) {
    background:#f4faf4;
    border-color:#c7ddcb
}
.quest-item input {
    position:absolute;
    opacity:0
}
.quest-check {
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    flex:none;
    border:1px solid #e2c8d4;
    border-radius:7px;
    color:transparent
}
.quest-item input:checked+.quest-check {
    background:#9cbda3;
    color:white;
    border-color:#9cbda3
}
.quest-item>span:nth-of-type(2) {
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1
}
.quest-item strong {
    font-size:13px
}
.quest-item small {
    font-size:11px;
    line-height:1.5;
    color:var(--muted)
}
.quest-emoji {
    font-size:22px
}
.quest-progress {
    max-width:780px;
    margin:18px auto 0;
    padding:18px 20px
}
.quest-progress>div:first-child {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:12px
}
.quest-progress>div:first-child span {
    color:var(--pink-dark)
}
.quest-progress .journey-track {
    width:100%;
    margin-top:13px;
    height:7px
}
.quest-progress .journey-track span {
    background:#9cbda3
}
.quest-progress p {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin:10px 0 0
}
.final-page {
    max-width:850px;
    margin:auto
}
.final-heart {
    margin:8px auto 14px;
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff0f5;
    color:var(--pink-dark);
    font-size:35px;
    box-shadow:0 0 0 7px #fff7fa
}
.final-letter {
    max-width:760px;
    margin:0 auto;
    padding:clamp(22px,4vw,38px)
}
.final-letter p {
    line-height:1.85;
    color:var(--muted);
    font-size:15px
}
.final-letter .signature {
    color:var(--pink-dark);
    font-weight:800;
    margin-bottom:0
}
.final-actions {
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px
}
.final-foot {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:20px
}
.confetti {
    position:fixed;
    top:-20px;
    z-index:30;
    pointer-events:none;
    color:var(--pink-dark);
    font-size:20px;
    animation:fall-down 2.7s linear forwards
}
@keyframes fall-down {
    to {
        transform:translateY(110vh) rotate(600deg);
        opacity:0
    }
}
.reduced-motion *, .reduced-motion *::before,.reduced-motion *::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
}
@media(max-width:760px) {
    .journey-status {
        gap:7px;
        font-size:9px
    }
    .journey-track {
        width:65px
    }
    .mood-grid {
        grid-template-columns:1fr
    }
    .mood-option {
        padding:16px
    }
    .photo-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .quest-item {
        padding:13px
    }
    .quest-item small {
        font-size:10px
    }
    .hero {
        padding-inline:18px
    }
    .floating-note {
        left:5%;
        top:auto;
        bottom:25px
    }
    .hero-spark.spark-one {
        left:7%;
        top:20%
    }
    .hero-spark.spark-two {
        right:7%;
        top:28%
    }
    .step-actions {
        margin-top:20px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}
/* Музыкальная пауза и мягкий диско-режим */ .music-stage {
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:clamp(24px,5vw,48px);
    transition:background .7s,border-color .7s,box-shadow .7s;
    isolation:isolate
}
.music-stage h2 {
    font-family:'Comfortaa',sans-serif;
    color:#754b64;
    font-size:clamp(21px,3vw,30px);
    margin:15px 0 10px;
    overflow-wrap:anywhere
}
.music-stage>p {
    max-width:600px;
    margin:0 auto 20px;
    color:var(--muted);
    line-height:1.7;
    font-size:13px
}
.music-note-icon {
    margin:0 auto;
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    border-radius:25px;
    background:#fff0f5;
    color:#ce7f9e;
    font-size:42px;
    box-shadow:0 0 0 8px #fff7fa;
    transition:transform .3s
}
.music-upload {
    display:inline-flex;
    cursor:pointer;
    margin:3px auto 16px;
    align-items:center;
    justify-content:center
}
.music-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:12px 0 18px
}
.music-controls button:disabled {
    opacity:.45;
    cursor:not-allowed;
    transform:none
}
.music-stage audio {
    display:block;
    width:min(100%,460px);
    margin:8px auto 18px;
    accent-color:#d77d9d
}
.music-hint {
    font-size:11px!important;
    max-width:530px!important;
    margin-bottom:0!important
}
.disco-ball {
    margin:0 auto;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#bd79a3;
    background:repeating-linear-gradient(45deg,#fff 0 5px,#ead9ef 5px 10px);
    box-shadow:0 0 20px #e4c7ef;
    opacity:.7;
    transition:all .5s
}
.disco-ball span {
    font-size:24px
}
.equalizer {
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin:0 auto 4px;
    opacity:.35
}
.equalizer i {
    width:4px;
    height:8px;
    border-radius:5px;
    background:#c985a7
}
.music-stage.is-playing .equalizer i {
    animation:eq .55s ease-in-out infinite alternate
}
.music-stage.is-playing .equalizer i:nth-child(2n) {
    animation-delay:-.3s
}
.music-stage.is-playing .equalizer i:nth-child(3n) {
    animation-delay:-.15s
}
.music-stage.is-playing .music-note-icon {
    transform:rotate(-9deg) scale(1.08);
    background:#ffe2f0;
    box-shadow:0 0 28px #ed9fca
}
.music-stage.is-playing .disco-ball {
    opacity:1;
    box-shadow:0 0 25px #fff,0 0 50px #d6a4f4;
    animation:ballspin 5s linear infinite
}
.disco-particles {
    position:fixed;
    inset:0;
    z-index:50;
    pointer-events:none;
    overflow:hidden
}
.disco-particle {
    position:absolute;
    color:#d477ad;
    font-size:clamp(14px,2vw,26px);
    text-shadow:0 0 9px #fff,0 0 20px currentColor;
    animation:twinkle var(--duration,2.5s) ease-in-out var(--delay,0s) infinite alternate;
    opacity:.85
}
.disco-burst {
    animation:float-pop var(--duration,2s) ease-out forwards
}
body.disco-mode {
    background:linear-gradient(125deg,#fff0f8,#f1e9ff,#e8f7ff,#fff2e8,#f9e8ff);
    background-size:400% 400%;
    animation:disco-bg 8s ease infinite;
    transition:background .5s
}
body.disco-mode .pattern {
    opacity:.7;
    background-image:radial-gradient(circle at 15% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 78% 42%,#f3b9ed 0 3px,transparent 4px),radial-gradient(circle at 40% 80%,#b6d8ff 0 2px,transparent 3px);
    background-size:120px 130px,170px 160px,200px 190px;
    animation:pattern-flash 1.8s steps(2,end) infinite alternate
}
body.disco-mode .topbar,body.disco-mode .footer {
    border-color:#e6b9e9;
    background:#ffffff6e;
    backdrop-filter:blur(8px)
}
body.disco-mode .panel {
    box-shadow:0 0 0 1px #fff,0 0 25px #edb7e9aa,0 0 55px #b9d6ffaa;
}
body.disco-mode .music-stage {
    background:#fffaffcc;
    border-color:#e8b6ee;
    box-shadow:0 0 0 3px #ffffff9c,0 0 35px #dba4ef,0 0 80px #b7c9ffb0
}
body.disco-mode .music-stage h2 {
    color:#94549a
}
body.disco-mode .eyebrow {
    color:#a55cb4
}
@keyframes eq {
    from {
        height:6px
    }
    to {
        height:27px
    }
}
@keyframes ballspin {
    to {
        transform:rotate(360deg)
    }
}
@keyframes disco-bg {
    0%,100% {
        background-position:0% 50%
    }
    50% {
        background-position:100% 50%
    }
}
@keyframes pattern-flash {
    from {
        opacity:.25
    }
    to {
        opacity:.95
    }
}
@keyframes twinkle {
    from {
        transform:scale(.65) rotate(0deg);
        opacity:.25
    }
    to {
        transform:scale(1.25) rotate(25deg);
        opacity:1
    }
}
@keyframes float-pop {
    0% {
        transform:scale(.3) rotate(0);
        opacity:0
    }
    20% {
        opacity:1
    }
    100% {
        transform:translateY(-60px) scale(1.4) rotate(70deg);
        opacity:0
    }
}
@media(max-width:580px) {
    .music-stage {
        padding:25px 16px
    }
    .music-controls {
        flex-direction:column
    }
    .music-controls button {
        width:100%
    }
    .music-stage h2 {
        font-size:21px
    }
}
@media(prefers-reduced-motion:reduce) {
    body.disco-mode {
        animation:none
    }
    .music-stage.is-playing .equalizer i,.music-stage.is-playing .disco-ball,.disco-particle {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important
    }
}
/* Персональные главы с фотографиями */ .memory-chapters {
    display:grid;
    gap:22px
}
.memory-chapter {
    padding:clamp(18px,3.5vw,30px);
    margin-bottom:2px
}
.memory-chapter-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#b27d91;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em
}
.memory-chapter-top span:last-child {
    font-size:23px
}
.memory-chapter h2 {
    font-size:clamp(23px,4vw,32px);
    line-height:1.15;
    letter-spacing:-.04em;
    color:var(--ink);
    margin:15px 0 9px
}
.chapter-intro {
    color:#927d86;
    font-size:14px;
    line-height:1.7;
    max-width:680px
}
.memory-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-top:20px
}
.memory-card {
    margin:0;
    overflow:hidden;
    background:#fffaf9;
    border:1px solid #f0e1e5;
    border-radius:20px;
    box-shadow:0 9px 25px rgba(119,77,91,.06)
}
.memory-card img {
    display:block;
    width:100%;
    aspect-ratio:1.25;
    object-fit:cover;
    background:#f4e4e9
}
.memory-card figcaption {
    padding:16px
}
.memory-card figcaption strong {
    font-size:14px;
    color:#775b68
}
.memory-card figcaption p {
    font-size:12px;
    line-height:1.65;
    color:#9a858d;
    margin:7px 0 0
}
.friendship-choice-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.friendship-choice {
    border:1px solid #f0e1e5;
    text-align:left;
    padding:22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    color:var(--ink);
    transition:transform .2s,border-color .2s,background .2s
}
.friendship-choice:hover,.friendship-choice.selected {
    transform:translateY(-3px);
    border-color:#dca8b7;
    background:#fff1f4
}
.friendship-choice>span {
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    background:#f7e5ea;
    border-radius:14px;
    color:#bd8194;
    font-size:22px;
    margin-bottom:4px
}
.friendship-choice strong {
    font-size:15px
}
.friendship-choice small {
    font-size:12px;
    line-height:1.5;
    color:#9b858e
}
.friendship-reveal {
    margin-top:18px;
    padding:24px;
    animation:softRise .4s ease
}
.friendship-reveal h2 {
    font-size:27px;
    letter-spacing:-.04em;
    color:var(--deep);
    margin:12px 0
}
.friendship-reveal p {
    font-family:Georgia,serif;
    font-size:17px;
    line-height:1.8;
    color:#826b74
}
.dog-feature {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(20px,4vw,38px);
    align-items:center;
    padding:clamp(17px,3vw,30px);
    overflow:hidden
}
.dog-photo-wrap {
    position:relative;
    border-radius:23px;
    overflow:hidden;
    background:#e9f0e6
}
.dog-photo {
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover
}
.dog-photo-label {
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    padding:10px 12px;
    border-radius:14px;
    background:#fffdf0e8;
    color:#8a6875;
    font-size:11px;
    text-align:center;
    backdrop-filter:blur(8px)
}
.dog-copy h2 {
    font-size:clamp(25px,4vw,37px);
    line-height:1.1;
    letter-spacing:-.045em;
    color:var(--deep);
    margin:14px 0
}
.dog-copy>p {
    font-size:14px;
    line-height:1.8;
    color:#927d86
}
.dog-actions {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:20px
}
.dog-actions button {
    font-size:12px;
    padding:12px 15px
}
.dog-reaction {
    margin-top:16px;
    background:#edf3e9;
    border-radius:17px;
    padding:16px;
    color:#71816d;
    font-size:13px;
    line-height:1.7;
    animation:softRise .3s ease
}
.dog-paw-trail {
    display:flex;
    justify-content:space-around;
    align-items:center;
    color:#c99aaa;
    font-size:23px;
    padding:24px 0 4px;
    opacity:.8
}
.dog-paw-trail span:nth-child(even) {
    transform:translateY(10px) rotate(-12deg);
    font-size:19px
}
.music-audio {
    display:block;
    width:min(100%,420px);
    margin:0 auto 18px;
    accent-color:#bd8296
}
.music-page .music-stage {
    position:relative;
    isolation:isolate;
    overflow:hidden
}
.warm-words-layer {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%)
}
.final-page {
    isolation:isolate;
    overflow:hidden
}
.final-page>.section-heading,.final-page>.final-heart,.final-page>.final-letter,.final-page>.final-actions,.final-page>.final-foot {
    position:relative;
    z-index:1
}
.warm-word {
    position:absolute;
    bottom:-50px;
    white-space:nowrap;
    font-family:Georgia,serif;
    font-style:italic;
    font-size:clamp(13px,2vw,20px);
    color:rgba(194,124,151,.42);
    animation:warmFloat var(--word-duration,12s) linear forwards;
    animation-delay:var(--word-delay,0s);
    transform:rotate(var(--word-tilt,0deg))
}
.disco-mode {
    animation:discoBackdrop 5s ease-in-out infinite alternate
}
.disco-mode .pattern {
    opacity:.28;
    filter:hue-rotate(45deg)
}
@keyframes warmFloat {
    0% {
        transform:translateY(0) rotate(var(--word-tilt,0deg));
        opacity:0
    }
    12% {
        opacity:.9
    }
    85% {
        opacity:.75
    }
    100% {
        transform:translateY(-115vh) rotate(calc(var(--word-tilt,0deg) * -1));
        opacity:0
    }
}
@keyframes discoBackdrop {
    0% {
        background-color:#fff7f6
    }
    25% {
        background-color:#f8ecff
    }
    50% {
        background-color:#eaf5ff
    }
    75% {
        background-color:#fff0f5
    }
    100% {
        background-color:#f0ebff
    }
}
@keyframes softRise {
    from {
        opacity:0;
        transform:translateY(9px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(max-width:700px) {
    .memory-grid {
        grid-template-columns:1fr
    }
    .memory-card img {
        aspect-ratio:1.25
    }
    .friendship-choice-grid {
        grid-template-columns:1fr
    }
    .friendship-choice {
        padding:17px
    }
    .dog-feature {
        grid-template-columns:1fr
    }
    .dog-photo {
        aspect-ratio:1.2
    }
    .dog-actions button {
        width:100%
    }
    .memory-chapter h2 {
        font-size:24px
    }
}
@media(prefers-reduced-motion:reduce) {
    .warm-word {
        animation:none;
        display:none
    }
    .disco-mode {
        animation:none
    }
}
/* Финальные состояния сцены после базовых музыкальных стилей. */
.music-stage.is-playing .disco-ball {transform:translateY(7px) scale(1.18);animation:ballspin 3.5s linear infinite,ballGlow 1.1s ease-in-out infinite alternate}
.music-stage.is-playing .laser-beam {opacity:.62;animation:laserSweep 2s ease-in-out infinite alternate}
.music-stage.is-playing .beam-right {animation-delay:-1s}
.music-stage.is-playing .karaoke-panel {border-color:#e6a9ed;box-shadow:0 0 25px #d99bea55}