/* Edit enam warna referensi di sini. */
:root {
  --periwinkle: #C5B7F0;
  --lime: #F6EDAA;
  --ink: #51475F;
  --text: #494153; /* Sedikit lebih gelap untuk teks kecil di latar biru. */
  --pink: #F3D2DE;
  --sky: #EEE8F7;
  --lavender: #D6C9F3;
  --white: #FFFEFC;
  --canvas: #FBFAF7;
  --shadow: 0 16px 40px #253a820c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body { font-family: 'Poppins', sans-serif; color: var(--text); background: var(--canvas); padding: 24px; transition: background-color .6s ease; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
button:disabled { cursor: wait; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.story { width: 100%; max-width: 1120px; height: calc(100svh - 48px); min-height: 500px; max-height: 1000px; margin: 0 auto; position: relative; display: flex; overflow: hidden; }
.screen-host { flex: 1; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; padding: 50px 38px; display: flex; align-items: center; justify-content: center; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; animation: arrive .85s ease both; }
.screen.leaving { animation: leave .28s ease both; pointer-events: none; }
.screen-content { width: 100%; margin: auto 0; }
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .6px; margin: 0 0 22px; }
h1, h2 { color: var(--ink); margin: 0 0 24px; font-size: clamp(30px, 3.5vw, 47px); line-height: 1.35; letter-spacing: -1.8px; font-weight: 500; }
p { font-size: 14px; line-height: 1.9; font-weight: 400; margin: 0 0 24px; }
.button { min-height: 52px; border: 0; border-radius: 18px; padding: 15px 30px; background: var(--lavender); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: none; transition: background .35s ease, color .35s ease, translate .35s ease, box-shadow .35s ease, transform .25s ease; }
.button:active { transform: scale(.98); }
.wide { width: 230px; max-width: 100%; }
.soft { background: transparent; border: 1px solid var(--periwinkle); }


/* Sampul berisi folder, foto, dan kartu catatan dari CSS/SVG lokal. */
.cover-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 74px; align-items: center; }
.cover-copy h1 { max-width: 460px; }
.cover-copy .sub { max-width: 325px; margin-bottom: 32px; }
.cover-signature { font-size: 11px; margin: 22px 0 0; }





