:root{--scroll-paper:#d8b676;--scroll-ink:#3b2817;--scroll-wood:#49301e;--scroll-dark:#170e08}
dialog.memory-book-dialog{position:fixed!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100dvw!important;min-width:100dvw!important;max-width:100dvw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:radial-gradient(circle at 50% 20%,rgba(97,67,39,.23),transparent 42%),linear-gradient(155deg,#21150d,#090604)!important;color:#eee;overflow:hidden!important}.memory-book-dialog::backdrop{background:#090604}
.memory-scroll-reader{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;padding:clamp(8px,2vw,20px);overflow:hidden}
.memory-scroll-head{flex:none;width:min(960px,100%);height:54px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:8px}.memory-scroll-head>div{text-align:center}.memory-scroll-head strong,.memory-scroll-head small{display:block}.memory-scroll-head strong{font-size:clamp(17px,2.1vw,25px);font-weight:500;color:#d9bd92}.memory-scroll-head small{margin-top:3px;color:#826b50;font-size:9px}.memory-scroll-head button{width:40px;height:40px;border:1px solid rgba(218,180,126,.14);border-radius:50%;background:rgba(255,255,255,.025);color:#c9ad83;font-size:22px}
.memory-scroll-stage{position:relative;flex:1;min-height:0;width:min(930px,100%);display:grid;place-items:center;padding:10px;border-radius:22px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,255,255,.01) 9px,rgba(0,0,0,.025) 11px),repeating-linear-gradient(90deg,rgba(95,58,28,.035) 0,rgba(45,24,11,.045) 55px,rgba(106,65,31,.03) 110px),linear-gradient(145deg,var(--scroll-wood),var(--scroll-dark));box-shadow:0 30px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.04)}.memory-scroll-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,rgba(255,220,165,.06),transparent 65%)}
.memory-scroll{position:relative;z-index:1;width:min(590px,88vw);height:min(620px,calc(100dvh - 175px));min-height:360px;perspective:1800px;transform-style:preserve-3d;touch-action:pan-y;filter:drop-shadow(0 24px 18px rgba(0,0,0,.4));outline:none}.memory-sheet{position:absolute;left:7%;right:7%;top:54px;bottom:54px;overflow:hidden;transform-style:preserve-3d;clip-path:inset(0);transition:clip-path .72s cubic-bezier(.22,.72,.15,1),filter .5s ease}.memory-paper{position:absolute;inset:0;overflow:hidden;color:var(--scroll-ink);clip-path:polygon(1% 0,7% .6%,14% .1%,22% .8%,31% .1%,43% .6%,54% .1%,65% .7%,76% .1%,87% .8%,96% .2%,100% 1.5%,99% 10%,100% 20%,99.2% 31%,100% 43%,99.1% 55%,100% 67%,99% 79%,100% 90%,98% 100%,87% 99.4%,76% 100%,64% 99.3%,51% 100%,39% 99.3%,27% 100%,16% 99.2%,5% 100%,0 98%,1% 87%,0 75%,1% 64%,.2% 51%,1% 39%,.2% 27%,1% 15%);background:radial-gradient(circle at 25% 18%,rgba(255,255,255,.2),transparent 35%),radial-gradient(circle at 74% 82%,rgba(76,43,15,.14),transparent 30%),linear-gradient(90deg,#996b35 0,#d2aa69 3%,#e2c383 12%,#d8b575 52%,#e2c386 89%,#986832 100%);box-shadow:inset 0 0 9px rgba(64,34,10,.52),inset 0 0 40px rgba(81,46,15,.2)}.memory-paper::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.33;background:radial-gradient(circle at 12% 15%,rgba(91,48,14,.28) 0 2px,transparent 3px),radial-gradient(circle at 77% 22%,rgba(91,48,14,.14) 0 1px,transparent 2px),radial-gradient(circle at 30% 70%,rgba(91,48,14,.2) 0 2px,transparent 3px),radial-gradient(circle at 89% 86%,rgba(91,48,14,.17) 0 1px,transparent 2px);background-size:113px 97px,87px 103px,131px 119px,91px 87px}.memory-paper::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 7px rgba(47,24,6,.55),inset 0 0 25px rgba(66,37,11,.25)}
.memory-roller{position:absolute;left:1%;right:1%;height:75px;z-index:20;display:flex;align-items:center;transition:transform .72s cubic-bezier(.22,.72,.15,1)}.memory-roller-top{top:0}.memory-roller-bottom{bottom:0}.memory-wood{position:absolute;left:6%;right:6%;height:24px;border-radius:30px;background:linear-gradient(180deg,#83512b,#4c2812 40%,#261006 58%,#5c3118);box-shadow:0 5px 9px rgba(0,0,0,.45),inset 0 2px 2px rgba(255,255,255,.12),inset 0 -3px 4px rgba(0,0,0,.35)}.memory-roll-paper{position:absolute;left:9%;right:9%;height:48px;border-radius:50%/22%;background:linear-gradient(180deg,#e3c88d 0,#c99e5f 41%,#8b5c2a 52%,#b8884e 70%,#d7b576);box-shadow:0 8px 12px rgba(0,0,0,.32),inset 0 5px 8px rgba(255,255,255,.14),inset 0 -7px 8px rgba(64,35,11,.28)}.memory-roller i{position:absolute;width:47px;height:47px;top:50%;transform:translateY(-50%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}.memory-roller i:first-of-type{left:-1px}.memory-roller i:last-of-type{right:-1px}.memory-roller i::before{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle,#986239 0 16%,#4b2813 18% 35%,#7c4825 37% 49%,#311608 51% 64%,#72411f 66% 75%,transparent 76%)}
.memory-letter{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;padding:clamp(35px,6vh,64px) clamp(28px,6vw,62px) 30px;transition:opacity .25s ease,transform .45s ease}.memory-day{text-align:center;color:#785a35;font-size:10px;margin-bottom:5px}.memory-letter time{text-align:center;color:#826441;font-size:9px;margin-bottom:11px}.memory-letter h2{text-align:center;font-family:Georgia,Vazirmatn,serif;font-size:clamp(19px,3vw,31px);font-weight:400;color:#4b2d15;margin:0}.memory-ornament{text-align:center;margin:9px 0 clamp(14px,2vh,24px);color:#876034;opacity:.85}.memory-page-text{flex:1;min-height:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;font-size:clamp(11px,1.6vw,16px);line-height:2.15;text-align:right;color:#3e2a18}.memory-signature{flex:none;padding-top:14px;text-align:left;color:#795630;font-family:Georgia,Vazirmatn,serif;font-size:11px}.memory-scroll-shadow{position:absolute;left:13%;right:13%;bottom:18px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(18px);transform:translateZ(-20px);z-index:-1;transition:opacity .7s,transform .7s}
.memory-scroll.closing .memory-sheet{clip-path:inset(48% 0);filter:brightness(.8)}.memory-scroll.closing .memory-roller-top{transform:translateY(calc((min(620px,calc(100dvh - 175px)) - 75px)/2)) translateZ(28px)}.memory-scroll.closing .memory-roller-bottom{transform:translateY(calc((75px - min(620px,calc(100dvh - 175px)))/2)) translateZ(28px)}.memory-scroll.closing .memory-letter{opacity:0;transform:scaleY(.75)}.memory-scroll.closing .memory-scroll-shadow{opacity:.55;transform:scaleX(.6) translateY(-12px)}.memory-scroll.opening .memory-sheet{animation:memoryPaperOpen .82s cubic-bezier(.18,.78,.16,1) both}.memory-scroll.opening .memory-roller-top{animation:memoryRollTop .82s cubic-bezier(.18,.78,.16,1) both}.memory-scroll.opening .memory-roller-bottom{animation:memoryRollBottom .82s cubic-bezier(.18,.78,.16,1) both}.memory-scroll.opening .memory-letter{animation:memoryContentOpen .5s .3s ease both}
@keyframes memoryPaperOpen{from{clip-path:inset(48% 0);filter:brightness(.8)}65%{clip-path:inset(0);filter:brightness(1.03)}to{clip-path:inset(0);filter:brightness(1)}}@keyframes memoryRollTop{from{transform:translateY(247px) translateZ(28px)}to{transform:none}}@keyframes memoryRollBottom{from{transform:translateY(-247px) translateZ(28px)}to{transform:none}}@keyframes memoryContentOpen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.memory-scroll-controls{flex:none;width:min(850px,100%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:10px}.memory-scroll-controls button{justify-self:start;min-width:125px;height:42px;padding:0 16px;border:1px solid rgba(211,171,115,.13);border-radius:100px;background:rgba(255,255,255,.025);color:#c5a67c}.memory-scroll-controls button:last-child{justify-self:end}.memory-scroll-controls button:hover{background:rgba(192,147,86,.075)}.memory-scroll-controls button:disabled{opacity:.28}.memory-scroll-controls>span{min-width:105px;height:42px;padding:0 13px;display:grid;place-items:center;border:1px solid rgba(211,171,115,.09);border-radius:100px;background:rgba(255,255,255,.02);color:#ad9069;font-size:10px}.memory-page-list{flex:none;min-height:28px;margin-top:6px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.memory-page-list button{width:27px;height:27px;padding:0;border:1px solid rgba(207,166,108,.12);border-radius:50%;background:rgba(255,255,255,.02);color:#8f7554;font-size:8px}.memory-page-list button.active{color:#f1d6aa;background:#85552b;border-color:#b17c43}.memory-scroll-measure{position:fixed;z-index:-1;visibility:hidden;pointer-events:none;overflow:hidden;white-space:pre-wrap;font-size:clamp(11px,1.6vw,16px);line-height:2.15}
@media(max-width:600px){.memory-scroll-reader{padding:5px 3px 8px}.memory-scroll-head{height:45px;margin-bottom:3px}.memory-scroll-head strong{font-size:16px}.memory-scroll-head small{display:none}.memory-scroll-head button{width:36px;height:36px}.memory-scroll-stage{padding:4px 1px;border-radius:12px}.memory-scroll{width:min(570px,98vw);height:calc(100dvh - 145px);min-height:320px}.memory-sheet{left:5%;right:5%;top:42px;bottom:42px}.memory-roller{height:60px}.memory-wood{height:20px}.memory-roll-paper{height:39px}.memory-roller i{width:39px;height:39px}.memory-letter{padding:25px clamp(18px,8vw,38px) 19px}.memory-day{font-size:8px}.memory-letter time{font-size:7px;margin-bottom:7px}.memory-letter h2{font-size:clamp(16px,5vw,23px)}.memory-ornament{margin:6px 0 11px;font-size:9px}.memory-page-text{font-size:clamp(10px,3.2vw,13px);line-height:2}.memory-signature{font-size:9px}.memory-scroll-controls{margin-top:5px}.memory-scroll-controls button{min-width:0;width:105px;height:37px;padding:0 8px;font-size:8px}.memory-scroll-controls>span{min-width:86px;height:37px;font-size:8px}.memory-page-list{display:none}}
@media(orientation:landscape) and (max-height:600px){.memory-scroll-reader{padding:3px}.memory-scroll-head{position:absolute;z-index:30;top:5px;right:8px;left:8px;width:auto;height:38px;margin:0}.memory-scroll-head strong,.memory-scroll-head small{display:none}.memory-scroll-head button{width:34px;height:34px}.memory-scroll-stage{width:100%;height:100%;border-radius:10px}.memory-scroll{height:calc(100dvh - 66px);min-height:260px;width:min(520px,68vw)}.memory-sheet{top:36px;bottom:36px}.memory-roller{height:52px}.memory-roll-paper{height:34px}.memory-roller i{width:34px;height:34px}.memory-letter{padding:19px 35px 14px}.memory-day{font-size:7px}.memory-letter time{font-size:6px;margin-bottom:4px}.memory-letter h2{font-size:16px}.memory-ornament{margin:3px 0 7px;font-size:8px}.memory-page-text{font-size:9px;line-height:1.8}.memory-signature{font-size:7px;padding-top:5px}.memory-scroll-controls{position:absolute;z-index:30;right:8px;left:8px;bottom:7px;width:auto;margin:0}.memory-scroll-controls button{height:34px;min-width:95px}.memory-scroll-controls>span{height:34px}.memory-page-list{display:none}}
@media(prefers-reduced-motion:reduce){.memory-scroll *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.memory-sheet{transition-duration:.3s,.24s}.memory-roller{transition-duration:.3s}.memory-scroll.opening .memory-sheet,.memory-scroll.opening .memory-roller-top,.memory-scroll.opening .memory-roller-bottom{animation-duration:.38s}.memory-scroll.opening .memory-letter{animation-duration:.24s;animation-delay:.08s}
@media(min-width:901px) and (min-height:650px){
  .memory-scroll-reader{padding:18px 28px 16px}
  .memory-scroll-head{width:min(1120px,100%);height:58px;margin-bottom:12px}
  .memory-scroll-head strong{font-size:24px;letter-spacing:-.3px}
  .memory-scroll-head small{font-size:10px;color:#a28561}
  .memory-scroll-stage{width:min(1120px,100%);padding:18px 36px;border:1px solid rgba(173,122,70,.13);border-radius:26px}
  .memory-scroll{width:min(760px,72vw);height:clamp(400px,calc(100dvh - 230px),620px);min-height:0}
  .memory-sheet{left:6%;right:6%;top:58px;bottom:58px}
  .memory-roller{height:80px}
  .memory-wood{left:5%;right:5%;height:26px}
  .memory-roll-paper{left:8%;right:8%;height:51px}
  .memory-roller i{width:51px;height:51px}
  .memory-letter{padding:clamp(48px,7vh,72px) clamp(64px,7vw,92px) 38px}
  .memory-day{font-size:11px;margin-bottom:7px}
  .memory-letter time{font-size:10px;margin-bottom:13px}
  .memory-letter h2{font-size:clamp(25px,2.2vw,34px)}
  .memory-ornament{margin:11px 0 22px;font-size:15px}
  .memory-page-text{font-size:15px;line-height:2.25;text-align:justify;text-align-last:right}
  .memory-signature{font-size:12px;padding-top:18px}
  .memory-scroll-controls{width:min(940px,100%);margin-top:13px}
  .memory-scroll-controls button{min-width:150px;height:44px;font-size:10px;transition:background .18s,color .18s,transform .18s}
  .memory-scroll-controls button:not(:disabled):hover{background:rgba(192,147,86,.12);color:#e0c398;transform:translateY(-1px)}
  .memory-scroll-controls>span{min-width:120px;height:44px;font-size:10px}
  .memory-page-list{margin-top:8px}
  .memory-page-list button{width:30px;height:30px;font-size:9px}
}