@import url("style/book-style.css");
:root { --page-ratio: .6; --ink: #25231f; --paper: #eee5d4; --blue: #064fcb; --red: #e43e27; --pink: #ed4e9a; color: var(--ink); background: #d9d3c8; font-family: "Source Serif 4", "Noto Serif SC", "Songti SC", 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%, #f7f4ed 0 20%, #ddd7cb 58%, #c9c1b4 100%); }
button { color: inherit; font: inherit; }
.room { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; padding: 18px 24px 16px; transition: margin-right .28s ease; }
body.editor-open .room { margin-right: 300px; }
.book-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: min(100%, 1050px); margin: auto; }
.book-header h1 { margin: 0; font: 600 16px/1.3 inherit; letter-spacing: .12em; }
.book-header span, .book-header button { font: 600 9px/1.4 Arial, sans-serif; letter-spacing: .11em; color: #67645e; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 13px; }
.text-button { border: 0; border-bottom: 1px solid currentColor; padding: 2px 0; background: transparent; cursor: pointer; }
.stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 12px 0; }
.book-rig { display: grid; place-items: center; width: min(100%, calc((100dvh - 122px) * var(--page-ratio) * 2), calc(640px * var(--page-ratio) * 2)); height: min(calc(100dvh - 122px), 640px); }
.book { position: relative; isolation: isolate; filter: drop-shadow(0 16px 18px rgb(53 43 28 / 28%)); 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, 5%, 30px); content: ""; pointer-events: none; }
.book-page.--left::before { right: 0; background: linear-gradient(to left, rgb(35 31 25 / 18%), rgb(35 31 25 / 3%) 42%, transparent); }
.book-page.--right::before { left: 0; background: linear-gradient(to right, rgb(35 31 25 / 18%), rgb(35 31 25 / 3%) 42%, transparent); }
.travel-page { background-color: #eee5d4; background-image: url("style/paper-grain.svg"); color: #28251f; }
.photo-page { background: #e9dfcd; }
.photo-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover { padding: 52px 38px; background: #e9dfca url("style/paper-grain.svg"); }
.cover-image { position: absolute; right: -32px; bottom: 65px; width: 175px; height: 260px; background: url("assets/photos/photo-23.png") 50% 50%/cover; clip-path: polygon(15% 2%, 93% 0, 100% 88%, 72% 100%, 0 89%, 5% 22%); filter: saturate(.92) contrast(1.03); }
.cover-brush { position: absolute; opacity: .94; transform: rotate(-8deg); }
.cover-brush.blue { inset: 18px 24px auto -25px; height: 46px; background: var(--blue); clip-path: polygon(0 22%,100% 0,93% 78%,9% 100%); }
.cover-brush.red { left: 22px; bottom: 28px; width: 280px; height: 22px; background: var(--red); clip-path: polygon(2% 30%,100% 0,93% 67%,0 100%); }
.eyebrow { margin: 0; font: 700 8px/1.4 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.cover-title { position: relative; z-index: 1; margin: 74px 0 18px; font-size: 58px; line-height: .97; letter-spacing: .08em; }
.cover-subtitle { position: relative; z-index: 1; width: 210px; margin: 0; font-size: 13px; line-height: 1.8; }
.cover-date { position: absolute; left: 38px; bottom: 70px; z-index: 1; font: 700 9px Arial, sans-serif; letter-spacing: .14em; }
.endpaper { background-color: #123d8f; background-image: url("style/cloth-weave.svg"), linear-gradient(135deg,#123d8f,#0d2b64); }
.title-page, .chapter, .closing { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: 55px 44px; }
.title-page h2 { margin: 26px 0 16px; font-size: 42px; letter-spacing: .1em; }
.title-page p:not(.eyebrow) { margin: 0; font-size: 13px; line-height: 2; }
.ink-line { width: 90%; height: 14px; margin-top: 45px; background: var(--red); transform: rotate(-3deg); clip-path: polygon(0 24%,100% 0,96% 70%,4% 100%); }
.chapter { background-image: url("style/paper-grain.svg"); }
.chapter-stroke { position: absolute; right: -25px; bottom: 65px; width: 230px; height: 35px; background: var(--blue); transform: rotate(-6deg); clip-path: polygon(0 25%,100% 0,92% 70%,6% 100%); }
.chapter-stroke.red { background: var(--red); }
.chapter-stroke.blue { background: var(--blue); }
.chapter-mark { position: absolute; top: 35px; right: 33px; font: italic 700 64px/1 Arial, sans-serif; color: rgb(8 70 178 / 14%); }
.chapter h2 { margin: 26px 0 18px; font-size: 38px; line-height: 1.25; letter-spacing: .06em; }
.chapter > p:last-child { max-width: 220px; margin: 0; font-size: 13px; line-height: 1.9; }
.closing blockquote { margin: 34px 0 0; font-size: 27px; line-height: 1.7; }
.heart { margin-top: 34px; color: var(--red); font-size: 25px; transform: rotate(-8deg); }
.colophon { position: absolute; left: 44px; right: 44px; bottom: 52px; padding-top: 17px; border-top: 1px solid #9c917f; font-size: 10px; line-height: 1.7; }
.back-cover { display: grid; place-items: center; background: #173d87 url("style/cloth-weave.svg"); color: #efe4cd; }
.back-mark { font: 600 12px Arial, sans-serif; letter-spacing: .2em; transform: rotate(-90deg); }
.back-dot { position: absolute; right: 34px; bottom: 38px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.controls { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 16px; width: min(100%, 290px); margin: auto; }
.controls button { border: 1px solid #aaa397; border-radius: 50%; width: 36px; height: 36px; padding: 0; background: rgb(255 255 255 / 55%); font: 400 15px Arial, sans-serif; cursor: pointer; }
.controls button:disabled { opacity: .28; cursor: default; }
.status { display: grid; gap: 3px; text-align: center; }.status span { font: 600 10px/1.4 Arial, sans-serif; letter-spacing: .05em; color: #5e5a53; }.status small { font: 400 9px/1.4 Arial, sans-serif; color: #89837a; }
.editor-panel { position: fixed; z-index: 1000; inset: 0 0 0 auto; width: 300px; padding: 22px; overflow: auto; background: #f3ede1 url("style/paper-grain.svg"); box-shadow: -12px 0 30px rgb(54 44 29 / 18%); transform: translateX(105%); transition: transform .28s ease; }
body.editor-open .editor-panel { transform: translateX(0); }
.editor-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 2px solid #26231d; padding-bottom: 14px; }.editor-head small { font: 700 8px Arial, sans-serif; letter-spacing: .16em; color: var(--red); }.editor-head h2 { margin: 5px 0 0; font-size: 20px; }.editor-head button { border: 0; background: none; font-size: 25px; cursor: pointer; }
.editor-help { color: #6d675d; font: 11px/1.65 Arial, sans-serif; }
.editor-group, .editor-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }.editor-section { grid-template-columns: 1fr; padding-top: 16px; border-top: 1px solid #c8bdac; }
.editor-group.compact { margin-top: 0; }
.editor-panel button, .file-button { display: grid; place-items: center; min-height: 38px; border: 1px solid #928878; padding: 8px; background: #fffaf0; font: 600 10px/1.35 Arial, sans-serif; text-align: center; cursor: pointer; }.file-button input { display: none; }.file-button.wide { width: 100%; }.editor-panel .primary { border-color: #164cbb; background: #164cbb; color: white; }.editor-panel .danger { color: #a02b22; }.editor-section > label:first-child { font: 700 9px Arial, sans-serif; letter-spacing: .1em; }#editor-message { display: block; margin-top: 18px; color: #6d675d; font: 10px/1.5 Arial, sans-serif; }
.selection-name { margin-top: 14px; border-left: 4px solid var(--blue); padding: 9px 10px; background: rgb(255 255 255 / 48%); font: 600 10px/1.4 Arial, sans-serif; }
#page-color { width: 100%; height: 38px; border: 1px solid #928878; background: transparent; cursor: pointer; }
.design-mode .design-item { cursor: default; }
.design-mode [contenteditable="true"] { cursor: text; }
.design-mode [data-text-editable="true"] { cursor: text; caret-color: var(--pink); }
.design-mode .design-selected { outline: 2px solid var(--pink) !important; outline-offset: 2px; }
.design-mode .page-selected { outline: 3px solid var(--blue) !important; outline-offset: -4px; }
.design-mode .book-page h1:hover, .design-mode .book-page h2:hover, .design-mode .book-page h3:hover, .design-mode .book-page p:hover, .design-mode .book-page blockquote:hover, .design-mode .title-page:hover, .design-mode .colophon:hover { outline: 1px dashed rgb(237 78 154 / 65%); outline-offset: 3px; }
.design-mode .design-item:hover:not(:has(.design-item:hover)) { outline: 1px dashed rgb(237 78 154 / 70%); outline-offset: 2px; }
.design-handle { position: absolute; z-index: 99; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--pink); box-shadow: 0 1px 5px rgb(0 0 0 / 35%); touch-action: none; }
.design-move { left: 50%; top: -12px; translate: -50% 0; cursor: move; }
.design-resize { right: -10px; bottom: -10px; cursor: nwse-resize; }
.user-text { position: absolute; z-index: 4; left: 12%; top: 14%; width: 72%; min-height: 34px; padding: 5px; font-size: 18px; background: rgb(245 237 220 / 72%); }
.user-added { position: absolute; z-index: 2; right: 8%; bottom: 8%; width: 44%; height: 38%; object-fit: cover; border: 7px solid #f5eddd; box-shadow: 0 4px 10px rgb(36 30 21 / 22%); transform: rotate(2deg); }
a:focus-visible, button:focus-visible, label:focus-within { outline: 2px solid #164cbb; outline-offset: 3px; }
@media (max-width: 900px) { body.editor-open .room { margin-right: 0; } .editor-panel { width: min(88vw, 320px); } }
@media (max-width: 700px) { .room { padding: 12px 8px; } .book-header { grid-template-columns: 1fr auto; } .book-header > span { display: none; } .book-header h1 { font-size: 13px; } #orientation { display: none; } }
@media (prefers-reduced-motion: reduce) { .book, .editor-panel, .room { transition: none; } }
@media print { body { overflow: visible; } .book-header, .controls, .editor-panel { display: none; } }

/* Direct-on-canvas editor: compact floating dock, no sidebar. */
body.editor-open .room { margin-right: 0; }
.room { padding-bottom: 16px; }
.edit-hint { border: 1px solid #b7aea1; border-radius: 999px; padding: 5px 8px; background: rgb(255 255 255 / 45%); }
.editor-panel.editor-dock { position: fixed; z-index: 1000; inset: auto auto 10px 50%; width: min(1120px, calc(100vw - 24px)); height: auto; max-height: none; padding: 7px; overflow-x: auto; overflow-y: hidden; border: 1px solid rgb(126 116 103 / 45%); border-radius: 14px; background: rgb(244 238 226 / 94%); box-shadow: 0 8px 30px rgb(54 44 29 / 25%); transform: translateX(-50%) !important; backdrop-filter: blur(12px); }
body.editor-open .editor-panel.editor-dock { transform: translateX(-50%) !important; }
.dock-row { display: flex; align-items: center; gap: 5px; min-width: max-content; }
.dock-row + .dock-row { margin-top: 5px; padding-top: 5px; border-top: 1px solid #d1c6b7; }
.editor-dock .selection-name { flex: 0 0 178px; max-width: 178px; margin: 0; padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-dock button, .editor-dock .file-button { display: inline-grid; place-items: center; min-width: 34px; min-height: 30px; border: 1px solid #aaa08f; border-radius: 7px; padding: 5px 8px; background: #fffaf0; font: 600 10px/1 Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.editor-dock select { width: 150px; height: 30px; border: 1px solid #aaa08f; border-radius: 7px; padding: 4px 7px; background: #fffaf0; font: 600 10px Arial, sans-serif; }
.editor-dock button:disabled { opacity: .35; cursor: default; }
.editor-dock .primary { border-color: #164cbb; background: #164cbb; color: white; }
.dock-separator { align-self: stretch; width: 1px; margin: 2px 3px; background: #c9beae; }
.dock-label { padding-inline: 5px; font: 700 9px Arial, sans-serif; letter-spacing: .1em; }
.editor-dock #page-color { width: 34px; height: 30px; border: 1px solid #aaa08f; border-radius: 7px; padding: 2px; }
.editor-dock output { max-width: 180px; overflow: hidden; color: #6d675d; font: 10px/1.2 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.music-fab { position: fixed; z-index: 1100; top: 58px; right: 18px; }
.music-fab input { display: none; }
.music-fab button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #aea494; border-radius: 50%; background: #fffaf0; color: #164cbb; box-shadow: 0 5px 15px rgb(45 37 27 / 18%); font: 700 17px Arial, sans-serif; cursor: pointer; }
.music-fab button.playing { border-color: #164cbb; background: #164cbb; color: white; animation: music-pulse 1.8s infinite; }
@keyframes music-pulse { 50% { box-shadow: 0 0 0 7px rgb(22 76 187 / 12%); } }
@media (max-width: 700px) { .room { padding-bottom: 100px; } .editor-panel.editor-dock { bottom: 6px; width: calc(100vw - 12px); } .editor-dock .selection-name { flex-basis: 130px; max-width: 130px; } .music-fab { top: 48px; right: 9px; } }