@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{--forest:#281a14;--forest2:#51372b;--moss:#ae8d72;--paper:#faf0e3;--ink:#3d2b22;--muted:#b69d8b;--gold:#e3c19b;--line:rgba(233,223,197,.19);--safe-b:env(safe-area-inset-bottom,0px);font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--paper);background:#20140f;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;}html{scroll-behavior:smooth}body{overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.11;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".31"/%3E%3C/svg%3E')}button,a{-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #eccb85;outline-offset:4px}a{color:inherit}.layout{display:flex;align-items:stretch;min-height:100dvh;background:radial-gradient(circle at 7% 14%,#654734 0,transparent 24%),#281a14}.desktop-aside{display:none}.experience{width:100%;min-width:0;position:relative;background:var(--forest);min-height:100dvh;isolation:isolate}.topbar{height:65px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:6;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(45,28,20,.67),rgba(45,28,20,0));}.brand{font-family:'Playfair Display',Georgia,serif;font-size:16px;letter-spacing:.01em;color:#fff}.brand strong{font-weight:500;font-style:italic}.star{color:#eed6a3;margin-left:6px;font-family:serif;font-size:13px}.sound-control{color:#fff;display:flex;gap:7px;align-items:center;border:1px solid rgba(255,255,255,.36);background:rgba(50,29,20,.43);font-size:12px;letter-spacing:.04em;padding:9px 12px;border-radius:100px;backdrop-filter:blur(8px)}.page[hidden]{display:none!important}.page{width:100%;min-height:100dvh;position:relative}.cover{display:flex;align-items:flex-end;background:#34231b;overflow:hidden}.cover-art{position:absolute;inset:0}.cover-art img{width:100%;height:100%;object-fit:cover;object-position:52% center;transform:scale(1.035);animation:kenburns 18s ease-in-out infinite alternate}.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,26,18,.38) 0%,transparent 33%,rgba(42,25,18,.26) 50%,rgba(26,15,10,.95) 99%)}.cover-copy{position:relative;z-index:2;padding:0 24px calc(44px + var(--safe-b));width:100%;text-shadow:0 2px 15px rgba(0,0,0,.15)}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:700;color:#916f59;text-transform:uppercase}.eyebrow.light{color:#f3dbc2}.cover-copy h1{font:500 clamp(45px,12vw,72px)/1.04 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin:13px 0 16px}.cover-copy h1 em{font-weight:400;color:#f9dfba}.cover-copy p{font:400 15px/1.65 'DM Sans',sans-serif;color:#fff2e6;max-width:335px;margin:0 0 24px}.primary-button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;background:#f5dfc8;color:#412a20;border:0;border-radius:100px;min-height:52px;padding:0 23px;font-size:13px;font-weight:700;box-shadow:0 6px 30px rgba(0,0,0,.1);transition:transform .2s,background .2s}.primary-button:hover{transform:translateY(-2px);background:#fff8e9}.primary-button span{font-size:18px;font-weight:400}.cover-note{display:block;margin-top:13px;font-size:11px;color:rgba(255,255,255,.75)}.cover-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}.cover-sparkles span{position:absolute;color:#fff5d3;font-size:32px;opacity:.65;animation:twinkle 4s ease-in-out infinite}.cover-sparkles span:nth-child(1){left:12%;top:28%}.cover-sparkles span:nth-child(2){right:11%;top:22%;animation-delay:1.3s;font-size:17px}.cover-sparkles span:nth-child(3){right:16%;top:51%;animation-delay:2.1s;font-size:25px}.album{background:radial-gradient(circle at top center,rgba(145,98,65,.22),transparent 45%),#f3e8d8;color:var(--ink);padding:calc(83px + env(safe-area-inset-top,0px)) 18px calc(110px + var(--safe-b));min-height:100dvh;}.album-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:0 4px}.album-head h2{margin:8px 0 18px;font:500 clamp(26px,7vw,34px)/1.13 'Playfair Display',Georgia,serif;letter-spacing:-.02em}.album-head h2 i{color:#946d53;font-weight:400}.progress-wrap{font-size:12px;letter-spacing:.08em;color:#7b5c49;white-space:nowrap;margin-bottom:20px}.progress-track{height:2px;background:#d8c8b8;border-radius:5px;margin:0 4px 15px}.progress-track div{width:4.7%;height:100%;background:#8d5c43;transition:width .32s ease}.photo-stage{height:min(51dvh,540px);min-height:290px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;background:#e8d9c9;box-shadow:0 10px 27px rgba(70,40,25,.16);outline-offset:5px;touch-action:pan-y}.photo-backdrop{position:absolute;inset:-24px;background-position:center;background-size:cover;filter:blur(28px);opacity:.23;transform:scale(1.1)}.photo-frame{height:100%;width:100%;z-index:2;margin:0;display:flex;align-items:center;justify-content:center}.photo-frame img{display:block;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 5px 22px rgba(0,0,0,.08);transition:opacity .18s ease,transform .18s ease}.photo-frame img.changing{opacity:.42;transform:scale(.988)}.quote-area{min-height:158px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px 7px;max-width:620px;margin:0 auto}.quote-deco{font-size:21px;color:#b38763;margin-bottom:7px}.quote{font:italic 400 clamp(17px,4.9vw,22px)/1.47 'Playfair Display',Georgia,serif;text-align:center;margin:0;text-wrap:balance;color:#51362b}.quote-area.final-photo .quote-deco,.quote-area.final-photo .quote{display:none}.album-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;position:relative}.icon-button,.next-button{min-height:46px;border:1px solid #cdbca8;color:#55392b;background:rgba(255,255,255,.58);border-radius:100px;font-weight:600}.icon-button{font-size:23px;min-width:50px}.next-button{min-width:115px;padding:0 19px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:18px;background:#523728;color:#fff;border:0}.next-button span{font-size:19px;font-weight:400}.navigation-hint{color:#917b6d;font-size:11px;text-align:center}.letter-intro{display:grid;place-items:center;padding:120px 25px 75px;overflow:hidden;text-align:center;background:radial-gradient(circle at 56% 26%,#674837 0,#312019 45%,#241712 100%)}.letter-intro-body{max-width:560px;z-index:2}.letter-intro h2{font:400 clamp(32px,8vw,49px)/1.21 'Playfair Display',Georgia,serif;margin:20px 0 23px}.letter-intro h2 em{color:#e8bc91}.letter-intro-body>p:not(.eyebrow){font:400 14px/1.7 'DM Sans',sans-serif;color:#e6cdb9;margin:0 auto 30px;max-width:325px}.envelope-button{display:flex;flex-direction:column;align-items:center;gap:18px;background:transparent;border:0;color:#f7e9db;font:600 13px 'DM Sans',sans-serif}.envelope{display:block;position:relative;width:166px;height:105px;background:#e8cdb1;border-radius:5px 5px 11px 11px;transform:rotate(-4deg);box-shadow:0 20px 30px rgba(0,0,0,.24),0 5px 0 rgba(230,216,183,.3);transition:transform .4s}.envelope::after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.5%,#c3a083 50%,transparent 51%),linear-gradient(148deg,transparent 49.5%,#c3a083 50%,transparent 51%);border-radius:6px}.envelope-flap{position:absolute;z-index:2;top:0;left:0;width:100%;height:65%;background:#f1dbc3;clip-path:polygon(0 0,100% 0,50% 95%);filter:drop-shadow(0 3px 1px #c09b7d)}.envelope-heart{position:absolute;z-index:3;color:#a26751;left:50%;top:47%;transform:translate(-50%,-50%);font-size:22px;text-shadow:0 1px 3px rgba(0,0,0,.1)}.envelope-button:hover .envelope{transform:rotate(0deg) translateY(-6px)}.float-star{position:absolute;color:#ddba95;opacity:.52}.star-a{font-size:56px;top:17%;left:11%}.star-b{font-size:35px;right:12%;bottom:20%}.letter{padding:calc(85px + env(safe-area-inset-top,0px)) 15px 56px;background:#ead9c4;min-height:100dvh;color:var(--ink)}.letter-paper{max-width:675px;margin:0 auto;padding:40px 25px 55px;background:#faf5e9;border-radius:4px;box-shadow:0 18px 52px rgba(62,39,26,.17);border:1px solid #eee3cf;position:relative}.letter-decoration{font-size:35px;color:#b9a189;display:flex;justify-content:space-between;margin-bottom:22px}.letter-decoration span{color:#cba66a}.letter .eyebrow{text-align:center}.letter h2{text-align:center;font:italic 400 42px/1.2 'Playfair Display',serif;margin:24px 0 33px;color:#533626}.letter-text p{font:400 16px/1.95 'Playfair Display',Georgia,serif;color:#443127;margin:0 0 22px}.letter-text p:nth-child(6),.letter-text p:nth-child(13){font-style:italic;color:#72513c}.sign-off{display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;margin-top:43px;color:#856349;font-family:'Playfair Display',Georgia,serif}.sign-off span{font-size:15px;font-style:italic}.sign-off strong{font-size:22px;font-style:italic;font-weight:400}.letter-footer{max-width:675px;margin:18px auto;display:flex;justify-content:space-between;gap:12px}.subtle-link{color:#775640;background:transparent;border:none;font-size:12px;padding:10px 0;text-decoration:underline;text-underline-offset:5px}.experience-footer{position:absolute;left:0;right:0;bottom:0;padding:9px 17px calc(12px + var(--safe-b));display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.04em;color:#faf0e3;opacity:.58;pointer-events:none}.experience-footer span:last-child{font-size:15px}.album~.experience-footer{color:#ad9480}.music-modal{border:0;border-radius:16px;padding:0;max-width:min(90vw,385px);background:#faf0e3;color:#39271d;box-shadow:0 30px 90px #170e0a7d}.music-modal::backdrop{background:#1a0d08bd;backdrop-filter:blur(5px)}.music-sheet{padding:33px 27px 31px;text-align:center;position:relative}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:20px;color:#5a675b;padding:8px}.music-big{font-size:41px;color:#b48662;display:block;margin-bottom:12px}.music-sheet h2{font:400 30px 'Playfair Display',serif;margin:7px 0 4px}.music-sheet p{color:#6b776c;margin:0 0 20px;font-size:13px}.music-status{font-size:13px;color:#76523f;line-height:1.6;margin-bottom:18px}.song-link{display:block;text-decoration:none;border:1px solid #66412c;color:#66412c;border-radius:100px;font-size:12px;font-weight:700;line-height:20px;padding:13px 18px}.music-sheet small{display:block;font-size:10px;line-height:1.5;margin-top:14px;color:#858e85}.primary-button.mini{width:100%;min-height:44px;margin-bottom:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-height:710px) and (max-width:700px){.cover-copy{padding-bottom:calc(29px + var(--safe-b))}.cover-copy h1{font-size:44px;margin-bottom:8px}.album{padding-top:73px}.album-head h2{margin:5px 0 12px}.photo-stage{height:43dvh;min-height:220px}.quote-area{min-height:115px}.quote{font-size:16px;line-height:1.4}}
@media(min-width:700px){.layout{justify-content:center;gap:min(3vw,48px)}.desktop-aside{display:flex;flex-direction:column;justify-content:space-between;width:min(19vw,270px);min-width:155px;padding:38px 0;color:#e5cfb9}.aside-mark{font:italic 23px 'Playfair Display',serif}.aside-body p{font:400 clamp(23px,2.1vw,36px)/1.35 'Playfair Display',Georgia,serif}.aside-dash{display:block;width:26px;height:2px;background:#bfa779}.aside-body small{line-height:1.7;color:#d6bca5}.aside-foot{font-size:11px;color:#b19a88}.right-aside{align-items:flex-end;text-align:right;justify-content:flex-end;gap:8vh}.right-aside-decoration{font-size:89px;color:#b7957c;opacity:.65}.right-aside>span{font:italic 27px 'Playfair Display',serif;line-height:1.2}.experience{width:min(620px,56vw);box-shadow:0 0 70px #170e0a6b}.cover-art img{object-position:center}.cover-copy{padding-left:37px;padding-right:37px;padding-bottom:50px}.cover-copy h1{font-size:66px}.album{padding:95px 34px 95px}.album-head h2{font-size:32px}.photo-stage{height:min(49vh,510px)}.quote{font-size:21px}.letter-paper{padding:53px 51px 68px}.letter{padding:95px 29px 55px}.letter-text p{font-size:17px}.topbar{padding-left:29px;padding-right:29px}}
@media(min-width:1280px){.experience{width:660px}.desktop-aside{width:245px}.album{padding-left:45px;padding-right:45px}.photo-stage{height:490px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes kenburns{from{transform:scale(1.035)}to{transform:scale(1.095)}}@keyframes twinkle{0%,100%{opacity:.24;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}
/* Contraste adequado do cabeçalho nas telas de papel */
body[data-screen="album"] .topbar,body[data-screen="letter"] .topbar{background:rgba(251,239,226,.96);border-bottom:1px solid rgba(75,47,32,.17);backdrop-filter:blur(12px)}
body[data-screen="album"] .brand,body[data-screen="letter"] .brand{color:#492f25}
body[data-screen="album"] .sound-control,body[data-screen="letter"] .sound-control{color:#624332;background:#fcf3e9;border-color:#c9b6a5}
@media(max-width:699px){
  /* Preserve a composição original sem cortar os três cães ou o castelo */
  .cover{background:linear-gradient(180deg,#4b3126,#291a14 78%)}
  .cover-art{top:65px;bottom:auto;left:0;right:0;height:clamp(298px,46dvh,440px);display:flex;align-items:center;justify-content:center;overflow:visible}
  .cover-art img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center;transform:none;animation:none}
  .cover-shade{inset:-2px 0 -26px;background:linear-gradient(180deg,rgba(50,30,21,.09),transparent 68%,#291a14 100%);pointer-events:none}
  .cover-copy{padding-bottom:calc(45px + var(--safe-b));padding-top:20px}
  .cover-copy h1{font-size:clamp(42px,11.4vw,62px)}
  .cover-sparkles span:nth-child(1){top:23%;left:6%}.cover-sparkles span:nth-child(2){top:40%;right:8%}
}
@media(min-width:700px){
  /* Arte completa também no desktop, sem perder o castelo nem os cachorros */
  .cover{background:linear-gradient(180deg,#4c3328,#291a14 77%)}
  .cover-art{top:74px;bottom:auto;left:0;right:0;height:min(55dvh,535px);overflow:hidden}
  .cover-art img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none;animation:none}
  .cover-shade{background:linear-gradient(180deg,rgba(45,27,19,.08),transparent 73%,#2a1b14 100%)}
  .cover-copy{padding-top:35px}
}

/* Tema aniversário: marrom cacau, caramelo e papel quente */
:root{color-scheme:light}
::selection{background:#b78059;color:#fff8f0}
.album{background:radial-gradient(circle at 50% 0%,rgba(194,151,111,.22),transparent 51%),#f3e8d8}
.letter-intro{background:radial-gradient(ellipse at 55% 26%,#674736 0%,#352119 52%,#241712 100%)}
.album-head h2 i{color:#8b5d42}.quote{color:#4e3327}
.letter{background:#eadbc9}.letter-paper{background:#fdf6eb;box-shadow:0 16px 50px rgba(52,30,18,.17)}
.letter-text p{color:#443026}.letter-text p:nth-child(6),.letter-text p:nth-child(13){color:#78503c}
.next-button{background:#5b3c2c}.next-button:hover{background:#704832}
.primary-button{color:#392318}.sound-control{border-color:rgba(255,237,220,.42)}
@media(min-width:700px){.layout{background:radial-gradient(circle at 8% 15%,#654734 0,transparent 26%),#241712}}

/* Música diretamente no site, sem abrir modal ou nova página */
.music-inline[hidden],.music-frame-wrap[hidden]{display:none!important}
.music-inline{padding:78px 15px 18px;position:relative;z-index:5;background:linear-gradient(155deg,#36231a,#604032);color:#f5e5d7;border-bottom:1px solid #9d7661}
.music-inline-header{width:min(100%,370px);margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.music-inline-heading{display:flex;align-items:center;gap:12px;min-width:0}
.music-inline-heading>span{display:grid;place-items:center;border:1px solid #bd987f;border-radius:50%;width:42px;height:42px;flex-shrink:0;color:#f2d9b4;font-size:19px}
.music-inline-heading div{display:flex;flex-direction:column;gap:2px;min-width:0}
.music-inline-heading small{font:700 9px 'DM Sans',sans-serif;letter-spacing:.17em;color:#d8bfa9}
.music-inline-heading strong{font:500 18px/1.15 'Playfair Display',Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-inline-heading div>span{font:400 11px 'DM Sans',sans-serif;color:#e3cbb9}
.music-inline-close{flex:none;width:36px;height:36px;background:#74523d;color:#fff;border:1px solid #9d7a64;border-radius:50%;font-size:17px}
.music-frame-wrap{width:min(100%,370px);margin:0 auto;min-height:208px;aspect-ratio:16/9;background:#1b1512;border-radius:8px;overflow:hidden;border:1px solid #9b745c;box-shadow:0 14px 30px #1b100b5e}
.music-frame-wrap iframe{display:block;width:100%;height:100%;min-height:208px;border:0}
.music-inline-help{max-width:370px;margin:12px auto 0;font:400 11px/1.5 'DM Sans',sans-serif;color:#ebd8c7;text-align:center}
.sound-control[aria-pressed='true']{box-shadow:0 0 0 2px #d2a477 inset;background:#62432f}
@media(max-width:360px){.music-frame-wrap{min-height:202px}.music-frame-wrap iframe{min-height:202px}}
/* O controle de áudio fica sempre acessível no celular enquanto o álbum rola. */
.topbar{position:sticky;top:0;left:auto;right:auto;margin-bottom:-65px}

/* Aviso discreto de reprodução, sem modal nem pop-up. */
.audio-feedback[hidden]{display:none!important}
.audio-feedback{position:fixed;top:72px;left:50%;transform:translateX(-50%);max-width:min(94vw,440px);width:max-content;margin:0;padding:10px 15px;border-radius:24px;background:#4a3022;color:#fff7ed;font:500 12px/1.45 'DM Sans',sans-serif;box-shadow:0 7px 25px #0004;text-align:center;z-index:30}
@media(prefers-reduced-motion:reduce){.audio-feedback{transition:none}}