@charset "UTF-8";
/* AceTaffy theme layer (2026-11-05). Loads after styles.css and refines type, colour, layout and motion without
   changing the markup app.js relies on. Fonts are self-hosted from /fonts (OFL): LXGW WenKai Screen (GB) for
   Chinese, Cormorant Garamond for English titles and Caveat for handwriting. effects.js adds the html classes
   used at the end of this file (fx-ready, fx-cursor-on). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/latin/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/latin/cormorant-garamond-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/latin/caveat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{
  --paper:#fff7f9;--ink:#573746;--muted:#94707f;--olive:#c2568a;--brown:#c7638f;--line:#f2d7e2;
  --rose:#e0659a;--rose-deep:#a8436f;--blush:#ffe6ef;--gold:#f0b95b;
  --card:#fffdfd;--radius:20px;
  --shadow:0 18px 40px -20px rgba(176,72,118,.38),0 4px 12px -6px rgba(176,72,118,.16);
  --shadow-lift:0 30px 54px -24px rgba(176,72,118,.5),0 8px 18px -8px rgba(176,72,118,.24);
  --grad:linear-gradient(135deg,#f07aa9 0%,#d95b91 48%,#b84a7b 100%);
  --grad-text:linear-gradient(100deg,#de5f97 0%,#ef8379 55%,#e5a04a 100%);
  --serif:"LXGW WenKai Screen","Noto Serif SC","Songti SC","STKaiti","KaiTi",serif;
  --sans:"LXGW WenKai Screen","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --latin:"Cormorant Garamond","LXGW WenKai Screen",Georgia,serif;
  --script:Caveat,"LXGW WenKai Screen",cursive;
}

/* ---------- Page ---------- */
html{background:
  radial-gradient(1100px 620px at 4% -6%,#ffe0ec 0,transparent 60%),
  radial-gradient(900px 600px at 100% 12%,#fff0e2 0,transparent 60%),
  radial-gradient(1000px 700px at 50% 108%,#f4e7ff 0,transparent 60%) #fff7f9;
  scrollbar-color:#efb0c9 transparent}
/* overflow-x:clip keeps the hero decorations from widening the page without breaking the sticky header. */
body{background:transparent;font-size:15px;line-height:1.8;color:var(--ink);text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#ecbdd0 1px,transparent 1.3px);background-size:24px 24px;opacity:.38;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 55%,transparent 100%)}
::selection{background:#ffcfe1;color:#6b2a4a}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#e0659a}
.visitor-note{font-size:14px;color:#a27c8f}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;height:86px;border-bottom:1px solid transparent;
  background:rgba(255,247,249,.7);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  transition:height .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease}
.site-header.is-scrolled{height:68px;border-color:var(--line);background:rgba(255,248,250,.86);box-shadow:0 12px 30px -24px rgba(170,70,115,.6)}
.brand{font-size:26px;letter-spacing:1.5px;color:#5a3345}
.brand small{font:500 11px/1.8 var(--latin);letter-spacing:4px;color:#b58a9d;margin-top:0}
.brand-mark{color:var(--rose);animation:brand-beat 3.6s ease-in-out infinite}
@keyframes brand-beat{0%,40%,100%{transform:rotate(-12deg) scale(1)}10%{transform:rotate(-12deg) scale(1.14)}20%{transform:rotate(-12deg) scale(1)}30%{transform:rotate(-12deg) scale(1.08)}}
.site-header nav{gap:6px;font-size:15px;letter-spacing:1px}
.site-header nav a{padding:7px 16px;border-radius:999px;color:#7b5164;transition:background .25s,color .25s}
.site-header nav a:hover{background:#ffe5ee;color:var(--rose-deep)}
.site-header nav a.nav-home,.site-header nav a[aria-current="page"]{background:linear-gradient(135deg,#ffd9e7,#ffead9);color:var(--rose-deep)}
.nav-home:after{display:none}
.owner-signin{font-size:14px;padding:8px 16px;border-radius:999px;border-color:#efc1d4;color:var(--rose-deep);background:rgba(255,255,255,.6);transition:background .25s,box-shadow .25s}
.owner-signin:hover{background:#fff;box-shadow:0 8px 18px -12px rgba(200,80,130,.8)}

/* ---------- Buttons ---------- */
.button{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:999px;padding:14px 28px;gap:14px;
  font-size:15px;letter-spacing:1.5px;background:var(--grad);
  box-shadow:0 14px 26px -14px rgba(197,73,127,.9),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.button::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s ease}
.button:hover{background:var(--grad);transform:translateY(-3px);box-shadow:0 20px 30px -14px rgba(197,73,127,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.button:hover::after{transform:translateX(130%)}
.button:active{transform:translateY(0) scale(.98)}
.button-small{padding:9px 18px;min-height:40px;font-size:14px;gap:8px}
.text-button{font-size:15px;gap:10px;color:var(--rose-deep)}
.text-button>.icon{transition:translate .3s}
.text-button:hover>.icon{translate:4px 0}
.icon-button{border-radius:999px}

/* ---------- Hero ---------- */
.hero{min-height:660px;padding-top:56px}
.hero .eyebrow{font-size:15px;letter-spacing:2px;color:var(--rose-deep)}
.hero h1{font-size:clamp(34px,4.3vw,56px);line-height:1.5;letter-spacing:3px;font-weight:400;color:#4b2c3a;margin-bottom:24px}
.warm-word{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.warm-word>svg{stroke:#f3a6c5;stroke-width:2.4;bottom:-4px}
.hero-description{font-size:17px;line-height:2.1;letter-spacing:1px;color:#8a6373}
.hero-actions{gap:14px 26px;flex-wrap:wrap}
.hero-actions>.button{flex-shrink:0;white-space:nowrap}
.handwritten{font:500 27px/1.2 var(--script);color:var(--rose);letter-spacing:.5px}
.together{margin-top:40px;padding:16px 20px;max-width:470px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.66);box-shadow:var(--shadow)}
.together-icon{width:42px;height:42px;background:linear-gradient(135deg,#ffd6e6,#ffe7d4);color:var(--rose-deep);animation:brand-beat 3.6s ease-in-out infinite}
.together-icon .icon{width:19px;height:19px}
.together p{font-size:17px}
.together button{font-size:14px;color:#9a7486}
.together-note{font:500 18px/1.05 var(--script);color:#c98aa7;max-width:130px}
.polaroid{border-radius:6px;animation:float-a 8s ease-in-out infinite}
.polaroid>img{border-radius:3px}
.polaroid-caption{font-size:16px;color:#94647b}
.sample-stamp{font-size:11px;border-radius:999px;padding:2px 10px;background:rgba(80,40,60,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.little-print{border-radius:4px;animation:float-b 9s ease-in-out infinite}
.little-print span{font:500 17px/2.6 var(--script);color:#c27a9b}
.hero-doodle{font:500 30px/.9 var(--script);color:#d17ea2}
.photo-coordinate{font:500 12px var(--latin);letter-spacing:3px;color:#c094a8}
.hero-spark{animation:twinkle 2.8s ease-in-out infinite}
.petal{animation:petal-drift 10s ease-in-out infinite}
.p2{animation-delay:-3.5s}.p3{animation-delay:-6s}
.sakura{animation:spin-slow 40s linear infinite}
.sakura.s2{animation-duration:28s;animation-direction:reverse}
.twinkle{position:absolute;color:#f2a3c4;font-size:18px;line-height:1;animation:twinkle 3.2s ease-in-out infinite}
.twinkle.t1{top:8%;left:44%;font-size:14px}
.twinkle.t2{top:62%;left:-2%;color:#f3c37a;animation-delay:-1.2s}
.twinkle.t3{bottom:6%;right:46%;font-size:20px;color:#e7a2d8;animation-delay:-2.1s}
@keyframes float-a{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2.6deg) translateY(-12px)}}
@keyframes float-b{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.12}}
@keyframes petal-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:14px 22px;rotate:40deg}}
@keyframes spin-slow{to{rotate:360deg}}

/* ---------- Ribbon (effects.js turns it into a slow marquee) ---------- */
.chapter-strip{background:linear-gradient(90deg,#ffe0ec,#fff0e4 50%,#f1e6ff);border-block:1px solid #f6d2e0}
.chapter-strip>.wrap{height:58px;font-size:15px;letter-spacing:2px;color:#a66a86}
.chapter-strip>.wrap>span:first-child{color:var(--rose-deep)}
.strip-right{font:500 14px var(--latin);letter-spacing:3px}
.chapter-strip.is-marquee>.wrap{width:100%;max-width:none;overflow:hidden;justify-content:flex-start;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee-group{display:flex;align-items:center;gap:52px;padding-right:52px}
.marquee-group>span{display:inline-flex!important;align-items:center;gap:10px;white-space:nowrap}
.marquee-group>.marquee-dot{color:#eaa0c0;font-size:16px}
.chapter-strip:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Section headings ---------- */
.memories{padding-top:100px}
.section-heading .eyebrow,.daily-copy .eyebrow,.notes-copy .eyebrow{font:500 15px var(--latin);letter-spacing:4px;color:var(--rose)}
.line-mark{width:52px;height:2px;border-radius:2px;background:linear-gradient(90deg,#f1a0c2,transparent)}
h2{font-size:clamp(28px,3.1vw,40px);line-height:1.5;letter-spacing:2px;font-weight:400;color:#4f2f3f}
h2>span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-description{font-size:16px;letter-spacing:1px;color:var(--muted)}
.collection-note{font:500 25px var(--script);letter-spacing:1px;color:var(--rose)}
.sample-note{font:13px var(--sans);color:#a3808f}

/* ---------- Gallery toolbar ---------- */
.gallery-toolbar{margin:36px 0;padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);
  box-shadow:0 14px 34px -26px rgba(170,70,115,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.filter-btn{font-size:15px;padding:9px 18px;border-radius:999px;color:#9d6c82;transition:background .25s,color .25s,box-shadow .25s}
.filter-btn:hover{background:#fff0f5;color:var(--rose-deep)}
.filter-btn .icon{width:17px;height:17px}
.filter-btn>span{font-size:12px;border-radius:999px;min-width:24px;line-height:21px;background:#ffe0ec;color:#b0567f}
.filter-btn.is-active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 18px -12px rgba(214,85,140,1)}
.filter-btn.is-active>span{background:rgba(255,255,255,.28);color:#fff}
.search-wrap{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;transition:border-color .25s,box-shadow .25s}
.search-wrap:focus-within{border-color:#ef9fbf;box-shadow:0 0 0 4px #ffe2ed}
.search-wrap .icon{width:17px;height:17px;color:#cf8fab}
.search-wrap input{font-size:15px;width:150px;outline:none}
#favorites-only{width:42px;height:42px;background:#fff;border:1px solid var(--line)}
#favorites-only .icon{width:19px;height:19px}

/* ---------- Memory cards ---------- */
.memory-grid{gap:40px 30px}
.memory-card{border-radius:var(--radius);border:1px solid #f5d9e4;background:var(--card);box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.memory-card:hover{transform:translateY(-9px) rotate(-.7deg);box-shadow:var(--shadow-lift)}
.memory-card:nth-child(even):hover{transform:translateY(-9px) rotate(.7deg)}
.memory-card:nth-child(3n+1)::before,.memory-card:nth-child(3n)::before{content:"";position:absolute;z-index:3;top:3px;left:50%;width:78px;height:22px;
  translate:-50% 0;rotate:-5deg;border-radius:2px;pointer-events:none;opacity:.92;
  background:repeating-linear-gradient(45deg,rgba(255,196,218,.8) 0 6px,rgba(255,229,238,.9) 6px 12px)}
.memory-card:nth-child(3n)::before{rotate:4deg;left:22%;background:repeating-linear-gradient(45deg,rgba(255,226,182,.85) 0 6px,rgba(255,243,226,.95) 6px 12px)}
.memory-image{margin:10px 10px 0;border-radius:14px;aspect-ratio:1.32}
.memory-image>img,.memory-image>video{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.memory-card:hover .memory-image>img,.memory-card:hover .memory-image>video{transform:scale(1.07)}
.memory-body{padding:18px 22px 18px}
.memory-meta{font-size:13px;gap:8px;color:#a57d8f}
.memory-meta>time{padding:1px 11px;border-radius:999px;background:#fff0f5;color:#b0567f;font:500 14px var(--latin);font-variant-numeric:lining-nums;letter-spacing:1px}
.memory-card h3,.memory-body>.memory-title{font-size:20px;line-height:1.55;letter-spacing:1px;color:#5a3446;margin:10px 0 4px}
.memory-excerpt{font-size:14px;color:#9a7486}
.memory-bottom{margin-top:14px;padding-right:34px}
.memory-location{font-size:13px;color:#a98596}
.memory-location::before{content:"✿";margin-right:6px;color:#eba3c1}
.sample-label{font-size:12px;padding:1px 9px;border-radius:999px;background:#fff0f5;color:#c27a9c}
.favorite-btn{width:36px;height:36px;bottom:15px;right:14px;background:#fff6f9;color:#dbb0c3}
.favorite-btn svg{width:19px;height:19px}
.favorite-btn.is-favorite{color:#d9578f}
.favorite-btn.is-favorite svg{fill:#f3a1c2;animation:heart-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes heart-pop{0%{scale:.6}60%{scale:1.3}100%{scale:1}}
.play-badge{width:60px;height:60px;font-size:19px;background:rgba(255,255,255,.32);box-shadow:0 0 0 9px rgba(255,255,255,.16);transition:scale .4s cubic-bezier(.3,1.6,.5,1)}
.memory-card:hover .play-badge{scale:1.12}
.memory-conversation,.note-preview{margin:10px 10px 0;border-radius:14px}
.memory-conversation{background:linear-gradient(160deg,#ffe8f1,#fdf1ff)}
.conversation-caption{font:500 13px var(--latin);letter-spacing:2.5px;color:#c08aa5}
.chat-line{font-size:14px;padding:8px 14px;border-radius:4px 14px 14px 14px;color:#9a6784;box-shadow:0 4px 10px -6px rgba(170,70,115,.35)}
.chat-line.is-me{border-radius:14px 4px 14px 14px;background:linear-gradient(135deg,#fbc8dc,#f5b0cc);color:#863c62}
.note-mark{font:500 64px/.55 var(--latin);color:#eba3c1}
.note-preview-text{font-size:17px;line-height:2;color:#9b6a82}
.note-signature{font:500 21px var(--script);color:#cf8aab}
.empty-state h3{font-size:24px}
.empty-state p{font-size:15px}
.gallery-bottom{border-top:1px dashed #efcadb}
.gallery-bottom>span{font-size:16px;color:#b08b9d}

/* ---------- Little things ---------- */
.little-things{position:relative;margin-top:40px;padding:96px 0;background:linear-gradient(180deg,#ffe7f0,#fff2ea)}
.little-things::before,.little-things::after{content:"";position:absolute;left:0;right:0;height:14px;pointer-events:none}
.little-things::before{top:-13px;background:radial-gradient(circle at 14px 14px,#ffe7f0 13px,transparent 14px) 0 0/28px 14px repeat-x}
.little-things::after{bottom:-13px;background:radial-gradient(circle at 14px 0,#fff2ea 13px,transparent 14px) 0 0/28px 14px repeat-x}
.daily-image{border-radius:6px;box-shadow:0 30px 46px -28px rgba(150,70,100,.6);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.daily-image>img{border-radius:3px}
.daily-image:hover{transform:rotate(-1deg) scale(1.02)}
.daily-image-label{font:500 13px/3.6 var(--latin);letter-spacing:3px;color:#c08ea6}
.daily-copy h2{font-size:clamp(28px,3vw,38px);line-height:1.6}
.daily-copy>p:not(.eyebrow){font-size:16px;line-height:2.3;letter-spacing:.8px;color:#8f6878}
.daily-flower{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(9deg)}50%{transform:rotate(16deg)}}

/* ---------- Love notes ---------- */
.love-notes{padding-block:104px 72px}
.notes-copy>p:not(.eyebrow){font-size:16px;line-height:2.2;color:#8f6878}
.chat-paper{position:relative;border-radius:18px;padding:30px 34px 24px;background:#fffbfc;border-color:#f3d3e0;
  box-shadow:0 34px 56px -34px rgba(170,70,115,.6),7px 8px 0 #fde2ec,8px 9px 0 #f1cddb}
.chat-paper::before{content:"";position:absolute;left:18px;right:18px;top:-8px;height:16px;background:radial-gradient(circle,#f0c9d9 4px,transparent 4.6px) 0 0/30px 16px repeat-x}
.chat-paper-top{font-size:15px;color:#a46b88}
.chat-paper-top>span:last-child{font-size:12px}
.chat-date{font-size:13px}
.chat-row>p{font-size:15px;padding:10px 16px;border-radius:4px 16px 16px 16px;box-shadow:0 6px 12px -8px rgba(170,70,115,.4)}
.chat-row.me>p{background:linear-gradient(135deg,#fbc8dc,#f3a8c8);color:#7d3459;border-radius:16px 4px 16px 16px}
.chat-avatar{width:36px;height:36px;font-size:15px;background:linear-gradient(135deg,#ffdfeb,#ffe3d3);color:#b06a8b}
.chat-row.me .chat-avatar{background:linear-gradient(135deg,#f6d9ff,#ffdbe9)}
.chat-foot{font-size:15px}

/* ---------- Closing note ---------- */
.closing-note{border-top:0;padding:40px 0 84px}
.closing-note>span{font-size:46px;animation:twinkle 3s ease-in-out infinite}
.closing-note>p{font-size:clamp(28px,3.4vw,44px);letter-spacing:6px;color:#8b5872}
.closing-note em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.closing-note>small{font:500 25px/1.5 var(--script);letter-spacing:.5px;color:#d07ba1}
.closing-note>.text-button{font-size:15px}

/* ---------- Footer ---------- */
.site-footer{margin-bottom:30px;padding:30px 38px 20px;gap:14px 30px;border:1px solid var(--line);border-radius:28px;
  background:rgba(255,255,255,.74);box-shadow:0 26px 54px -38px rgba(170,70,115,.7);font-size:14px;color:#a27f90}
.footer-brand{font-size:24px;color:#a25a7e}
.footer-brand>.icon{width:18px;height:18px;color:var(--rose);animation:brand-beat 3.6s ease-in-out infinite}
.site-footer button,.site-footer a#owner-signout{font-size:14px;color:#a66a87}
.site-footer>small{font-size:13px;color:#b393a3}
.site-footer>.footer-bottom{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
  margin-top:2px;padding-top:14px;border-top:1px dashed #f0d0dd}
.visitor-ip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-size:13px;color:#a3798d}
.visitor-ip .visitor-label{padding:1px 10px;border-radius:999px;background:#ffeaf2;color:#b0567f}
.visitor-ip b{font:500 16px var(--latin);font-variant-numeric:lining-nums;letter-spacing:.5px;color:#9e4a72}
.visitor-ip a{color:#c08aa4;text-decoration:underline dotted;text-underline-offset:3px;font-size:12px}
.fx-toggle{font-size:13px!important;padding:4px 14px!important;border-radius:999px;border:1px solid var(--line)!important;background:#fff;color:#a66a87;transition:background .25s}
.fx-toggle:hover{background:#fff0f5}
.fx-toggle[aria-pressed="false"]{color:#b49aa7}

/* ---------- Dialogs and forms ---------- */
dialog{border-radius:26px;border-color:#f5d4e1;box-shadow:0 44px 120px -34px rgba(120,40,80,.5)}
dialog::backdrop{background:rgba(92,40,66,.32);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
dialog[open]{animation:dialog-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes dialog-in{from{opacity:0;translate:0 18px;scale:.97}}
.dialog-head .eyebrow{font:500 14px var(--latin);letter-spacing:3px;color:var(--rose)}
.dialog-head h2{font-size:30px}
.dialog-description{font-size:15px}
form label{font-size:15px;color:#8f5f77}
form input:not([type="file"]),form textarea,form select{border-radius:12px;padding:11px 14px;font-size:16px;border-color:#f0d2de;transition:border-color .2s,box-shadow .2s}
form input:not([type="file"]):focus,form textarea:focus,form select:focus{outline:none;border-color:#ee9fc0;box-shadow:0 0 0 4px #ffe1ec}
form input[type="file"]{border-radius:12px;font-size:14px}
form input::file-selector-button{border-radius:999px;padding:5px 14px}
form small{font-size:13px}
.storage-note{border-radius:12px;font-size:13.5px}
.form-error{border-radius:10px;font-size:14px}
.video-upload-progress{border-radius:14px}
.video-upload-progress>p{font-size:13px}
.detail-copy>.detail-title{font-size:30px}
.detail-copy>.detail-text{font-size:16px;color:#8f6878}
.detail-meta{font-size:14px}
.detail-note{font-size:22px}
.chat-bubble{font-size:16px}
.detail-navigation>.text-button{font-size:14px}
.detail-navigation>span{font:500 13px var(--latin);letter-spacing:3px}
.toast{border-radius:999px;font-size:15px;background:var(--grad);box-shadow:0 18px 30px -16px rgba(197,73,127,.9)}
.cloud-storage{border-radius:18px;font-size:14px}

/* ---------- Effects (classes set by effects.js) ---------- */
.fx-ready .reveal{opacity:0;translate:0 30px;transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1)}
.fx-ready .reveal.is-in{opacity:1;translate:0 0}
.fx-ready .chat-paper .chat-row{opacity:0;translate:0 12px;transition:opacity .6s ease,translate .6s ease}
.fx-ready .chat-paper.is-in .chat-row{opacity:1;translate:0 0}
.fx-ready .chat-paper.is-in .chat-row:nth-of-type(2){transition-delay:.35s}
.fx-ready .chat-paper.is-in .chat-row:nth-of-type(3){transition-delay:.7s}
.fx-ready .chat-paper.is-in .chat-row:nth-of-type(4){transition-delay:1.05s}
.fx-ready .memory-card{animation:card-in .8s cubic-bezier(.2,.8,.2,1) both}
.fx-ready .memory-card:nth-child(2){animation-delay:.07s}.fx-ready .memory-card:nth-child(3){animation-delay:.14s}
.fx-ready .memory-card:nth-child(4){animation-delay:.21s}.fx-ready .memory-card:nth-child(5){animation-delay:.28s}
.fx-ready .memory-card:nth-child(6){animation-delay:.35s}.fx-ready .memory-card:nth-child(n+7){animation-delay:.42s}
@keyframes card-in{from{opacity:0;translate:0 28px;scale:.97}}

.fx-top{position:fixed;right:24px;bottom:26px;z-index:30;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;box-shadow:0 16px 28px -14px rgba(214,85,140,1);opacity:0;translate:0 18px;pointer-events:none;
  transition:opacity .35s,translate .35s cubic-bezier(.3,1.4,.5,1)}
.fx-top.is-shown{opacity:1;translate:0 0;pointer-events:auto}
.fx-top:hover{translate:0 -4px}
.fx-top>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Candy cursor and trail. The layer is a manual popover so it can sit above open dialogs (top layer). */
html.fx-cursor-on,html.fx-cursor-on *{cursor:none!important}
html.fx-cursor-on :is(input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=file],[type=range],[type=color]),textarea,[contenteditable=true]){cursor:text!important}
html.fx-cursor-on :fullscreen,html.fx-cursor-on :fullscreen *{cursor:auto!important}
#fx-layer{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;color:inherit}
#fx-layer>canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-cursor{position:absolute;left:0;top:0;width:36px;height:36px;opacity:0;will-change:transform;transition:opacity .2s}
.fx-cursor.is-shown{opacity:1}
.fx-cursor.is-text{opacity:0}
.fx-candy{width:100%;height:100%;transform-origin:2.7px 2.7px;rotate:var(--fx-tilt,0deg);transition:scale .3s cubic-bezier(.3,1.7,.5,1);filter:drop-shadow(0 3px 4px rgba(186,72,124,.38))}
.fx-cursor.is-hover .fx-candy{scale:1.2}
.fx-cursor.is-down .fx-candy{scale:.84}
.fx-candy>svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:2.7px 2.7px;animation:fx-wiggle 3s ease-in-out infinite}
.fx-cursor.is-hover .fx-candy>svg{animation-duration:.9s}
.fx-eyes{transform-box:fill-box;transform-origin:center;animation:fx-blink 4.4s infinite}
.fx-happy{display:none}
.fx-cursor.is-hover .fx-eyes{display:none}
.fx-cursor.is-hover .fx-happy{display:inline}
.fx-cursor.is-hover .fx-blush{opacity:.85}
@keyframes fx-wiggle{0%,100%{rotate:0deg}30%{rotate:-6deg}70%{rotate:5deg}}
@keyframes fx-blink{0%,93%,100%{scale:1 1}96%{scale:1 .1}}

/* ---------- Medium screens ---------- */
@media(min-width:1101px){.memory-card:nth-child(3n+2){margin-top:36px}}
@media(max-width:1100px){
  .site-header nav{gap:2px;font-size:14px}
  .site-header nav a{padding:6px 11px}
  .polaroid-caption{font-size:14px}
  .gallery-toolbar{border-radius:26px}
}
@media(max-width:800px){
  .site-header{height:74px}.site-header.is-scrolled{height:62px}
  .gallery-toolbar{border-radius:22px;padding:10px}
  .filter-btn{font-size:14px;padding:8px 13px}
  .search-wrap input{width:120px;font-size:14px}
  .polaroid-caption{font-size:13px}
  .memory-card h3,.memory-body>.memory-title{font-size:17px}
  .love-notes{padding-block:76px}
}

/* ---------- Phones ---------- */
@media(max-width:620px){
  body{font-size:15px}
  .site-header,.site-header.is-scrolled{height:64px}
  .brand{font-size:21px}.brand small{font-size:9px;letter-spacing:3px}
  .site-header nav{top:100%;padding:14px;gap:8px;font-size:15px;background:rgba(255,248,250,.97);border-radius:0 0 22px 22px;box-shadow:0 18px 30px -24px rgba(170,70,115,.7)}
  .site-header nav a{padding:8px 14px}
  .owner-signin{font-size:13px;padding:6px 12px}
  .site-header>.header-inner>.button-small{font-size:13px;padding:7px 12px;min-height:36px}
  .hero .eyebrow{font-size:13px}
  .hero h1{font-size:clamp(26px,8.2vw,36px);letter-spacing:1.5px}
  .hero-description{font-size:15px;line-height:2}
  .handwritten{font-size:22px}
  .together p{font-size:15px}.together button{font-size:13px}.together-note{font-size:15px}
  .polaroid-caption{font-size:13px}
  .little-print>span{font-size:13px;line-height:2.4}
  .hero-doodle{font-size:22px}
  .chapter-strip>.wrap{height:50px;font-size:14px}
  .section-heading .eyebrow,.daily-copy .eyebrow,.notes-copy .eyebrow{font-size:13px;letter-spacing:3px}
  .section-description{font-size:14px}
  .collection-note{font-size:19px;text-align:left;transform:rotate(-2deg);white-space:nowrap}
  .collection-note .sample-note{white-space:normal;margin-top:8px}
  .gallery-toolbar{border-radius:20px;margin:24px 0}
  .filter-btn{font-size:13px;padding:7px 10px;gap:5px}
  .filter-btn .icon{width:14px;height:14px}
  .search-wrap{padding:5px 12px}.search-wrap input{width:118px;font-size:14px}
  #favorites-only{width:36px;height:36px}
  .memory-grid{gap:18px 12px}
  .memory-card{border-radius:16px}
  .memory-image,.memory-conversation,.note-preview{margin:7px 7px 0;border-radius:11px}
  .memory-card:nth-child(3n+1)::before,.memory-card:nth-child(3n)::before{width:56px;height:17px}
  .memory-body{padding:11px 11px 13px}
  .memory-meta{font-size:11px;gap:5px}
  .memory-meta>time{font-size:12px;padding:0 8px}
  .memory-card h3,.memory-body>.memory-title{font-size:15px;margin:7px 0 3px}
  .memory-excerpt{font-size:12.5px}
  .memory-bottom{margin-top:9px;padding-right:28px}
  .memory-location{font-size:11.5px}
  .sample-label{font-size:10.5px;padding:0 6px}
  .favorite-btn{width:30px;height:30px;bottom:10px;right:8px}
  .favorite-btn svg{width:16px;height:16px}
  .chat-line{font-size:12px;padding:6px 10px}
  .note-preview-text{font-size:14px}
  .note-signature{font-size:16px}
  .little-things{padding:56px 0 54px}
  .daily-copy>p:not(.eyebrow),.notes-copy>p:not(.eyebrow){font-size:15px}
  .chat-paper{padding:24px 20px 18px}
  .chat-row>p{font-size:14px}
  .closing-note{padding:40px 0 60px}
  .closing-note>p{font-size:clamp(20px,6.4vw,26px);letter-spacing:2px}
  .closing-note>small{font-size:20px}
  .site-footer{padding:24px 20px 18px;margin-bottom:84px;border-radius:22px;font-size:13px}
  .footer-brand{font-size:20px}
  .site-footer button,.site-footer a#owner-signout{font-size:13px}
  .site-footer>small{font-size:12px}
  .site-footer>.footer-bottom{justify-content:center;text-align:center}
  .visitor-ip{justify-content:center}
  .dialog-head h2{font-size:24px}
  .fx-top{right:14px;bottom:18px;width:44px;height:44px}
}
@media(max-width:380px){.hero h1{font-size:26px;letter-spacing:1px}.filter-btn{font-size:12px;padding-inline:7px}}