:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;color:#f4f4ee;background:#101e2a;font-size:14px}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,select{font:inherit;color:inherit;border:1px solid #425362;background:#203546;border-radius:7px;min-height:44px;padding:8px 14px;cursor:pointer}button:hover,select:hover{background:#304c60}button:disabled{opacity:.3;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,main:focus-visible{outline:3px solid #e9c476;outline-offset:2px}header{display:flex;align-items:center;gap:12px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));border-bottom:1px solid #314453;background:#152a3b}.brand{color:#f5f2e6;text-decoration:none;font-size:25px;letter-spacing:3px;font-weight:800;line-height:1.1}.brand span{display:block;font-size:8px;letter-spacing:2px;margin-top:5px}.subtitle{flex:1;color:#b8c9d4;font-size:12px}header #contents{margin-left:auto}#help{padding:8px 12px}main{flex:1;min-height:0;position:relative;overflow:auto;overscroll-behavior:contain;touch-action:none;background:radial-gradient(ellipse at center,#304454,#101e2a 80%);scrollbar-width:thin}#canvas{position:relative;min-width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;padding:12px}#book{display:flex;flex-direction:row-reverse;flex-shrink:0;gap:2px;box-shadow:0 12px 42px #0006;user-select:none}#book img{display:block;flex-shrink:0;object-fit:contain;background:#fff;pointer-events:none}#message{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;width:min(90%,450px);line-height:1.8}#message:empty{display:none}#message button{display:block;margin:16px auto}footer{padding:8px max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#152a3b;border-top:1px solid #314453}.tools{display:flex;justify-content:center;align-items:center;gap:18px}.tools label{font-size:12px;color:#c4d0d8}.tools select{margin-left:4px}.zoom{display:flex;gap:3px}.zoom button{min-width:44px;padding:6px 12px}#reset{min-width:65px;font-variant-numeric:tabular-nums}.navigation{display:flex;align-items:center;justify-content:center;gap:22px;margin:7px auto 0;max-width:780px}.navigation>button{min-width:100px}.navigation #next{background:#d9bb7c;color:#192c3b;border-color:#d9bb7c;font-weight:700}.position{text-align:center;flex:1;min-width:0}.position strong{font-size:14px;font-variant-numeric:tabular-nums}.position span{display:block;font-size:11px;color:#c0cdd5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}#progress{display:block;width:min(100%,780px);height:20px;margin:3px auto 0;accent-color:#d9bb7c;cursor:pointer}.hint{margin:0;text-align:center;color:#a7bdcb;font-size:10px}#resume{padding:8px 16px;background:#324c5e;display:flex;gap:10px;align-items:center;justify-content:center;font-size:12px}#resume[hidden]{display:none}dialog{background:#172d3e;color:#eef4f7;border:1px solid #526573;border-radius:12px;max-width:680px;width:calc(100% - 24px);max-height:85dvh;padding:20px}dialog::backdrop{background:#071018bb}.dialogHead{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-20px;padding:10px 0;background:#172d3e;z-index:1}h2{margin:0;font-size:20px}h2 small{font-size:12px;font-weight:400;color:#afc2d0}#chapters{display:grid;grid-template-columns:1fr 1fr;gap:10px}#chapters button{display:flex;align-items:center;text-align:left;gap:12px;padding:10px}#chapters img{width:48px;height:68px;object-fit:contain;background:#263d4c}#chapters span{font-size:13px;line-height:1.6}#chapters small{display:block;color:#c0d0da;font-size:10px}dialog p{line-height:1.9}@media(max-width:600px){header{padding:9px 12px;gap:8px}.subtitle{display:none}.brand{font-size:21px}.tools{gap:9px}footer{padding:7px 10px max(7px,env(safe-area-inset-bottom))}.navigation{gap:10px}.navigation>button{min-width:82px;padding:8px}.position span{max-width:200px}.tools select{padding:6px}#chapters{grid-template-columns:1fr}#canvas{padding:4px}#resume{flex-wrap:wrap}}@media(max-height:500px){header{padding:4px 12px}.brand{font-size:18px}.brand span,.subtitle,.hint{display:none}footer{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:4px 12px}.tools{gap:6px}.navigation{margin:0;width:100%;gap:8px}#progress{grid-column:1/-1;margin:0;height:12px}.position span{display:none}button,select{min-height:38px;padding:5px 10px}#canvas{padding:4px}}
@media(max-width:360px){body .tools{gap:5px}body .tools label{font-size:0;white-space:nowrap}body .tools select{font-size:12px;margin:0;width:77px}body .zoom button{min-width:38px;padding:5px 8px}body #reset{min-width:54px}body #full{font-size:12px;padding:6px;white-space:nowrap}}
.page-turn{position:absolute;perspective:6000px;pointer-events:none;z-index:2;isolation:isolate}
.turn-leaf{position:absolute;top:0;height:100%;transform-style:preserve-3d;will-change:transform}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;background:#fff}
.turn-front{transform:rotateY(0deg)}
.turn-face img,.turn-light{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.turn-face img,.turn-stationary img,.turn-underlay img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.turn-back{transform:rotateY(180deg)}
.turn-light{position:absolute;inset:0;background:linear-gradient(90deg,#34220f80,#34220f00 20%,#fff2 65%,#34220f50);pointer-events:none;opacity:0}
.turn-stationary{position:absolute;top:0;width:50%;height:100%;background:#fff}
.turn-underlay{position:absolute;inset:0;background:#fff}
.turn-shadow{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,transparent,#000 50%,transparent);opacity:0;will-change:transform,opacity}
#viewport[data-turning="true"]{overflow:hidden}
#canvas #book{flex-direction:row;gap:0;box-shadow:none}
/* Native fullscreen is a reading surface: only the artwork and page arrows. */
:root:is(:fullscreen,.reader-full) body{width:100%;height:100vh;height:100dvh;background:#080e14}
:root:is(:fullscreen,.reader-full) header,:root:is(:fullscreen,.reader-full) #resume,:root:is(:fullscreen,.reader-full) .tools,:root:is(:fullscreen,.reader-full) .position,:root:is(:fullscreen,.reader-full) #progress,:root:is(:fullscreen,.reader-full) .hint{display:none!important}
:root:is(:fullscreen,.reader-full) #viewport{background:#080e14;width:100%;height:100%;flex:1}
:root:is(:fullscreen,.reader-full) #canvas{padding:0}
:root:is(:fullscreen,.reader-full) footer{position:fixed;inset:0;padding:0;border:0;background:transparent;pointer-events:none;display:block;z-index:5}
:root:is(:fullscreen,.reader-full) .navigation{position:absolute;inset:0;max-width:none;width:100%;margin:0;display:block;pointer-events:none}
:root:is(:fullscreen,.reader-full) .navigation>button{position:absolute;top:50%;transform:translateY(-50%);width:48px;min-width:48px;height:64px;padding:0;border:1px solid #ffffff38;border-radius:8px;background:#07131da8;color:#fff;font-size:0;pointer-events:auto}
:root:is(:fullscreen,.reader-full) #previous{left:max(12px,env(safe-area-inset-left))}
:root:is(:fullscreen,.reader-full) #next{right:max(12px,env(safe-area-inset-right))}
:root:is(:fullscreen,.reader-full) #previous::after{content:'‹';font-size:38px;line-height:1}
:root:is(:fullscreen,.reader-full) #next::after{content:'›';font-size:38px;line-height:1}
:root:is(:fullscreen,.reader-full) .navigation>button:disabled{visibility:hidden}
:root:is(:fullscreen,.reader-full) .navigation #next{background:#07131da8;color:#fff;border-color:#ffffff38}
@media(max-width:600px) and (max-aspect-ratio:2/3){:root:is(:fullscreen,.reader-full) .navigation>button{top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:none}}