:root{color-scheme:dark;--bg:#111;--surface:#1a1718;--red:#f14860;--text:#f7f4f4;--muted:#aaa1a4;--line:#ffffff14;--script:'Parisienne',cursive;--body:'Quicksand',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.7;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #ff8a9a;outline-offset:5px}button{border:0}button:disabled{cursor:default;opacity:.6}button:hover:not(:disabled){filter:brightness(1.15)}.ambient{position:absolute;inset:0 0 auto;height:1050px;background:radial-gradient(ellipse at 50% -15%,#792c3d60,transparent 57%);z-index:-1;pointer-events:none}.topbar{height:86px;max-width:1120px;margin:auto;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.monogram{font-family:var(--script);font-size:27px}.monogram span{font-family:var(--body);font-size:17px;color:var(--red);margin:0 8px}.topbar nav{display:flex;gap:34px;color:#c6bfc1;font-size:12px}.topbar nav a:hover{color:white}.icon-button{display:inline-grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;height:38px;width:38px;font-size:20px}.hero{text-align:center;padding:48px 24px 0;max-width:1100px;margin:auto}.hourglass{position:relative;width:35px;height:43px;margin:0 auto 24px;font-size:45px;line-height:1;color:var(--red);transform:rotate(180deg)}.hourglass span{position:absolute;inset:10px 0 0;font-size:22px;color:#eee}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:700;color:#bca8ae;margin:0 0 15px}h1,h2,.footer-name{font-family:var(--script);font-weight:400;line-height:1.2}h1{font-size:72px;margin:0 0 12px}h2{font-size:52px;margin:0 0 16px}.hero-sub{font-size:13px;color:#bcb1b5;margin:0}.gallery-stage{height:410px;margin:48px auto 0;max-width:960px;display:flex;align-items:center;justify-content:center;gap:18px;scroll-margin-top:100px}.photo-card{display:block;position:relative;background:#231d20;padding:0;border-radius:15px;overflow:hidden;box-shadow:0 14px 45px #0005;transition:transform .5s,opacity .4s;width:30%;height:335px}.photo-card img{width:100%;height:100%;object-fit:cover;display:block}.photo-card.center{width:36%;height:410px;z-index:2}.photo-card.side{opacity:.78}.photo-card.left{transform:perspective(900px) rotateY(12deg) rotate(-4deg)}.photo-card.right{transform:perspective(900px) rotateY(-12deg) rotate(4deg)}.photo-card.side:hover{opacity:1;transform:rotate(0)}.photo-card.center span{position:absolute;bottom:0;left:0;right:0;padding:42px 10px 18px;background:linear-gradient(transparent,#0009);font-size:10px;letter-spacing:.7px;color:white}.gallery-controls{margin:22px auto 36px;display:flex;align-items:center;justify-content:center;gap:18px}.gallery-controls .icon-button{width:30px;height:30px;font-size:15px}.gallery-controls>span{color:#bcaeb3;font-size:10px;letter-spacing:3px}.hero blockquote{font-size:16px;font-weight:500;font-style:italic;line-height:1.9;color:#d3c9cd;max-width:400px;margin:0 auto 22px}.dedicated{font-size:11px;color:#b8aeb2;line-height:1.9;margin:0 0 23px}.dedicated strong{color:#f4eaed;font-size:12px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:9px;padding:12px 22px;font-size:12px;font-weight:700;transition:background .2s,transform .2s}.primary{background:var(--red);color:white;box-shadow:0 4px 0 #9d2b3c,0 10px 30px #f1486014}.primary:hover{transform:translateY(-2px)}.secondary{background:#211b1e;border:1px solid #ffffff20}.scroll-cue{margin:35px auto 0;display:flex;flex-direction:column;align-items:center;font-size:9px;letter-spacing:2px;color:#8f8086;gap:7px}.scroll-cue span{font-size:22px;color:var(--red)}.section{padding:85px 24px 0;text-align:center;max-width:900px;margin:auto}.muted,.section-intro{font-size:12px;color:var(--muted);margin:0 auto 28px}.time-section{position:relative}.time-section:before{content:'';position:absolute;inset:0 -10% -20%;background:radial-gradient(ellipse,#73223820,transparent 65%);z-index:-1}.timer{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:650px;margin:35px auto 0}.time-unit{background:linear-gradient(145deg,#30202490,#181517);border:1px solid #e05d751f;border-radius:12px;padding:23px 5px 18px}.time-unit strong{font-size:33px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums;display:block}.time-unit span{display:block;font-size:8px;letter-spacing:1.4px;color:#ad929d;margin-top:9px}.timer-caption{font-size:11px;color:#9f8e95;margin:18px 0 36px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:650px;margin:auto;background:var(--line)}.stat{background:#151213;padding:22px 10px}.stat span{font-size:19px;color:var(--red)}.stat strong{display:block;font-size:19px;font-weight:500;margin:6px 0}.stat small{color:#a4959b;font-size:10px}.forever{margin:35px 0 0;font-size:12px;color:#c7b6bd}.forever span{color:var(--red)}.anniversary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:650px;margin:30px auto 0}.anniversary-card{border:1px solid var(--line);border-radius:12px;padding:25px 12px;background:linear-gradient(150deg,#2d1c2250,#171415)}.anniversary-card.featured{border-color:#f1486050;background:linear-gradient(150deg,#54202d50,#171415)}.anniversary-card .symbol{font-size:30px;color:#f99aaa}.anniversary-card strong{display:block;font-size:13px;margin:13px 0 8px}.anniversary-card small{display:block;color:#9d8a92;font-size:10px}.anniversary-card b{font-weight:500;font-size:12px;color:#f58a9d}.timeline-list{max-width:620px;margin:38px auto 0;text-align:left;position:relative}.timeline-list:before{content:'';position:absolute;left:53px;top:12px;bottom:35px;width:1px;background:linear-gradient(var(--red),#5f3441)}.timeline-item{position:relative;display:grid;grid-template-columns:80px 1fr;gap:20px;margin-bottom:22px}.timeline-date{font-size:11px;color:#ed9daf;padding-top:3px}.timeline-date:after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:var(--red);left:50px;top:10px;box-shadow:0 0 0 5px #f1486010}.timeline-card{padding:0 0 18px;border-bottom:1px solid var(--line)}.timeline-card h4{font-size:14px;font-weight:600;margin:0 0 8px}.timeline-card p{color:#aa9da3;font-size:12px;line-height:1.9;margin:0}.interaction-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:650px;margin:35px auto 0}.experience{position:relative;text-align:left;padding:24px;border-radius:13px;background:linear-gradient(135deg,#281c22,#191617);border:1px solid var(--line);transition:transform .2s}.experience:hover{transform:translateY(-3px);border-color:#f1486040}.experience-icon{display:block;font-size:26px;line-height:1;color:#f18a9c;margin-bottom:21px}.experience strong{display:block;font-size:13px;font-weight:600}.experience small{display:block;font-size:10px;color:#a18c96;margin-top:4px}.experience .arrow{position:absolute;right:20px;top:20px;color:#8e6d7b}.verse{max-width:460px;padding-top:95px}.tiny-heart{font-size:28px;color:var(--red);display:block;margin-bottom:20px}.verse blockquote{font-size:16px;font-style:italic;line-height:2;margin:20px auto;color:#cdbdc5}.verse cite{font-size:10px;color:#a47e8f;font-style:normal}.share-section h2{font-size:44px}.postcard{width:270px;padding:18px 15px 8px;background:#f5eeea;color:#38242d;margin:32px auto;border-radius:3px;transform:rotate(-3deg);box-shadow:0 15px 55px #0007}.postcard>span{font-family:var(--script);font-size:28px}.postcard img{width:100%;height:245px;object-fit:cover;display:block;margin-top:10px}.postcard p{font-size:9px;margin:15px 0}.button-row{display:flex;gap:12px;justify-content:center;margin-top:40px}.status{font-size:11px;min-height:22px;color:#d9a0b1}footer{text-align:center;padding:75px 24px 145px;margin-top:35px;border-top:1px solid var(--line);background:radial-gradient(ellipse at bottom,#58233526,transparent 60%)}.footer-name{font-size:38px}footer p{font-size:10px;color:#a998a0}footer>span{font-size:10px;color:#c27790}.text-button{display:block;background:transparent;font-size:10px;color:#9f8a94;margin:22px auto 0}.music-bar{height:76px;background:#0d0c0deb;backdrop-filter:blur(18px);position:fixed;bottom:0;left:0;right:0;z-index:20;border-top:1px solid #ffffff0c;display:flex;justify-content:center;align-items:center;gap:40px}.music-track{display:flex;align-items:center;gap:14px}.music-track small{font-size:7px;letter-spacing:2px;color:#b197a3;display:block}.music-track strong{font-size:11px;font-weight:600}.record{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#f14860 14%,#1f151a 17%,#3f2b35 30%,#1c1519 34%);color:#facbd5;font-size:13px}.music-toggle{border-radius:50%;width:35px;height:35px;background:#f5f2f3;color:#20151b;font-size:15px}.music-panel{position:fixed;right:24px;bottom:92px;width:340px;max-width:calc(100vw - 32px);background:#20171c;border:1px solid #613347;z-index:30;padding:15px;border-radius:14px;box-shadow:0 16px 70px #0009}.music-panel[hidden]{display:none}.panel-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:12px}.music-panel iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px}.music-panel p{font-size:10px;color:#baa4ae;margin-bottom:0}dialog{background:#1c1519;color:var(--text);border:1px solid #694052;border-radius:18px;max-width:calc(100vw - 32px);width:480px;padding:42px;text-align:center;max-height:85dvh;overflow:auto;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#080507d9;backdrop-filter:blur(8px)}.dialog-close,.game-close{position:absolute;right:13px;top:9px;font-size:28px;background:transparent;color:#c5a3b1;width:35px;height:35px}.letter-dialog{width:580px;text-align:left;padding:48px}.letter-dialog h2{margin-bottom:0}.letter-sub{font-size:14px;color:#c599ab;margin-top:0}#letter-content p{font-size:13px;line-height:2;color:#d2bec7}.signature{font-family:var(--script);font-size:29px;text-align:right;color:#f2a8bd}.photo-dialog{width:700px;padding:42px 16px 15px;background:#151013}.photo-dialog>img{max-width:100%;max-height:65dvh;object-fit:contain;border-radius:6px}.lightbox-controls{display:flex;justify-content:center;align-items:center;gap:25px;padding-top:15px;font-size:11px;color:#ad8d9c}.detail-image{max-width:100%;max-height:45dvh;object-fit:contain;border-radius:10px}.love-note{font-family:var(--script);font-size:34px;line-height:1.5;color:#f1bdce;margin:30px 0}.game-modal{position:fixed;inset:0;background:#080507df;backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.game-card{background:#1c1519;border:1px solid #694052;border-radius:18px;max-width:480px;width:100%;padding:42px 30px;text-align:center;position:relative;max-height:90dvh;overflow:auto}.game-card h2{font-size:42px}#quiz-question{font-size:14px}#quiz-feedback,#roulette-result{font-size:12px;color:#e3aabd;min-height:24px}.quiz-options{display:grid;gap:10px;margin:24px 0}.quiz-option{background:#2a1c24;border:1px solid #634153;border-radius:8px;padding:12px;font-size:12px}.quiz-option.correct{background:#234a3b}.quiz-option.wrong{background:#672b40}.roulette-wheel{font-size:85px;color:#f2a1b9;line-height:1.5}.roulette-wheel.spinning{animation:spin 1s cubic-bezier(.2,.5,.5,1)}@keyframes spin{to{transform:rotate(1080deg)}}.petal{position:fixed;pointer-events:none;color:#ec6e8c;z-index:40;animation:floatup 2s ease-out forwards;font-size:17px}@keyframes floatup{from{transform:translateY(0) scale(.7);opacity:1}to{transform:translateY(-130px) rotate(25deg) scale(1.2);opacity:0}}body:has(dialog[open]),body:has(.game-modal:not(.hidden)){overflow:hidden}form{text-align:left}form label{display:block;font-size:12px;margin:15px 0 5px}input,textarea{width:100%;background:#100c0f;color:#f7e9ee;border:1px solid #694052;padding:11px;border-radius:7px;font-size:13px}form .primary{margin-top:20px}#install-dialog p{font-size:13px;color:#c0aab5;line-height:1.9}
@media(min-width:1200px){.hero{padding-top:60px}.gallery-stage{height:450px}.photo-card.center{height:450px}.photo-card.side{height:365px}}
@media(max-width:600px){.topbar{height:66px;padding:0 20px}.topbar nav{gap:16px;font-size:10px}.topbar>.icon-button{display:none}.monogram{font-size:24px}.hero{padding:35px 12px 0}h1{font-size:53px}h2{font-size:44px}.eyebrow{font-size:8px;letter-spacing:2.4px}.hero-sub{font-size:11px}.hourglass{margin-bottom:22px}.gallery-stage{height:300px;margin-top:34px;gap:10px;width:calc(100vw + 80px);position:relative;left:50%;transform:translateX(-50%)}.photo-card.center{width:51vw;height:300px;flex-shrink:0}.photo-card.side{width:32vw;height:240px;flex-shrink:0}.photo-card.center span{font-size:8px}.gallery-controls{margin-top:19px;margin-bottom:28px}.hero blockquote{font-size:14px;max-width:300px}.section{padding-top:65px;padding-left:20px;padding-right:20px}.timer{gap:7px;grid-template-columns:repeat(3,1fr);max-width:340px}.time-unit{padding:18px 5px 15px}.time-unit strong{font-size:30px}.time-unit span{font-size:8px}.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:15px 4px}.stat strong{font-size:16px}.stat small{font-size:8px}.anniversary-grid{gap:8px}.anniversary-card{padding:20px 7px}.anniversary-card strong{font-size:11px}.anniversary-card b{font-size:10px}.anniversary-card small{font-size:9px}.timeline-item{grid-template-columns:60px 1fr;gap:14px}.timeline-list:before{left:45px}.timeline-date:after{left:42px}.timeline-card p{font-size:11px}.timeline-card h4{font-size:12px}.interaction-grid{gap:10px}.experience{padding:20px 15px;min-height:160px}.experience strong{font-size:12px}.experience small{font-size:9px}.experience .arrow{right:13px;top:13px}.verse blockquote{font-size:14px}.share-section h2{font-size:38px}.button-row{gap:10px}.button-row button{padding:12px 15px;font-size:10px}.music-bar{height:70px;gap:25px;padding-bottom:env(safe-area-inset-bottom)}.music-track strong{font-size:10px}.music-panel{bottom:82px;right:16px}dialog{padding:40px 25px}.letter-dialog{padding:45px 27px}.game-card{padding:40px 22px}.game-card h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.petal{display:none}}

