:root {
  color-scheme: dark;
  --bg: #06020b;
  --panel: rgba(24, 11, 34, 0.66);
  --panel-strong: rgba(30, 13, 43, 0.94);
  --line: rgba(255, 255, 255, 0.13);
  --text: #fff7fc;
  --muted: #d3bfd0;
  --pink: #ff79bd;
  --pink-strong: #ff4ca3;
  --lavender: #cba7ff;
  --peach: #ffc2d9;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
body {
  min-height: 100svh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(129, 51, 141, 0.25), transparent 34%),
    radial-gradient(circle at 80% 75%, rgba(255, 71, 159, 0.13), transparent 30%),
    linear-gradient(160deg, #08020d 0%, #0b0314 52%, #040107 100%);
}
button, img, video { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid rgba(255, 121, 189, 0.75); outline-offset: 3px; }
img, video { max-width: 100%; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.aurora {
  position: fixed; width: 42vmax; height: 42vmax; border-radius: 50%; filter: blur(90px);
  opacity: .18; pointer-events: none; z-index: 0; animation: drift 14s ease-in-out infinite alternate;
}
.aurora-one { top: -22vmax; left: -14vmax; background: #d15cff; }
.aurora-two { right: -20vmax; bottom: -24vmax; background: #ff498f; animation-delay: -6s; }
@keyframes drift { to { transform: translate3d(8vmax, 5vmax, 0) scale(1.12); } }

#app { position: relative; z-index: 2; width: 100%; min-height: 100svh; }
.screen {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--safe-top) max(18px, env(safe-area-inset-right)) var(--safe-bottom) max(18px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transform: scale(1.025);
  transition: opacity .75s ease, transform .75s ease, visibility .75s;
}
.screen-active { opacity: 1; visibility: visible; transform: scale(1); }
.glass {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.eyebrow { margin: 0 0 10px; color: #f6acd2; font-size: .7rem; font-weight: 800; letter-spacing: .21em; }
h1, h2, h3, p { margin-top: 0; }

/* Intro */
.intro-card { position: relative; width: min(100%, 430px); padding: 30px 26px 25px; border-radius: 34px; text-align: center; overflow: hidden; }
.intro-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.07), transparent 70%);
  transform: translateX(-100%); animation: sheen 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes sheen { 0%,62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.intro-photo-wrap { position: relative; width: 150px; height: 150px; margin: 0 auto 24px; }
.intro-photo { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; border: 5px solid rgba(255,255,255,.86); box-shadow: 0 0 0 7px rgba(255,100,179,.14), 0 18px 45px rgba(0,0,0,.42); }
.photo-glow { position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255,126,190,.48); animation: pulse-ring 2.8s ease-out infinite; }
@keyframes pulse-ring { 0% { transform: scale(.82); opacity: 0; } 35% { opacity: .8; } 100% { transform: scale(1.24); opacity: 0; } }
.intro-card h1 { margin-bottom: 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 10vw, 3.55rem); line-height: .98; letter-spacing: -.045em; }
.intro-card h1 span { color: var(--pink); filter: drop-shadow(0 0 16px rgba(255,76,163,.65)); }
.intro-copy { max-width: 330px; margin: 0 auto 24px; color: var(--muted); line-height: 1.65; }
.primary-button, .secondary-button {
  border: 0; cursor: pointer; border-radius: 999px; font-weight: 800; letter-spacing: -.01em;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.primary-button { width: 100%; min-height: 56px; padding: 14px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: white; background: linear-gradient(135deg, #ff83c3, #ff3d9c); box-shadow: 0 15px 34px rgba(255,61,156,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active { transform: translateY(1px) scale(.99); }
.button-heart { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tap-note { margin: 14px 0 0; color: rgba(255,255,255,.58); font-size: .77rem; }

/* Loader */
.loader-content { width: min(90vw, 440px); text-align: center; }
.loader-content h2 { margin: 20px 0 8px; font-family: Georgia, serif; font-size: clamp(1.75rem, 7vw, 2.65rem); }
.loader-content p { color: var(--muted); }
.mini-heart { width: 82px; height: 82px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 2.1rem; background: radial-gradient(circle at 36% 30%, #ffb6db, #ff489f 52%, #411044); box-shadow: 0 0 60px rgba(255,76,163,.54); animation: heartbeat 1.25s ease-in-out infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.08); } 28% { transform: scale(1); } 42% { transform: scale(1.06); } }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.11); box-shadow: inset 0 1px 4px rgba(0,0,0,.35); }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff69b4, #d79aff); box-shadow: 0 0 18px rgba(255,89,176,.75); transition: width .18s ease; }
#progressText { display: inline-block; margin-top: 13px; color: #ffc0dc; }

/* Universe */
.universe-screen { place-items: stretch; }
.universe-layout { width: min(100%, 1380px); height: 100%; margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.universe-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 4px 6px 0; z-index: 20; }
.universe-header h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.15rem, 4vw, 4.25rem); line-height: .95; letter-spacing: -.045em; }
.icon-button { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; font-size: 1.2rem; }
.galaxy-stage { position: relative; width: 100%; min-height: 0; overflow: hidden; isolation: isolate; touch-action: pan-y; cursor: grab; }
.galaxy-stage:active { cursor: grabbing; }
.galaxy-stage::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(224,73,178,.09), transparent 62%); filter: blur(20px); }
.orbit { position: absolute; left: 50%; top: 52%; border: 1px solid rgba(255,174,222,.17); border-radius: 50%; transform: translate(-50%,-50%) rotate(-6deg); pointer-events: none; }
.orbit-one { width: 38%; height: 33%; }
.orbit-two { width: 62%; height: 52%; transform: translate(-50%,-50%) rotate(8deg); }
.orbit-three { width: 88%; height: 72%; transform: translate(-50%,-50%) rotate(-4deg); }
.photo-universe, .word-universe { position: absolute; inset: 0; }
.photo-node {
  position: absolute; width: clamp(58px, 6vw, 92px); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.76); background: #1a0d20; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(255,85,164,.12), 0 9px 30px rgba(0,0,0,.48), 0 0 20px rgba(255,82,163,.14);
  transition: box-shadow .25s ease, filter .25s ease; will-change: left, top, transform;
}
.photo-node::after { content: "♥"; position: absolute; right: 4px; bottom: 3px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; background: linear-gradient(135deg,#ff91c8,#ff3b9a); box-shadow: 0 5px 14px rgba(0,0,0,.32); }
.photo-node:hover { box-shadow: 0 0 0 5px rgba(255,111,184,.22), 0 13px 38px rgba(0,0,0,.52), 0 0 28px rgba(255,82,163,.38); filter: brightness(1.08); }
.photo-node img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.floating-word { position: absolute; padding: 6px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #ead8e6; background: rgba(17,7,24,.38); backdrop-filter: blur(8px); font-size: clamp(.62rem, 1vw, .78rem); font-weight: 700; white-space: nowrap; will-change: left, top, transform; }
.center-piece { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); z-index: 12; display: flex; align-items: center; gap: 17px; pointer-events: none; }
.heart-core { position: relative; width: clamp(116px, 12vw, 168px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: clamp(2.8rem, 5vw, 4.2rem); background: radial-gradient(circle at 37% 30%, #ffbfe0, #ff4ba6 47%, #611456 72%, #16051d); border: 2px solid rgba(255,255,255,.35); box-shadow: inset 0 0 25px rgba(255,255,255,.22), 0 0 24px rgba(255,67,162,.55), 0 0 70px rgba(255,67,162,.42); }
.heart-core::before { content: ""; position: absolute; inset: -11%; border: 1px solid rgba(255,116,188,.5); border-radius: 50%; animation: pulse-ring 2.9s ease-out infinite; }
.center-copy { display: flex; flex-direction: column; text-shadow: 0 3px 20px rgba(0,0,0,.8); }
.center-copy strong { font-family: Georgia, serif; font-size: clamp(1.45rem, 2.6vw, 2.5rem); white-space: nowrap; }
.center-copy span { color: #e0cadb; font-size: clamp(.72rem, 1.25vw, 1rem); }
.universe-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 20; padding-bottom: 2px; }
.drag-hint { margin: 0; color: rgba(255,255,255,.55); font-size: .78rem; text-align: center; }
.secondary-button { min-width: min(100%, 355px); min-height: 52px; padding: 13px 26px; border: 1px solid rgba(255,255,255,.75); background: rgba(17,8,23,.62); }
.secondary-button span { margin-left: 8px; color: var(--pink); }

/* Story gallery dialog */
dialog { padding: 0; color: var(--text); }
.story-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; background: rgba(4,1,7,.72); overflow: hidden; }
.story-dialog::backdrop { background: rgba(2,0,5,.72); backdrop-filter: blur(14px); }
.story-shell { position: relative; width: min(1180px, calc(100vw - 34px)); height: min(92dvh, 930px); margin: 4dvh auto; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: linear-gradient(180deg, rgba(29,10,37,.98), rgba(8,2,13,.98)); box-shadow: 0 30px 100px rgba(0,0,0,.7); scrollbar-width: thin; scrollbar-color: rgba(255,124,190,.5) transparent; }
.close-button { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(12,4,17,.72); color: white; font-size: 1.7rem; cursor: pointer; z-index: 40; }
.story-close { position: sticky; top: 18px; float: right; margin: 18px 18px -62px 0; backdrop-filter: blur(16px); }
.letter-section { min-height: 620px; padding: clamp(58px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); align-items: center; gap: clamp(40px, 7vw, 100px); background: radial-gradient(circle at 76% 34%, rgba(255,91,176,.18), transparent 30%), linear-gradient(145deg, rgba(84,25,88,.25), transparent 48%); }
.letter-copy { max-width: 610px; }
.letter-copy h2 { margin-bottom: 24px; font-family: Georgia, serif; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .9; letter-spacing: -.055em; }
.letter-copy > p:not(.eyebrow):not(.signature) { color: #eadce8; font-size: clamp(.98rem, 1.3vw, 1.08rem); line-height: 1.82; }
.letter-ending { color: #ffb5d8 !important; font-weight: 800; }
.signature { margin: 22px 0 28px; color: #ffc5df; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.55rem; line-height: 1.25; }
.story-start-button { width: auto; min-width: 280px; padding-inline: 25px; }
.letter-polaroids { position: relative; min-height: 430px; }
.polaroid { position: absolute; width: min(70%, 300px); padding: 11px 11px 40px; margin: 0; background: #fff9fb; box-shadow: 0 22px 50px rgba(0,0,0,.45); }
.polaroid img { width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; }
.polaroid-one { left: 2%; top: 10%; transform: rotate(-8deg); }
.polaroid-two { right: 2%; bottom: 5%; transform: rotate(8deg); }
.letter-heart { position: absolute; left: 48%; top: 48%; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #ff4aa3; box-shadow: 0 0 35px rgba(255,74,163,.65); font-size: 2rem; z-index: 4; transform: translate(-50%,-50%); }
.memories-section { padding: clamp(56px, 7vw, 92px) clamp(20px, 5vw, 68px); }
.memories-section > .eyebrow, .memories-section > h2, .memories-note { text-align: center; }
.memories-section h2 { margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .95; letter-spacing: -.055em; }
.memories-note { max-width: 580px; margin: 0 auto 38px; color: var(--muted); line-height: 1.6; }
.memory-grid { columns: 4 230px; column-gap: 14px; }
.memory-card { position: relative; width: 100%; display: inline-block; margin: 0 0 14px; padding: 0; overflow: hidden; break-inside: avoid; border: 0; border-radius: 18px; background: #120818; box-shadow: 0 14px 32px rgba(0,0,0,.32); cursor: pointer; }
.memory-card::after { content: "Abrir  →"; position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255,63,157,.9); color: white; font-size: .68rem; font-weight: 800; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.memory-card:hover::after, .memory-card:focus-visible::after { opacity: 1; transform: translateY(0); }
.memory-card img, .memory-card video { width: 100%; height: auto; min-height: 180px; display: block; object-fit: cover; transition: transform .5s ease, filter .4s ease; }
.memory-card:hover img, .memory-card:hover video { transform: scale(1.035); filter: brightness(.86); }
.memory-number { position: absolute; left: 10px; top: 10px; min-width: 31px; height: 31px; padding: 0 8px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(9,3,13,.62); backdrop-filter: blur(10px); font-size: .72rem; font-weight: 800; z-index: 2; }
.memory-video-badge { position: absolute; left: 10px; bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(9,3,13,.68); backdrop-filter: blur(10px); font-size: .68rem; font-weight: 800; z-index: 2; }
.story-footer { padding: 32px 20px 55px; text-align: center; color: #efbbd6; font-family: Georgia, serif; font-size: 1.2rem; }

/* Full-screen story viewer */
.memory-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; overflow: hidden; background: #040106; }
.memory-viewer::backdrop { background: #020003; }
.viewer-shell { position: relative; width: 100%; height: 100%; padding: calc(var(--safe-top) + 5px) max(18px, env(safe-area-inset-right)) calc(var(--safe-bottom) + 8px) max(18px, env(safe-area-inset-left)); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 12px; background: radial-gradient(circle at 50% 45%, rgba(100,27,105,.22), transparent 48%), #040106; }
.viewer-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; width: min(1040px, 100%); margin: 0 auto; }
.viewer-progress-segment { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.22); }
.viewer-progress-segment span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#ff79bd,#fff); transition: width .25s ease; }
.viewer-progress-segment.is-past span, .viewer-progress-segment.is-current span { width: 100%; }
.viewer-topbar { width: min(1120px,100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.viewer-brand { display: flex; align-items: center; gap: 10px; }
.viewer-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#ff9bcb,#ff3d9c); box-shadow: 0 0 24px rgba(255,61,156,.35); }
.viewer-brand div { display: flex; flex-direction: column; }
.viewer-brand strong { font-size: .88rem; }
.viewer-brand span:not(.viewer-avatar) { color: rgba(255,255,255,.58); font-size: .7rem; }
.viewer-icon-button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.08); color: white; font-size: 1.55rem; cursor: pointer; }
.viewer-card { width: min(1120px,100%); min-height: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 330px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(17,7,23,.86); box-shadow: 0 30px 90px rgba(0,0,0,.62); }
.viewer-media-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #0d0611; touch-action: pan-y; }
.viewer-backdrop { position: absolute; inset: -35px; background-position: center; background-size: cover; filter: blur(30px) saturate(.9) brightness(.38); transform: scale(1.13); opacity: .85; }
.viewer-media { position: relative; z-index: 2; width: 100%; height: 100%; display: none; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.36)); }
.viewer-media.is-active { display: block; animation: media-enter .42s cubic-bezier(.2,.8,.2,1); }
@keyframes media-enter { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
.viewer-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 20%, transparent 66%, rgba(0,0,0,.54)); }
.viewer-zone { position: absolute; z-index: 5; top: 0; bottom: 0; width: 30%; border: 0; background: transparent; cursor: pointer; }
.viewer-zone-prev { left: 0; }
.viewer-zone-next { right: 0; }
.viewer-mobile-copy { display: none; }
.viewer-details { padding: 36px 30px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 50% 15%, rgba(255,76,163,.12), transparent 34%), rgba(19,8,25,.96); }
.viewer-counter { align-self: flex-start; margin-bottom: 35px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #f7bed9; background: rgba(255,255,255,.045); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.viewer-kicker { margin-bottom: 12px; color: #ff9dcc; font-size: .69rem; font-weight: 900; letter-spacing: .18em; }
.viewer-details h2 { margin-bottom: 16px; font-family: Georgia, serif; font-size: clamp(2.1rem, 3vw, 3.45rem); line-height: .98; letter-spacing: -.045em; }
.viewer-description { margin-bottom: 34px; color: #d8c4d4; font-size: .93rem; line-height: 1.7; }
.viewer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.viewer-arrow { min-height: 52px; padding: 10px 13px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.06); cursor: pointer; font-weight: 800; }
.viewer-arrow span { font-size: 1.15rem; }
.viewer-arrow small { font-size: .74rem; }
.viewer-arrow-primary { border-color: transparent; background: linear-gradient(135deg,#ff83c3,#ff3d9c); box-shadow: 0 12px 28px rgba(255,61,156,.24); }
.viewer-hint { margin: 18px 0 0; color: rgba(255,255,255,.45); font-size: .72rem; text-align: center; }
.viewer-mobile-controls { display: none; }

@media (min-width: 1100px) and (max-height: 800px) {
  .universe-layout { max-width: 1260px; }
  .universe-header h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
  .heart-core { width: clamp(108px, 10vw, 145px); }
  .photo-node { width: clamp(56px, 5.4vw, 82px); }
  .viewer-details { padding-block: 24px; }
  .viewer-counter { margin-bottom: 20px; }
}

@media (max-width: 820px) {
  .screen { padding-left: 14px; padding-right: 14px; }
  .universe-layout { width: 100%; gap: 2px; }
  .universe-header { padding: 0 3px; align-items: center; }
  .universe-header .eyebrow { margin-bottom: 6px; font-size: .57rem; }
  .universe-header h2 { font-size: clamp(2.02rem, 9vw, 2.85rem); }
  .icon-button { width: 44px; height: 44px; }
  .galaxy-stage { min-height: 410px; }
  .orbit { top: 50%; }
  .orbit-one { width: 54%; height: 34%; }
  .orbit-two { width: 78%; height: 54%; }
  .orbit-three { width: 108%; height: 72%; }
  .center-piece { top: 50%; gap: 0; flex-direction: column; text-align: center; }
  .heart-core { width: clamp(104px, 29vw, 132px); font-size: 3rem; }
  .center-copy { margin-top: 7px; }
  .center-copy strong { font-size: 1.33rem; }
  .center-copy span { font-size: .69rem; }
  .photo-node { width: clamp(56px, 17vw, 72px); }
  .photo-node::after { width: 19px; height: 19px; font-size: 9px; }
  .floating-word { font-size: .55rem; padding: 4px 7px; }
  .universe-bottom { gap: 6px; }
  .drag-hint { max-width: 330px; font-size: .66rem; }
  .secondary-button { min-height: 49px; min-width: min(100%, 330px); }

  .story-shell { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .story-close { top: calc(var(--safe-top) + 2px); margin-top: var(--safe-top); }
  .letter-section { min-height: auto; padding: calc(var(--safe-top) + 72px) 24px 64px; display: block; }
  .letter-copy h2 { font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .letter-copy > p:not(.eyebrow):not(.signature) { line-height: 1.72; }
  .story-start-button { width: 100%; min-width: 0; }
  .letter-polaroids { min-height: 310px; margin-top: 42px; }
  .polaroid { width: 58%; max-width: 210px; padding: 8px 8px 28px; }
  .letter-heart { width: 58px; height: 58px; }
  .memories-section { padding: 58px 14px 68px; }
  .memories-section h2 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
  .memories-note { padding: 0 12px; font-size: .88rem; }
  .memory-grid { columns: 2 145px; column-gap: 10px; }
  .memory-card { margin-bottom: 10px; border-radius: 14px; }
  .memory-card::after { opacity: 1; transform: none; content: "Abrir"; padding: 6px 8px; font-size: .6rem; }
  .memory-number { width: 27px; min-width: 27px; height: 27px; padding: 0; font-size: .64rem; }

  .viewer-shell { padding: var(--safe-top) 10px var(--safe-bottom); gap: 9px; }
  .viewer-progress { gap: 3px; }
  .viewer-topbar { padding: 0 4px; }
  .viewer-card { border-radius: 23px; grid-template-columns: 1fr; min-height: 0; }
  .viewer-media-stage { min-height: 0; }
  .viewer-media { object-fit: contain; }
  .viewer-vignette { background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 24%, transparent 58%, rgba(0,0,0,.82)); }
  .viewer-mobile-copy { position: absolute; z-index: 6; left: 20px; right: 20px; bottom: 18px; display: block; pointer-events: none; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
  .viewer-mobile-copy p { margin: 0 0 6px; color: #ffacd2; font-size: .61rem; font-weight: 900; letter-spacing: .17em; }
  .viewer-mobile-copy h3 { margin: 0; max-width: 92%; font-family: Georgia, serif; font-size: clamp(1.65rem, 7.3vw, 2.35rem); line-height: 1; letter-spacing: -.035em; }
  .viewer-details { display: none; }
  .viewer-mobile-controls { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 12px; }
  .viewer-mobile-controls > span { color: rgba(255,255,255,.66); font-size: .75rem; font-weight: 800; text-align: center; }
  .viewer-round-button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.08); font-size: 1.3rem; cursor: pointer; }
  .viewer-round-button-primary { border-color: transparent; background: linear-gradient(135deg,#ff83c3,#ff3d9c); box-shadow: 0 10px 25px rgba(255,61,156,.25); }
}

@media (max-width: 430px) {
  .intro-card { padding: 25px 20px 21px; border-radius: 28px; }
  .intro-photo-wrap { width: 132px; height: 132px; margin-bottom: 20px; }
  .intro-card h1 { font-size: clamp(2.55rem, 13vw, 3.25rem); }
  .intro-copy { font-size: .9rem; line-height: 1.55; margin-bottom: 20px; }
  .primary-button { min-height: 53px; }
  .galaxy-stage { min-height: 0; }
  .viewer-brand span:not(.viewer-avatar) { display: none; }
}

@media (max-height: 720px) and (max-width: 820px) {
  .universe-header h2 { font-size: 1.95rem; }
  .galaxy-stage { min-height: 340px; }
  .heart-core { width: 96px; }
  .photo-node { width: 55px; }
  .drag-hint { display: none; }
  .secondary-button { min-height: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}