@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Italiana&display=swap');

:root {
  --ink: #493e42;
  --muted: #897478;
  --rose: #c8878a;
  --rose-deep: #a96770;
  --blush: #efd6d5;
  --paper: #fbf4e9;
  --paper-deep: #f1e2d1;
  --ivory: #fffaf1;
  --champagne: #d7b987;
  --beige: #d3bfb0;
  --shadow: rgba(92, 61, 56, .16);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Italiana', 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #ead4d1;
  font-family: var(--serif);
  overflow-x: hidden;
}
body.goodnight-mode { background: #292b3b; }
body.goodnight-mode .app-shell { background: radial-gradient(circle at 50% 18%, rgba(87,76,101,.22), transparent 42%), linear-gradient(180deg, #292b3b 0%, #353348 58%, #403649 100%); }
body.goodnight-mode .masthead { color: #c5a9ad; }
body.goodnight-mode .sound-toggle { color: #c6b5ac; border-color: rgba(218,205,192,.28); background: rgba(42,38,57,.38); }
body.goodnight-mode .chapter-label, body.goodnight-mode .progress-dots { color: #b4a1a6; }
body.goodnight-mode .progress-dot { border-color: #c59ba2; }
body.goodnight-mode .progress-dot.active { background: #c59ba2; }
body.goodnight-mode .footer-note { color: #b5a3a9; }
body.goodnight-mode .footer-line { background: rgba(181,163,169,.4); }
button, input { font: inherit; }
button { cursor: pointer; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .13; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.app-shell { width: min(1400px, 100%); min-height: 100svh; margin: auto; padding: 22px clamp(18px, 4vw, 62px) 18px; display: flex; flex-direction: column; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; color: var(--rose-deep); position: relative; z-index: 1; }
.wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: clamp(18px, 2.1vw, 28px); letter-spacing: .03em; white-space: nowrap; }
.wordmark-mark { color: var(--champagne); font-size: 20px; }
.masthead-tools { display: flex; align-items: center; gap: 14px; }
.sound-toggle { border: 1px solid rgba(169,103,112,.38); background: rgba(255,250,241,.38); color: #8f686d; border-radius: 999px; padding: 7px 10px; font: 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: .2s ease; }
.sound-toggle:hover { background: rgba(255,250,241,.8); transform: translateY(-1px); }
.sound-toggle.muted { color: #a99696; border-color: rgba(169,103,112,.22); }
.chapter-label, .progress-dots { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .13em; color: #8f7472; }
.chapter-label { text-align: center; }
.progress-dots { display: flex; gap: 7px; align-items: center; }
.progress-dot { width: 7px; height: 7px; border: 1px solid var(--rose); border-radius: 50%; opacity: .45; transition: .3s ease; }
.progress-dot.active { background: var(--rose-deep); opacity: 1; transform: scale(1.35); }
.screen { flex: 1; display: grid; place-items: center; padding: clamp(22px, 4vh, 48px) 0; min-height: 620px; }
.screen.entering { animation: pageIn .62s cubic-bezier(.21,.75,.32,1); }
.screen.page-turn { transform-origin: 50% 50%; animation: pageTurn .72s cubic-bezier(.2,.74,.24,1); backface-visibility: hidden; }
.footer-note { display: flex; align-items: center; gap: 13px; justify-content: center; color: #9b7f80; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.footer-line { width: 55px; height: 1px; background: rgba(155,127,128,.45); }

/* shared */
.eyebrow { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--rose-deep); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }
.serif-display { font-family: var(--display); }
.button-row { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.primary-button, .ghost-button { border: 0; min-height: 42px; padding: 0 21px; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button { background: var(--rose-deep); color: var(--ivory); box-shadow: 0 10px 22px rgba(138, 75, 84, .19); }
.primary-button:hover, .ghost-button:hover { transform: translateY(-2px); }
.primary-button:active, .ghost-button:active { transform: translateY(1px); }
.ghost-button { color: var(--rose-deep); background: rgba(255,250,241,.52); border: 1px solid rgba(169,103,112,.4); }
.micro-note { font: 11px var(--mono); letter-spacing: .02em; color: var(--muted); line-height: 1.7; }

/* receipt */
.receipt-stage { width: min(1080px, 100%); display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(36px, 9vw, 125px); align-items: center; }
.receipt-intro { padding-left: clamp(0px, 5vw, 70px); }
.receipt-intro h1 { font-size: clamp(48px, 7vw, 88px); line-height: .86; margin: 14px 0 26px; letter-spacing: -.035em; }
.receipt-intro h1 em { color: var(--rose-deep); font-style: normal; }
.receipt-intro p { font-size: clamp(18px, 2vw, 23px); max-width: 360px; line-height: 1.15; color: #705e60; }
.rose-stem { position: relative; margin-top: 22px; width: 126px; height: 80px; opacity: .75; }
.rose-stem:before { content: ''; position: absolute; left: 63px; top: 4px; width: 2px; height: 76px; background: #81927a; transform: rotate(25deg); transform-origin: top; }
.rose-stem:after { content: '✿'; position: absolute; left: 36px; top: -18px; font-size: 47px; color: var(--rose); transform: rotate(-17deg); text-shadow: 8px 3px 0 #dbb0a9; }
.receipt { position: relative; width: min(420px, 100%); justify-self: center; transform: rotate(1.4deg); filter: drop-shadow(17px 20px 11px rgba(95,58,58,.17)); }
.receipt:before { content: ''; position: absolute; inset: 0 -6px; background: var(--paper); z-index: -1; transform: rotate(-3.5deg); border-radius: 2px; }
.receipt-paper { background: #f9f1e4; padding: 28px clamp(24px, 5vw, 48px) 36px; position: relative; clip-path: polygon(0 0,100% 0,100% 98%,97% 100%,94% 98%,90% 100%,86% 98%,82% 100%,78% 98%,74% 100%,70% 98%,66% 100%,62% 98%,58% 100%,54% 98%,50% 100%,46% 98%,42% 100%,38% 98%,34% 100%,30% 98%,26% 100%,22% 98%,18% 100%,14% 98%,10% 100%,6% 98%,2% 100%,0 98%); }
.receipt-top { display: flex; justify-content: space-between; font: 10px var(--mono); letter-spacing: .08em; color: #8a7070; border-bottom: 1px dashed #cbb4aa; padding-bottom: 15px; }
.receipt-title { text-align: center; font: 500 25px var(--display); margin: 23px 0 5px; color: #4e4144; }
.receipt-subtitle { text-align: center; font-size: 15px; color: #856e70; margin-bottom: 27px; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; border-bottom: 1px dotted #d3bfb2; }
.receipt-row span:last-child { font-family: var(--mono); font-size: 11px; }
.receipt-code-label { display: block; text-align: center; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .18em; margin: 26px 0 10px; color: #9a7779; }
.code-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rose); text-align: center; font: 500 28px var(--mono); letter-spacing: .3em; color: var(--ink); padding: 5px 0 10px 7px; outline: none; }
.code-input:focus { border-bottom-color: var(--rose-deep); box-shadow: 0 4px 0 -3px var(--rose-deep); }
.receipt .primary-button { display: block; width: 100%; margin-top: 22px; border-radius: 2px; font: 10px var(--mono); letter-spacing: .12em; }
.receipt-error { min-height: 21px; text-align: center; color: var(--rose-deep); font: 11px var(--mono); margin: 8px 0 0; }
.receipt-bottom { border-top: 1px dashed #cbb4aa; text-align: center; margin-top: 21px; padding-top: 15px; font: 9px var(--mono); color: #9a7779; letter-spacing: .1em; }

/* cover */
.cover-stage { width: min(1060px, 100%); display: grid; place-items: center; perspective: 1700px; }
.cover-copy { text-align: center; margin-bottom: 25px; }
.cover-copy h1 { font-size: clamp(45px, 7vw, 85px); line-height: .86; margin: 10px 0 12px; }
.cover-copy p { color: #7e676b; font-size: 17px; }
.book { width: min(700px, 91vw); height: clamp(255px, 39vh, 370px); position: relative; display: flex; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.22,.75,.26,1); }
.book.opening { transform: rotateY(-7deg) scale(1.015); }
.book:after { content: ''; position: absolute; left: 50%; top: 2%; width: 12px; height: 96%; transform: translateX(-50%); background: linear-gradient(90deg,rgba(81,45,50,.25),rgba(255,250,241,.3),rgba(81,45,50,.18)); z-index: 4; filter: blur(1px); }
.book-page { width: 50%; position: relative; overflow: hidden; background: #f7ecd9; box-shadow: inset 0 0 28px rgba(113,72,69,.12), 0 22px 34px rgba(108,70,69,.2); }
.book-cover-left { border-radius: 8px 0 0 8px; background: #a96770; transform-origin: right center; border: 2px solid rgba(255,249,233,.5); transition: transform 1.05s cubic-bezier(.22,.75,.26,1); z-index: 5; backface-visibility: hidden; }
.book.opening .book-cover-left { transform: rotateY(-145deg); }
.book-cover-right { border-radius: 0 8px 8px 0; background: #f7ecd9; border: 2px solid rgba(255,249,233,.5); }
.book-cover-left:before, .book-cover-right:before { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(255,249,233,.56); }
.book-cover-left:after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: #f3d6d4; font-size: 44px; text-shadow: 0 1px 0 rgba(255,255,255,.26); }
.book-spread { position: absolute; inset: 17px; background: #fff9ee; display: grid; place-items: center; text-align: center; padding: 20px; }
.book-spread:before { content: ''; position: absolute; inset: 12px; border: 1px solid #dec8b7; pointer-events: none; }
.book-spread-inner { position: relative; z-index: 1; }
.book-spread h2 { font: 500 clamp(35px, 5vw, 63px) var(--display); line-height: .84; margin: 12px 0; color: var(--rose-deep); }
.book-spread p { font-size: 15px; color: #8b6c6e; }
.book-ornament { color: var(--champagne); font-size: 24px; letter-spacing: .22em; }
.cover-actions { display: flex; justify-content: center; margin-top: 28px; }

/* album */
.album-stage { width: min(1120px, 100%); display: grid; grid-template-columns: .48fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.album-copy { padding-left: clamp(0px, 3vw, 35px); }
.album-copy h1 { font-size: clamp(48px, 6vw, 79px); line-height: .8; margin: 12px 0 22px; }
.album-copy h1 span { color: var(--rose-deep); }
.album-copy p { max-width: 310px; font-size: 18px; line-height: 1.1; color: #7d6569; }
.album-note { border-left: 1px solid var(--rose); padding: 4px 0 4px 15px; margin: 27px 0; max-width: 270px; }
.scrapbook { min-height: 405px; position: relative; background: #f5e8d8; padding: 30px; transform: rotate(-.7deg); box-shadow: 15px 18px 30px rgba(108,70,69,.17); border: 1px solid rgba(192,145,125,.45); }
.scrapbook:before { content: ''; position: absolute; inset: 13px; border: 1px dashed rgba(184,133,113,.55); pointer-events: none; }
.scrapbook-title { position: absolute; right: 30px; top: 14px; font: 10px var(--mono); color: #a58078; letter-spacing: .08em; }
.photo-grid { display: grid; grid-template-columns: 1.22fr .8fr; grid-template-rows: 1fr 1fr; gap: 18px; height: 330px; position: relative; z-index: 1; margin-top: 18px; }
.photo-card { position: relative; background: #fffbf4; padding: 8px 8px 22px; box-shadow: 5px 8px 12px rgba(102,66,61,.17); transform: rotate(-2deg); }
.photo-card:nth-child(2) { transform: rotate(3deg) translateY(9px); }
.photo-card:nth-child(3) { transform: rotate(-4deg) translateY(-4px); }
.photo-card.big { grid-row: span 2; }
.photo-window { height: 100%; min-height: 110px; display: grid; place-items: center; align-content: center; overflow: hidden; background: linear-gradient(135deg, #e7c2c0, #f5deda 48%, #d7b5b2); position: relative; }
.photo-card:not(.big) .photo-window { min-height: 112px; }
.photo-window:before { content: '✿'; position: absolute; font-size: 90px; color: rgba(255,250,241,.53); transform: rotate(-12deg); }
.photo-window:after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,250,241,.62); }
.photo-window img { display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 2; }
.photo-window.has-image img { display: block; }
.photo-window.has-image .placeholder-copy { display: none; }
.placeholder-copy { position: relative; z-index: 1; text-align: center; color: #956f72; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; line-height: 1.7; }
.placeholder-copy strong { display: block; font: 500 25px var(--display); text-transform: none; letter-spacing: 0; color: #a46c73; }
.photo-caption { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font: 10px var(--mono); color: #8f6e6b; }
.photo-upload { position: absolute; inset: 0; opacity: 0; z-index: 3; cursor: pointer; }
.album-actions { margin-top: 18px; display: flex; justify-content: flex-end; }

/* letter */
.letter-stage { width: min(1000px, 100%); display: grid; grid-template-columns: .7fr 1fr; gap: clamp(35px, 8vw, 100px); align-items: center; }
.letter-copy h1 { font-size: clamp(49px, 6vw, 78px); line-height: .8; margin: 12px 0 20px; }
.letter-copy p { font-size: 19px; color: #7e6669; max-width: 320px; line-height: 1.15; }
.letter-copy .micro-note { max-width: 300px; margin-top: 24px; }
.envelope-scene { min-height: 425px; display: grid; place-items: center; position: relative; }
.envelope { width: min(450px, 90vw); height: 275px; position: relative; transform: rotate(1deg); filter: drop-shadow(13px 18px 9px rgba(101,60,59,.18)); }
.envelope-back { position: absolute; inset: 0; background: #c8888b; border-radius: 3px; }
.envelope-back:after { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(255,250,241,.5); }
.envelope-paper { position: absolute; left: 10%; right: 10%; height: 78%; bottom: 8%; background: var(--paper); padding: 28px 30px; transform: translateY(6%); transition: transform 1.05s cubic-bezier(.22,.78,.22,1) .2s; z-index: 1; box-shadow: 0 0 12px rgba(98,61,58,.15); }
.envelope.open .envelope-paper { transform: translateY(-5%); }
.envelope-paper .paper-stamp { position: absolute; top: 15px; right: 15px; font-size: 21px; color: var(--champagne); }
.envelope-paper h3 { font: 500 28px var(--display); color: var(--rose-deep); margin: 20px 0 4px; }
.envelope-paper p { font-size: 14px; color: #866d6d; }
.envelope-front { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: 3px; pointer-events: none; }
.envelope:not(.open) .envelope-front { background: #d99a9a; }
.envelope-front:before, .envelope-front:after { content: ''; position: absolute; bottom: -1px; width: 73%; height: 100%; background: #d99a9a; }
.envelope-front:before { left: -19%; transform: skewX(34deg); transform-origin: bottom; }
.envelope-front:after { right: -19%; transform: skewX(-34deg); transform-origin: bottom; }
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 4; background: #e2acad; clip-path: polygon(0 0,100% 0,50% 100%); transform-origin: top; transition: transform .85s cubic-bezier(.3,.7,.2,1); }
.envelope-flap:after { content: '♡'; position: absolute; left: 50%; top: 28px; transform: translateX(-50%); color: #fff5ed; font-size: 30px; }
.envelope.open .envelope-flap { transform: rotateX(180deg); }
.envelope-seal { position: absolute; z-index: 5; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-deep); color: #fbeadd; font-size: 21px; transition: opacity .35s ease; }
.envelope.open .envelope-seal { opacity: 0; pointer-events: none; }
.letter-actions { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; z-index: 7; }
.letter-paper-reveal { position: absolute; left: 7%; right: 7%; top: 7%; bottom: 7%; overflow: auto; background: #fcf6e9; z-index: 8; padding: clamp(22px, 3vw, 34px); box-shadow: 8px 10px 18px rgba(98,61,58,.19); transform: translateY(30px) scale(.96); opacity: 0; transition: .8s cubic-bezier(.22,.78,.2,1); pointer-events: none; }
.letter-paper-reveal.visible { transform: translateY(-8px) scale(1); opacity: 1; pointer-events: auto; }
.letter-paper-reveal:before { content: ''; position: absolute; inset: 14px; border: 1px solid #dfc5b2; pointer-events: none; }
.waiting-letter { position: relative; z-index: 1; text-align: center; max-width: 370px; margin: auto; }
.waiting-letter .tiny-flower { color: var(--champagne); font-size: 24px; }
.waiting-letter h3 { font: 500 32px var(--display); color: var(--rose-deep); margin: 11px 0; }
.waiting-letter p { color: #826c6c; font-size: 16px; line-height: 1.2; }
.waiting-letter .micro-note { margin: 22px auto 0; font-size: 10px; }
.verbatim-letter { position: relative; z-index: 1; max-width: 520px; margin: 6px auto 0; text-align: left; color: #6f595c; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.17; }
.verbatim-letter .letter-paragraph { margin: 0 0 1em; opacity: 0; transform: translateY(10px); }
.letter-paper-reveal.visible .letter-paragraph { animation: letterParagraphIn .65s cubic-bezier(.22,.78,.2,1) forwards; }
.letter-paper-reveal.visible .letter-paragraph:nth-child(1) { animation-delay: .18s; }
.letter-paper-reveal.visible .letter-paragraph:nth-child(2) { animation-delay: .36s; }
.letter-paper-reveal.visible .letter-paragraph:nth-child(3) { animation-delay: .54s; }
.letter-paper-reveal.visible .letter-paragraph:nth-child(4) { animation-delay: .72s; }
.secret-note-button { display: block; margin: 16px auto 0; min-height: 36px; padding: 0 15px; border: 1px solid rgba(169,103,112,.42); border-radius: 999px; background: rgba(239,214,213,.48); color: var(--rose-deep); font: 10px var(--mono); letter-spacing: .04em; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.secret-note-button:hover { background: rgba(239,214,213,.78); box-shadow: 0 7px 15px rgba(138,75,84,.12); transform: translateY(-2px); }
.secret-note-panel { display: grid; gap: 3px; max-width: 250px; margin: 12px auto 0; padding: 11px 14px; border: 1px dashed #d6b59f; border-radius: 8px; background: rgba(255,250,241,.72); color: #866d6d; text-align: center; animation: secretNoteIn .45s cubic-bezier(.22,.78,.2,1); }
.secret-note-panel strong { font: 500 22px var(--display); color: var(--rose-deep); }
.secret-note-panel span { font-size: 11px; }
.envelope { cursor: pointer; touch-action: manipulation; }
.envelope:not(.open):hover .envelope-seal { transform: translate(-50%,-50%) scale(1.1) rotate(-7deg); box-shadow: 0 0 0 7px rgba(255,250,241,.2); }
.envelope.click-feedback { animation: envelopeTap .46s cubic-bezier(.2,.8,.2,1); }

/* goodnight */
.goodnight-stage { width: min(980px, 100%); text-align: center; position: relative; padding: 10px 0 18px; }
.moon-window { width: min(650px, 92vw); height: min(430px, 53vh); min-height: 330px; margin: 0 auto 25px; position: relative; overflow: hidden; background: linear-gradient(#24283f, #4d465e 64%, #936b76); border-radius: 48% 48% 0 0; box-shadow: inset 0 0 58px rgba(5,8,27,.62), 0 25px 38px rgba(54,43,61,.28); border: 8px solid #d2c0b1; outline: 1px solid rgba(126,103,101,.7); cursor: pointer; transition: filter .45s ease, transform .45s ease; }
.moon-window:hover { filter: brightness(1.07); transform: translateY(-3px); }
.moon-window:before { content: ''; position: absolute; width: 125px; height: 125px; border-radius: 50%; background: #e8dfc4; right: 18%; top: 12%; box-shadow: 0 0 38px rgba(229,216,171,.54); transition: transform .55s ease, box-shadow .55s ease; }
.moon-window:after { content: '✦  ·  ✧  ·  ✦  ·  ✧  ·  ✦'; position: absolute; inset: 50px 45px auto; color: rgba(224,218,198,.64); letter-spacing: 15px; font-size: 15px; animation: twinkle 3.8s ease-in-out infinite; }
.moon-hint { position: absolute; right: 23%; top: 28%; z-index: 2; color: rgba(83,74,91,.52); font-size: 18px; pointer-events: none; }
.window-sill { position: absolute; bottom: 0; left: 0; right: 0; height: 56px; background: #765565; border-top: 4px solid #bd8f91; }
.window-sill:after { content: '✿  ♡  ✿'; position: absolute; right: 14%; bottom: 42px; color: #bd8f91; font-size: 24px; letter-spacing: 12px; }
.night-stars { position: absolute; z-index: 5; inset: 25px 12% auto; height: 220px; pointer-events: none; }
.night-star { position: absolute; pointer-events: auto; border: 0; background: transparent; color: rgba(220,214,194,.62); font-size: 18px; padding: 8px; line-height: 1; transition: transform .3s ease, color .3s ease, text-shadow .3s ease; }
.night-star:hover, .night-star.lit { color: #e8dfc4; transform: scale(1.35) rotate(12deg); text-shadow: 0 0 18px rgba(229,216,171,.7); }
.star-a { left: 8%; top: 18%; } .star-b { left: 28%; top: 52%; } .star-c { right: 32%; top: 10%; } .star-d { right: 9%; top: 58%; } .star-e { left: 52%; top: 78%; }
.goodnight-stage h1 { font-size: clamp(56px, 8vw, 96px); line-height: .8; margin: 0 0 16px; color: #e9e2d5; text-shadow: 0 3px 0 rgba(35,29,42,.28); }
.goodnight-stage p { color: #d8c9c5; font-size: 20px; margin-bottom: 25px; }
.goodnight-stage .primary-button { background: #d7cdb7; color: #5e4c59; box-shadow: 0 10px 22px rgba(34,26,42,.25); }
.goodnight-stage .ghost-button { background: transparent; border-color: rgba(218,205,192,.5); color: #dfd2cd; }
.goodnight-stage.candle-on .moon-window:before, .goodnight-stage.moon-wink .moon-window:before { animation: moonPulse 2.2s ease-in-out infinite; }
.goodnight-stage.moon-wink .moon-window:before { transform: translateX(-10px) scale(.93); }
.goodnight-stage.candle-on:after { content: '⋆ ｡ﾟ✶ ｡ﾟ⋆'; position: absolute; left: 0; right: 0; top: 12%; color: #ddd4b9; font-size: 25px; letter-spacing: 20px; animation: floatUp 1.8s ease-out; }

.toast { position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 20px); opacity: 0; z-index: 20; padding: 11px 17px; border-radius: 99px; background: #513f46; color: #fff8ed; font: 11px var(--mono); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes pageIn { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pageTurn { 0% { opacity: .35; transform: perspective(1400px) rotateY(-14deg) translateX(22px); } 55% { opacity: .88; transform: perspective(1400px) rotateY(5deg) translateX(-5px); } 100% { opacity: 1; transform: perspective(1400px) rotateY(0) translateX(0); } }
@keyframes twinkle { 0%,100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
@keyframes moonPulse { 0%,100% { box-shadow: 0 0 45px rgba(255,234,175,.75); } 50% { box-shadow: 0 0 72px rgba(255,234,175,.95); } }
@keyframes floatUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes letterParagraphIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes secretNoteIn { from { opacity: 0; transform: translateY(-5px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes envelopeTap { 0%,100% { transform: rotate(1deg) scale(1); } 45% { transform: rotate(-1deg) scale(.985); } 75% { transform: rotate(1deg) scale(1.01); } }

@media (max-width: 820px) {
  .app-shell { padding: 15px 16px; }
  .masthead { align-items: flex-start; }
  .chapter-label { display: none; }
  .screen { min-height: 620px; padding: 30px 0; }
  .receipt-stage, .album-stage, .letter-stage { grid-template-columns: 1fr; gap: 32px; }
  .receipt-intro, .album-copy, .letter-copy { text-align: center; padding: 0; }
  .receipt-intro h1 { font-size: clamp(48px, 15vw, 75px); }
  .receipt-intro p, .album-copy p, .letter-copy p { margin-left: auto; margin-right: auto; }
  .rose-stem { margin: 13px auto 0; }
  .receipt { max-width: 400px; }
  .album-copy h1 { margin: 8px 0 18px; }
  .album-note { margin: 17px auto; text-align: left; }
  .album-actions { justify-content: center; }
  .scrapbook { min-height: 355px; padding: 25px 17px; }
  .photo-grid { height: 295px; gap: 10px; }
  .letter-copy .micro-note { margin: 10px auto 0; }
  .envelope-scene { min-height: 420px; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 18px; }
  .progress-dots { gap: 5px; }
  .screen { min-height: 640px; }
  .receipt-intro h1 { line-height: .9; }
  .receipt-paper { padding-left: 22px; padding-right: 22px; }
  .book { height: 215px; }
  .book-spread h2 { font-size: 32px; }
  .book-spread p { font-size: 12px; }
  .scrapbook-title { right: 20px; }
  .photo-grid { margin-top: 22px; }
  .envelope { height: 220px; }
  .envelope-scene { min-height: 350px; }
  .letter-paper-reveal { left: 7%; right: 7%; top: 6%; bottom: 6%; padding: 21px 17px; }
  .moon-window { min-height: 280px; height: 42vh; }
  .footer-note { font-size: 8px; letter-spacing: .1em; }
  .footer-line { width: 25px; }
}
@media (orientation: landscape) and (max-height: 650px) {
  .app-shell { padding-top: 10px; padding-bottom: 8px; }
  .screen { min-height: 410px; padding: 12px 0; }
  .footer-note { display: none; }
  .receipt-stage { gap: 65px; }
  .receipt-intro h1 { font-size: clamp(45px, 8vw, 72px); }
  .book { height: 245px; }
  .album-stage { gap: 45px; }
  .scrapbook { min-height: 330px; }
  .letter-stage { gap: 50px; }
  .envelope-scene { min-height: 330px; }
}

/* phase 1 · cute interactive motion layer */
html { scroll-behavior: smooth; }
button, input, .photo-card, .book, .envelope, .moon-window, .scrapbook, .receipt {
  -webkit-tap-highlight-color: transparent;
}
button { transition: transform .22s cubic-bezier(.22,.8,.24,1), box-shadow .22s ease, filter .22s ease, background-color .22s ease; }
button:hover { filter: saturate(1.08); }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.primary-button:hover { box-shadow: 0 13px 26px rgba(138,75,84,.28); }
.ghost-button:hover { box-shadow: 0 8px 18px rgba(138,75,84,.12); }
.tap-feedback { animation: buttonTap .36s cubic-bezier(.2,.9,.25,1); }
.reveal-item { opacity: 0; filter: blur(3px); transition: opacity .68s ease var(--reveal-delay, 0ms), filter .68s ease var(--reveal-delay, 0ms); }
.reveal-item.is-visible { opacity: 1; filter: blur(0); }
.wordmark-mark { display: inline-block; animation: tinySparkle 3.8s ease-in-out infinite; }
.rose-stem { transform-origin: 63px 4px; animation: roseSway 5.5s ease-in-out infinite; }
.receipt:hover { filter: drop-shadow(19px 24px 13px rgba(95,58,58,.22)); }
.progress-dot { transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease, opacity .3s ease; }
.photo-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .68s ease var(--reveal-delay, 0ms), filter .68s ease var(--reveal-delay, 0ms); }
.photo-card:hover { z-index: 4; box-shadow: 8px 13px 18px rgba(102,66,61,.25); }
.photo-card:nth-child(1):hover { transform: rotate(-2deg) translateY(-6px) scale(1.012); }
.photo-card:nth-child(2):hover { transform: rotate(3deg) translateY(3px) scale(1.018); }
.photo-card:nth-child(3):hover { transform: rotate(-4deg) translateY(-10px) scale(1.018); }
.photo-card { border: 1px solid rgba(186,145,128,.34); border-radius: 2px; }
.photo-card:before { content: ''; position: absolute; left: 50%; top: -9px; width: 58px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(246,220,190,.72); box-shadow: 0 1px 2px rgba(111,74,67,.08); z-index: 6; pointer-events: none; }
.book-ornament, .paper-stamp, .envelope-seal { animation: ornamentFloat 4.5s ease-in-out infinite; }
.envelope-seal { transition: transform .28s ease, box-shadow .28s ease; }
.envelope-seal:hover { transform: translate(-50%, -50%) scale(1.12) rotate(-8deg); box-shadow: 0 0 0 7px rgba(255,250,241,.2), 0 5px 12px rgba(94,55,58,.2); }
.scrapbook-title { animation: noteDrift 6s ease-in-out infinite; }
.moon-window { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease, box-shadow .35s ease; }
.moon-window:focus-visible { outline: 2px solid var(--champagne); outline-offset: 5px; }
.night-star { transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s ease, text-shadow .3s ease, filter .3s ease; }
.night-star:active { transform: scale(.84); }

/* album lightbox */
body.lightbox-open { overflow: hidden; }
.photo-window { cursor: zoom-in; }
.photo-open { position: absolute; inset: 10px; z-index: 4; display: grid; place-items: center; border: 0; border-radius: 2px; background: rgba(73,62,66,0); color: transparent; font: 28px var(--serif); cursor: zoom-in; }
.photo-open:hover, .photo-open:focus-visible { background: rgba(73,62,66,.18); color: #fffaf1; text-shadow: 0 1px 5px rgba(73,62,66,.45); }
.photo-open:disabled { display: none; }
.photo-replace { position: absolute; right: 9px; bottom: 2px; z-index: 7; display: grid; place-items: center; width: 20px; height: 18px; border-radius: 5px; color: #a47776; font: 12px var(--mono); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.photo-replace:hover { background: rgba(239,214,213,.75); color: var(--rose-deep); transform: translateY(-1px); }
.photo-upload { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: pointer; }
.album-lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; opacity: 0; transition: opacity .26s ease; }
.album-lightbox[hidden] { display: none; }
.album-lightbox.is-open { opacity: 1; }
.album-lightbox-backdrop { position: absolute; inset: 0; background: rgba(55,42,52,.72); backdrop-filter: blur(5px); }
.lightbox-frame { position: relative; z-index: 1; width: min(88vw, 760px); max-height: 88svh; padding: clamp(30px, 4vw, 46px) clamp(34px, 5vw, 68px) 24px; background: #fffaf1; border: 10px solid #f4e7d7; box-shadow: 0 24px 60px rgba(35,24,35,.3), inset 0 0 0 1px #d6b9a5; transform: translateY(14px) scale(.94) rotate(-.6deg); transition: transform .34s cubic-bezier(.2,.8,.2,1); touch-action: pan-y;
}
.album-lightbox.is-open .lightbox-frame { transform: translateY(0) scale(1) rotate(-.6deg); }
.lightbox-frame figure { margin: 0; text-align: center; }
.lightbox-frame img { display: block; width: auto; max-width: 100%; max-height: 70svh; margin: 0 auto; object-fit: contain; border: 1px solid #dfc5b2; box-shadow: 0 8px 18px rgba(98,61,58,.16); }
.lightbox-frame figcaption { margin-top: 12px; color: #8f6e6b; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lightbox-close, .lightbox-nav { position: absolute; z-index: 3; display: grid; place-items: center; border: 0; border-radius: 50%; background: #a96770; color: #fffaf1; box-shadow: 0 5px 12px rgba(94,55,58,.2); }
.lightbox-close { top: 10px; right: 10px; width: 42px; height: 42px; font: 25px/1 var(--serif); }
.lightbox-nav { top: 50%; width: 42px; height: 42px; transform: translateY(-50%); font: 33px/1 var(--serif); }
.lightbox-prev { left: -22px; } .lightbox-next { right: -22px; }
.lightbox-close:hover, .lightbox-nav:hover { background: #8e5862; transform: translateY(-50%) scale(1.06); }
.lightbox-close:hover { transform: scale(1.06); }

@keyframes buttonTap { 0% { transform: scale(1); } 38% { transform: scale(.94); } 72% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes tinySparkle { 0%,100% { transform: rotate(0) scale(1); opacity: .82; } 50% { transform: rotate(12deg) scale(1.12); opacity: 1; } }
@keyframes roseSway { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ornamentFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes noteDrift { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-1deg) translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal-item { opacity: 1; filter: none; }
  .tap-feedback { animation: none; }
  .verbatim-letter .letter-paragraph { opacity: 1; transform: none; }
  .letter-paper-reveal.visible .letter-paragraph { animation: none; }
  .secret-note-panel { animation: none; }
  .envelope.click-feedback { animation: none; }
}

@media (max-width: 600px) {
  .photo-card:before { width: 45px; height: 14px; top: -7px; }
  .lightbox-frame { width: min(92vw, 520px); max-height: 84svh; padding: 36px 24px 22px; border-width: 7px; }
  .lightbox-frame img { max-height: 62svh; }
  .lightbox-prev { left: 7px; } .lightbox-next { right: 7px; }
  .lightbox-close { top: 6px; right: 6px; }
}