/* V04: one paper tone, compact music, merged invitation and local lyric drawer. */
:root{--page-paper:#f7f5ec;--accent-peach:#e9bb9f;--accent-lilac:#b5a9ca}
body{background:var(--page-paper)}
body::before{opacity:.055}
.paper-scene,.paper-scene .stage,.base-scene.lake-section,.base-scene.collage-scroll,.base-scene.closing,.base-scene.invitation{background:var(--page-paper)}
.base-scene.closing footer{background:var(--page-paper)}
.base-scene.closing .closing-landscape::before{background:linear-gradient(var(--page-paper),transparent)}
.paper-scene .stage{padding:38px 4% 40px}
.paper-scene .canvas{width:min(100%,calc((100svh - 78px)*16/9))}
.paper-scene .scene-footer,.hero-bottom{display:none}
.wordmark{gap:0}
.site-header{position:relative;z-index:60}
.base-scene .hero{padding-bottom:40px}
.base-scene#beginning{padding-bottom:38px}
.base-scene.invitation-merged{overflow:hidden;isolation:isolate;padding:75px 6% 90px;min-height:720px}
.invitation-merged::before{content:'';position:absolute;inset:4% 4% 2%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#dee5d259,transparent 68%)}
.invitation-merged .invitation-title{margin:23px 0 25px;position:relative;z-index:2}
.invitation-merged .invitation-pair{gap:45px;position:relative;z-index:2}
.invitation-merged .portrait-stamp{width:178px;rotate:none}
.invitation-merged .avatar-shell{height:224px;display:grid;place-items:center;position:relative}
.invitation-merged .portrait-stamp img{height:100%;width:100%;aspect-ratio:auto;object-fit:contain;border:none;border-radius:0;box-shadow:none;filter:drop-shadow(3px 0 #fffdf7) drop-shadow(-3px 0 #fffdf7) drop-shadow(0 3px #fffdf7) drop-shadow(0 -3px #fffdf7)}
.invitation-merged .portrait-stamp figcaption{font-size:16px;letter-spacing:.08em;margin-top:12px}
.invitation-merged .portrait-stamp:first-child img{animation:head 2.6s ease-in-out infinite}
.invitation-merged .portrait-stamp:last-child img{animation:head 2.6s ease-in-out infinite;animation-delay:-1.7s}
.invitation-merged .pair-ampersand{font-size:55px;align-self:center}
.invitation-merged .invitation-text{position:relative;z-index:2;margin-top:29px;line-height:2.1}
.invitation-merged .small-script{position:relative;z-index:2;margin-top:17px}
.invitation-merged .invitation-scenery{position:absolute;left:-1%;bottom:0;width:102%;height:200px;z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent 0%,#000 35%,#000 65%,transparent 100%)}
.invitation-merged .invitation-scenery img{object-fit:cover;object-position:center bottom;opacity:.38}
.paper-scene.music-scene{height:180svh}
.music-scene .stage{position:sticky;height:100svh;padding:25px 6% 35px}
.paper-scene .music-canvas{width:min(1050px,100%);height:auto;aspect-ratio:16/9;max-height:none}
.paper-scene .music-card{left:14%;right:14%;bottom:14%;height:24%;border:1px solid #cfd6be99;background:#e5e8dad9;border-radius:24px;box-shadow:0 12px 35px #6d786b0c}
.paper-scene .music-people{left:8%;bottom:14%;width:41%;height:78%}
.paper-scene .record-wrap{right:15%;bottom:29%;width:31%}
.paper-scene .music-player{right:5%;top:8%;width:42%;height:86%;grid-template-columns:40px minmax(0,1fr);gap:7px 14px}
.paper-scene .play-button{width:40px;height:40px;grid-row:1}
.paper-scene .track-title{font-size:clamp(14px,1.7cqw,20px);letter-spacing:.02em;white-space:nowrap}
.paper-scene .track-meta{display:flex;gap:18px;align-items:center;margin-top:5px}
.paper-scene .track-artist{margin:0;font-size:clamp(11px,1.05cqw,13px)}
.paper-scene .lyrics-link{font-size:11px;background:none;padding:0;white-space:nowrap;color:#63734f;min-height:24px}
.paper-scene .track-timeline{gap:8px;font-size:clamp(10px,1cqw,12px)}
.paper-scene .track-timeline input{height:24px;background:transparent;appearance:none}
.paper-scene .track-timeline input::-webkit-slider-runnable-track{height:2px;background:#b3bea0;border-radius:2px}
.paper-scene .track-timeline input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;border-radius:50%;background:#889d52}
.paper-scene .track-timeline input::-moz-range-track{height:2px;background:#b3bea0;border-radius:2px}
.paper-scene .track-timeline input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#889d52}
.paper-scene .music-sentence{bottom:0;left:6%;right:6%;height:10%}
.lyric-current{font-size:clamp(13px,1.35cqw,19px)}
.lyrics-preview{gap:4px}
.lyric-context{font-size:clamp(10px,.92cqw,13px)}
.music-glow{position:absolute;left:4%;right:6%;top:0;bottom:6%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 23% 65%,#e8c7ae5c,transparent 48%),radial-gradient(ellipse at 68% 41%,#c1b5d15c,transparent 46%);filter:blur(18px)}
.music-wave{position:absolute;right:6%;top:-21px;display:flex;align-items:flex-end;gap:3px;height:18px}
.music-wave i{display:block;width:3px;height:5px;background:#9aa779;border-radius:3px;transform-origin:bottom;animation:equalizer 1s ease-in-out infinite alternate;animation-play-state:paused}
.music-wave i:nth-child(2n){height:13px;animation-delay:-.45s}.music-wave i:nth-child(3n){height:9px;animation-delay:-.2s}
.is-playing .music-wave i{animation-play-state:running}
@keyframes equalizer{to{transform:scaleY(.28)}}
.paper-scene .memory-paper{background:#e4e7d9;border-radius:2px}
.photo-palette{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));overflow:hidden;border-radius:18px;margin:34px 0 45px;isolation:isolate}
.color-disc{aspect-ratio:1;position:relative;display:grid;place-items:center;background:color-mix(in srgb,var(--photo-color) 70%,#f7f5ec);padding:16%;overflow:hidden}
.color-disc img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff4,0 5px 12px #0002;transition:transform .6s ease;aspect-ratio:1}
.color-disc:hover img{transform:rotate(-7deg) scale(1.06)}
.base-scene.promise .promise-background{inset:0;width:100%;height:100%;object-fit:cover}
.base-scene.promise .promise-stage{background:#301812}
.base-scene.closing footer span:first-child{font-size:11px;letter-spacing:.11em}
/* Bottom mini player stays available when paused; opening lyrics does not start audio. */
.lyrics-ribbon{bottom:max(16px,env(safe-area-inset-bottom));width:280px;max-width:calc(100vw - 54px);padding:7px 13px 7px 8px;gap:8px;box-shadow:0 6px 24px #26321b1a;overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s;isolation:isolate}
.lyrics-ribbon:hover{transform:translateY(-2px);box-shadow:0 9px 30px #26321b26;border-color:#a5b78a}
.lyrics-ribbon::after{content:'';position:absolute;bottom:0;left:0;height:2px;background:#8c9e67;width:var(--audio-progress,0%);z-index:-1;transition:width .3s linear}
.lyrics-ribbon .ribbon-open{border:0;border-radius:0;flex:1;width:auto;height:34px;display:flex;gap:10px;align-items:center;min-width:0;padding:0;font-family:var(--serif);color:#536442}
#ribbon-lyric{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.ribbon-more{font-size:10px;letter-spacing:.08em;white-space:nowrap;color:#7c856d}
.lyrics-ribbon button:active{scale:.93;transition:scale .15s}
.lyrics-panel{padding:0;border:1px solid #dadfcd;border-radius:24px;width:min(340px,calc(100vw - 44px));max-width:none;max-height:calc(100svh - 42px);height:min(580px,73svh);margin:auto auto max(16px,env(safe-area-inset-bottom));background:var(--page-paper);color:var(--ink);box-shadow:0 16px 65px #18241040;overflow:hidden;transform-origin:50% 100%}
.lyrics-panel[open]{display:flex;flex-direction:column}
.lyrics-panel[open]:not(.is-closing){animation:lyrics-expand .38s cubic-bezier(.18,.75,.28,1.05) both}
.lyrics-panel.is-closing{animation:lyrics-collapse .24s ease-in both}
.lyrics-panel::backdrop{background:#24302024;backdrop-filter:blur(2px)}
@keyframes lyrics-expand{from{opacity:0;transform:translateY(8px) scale(.82,.12);border-radius:30px}to{opacity:1;transform:none;border-radius:24px}}
@keyframes lyrics-collapse{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.82,.12);border-radius:30px}}
.lyrics-mini-slot{flex:none;background:#eceee0}
.lyrics-panel .lyrics-ribbon{position:relative;left:auto;bottom:auto;translate:none;width:100%;max-width:none;border:0;border-radius:0;border-top:1px solid #d7ddca;background:transparent;box-shadow:none;backdrop-filter:none;padding:9px 15px 11px;margin:0}
.lyrics-panel .lyrics-ribbon:hover{transform:none;box-shadow:none}
.lyrics-panel-heading{padding:26px 26px 20px;display:flex;align-items:flex-start;gap:15px;justify-content:space-between;flex:none;border-bottom:1px solid #d7ddca88;background:radial-gradient(ellipse at 80% 20%,#cdb7ce32,transparent 70%)}
.lyrics-panel-eyebrow{font:10px Georgia,serif;letter-spacing:.21em;color:#929880;margin-bottom:8px}
.lyrics-panel h2{font-size:21px;font-weight:400;letter-spacing:.04em}
.lyrics-panel-artist{font:12px var(--sans);margin-top:6px;color:#818872}
.lyrics-close{width:34px;height:34px;border-radius:50%;background:#e5e8da;font:24px Arial;flex:none;color:#68764f}
.lyrics-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7c0a3 transparent;padding:90px 26px 125px;position:relative;scroll-behavior:smooth}
.lyrics-line{color:#89917d;line-height:1.8;font-size:16px;padding:10px 0;transition:color .35s,font-size .35s;overflow-wrap:anywhere}
.lyrics-line.is-current{color:#415732;font-size:20px}
.lyrics-line.is-past{color:#758366}
.lyrics-panel-controls{display:flex;align-items:center;gap:10px;padding:10px 21px 5px;flex:none;border-top:1px solid #d7ddca;background:#eceee0;font:11px Georgia,serif}
.lyrics-panel-controls input{min-width:0;flex:1;width:100%;height:28px;accent-color:#7c914e;cursor:pointer}
.lyrics-panel-controls span{white-space:nowrap}
.panel-play{height:38px;width:38px;flex:none;background:#647849;color:#faf8f0;border-radius:50%;font:15px Arial}
.lyrics-panel-status{padding:0 24px 12px;font-size:12px;color:#a16269;min-height:0}
.lyrics-panel-status:empty{display:none}
@media(max-width:700px){
 .paper-scene .stage{padding:28px 5% 30px}
 .base-scene#beginning{padding-bottom:38px}
 .base-scene.invitation-merged{padding:55px 6% 75px;min-height:640px}
 .invitation-merged .invitation-title{font-size:36px;margin:22px 0 25px}
 .invitation-merged .invitation-pair{gap:16px}
 .invitation-merged .portrait-stamp{width:34%;max-width:150px}
 .invitation-merged .avatar-shell{height:174px}
 .invitation-merged .portrait-stamp figcaption{font-size:13px;letter-spacing:.03em;margin-top:8px;white-space:nowrap}
 .invitation-merged .pair-ampersand{font-size:36px}
 .invitation-merged .invitation-text{font-size:14px;margin-top:26px;letter-spacing:.03em}
 .invitation-merged .small-script{font-size:21px}
 .invitation-merged .invitation-scenery{height:165px;bottom:0}
 .photo-palette{grid-template-columns:repeat(6,minmax(0,1fr));margin:28px 0 30px;border-radius:12px}
 .base-scene.closing footer{flex-wrap:wrap;align-items:center;justify-content:center;padding-bottom:82px}
 .base-scene.closing footer span:first-child{flex:0 0 100%;text-align:center;font-size:11px}
 .lyrics-ribbon{font-size:12px;bottom:max(14px,env(safe-area-inset-bottom));width:260px;padding-right:12px}
 .lyrics-ribbon .ribbon-open{gap:10px}
 .lyrics-panel{width:min(320px,calc(100vw - 44px));height:67svh;max-height:calc(100svh - 36px);margin:auto auto max(14px,env(safe-area-inset-bottom));border-radius:24px}
 .lyrics-panel-heading{padding:20px 20px 15px}
 .lyrics-panel h2{font-size:19px}
 .lyrics-panel-controls{padding:10px 18px 5px;gap:8px}
 .lyrics-scroll{padding-left:20px;padding-right:20px}
 .lyrics-line{font-size:15px}.lyrics-line.is-current{font-size:18px}
}
@media(max-aspect-ratio:4/5){
 .paper-scene .canvas{width:100%;height:100%;aspect-ratio:auto}
 .paper-scene.music-scene{height:180svh;min-height:0}
 .music-scene .stage{padding:20px 5% 25px}
 .paper-scene .music-card{left:12%;right:12%;bottom:16%;height:112px;border-radius:18px}
 .paper-scene .music-player{left:7%;right:7%;width:auto;top:12%;height:79%;grid-template-columns:34px minmax(0,1fr);gap:6px 10px}
 .paper-scene .play-button{height:36px;width:36px;font-size:15px}
 .paper-scene .track-title{font-size:14px}
 .paper-scene .track-meta{gap:18px}
 .paper-scene .track-artist{font-size:11px}
 .paper-scene .track-timeline{font-size:10px}
 .paper-scene .music-people{left:0;bottom:calc(16% + 99px);width:64%;height:52%;z-index:6}
 .paper-scene .record-wrap{right:0;bottom:calc(16% + 99px);width:48%;z-index:3}
 .paper-scene .music-sentence{bottom:1%;left:0;right:0;height:12%}
 .lyric-current{font-size:14px}.lyric-context{font-size:11px}
 .music-glow{inset:8% 0 11%;filter:blur(12px)}
 .music-wave{top:-20px}
 .base-scene.promise .promise-stage{height:100svh;min-height:0}
 .base-scene.promise .promise-background{height:100%;width:100%;object-fit:cover;object-position:50% 50%;background:none}
 .base-scene.promise .promise-shade{background:linear-gradient(180deg,#1d100db3 0%,#29151240 28%,transparent 45%,transparent 80%,#25140f55 100%)}
 .base-scene.promise .promise-copy{top:6%;bottom:auto;left:7%;right:7%;width:auto;max-width:none;text-align:center}
 .base-scene.promise .promise-copy h2{font-size:clamp(25px,6.8vw,37px);display:flex;justify-content:center;gap:.55em;margin:10px 0 12px}
 .base-scene.promise .promise-copy h2 .title-line{margin:0!important;max-width:47%}
 .base-scene.promise .promise-copy>p:not(.eyebrow){font-size:12px;line-height:1.8}
 .base-scene.promise .promise-copy .promise-names{font-size:17px!important;margin-top:11px}
 .base-scene.promise .promise-seal{top:auto;bottom:7%;right:5%}
}
@media(max-height:550px) and (min-aspect-ratio:4/5){
 .paper-scene .stage{padding:22px 5%}
 .paper-scene .canvas{width:min(100%,calc((100svh - 44px)*16/9));height:auto}
 .paper-scene.music-scene{height:180svh;min-height:0}
 .music-scene .stage{padding:12px 6%}
 .paper-scene .music-canvas{width:min(100%,calc((100svh - 30px)*16/9))}
 .paper-scene .music-player{gap:3px 10px;grid-template-columns:30px minmax(0,1fr)}
 .paper-scene .play-button{height:29px;width:29px;font-size:12px}
 .paper-scene .track-title{font-size:12px}.paper-scene .track-artist,.paper-scene .lyrics-link{font-size:9px}
 .paper-scene .track-meta{margin-top:2px;gap:12px}
 .paper-scene .track-timeline{font-size:9px;gap:6px}
 .paper-scene .track-timeline input{height:17px}
 .lyric-current{font-size:11px}.lyric-context{font-size:8px}
 .lyrics-preview{gap:1px}
 .music-wave{top:-14px;height:12px}
 .lyrics-panel{height:calc(100svh - 28px);max-height:calc(100svh - 28px);margin:14px auto;border-radius:20px;width:min(380px,calc(100vw - 44px))}
 .lyrics-panel-heading{padding:13px 23px 10px}
 .lyrics-panel-eyebrow{display:none}
 .lyrics-panel-controls{padding:6px 18px 3px}
}
