:root{color-scheme:light;--ink:#403b49;--paper:#fffaf0;--accent:#51446c;font-family:'BIZ UDPGothic','Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;color:var(--ink);font-weight:600;font-size:18px}*{box-sizing:border-box}body{margin:0;background:#eee6dc;overflow:hidden}button{font:inherit;font-size:18px;font-weight:700;min-width:56px;min-height:56px;padding:8px 16px;border:1px solid #a39bab;border-radius:18px;background:#fffaf0;color:var(--ink);cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #51446c;outline-offset:3px}button:hover{background:#e6deee}button:disabled{opacity:.55;cursor:default}.reader{height:100svh;height:100dvh;max-width:1500px;margin:auto;display:grid;grid-template-rows:72px minmax(0,1fr) 84px;padding:0 24px max(8px,env(safe-area-inset-bottom));gap:8px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}.series{font-family:'Yu Mincho',serif;font-size:24px;letter-spacing:.12em}.series b{display:inline-grid;place-items:center;background:#51446c;color:#fffaf0;border-radius:50%;width:32px;height:32px;font-size:20px}#book{touch-action:pan-y;display:grid;grid-template-columns:58% 42%;min-height:0;background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:0 10px 40px #41324818;border:1px solid #d9cdbc}.picture{position:relative;min-width:0;min-height:0;overflow:hidden;background:#e0dce5;display:flex;align-items:center}.picture img{width:100%;height:100%;object-fit:contain;display:block;animation:breathe 16s ease-in-out infinite alternate}.paper{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 16px;position:relative;text-align:center;background:radial-gradient(ellipse at top,#f4edfa66,transparent 70%),var(--paper);min-height:0;min-width:0}.ornament{font-size:38px;color:#67527d;margin-bottom:22px}h1{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(28px,3vw,42px);line-height:1.5;letter-spacing:.08em;margin:0 0 24px;white-space:pre-line}h1:empty{display:none}p{font-size:clamp(18px,2vw,26px);line-height:1.85;white-space:pre-line;margin:0;font-weight:600}#endmark{margin-top:20px;font-size:18px;letter-spacing:.2em}footer{display:flex;justify-content:center;align-items:center;gap:24px}#next{background:#51446c;color:#fffaf0;border-color:#51446c;min-width:140px}#prev{min-width:140px}#counter{min-width:64px;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}#effects{position:absolute;inset:0;pointer-events:none;overflow:hidden}.mote{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#fff4b7;box-shadow:0 0 12px #fff3b5;animation:glimmer var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay)}.breeze .mote{width:16px;height:5px;background:#fff8db99;box-shadow:none;animation-name:drift}.cloud .mote{width:100px;height:28px;filter:blur(14px);background:#fff4eb44;animation-name:drift}.light .mote{width:70px;height:70px;filter:blur(16px);background:#ffe6ab22;box-shadow:none}.turn{animation:pagein .55s ease-out}@keyframes pagein{from{opacity:.4;transform:translateX(var(--direction,12px))}to{opacity:1;transform:none}}@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.025)}}@keyframes glimmer{0%{opacity:.12;transform:scale(.7)}100%{opacity:.8;transform:scale(1.25)}}@keyframes drift{from{opacity:.1;transform:translate(-18px,10px) rotate(-12deg)}to{opacity:.65;transform:translate(24px,-14px) rotate(20deg)}}dialog{color:var(--ink);background:var(--paper);border:1px solid #b0a2bd;border-radius:24px;width:min(540px,calc(100vw - 24px));padding:16px;max-height:calc(100dvh - 24px);overflow:hidden}dialog::backdrop{background:#29203988;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}h2{font-size:24px;margin:0}#chapters{display:grid;gap:8px}#chapters button{text-align:left;display:flex;align-items:center;gap:12px;font-size:18px}#chapters img{width:60px;height:40px;object-fit:cover;border-radius:7px}#chapters [aria-current=true]{border:2px solid #51446c;background:#eae2f1}.chapter-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}#group{font-size:16px}#motion{margin-top:12px;width:100%}#imageError{position:absolute;inset:0;background:#eee6dc;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:16px;text-align:center;font-size:18px}#imageError:not([hidden]){display:flex}[hidden]{display:none!important}
@media(orientation:portrait){.reader{padding-left:12px;padding-right:12px;grid-template-rows:64px minmax(0,1fr) 72px;gap:8px}#book{grid-template-columns:1fr;grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);border-radius:22px}.paper{padding:12px 8px}.ornament{font-size:26px;margin-bottom:10px}p{font-size:clamp(18px,4.8vw,26px);line-height:1.7}h1{font-size:clamp(26px,6.5vw,38px);margin-bottom:12px}footer{gap:8px}#prev,#next{min-width:0;flex:1;max-width:190px;padding:8px}.series{font-size:20px}#endmark{margin-top:8px}#counter{min-width:56px}}
@media(max-height:670px) and (orientation:portrait){.reader{grid-template-rows:56px minmax(0,1fr) 64px;gap:4px}.ornament{display:none}.paper{padding:8px}p{font-size:18px;line-height:1.55}h1{font-size:25px;line-height:1.3;margin-bottom:8px}#book{grid-template-rows:minmax(0,1fr) 166px}#endmark{font-size:16px}button{font-size:16px}}
@media(max-height:500px) and (orientation:landscape){.reader{grid-template-rows:56px minmax(0,1fr) 64px;padding:0 12px 8px;gap:4px}.ornament{display:none}.paper{padding:8px}p{font-size:18px;line-height:1.5}h1{font-size:26px;line-height:1.25;margin-bottom:8px}#endmark{margin-top:4px;font-size:16px}#book{grid-template-columns:50% 50%}dialog{width:min(720px,calc(100vw - 24px));padding:12px}#chapters{grid-template-columns:1fr 1fr}.dialog-head{margin-bottom:8px}.chapter-nav{margin-top:8px;float:left;width:calc(65% - 8px)}#motion{width:35%;margin-top:8px;margin-left:8px}#chapters img{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}
.reader{padding-left:16px;padding-right:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}button:active{transform:translateY(1px);filter:brightness(.94)}p{line-height:1.6}
.picture::before{content:'';position:absolute;inset:-24px;background-image:var(--scene-image);background-size:cover;background-position:center;filter:blur(22px);opacity:.55}.picture img{position:relative;z-index:1}#effects{z-index:2}#imageError{z-index:3}

#imageLoading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:18px;z-index:3;background:#eee6dc}#art{visibility:hidden}
.reader{grid-template-rows:72px minmax(0,1fr) 88px}.footer-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:none}#counter{line-height:24px}.puchi-logo{display:flex;align-items:center;justify-content:center;width:120px;min-height:56px;border-radius:12px;padding:8px}.puchi-logo img{display:block;width:104px;height:auto}.puchi-logo:hover{background:#fffaf0}.puchi-logo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(orientation:portrait){.reader{grid-template-rows:64px minmax(0,1fr) 88px}.puchi-logo{width:96px;padding:6px}.puchi-logo img{width:84px}}
@media(max-height:670px) and (orientation:portrait), (max-height:500px) and (orientation:landscape){.reader{grid-template-rows:56px minmax(0,1fr) 88px}}
header .header-actions{display:flex;align-items:center;gap:8px}#musicButton{font-size:16px;padding:8px;min-width:88px;white-space:nowrap}
@media(max-width:430px){.series{font-size:18px;letter-spacing:0}.series b{width:24px;height:24px;font-size:18px}#menuButton{font-size:16px;padding:8px}#musicButton{min-width:80px}.reader header{gap:8px}}

.edition{font-size:14px;letter-spacing:0;margin-left:4px}.picture{background:#fff}.picture::before{display:none}
@media(max-width:350px){.edition{display:none}}
/* 紙をめくる（app.js の leaf）。写しを端からめくり上げ、90°で見えなくなる */
.leaf{z-index:50;pointer-events:none;backface-visibility:hidden;will-change:transform;animation:leaf-next .85s cubic-bezier(.45,.05,.55,.95) forwards}
.leaf-next{transform-origin:0 50%}
.leaf-prev{transform-origin:100% 50%;animation-name:leaf-prev}
.leaf .leaf-shade{position:absolute;inset:0;pointer-events:none;opacity:0;animation:leaf-shade .85s ease-in forwards}
.leaf-next .leaf-shade{background:linear-gradient(90deg,#0000 40%,#3a2c4a22 75%,#3a2c4a55)}
.leaf-prev .leaf-shade{background:linear-gradient(270deg,#0000 40%,#3a2c4a22 75%,#3a2c4a55)}
@keyframes leaf-next{0%{transform:perspective(var(--pw,2400px)) rotateY(0);box-shadow:0 10px 40px #41324818}35%{transform:perspective(var(--pw,2400px)) rotateY(-22deg) skewY(-1.2deg);box-shadow:-18px 18px 50px #41324840}100%{transform:perspective(var(--pw,2400px)) rotateY(-90deg) skewY(-2deg);box-shadow:-30px 20px 60px #41324800}}
@keyframes leaf-prev{0%{transform:perspective(var(--pw,2400px)) rotateY(0);box-shadow:0 10px 40px #41324818}35%{transform:perspective(var(--pw,2400px)) rotateY(22deg) skewY(1.2deg);box-shadow:18px 18px 50px #41324840}100%{transform:perspective(var(--pw,2400px)) rotateY(90deg) skewY(2deg);box-shadow:30px 20px 60px #41324800}}
@keyframes leaf-shade{to{opacity:1}}
/* 本文は分かち書きの空白でだけ折る（「ついてきま／す。」を防ぐ） */
#text{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}