:root{--ink:#3d4239;--muted:#807e72;--line:#d9d6ca;--paper:#f0eee6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;height:100dvh;display:flex;flex-direction:column}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button:focus-visible{outline:2px solid #7b815c;outline-offset:5px}header{margin:0 4.5%;padding:27px 0 23px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:30px;letter-spacing:1px;line-height:.95;padding:0;text-align:left}.brand span{display:block;font-size:6px;letter-spacing:2.2px;margin-top:8px}.project{font:19px Georgia,serif;letter-spacing:4px;text-align:center}.project span{display:block;font:8px Arial;letter-spacing:2.3px;margin-top:9px;color:var(--muted)}.text-button{font-size:18px;display:flex;gap:10px;align-items:center}.text-button span{font-size:11px}main{flex:1;min-height:0;display:flex;flex-direction:column}.edition{font-size:8px;letter-spacing:2px;display:flex;gap:16px;align-items:center;justify-content:center;padding-top:25px;color:var(--muted)}.edition i{height:1px;width:22px;background:#aaa999}#viewport{flex:1;min-height:150px;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;touch-action:none}#pan{transform-origin:center;will-change:transform}#book{filter:drop-shadow(0 20px 20px #45402c22)}.page{background:#fff;overflow:hidden}.page img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.page.--left:after,.page.--right:after{content:'';position:absolute;inset:0;pointer-events:none}.page.--left:after{background:linear-gradient(90deg,transparent 88%,#00000010)}.page.--right:after{background:linear-gradient(90deg,#0000000d,transparent 10%)}.page.cover{box-shadow:inset 5px 0 5px #0002;border:1px solid #7775}.under{margin:0 8%;display:flex;justify-content:space-between;font-size:8px;color:var(--muted);letter-spacing:1.5px;padding:8px 0 24px}.under span:first-child{letter-spacing:.5px;font-size:10px}nav{margin:0 auto 16px;width:min(720px,91%);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;gap:10px}nav button{height:36px;min-width:32px;font-size:21px;border-radius:50%;transition:background .2s}nav button:hover{background:#dfddd2}nav button:disabled{opacity:.25;cursor:default}.tools,.navigation{display:flex;align-items:center;gap:9px}.navigation{gap:20px}#counter{min-width:130px;text-align:center;font-size:9px;letter-spacing:1.5px}#reset{font-size:10px;border-radius:0}.separator{height:15px;width:1px;background:var(--line);margin:0 5px}footer{margin:0 4.5%;padding:17px 0;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:7px;letter-spacing:1.5px;color:var(--muted)}#thumbs{padding:14px 5%;overflow:auto;white-space:nowrap;background:#e8e5db;border-top:1px solid var(--line);max-height:120px}#thumbs button{width:90px;padding:5px;display:inline-flex;flex-direction:column;gap:5px;font-size:9px;margin-right:7px;border:1px solid transparent}#thumbs button.active{border-color:#73785e}#thumbs img{width:78px;height:52px;object-fit:contain;background:white}#loading{position:absolute;font:14px Georgia;color:var(--muted)}#notice{margin:0;text-align:center;font-size:11px;color:#866644}body:fullscreen{background:var(--paper)}@media(max-width:650px){header{padding:20px 0}.project{font-size:14px;letter-spacing:2px}.brand{font-size:25px}.text-button span{display:none}.edition{font-size:6px;letter-spacing:1px;gap:8px;padding-top:20px}.under{margin:0 5%;padding-bottom:15px}.under span:last-child{display:none}nav{gap:2px;flex-wrap:wrap;justify-content:center;padding-top:10px}.navigation{order:-1;width:100%;justify-content:center;gap:30px}.tools{gap:10px}nav>.tools:first-child{margin-right:20px}footer{font-size:6px}#thumbs{max-height:100px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Aquamarine navigation */
:root{--ocean:#155965;--ocean-deep:#104650;--aqua:#b9e8e7;--control:#f0faf8}
nav{position:relative;width:min(760px,calc(100% - 32px));padding:12px 16px;margin-bottom:20px;border:1px solid #ffffff35;border-radius:22px;background:var(--ocean);color:var(--control);box-shadow:0 8px 24px #10465022;gap:12px;isolation:isolate;overflow:hidden}
nav:after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;background:linear-gradient(to right,var(--aqua) var(--progress,0%),transparent var(--progress,0%));pointer-events:none}
nav button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;transition:background .18s,transform .18s,box-shadow .18s;touch-action:manipulation}
nav button:hover{background:#ffffff1c;transform:translateY(-2px)}nav button:active{transform:scale(.94)}nav button:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}nav button:disabled{opacity:.28;transform:none;background:none}
nav button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
nav .navigation{gap:14px}nav #prev,nav #next{background:#ffffff15;border:1px solid #ffffff20}nav #prev:hover,nav #next:hover{background:#ffffff2e}nav #counter{font-size:9px;letter-spacing:1.6px;min-width:132px}nav #reset{width:48px;font-size:10px;border-radius:10px;color:var(--aqua)}nav .separator{background:#ffffff30;margin:0 3px}.tools{gap:5px}#thumbnails[aria-expanded=true]{background:#ffffff28;color:var(--aqua)}
#thumbs{background:#dfebea;border-color:#bed2d0;padding-top:14px;padding-bottom:14px;scroll-behavior:smooth}#thumbs button{border-radius:8px;transition:background .2s,transform .2s;border:1px solid transparent;padding:6px}#thumbs button:hover{background:#c7dcda;transform:translateY(-2px)}#thumbs button.active{background:#155965;color:#fff;border-color:#155965}#thumbs img{border-radius:2px}.intro-playing #hint{color:var(--ocean)}
@media(max-width:650px){nav{padding:10px 12px 12px;gap:7px;border-radius:22px;margin-bottom:14px;width:calc(100% - 28px);max-width:430px}.navigation{padding-bottom:7px;border-bottom:1px solid #ffffff1c;margin-bottom:1px}nav .navigation{gap:26px}nav>.tools:first-child{margin-right:12px}.tools{gap:6px}nav button{width:40px;height:40px;min-width:36px}nav #counter{font-size:9px;min-width:132px}.under{padding-bottom:16px}.under span:first-child{font-size:10px}.edition{padding-top:28px}}
@media(prefers-reduced-motion:reduce){nav button,#thumbs button{transition:none;transform:none!important}}

#pan{position:relative}.intro-sheet{position:absolute;left:0;top:0;z-index:20;pointer-events:none;filter:drop-shadow(0 16px 18px #203c3c20)}