/* Dua foto diselipkan di satu folder. */
.sender-layout { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: 'heading art' 'copy art' 'action art'; column-gap: 60px; align-items: center; }
.scene-heading { grid-area: heading; align-self: end; }
.sender-captions { grid-area: copy; align-self: start; }
.sender-captions p { font-size: 14px; margin-bottom: 18px; max-width: 350px; }
.sender-layout > .button { grid-area: action; justify-self: start; align-self: start; }
.sender-stack { grid-area: art; min-height: 440px; position: relative; border-radius: 16px; background: var(--lavender); }
.sender-stack:before { content: ""; position: absolute; top: -24px; left: 22px; width: 125px; height: 35px; border-radius: 12px 12px 0 0; background: var(--lavender); }
.polaroid { background: var(--white); padding: 10px 10px 17px; border-radius: 19px; position: relative; box-shadow: var(--shadow); transition: rotate .5s ease, translate .5s ease, box-shadow .5s ease; }
.sender-stack .polaroid { width: 205px; position: absolute; left: 8px; top: 20px; rotate: -5deg; animation: photo-in 1s .15s both; }
.sender-stack .polaroid:nth-child(2) { left: auto; right: 6px; top: 116px; rotate: 5deg; animation-delay: .55s; }
.stack-note { position: absolute; bottom: 6px; left: 14px; font-size: 11px; margin: 0; }
.photo-slot { position: relative; aspect-ratio: 3/4; border-radius: 12px; background: var(--sky); overflow: hidden; display: grid; place-items: center; }
.sender-stack .polaroid:nth-child(2) .photo-slot { background: var(--pink); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.placeholder { font-size: 11px; }
.photo-number { display: block; margin-top: 12px; text-align: center; font-size: 10px; }
.note-page { max-width: 700px; padding: 44px 48px; border-radius: 28px; background: var(--white); position: relative; }

.intro-copy { max-width: 530px; font-size: 19px; line-height: 1.95; margin-bottom: 20px; }
.intro-note { font-size: 11px; }
.gallery .screen-content { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 60px; grid-template-areas: 'label art' 'title art' 'caption art' 'progress art' 'action art'; }
.gallery .eyebrow { grid-area: label; align-self: end; }
.gallery h2 { grid-area: title; }
#gallery-slide { display: contents; }
.gallery-mat { grid-area: art; align-self: center; justify-self: center; width: min(100%, 350px); padding: 17px; border-radius: 25px; background: var(--lavender); rotate: -3deg; transition: rotate .5s ease, box-shadow .5s ease; }
.gallery-frame { width: 100%; touch-action: pan-y; box-shadow: none; }
.gallery-frame .photo-slot { aspect-ratio: 4/5; background: var(--sky); }
.gallery-caption { grid-area: caption; font-size: 22px; line-height: 1.8; max-width: 400px; margin-bottom: 28px; }
.gallery-progress { grid-area: progress; font-size: 11px; margin-bottom: 24px; }
.gallery .button { grid-area: action; }
.gallery-image-enter { animation: photo-in .7s ease both; }
.confession { background: var(--lavender); border-radius: 28px; }
.confession .screen-content { max-width: 660px; padding: 20px 0 50px; }
.confession-copy { font-size: clamp(23px, 3vw, 34px); line-height: 1.85; font-weight: 400; letter-spacing: -.7px; min-height: 225px; }
.confession .button { opacity: 0; visibility: hidden; transition: opacity .6s ease, background .35s ease, translate .35s ease; }
.confession .button.ready { opacity: 1; visibility: visible; }

.question .screen-content { max-width: 580px; text-align: center; }

.question h2 { font-size: clamp(29px, 3.5vw, 43px); }
.answer-zone { position: relative; height: 150px; width: min(100%, 350px); margin: 28px auto 0; }
.answer-yes { position: absolute; top: 0; left: 0; width: 100%; }
.answer-no { position: absolute; top: 70px; left: 50%; min-width: 150px; transform: translateX(-50%); white-space: nowrap; transition: left .45s ease, top .45s ease, background .35s ease; }
.answer-no:active { transform: translateX(-50%) scale(.98); }
.dodge-note { min-height: 25px; margin-bottom: 14px; font-size: 12px; }
.signature { font-size: 12px; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
noscript { position: fixed; inset: 30%; padding: 24px; background: var(--white); }
/* Warna solid lembut untuk setiap layar. */
body[data-scene="0"], body[data-scene="5"] { background: var(--canvas); }
body[data-scene="1"] { background: var(--canvas); }
body[data-scene="2"] { background: var(--sky); }
body[data-scene="3"] { background: var(--canvas); }
body[data-scene="4"] { background: var(--lavender); }
.cover-board { width: 100%; height: 460px; position: relative; animation: card-float 8s ease-in-out infinite; }
.folder-layer { position: absolute; height: 70%; border-radius: 15px; transition: rotate .7s ease, translate .7s ease; }
.folder-layer:before { content: ''; position: absolute; top: -28px; left: 23px; width: 126px; height: 37px; border-radius: 13px 13px 0 0; background: inherit; }
.folder-back { top: 12%; left: 15%; right: 1%; background: var(--lime); rotate: 9deg; }
.folder-mid { top: 19%; left: 7%; right: 4%; background: var(--lavender); rotate: -5deg; }
.folder-front { top: 26%; left: 1%; right: 7%; background: var(--pink); rotate: -3deg; }
.folder-name { position: absolute; top: -20px; left: 43px; font-size: 11px; }
.cover-photo { position: absolute; top: 4%; right: 11%; width: 36%; padding: 8px; border-radius: 9px; rotate: 8deg; z-index: 2; }
.cover-photo .photo-slot { border-radius: 4px; }
.folder-note { position: absolute; top: 38%; left: 7%; width: 62%; min-height: 195px; background: var(--white); border-radius: 7px; padding: 25px 24px; rotate: -7deg; z-index: 3; box-shadow: var(--shadow); transition: rotate .6s ease, translate .6s ease; }
.folder-note > span { display: block; font-size: 10px; line-height: 1.8; }
.folder-note > p { font-size: 27px; line-height: 1.35; letter-spacing: -.8px; margin: 16px 0 18px; font-weight: 500; }
.folder-stamp { position: absolute; bottom: 6%; right: 9%; z-index: 4; background: var(--lime); padding: 10px 16px; rotate: 7deg; font-size: 10px; }
.paperclip { position: absolute; width: 20px; height: 57px; top: -25px; right: 15px; z-index: 5; color: var(--ink); rotate: 12deg; pointer-events: none; }
.cover-clip { right: 20px; width: 22px; height: 64px; top: -30px; }
.note-clip { width: 24px; height: 70px; right: 30px; top: -27px; }
.note-page:after { content: ''; position: absolute; width: 34px; height: 34px; right: 0; bottom: 0; background: var(--sky); clip-path: polygon(100% 0,100% 100%,0 100%); }
.gallery-mat { position: relative; }
.gallery-mat:before { content: ''; width: 108px; height: 30px; position: absolute; top: -18px; left: 22px; border-radius: 10px 10px 0 0; background: var(--lavender); }
.reply-card { width: 190px; height: 82px; background: var(--white); position: relative; display: grid; place-items: center; margin: 0 auto 32px; border-radius: 7px; rotate: -5deg; box-shadow: var(--shadow); animation: card-float 8s ease-in-out infinite; }
.reply-card > span { font-size: 12px; }
.reply-card .paperclip { width: 16px; height: 45px; right: 18px; top: -20px; }

/* Hover hanya pada perangkat yang punya pointer, supaya tap HP tetap nyaman. */
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover { background: var(--ink); color: var(--white); translate: 0 -3px; box-shadow: 0 9px 22px #253a8210; }
  .answer-no:hover { translate: none; box-shadow: none; }
  .cover-board:hover .folder-back { rotate: 12deg; translate: 0 -6px; }
  .cover-board:hover .folder-mid { rotate: -7deg; translate: 0 -3px; }
  .cover-board:hover .folder-note { rotate: -4deg; translate: 0 -5px; }
  .cover-board:hover .cover-photo { rotate: 5deg; translate: 0 -6px; }
  .polaroid:hover, .gallery-mat:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 18px 38px #253a8212; }
  .polaroid:hover img { transform: scale(1.025); }
}
@keyframes arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes leave { to { opacity: 0; transform: translateY(-6px); } }
@keyframes photo-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (max-width: 900px) and (min-width: 701px) {
  .screen { padding: 32px 24px; }.cover-layout,.sender-layout,.gallery .screen-content { column-gap: 35px; }
  
  .sender-stack .polaroid { width: 165px; }.sender-stack .polaroid:nth-child(2) { top: 140px; }
}
@media (max-width: 700px) {
  body { padding: 0; }.story { height: 100svh; min-height: 420px; max-height: none; }
  .screen { padding: calc(30px + env(safe-area-inset-top)) 25px calc(30px + env(safe-area-inset-bottom)); align-items: flex-start; }.screen-content { max-width: 430px; }
  h1,h2 { font-size: 29px; line-height: 1.4; letter-spacing: -.9px; margin-bottom: 15px; }.eyebrow { font-size: 10px; margin-bottom: 16px; }
  .cover-layout { display: flex; flex-direction: column; gap: 22px; }.cover-copy { display: contents; }
  .cover-copy .eyebrow { order: 0; margin: 0; }
  .cover-copy h1 { order: 2; text-align: center; margin: 0; font-size: 27px; }.cover-copy .sub { order: 3; text-align: center; margin: 0; font-size: 12px; }
  .cover-copy .button { order: 4; width: 100%; }.cover-signature { order: 5; margin: -7px 0 0; font-size: 10px; }
  .sender-layout { grid-template-columns: 1fr; grid-template-areas: 'heading' 'art' 'copy' 'action'; gap: 22px; }.scene-heading { text-align: center; }.sender-stack { min-height: 295px; }
  .sender-stack .polaroid { width: 145px; top: 6px; left: 12px; }.sender-stack .polaroid:nth-child(2) { top: 60px; right: 12px; }.stack-note { left: 12px; bottom: 0; font-size: 10px; }
  .sender-captions p { font-size: 12px; margin-bottom: 12px; }.sender-layout > .button { width: 100%; }.photo-number { font-size: 9px; margin-top: 9px; }
  .note-page { padding: 32px 24px; }.intro h2 { padding-top: 30px; }.intro-copy { font-size: 16px; line-height: 1.9; }.intro .button { width: 100%; }
  .gallery .screen-content { grid-template-columns: 1fr; grid-template-areas: 'label' 'title' 'art' 'caption' 'progress' 'action'; text-align: center; }.gallery h2 { margin-bottom: 26px; }
  .gallery-mat { width: min(100% - 30px, 260px); padding: 12px; margin-bottom: 26px; }.gallery-frame { width: 100%; }
  .gallery-caption { font-size: 15px; line-height: 1.8; margin-bottom: 15px; }.gallery-progress { margin-bottom: 16px; }.gallery .button { width: 100%; }
  .confession { border-radius: 0; }.confession .screen-content { padding-bottom: 70px; }.confession-copy { font-size: 23px; min-height: 260px; }.confession .button { width: 100%; }
  .question h2 { font-size: 29px; }
}
@media (max-width: 360px) { .screen { padding-left: 20px; padding-right: 20px; }.cover-copy h1 { font-size: 25px; }.sender-stack .polaroid { width: 132px; left: 8px; }.sender-stack .polaroid:nth-child(2) { right: 8px; } }
@media (max-width: 900px) and (min-width: 701px) {
  .cover-board { height: 390px; }.folder-note { padding: 20px; min-height: 175px; }.folder-note > p { font-size: 23px; }.folder-stamp { font-size: 9px; padding: 8px 12px; }
}
@media (max-width: 700px) {
  .cover-board { order: 1; width: min(100%, 340px); height: 330px; }
  .folder-layer:before { width: 99px; top: -22px; height: 29px; left: 18px; }.folder-name { font-size: 9px; top: -16px; left: 35px; }
  .folder-note { padding: 18px; min-height: 155px; }.folder-note > span { font-size: 8px; }.folder-note > p { font-size: 22px; margin: 12px 0 15px; }
  .folder-stamp { font-size: 8px; padding: 8px 11px; bottom: 5%; }.cover-photo { padding: 6px; }
  .cover-clip { width: 18px; height: 53px; top: -25px; }.paperclip { width: 17px; height: 48px; top: -22px; }
  .sender-stack { margin-top: 12px; }.sender-stack:before { top: -18px; width: 98px; height: 25px; }
  .gallery-mat:before { width: 85px; height: 26px; top: -17px; }
  .note-clip { width: 20px; height: 60px; top: -23px; }
  .reply-card { margin-bottom: 25px; width: 170px; height: 74px; }
}
@media (max-width: 360px) { .cover-board { height: 295px; }.folder-note { min-height: 140px; padding: 16px; }.folder-note > p { font-size: 20px; }.folder-stamp { font-size: 7px; padding: 7px 9px; } }

/* Lima halaman Tentang kamu: masing-masing komposisi sendiri. */
body[data-scene="3"][data-thought="0"], body[data-scene="3"][data-thought="4"] { background: var(--canvas); }
body[data-scene="3"][data-thought="1"] { background: #FBF0F4; }
body[data-scene="3"][data-thought="2"] { background: #FAF8EE; }
body[data-scene="3"][data-thought="3"] { background: #F2EDFA; }
.gallery .screen-content { display: block; max-width: 1030px; grid-template: none; text-align: left; }
#gallery-slide { display: block; }
.thought-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; animation: arrive .8s ease both; }
.thought-copy { min-width: 0; }
.gallery .thought-copy h2 { font-size: clamp(29px,3.2vw,43px); line-height: 1.35; letter-spacing: -1.4px; margin-bottom: 23px; max-width: 450px; }
.gallery .thought-copy .eyebrow { display: inline-block; font-size: 10px; background: var(--white); border: 1px solid #E3DBEA; padding: 7px 13px; border-radius: 25px; letter-spacing: .2px; margin-bottom: 19px; }
.thought-text { font-size: 14px; line-height: 1.95; margin: 0; max-width: 450px; }
.thought-art { position: relative; width: 100%; max-width: 390px; min-width: 0; height: 420px; justify-self: center; }
.thought-art .gallery-frame { position: absolute; touch-action: pan-y; transition: rotate .6s ease, translate .6s ease; }
.thought-art .photo-slot { background: var(--sky); }
.thought-art .placeholder { font-size: 11px; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
.gallery-controls .gallery-progress { margin: 0; font-size: 10px; }
.gallery-controls .button { width: 210px; }
/* 01: Polaroid editorial dengan tepi lilac. */
.editorial-mat { position: absolute; width: 80%; height: 95%; left: 9%; top: 0; border-radius: 11px; background: var(--lavender); rotate: -5deg; }
.editorial-photo { position: absolute; width: auto; inset: 18px 18px 35px; background: var(--white); padding: 9px; border-radius: 6px; }
.editorial-photo .photo-slot { height: 100%; aspect-ratio: auto; border-radius: 3px; }
.paper-label { position: absolute; bottom: 0; right: 0; background: var(--white); border-radius: 20px; padding: 11px 18px; rotate: 4deg; font-size: 11px; box-shadow: var(--shadow); }
/* 02: Foto terselip di antara bubble isi pikiran. */
.thought-2 .thought-art, .thought-5 .thought-art { order: 2; }
.thought-2 .thought-copy, .thought-5 .thought-copy { order: 1; }
.message-photo { width: min(77%,255px); top: 3px; right: 21px; padding: 10px; background: var(--white); border-radius: 28px; rotate: 7deg; box-shadow: var(--shadow); }
.message-photo .photo-slot { border-radius: 20px; }
.thought-bubble { position: absolute; padding: 17px 20px; border-radius: 22px; font-size: 12px; line-height: 1.6; max-width: 245px; box-shadow: var(--shadow); }
.bubble-one { left: 0; bottom: 106px; background: var(--white); border-bottom-left-radius: 6px; rotate: -4deg; }
.bubble-two { right: 0; bottom: 26px; background: var(--pink); border-bottom-right-radius: 6px; rotate: 3deg; }
/* 03: Potret lengkung, lingkaran kuning, dan label kecil. */
.portrait-disc { position: absolute; width: 94%; aspect-ratio: 1; left: 3%; top: 22px; border-radius: 50%; background: var(--lime); }
.portrait-arch { width: min(72%,250px); top: 15px; left: 14%; background: var(--white); padding: 9px; border-radius: 145px 145px 30px 30px; overflow: hidden; }
.portrait-arch .photo-slot { border-radius: 140px 140px 25px 25px; }
.identity-strip { position: absolute; bottom: 29px; left: 6%; right: 6%; padding: 13px; background: var(--white); border-radius: 28px; text-align: center; font-size: 11px; rotate: -3deg; }
/* 04: Dua halaman diary, dengan foto dan catatan terpisah. */
.diary-page { position: absolute; top: 5px; left: 6%; width: 88%; height: 94%; border-radius: 10px; background: var(--pink); rotate: 4deg; }
.diary-photo { width: min(72%,255px); top: 25px; left: 7%; background: var(--white); padding: 10px 10px 24px; border-radius: 5px; rotate: -7deg; box-shadow: var(--shadow); }
.diary-photo .photo-slot { border-radius: 2px; }
.diary-note { position: absolute; right: 0; bottom: 17px; width: 210px; background: var(--white); padding: 18px; font-size: 11px; line-height: 1.6; rotate: 5deg; box-shadow: var(--shadow); }
.thought-4 .thought-copy { background: var(--white); padding: 30px; border-radius: 13px; rotate: 1deg; box-shadow: var(--shadow); }
/* 05: Folder penutup, foto besar, dan pesan yang sudah siap dikirim. */
.closing-folder { position: absolute; left: 4%; right: 2%; bottom: 15px; height: 64%; border-radius: 15px; background: var(--lavender); rotate: -4deg; }
.closing-folder:before { content: ''; width: 114px; height: 35px; background: inherit; border-radius: 12px 12px 0 0; position: absolute; left: 22px; top: -25px; }
.closing-photo { width: min(75%,270px); top: 0; right: 6%; background: var(--white); padding: 9px; border-radius: 6px; rotate: 6deg; box-shadow: var(--shadow); }
.closing-photo .photo-slot { border-radius: 3px; }
.closing-sticker { position: absolute; left: 0; bottom: 10px; background: var(--white); padding: 15px 20px; border-radius: 8px; font-size: 11px; rotate: -7deg; box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) { .thought-art:hover .gallery-frame { rotate: 0deg; translate: 0 -4px; }.thought-art:hover img { transform: scale(1.025); } }
@media (max-width: 900px) and (min-width: 701px) { .thought-layout { gap: 30px; }.thought-art { height: 380px; }.thought-text { font-size: 13px; }.thought-4 .thought-copy { padding: 23px; }.gallery .thought-copy h2 { font-size: 31px; }.identity-strip { bottom: 15px; } }
@media (max-width: 700px) {
  .gallery .screen-content { max-width: 430px; text-align: left; }
  .thought-layout { grid-template-columns: 1fr; grid-template-areas: 'heading' 'art' 'text'; gap: 22px; }
  .thought-copy, .thought-4 .thought-copy { display: contents; }
  .thought-heading { grid-area: heading; text-align: left; }
  .gallery .thought-copy h2 { font-size: 27px; line-height: 1.4; letter-spacing: -.8px; margin: 0; }
  .gallery .thought-copy .eyebrow { font-size: 9px; margin-bottom: 12px; padding: 6px 11px; }
  .thought-text { grid-area: text; font-size: 13px; line-height: 1.9; max-width: none; }
  .thought-art { grid-area: art; width: min(100% - 10px,320px); height: 275px; }
  .gallery-controls { margin-top: 24px; gap: 12px; }.gallery-controls .button { width: 185px; max-width: 65%; font-size: 12px; padding-left: 18px; padding-right: 18px; }
  .editorial-mat { width: 67%; left: 16%; height: 95%; }.editorial-photo { inset: 12px 12px 28px; padding: 6px; }.paper-label { right: 6%; font-size: 9px; padding: 9px 13px; }
  .message-photo { width: 54%; right: 13%; padding: 7px; border-radius: 20px; }.message-photo .photo-slot { border-radius: 14px; }
  .thought-bubble { font-size: 10px; padding: 13px 17px; max-width: 200px; }.bubble-one { bottom: 59px; left: 2%; }.bubble-two { bottom: 5px; right: 2%; }
  .portrait-disc { width: 80%; left: 10%; top: 4px; }.portrait-arch { width: 57%; left: 21.5%; top: 0; padding: 7px; }.identity-strip { bottom: 0; left: 4%; right: 4%; font-size: 9px; padding: 11px; }
  .diary-page { height: 94%; width: 82%; left: 9%; }.diary-photo { width: 57%; left: 16%; top: 13px; padding: 7px 7px 17px; }.diary-note { width: 174px; right: 3%; bottom: 4px; font-size: 9px; padding: 13px; }
  .closing-folder { bottom: 4px; height: 64%; left: 7%; right: 5%; }.closing-photo { width: 59%; top: 0; right: 15%; padding: 7px; }.closing-sticker { left: 3%; bottom: 0; font-size: 9px; padding: 12px 15px; }
}
@media (max-width: 360px) { .thought-art { height: 250px; }.thought-text { font-size: 12px; }.gallery .thought-copy h2 { font-size: 25px; }.thought-bubble { font-size: 9px; }.bubble-one { bottom: 53px; }.identity-strip { font-size: 8px; }.gallery-controls .button { width: 167px; } }

/* Surat terakhir muncul dari amplop, dengan warna solid dan gerakan pelan. */
.gallery-controls { justify-content: flex-end; }
.confession-copy { white-space: pre-line; font-size: clamp(21px,2.5vw,28px); line-height: 1.8; }
.music-control { position: fixed; z-index: 10; top: 12px; right: 16px; min-height: 44px; border: 1px solid var(--lavender); border-radius: 24px; padding: 10px 17px; background: var(--white); color: var(--ink); font-size: 11px; transition: background .4s ease; }
.question { padding: 40px 25px; }
.question .screen-content { max-width: 950px; }
.question-composition { position: relative; padding: 25px 0 56px; isolation: isolate; }
.answer-letter { position: relative; z-index: 2; width: min(100% - 150px,660px); margin: 0 auto; padding: 38px 54px 28px; background: var(--white); border-radius: 12px 12px 28px 28px; box-shadow: 0 16px 50px #51475f0d; animation: letter-reveal 1.5s cubic-bezier(.2,.65,.3,1) both; }
.answer-letter .eyebrow { display: inline-block; padding: 8px 14px; border-radius: 30px; background: var(--sky); font-size: 10px; letter-spacing: .15px; margin-bottom: 23px; }
.question-lead { font-size: 18px; margin: 0 0 10px; color: var(--ink); }
.question .answer-letter h2 { font-size: clamp(32px,3.6vw,46px); line-height: 1.3; letter-spacing: -1.5px; font-weight: 500; margin: 0 auto 22px; max-width: 470px; }
.question-prelude { font-size: 13px; line-height: 1.9; max-width: 385px; margin: 0 auto; }
.question .answer-zone { width: min(100%,340px); height: 143px; margin-top: 27px; }
.question .answer-yes { background: var(--pink); font-size: 14px; font-weight: 500; min-height: 56px; border-radius: 16px; box-shadow: 0 7px 22px #f3d2de44; }
.question .answer-no { background: var(--white); min-height: 46px; border-color: #E4DAEE; font-size: 11px; }
.question .dodge-note { font-size: 10px; margin: 0; min-height: 27px; }
.envelope-back { position: absolute; z-index: 0; width: min(100% - 70px,740px); height: 290px; bottom: 0; left: 50%; translate: -50% 0; background: var(--lavender); border-radius: 24px; rotate: -3deg; }
.envelope-pocket { position: absolute; z-index: 1; bottom: -9px; left: 50%; translate: -50% 0; width: min(100% - 55px,755px); height: 208px; border-radius: 12px 12px 25px 25px; background: var(--pink); clip-path: polygon(0 0,50% 39%,100% 0,100% 100%,0 100%); rotate: -3deg; }
.letter-orbit { position: absolute; z-index: -1; border-radius: 50%; }
.orbit-lilac { width: 170px; height: 170px; top: 55px; left: 16px; background: var(--sky); }
.orbit-butter { width: 130px; height: 130px; bottom: 46px; right: 0; background: var(--lime); }
.love-note { position: absolute; z-index: 3; width: 150px; padding: 17px; font-size: 11px; line-height: 1.7; background: var(--white); border-radius: 7px; box-shadow: var(--shadow); animation: card-float 9s ease-in-out infinite; }
.love-note-left { top: 135px; left: 0; rotate: -9deg; }
.love-note-right { bottom: 80px; right: 0; rotate: 8deg; background: var(--lime); animation-delay: -4s; }
@keyframes letter-reveal { from { opacity: 0; translate: 0 22px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@media (hover: hover) and (pointer: fine) { .question .answer-yes:hover { background: var(--ink); }.music-control:hover { background: var(--sky); } }
@media (max-width: 900px) and (min-width: 701px) { .love-note { width: 115px; font-size: 10px; padding: 13px; }.answer-letter { width: min(100% - 120px,660px); padding-left: 35px; padding-right: 35px; } }
@media (max-width: 700px) {
  body.has-music .screen { padding-top: calc(72px + env(safe-area-inset-top)); }
  .music-control { top: calc(10px + env(safe-area-inset-top)); right: 13px; font-size: 10px; }
  .question { padding: 32px 16px 35px; }
  .question-composition { padding: 37px 0 49px; }
  .answer-letter { width: calc(100% - 14px); padding: 33px 23px 25px; border-radius: 12px 12px 22px 22px; }
  .answer-letter .eyebrow { font-size: 8px; margin-bottom: 21px; padding: 7px 12px; }
  .question-lead { font-size: 15px; margin-bottom: 12px; }
  .question .answer-letter h2 { font-size: 31px; letter-spacing: -.9px; margin-bottom: 22px; }
  .question-prelude { font-size: 12px; line-height: 1.9; }
  .question .answer-zone { margin-top: 24px; }
  .love-note { width: auto; max-width: 170px; font-size: 9px; padding: 9px 13px; }
  .love-note-left { top: 7px; left: 2px; rotate: -7deg; }
  .love-note-right { bottom: 9px; right: 0; rotate: 5deg; }
  .envelope-back { width: 100%; height: 230px; bottom: 3px; rotate: -2deg; }
  .envelope-pocket { width: 100%; height: 175px; bottom: 0; rotate: -2deg; }
  .orbit-lilac { width: 105px; height: 105px; top: 0; left: -9px; }
  .orbit-butter { width: 90px; height: 90px; right: -9px; bottom: 20px; }
}
@media (max-width: 360px) { .question .answer-letter h2 { font-size: 27px; }.answer-letter { padding-left: 17px; padding-right: 17px; }.question-prelude { font-size: 11px; } }

/* Foto Isla kedua dan keempat memakai frame horizontal. */
.gallery-frame .photo-slot.photo-landscape { aspect-ratio: 4/3; }
.thought-2 .message-photo { width: min(94%,365px); top: 24px; right: 3%; }
.thought-2 .bubble-one { bottom: 78px; }
.thought-2 .bubble-two { bottom: 9px; }
.thought-4 .diary-photo { width: min(92%,360px); top: 34px; left: 4%; }
.thought-4 .diary-note { bottom: 20px; }
@media (max-width: 900px) and (min-width: 701px) { .thought-2 .message-photo { top: 20px; }.thought-4 .diary-photo { top: 30px; } }
@media (max-width: 700px) {
  .thought-2 .thought-art { height: 290px; }
  .thought-2 .message-photo { width: 90%; right: 5%; top: 4px; }
  .thought-2 .bubble-one { bottom: 40px; left: 0; }
  .thought-2 .bubble-two { bottom: -2px; right: 0; }
  .thought-4 .thought-art { height: 305px; }
  .thought-4 .diary-page { top: 16px; height: 84%; }
  .thought-4 .diary-photo { width: 90%; left: 5%; top: 23px; }
  .thought-4 .diary-note { bottom: 8px; right: 2%; }
}
@media (max-width: 360px) { .thought-2 .thought-art { height: 267px; }.thought-4 .thought-art { height: 275px; } }

/* Back tetap mudah disentuh dan tidak menimpa isi surat. */
.story-back { position: absolute; top: 14px; left: 25px; z-index: 5; min-width: 72px; min-height: 44px; padding: 10px 18px; border: 1px solid #E4DAEE; border-radius: 25px; background: var(--white); color: var(--ink); font-size: 11px; transition: background .35s ease, translate .35s ease; }
.screen.has-back { padding-top: 80px; }
@media (hover: hover) and (pointer: fine) { .story-back:hover { background: var(--sky); translate: 0 -2px; } }
@media (max-width: 700px) { .story-back { top: calc(12px + env(safe-area-inset-top)); left: 20px; }.screen.has-back, body.has-music .screen.has-back { padding-top: calc(82px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }