@import url("style/book-style.css");
:root { --pink:#f07caa; --rose:#cf4d84; --blue:#79cce3; --mint:#8acfb6; --yellow:#f7d56e; --lavender:#b9a5e4; --ink:#633a54; --paper:#fff9f0; color:var(--ink); background:#dff5f3; font-family:var(--book-serif); font-synthesis:none; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; } body { overflow:hidden; background:radial-gradient(circle at 12% 10%,#fff5ba 0 4%,transparent 4.3%),radial-gradient(circle at 84% 13%,#ffd9e9 0 5%,transparent 5.3%),#dff5f3; } button { color:inherit; font:inherit; }
.room { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100dvh; padding:20px 24px 16px; }.book-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; width:min(100%,1100px); margin:auto; color:#75465f; }.book-header h1 { margin:0; font:400 18px/1.3 var(--book-serif); letter-spacing:0; }.book-header span { font:600 11px/1.4 var(--book-sans); color:#a05275; }.book-header span:last-child { text-align:right; }.stage { display:grid; place-items:center; min-height:0; padding:12px 0; }.book-rig { display:grid; place-items:center; width:min(100%,calc((100dvh - 130px) * var(--page-ratio) * 2),calc(600px * var(--page-ratio) * 2)); height:min(calc(100dvh - 130px),600px); }.book { position:relative; isolation:isolate; filter:drop-shadow(0 13px 18px rgb(162 91 123 / 25%)); transition:translate 760ms ease; }.book[data-layout="landscape"][data-edge="front"] { translate:-25% 0; }.book[data-layout="landscape"][data-edge="back"] { translate:25% 0; }.book-page { position:relative; overflow:hidden; background:var(--paper); }.book-page.--left::before,.book-page.--right::before { position:absolute; inset-block:0; z-index:3; width:clamp(14px,4%,28px); content:""; pointer-events:none; }.book-page.--left::before { right:0; background:linear-gradient(to left,rgb(131 78 104 / 16%),transparent); }.book-page.--right::before { left:0; background:linear-gradient(to right,rgb(131 78 104 / 16%),transparent); }
.art-page.cover { background:linear-gradient(135deg,#ffb6d2 0%,#ffd7b8 46%,#bde7f4 100%); color:#79425a; }.cover::before { content:""; position:absolute; inset:6%; border:2px dashed rgb(255 255 255 / 90%); border-radius:3cqw; }.art-page.cover::after { content:"\2661  \2605  \2661  \2605  \2661"; position:absolute; z-index:4; left:9%; right:9%; bottom:22%; color:#fffaf3; font:400 4.6cqw/1 var(--book-serif); text-align:center; letter-spacing:.18em; text-shadow:0 2px 0 rgb(207 77 132 / 20%); }.cover-kicker,.cover-water,.cover-foot { position:absolute; left:13%; font:600 1.9cqw/1.4 var(--book-sans); letter-spacing:.12em; }.cover-kicker { top:14%; color:#bd527d; }.cover-title { top:25% !important; font-size:7.8cqw !important; text-shadow:0 2px 0 rgb(255 255 255 / 65%); }.cover-subtitle { top:42% !important; width:72%; color:#79425a; font-size:2.7cqw !important; line-height:1.6 !important; }.cover-start { position:absolute; z-index:6; left:13%; top:57%; min-width:54%; padding:3% 5%; border:0; border-radius:999px; background:#f06e9e; color:#fff; box-shadow:0 5px 0 #c94d7d; cursor:pointer; font-size:2.7cqw; font-weight:600; letter-spacing:.04em; }.cover-start:hover { background:#d9598b; translate:0 1px; box-shadow:0 4px 0 #c94d7d; }.cover-start:active { translate:0 4px; box-shadow:0 1px 0 #c94d7d; }.cover-water { bottom:14%; color:#6b9ab0; }.cover-foot { bottom:8%; color:#a05a76; }
.ripple-mark { position:absolute; inset:0; display:grid; place-items:center; padding:16%; color:#8b608d; text-align:center; font-size:4cqw; line-height:1.7; background:radial-gradient(circle at 12% 12%,#ffe8a2 0 4%,transparent 4.3%),radial-gradient(circle at 88% 84%,#bfe5f2 0 5%,transparent 5.3%),repeating-radial-gradient(ellipse at 50% 55%,transparent 0 11px,rgb(240 124 170 / 10%) 12px 13px,transparent 14px 24px),#fff7ed; }.ripple-mark strong { color:#e05e92; font-size:5cqw; }.ripple-mark small { font-size:2.6cqw; color:#7fa7b4; }.eyebrow { color:#e05e92; font:600 2.1cqw/1.4 var(--book-sans) !important; letter-spacing:.15em; }.lotus-line { position:absolute; bottom:12%; right:15%; color:var(--pink); font-size:8cqw; }.opening,.chapter-page,.secret-page { padding:13% 14%; display:flex; flex-direction:column; justify-content:center; background:var(--paper) url("style/paper-grain.svg") repeat; }.opening::after,.chapter-page::after { content:"\2661  \2605"; position:absolute; right:12%; bottom:11%; color:#f3a8c1; font-size:5cqw; }.chapter-no { color:#e05e92; font:600 2.3cqw/1 var(--book-sans); letter-spacing:.15em; }.opening h2,.chapter-page h2,.secret-page h2 { margin:6% 0; font-size:5.7cqw; font-weight:400; line-height:1.3; }.opening p:not(.chapter-no),.chapter-page p:not(.chapter-no),.secret-page p:not(.chapter-no) { font-size:2.9cqw; line-height:1.7; }.wave-rule { width:72%; height:22px; border-top:3px solid var(--blue); border-radius:50%; opacity:.65; }.blossom { background-color:#fff0f8; }.birthday { background-color:#fff5cf; }
.photo-page { padding:6% 6% 13%; background:radial-gradient(circle at 8% 9%,#ffe4ab 0 3%,transparent 3.3%),radial-gradient(circle at 92% 91%,#cceef4 0 4%,transparent 4.3%),#fffaf2 url("style/paper-grain.svg") repeat; }.photo-page figure { height:78%; margin:0; display:grid; place-items:center; position:relative; }.photo-page figure::before { content:""; position:absolute; inset:1%; border:2px solid #ffb2ca; border-radius:2cqw; transform:rotate(-1.2deg); background:#fff; }.photo-page img { z-index:1; max-width:92%; max-height:92%; width:100%; height:100%; object-fit:contain; border:5px solid #fff; border-radius:1.6cqw; box-shadow:0 6px 0 rgb(240 124 170 / 18%); }.photo-page .caption { position:absolute; left:10%; right:10%; bottom:4.7%; margin:0; font-size:calc(2.75cqw + 2px); font-weight:600; line-height:1.45; color:#78485f; }.folio { position:absolute; bottom:5.3%; right:6%; color:#df6998; font:600 1.7cqw/1 var(--book-sans); letter-spacing:.08em; }.photo-page:nth-child(even) .folio { left:6%; right:auto; }.pool figure::after,.beach figure::after { content:"\2605"; position:absolute; z-index:2; width:11%; height:11%; right:3%; bottom:1%; display:grid; place-items:center; color:#78bed8; font-size:5cqw; transform:rotate(14deg); }.blossom figure::after { content:"\273f"; position:absolute; z-index:2; top:-2%; right:4%; color:#eb83aa; font-size:7cqw; }.birthday figure::after { content:"\2605"; position:absolute; z-index:2; left:3%; top:-2%; color:#f3bd48; font-size:7cqw; }.dinner figure::after { content:"\2661"; position:absolute; z-index:2; right:3%; top:-1%; color:#ea79a4; font-size:7cqw; transform:rotate(8deg); }.nature figure::after { content:"\273f"; position:absolute; z-index:2; left:3%; bottom:-1%; color:#82c9ae; font-size:7cqw; }.mirror figure::after,.portrait figure::after,.hotel figure::after { content:"\2661"; position:absolute; z-index:2; width:10%; height:10%; right:2%; top:0; color:#ef8ab1; font-size:5cqw; }
.secret-page { background:linear-gradient(135deg,#ffe7ef 0%,#fff8cc 47%,#d9f2fa 100%); }.secret-page button { align-self:flex-start; padding:3% 6%; border:0; border-radius:999px; background:#f06e9e; color:#fff; box-shadow:0 4px 0 #c94d7d; cursor:pointer; font-size:2.8cqw; font-weight:600; letter-spacing:.04em; }.secret-page button:hover { background:#d9598b; }.art-page.back-cover { display:grid; place-content:center; gap:18px; text-align:center; background:linear-gradient(135deg,#f89abb,#a9dded); color:#75465f; }.back-cover::before { content:"\2661"; position:absolute; top:15%; left:50%; color:#fff; font-size:11cqw; transform:translateX(-50%); }.back-cover span:last-child { color:#fffaf5; font:600 1.9cqw/1.4 var(--book-sans); letter-spacing:.15em; }.back-mark { position:static !important; font-size:3.5cqw !important; max-width:72%; margin:auto; }
.controls { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:20px; width:min(100%,320px); margin:auto; color:#75465f; }.controls button { border:2px solid #f09cbb; border-radius:50%; width:38px; height:38px; padding:0; background:#fffaf4; color:#df6998; font:600 16px var(--book-sans); cursor:pointer; }.controls button:disabled { opacity:.34; cursor:default; }.status { display:grid; gap:4px; text-align:center; }.status span { font:600 11px/1.4 var(--book-sans); letter-spacing:.04em; color:#a05275; }.status small { font:600 9px/1.4 var(--book-sans); color:#6f9bad; } button:focus-visible { outline:3px solid #f7d56e; outline-offset:3px; }
dialog { width:min(460px,calc(100vw - 32px)); border:3px solid #ffc4d8; border-radius:24px; padding:45px 38px 35px; background:radial-gradient(circle at 10% 12%,#ffe2a9 0 4%,transparent 4.3%),#fff8f1 url("style/paper-grain.svg") repeat; color:#704257; box-shadow:0 18px 55px rgb(153 89 117 / 35%); }.letter-tag { color:#e05e92; font:600 11px/1.4 var(--book-sans); letter-spacing:.14em; }.letter-sign { color:#dd5c91; font-size:18px !important; font-style:italic; } dialog h2 { font-weight:400; font-size:28px; line-height:1.35; } dialog p { font-size:17px; line-height:1.8; }.close-letter { position:absolute; top:12px; right:15px; border:0; background:none; color:#df6998; font-size:29px; cursor:pointer; } dialog::backdrop { background:rgb(99 59 84 / 52%); }
@media (max-width:700px) { .room { padding:15px 9px 12px; }.book-header { grid-template-columns:1fr auto; }.book-header h1 { font-size:14px; }.book-header #orientation { display:none; }.photo-page { padding-bottom:14%; }.photo-page .caption { font-size:calc(3.25cqw + 2px); } }