.hourglass{transform:none;font-size:initial;height:48px}.hourglass svg{display:block}

.music-actions{display:flex;align-items:center;gap:14px}.music-actions .icon-button{font-size:15px;width:30px;height:30px}.music-panel{width:400px}.music-panel iframe{height:230px;min-height:200px}.music-panel .text-button{font-size:10px;color:#f5b2c5;margin:12px 0 0}#youtube-container{min-height:200px}

.local-song-label{display:block;font-size:10px;margin-top:15px;color:#bda2ae}#local-song{font-size:10px;margin-top:8px;padding:8px}#local-audio{width:100%;margin-top:12px;height:35px}#local-audio[hidden]{display:none}

/* Contador inspirado en la referencia y mensajes con tipografía legible. */
.time-section:before{inset:-40px -10% -80px;background:radial-gradient(ellipse at 50% 40%,#a33d4660,transparent 65%)}
.timer{grid-template-columns:repeat(3,minmax(0,1fr));max-width:640px;gap:9px;margin-top:40px}
.time-unit{aspect-ratio:1;background:#1e1e1e;border:7px solid #ef4e61;border-radius:60px;padding:20px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.time-unit strong{font-size:68px;font-weight:700;line-height:1.08;letter-spacing:-2px}
.time-unit span{font-size:21px;font-weight:700;color:#fff;letter-spacing:0;margin-top:13px}
.love-note{font-family:var(--body);font-size:24px;font-weight:500;line-height:1.8;letter-spacing:0;text-transform:none;color:#f0c6d3;overflow-wrap:break-word;margin:30px 0 35px}
#note-dialog{width:530px;padding:48px 38px}#note-dialog h2{font-size:52px}#note-dialog .eyebrow{line-height:1.8}
.trophy-section{display:flex;align-items:center;justify-content:center;gap:55px;max-width:740px;padding-top:80px}.trophy{width:165px;flex-shrink:0}.trophy-copy p{font-size:21px;line-height:1.6;margin:0}.trophy-copy strong{font-family:var(--script);font-size:122px;font-weight:400;line-height:1.35;display:block}.trophy-copy p:first-child{color:#d8c8cd}.trophy-copy p:last-child{color:#ded2d6}
.music-panel #local-audio{display:block;width:100%;height:42px;margin:15px 0}.record.playing{animation:record-turn 9s linear infinite}@keyframes record-turn{to{transform:rotate(360deg)}}
@media(max-width:600px){.timer{max-width:360px;gap:6px}.time-unit{padding:14px 2px;border-width:4px;border-radius:30px}.time-unit strong{font-size:36px;letter-spacing:-1px}.time-unit span{font-size:10px;margin-top:7px}.trophy-section{gap:22px;padding-top:55px}.trophy{width:95px}.trophy-copy p{font-size:13px}.trophy-copy strong{font-size:76px}.love-note{font-size:19px;line-height:1.75}#note-dialog{padding:42px 24px}#note-dialog h2{font-size:44px}#note-dialog .eyebrow{font-size:8px;letter-spacing:2px}}