:root { --leather-base: #2a1610; --paper-base: #e3d3b6; --paper-stain: rgba(107,72,40,.15); --ink: #2a333d; --book-w: 460px; --book-h: 640px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow: hidden; background-color: #050505; background-image: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.85) 100%), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px, rgba(0,0,0,.3) 3px), repeating-linear-gradient(180deg, #1f140f 0, #140d0a 15px, #0a0604 30px, #1f140f 45px); }
button { font: inherit; }
#experience, #book-scaler { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100dvh; height: 100dvh; perspective: 2500px; }
.letter-view { width: var(--book-w); height: var(--book-h); animation: arrive .8s cubic-bezier(.18,.77,.22,1) both; }
.letter-paper { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; padding: 1.55rem 1.45rem 1.15rem; overflow: hidden; background: #fbfaf5; box-shadow: 0 22px 55px rgba(0,0,0,.55), inset 0 0 28px rgba(92,86,67,.14); }
.letter-paper::before { position: absolute; inset: 8px; content: ""; border: 1px solid rgba(91,100,103,.16); pointer-events: none; }.letter-copy { min-height: 0; padding: .2rem .7rem .5rem .5rem; overflow-y: auto; scrollbar-color: rgba(98,112,120,.38) rgba(251,250,245,.72); scrollbar-width: thin; white-space: pre-wrap; color: #27323b; font: clamp(.92rem,1.2vw,1.03rem)/1.72 Aptos, "Segoe UI", Calibri, Arial, sans-serif; letter-spacing: .01em; }.letter-body { display: block; }.letter-signature { display: block; margin-top: 1.35rem; font: clamp(1rem,1.55vw,1.14rem)/1.3 "Homemade Apple", cursive; letter-spacing: 0; }.letter-copy::-webkit-scrollbar { width: 8px; }.letter-copy::-webkit-scrollbar-track { background: rgba(251,250,245,.72); }.letter-copy::-webkit-scrollbar-thumb { border: 2px solid rgba(251,250,245,.72); border-radius: 5px; background: rgba(98,112,120,.38); }.open-diary-button { justify-self: center; min-height: 44px; margin-top: .8rem; padding: .8rem 1.1rem; border: 1px solid rgba(65,34,14,.6); border-radius: 2px; color: #efd28e; background: #3d1e0d; box-shadow: 0 4px 11px rgba(0,0,0,.25); cursor: pointer; font: .72rem Cinzel, serif; letter-spacing: .11em; }.open-diary-button:disabled { cursor: wait; opacity: .52; }.letter-view.leaving { animation: leave .42s ease-in both; }
.book { position: relative; width: var(--book-w); height: var(--book-h); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.645,.045,.355,1), box-shadow 1s; box-shadow: 30px 30px 50px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.5); }.book.open { transform: translateX(calc(var(--book-w) / 2)); box-shadow: 0 30px 60px rgba(0,0,0,.95); }.book.closed-back { transform: translateX(var(--book-w)); box-shadow: -30px 30px 50px rgba(0,0,0,.9); }
.leaf { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.645,.045,.355,1); cursor: pointer; }.leaf.flipped { transform: rotateY(-180deg); }.page { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; border-radius: 6px 14px 14px 6px; outline: 1px solid transparent; }.page.back { transform: rotateY(180deg); border-radius: 14px 6px 6px 14px; }.page.front::after, .page.back::after { position: absolute; top: 0; left: 0; width: 90px; height: 100%; content: ""; pointer-events: none; mix-blend-mode: multiply; }.page.front::after, .page.back::after { background: linear-gradient(to right, rgba(240,200,120,.06) 0px, rgba(8,3,0,.86) 2px, rgba(10,4,0,.58) 6%, rgba(12,5,0,.32) 15%, rgba(8,3,0,.1) 36%, transparent 100%); }
.leather { background-color: var(--leather-base); background-image: radial-gradient(circle at 50% 30%, rgba(255,255,255,.04), transparent 40%), radial-gradient(circle at 80% 80%, rgba(0,0,0,.7), transparent 70%), url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.18"/></svg>'); border: 1px solid #0a0502; box-shadow: inset 0 0 60px rgba(0,0,0,.95), inset 0 0 20px rgba(0,0,0,.8), inset 2px 2px 5px rgba(255,255,255,.06); }.leather::before { position: absolute; inset: 8px; content: ""; border: 1.5px dashed rgba(0,0,0,.6); border-radius: 4px; }.inside-cover { display: flex; align-items: center; justify-content: center; background-color: #2b1f17; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.3) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.3) 0 1px, transparent 1px 4px), radial-gradient(circle at 50% 50%, transparent 10%, rgba(0,0,0,.9) 100%); box-shadow: inset 0 0 70px rgba(0,0,0,.95); }
.cover-content { display: grid; gap: 24px; margin-top: 160px; padding: 0 36px; text-align: center; }.cover-title, .cover-subtitle { font-family: Cinzel, serif; background: linear-gradient(to bottom, #d6b863, #9e7b29 45%, #634b12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(255,255,255,.15)); }.cover-title { font-size: 2.65rem; font-weight: 800; line-height: 1.2; letter-spacing: 2px; opacity: .85; }.cover-subtitle { font-size: 1.25rem; font-weight: 600; letter-spacing: 3px; opacity: .8; }.hint { position: absolute; right: 30px; bottom: 30px; color: rgba(200,180,150,.4); font: italic 1rem Georgia, serif; letter-spacing: 1px; animation: pulse 3s infinite; }.nameplate { width: 65%; padding: 25px; border: 1px solid #4a3018; border-radius: 2px 6px 3px 5px; color: #2b1d12; background: var(--paper-base); box-shadow: 2px 2px 6px rgba(0,0,0,.7), inset 0 0 15px rgba(100,60,30,.3); text-align: center; transform: rotate(-1.5deg); }.nameplate-title { display: block; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #4a3018; font: 1rem Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }.nameplate-name { display: block; color: var(--ink); font: 1.85rem "Nothing You Could Do", cursive; }.nameplate-note { display: block; margin-top: 5px; font: .8rem Georgia, serif; }
.paper { top: 10px; height: calc(100% - 20px); background-color: var(--paper-base); background-image: linear-gradient(to right, rgba(90,50,20,.26) 0%, rgba(90,50,20,.11) 3%, rgba(90,50,20,.04) 8%, transparent 14%, transparent 86%, rgba(90,50,20,.04) 92%, rgba(90,50,20,.11) 97%, rgba(90,50,20,.26) 100%), linear-gradient(to bottom, rgba(80,45,15,.32) 0%, rgba(80,45,15,.13) 2.5%, rgba(80,45,15,.04) 6%, transparent 11%, transparent 89%, rgba(80,45,15,.04) 94%, rgba(80,45,15,.13) 97.5%, rgba(80,45,15,.32) 100%), radial-gradient(ellipse at 11% 18%, var(--paper-stain), transparent 30%), radial-gradient(ellipse at 87% 86%, rgba(75,45,18,.18), transparent 34%); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%; box-shadow: inset 0 0 60px rgba(65,35,12,.5), inset 0 0 20px rgba(30,12,2,.34), inset 0 0 6px rgba(15,6,0,.22); }.paper.front { right: 10px; }.paper.back { left: 10px; }.page-thickness { position: absolute; top: 0; bottom: 0; width: 8px; z-index: -1; background: repeating-linear-gradient(to bottom,#b09575,#c9b08f 1px,#826344 2px,#a88c69 3px); }.front .page-thickness { right: -8px; }.back .page-thickness { left: -8px; }.book-spine { position: absolute; top: 8px; left: -20px; width: 40px; height: calc(100% - 16px); pointer-events: none; transform: translateZ(10px); border-radius: 3px; background: linear-gradient(to right, transparent 0%, rgba(15,6,0,.07) 12%, rgba(10,4,0,.34) 30%, rgba(5,1,0,.68) 43%, rgba(1,0,0,.88) 47.5%, rgba(210,165,100,.1) 50%, rgba(1,0,0,.88) 52.5%, rgba(5,1,0,.68) 57%, rgba(10,4,0,.34) 70%, rgba(15,6,0,.07) 88%, transparent 100%); }
.entry-date { padding: 28px 38px 10px 55px; color: var(--ink); font: 1.8rem "Nothing You Could Do", cursive; text-align: left; transform: rotate(-1.5deg); }.entry-content { flex: 1; padding: 0 38px 64px 55px; overflow: hidden; color: var(--ink); text-align: left; }.entry-content p { margin: 0 0 18px; font: 1.38rem/1.58 "Nothing You Could Do", cursive; text-align: left; text-shadow: 0 0 1px rgba(42,51,61,.5); transform: rotate(-1.5deg); }.page-number { position: absolute; right: 30px; bottom: 22px; color: rgba(42,51,61,.48); font: .78rem Cinzel, serif; letter-spacing: .06em; }.continuation { height: 48px; flex: 0 0 48px; }
#lighting-layer { display: none; position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), transparent 10%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.95) 100%); mix-blend-mode: multiply; }.leaf { z-index: 6; }
.pagination-sandbox { position: fixed; left: -10000px; top: 0; width: var(--book-w); height: var(--book-h); visibility: hidden; pointer-events: none; contain: layout style size; }
.reading-diary { overflow-x: hidden; overflow-y: auto; }
.reading-diary #experience { display: block; min-height: 100dvh; height: auto; }
.diary-reader { position: relative; z-index: 2; width: min(100% - 2.5rem, 880px); margin: 0 auto; padding: 3.5rem 0 6rem; }
.diary-reader-header { margin: 0 auto 2.5rem; color: rgba(233,211,166,.86); text-align: center; font-family: Cinzel, serif; text-transform: uppercase; }
.diary-reader-header p { margin: 0; font-size: .64rem; letter-spacing: .2em; }
.diary-reader-header h1 { margin: .45rem 0; font-size: clamp(1.55rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: .1em; }
.diary-entries { display: grid; gap: clamp(2rem, 6vw, 4.5rem); }
.diary-entry-page { position: relative; min-height: min(82vh, 760px); padding: clamp(2.5rem, 7vw, 4.75rem) clamp(1.6rem, 8vw, 6.25rem) clamp(3.25rem, 8vw, 5.5rem); overflow: hidden; border: 1px solid rgba(91,57,28,.48); border-radius: 3px 7px 8px 4px; background-color: var(--paper-base); background-image: linear-gradient(to right, rgba(82,43,18,.28), rgba(82,43,18,.08) 4%, transparent 12%, transparent 88%, rgba(82,43,18,.08) 96%, rgba(82,43,18,.28)), linear-gradient(to bottom, rgba(75,42,15,.28), transparent 9%, transparent 91%, rgba(75,42,15,.3)), radial-gradient(ellipse at 12% 16%, var(--paper-stain), transparent 31%), radial-gradient(ellipse at 86% 88%, rgba(80,48,18,.18), transparent 37%); box-shadow: 0 22px 42px rgba(0,0,0,.55), inset 0 0 58px rgba(67,38,14,.38), inset 0 0 13px rgba(25,11,2,.24); }
.diary-film { position: relative; width: min(100%, 760px); aspect-ratio: 16 / 9; margin: 0 auto; padding: clamp(.5rem, 1.8vw, .9rem); border: 1px solid rgba(244,224,177,.56); background: #cbb995; box-shadow: 0 20px 34px rgba(0,0,0,.48), inset 0 0 0 3px rgba(70,39,16,.32), inset 0 0 20px rgba(57,31,10,.28); transform: rotate(.25deg); }
.diary-film::before { position: absolute; inset: clamp(.5rem, 1.8vw, .9rem); z-index: 1; content: ""; border: 1px solid rgba(47,27,12,.72); box-shadow: inset 0 0 15px rgba(0,0,0,.42); pointer-events: none; }
.diary-film iframe { display: block; width: 100%; height: 100%; border: 0; }
.diary-entry-page::before { position: absolute; inset: 8px; content: ""; border: 1px solid rgba(92,58,29,.16); pointer-events: none; }
.diary-entry-page::after { position: absolute; right: 1.2rem; bottom: 1rem; content: "*"; color: rgba(42,51,61,.3); font: 1rem Cinzel, serif; }
.diary-entry-date { display: block; position: relative; z-index: 1; margin-bottom: clamp(1.4rem, 4vw, 2.5rem); color: var(--ink); font: clamp(1.45rem, 3vw, 2rem)/1.2 "Nothing You Could Do", cursive; transform: rotate(-1.2deg); }
.diary-entry-content { position: relative; z-index: 1; color: var(--ink); }
.diary-entry-content p { margin: 0 0 1.35rem; font: clamp(1.1rem, 2.5vw, 1.45rem)/1.62 "Nothing You Could Do", cursive; text-align: left; text-shadow: 0 0 1px rgba(42,51,61,.4); transform: rotate(-.45deg); }
.diary-entry-content p:last-child { margin-bottom: 0; }
@keyframes pulse { 0%,100% { opacity: .1; } 50% { opacity: .5; } } @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes leave { to { opacity: 0; transform: translateY(-24px) scale(.97); } }
@media (hover: hover) and (pointer: fine) { #lighting-layer { display: block; } }
@media (min-width: 621px) and (max-width: 960px) {
	:root { --book-w: 360px; --book-h: 520px; }
	#experience, #book-scaler { min-height: 100svh; height: 100svh; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
	.letter-view { width: 390px; height: 560px; }.letter-paper { padding: 1.75rem 1.65rem 1.35rem; }.letter-copy { font-size: 1rem; line-height: 1.8; }.open-diary-button { min-height: 44px; font-size: .68rem; }
	.cover-content { gap: 20px; margin-top: 130px; padding: 0 30px; }.cover-title { font-size: 2.2rem; }.cover-subtitle { font-size: 1.1rem; }.hint { right: 25px; bottom: 25px; font-size: .85rem; }.entry-date { padding: 22px 30px 8px 45px; font-size: 1.55rem; }.entry-content { padding: 0 30px 52px 45px; }.entry-content p { margin-bottom: 15px; font-size: 1.22rem; line-height: 1.6; }.page-number { right: 24px; bottom: 18px; font-size: .65rem; }.continuation { height: 40px; flex-basis: 40px; }
}
@media (max-width: 620px) {
	:root { --book-w: min(92vw, 430px); --book-h: min(78svh, 620px); }
	#experience, #book-scaler { min-height: 100svh; height: 100svh; padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
	.letter-view { width: var(--book-w); height: var(--book-h); }.letter-paper { padding: 1.3rem 1.1rem 1.25rem; }.letter-copy { padding: .2rem .8rem 1rem .45rem; font-size: clamp(.94rem, 4vw, 1.1rem); line-height: 1.75; }.open-diary-button { min-height: 44px; padding: .75rem 1rem; font-size: .68rem; }
	.book.open, .book.closed-back { transform: none; }.book { width: var(--book-w); height: var(--book-h); }.cover-title { font-size: clamp(1.5rem, 7vw, 2.1rem); }.cover-subtitle { font-size: clamp(.72rem, 3.5vw, .95rem); }.cover-content { margin-top: 28%; }.hint { bottom: 18px; right: 18px; }
	.entry-date { padding: 20px 25px 8px 33px; font-size: clamp(1.25rem, 6vw, 1.55rem); }.entry-content { padding: 0 25px 58px 33px; }.entry-content p { font-size: clamp(1.05rem, 4.8vw, 1.22rem); line-height: 1.55; }.page-number { right: 18px; bottom: 17px; }.continuation { height: 34px; flex-basis: 34px; }
	.diary-reader { width: min(100% - 1.25rem, 640px); padding: 1.75rem 0 3.5rem; }.diary-reader-header { margin-bottom: 1.5rem; }.diary-reader-header h1 { font-size: 1.3rem; }.diary-reader-header p { font-size: .55rem; }.diary-entries { gap: 1.25rem; }.diary-entry-page { min-height: 0; padding: 2.25rem 1.35rem 3rem; border-radius: 2px 5px 6px 3px; }.diary-film { padding: .55rem; }.diary-entry-date { margin-bottom: 1.4rem; }.diary-entry-content p { margin-bottom: 1.2rem; font-size: clamp(1.08rem, 5.1vw, 1.28rem); line-height: 1.58; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }