:root{--wine:#7f3043;--wine2:#a64d60;--rose:#c87a86;--ink:#463638;--muted:#806d6b;--paper:#fffaf0;--paper2:#f3e6d5;--cream:#f6eee3;--line:#dfcdbd;--gold:#b08a55;--shadow:0 35px 80px rgba(58,28,31,.20);--display:'Manrope','DM Sans',sans-serif;--script:'Caveat',cursive}*{box-sizing:border-box}html{min-height:100%;background:#4f1c2d}body{margin:0;min-height:100vh;color:var(--ink);font-family:'Manrope','DM Sans',sans-serif;background:radial-gradient(circle at 50% 25%,#913d55 0,#641f35 45%,#421525 100%);overflow-x:hidden}.site-frame{min-height:100vh;position:relative;z-index:2;padding:30px 18px;display:grid;place-items:center}.paper-noise{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.ambient{position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.24}.ambient-a{width:480px;height:480px;background:#d88a9a;top:-220px;right:-150px}.ambient-b{width:420px;height:420px;background:#c2a06e;bottom:-240px;left:-160px}.floating-petals span{position:fixed;width:11px;height:18px;border-radius:100% 0 100% 0;background:#f0c3c8;opacity:.28;z-index:1;animation:petal 13s linear infinite}.floating-petals span:nth-child(1){left:8%;top:8%;animation-delay:-2s}.floating-petals span:nth-child(2){left:88%;top:12%;animation-delay:-8s}.floating-petals span:nth-child(3){left:16%;top:72%;animation-delay:-5s}.floating-petals span:nth-child(4){left:80%;top:70%;animation-delay:-11s}.floating-petals span:nth-child(5){left:52%;top:2%;animation-delay:-7s}.floating-petals span:nth-child(6){left:43%;top:82%;animation-delay:-1s}@keyframes petal{0%{transform:translate3d(0,0,0) rotate(20deg)}50%{transform:translate3d(28px,50px,0) rotate(140deg)}100%{transform:translate3d(-20px,110px,0) rotate(260deg);opacity:0}}.paper-card{position:relative;background:linear-gradient(135deg,rgba(255,251,241,.98),rgba(245,231,211,.98));border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow);overflow:hidden}.paper-card:before{content:"";position:absolute;inset:14px;border:1px solid rgba(127,48,67,.20);pointer-events:none}.paper-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.23) 50%,transparent 54%);opacity:.25}.tiny-cap{font-size:10px;letter-spacing:.27em;text-transform:uppercase;color:var(--wine);font-weight:600}.script-line{font-family:var(--script);font-size:27px;color:var(--wine2);margin:15px 0 8px}.letter-copy{font-family:var(--display);font-size:clamp(21px,2.1vw,27px);line-height:1.45;color:#665456;max-width:680px}.small-copy{font-size:19px;color:#8b7773}.ink-button{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 22px;border:1px solid var(--wine);background:var(--wine);color:#fff;text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 12px 28px rgba(127,48,67,.22);transition:transform .25s,box-shadow .25s,background .25s}.ink-button:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 17px 32px rgba(127,48,67,.28);background:#692437}.ink-button span{font-size:18px}.ink-button.small{padding:12px 17px;font-size:10px}.text-link{color:#f6ddd9;text-decoration:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:5px}.toast{position:fixed;z-index:30;top:22px;left:50%;transform:translateX(-50%);background:#2f1820;color:#fff;padding:11px 16px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:toast 4s forwards}@keyframes toast{0%,75%{opacity:1}100%{opacity:0;transform:translate(-50%,-12px)}}.page-enter{animation:pageIn .55s cubic-bezier(.2,.75,.2,1)}@keyframes pageIn{from{transform:translateY(10px) scale(.995)}to{transform:none}}
/* login */
.login-stage{width:min(1100px,100%);min-height:720px;position:relative;display:grid;place-items:center}.login-paper{width:min(560px,92vw);padding:62px 58px 50px;text-align:center;transform:rotate(-1deg);z-index:3}.login-paper h1{font-family:var(--display);font-size:clamp(48px,7vw,76px);line-height:.9;font-weight:600;margin:8px 0 20px;color:#4a3036}.login-paper h1 em{font-style:italic;color:var(--wine)}.login-paper .lead{font-family:var(--display);font-size:19px;color:#806d6b;line-height:1.45;max-width:390px;margin:0 auto 28px}.ornament{font-family:var(--display);color:var(--gold);font-size:22px}.login-form{display:grid;gap:13px;text-align:left;margin:25px auto 18px;max-width:390px}.login-form label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#755f5f}.login-form input{width:100%;margin-top:7px;padding:14px 15px;border:1px solid #d9c5b5;background:rgba(255,255,255,.55);font:14px 'DM Sans';color:var(--ink);outline:none}.login-form input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(200,122,134,.10)}.login-footer{font-family:var(--script);font-size:18px;color:#9a7d7a;margin-top:20px}.envelope-wrap{position:absolute;width:430px;height:340px;left:2%;bottom:90px;transform:rotate(-8deg);z-index:2}.envelope{position:absolute;width:320px;height:215px;left:40px;top:55px;background:#f0e4cb;box-shadow:0 25px 45px rgba(0,0,0,.22);overflow:hidden}.shadow-envelope{background:#321522;opacity:.35;transform:translate(16px,20px);filter:blur(4px)}.envelope:before,.envelope:after{content:"";position:absolute;inset:0;border-top:1px solid rgba(98,66,54,.25)}.envelope:after{clip-path:polygon(0 0,50% 58%,100% 0,100% 14%,50% 74%,0 14%);background:#e5d7bb}.envelope-flap{position:absolute;inset:0;background:#eee1c7;clip-path:polygon(0 0,100% 0,50% 55%);z-index:2}.seal{position:absolute;z-index:4;left:calc(50% - 18px);top:98px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#7f3043;color:#f5d8c9;font-family:var(--display);box-shadow:0 4px 12px rgba(73,29,42,.25)}.envelope-label{position:absolute;z-index:5;left:24px;top:18px;color:#7f3043;font-family:var(--script);font-size:17px;line-height:.85}.envelope-label strong{font-size:23px}.postcard{position:absolute;width:170px;height:128px;background:#fff8ee;right:5px;top:0;transform:rotate(12deg);box-shadow:0 12px 28px rgba(0,0,0,.18);padding:18px;color:#7f3043;font-family:var(--script);font-size:20px}.postcard:after{content:"";position:absolute;inset:10px;border:1px dashed #caa99d}.login-side-note{position:absolute;left:0;top:100px;color:#f2d7d2;font-family:var(--script);font-size:24px;transform:rotate(-8deg)}
/* opening */
.opening-stage{width:min(920px,100%);min-height:760px;position:relative;display:grid;place-items:center}.opening-paper{width:min(650px,94vw);min-height:590px;padding:76px 70px 65px;transform:rotate(.8deg)}.opening-paper h1{font-family:var(--display);font-size:clamp(58px,8vw,88px);line-height:.88;margin:8px 0 24px;font-weight:600}.opening-paper h1 em{color:var(--wine);font-style:italic}.floral-mark{font-family:var(--display);font-size:34px;color:var(--gold);margin:12px 0}.opening-paper .letter-copy{max-width:520px}.page-stamp{position:absolute;right:48px;bottom:40px;border:1px solid #b88973;color:#8e5b5c;padding:8px 10px;font-size:10px;letter-spacing:.12em;transform:rotate(-7deg)}.paper-tape{position:absolute;width:100px;height:27px;background:rgba(229,201,165,.65);box-shadow:0 1px 2px rgba(0,0,0,.08)}.tape-top{top:-10px;left:43%;transform:rotate(-3deg)}.scrap-note{position:absolute;font-family:var(--script);color:#f4d9d4;font-size:21px;z-index:2}.note-one{left:4%;top:22%;transform:rotate(-9deg)}.note-two{right:4%;bottom:23%;transform:rotate(8deg)}.bottom-caption{position:absolute;bottom:5px;color:#e9c9c5;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
/* letters */
.letter-stage{width:min(1050px,100%);min-height:790px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.chapter-counter{position:absolute;right:5%;top:2%;color:#f3d5d1;font-size:12px;letter-spacing:.16em}.chapter-counter span{opacity:.5;margin:0 5px}.sheet-stack{width:min(800px,94vw);min-height:590px;position:relative;perspective:1500px}.sheet{position:absolute;inset:0}.back-sheet{background:#eee0cb;border:1px solid rgba(107,67,55,.15);box-shadow:0 22px 45px rgba(30,10,18,.22);transform:rotate(var(--stack-angle,1deg)) translate(calc(var(--stack-index,1) * 7px),calc(var(--stack-index,1) * 7px));transition:transform .4s}.sheet-2{background:#ead7c1}.sheet-3{background:#e5cfb5}.main-sheet{position:absolute;background:linear-gradient(135deg,#fffaf0,#f4e6d3);box-shadow:0 30px 65px rgba(31,13,20,.28);border:1px solid rgba(125,80,64,.18);min-height:590px;transition:transform .25s ease}.main-sheet:before{content:"";position:absolute;inset:16px;border:1px solid rgba(127,48,67,.18)}.sheet-inner{position:relative;z-index:2;padding:70px 78px 62px;min-height:540px}.sheet-inner h1{font-family:var(--display);font-size:clamp(50px,6vw,76px);line-height:.9;margin:8px 0 25px;font-weight:600;color:#4a3438}.sheet-inner h1 em{color:var(--wine);font-style:italic}.divider{font-family:var(--display);color:var(--gold);font-size:26px;margin:22px 0}.sheet-footer{position:absolute;left:70px;right:70px;bottom:28px;z-index:2;display:flex;justify-content:space-between;color:#987f79;font-size:9px;text-transform:uppercase;letter-spacing:.18em}.page-controls{width:min(800px,94vw);display:flex;align-items:center;justify-content:space-between;margin-top:28px}.note-left{left:0;top:17%;transform:rotate(-10deg)}.note-right{right:0;bottom:18%;transform:rotate(8deg)}.photo-layout{display:grid;grid-template-columns:280px 1fr;gap:55px;align-items:center}.polaroid-photo{background:#fffdf7;padding:13px 13px 42px;box-shadow:0 18px 35px rgba(65,40,34,.18);transform:rotate(-5deg);position:relative}.polaroid-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:saturate(.88) sepia(.06)}.polaroid-photo span{position:absolute;bottom:10px;left:15px;font:17px var(--script);color:#73595a}.photo-copy h1{font-size:55px}.admire-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.admire-grid div{border-top:1px solid var(--line);padding:14px 7px}.admire-grid span{display:block;font-size:10px;color:var(--wine);letter-spacing:.16em;margin-bottom:10px}.admire-grid strong{font-family:var(--display);font-size:19px;line-height:1.2;font-weight:600}.memory-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.memory-photo{position:relative;background:#f8f1e4;padding:12px 12px 15px;box-shadow:0 20px 38px rgba(59,34,32,.18);transform:rotate(2deg)}.memory-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.86) contrast(.98)}.photo-corner{position:absolute;right:-12px;top:-12px;background:#f0d9b9;color:#7f3043;width:38px;height:38px;display:grid;place-items:center;transform:rotate(11deg);box-shadow:0 5px 14px rgba(0,0,0,.12)}.memory-note h1{font-size:55px}.hand-note{font:22px var(--script);color:var(--wine2);transform:rotate(-3deg);margin-top:20px}.emphasis-copy{font-style:italic;color:#7f3043}
/* question */
.final-stage,.closing-stage,.accepted-stage{width:min(980px,100%);min-height:760px;display:grid;place-items:center;position:relative}.final-letter{width:min(780px,95vw);padding:72px 75px 66px;text-align:center;transform:rotate(-.5deg)}.final-letter h1{font-family:var(--display);font-size:clamp(54px,7vw,86px);line-height:.86;margin:12px 0 24px;font-weight:600}.final-letter h1 em{font-style:italic;color:var(--wine)}.final-seal{margin:10px auto 12px;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#7f3043;color:#f5d8c9;font:29px var(--display);box-shadow:0 8px 18px rgba(127,48,67,.25)}.final-letter .letter-copy{margin:0 auto}.final-rule{font:28px var(--display);color:var(--gold);margin:25px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:28px}.answer-grid button{min-height:110px;border:1px solid var(--line);cursor:pointer;transition:.3s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.answer-grid button span{font:38px var(--display);font-weight:600}.answer-grid button small{font-size:9px;text-transform:uppercase;letter-spacing:.12em}.answer-no{background:rgba(255,255,255,.35);color:#725f5e}.answer-no:hover{transform:translateY(-4px) rotate(-1deg);background:#f8eee4}.answer-yes{background:#7f3043;color:white;box-shadow:0 16px 30px rgba(127,48,67,.22)}.answer-yes:hover{transform:translateY(-5px) rotate(1deg);background:#6e2639}.final-flower{position:absolute;top:5%;left:8%;color:#efc5c7;font:38px var(--display)}.final-footnote{position:absolute;bottom:8px;color:#ebceca;font:18px var(--script)}
/* endings */
.closing-letter,.accepted-letter{width:min(680px,94vw);padding:72px 68px 62px;text-align:center}.closing-flower{font:38px var(--display);color:var(--gold);margin:10px}.closing-letter h1,.accepted-letter h1{font:600 clamp(58px,8vw,86px) var(--display);line-height:.86;margin:8px 0 24px}.closing-letter h1 em,.accepted-letter h1 em{color:var(--wine);font-style:italic}.closing-letter .letter-copy,.accepted-letter .letter-copy{margin:0 auto}.accepted-stage{overflow:hidden}.accepted-letter{transform:rotate(.5deg);z-index:3}.heart-orbit{position:absolute;width:500px;height:500px;animation:spin 20s linear infinite;color:#f3b6bd;opacity:.45}.heart-orbit span,.heart-orbit i,.heart-orbit b{position:absolute;font-style:normal}.heart-orbit span{left:4%;top:50%;font:75px var(--display)}.heart-orbit i{right:8%;top:17%;font:30px var(--display)}.heart-orbit b{right:5%;bottom:18%;font:55px var(--display)}@keyframes spin{to{transform:rotate(360deg)}}.accepted-rule{font:26px var(--display);color:var(--gold);margin:20px}.accepted-date{display:inline-block;margin-top:20px;padding:8px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.13em;color:#92736f}.accepted-signature{font:24px var(--script);color:var(--wine2);margin-top:18px}.petal-burst{position:absolute;bottom:3%;color:#f1c1c5;font:24px var(--display);animation:rise 4s ease-in-out infinite}@keyframes rise{0%,100%{transform:translateY(5px);opacity:.5}50%{transform:translateY(-18px);opacity:1}}
@media(max-width:760px){.site-frame{padding:14px 10px}.login-stage,.opening-stage,.letter-stage,.final-stage,.closing-stage,.accepted-stage{min-height:calc(100vh - 28px)}.envelope-wrap,.login-side-note{display:none}.login-paper{padding:58px 34px 45px}.opening-paper{padding:64px 38px 60px;min-height:560px}.scrap-note{display:none}.sheet-stack{min-height:690px}.main-sheet{min-height:690px}.sheet-inner{padding:62px 34px 65px}.sheet-footer{left:34px;right:34px}.photo-layout,.memory-layout{grid-template-columns:1fr;gap:28px}.polaroid-photo{width:65%;margin:auto}.photo-copy h1,.memory-note h1{font-size:50px}.admire-grid{grid-template-columns:1fr;gap:8px}.page-controls{padding:0 3vw}.answer-grid{grid-template-columns:1fr}.final-letter,.closing-letter,.accepted-letter{padding:60px 34px 50px}.final-letter h1{font-size:54px}.chapter-counter{right:4%;top:0}.note-left,.note-right{display:none}.heart-orbit{width:330px;height:330px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}

/* V4 polish: clean sans typography + physical page-turn */
body{font-family:'Manrope','DM Sans',sans-serif}
.letter-copy,.login-paper .lead{font-family:'Manrope','DM Sans',sans-serif;font-size:clamp(16px,1.55vw,19px);line-height:1.75;letter-spacing:-.01em}
.sheet-inner h1,.opening-paper h1,.login-paper h1,.final-letter h1,.closing-letter h1,.accepted-letter h1{font-family:'Manrope','DM Sans',sans-serif;letter-spacing:-.055em;font-style:normal}
.sheet-inner h1 em,.opening-paper h1 em,.login-paper h1 em,.final-letter h1 em,.closing-letter h1 em,.accepted-letter h1 em{font-style:normal}
.script-line,.login-footer,.envelope-label,.postcard,.scrap-note,.polaroid-photo span,.hand-note{font-family:'Caveat',cursive}
.admire-grid strong{font-family:'Manrope','DM Sans',sans-serif;font-size:16px;line-height:1.5}
.divider,.floral-mark,.ornament,.final-rule,.closing-flower,.accepted-rule,.heart-orbit span,.heart-orbit i,.heart-orbit b,.petal-burst,.final-seal,.seal{font-family:'Manrope','DM Sans',sans-serif}
.sheet-stack{perspective:1800px;transform-style:preserve-3d}
.main-sheet{transform-style:preserve-3d;backface-visibility:hidden;transform-origin:left center;will-change:transform;transition:transform .2s ease}
.main-sheet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(95,49,38,.08),transparent 18%,rgba(255,255,255,.35) 50%,transparent 82%);opacity:.32;pointer-events:none;backface-visibility:hidden}
.main-sheet.turn-next{animation:turnNext .72s cubic-bezier(.72,.03,.25,1) forwards}
.main-sheet.turn-prev{transform-origin:right center;animation:turnPrev .72s cubic-bezier(.72,.03,.25,1) forwards}
.main-sheet.page-arrive-next{transform-origin:right center;animation:arriveNext .72s cubic-bezier(.2,.78,.2,1) both}
.main-sheet.page-arrive-prev{transform-origin:left center;animation:arrivePrev .72s cubic-bezier(.2,.78,.2,1) both}
@keyframes turnNext{0%{transform:rotateY(0deg) translateX(0) rotateZ(0)}45%{transform:rotateY(-82deg) translateX(8px) rotateZ(-1deg)}100%{transform:rotateY(-178deg) translateX(18px) rotateZ(-2deg)}}
@keyframes turnPrev{0%{transform:rotateY(0deg) translateX(0) rotateZ(0)}45%{transform:rotateY(82deg) translateX(-8px) rotateZ(1deg)}100%{transform:rotateY(178deg) translateX(-18px) rotateZ(2deg)}}
@keyframes arriveNext{0%{transform:rotateY(92deg) translateX(24px) rotateZ(2deg)}55%{transform:rotateY(28deg) translateX(7px) rotateZ(.5deg)}100%{transform:rotateY(0) translateX(0) rotateZ(0)}}
@keyframes arrivePrev{0%{transform:rotateY(-92deg) translateX(-24px) rotateZ(-2deg)}55%{transform:rotateY(-28deg) translateX(-7px) rotateZ(-.5deg)}100%{transform:rotateY(0) translateX(0) rotateZ(0)}}
.page-controls{margin-top:22px}
.page-controls .ink-button{letter-spacing:.04em;text-transform:none;font-size:11px;border-radius:2px}
.page-controls .text-link{text-transform:none;letter-spacing:.05em}
.sheet-inner{padding:72px 82px 68px}
.sheet-footer{text-transform:none;letter-spacing:.08em}
.tiny-cap{letter-spacing:.2em}
.answer-grid button span{font-family:'Manrope','DM Sans',sans-serif}
.final-letter{padding:76px 82px 70px}
.final-letter h1{letter-spacing:-.06em}
@media(max-width:760px){.sheet-inner{padding:62px 34px 68px}.letter-copy,.login-paper .lead{font-size:15px;line-height:1.7}.sheet-inner h1{letter-spacing:-.045em}.main-sheet.turn-next,.main-sheet.turn-prev{animation-duration:.62s}.main-sheet.page-arrive-next,.main-sheet.page-arrive-prev{animation-duration:.62s}}
@media(prefers-reduced-motion:reduce){.main-sheet.turn-next,.main-sheet.turn-prev,.main-sheet.page-arrive-next,.main-sheet.page-arrive-prev{animation:none!important;transform:none!important}}

/* V5 — natural Indonesian copy, cleaner typography, and a true physical page turn */
:root{--display:'Manrope','DM Sans',sans-serif;--script:'Caveat',cursive}
body{font-family:var(--display);scroll-behavior:smooth}
button,a{font-family:var(--display)}
.ink-button,.answer-grid button,.text-link{text-transform:uppercase!important}
.ink-button{letter-spacing:.07em!important}
.text-link{letter-spacing:.1em!important}
.envelope-label{left:20px;top:auto;bottom:15px;line-height:.9;transform:rotate(-2deg)}
.envelope-label strong{font-size:21px}
.scrap-note{z-index:6;white-space:nowrap;pointer-events:none}
.note-left{left:max(12px,calc(50% - 650px));top:20%;transform:rotate(-10deg)}
.note-right{right:max(12px,calc(50% - 650px));bottom:20%;transform:rotate(8deg)}
.sheet-stack{overflow:visible;transform-style:preserve-3d}
.main-sheet{z-index:4;transform:rotate(var(--tilt-x,0deg)) translate(var(--tilt-y,0),var(--tilt-z,0));transition:transform .28s ease,box-shadow .28s ease;transform-origin:left center}
.main-sheet::before{z-index:1}
.main-sheet::after{z-index:5}
.incoming-sheet{z-index:3!important;transform-style:preserve-3d;backface-visibility:hidden;pointer-events:none;transform-origin:right center;transform:rotateY(90deg) translateX(26px) rotateZ(2deg);}
.incoming-prev{transform-origin:left center;transform:rotateY(-90deg) translateX(-26px) rotateZ(-2deg)}
.incoming-sheet.incoming-ready{animation:paperUnderNext .82s cubic-bezier(.2,.78,.2,1) forwards}
.incoming-sheet.incoming-prev.incoming-ready{animation:paperUnderPrev .82s cubic-bezier(.2,.78,.2,1) forwards}
.main-sheet.turn-out-next{animation:paperTurnNext .82s cubic-bezier(.68,.04,.24,1) forwards;transform-origin:left center}
.main-sheet.turn-out-prev{animation:paperTurnPrev .82s cubic-bezier(.68,.04,.24,1) forwards;transform-origin:right center}
@keyframes paperTurnNext{
  0%{transform:rotateY(0) translate3d(0,0,0) rotateZ(0);box-shadow:0 30px 65px rgba(31,13,20,.28)}
  38%{transform:rotateY(-48deg) translate3d(7px,0,0) rotateZ(-.7deg);box-shadow:20px 30px 55px rgba(31,13,20,.22)}
  72%{transform:rotateY(-132deg) translate3d(20px,0,0) rotateZ(-1.6deg);box-shadow:38px 25px 48px rgba(31,13,20,.14)}
  100%{transform:rotateY(-180deg) translate3d(25px,0,0) rotateZ(-2deg);box-shadow:0 10px 20px rgba(31,13,20,.05)}
}
@keyframes paperTurnPrev{
  0%{transform:rotateY(0) translate3d(0,0,0) rotateZ(0)}
  38%{transform:rotateY(48deg) translate3d(-7px,0,0) rotateZ(.7deg)}
  72%{transform:rotateY(132deg) translate3d(-20px,0,0) rotateZ(1.6deg)}
  100%{transform:rotateY(180deg) translate3d(-25px,0,0) rotateZ(2deg)}
}
@keyframes paperUnderNext{
  0%{transform:rotateY(90deg) translateX(26px) rotateZ(2deg)}
  45%{transform:rotateY(28deg) translateX(7px) rotateZ(.5deg)}
  100%{transform:rotateY(0) translateX(0) rotateZ(0)}
}
@keyframes paperUnderPrev{
  0%{transform:rotateY(-90deg) translateX(-26px) rotateZ(-2deg)}
  45%{transform:rotateY(-28deg) translateX(-7px) rotateZ(-.5deg)}
  100%{transform:rotateY(0) translateX(0) rotateZ(0)}
}
.sheet-inner{position:relative;z-index:2}
.sheet-footer{font-family:var(--display);text-transform:none;letter-spacing:.03em}
.photo-caption{position:absolute;left:12px;right:12px;bottom:-43px;margin:0;text-align:center;transform:rotate(2deg);font-size:22px;color:var(--wine2);white-space:nowrap}
.memory-photo{margin-bottom:36px}
.special-final-stage{min-height:800px}
.special-final-letter{position:relative;padding:82px 86px 78px;transform:rotate(-.35deg);box-shadow:0 38px 90px rgba(31,13,20,.34)}
.special-final-letter::before{inset:22px;border-color:rgba(127,48,67,.25)}
.special-final-letter::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.55),transparent 45%),linear-gradient(135deg,transparent 0 47%,rgba(255,255,255,.3) 50%,transparent 53%);opacity:.35}
.special-final-letter .letter-copy{max-width:560px}
.special-final-letter .answer-grid{position:relative;z-index:3}
.final-spark{position:absolute;color:#f3c3c8;font-family:var(--display);z-index:1;animation:floatSpark 5s ease-in-out infinite}
.spark-a{top:13%;left:15%;font-size:34px}
.spark-b{right:13%;top:24%;font-size:42px;animation-delay:-1.5s}
.spark-c{bottom:17%;left:18%;font-size:24px;animation-delay:-3s}
@keyframes floatSpark{0%,100%{transform:translateY(0) rotate(0);opacity:.65}50%{transform:translateY(-10px) rotate(8deg);opacity:1}}
.answer-grid button span{font-weight:700;letter-spacing:.08em}
.answer-grid button{font-size:12px}
.login-footer{font-family:var(--script);font-size:21px}
@media(max-width:760px){
  .note-left,.note-right{display:none}
  .sheet-stack{min-height:690px;overflow:visible}
  .main-sheet,.incoming-sheet{transform-origin:center center}
  .photo-caption{font-size:19px;bottom:-38px}
  .memory-photo{margin-bottom:32px}
  .special-final-letter{padding:62px 34px 54px}
  .special-final-stage{min-height:calc(100vh - 28px)}
}
@media(prefers-reduced-motion:reduce){.incoming-sheet.incoming-ready,.main-sheet.turn-out-next,.main-sheet.turn-out-prev{animation:none!important}.incoming-sheet{transform:none!important}.main-sheet{transition:none!important}}

/* V5.1 — refined copy hierarchy and final reveal */
.scrap-note{color:#f2c7ce;text-shadow:0 2px 10px rgba(52,13,25,.14)}
.note-left{left:max(8px,calc(50% - 650px));}
.note-right{right:max(8px,calc(50% - 650px));}
.final-reveal-layer{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;opacity:1;transform:translateY(18px) scale(.97);transition:transform .82s cubic-bezier(.2,.78,.2,1),opacity .82s ease}
.final-reveal-layer.ready{transform:translateY(0) scale(1)}
.final-reveal-layer .final-letter{width:min(780px,95vw);max-height:90vh;overflow:auto}
.final-reveal-layer .final-letter::after{z-index:0}
.final-reveal-layer .final-letter>*{position:relative;z-index:2}
.main-sheet.turn-out-next{z-index:12}
@media(max-width:760px){.note-left,.note-right{display:none}.final-reveal-layer .final-letter{width:94vw}}
.closing-letter .ink-button{min-width:210px}
.closing-letter .ink-button,.answer-grid button,.page-controls .ink-button,.page-controls .text-link{font-weight:700}


/* V6 — one-sheet-at-a-time book turn */
.letter-stage{perspective:2200px}
.sheet-stack{position:relative;transform-style:preserve-3d;perspective:2200px;isolation:isolate}
.main-sheet{z-index:5;transform-origin:left center;backface-visibility:hidden;will-change:transform;transition:box-shadow .25s ease}
.main-sheet.book-turn-next{animation:bookTurnNext .98s cubic-bezier(.77,0,.18,1) forwards;pointer-events:none}
.main-sheet.book-turn-prev{animation:bookTurnPrev .98s cubic-bezier(.77,0,.18,1) forwards;transform-origin:right center;pointer-events:none}
.under-sheet{z-index:2!important;transform:none!important;animation:none!important;backface-visibility:hidden;pointer-events:none}
.under-sheet-prev{z-index:2!important}
@keyframes bookTurnNext{
  0%{transform:rotateY(0deg) translateZ(0) rotateZ(0deg);box-shadow:0 30px 65px rgba(31,13,20,.28)}
  18%{transform:rotateY(-10deg) translateZ(2px) rotateZ(-.12deg);box-shadow:4px 30px 62px rgba(31,13,20,.28)}
  50%{transform:rotateY(-88deg) translateZ(10px) rotateZ(-.45deg);box-shadow:18px 25px 50px rgba(31,13,20,.20)}
  78%{transform:rotateY(-150deg) translateZ(5px) rotateZ(-.7deg);box-shadow:12px 18px 34px rgba(31,13,20,.10)}
  100%{transform:rotateY(-180deg) translateZ(0) rotateZ(-.8deg);box-shadow:0 8px 18px rgba(31,13,20,.04)}
}
@keyframes bookTurnPrev{
  0%{transform:rotateY(0deg) translateZ(0) rotateZ(0deg);box-shadow:0 30px 65px rgba(31,13,20,.28)}
  18%{transform:rotateY(10deg) translateZ(2px) rotateZ(.12deg);box-shadow:-4px 30px 62px rgba(31,13,20,.28)}
  50%{transform:rotateY(88deg) translateZ(10px) rotateZ(.45deg);box-shadow:-18px 25px 50px rgba(31,13,20,.20)}
  78%{transform:rotateY(150deg) translateZ(5px) rotateZ(.7deg);box-shadow:-12px 18px 34px rgba(31,13,20,.10)}
  100%{transform:rotateY(180deg) translateZ(0) rotateZ(.8deg);box-shadow:0 8px 18px rgba(31,13,20,.04)}
}
/* Notes always sit outside the paper bounds. */
.letter-stage .note-left{left:calc(50% - 650px);top:19%;transform:translateX(-100%) rotate(-10deg)}
.letter-stage .note-right{right:calc(50% - 650px);bottom:19%;transform:translateX(100%) rotate(8deg)}
.opening-stage .note-one,.opening-stage .note-two{display:none}
/* The question title uses normal Indonesian title capitalization. */
.special-final-letter h1{line-height:.95}
@media(max-width:1050px){
  .letter-stage .note-left{left:calc(50% - 520px)}
  .letter-stage .note-right{right:calc(50% - 520px)}
}
@media(max-width:760px){
  .letter-stage .note-left,.letter-stage .note-right{display:none}
  .main-sheet.book-turn-next,.main-sheet.book-turn-prev{animation-duration:.86s}
}
@media(prefers-reduced-motion:reduce){
  .main-sheet.book-turn-next,.main-sheet.book-turn-prev{animation:none!important;transform:none!important}
}


/* V6 final polish — the final question is also revealed as the next physical sheet. */
.final-reveal-layer{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:1;
  transform:none;
  transition:none;
}
.final-reveal-layer.ready{opacity:1;transform:none}
.final-reveal-layer .final-letter{width:min(800px,94vw);transform:rotate(-.2deg);}
.final-reveal-layer .final-letter::after{z-index:0}
.final-reveal-layer .final-letter>*{position:relative;z-index:2}
@media(max-width:760px){.final-reveal-layer .final-letter{width:94vw}}