@import url("style/book-style.css");
:root { --page-ratio: .8; color: var(--ink); background: #f3f0e8; 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 50% 42%, #fff 0 18%, #f3f0e8 66%); }
button { color: inherit; font: inherit; }
.room { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; padding: 22px 24px 20px; }
.book-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: min(100%, 1100px); margin: auto; }
.book-header h1 { margin: 0; font: 400 16px/1.3 var(--book-serif); letter-spacing: -.01em; }
.book-header a, .book-header span { font: 400 10px/1.4 var(--book-sans); color: #6e7365; text-decoration: none; }
.book-header span:last-child { text-align: right; }
.stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 16px 0; }
/* PageFlip derives leaf height from width. Reserve room for navigation. */
.book-rig { display: grid; place-items: center; width: min(100%, calc((100dvh - 140px) * var(--page-ratio) * 2), calc(640px * var(--page-ratio) * 2)); height: min(calc(100dvh - 140px), 640px); }
.book { position: relative; isolation: isolate; filter: drop-shadow(0 9px 12px rgb(29 37 21 / 15%)); 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(28 30 24 / 12%), rgb(28 30 24 / 3%) 40%, transparent); }
.book-page.--right::before { left: 0; background: linear-gradient(to right, rgb(28 30 24 / 12%), rgb(28 30 24 / 3%) 40%, transparent); }
.controls { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 20px; width: min(100%, 280px); margin: auto; }
.controls button { border: 1px solid #d4d0c7; border-radius: 50%; width: 36px; height: 36px; padding: 0; background: #faf8f2; font: 400 15px var(--book-sans); cursor: pointer; }
.controls button:disabled { opacity: .28; cursor: default; }
.status { display: grid; gap: 4px; text-align: center; }
.status span { font: 400 10px/1.4 var(--book-sans); letter-spacing: .04em; color: #666e5d; }
.status small { font: 400 9px/1.4 var(--book-sans); color: #969b8f; }
a:focus-visible, button:focus-visible { outline: 2px solid #6b735d; outline-offset: 4px; }
@media (max-width: 700px) { .room { padding: 16px 9px; } .book-header { grid-template-columns: 1fr auto; } .book-header h1 { font-size: 13px; } .book-header #orientation { display: none; } }
@media (prefers-reduced-motion: reduce) { .book { transition: none; } }
@media print { body { overflow: visible; } .book-header, .controls { display: none; } }

.yu-cover{--cloth:#596981}.yu-cover::before{position:absolute;inset:0;content:"";background:radial-gradient(circle at 77% 16%,#67b9e4 0 7%,transparent 7.3%),radial-gradient(circle at 84% 24%,#75ca62 0 3.5%,transparent 3.8%),linear-gradient(135deg,transparent 45%,rgb(255 255 255 / 8%) 45% 46%,transparent 46%)}
.yu-cover .cover-title{top:13%;font-size:15cqw;line-height:.82;letter-spacing:-.08em}.yu-cover .cover-title em{display:block;margin-left:1em;color:#75ca62;font-weight:400}.yu-cover .cover-subtitle{top:46%;font-size:2.6cqw}.yu-cover .cover-foot{font-size:1.7cqw}.cover-dots{position:absolute;right:-8%;bottom:-5%;width:72%;height:44%;transform:rotate(-8deg);opacity:.56;background:repeating-linear-gradient(90deg,transparent 0 4.5cqw,#f4eee2 4.5cqw 6.4cqw),repeating-linear-gradient(0deg,transparent 0 4.5cqw,#f4eee2 4.5cqw 6.4cqw);mix-blend-mode:screen}
.title-page .title-block{top:24%}.title-page .title-block h2{font-size:11cqw;margin-bottom:8cqw}.title-page .kicker{margin-bottom:5cqw;color:#6590a5;font:400 1.8cqw/1 var(--book-sans);letter-spacing:.2em}
.portrait-page{display:grid;place-items:center}.portrait-page img{width:100%;height:100%;object-fit:contain}
.live-page{background:#e9e7e0}.live-media{position:absolute;inset:0;overflow:hidden}.live-media img,.live-media video{position:absolute;top:50%;width:200%;height:auto;transform:translateY(-50%)}.live-right .live-media img,.live-right .live-media video{left:-100%}.live-left .live-media img,.live-left .live-media video{left:0}.live-media video{z-index:1;opacity:0}.live-page.is-live .live-media video{opacity:1}
.live-trigger{position:absolute;z-index:20;right:0;top:0;display:flex;justify-content:flex-end;align-items:flex-start;width:42cqw;height:32cqw;padding:5cqw 5cqw 0 0;border:0;color:#fff;background:transparent;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.live-trigger span{display:grid;place-items:center;width:13cqw;height:7cqw;border:1px solid rgb(255 255 255 / 72%);border-radius:999px;background:rgb(15 18 25 / 45%);font:600 1.8cqw/1 var(--book-sans);letter-spacing:.16em;pointer-events:none;backdrop-filter:blur(5px)}.live-trigger:focus-visible{outline:2px solid #fff;outline-offset:-3px}.live-page.is-live .live-trigger span{background:#f7f3e9;color:#171a17}
.book[data-layout="landscape"] .live-left .live-trigger{display:none}
.page-caption{position:absolute;z-index:3;right:4cqw;bottom:3.5cqw;max-width:70%;padding:.9cqw 1.4cqw;background:rgb(247 243 233 / 82%);font:italic 1.8cqw/1.25 var(--book-serif);backdrop-filter:blur(5px)}
.closing-page{display:grid;place-content:center;text-align:center}.closing-page p{margin:0;font:italic 8cqw/.95 var(--book-serif);letter-spacing:-.05em}.closing-page span{margin-top:6cqw;color:#76827c;font:400 1.7cqw/1 var(--book-sans);letter-spacing:.18em}
.yu-back{--cloth:#596981}.yu-back .back-mark{letter-spacing:.14em}
@media(max-width:700px){.live-trigger{width:52cqw;height:40cqw;padding:6cqw 6cqw 0 0}.live-trigger span{width:17cqw;height:9cqw;font-size:2.3cqw}}