:root{color-scheme:light;--ink:#211b16;--muted:#645343}*{box-sizing:border-box}body{margin:0;background:#e5d6c4;color:var(--ink);font:16px 'DM Sans',sans-serif;overflow-x:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #87382f;outline-offset:6px}.backdrop{position:fixed;inset:0;background:#f0e4d4 url('floral-frame.png') center/cover no-repeat;z-index:-2}main{width:100%;max-width:560px;min-height:100svh;margin:auto;position:relative;display:flex;flex-direction:column}header{position:absolute;top:16px;right:16px;z-index:5}.wordmark{display:none}.motion{width:36px;height:36px;border:1px solid #86674450;background:#f8ecdcc9;border-radius:50%;color:#49382a;font-size:14px}.scene{text-align:center;flex:1;animation:arrive 1s both}.scene[hidden]{display:none}.cover{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:25svh 22px 22svh}.cover-copy{width:100%;max-width:375px}.eyebrow{font:14px/1.7 'Cormorant Garamond',Georgia,serif;letter-spacing:.33em;margin:0 0 5px}h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1;letter-spacing:-.045em;margin:0}h1{font-size:clamp(82px,24vw,128px);white-space:nowrap}.love-o{position:relative;display:inline-block}.love-o span{position:absolute;font-size:.49em;left:50%;top:53%;transform:translate(-50%,-50%)}.for-you{font:22px 'Cormorant Garamond',Georgia,serif;letter-spacing:.32em;margin:7px 0 25px}.rule{display:flex;align-items:center;justify-content:center;gap:17px;margin:22px auto;color:#241b15;font-size:19px}.rule:before,.rule:after{content:'';width:44px;height:1px;background:#79614b}.intro{font:italic 22px/1.6 'Cormorant Garamond',Georgia,serif;letter-spacing:.12em;margin:17px 0 30px}.swipe-track{height:66px;width:100%;position:relative;background:linear-gradient(120deg,#171716,#060606 70%,#24231f);border:1.5px solid #b38b54;border-radius:50px;box-shadow:0 12px 25px #49332540,inset 0 0 0 2px #ffffff0c;overflow:hidden;isolation:isolate;--progress:0}.swipe-track:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffe6b94d 50%,transparent 80%);transform:translateX(130%);animation:track-shine 5s ease-in-out infinite;pointer-events:none}.swipe-label{position:absolute;inset:0 58px 0 12px;display:flex;justify-content:center;align-items:center;color:#f3e5cc;font:15px 'Cormorant Garamond',Georgia,serif;letter-spacing:.16em;opacity:calc(1 - var(--progress));pointer-events:none;white-space:nowrap}.heart-handle{position:absolute;right:6px;top:6px;width:51px;height:51px;border:0;border-radius:50%;background:radial-gradient(circle,#ffeac022,transparent 72%);color:#f8dfb3;font-size:30px;display:grid;place-items:center;touch-action:none;user-select:none;will-change:transform;z-index:2;filter:drop-shadow(0 0 7px #eec99445)}.heart-handle.returning{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.swipe-track.dragging:before{animation:none;transform:translateX(calc(90% - var(--progress)*150%));opacity:.9}.swipe-help{font-size:12px;letter-spacing:.08em;color:#675442;margin:14px 0 0}footer{display:none}.letter,.wish{margin:13svh 22px 9svh;padding:30px 24px;background:#faf0e2eb;box-shadow:0 12px 65px #3b251d15;border:1px solid #fff9ef99;border-radius:2px;backdrop-filter:blur(5px)}.letter .eyebrow,.wish .eyebrow{font-size:12px;letter-spacing:.15em}.letter h2{font-size:67px;margin:24px 0 0}em{font-weight:400;color:#862f38}.letter-copy{font:24px/1.45 'Cormorant Garamond',Georgia,serif;margin:0 auto 20px;max-width:365px}.signature{font:italic 26px 'Cormorant Garamond',Georgia,serif;margin:26px 0}.signature span{display:block;margin-top:8px}.pill{min-height:52px;border:1px solid #b89361;border-radius:40px;background:#171613;color:#f7e7cc;padding:16px 23px;font-size:14px;position:relative;overflow:hidden}.pill span{margin-left:12px}.pill:hover{box-shadow:0 0 22px #b8936140}.wish-number{font:italic 100px 'Cormorant Garamond',Georgia,serif;color:#af89664d;line-height:1;margin:20px 0 0}.tiny{font-size:12px;letter-spacing:.12em}.wish h2{font-size:clamp(48px,13vw,70px);margin:24px 0}.wish-content{min-height:265px}.wish-content p{font:22px/1.5 'Cormorant Garamond',Georgia,serif;color:var(--muted)}.dots{display:flex;justify-content:center;gap:10px;margin:26px 0}.dots i{height:5px;width:5px;border-radius:4px;background:#beaa98}.dots i.active{width:18px;background:#883a3b}.text-button{display:block;margin:12px auto 0;padding:14px;border:0;background:none;font-size:14px;color:var(--muted)}#glow{position:fixed;inset:-35%;pointer-events:none;z-index:10;background:linear-gradient(110deg,transparent 39%,#fff5d500 43%,#fff8de85 49%,#fffaf3b0 50%,#fff2d440 54%,transparent 61%);opacity:0;transform:translateX(100%);mix-blend-mode:soft-light}.leaving{animation:leave .45s forwards}.paused *,.paused *:before{animation-play-state:paused!important}.paused .scene{animation:none}.paused #glow{opacity:0!important}@keyframes arrive{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes leave{to{opacity:0;transform:translateY(-10px);filter:blur(3px)}}@keyframes track-shine{0%,55%{transform:translateX(130%)}85%,100%{transform:translateX(-130%)}}@media(min-width:600px){.backdrop{width:560px;left:50%;transform:translateX(-50%);box-shadow:0 0 100px #50372630}.cover{padding-top:26svh;padding-bottom:20svh}.cover-copy{max-width:355px}}@media(max-height:680px){.cover{padding-top:24svh;padding-bottom:18svh}h1{font-size:88px}.for-you{margin-bottom:16px}.intro{font-size:20px;margin-bottom:22px}.rule{margin:16px auto}.swipe-track{height:62px}.heart-handle{top:4px}.letter,.wish{margin-top:65px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
#ribbon-trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}.cover,.backdrop{touch-action:none;user-select:none;-webkit-user-select:none}.letter,.wish{touch-action:pan-y}body.ribbon-drawing{user-select:none;-webkit-user-select:none}
/* Keep every scene on one stationary drawing surface. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{position:fixed;inset:0}main{height:100dvh;min-height:0;overflow:hidden}header{top:max(12px,env(safe-area-inset-top))}.scene{position:absolute;inset:60px 20px max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;min-height:0;margin:0;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;background:none;border:0;box-shadow:none;backdrop-filter:none}.cover{inset:0 22px;min-height:0;padding:0}.fit-content{width:100%;flex:none;scale:var(--fit,1);transform-origin:center center}.cover .fit-content{display:flex;justify-content:center}.letter .fit-content,.wish .fit-content{padding:26px 22px;background:#faf0e2ed;border:1px solid #fff9ef99;box-shadow:0 12px 65px #3b251d15;backdrop-filter:blur(5px)}.heart-handle{left:6px;right:auto}.swipe-label{inset:0 12px 0 58px}.swipe-track.dragging:before{transform:translateX(calc(-90% + var(--progress)*150%))}
html[lang="uz"] h1{font-size:clamp(72px,22vw,112px)}html[lang="uz"] .for-you{font-size:18px;letter-spacing:.2em}html[lang="uz"] .swipe-label{font-size:14px;letter-spacing:.1em}html[lang="uz"] .wish h2{font-size:clamp(40px,11vw,60px)}