::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-track{background: #020617;}
::-webkit-scrollbar-thumb{background: #475569; border-radius: 4px;}
::-webkit-scrollbar-thumb:hover{background: #60a5fa;}
body{background-image: url("https://file.garden/ag8JwXEGxlB3Dv6B/mydesk.jpg");background-repeat: no-repeat;background-position: center center;background-size: cover;background-attachment: fixed;margin: 0;}
.journal-wrapper{position: relative; font-family: 'Patrick Hand', cursive; max-width: 800px; margin: auto; padding: 0 25px; color: #1a1a1a; perspective: 2000px;transform: rotateX(13deg) rotateY(360deg);}
.page p{font-weight: 400;}
.book{display: flex; background: #f4eee1; position: relative; width: 100%; height: 550px; max-height: 100%; border-radius: 4px; border-right: 5px solid #e3dac9; border-left: 5px solid #e3dac9; box-shadow: 0 10px 30px rgba(0,0,0,0.15), 4px 0px 0px #ebdcb9, 8px 0px 0px #dfd0ab, 12px 0px 0px #d4c49e, -4px 0px 0px #ebdcb9, -8px 0px 0px #dfd0ab, -12px 0px 0px #d4c49e, inset 0 0 20px rgba(0,0,0,0.05); transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);transform: rotateX(13deg) rotateY(360deg);}
.book::after{content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(0, 0, 0, 0.1); box-shadow: 0 0 12px rgba(0,0,0,0.4); transform: translateX(-50%); z-index: 10;}
.book-cover{position: absolute; top: 0; left: 0; height: 100%; background: radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 40%), radial-gradient(circle at bottom right, rgba(0,0,0,.18), transparent 45%), linear-gradient( 135deg, #b65d57 0%, #b14e4a 25%, #a54845 50%, #8f3d3b 100% ); border-radius: 4px; box-shadow: inset 0 2px 4px rgba(255,255,255,.12), inset 0 -4px 10px rgba(0,0,0,.25), 0 10px 25px rgba(0,0,0,.35); overflow: hidden; padding: 30px 40px 30px 30px; box-sizing: border-box; z-index: 50; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transform: rotateY(90deg); transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); backface-visibility: hidden;}
.book-cover::before{content:""; position:absolute; inset:0; background: repeating-radial-gradient( circle at 0 0, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px ), repeating-radial-gradient( circle at 100% 100%, rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px, transparent 2px, transparent 5px ); mix-blend-mode: overlay; opacity:.7; pointer-events:none;}
.book-cover::after{content:""; position:absolute; inset:12px; border-radius:4px; border:2px dashed rgba(255,255,255,.65); box-shadow: 0 0 0 2px rgba(0,0,0,.08), inset 0 0 8px rgba(255,255,255,.08); pointer-events:none;}
.book.closed{background: transparent; box-shadow: none; border: none;margin: 0 20%;}
.book.closed::after{display: none;}
.book.closed .book-cover{opacity: 1; pointer-events: auto; transform: rotateY(0deg);}
.book.closed .page, .book.closed .journal-nav-container{display: none !important;}
.cover-title-container{text-align: center; animation: float 4s ease-in-out infinite;}
.cover-main-title{font-family: 'Gochi Hand', cursive; color: #fffdec; background: linear-gradient(to bottom, #fffdf0 0%, #ffebbc 40%, #d1ab55 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0px 2px 0px #4a0303) drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.6)); margin: 0 0 10px 0;}
.floating-menu{background-color: #d7c49e; color: #2b1d0c; border: 1px solid #5a4531; outline: 4px solid #d7c49e; box-shadow: 0 0 0 5px #5a4531, 0 4px 10px rgba(0, 0, 0, 0.15); background-image: radial-gradient(circle at 0 0, transparent 12px, #d7c49e 13px), radial-gradient(circle at 100% 0, transparent 12px, #d7c49e 13px), radial-gradient(circle at 100% 100%, transparent 12px, #d7c49e 13px), radial-gradient(circle at 0 100%, transparent 12px, #d7c49e 13px); background-position: top left, top right, bottom right, bottom left; background-size: 51% 51%; background-repeat: no-repeat; display: flex; flex-direction: column; gap: 12px; min-width: 200px;}
.floating-menu-desc{font-size: 1rem; color: #555; margin: 0 0 5px 0; text-align: center; text-transform: uppercase; letter-spacing: 1px;}
.year-btn{background: transparent; border: none; padding: 10px; font-family: 'Gochi Hand', cursive; font-size: var(--font-size-base); font-weight: bold; color: #2b1d0c; cursor: pointer; transition: all 0.2s ease;}
.year-btn:hover{background: #a34333; color: #fffdec; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
@keyframes float{0%{transform: translateY(0px);}
50%{transform: translateY(-10px);}
100%{transform: translateY(0px);}
}
.page{flex: 1; width: 100%; height: 100%; padding: 40px 30px 50px 30px; box-sizing: border-box; font-size: var(--font-size-base); background: linear-gradient(to right, rgba(0,0,0,0.02), transparent 10%, transparent 90%, rgba(0,0,0,0.02)); overflow: hidden; position: relative; transition: opacity 0.3s ease;}
.page time{display: block; font-family: 'Gochi Hand', cursive; font-weight: bold; font-size: var(--font-size-md); margin-bottom: 5px;}
.flip-sheet{position: absolute; top: 0; width: 50%; height: 100%; background: #f4eee1; box-sizing: border-box; padding: 40px 35px 80px 35px; line-height: 1.6; font-size: 1.1rem; font-family: 'Gochi Hand', cursive; z-index: 5; pointer-events: none; backface-visibility: hidden; overflow: hidden; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: inset 0 0 20px rgba(0,0,0,0.02);}
.flip-sheet.turning-next{right: 0; transform-origin: left center; border-left: 1px solid rgba(0,0,0,0.05); background: linear-gradient(to right, #ebdcb9, #f4eee1 12%, #f4eee1 88%, #dfd0ab 100%);}
.flip-sheet.turning-prev{left: 0; transform-origin: right center; border-right: 1px solid rgba(0,0,0,0.05); background: linear-gradient(to left, #ebdcb9, #f4eee1 12%, #f4eee1 88%, #dfd0ab 100%);}
.journal-nav-container{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100%; display: flex; align-items: center; z-index: 20; justify-content: space-between; padding: 0 10px; box-sizing: border-box;}
.tape-btn{background: #d9ccb9; border: none; padding: 6px 20px; font-size: 1.1rem; font-family: inherit; cursor: pointer; box-shadow: 1px 2px 4px rgba(0,0,0,0.15); transform: rotate(-1deg); transition: transform 0.1s ease, opacity 0.2s ease;}
.tape-btn:active{transform: scale(0.95) rotate(1deg);}
.return-container{text-align: right; margin-top: 15px;}
.return-link{color: var(--color-text-main); text-decoration: none; font-size: 1.2rem; font-weight: bold;}
.return-link:hover{text-decoration: underline;}
.continued{font-size:var(--font-size-sm); opacity:0.6; display:block; margin-bottom:5px; font-family:'Gochi Hand', cursive;}
@media (max-width: 768px){.book{height: 500px; border-left: none; box-shadow: 0 10px 25px rgba(0,0,0,0.15), 4px 0px 0px #ebdcb9, 8px 0px 0px #dfd0ab, 12px 0px 0px #d4c49e, inset 0 0 20px rgba(0,0,0,0.05);}
.book::after{display: none;}
.page{width: 100%; flex: none; display: none;}
.page.left-page{display: block;}
.flip-sheet{display: none !important;}
.book-cover{padding: 20px;}
}
@media (max-width: 479px){.book.closed{margin: auto;}.journal-wrapper{padding:0}}
.polaroid-container{position: relative; width: 200px; margin: 10px auto 10px auto; transform: rotate(3deg);}
.polaroid{background: white; padding: 12px; box-shadow: 0 5px 12px rgba(0,0,0,0.15); border: 1px solid #e2e2e2;}
.tape{position: absolute; width: 75px; height: 24px; background-color: #7997db; background-image: radial-gradient(rgba(255,255,255,0.4) 20%, transparent 20%), radial-gradient(rgba(255,255,255,0.4) 20%, transparent 20%); background-size: 8px 8px; background-position: 0 0, 4px 4px; opacity: 0.85;}
.tape-tl{top: 0; left: -25px; transform: rotate(-35deg);}
.tape-br{bottom: 5px; right: -30px; transform: rotate(-65deg);}
.polaroid-img-placeholder{width: 100%; height: 160px; background-color: #bbb; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.9rem; background-size: cover; background-position: center;}